Differences

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

--- madlibs [2022/11/07 18:03] – admin
+++ madlibs [2025/01/29 20:16] (current) – [Input Attributes] admin
@@ Line 34: / Line 34: @@
   * **[[madlibs#data-flatpickr|Date/time picker integration]]** (using flatpickr)
-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 =====
@@ Line 77: / Line 77: @@
 ==== Series of Questions ====
-As an alternative to a Side-by-side question, a series of separate questions may be used. The first question must be a Descriptive Text question that contains the Madlib fill-in fields (input and/or select elements). It is followed by Text Entry and/or Multiple Choice Dropdown questions that correspond to the fill-in fields in the Descriptive Text question. The advantages of using a series of questions are that the drop downs are easier to configure, validation is more flexible, and if the Madlib happens to be a screening question, it enables generation of test responses with Q_PopulateResponse (due to a bug in Generate Test Responses Side-by-side questions don't work properly when the answer is specified with Q_PopulateResponse). When using a series of questions, only one Madlib question per page is supported and the Madlib series of questions __must__ be the only answerable questions on the page (other descriptive text questions are allowed).
+As an alternative to a Side-by-side question, a series of separate questions may be used. The first question must be a Text/Graphic question that contains the Madlib fill-in fields (input and/or select elements). It is followed by Text Entry and/or Multiple Choice Dropdown questions that correspond to the fill-in fields in the Text/Graphic question. The advantages of using a series of questions are that the drop downs are easier to configure, validation is more flexible, and if the Madlib happens to be a screening question, it enables generation of test responses with Q_PopulateResponse (due to a bug in Generate Test Responses Side-by-side questions don't work properly when the answer is specified with Q_PopulateResponse). When using a series of questions, only one Madlib question per page is supported and the Madlib series of questions __must__ be the only answerable questions on the page (other Text/Graphic questions are allowed).
-After the descriptive text question with fill-in elements, add text entry and/or multiple choice dropdown questions to match. There must be the __same number__ of text entry and/or multiple choice dropdown questions as there are fill-in-the-blanks in the Madlib. The questions __must__ be in the __same order__ as the fill-in-the-blank inputs (text inputs and drop downs).
+After the Text/Graphic question with fill-in elements, add text entry and/or multiple choice dropdown questions to match. There must be the __same number__ of text entry and/or multiple choice dropdown questions as there are fill-in-the-blanks in the Madlib. The questions __must__ be in the __same order__ as the fill-in-the-blank inputs (text inputs and drop downs).
 === Drop Down ===
@@ Line 88: / Line 88: @@
 ==== JavaScript Function Call ====
-Add JS to either the Side-by-Side question or the Descriptive Text question containing fill-in fields as follows:
+Add JS to either the Side-by-Side question or the Text/Graphic question containing fill-in fields as follows:
 <code>
 Qualtrics.SurveyEngine.addOnReady(function() {
@@ Line 118: / Line 118: @@
 === Style ===
-To hide the question from the respondent while it is being formatted by JS, add a <style> tag to the question text: <code>
+To hide the question from the respondent while it is being formatted by JS, add an embedded data field to the beginning of the survey flow:
-<style>.Skin .QuestionOuter { opacity:0; }</style>
+<code>
+opacity0 = opacity:0;
+</code>
+Then add a <style> tag to the question text: <code>
+<style>.Skin { ${e://Field/opacity0} }</style>
+</code>
+An embedded data field is used so opacity style does not impact survey editing. Add the following to a question later in the survey so that 'View response' or 'Export to PDF' are not impacted:<code>
+<style>.Skin { opacity:1; }</style>
 </code>
@@ Line 142: / Line 149: @@
 === class ===
-The following **class** names can be used to format or configure a MadLib input. class="fillin" is __required__ for all MadLib input or select (drop down) elements. All other class names are optional and only apply to input elements.
+The following **class** names can be used to format or configure a MadLib input. class=%%"fillin"%% is __required__ for all MadLib input or select (drop down) elements. All other class names are optional.
 == cleaveRaw ==
-The **cleaveRaw** class only applies to a cleave field with numeric formatting. When cleaveRaw is included, the raw value instead of the formatted value of the input is saved in Qualtrics.
+The **cleaveRaw** class only applies to a cleave field with numeric formatting. When cleaveRaw is included, the raw value instead of the formatted value of the input is saved in Qualtrics. Applies to input elements only.
 == decimal ==
-The **decimal** class applies an input mask to an open end Madlib input so only valid decimal values may be entered. **decimal** is ignored if cleave or flatpickr is used.
+The **decimal** class applies an input mask to an open end Madlib input so only valid decimal values may be entered. **decimal** is ignored if cleave or flatpickr is used. Applies to input elements only.
 == fillin ==
 The **fillin** class is __required__ for all MadLibs input or select elements.
 == integer ==
-The **integer** class applies an input mask to an open end Madlib input so only valid integer values may be entered. **integer** is ignored if cleave or flatpickr is used.
+The **integer** class applies an input mask to an open end Madlib input so only valid integer values may be entered. **integer** is ignored if cleave or flatpickr is used. Applies to input elements only.
 == lower ==
-The **lower** class applies an input mask to an open end Madlib input so all letters are converted to lowercase. **lower** is ignored if cleave or flatpickr is used.
+The **lower** class applies an input mask to an open end Madlib input so all letters are converted to lowercase. **lower** is ignored if cleave or flatpickr is used. Applies to input elements only.
 == nospinner ==
-The **nospinner** class hides the up/down arrows (spinner) associated with type="number" input fields. It ONLY applies when type="number". It has no impact on mouse scroll increment/decrement.
+The **nospinner** class hides the up/down arrows (spinner) associated with %%type="number"%% input fields. It ONLY applies when %%type="number"%%. It has no impact on mouse scroll increment/decrement. Applies to input elements only.
 == proper ==
-The **proper** class applies an input mask to an open end Madlib input so the first letter of each word is capitalized. **proper** is ignored if cleave or flatpickr is used.
+The **proper** class applies an input mask to an open end Madlib input so the first letter of each word is capitalized. **proper** is ignored if cleave or flatpickr is used. Applies to input elements only.
+== s2off ==
+The **s2off** class disables select2 on select elements. Use of the s2off class does not support the placeholder attribute. Applies to select elements only.
 == upper ==
-The **upper** class applies an input mask to an open end Madlib input so all letters are converted to uppercase. **upper** is ignored if cleave or flatpickr is used.
+The **upper** class applies an input mask to an open end Madlib input so all letters are converted to uppercase. **upper** is ignored if cleave or flatpickr is used. Applies to input elements only.
 == wholenum ==
-The **wholenum** class applies an input mask to an open end Madlib input so only valid whole number values may be entered. **wholenum** is ignored if cleave or flatpickr is used.
+The **wholenum** class applies an input mask to an open end Madlib input so only valid whole number values may be entered. **wholenum** is ignored if cleave or flatpickr is used. Applies to input elements only.
 === data-cleave ===
-The **data-cleave** attribute specifies that cleave should be used for input masking. The value is a json string that specifies the [[https://github.com/nosir/cleave.js/blob/master/doc/options.md|cleave options]] that should be used. For example, to capture dollars data-cleave could look like this:
+The **data-cleave** attribute specifies that cleave should be used for input masking. It applies to input elements only. The value is a json string that specifies the [[https://github.com/nosir/cleave.js/blob/master/doc/options.md|cleave options]] that should be used. For example, to capture dollars data-cleave could look like this:
 <code>
 data-cleave='{"numeral":"true","prefix":"$","noImmediatePrefix":"true","rawValueTrimPrefix":"true"}'
@@ Line 169: / Line 178: @@
 === data-flatpickr ===
-The **data-flatpickr** attribute specifies that flatpickr should be used to pick a date and/or time. The value is a json string that specifies the [[https://flatpickr.js.org/options/|flatpickr options]] that should be used. For example, to pick a date in month/date/year format data-flatpickr would look like this:
+The **data-flatpickr** attribute specifies that flatpickr should be used to pick a date and/or time. It applies to input elements only. The value is a json string that specifies the [[https://flatpickr.js.org/options/|flatpickr options]] that should be used. For example, to pick a date in month/date/year format data-flatpickr would look like this:
 <code>
 data-flatpickr='{"dateFormat":"m/d/Y"}'
@@ Line 175: / Line 184: @@
 === inputmode ===
-The **inputmode** attribute can be used to specify the type of on-screen keyboard that is shown when a MadLib text input gains focus. For example, inputmode="numeric" can be added to a numeric input field. Valid values are: text, decimal, numeric, tel, search, email, and url.
+The **inputmode** attribute can be used to specify the type of on-screen keyboard that is shown when a MadLib text input gains focus. For example, inputmode=%%"numeric"%% can be added to a numeric input field. Valid values are: text, decimal, numeric, tel, search, email, and url. Applies to input elements only.
 === maxlength ===
-The **maxlength** attribute can be used to specify the maximum number of characters for an input field.
+The **maxlength** attribute can be used to specify the maximum number of characters for an input field. Applies to input elements only.
 === placeholder ===
-The **placeholder** attribute is optional, but important. It contains instructional text that is shown in a MadLib input with a empty value. The length of the text determines the initial size of the input field.
+The **placeholder** attribute is optional, but important. It contains instructional text that is shown in a MadLib input with a empty value. The length of the text determines the initial size of the input field. Does not apply to select elements with the class **[[madlibs#s2off|s2off]]**.
 === type ===
 The **type** attribute is __required__ for input elements. It's value should be **text** or **number**. Browser support for other type values is spotty and they don't provide any value beyond the MadLib configuration options provided. Therefore, they are not recommended.
 == text ==
-**type="text"** may be used for any MadLib input, and should be used for all Madlib inputs except open-end numeric inputs.
+**type=%%"text"%%** may be used for any MadLib input, and should be used for all Madlib inputs except open-end numeric inputs.
 == number ==
-**type="number"** may be used for open-end numeric inputs. type="number" enables number specific behaviors (mouse scroll to increment/decrement, up/down spinner) and attributes (min, max, step)
+**type=%%"number"%%** may be used for open-end numeric inputs. type=%%"number"%% enables number specific behaviors (mouse scroll to increment/decrement, up/down spinner) and attributes (min, max, step)
 ==== Word Completion ====