| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| formselects [2022/10/10 16:53] – [Choice Label HTML] admin | formselects [2025/02/06 11:48] (current) – [Survey Header] admin |
|---|
| * Optional dynamic option creation using select2 | * Optional dynamic option creation using select2 |
| * Supports multi-selects | * Supports multi-selects |
| * Supports back button - even when a dynamic options are created | * Supports back button - even when dynamic options are created |
| | * Supports default choices |
| * Translation friendly | * Translation friendly |
| | * Supports "New Survey Experience" (aka Simple layout)! |
| |
| Here is a quick video demonstration:\\ | Here is a quick video demonstration:\\ |
| {{ ::formSelects.mp4?770 |formSelects Demonstration}} | {{ ::formSelects.mp4?770 |formSelects 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 ===== | ===== Set-up Instructions ===== |
| ==== Survey Header ==== | ==== Survey Header ==== |
| <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" /> | <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" /> |
| <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script> | <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script> |
| | </code> |
| | === Add jQuery (only if using New Survey Experience) === |
| | <code> |
| | <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"> |
| </code> | </code> |
| === Add formSelects Function === | === Add formSelects Function === |
| </code> | </code> |
| ==== QuestionText Select HTML ==== | ==== QuestionText Select HTML ==== |
| In ''HTML View'' mode, add the html for the select(s). Each select should be assigned a unique class name that will be referenced in the corresponding **[[formselects#choice_label_html|Choice Label HTML]]**. To make a select a multi-select add the attribute ''multiple="multiple"'' to the ''<select>'' tag. Additional attributes (e.g., style) may be added to the ''<select>'' tag as needed. | In ''HTML View'' mode, add the html for the select(s). Each select should be assigned a unique class name that will be referenced in the corresponding **[[formselects#choice_label_html|Choice Label HTML]]**. To make a select a multi-select add the attribute ''multiple=%%"multiple"%%'' to the ''<select>'' tag. Additional attributes (e.g., style) may be added to the ''<select>'' tag as needed. |
| |
| ''value'' attributes are NOT required in the select's option tags. If value attributes are used, the value will be saved in Qualtrics instead of the option text. If dynamic option creation (i.e., select2 tags) is being used, the value attribute **should not** be used. | ''value'' attributes are NOT required in the select’s option tags. If value attributes are used, the value will be saved in Qualtrics instead of the option text. If dynamic option creation (i.e., select2 tags) is being used, the value attribute **should not** be used. |
| |
| Example select HTML: | Example select HTML: |
| ==== Choice Label HTML ==== | ==== Choice Label HTML ==== |
| === data-select === | === data-select === |
| To convert a field to a select put the choice label inside a ''<span>'' tag with the attribute ''data-select=//classname//'' where classname matches the class of a select tag in the **[[formselects#questiontext_select_html|QuestionText Select HTML]]**. For example: | To convert a field to a select put the choice label inside a ''<span>'' tag with the attribute ''data-select=//%%"classname"%%//'' where classname matches the class of a select tag in the **[[formselects#questiontext_select_html|QuestionText Select HTML]]**. For example: |
| <code> | <code> |
| <span data-select="states">State</span> | <span data-select="states">State</span> |