Differences

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

--- en:create:inputs-single [21.06.2019 19:40]
admin Partial Update
+++ en:create:inputs-single [22.06.2019 15:29] (current)
admin Update
@@ Line 30: / Line 30: @@
 Create the question ZE01 with //type// "text input". In this question, an item is added automatically, having the ID ZE01_01. For text inputs, it is useful to  set their width -- in this example 120 pixels. The item text will not show up, later. However set one, because it will be used for the variable lable in the data set.
-{{:en:create:scr.inputs-single.inner2.png?nolink|Text input field that is to be placed freely}}
+{{:de:create:scr.inputs-single.inner1.png?nolink|Text input field that is to be placed freely}}
-Create another question ZE03 with the //type// "dropdown" with three choice options.
+Create another question ZE02 with the //type// "dropdown" and add three choice options.
-{{:en:create:scr.inputs-single.inner3.png?nolink|Dropdown field that is to be placed freely}}
+{{:en:create:scr.inputs-single.inner2.png?nolink|Dropdown selection to be placed freely}}
-FIXME
+Now, create the question (ZE03) where the inputs shall be used within. In the above example, this is a "scale (fully labelled)" type question.
-Now we have to add placeholders into the superior question ZE01 (For more options, see [[placeholders|placeholders in questions and items]]. To do so, we add two items with the text "other:" to the superior question's items and add the placeholder:
+{{:de:create:scr.inputs-single.outer_incomplete.png?nolink|Example for freely placed inputs}}
-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: ''%ZE02_01%''.
+Now we have to add placeholders into the question ZE03 (for more options, see [[placeholders|placeholders in questions and items]]. To do so, we add two items with the text "other:" to the superior question's items and add the placeholders:
-Therefore add an item to the superior question containing the //item text//: "other: %ZE02_01%"
-{{:en:create:scr.inputs-single.placeholder.png?nolink|Placeholder for input fields}}
+The first additional input field derives from item 01 of the question ZE01. The ID of this item is ZE01_01. The placeholder is made from this ID with a prefixed ''input:'' and a trailing percent sign: ''%input:ZE01_01%''. So, add a new item to question ZE03 with this //item text//:
-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 "ZE03". So you simply don't mention the item ID inside the placeholder: You use "%ZE03%".
+{{:en:create:scr.inputs-single.placeholder.png?nolink|Placeholder for input fields}}
-As the preview still won't show much, you need to use php when assembling the questionnaire. When creating the questionnaire, add the element //PHP-code// ([[php|short guide to php]]). In this php-code, the input fields are prepared with [[:en:create:functions:prepare_input|prepare_input()]] first, afterwards (!) you call the superior question ZE01 with its placeholder-items.
+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 //item text//:
-<code php>
+    Other: %input:ZE02%
-prepare_input('ZE02_01');  // Item 1 from the text input question ZE02
-prepare_input('ZE03');     // Dropdown question ZE03
-question('ZE01');          // Scale with its placeholders
-</code>
-**Tip:** You can simply drag-and-drop the question ZE01 underneath the php-code-field. The one important thing is the question //following// the ''prepare_input()'' commands.
+{{scr.inputs-single.complete.png?nolink|Example for freely places inputs}}
-If you start the questionnaire with the {{:button.run.here.gif?nolink|Start here}}-button, SoSciSurvey will add the questions ZE02_01 and ZE03 to the scale question.
-{{:en:create:scr.inputs-single.complete2.png?nolink|Example for freely placed input fields}}
 ====== 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 [[:de:create:javascript|JavaScript]].
@@ Line 87: / Line 78: @@
 <code javascript>
 <script type="text/javascript">
-QuestionSelect.LinkSelect2Text("AU01_12", "TE01_01");
+new S2Selection.LinkSelect2Text("AU01_12", "TE01_01");
-QuestionSelect.LinkSelect2Text("AU01_16", "TE01_02");
+new S2Selection.LinkSelect2Text("AU01_16", "TE01_02");
-QuestionSelect.LinkSelect2Text("AU01_221", "TE01_03");
+new S2Selection.LinkSelect2Text("AU01_221", "TE01_03");
+</script>
+</code>
+==== 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 ''QuestionSelect.linkOptionToInput()''. The first parameter is the ID of the selection option (e.g., ''AB01_02'' for the second option in the selection question AB01). The second parameter is the ID of the dropdown (or of a text input).
+<code javascript>
+<script type="text/javascript">
+new S2Selection.linkOptionToInput("AB01_02", "AB03");
 </script>
 </code>