This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
en:create:dynamic [28.11.2014 13:14] – [Example 3: Alternative Questions] alexander.ritter | en:create:dynamic [26.11.2020 21:11] – [JavaScript Code] sophia.schauer | ||
---|---|---|---|
Line 12: | Line 12: | ||
* 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 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, | + | **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 " | ||
**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 " | + | The following JavaScript code is saved as a text element |
Line 105: | Line 107: | ||
==== 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 114: | ||
==== JavaScript Code ==== | ==== JavaScript Code ==== | ||
- | The following HTML/ | + | The following HTML/ |
<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(" | var question1 = document.getElementById(" | ||
if (selected == 1) { | if (selected == 1) { | ||
Line 150: | Line 152: | ||
} | } | ||
- | // 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, |