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:combine [01.12.2014 10:43]
msd-media
en:create:combine [23.11.2020 16:00] (current)
sophia.schauer ["Don't Know" for Multiple Scales]
Line 11: Line 11:
 {{:en:create:combined-questions-2.png?nolink|Example 2 - combined question}} {{:en:create:combined-questions-2.png?nolink|Example 2 - combined question}}
  
 +But before you build a combined question, please pause for a moment. Printed questionnaires and online questionnaires differ in important points -- the former offer a lot of space in width, the latter allow filtering and any number of pages. If a tabular presentation looks good in the printed version, it is often better to use several questions in the online questionnaire. Under certain circumstances, irrelevant items (e.g. unused offers) can then be hidden immediately in the following sub-questions.
 +
 +Please also note that the combined questions often cannot be displayed well on the small displays of mobile devices. Unlike "normal" questions, SoSci Survey cannot dynamically adjust the display here.
 ===== Function ===== ===== Function =====
  
Line 22: Line 25:
 **Attention:** Not all question types are suitable for combined questions. For example, a dropdown selection does not use an own line for all options (which corresponds to an item). Thus this type cannot be combined with other questions. To combine those see ([[inputs-single|Placing input fields anywhere]]). **Attention:** Not all question types are suitable for combined questions. For example, a dropdown selection does not use an own line for all options (which corresponds to an item). Thus this type cannot be combined with other questions. To combine those see ([[inputs-single|Placing input fields anywhere]]).
  
-===== Step by step =====+===== Step by Step =====
  
   - Create the leftmost part of the question: As question type choose the one that should show its input fields on the left. In example one this would be a 5 point "scale - extremes labeled".   - Create the leftmost part of the question: As question type choose the one that should show its input fields on the left. In example one this would be a 5 point "scale - extremes labeled".
Line 63: Line 66:
 To have sufficient space for the labels, you may need to adjust the widths of the colums. Enter a value (in this example 150 pixels) at //Width of input column// under the //Alignment of input boxes// tab and set the //Alignment of the input fields// to "center". To have sufficient space for the labels, you may need to adjust the widths of the colums. Enter a value (in this example 150 pixels) at //Width of input column// under the //Alignment of input boxes// tab and set the //Alignment of the input fields// to "center".
  
-===== Display options =====+===== Display Options =====
  
 By default, the input fields of the questions have a gap of 16 pixels. By using the option //gap// you may adjust this behavior.  By default, the input fields of the questions have a gap of 16 pixels. By using the option //gap// you may adjust this behavior. 
Line 93: Line 96:
 ); );
 </code> </code>
 +
 +===== "Don't Know" for Multiple Scales =====
 +
 +If you combine 2 scales and want to offer a "don't know" category, you usually want to display only one such selection field per line. The problem with this is that the two sub-questions are independent of each other, so the "don't know" refers only to the scale at which it was activated.
 +
 +The following JavaScript can be embedded in the page. It makes sure that a click on "don't know" removes all other selections in the line. The JavaScript is designed so that exactly one of the scales offers a "don't know" option.
 +
 +  - Create a new text module in a category of your choice with **Add Text**.
 +    - //Description:// z.B. "JavaScript combined question"
 +    - //Formating:// "HTML-Code"
 +    - //Content:// JavaScript-Code further below
 +    - save {{:button.save.png?nolink|Save}}
 +  - Enter the following ''show()'' command in the PHP code under the ''question()'' command
 +    - Replace the identifier ''AB02'' (twice) with the identifier of the question that carries the "don't know" option (either a scale with residual option or a question of type //multiple choice//).
 +    - Replace the identifier ''JS01'' with the identifier of the HTML code (text) you just created.
 +
 +
 +<code php>
 +question('AB01', 'combine=AB02');
 +show('JS01', ['%questionID%' => 'AB02']);
 +</code>
 +
 +**Important:** In this case, for the first questions in the data set, not the code //-1// is stored, but a missing value -- because the selection is removed as if it had never been set. Therefore, do not activate an answer obligation for the sub-questions.
 +
 +<code javascript>
 +<script type="text/javascript">
 +<!--
 +function dkRow(dk) {
 +  var inputs = [];
 + 
 +  // Functions to control the clicks and changes
 +  var checker = function(evt) {
 +    var input = SoSciTools.getSender(evt, this);
 +    if (!input.checked) {
 +      return;
 +    }
 +    if (input == dk) {
 +      // Unselect all other inputs
 +      for (var i=0; i<inputs.length; i++) {
 +        if (inputs[i] == input) {
 +          // Ignorieren
 +        } else if (inputs[i].getAttribute("type") == "checkbox") {
 +          inputs[i].checked = false;
 +        } else if (inputs[i].getAttribute("type") == "radio") {
 +          inputs[i].checked = false;
 +        } else {
 +          inputs[i].value = "";
 +        }
 +      }
 +    } else {
 +      // Unselect DK input
 +      dk.checked = false;
 +    }
 +  }
 + 
 +  // Find surrounding <tr> tag
 +  var node = SoSciTools.findContainer(dk, "tr");
 +  if (node == null) {
 +    throw "No row for DK " + dk.getAttribute("id");
 +  }
 + 
 +  // Find all inputs in the row and enable checker function
 +  var inputs2 = node.getElementsByTagName("input");
 +  for (var i=0; i<inputs2.length; i++) {
 +    SoSciTools.attachEvent(inputs2[i], "click", checker);
 +    // Enlist all non-dk inputs
 +    if (inputs2[i] != dk) {
 +      inputs.push(inputs2[i]);
 +    }
 +  }
 +}
 +
 +dkRow.registerQuestion = function(question) {
 +  // Find all DK inputs (-1) for the specified question
 +  // (check all possible items 1 to 99)
 +  var anyFound = false;
 +  for (var i=1; i<99; i++) {
 +    var item = i.toString();
 +    // Care for two-digit ID
 +    if (item.length < 2) {
 +      item = "0" + item;
 +    }
 +    // First check for DK option of a scale
 +    var htmlID = question + "_" + item + "DK";  // e.g. AB01_01DK
 +    var dk = document.getElementById(htmlID);
 +    // Then check for multiple choice question
 +    if (!dk) {
 +      var htmlID = question + "_" + item;  // e.g. AB01_01
 +      var dk = document.getElementById(htmlID);
 +    }
 +    if (dk) {
 +      new dkRow(dk);
 +      anyFound = true;
 +    }
 +  }
 +  if (!anyFound) {
 +    throw "Not found DK or multiple choice options for " + question;
 +  }
 +}
 + 
 +dkRow.registerQuestion('%questionID%');
 +// -->
 +</script>
 +</code>
 +
 +===== Combine Multiple Dropdown-Questions  =====
 +
 +Dropdown questions can be placed next to each other using tables for combined queries (see also chapter [[table-layout|Placing Elements side by side]]).
 +
 +For a step-by-step description of the following example, see [[table-layout-dropdowns|Place Dropdowns Side by Side]].
 +
 +{{ :de:create:scr.example.combine.dropdown.jpg?nolink |}}
 +
 +
en/create/combine.1417426998.txt.gz · Last modified: 01.12.2014 10:43 by msd-media
 
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki