Differences

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

--- madlibs [2024/04/12 10:56] – admin
+++ madlibs [2025/01/29 20:16] (current) – [Input Attributes] admin
@@ 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 125: / Line 125: @@
 <style>.Skin { ${e://Field/opacity0} }</style>
 </code>
-An embedded data field is used so opacity style does not impact 'View response' or 'Export to PDF'.
+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>
 === Text Input ===
@@ Line 170: / Line 172: @@
 === 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 182: / 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. Applies to input elements only.
+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. It applies to input elements only.
+The **maxlength** attribute can be used to specify the maximum number of characters for an input field. Applies to input elements only.
 === placeholder ===
@@ Line 195: / Line 197: @@
 **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 ====