[[Immediately Show Questions when a Certain Option is Selected]]
You are here: start » Overview » Creating and Designing the Questionnaire » Immediately Show Questions when a Certain Option is Selected
 
Trace:

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Next revisionBoth sides next revision
en:create:dynamic [28.11.2014 13:15] – [Questionnaire Page] alexander.ritteren:create:dynamic [26.11.2020 21:09] – [Example 1: Visible Selection] sophia.schauer
Line 12: Line 12:
     * 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 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. 
     * SoSci assigns an HTML ID to each question consisting of the question ID, an underscore, (''_'') and ''qst'' (e.g. ''AB01_qst'' for question "AB01").     * 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 19:
 **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, 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.
  
 **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 31:
  
  
-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 __into__ questions "JN01" and "TX01" in the questionnaire page.
  
  
Line 120: Line 122:
  
 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("blockAB06");   var question1 = document.getElementById("blockAB06");
   if (selected == 1) {   if (selected == 1) {
Line 150: Line 152:
 } }
  
-// 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(); 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, "change", blender); SoSciTools.attachEvent(dropdown, "change", blender);
en/create/dynamic.txt · Last modified: 07.12.2023 20:51 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