This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
en:create:inputs-single [11.12.2017 21:39] – Added JavaScript info admin | en:create:inputs-single [17.03.2021 20:52] (current) – [Extended Selection and Text] sophia.schauer | ||
---|---|---|---|
Line 5: | Line 5: | ||
**Important: | **Important: | ||
- | How to achieve a similar output with scales and other question types and how to provide a dropdown selection inside another question is described here. SoSciSurvey provides | + | How to achieve a similar output with scales and other question types and how to provide a dropdown selection inside another question is described here. SoSciSurvey provides |
{{: | {{: | ||
Line 14: | Line 14: | ||
Technically, | Technically, | ||
+ | |||
+ | First, the inputs to be used have to be created in the **list of questions**. That means you create a new question, for example a text input question. Second, a placeholder is created, consisting of '' | ||
**Tip:** Not every question type is available as independent input fields. | **Tip:** Not every question type is available as independent input fields. | ||
Line 26: | Line 28: | ||
Create a new section with the //ID// " | Create a new section with the //ID// " | ||
- | Create the superior | + | Create the question ZE01 with //type// "text input". In this question, an item is added automatically, |
- | {{:en: | + | {{:de: |
- | Create another question ZE02 with the //type// "Text input". Add one item. It is advisable to add a field width -- This example uses 100 pixels. | + | Create another question ZE02 with the //type// "dropdown" |
- | There is no need to add neither a question nor a "text in front of the input field" although the "text in front" will be used as a variable label in the data export file. | + | |
- | {{: | + | {{: |
- | Create | + | Now, create |
- | {{:en: | + | {{:de: |
- | Now we have to add placeholders into the superior | + | Now we have to add placeholders into the question |
- | The first additional input field derives from item 01 of the question ZE02. The ID of this item is ZE02_01. Use this ID as a placeholder and add percent symbols to it: '' | + | |
- | Therefore add an item to the superior question containing the //item text//: " | + | |
- | {{: | + | The first additional input field derives from item 01 of the question ZE01. The ID of this item is ZE01_01. The placeholder |
- | The preview won't show much for now: the placeholder will simply be highlighted. The input field will show later on in the questionnaire. | + | Other: %input:ZE01_01% |
- | The other input field is a dropdown selection. We don't just need one item but the whole question " | + | {{: |
- | As the preview still won't show much, you need to use php when assembling | + | The other input is a dropdown selection. For this one we do not use a single item, but the whole question ZE02. To do so, add another item to questiom ZE03, using the following |
- | <code php> | + | |
- | prepare_input(' | + | |
- | prepare_input(' | + | |
- | question(' | + | |
- | </ | + | |
- | + | ||
- | **Tip:** You can simply drag-and-drop the question ZE01 underneath the php-code-field. The one important thing is the question // | + | |
- | + | ||
- | If you start the questionnaire with the {{:button.run.here.gif? | + | |
- | {{:en:create:scr.inputs-single.complete2.png? | + | {{scr.inputs-single.complete.png? |
====== Optimization ======= | ====== Optimization ======= | ||
- | An open-ended [[selection-textinput|text input in a normal selection question]] automatically selects the appropriate option when the respondent writes something into the text field. When text inputs are placed using `prepare_input()`, they are not automatically associated with the corresponding option. This can be set up using [[: de: create: javascript|JavaScript]]. | + | An open-ended [[selection-textinput|text input in a normal selection question]] automatically selects the appropriate option when the respondent writes something into the text field. When text inputs are placed using placeholders, they are not automatically associated with the corresponding option. This can be set up using [[: |
Line 75: | Line 66: | ||
<code javascript> | <code javascript> | ||
<script type=" | <script type=" | ||
- | QuestionSelect.LinkSelect2Text(" | + | S2Selection.linkOptionToInput(" |
</ | </ | ||
</ | </ | ||
- | The first parameter in the function `QuestionSelect.LinkSelect2Text()` specifies the HTML ID of the radio button or checkbox, in the example the option with the code 12 in question AU01 (an extended selection that allows multiple choice selection). The second parameter is the HTML identifier of the corresponding text input (here the first input in question TE01). | + | The first parameter in the function `S2Selection.linkOptionToInput()` specifies the HTML ID of the radio button or checkbox, in the example the option with the code 12 in question AU01 (an extended selection that allows multiple choice selection). The second parameter is the HTML identifier of the corresponding text input (here the first input in question TE01). |
The function `prepare_input ()` (in the PHP code at the top of the page) would have been used in this example for the identifier '' | The function `prepare_input ()` (in the PHP code at the top of the page) would have been used in this example for the identifier '' | ||
Line 87: | Line 78: | ||
<code javascript> | <code javascript> | ||
<script type=" | <script type=" | ||
- | QuestionSelect.LinkSelect2Text(" | + | S2Selection.linkOptionToInput(" |
- | QuestionSelect.LinkSelect2Text(" | + | S2Selection.linkOptionToInput(" |
- | QuestionSelect.LinkSelect2Text(" | + | S2Selection.linkOptionToInput(" |
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ==== Selection and Dropdown ==== | ||
+ | |||
+ | You have a dropdown within a selection (placed via placeholder) and the respective selection option shall automatically be selected when the dropdown is used? | ||
+ | |||
+ | This is accomplished by the JavaScript function '' | ||
+ | |||
+ | <code javascript> | ||
+ | <script type=" | ||
+ | S2Selection.linkOptionToInput(" | ||
</ | </ | ||
</ | </ |