This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
en:create:dynamic [28.11.2014 13:13] – [The Basics] 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. | 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' | ||
===== The Basics ===== | ===== The Basics ===== | ||
- | - In JavaScript there are so-called | + | - In JavaScript there are //Event Handler//. These are functions that are triggered by the user's actions |
+ | * ''%%'click'%%'' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * 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 ('' | - 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 ('' | ||
- 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/ | - 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/ | ||
- | * The simplest way to generate an element' | + | * The simplest way to generate an element' |
* SoSci assigns an HTML ID to each question consisting of the question ID, an underscore, ('' | * SoSci assigns an HTML ID to each question consisting of the question ID, an underscore, ('' | ||
- | - 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 " |
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:** 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, | + | **Note:** Screenreaders, |
+ | |||
+ | **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 " | ||
+ | |||
+ | **Note:** If you use a simple selection or scale (i.e. no multiple selection) as a filter question and you have activated the option '' | ||
**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. | **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 | + | The following JavaScript code is saved as a text element |
Line 43: | Line 54: | ||
// the two pipes (||) are a logicial " | // the two pipes (||) are a logicial " | ||
// the condition checks: is option A selected or is B selected? | // the condition checks: is option A selected or is B selected? | ||
- | if ((optionA.checked) || (optionB.checked)) { | + | if (optionA.checked || optionB.checked) { |
// if " | // if " | ||
// no input ("" | // no input ("" | ||
Line 94: | Line 105: | ||
===== Example 3: Alternative Questions ===== | ===== Example 3: Alternative Questions ===== | ||
- | You have a drop-down selection " | + | You have a drop-down selection " |
{{: | {{: | ||
- | **Tip:** If you also take a visible selection into consideration, | + | **Tip:** If you also take a visible selection into consideration, |
Line 105: | Line 116: | ||
==== Questionnaire Page ==== | ==== Questionnaire Page ==== | ||
- | Perhaps you cannot work with the standard HTML IDs available -- because you integrate a question multiple times on the page for some of them and display different items for each one. In this instance, the questions to be shown are enclosed with '' | + | Perhaps you cannot work with the standard HTML IDs available -- because you integrate a question multiple times on the page for some of them and display different items for each one. In this instance, the questions to be shown are enclosed with '' |
Line 112: | Line 123: | ||
==== JavaScript Code ==== | ==== JavaScript Code ==== | ||
- | The following HTML/ | + | The following HTML/ |
<code javascript> | <code javascript> | ||
Line 120: | Line 131: | ||
function blender() { | 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; | 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); | 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(" | var question1 = document.getElementById(" | ||
if (selected == 1) { | if (selected == 1) { | ||
Line 150: | Line 161: | ||
} | } | ||
- | // the function should be called up directly | + | // The function should be called up first directly |
- | // all drop-downs have to be hidden | + | // All drop-downs have to be hidden |
blender(); | 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 | // of the first drop-down | ||
SoSciTools.attachEvent(dropdown, | SoSciTools.attachEvent(dropdown, | ||
Line 160: | Line 171: | ||
// --> | // --> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Beispiel 4: Skala ===== | ||
+ | |||
+ | In this example, a scale item with 5 options (1=" | ||
+ | |||
+ | Furthermore, | ||
+ | |||
+ | 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 '' | ||
+ | |||
+ | <code javascript> | ||
+ | <script type=" | ||
+ | |||
+ | /** | ||
+ | * 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 + " | ||
+ | if (i == -1) { | ||
+ | inputID = itemID + " | ||
+ | } | ||
+ | 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 " | ||
+ | * input field or item should be displayed. | ||
+ | */ | ||
+ | function linkScaleToInput(itemID, | ||
+ | // 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 " | ||
+ | // or hife vial display=none | ||
+ | if (show.indexOf(value) > -1) { | ||
+ | element.style.display = ""; | ||
+ | } else { | ||
+ | element.style.display = " | ||
+ | } | ||
+ | } | ||
+ | |||
+ | for (var value in radio) { | ||
+ | radio[value].addEventListener(" | ||
+ | } | ||
+ | |||
+ | // Use the correct display in the beginning | ||
+ | onSelect(); | ||
+ | } | ||
+ | |||
+ | // One instanmce of the class for each scale item | ||
+ | new linkScaleToInput(" | ||
+ | new linkScaleToInput(" | ||
+ | new linkScaleToInput(" | ||
+ | new linkScaleToInput(" | ||
+ | new linkScaleToInput(" | ||
+ | new linkScaleToInput(" | ||
+ | new linkScaleToInput(" | ||
+ | new linkScaleToInput(" | ||
+ | new linkScaleToInput(" | ||
+ | new linkScaleToInput(" | ||
+ | |||
</ | </ | ||
</ | </ |