Differences

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

--- en:create:combine [23.11.2020 15:41] – [Combined Questions] sophia.schauer
+++ en:create:combine [23.11.2020 16:00] – ["Don't Know" for Multiple Scales] sophia.schauer
@@ Line 25: / 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]]).
-===== 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".
@@ Line 66: / 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".
-===== 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.
@@ Line 96: / Line 96: @@
 );
 </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 |}}