Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
en:create:inputs-single [11.12.2017 21:39]
admin Added JavaScript info
en:create:inputs-single [22.06.2019 15:29]
admin Update
Line 5: Line 5:
 **Important:​** The question types "​selection"​ and "​multiple choice"​ provide this function by simply checking a box. See [[selection-textinput|Free text inputs within a selection]] how to do this. **Important:​** The question types "​selection"​ and "​multiple choice"​ provide this function by simply checking a box. See [[selection-textinput|Free text inputs within a selection]] how to do this.
  
-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 ​the PHP-function ​''​[[:en:​create:​functions:​prepare_input|prepare_input()]]'' ​to achieve this. We will guide you through using this function using the following example.+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 ​a special placeholder ​''​​%input:...%'' ​for that purpose. We will guide you through using this function using the following example.
  
 {{:​en:​create:​scr.inputs-single.complete.png?​nolink|Example for freely placed input fields}} {{:​en:​create:​scr.inputs-single.complete.png?​nolink|Example for freely placed input fields}}
Line 14: Line 14:
  
 Technically,​ the input field that is to be added has to be prepared with ''​prepare_input()''​. In order to place the input field correctly, SoSciSurvey needs a placedholder amongst the original question'​s items. See further down for details. Technically,​ the input field that is to be added has to be prepared with ''​prepare_input()''​. In order to place the input field correctly, SoSciSurvey needs a placedholder amongst the original question'​s items. See further down for details.
 +
 +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 ''​​%input:''​​,​ the ID of the question or item to be used (e.g., the ID of the text input field that you have just created), and finished by a ''​​%''​​. Insert this palceholder whereever the input shall appear.
  
 **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// "​ZE",​ and the //Name// e.g. "​Freely placed input fields"​. Create a new section with the //ID// "​ZE",​ and the //Name// e.g. "​Freely placed input fields"​.
  
-Create the superior ​question ​(ZE01) that will contain the input fields. The example above uses the //type// "Scale (extremes labeled)".+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.outer_incomplete.png?​nolink|Example for freely ​placed input fields - superior question}}+{{:de:​create:​scr.inputs-single.inner1.png?​nolink|Text input field that is to be placed ​freely}}
  
-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" ​and add three choice options.
-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.+
  
-{{:​en:​create:​scr.inputs-single.inner2.png?​nolink|Text input field that is to be placed freely}}+{{:​en:​create:​scr.inputs-single.inner2.png?​nolink|Dropdown selection ​to be placed freely}}
  
-Create ​the third question ZE03 with the //​type// ​"dropdown" ​with three choice options.+Now, create ​the question ​(ZE03) where the inputs shall be used within. In the above example, this is a "scale (fully labelled)" ​type question.
  
-{{:en:​create:​scr.inputs-single.inner3.png?​nolink|Dropdown field that is to be placed ​freely}}+{{:de:​create:​scr.inputs-single.outer_incomplete.png?​nolink|Example for freely ​placed inputs}}
  
-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: +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:
-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%''​. +
-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 ZE01The ID of this item is ZE01_01The 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 nowthe 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 selectionWe 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 muchyou need to use php when assembling ​the questionnaireWhen 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 itembut the whole question ZE02To 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 ======= ====== 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>​ <code javascript>​
 <script type="​text/​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>​ </​script>​
 </​code>​ </​code>​
en/create/inputs-single.txt · Last modified: 22.06.2019 15:29 by admin
 
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki