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 [18.12.2014 15:10] – [The Basics] alexander.ritteren:create:dynamic [26.11.2020 21:11] – [JavaScript Code] 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 20: Line 20:
  
 **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:** 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 112: Line 114:
 ==== JavaScript Code ==== ==== 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> <code javascript>
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