| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| madlibs [2025/01/29 20:02] – admin | madlibs [2025/01/29 20:16] (current) – [Input Attributes] admin |
|---|
| |
| ==== Series of Questions ==== | ==== 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 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 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 === | === Drop Down === |
| |
| ==== JavaScript Function Call ==== | ==== 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> | <code> |
| Qualtrics.SurveyEngine.addOnReady(function() { | Qualtrics.SurveyEngine.addOnReady(function() { |
| <style>.Skin { ${e://Field/opacity0} }</style> | <style>.Skin { ${e://Field/opacity0} }</style> |
| </code> | </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 === | === Text Input === |
| |
| === inputmode === | === 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 === | === maxlength === |
| **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 == | == 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 ==== | ==== Word Completion ==== |
