Differences

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

--- en:create:dynamic [28.11.2014 13:15] – [Questionnaire Page] alexander.ritter
+++ en:create:dynamic [07.12.2023 20:51] (current) – admin
@@ Line 4: / Line 4: @@
 Generally speaking, extensive modificitions within a questionnaire page are possible with JavaScript and the Document Object Model (DOM). However, sometimes this requires advanced programming knowledge. This manual is limited to how a question is shown or hidden depending on an answer.
+**Tip:** If the JavaScript code doesn't work right away, please use the [[:en:general:browser-tools]] for troubleshooting.
 ===== The Basics =====
-  - In JavaScript there are so-called //event handlers//. These are functions that are executed when a user does something on the page -- i.e. when //events// take place on the page. These events could be a participant clicking on something (''click''), changing a drop-down selection or an input field (''onchange''), moving the mouse over an image (''mouseover'') etc.
+  - In JavaScript there are //Event Handler//. These are functions that are triggered by the user's actions on the page. The actions generate an //Event//, and this triggers the associated JavaScript function, the //EventHandler//. Possible events are ...
+    * ''%%'click'%%'' -- the click on an element,
+    * ''%%'mouseover'%%'' -- moving the mouse over an element,
+    * ''%%'change'%%'' -- selecting an option in a dropdown or changing a text input field,
+    * ''%%'keypressed'%%'' -- a keystroke
+    * and many others.
   - Each element of an (HTML) internet page has a whole range of properties. SoSci Survey creates the individual questionnaire pages as HTML pages -- and all questions and input fields are HTML elements, whose properties can be shaped by JavaScript. One of these properties is the display style (''style'') and the display mode (''display'') is a part of this. The display mode defines how an element is shown (''block'' or ''inline''), or that it simply should not be shown at all (''none'').
   - The elements of an HTML page can be addressed most simply by referring to their HTML ID. SoSci assigns HTML IDs automatically for all input fields that are focused on the question/item ID.
-    * The simplest way to generate an element's ID is for you to use your browser's developer tool (found in different places depending on the browser). These tools can show you the HTML code of an element (e.g. a selection field) -- incl. the HTML ID (''%%id="AB01_01"%%''). Alternatively, you can display the source code of the HTML page in the browser and look for the corresponding element there.
+    * The simplest way to generate an element's ID is for you to use the [[:en:general:browser-tools]]. These tools can show you the HTML code of an element (e.g. a selection field) -- incl. the HTML ID (''%%id="AB01_01"%%''). Alternatively, you can display the source code of the HTML page in the browser and look for the corresponding element there.
     * SoSci assigns an HTML ID to each question consisting of the question ID, an underscore, (''_'') and ''qst'' (e.g. ''AB01_qst'' for question "AB01").
-  - In SoSci Survey, any content can be incorporated into a questionnaire page. Therefore, this includes JavaScript code. The easiest way of doing this is to save the code as a text element in **Text Elements and Labels** and dragging and dropping this text element into the page in **Compose Questionnaire** and __into__ the respective question(s).
+  - In SoSci Survey, any content can be incorporated into a questionnaire page. Therefore, this includes JavaScript code. The easiest way of doing this is to save the code as a text element in **Text Elements and Labels**(for the //display// you have to select "HTML-Code") and dragging and dropping this text element into the page in **Compose Questionnaire** and __into__ the respective question(s).
@@ Line 19: / Line 26: @@
 **Note:** The JavaScript code should be designed to hide unnecessary content; not show necessary content. This has the advantage that participants with JavaScript deactivated can still answer the question as the question was not hidden.
-**Note:** Screenreaders, which enable people with visual impairments to take part in your survey, do not always cope with dynamic content. Using this function can reduce the accessibility of your questionnaire.
+**Note:** Screenreaders, which enable people with visual impairments to take part in your survey, do not always cope with dynamic content. Using this feature can reduce the accessibility of your questionnaire.
+**Note:** Some question types use a different display for each screen by default (responsive layout). In rare cases, the display is not selected correctly when you display such a question via JavaScript. In this case, please set another option than "dynamic" for //display// in the question.
+**Note:** If you use a simple selection or scale (i.e. no multiple selection) as a filter question and you have activated the option ''Deselect checkbox in simple selection or scale'' in the questionnaire, the property ''checked'' will still return ''true'' instead of ''false'' after deselecting an option. In this case, use the event ''change'' instead of ''click''.
 **Tip:** If the participant sees that one of the selection options involves extra work, then this could influence his responsiveness. Here, a classic [[filters|Filter]] asking the second question on the following page could make more sense.
@@ Line 29: / Line 40: @@
-The following JavaScript code is saved as a text element, dragged and dropped __into__ questions "JN01" and "TX01" in the questionnaire page.
+The following JavaScript code is saved as a text element (//display//: "HTML-Code"), dragged and dropped __below__ questions "JN01" and "TX01" in the questionnaire page.
@@ Line 43: / Line 54: @@
   // the two pipes (||) are a logicial "or"
   // the condition checks: is option A selected or is B selected?
-  if ((optionA.checked) || (optionB.checked)) {
+  if (optionA.checked || optionB.checked) {
     // if "yes" or "maybe" is selected, then the question is shown
     // no input ("") uses the default setting (display as usual)
@@ Line 112: / Line 123: @@
 ==== JavaScript Code ====
-The following HTML/JavaScript code is saved in a text element (e.g. with the ID ''js_dynamic''):
+The following HTML/JavaScript code is saved in a text element (e.g. with the //ID// "js_dynamic", //display//: "HTML-Code"):
 <code javascript>
@@ Line 120: / Line 131: @@
 function blender() {
-  // the value whose value corresponds to the answer code in the Variables Overview
+  // The value whose value corresponds to the answer code in the Variables Overview
   var selected = dropdown.value;
-  // however, the value is text rather than a number
+  // However, the value is text rather than a number
   selected = parseInt(selection);
-  // this check is repeated for each question to be shown
+  // This check is repeated for each question to be shown
   var question1 = document.getElementById("blockAB06");
   if (selected == 1) {
@@ Line 150: / Line 161: @@
 }
-// the function should be called up directly first
+// The function should be called up first directly
-// all drop-downs have to be hidden
+// All drop-downs have to be hidden
 blender();
-// now the function still has to be linked with the change event
+// Now the function still has to be linked with the change event
 // of the first drop-down
 SoSciTools.attachEvent(dropdown, "change", blender);
@@ Line 160: / Line 171: @@
 // -->
+</script>
+</code>
+===== Beispiel 4: Skala =====
+In this example, a scale item with 5 options (1="not at all" to 5="very often") is to be linked to text fields. The text field for each item should only appear if the option 3, 4 or 5 has been selected.
+Furthermore, the solution shall not only be used for a pair of items, but for a whole battery (10 scale items and 10 text input fields, which are represented as [[:en:create:combine]]). To make this work without having to repeat the whole code 10 times, the JavaScript functionality is encapsulated as a class (''function''). This class is then called exactly once for each of the 10 items.
+In the following example, the items have the following identifiers:
+  * Scales: SK01_01 to SK01_10
+  * Text inputs: TE01_01 to TE01_10
+The JavaScript code for the 10 item pairs would look like this. A large part of the code is spent on first finding the selection fields of each scale item (at the top). This has the advantage that the code works independent of the scale level and of DK options.
+The core of the function, which shows and hides the input field, is again the ''%%element.style.display = "none";%%''
+<code javascript>
+<script type="text/javascript">
+/**
+ * Find and list inputs (radio) of the
+ * scale with the identifier itemID.
+ */
+function getScaleInputs(itemID) {
+    var inputs = {};
+    // The regular inputs
+    for (var i=1; i<100; i++) {
+        var inputID = itemID + i;
+        var input = document.getElementById(inputID);
+        if (input) {
+            inputs[i] = input;
+        } else {
+            break;
+        }
+    }
+    // And then there may be DK options
+    for (var i=-1; i>=-3; i--) {
+        var inputID = itemID + "DK" + (-i);
+        if (i == -1) {
+            inputID = itemID + "DK";
+        }
+        var input = document.getElementById(inputID);
+        if (input) {
+            inputs[i] = input;
+        }
+    }
+    return inputs;
+}
+/**
+ * The class that connects the scale item (identifier itemID)
+ * to a text input (or similar) with the identifier inputID.
+ * The array "show" defines for which values the
+ * input field or item should be displayed.
+ */
+function linkScaleToInput(itemID, inputID, show) {
+    // First, we need all radio inputs for the item
+    var radio = getScaleInputs(itemID);
+    var element = document.getElementById(inputID);
+    // We need a function to read the value
+    // that was checked in the scale
+    function getValue() {
+        for (var value in radio) {
+            if (radio[value].checked) {
+                return parseInt(value);
+            }
+        }
+        return -9;
+    }
+    // Then we need a function to respond
+    // to the selection
+    function onSelect() {
+        var value = getValue();
+        // Display, if the value is listed in "show",
+        // or hife vial display=none
+        if (show.indexOf(value) > -1) {
+            element.style.display = "";
+        } else {
+            element.style.display = "none";
+        }
+    }
+    for (var value in radio) {
+        radio[value].addEventListener("click", onSelect);
+    }
+    // Use the correct display in the beginning
+    onSelect();
+}
+// One instanmce of the class for each scale item
+new linkScaleToInput("SK01_01", "TE01_01", [3,4,5]);
+new linkScaleToInput("SK01_02", "TE01_02", [3,4,5]);
+new linkScaleToInput("SK01_03", "TE01_03", [3,4,5]);
+new linkScaleToInput("SK01_04", "TE01_04", [3,4,5]);
+new linkScaleToInput("SK01_05", "TE01_05", [3,4,5]);
+new linkScaleToInput("SK01_06", "TE01_06", [3,4,5]);
+new linkScaleToInput("SK01_07", "TE01_07", [3,4,5]);
+new linkScaleToInput("SK01_08", "TE01_08", [3,4,5]);
+new linkScaleToInput("SK01_09", "TE01_09", [3,4,5]);
+new linkScaleToInput("SK01_10", "TE01_10", [3,4,5]);
 </script>
 </code>