Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
en:create:dynamic [04.01.2015 17:24]
alexander.ritter [JavaScript Code]
en:create:dynamic [16.12.2020 16:05] (current)
mohadmun [Example 1: Visible Selection]
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 43: Line 45:
   // the two pipes (||) are a logicial "or"   // the two pipes (||) are a logicial "or"
   // 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 "yes" or "maybe" is selected, then the question is shown     // if "yes" or "maybe" is selected, then the question is shown
     // no input ("") uses the default setting (display as usual)     // no input ("") uses the default setting (display as usual)
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>
en/create/dynamic.1420388650.txt.gz · Last modified: 04.01.2015 17:24 by alexander.ritter
 
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki