Differences

This shows you the differences between two versions of the page.

--- mctextentry [2022/09/10 12:02] – admin
+++ mctextentry [2023/10/20 08:12] (current) – [horizPad] admin
@@ Line 4: / Line 4: @@
   * Automatically clears entered text from de-selected choices as needed based on choice exclusivity
   * Focuses on text input fields when associated choice is selected
-  * Adds placeholder text
   * Removes white space from beginning and end of entered text
   * Sets specified or auto-detected background color
   * Optionally hides text inputs of unselected choices
   * Optionally sets text input heights and widths
+  * Optionally adds placeholder text
+  * Optionally adds prefixes or suffixes
   * Works with in-page display logic
@@ Line 17: / Line 18: @@
 {{ ::mcTextEntry_hide.mp4?800 |mcTextEntry Demonstration}}
-This function is available for a reasonable fee. Contact [[https://community.qualtrics.com/XMcommunity/messages/add/TomG|TomG]] on the Qualtrics Community to learn more.
+This function is available for a reasonable fee. Contact **[[https://community.qualtrics.com/inbox/conversation?with=373|TomG]]** on the Qualtrics Community to learn more.
 ===== Set-up Instructions =====
 ==== Survey Header ====
-To make the function available to all questions in the survey, copy the function to the Survey Header inside a script tag:
 Add the mcTextEntry function to the survey header to make it available to any question in the survey.   Go to Look & Feel -> General -> Header edit -> {{::icon_source.jpg?20|}} and paste the provided mcTextEntry function JS:
 <code>
@@ Line 34: / Line 34: @@
 </code>
-To override the default options, specify the desired [[mctextentry#options|options]] in the second function argument as an object. For example:
+To override the default options, specify the desired **[[mctextentry#options|options]]** in the second function argument as an object. For example:
 <code>
 Qualtrics.SurveyEngine.addOnload(function() {
@@ Line 42: / Line 42: @@
 ===== Options =====
 ==== bgColor ====
-**bgColor** specifies the background color of the text entry boxes. If empty (""), the background color is automatically matched to the survey theme.
+**bgColor** specifies the background color of the text entry boxes. If empty (%%""%%), the background color is automatically matched to the survey theme.
-Default: "" (empty)
+Default: %%""%% (empty)
 ==== breakBeforeText ====
 **breakBeforeText** specifies if the text entry boxes should be below (true) or on the same line (false) as the choice label text. The global break can be overridden for individual choices by adding the following html to the choice label text:\\
 <code>
-<span data-inputbreak="false">Choice text</span>
+<span data-textbreak="false">Choice text</span>
 </code>
@@ Line 57: / Line 57: @@
 Default: false
 ==== horizPad ====
-**horizPad** is used to reduce the amount of label/text box left/right padding from the default for multiple choice questions in a horizontal position. Leave empty "" to use default padding.
+**horizPad** is used to reduce the amount of label/text box left/right padding from the default for multiple choice questions in a horizontal position. Leave empty %%("")%% to use default padding.
-Default: 5px
+Default: %%"5px"%%
 ==== multiColPad ====
-**multiColPad** is used to reduce the amount of label/text box left/right padding from the default for multiple choice questions with columns. Leave empty "" to use default padding.
+**multiColPad** is used to reduce the amount of label/text box left/right padding from the default for multiple choice questions with columns. Leave empty (%%""%%) to use default padding.
-Default: 5px
+Default: %%"5px"%%
 ==== placeholder ====
-**placeholder** sets a global placeholder for all text entry boxes in the question. Set to empty ("") for no global placeholder. The global placeholder can be overridden for individual choices by adding the following html to the choice label text:\\
+**placeholder** sets a global placeholder for all text entry boxes in the question. Set to empty (%%""%%) for no global placeholder. The global placeholder can be overridden for individual choices by adding the following html to the choice label text:\\
 <code>
-<span data-inputph="placeholder text">Choice text</span>
+<span data-textph="placeholder text">Choice text</span>
 </code>
-Default: "" (empty)
+Default: %%""%% (empty)
+==== prefix ====
+**prefix** sets a global prefix text for all text entry boxes in the question. Set to empty (%%""%%) for no global prefix text. The global prefix text can be overridden for individual choices by adding the following html to the choice label text:\\
+<code>
+<span data-textprefix="prefix text">Choice text</span>
+</code>
+Default: %%""%% (empty)
 ==== reqText ====
 **reqText** automatically de-select multi-select choices if the text entry box is empty.
 Default: true
+==== suffix ====
+**suffix** sets a global suffix text for all text entry boxes in the question. Set to empty (%%""%%) for no global suffix text. The global suffix text can be overridden for individual choices by adding the following html to the choice label text:\\
+<code>
+<span data-textsuffix="suffix text">Choice text</span>
+</code>
+Default: %%""%% (empty)
 ==== textHeight ====
-**textHeight** specifies the global height of the text entry boxes. Empty ("") uses default height. The global height can be overridden for individual choices by adding the following html to the choice label text:\\
+**textHeight** specifies the global height of the text entry boxes. Empty (%%""%%) uses default height. The global height can be overridden for individual choices by adding the following html to the choice label text:\\
 <code>
-<span data-inputhgt="specify height">Choice text</span>
+<span data-texthgt="specify height">Choice text</span>
 </code>
-Default: ""
+Default: %%""%%
 ==== textWidth ====
 **textWidth** specifies the global width of the text entry boxes. The global width can be overridden for individual choices by adding the following html to the choice label text:\\
 <code>
-<span data-inputwidth="specify width">Choice text</span>
+<span data-textwidth="specify width">Choice text</span>
 </code>
-Default: "100%"
+Default: %%"100%"%%
 //Note on mobile phones (screen width <= 480px)//: Qualtrics includes a css media rule "width:100%!important" that can't be overridden by the mcTextEntry function. It can be overridden by using a more specific rule (or rules). For example: