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:combine [01.12.2014 10:43] – msd-media | en:create:combine [23.11.2020 15:56] – sophia.schauer | ||
---|---|---|---|
Line 11: | Line 11: | ||
{{: | {{: | ||
+ | But before you build a combined question, please pause for a moment. Printed questionnaires and online questionnaires differ in important points -- the former offer a lot of space in width, the latter allow filtering and any number of pages. If a tabular presentation looks good in the printed version, it is often better to use several questions in the online questionnaire. Under certain circumstances, | ||
+ | |||
+ | Please also note that the combined questions often cannot be displayed well on the small displays of mobile devices. Unlike " | ||
===== Function ===== | ===== Function ===== | ||
Line 22: | Line 25: | ||
**Attention: | **Attention: | ||
- | ===== Step by step ===== | + | ===== Step by Step ===== |
- Create the leftmost part of the question: As question type choose the one that should show its input fields on the left. In example one this would be a 5 point "scale - extremes labeled" | - Create the leftmost part of the question: As question type choose the one that should show its input fields on the left. In example one this would be a 5 point "scale - extremes labeled" | ||
Line 63: | Line 66: | ||
To have sufficient space for the labels, you may need to adjust the widths of the colums. Enter a value (in this example 150 pixels) at //Width of input column// under the //Alignment of input boxes// tab and set the //Alignment of the input fields// to " | To have sufficient space for the labels, you may need to adjust the widths of the colums. Enter a value (in this example 150 pixels) at //Width of input column// under the //Alignment of input boxes// tab and set the //Alignment of the input fields// to " | ||
- | ===== Display | + | ===== Display |
By default, the input fields of the questions have a gap of 16 pixels. By using the option //gap// you may adjust this behavior. | By default, the input fields of the questions have a gap of 16 pixels. By using the option //gap// you may adjust this behavior. | ||
Line 93: | Line 96: | ||
); | ); | ||
</ | </ | ||
+ | |||
+ | ===== " | ||
+ | |||
+ | If you combine 2 scales and want to offer a " | ||
+ | |||
+ | The following JavaScript can be embedded in the page. It makes sure that a click on " | ||
+ | |||
+ | - Create a new text module in a category of your choice with **Add Text**. | ||
+ | - // | ||
+ | - // | ||
+ | - // | ||
+ | - save {{: | ||
+ | - Enter the following '' | ||
+ | - Replace the identifier '' | ||
+ | - Replace the identifier '' | ||
+ | |||
+ | |||
+ | <code php> | ||
+ | question(' | ||
+ | show(' | ||
+ | </ | ||
+ | |||
+ | **Important: | ||
+ | |||
+ | <code javascript> | ||
+ | <script type=" | ||
+ | <!-- | ||
+ | function dkRow(dk) { | ||
+ | var inputs = []; | ||
+ | |||
+ | // Functions to control the clicks and changes | ||
+ | var checker = function(evt) { | ||
+ | var input = SoSciTools.getSender(evt, | ||
+ | if (!input.checked) { | ||
+ | return; | ||
+ | } | ||
+ | if (input == dk) { | ||
+ | // Unselect all other inputs | ||
+ | for (var i=0; i< | ||
+ | if (inputs[i] == input) { | ||
+ | // Ignorieren | ||
+ | } else if (inputs[i].getAttribute(" | ||
+ | inputs[i].checked = false; | ||
+ | } else if (inputs[i].getAttribute(" | ||
+ | inputs[i].checked = false; | ||
+ | } else { | ||
+ | inputs[i].value = ""; | ||
+ | } | ||
+ | } | ||
+ | } else { | ||
+ | // Unselect DK input | ||
+ | dk.checked = false; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // Find surrounding <tr> tag | ||
+ | var node = SoSciTools.findContainer(dk, | ||
+ | if (node == null) { | ||
+ | throw "No row for DK " + dk.getAttribute(" | ||
+ | } | ||
+ | |||
+ | // Find all inputs in the row and enable checker function | ||
+ | var inputs2 = node.getElementsByTagName(" | ||
+ | for (var i=0; i< | ||
+ | SoSciTools.attachEvent(inputs2[i], | ||
+ | // Enlist all non-dk inputs | ||
+ | if (inputs2[i] != dk) { | ||
+ | inputs.push(inputs2[i]); | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | dkRow.registerQuestion = function(question) { | ||
+ | // Find all DK inputs (-1) for the specified question | ||
+ | // (check all possible items 1 to 99) | ||
+ | var anyFound = false; | ||
+ | for (var i=1; i<99; i++) { | ||
+ | var item = i.toString(); | ||
+ | // Care for two-digit ID | ||
+ | if (item.length < 2) { | ||
+ | item = " | ||
+ | } | ||
+ | // First check for DK option of a scale | ||
+ | var htmlID = question + " | ||
+ | var dk = document.getElementById(htmlID); | ||
+ | // Then check for multiple choice question | ||
+ | if (!dk) { | ||
+ | var htmlID = question + " | ||
+ | var dk = document.getElementById(htmlID); | ||
+ | } | ||
+ | if (dk) { | ||
+ | new dkRow(dk); | ||
+ | anyFound = true; | ||
+ | } | ||
+ | } | ||
+ | if (!anyFound) { | ||
+ | throw "Not found DK or multiple choice options for " + question; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | dkRow.registerQuestion(' | ||
+ | // --> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ |