This shows you the differences between two versions of the page.
Next revision | Previous revisionNext revisionBoth sides next revision | ||
en:create:combine [09.05.2013 15:46] – created janisaltherr | en:create:combine [19.05.2021 20:54] – sophia.schauer | ||
---|---|---|---|
Line 2: | Line 2: | ||
You might want to ask different options about one item. For example the rating of a characteristic and its importance. This is how to implement this. | You might want to ask different options about one item. For example the rating of a characteristic and its importance. This is how to implement this. | ||
+ | |||
+ | **Note:** Please be sure to also read the notes on mobile devices below. | ||
**Example 1**\\ | **Example 1**\\ | ||
Line 11: | Line 13: | ||
{{: | {{: | ||
+ | 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 27: | ||
**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 41: | Line 46: | ||
For example, if the items of question one have the IDs 3, 4 and 5 but the position 1, 2 and 4, question two will ask for the items with the position 1, 2 and 4, regardless of their ID. | For example, if the items of question one have the IDs 3, 4 and 5 but the position 1, 2 and 4, question two will ask for the items with the position 1, 2 and 4, regardless of their ID. | ||
- | It might happen, that the item AB01_03 corresponds to the item AB02_01, because the position of the items were changed. Consider this when evaluating the results. You can avoid confusion if you don't change any item position after duplicating the question. If needed anyways, you can change the item order of the output by using the function '' | + | It might happen, that the item AB01_03 corresponds to the item AB02_01, because the position of the items were changed. Consider this when evaluating the results. You can avoid confusion if you don't change any item position after duplicating the question. If needed anyways, you can change the item order of the output by using the function '' |
**Hint:** Randomizing the item order is no problem. Be aware, the setting of question one is the only one regarded, while the other questions follow the first so there are no inconsistencies. | **Hint:** Randomizing the item order is no problem. Be aware, the setting of question one is the only one regarded, while the other questions follow the first so there are no inconsistencies. | ||
Line 63: | Line 68: | ||
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 98: | ||
); | ); | ||
</ | </ | ||
+ | |||
+ | ===== " | ||
+ | |||
+ | 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(' | ||
+ | // --> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ===== Combine Multiple Dropdown-Questions | ||
+ | |||
+ | Dropdown questions can be placed next to each other using tables for combined queries (see also chapter [[table-layout|Placing Elements side by side]]). | ||
+ | |||
+ | For a step-by-step description of the following example, see [[table-layout-dropdowns|Place Dropdowns Side by Side]]. | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | |||
+ | ===== Mobile devices and responsive display ===== | ||
+ | |||
+ | A relevant part of the respondants fill in the questionnaire not on an computer but on a mobile device. The most questions in SoSci Survey switch to a different display mode. Therefore in most cases it is enough to try the questionnaire in the end of the implementation on an mobile device. More in the chapter [[: | ||
+ | |||
+ | Combined questions, however, do not automatically adjust the layout to the size of the screen (responsive design) - and therefore may not be completed on mobile devices. Here it is suitable to offer an alternative presentation for mobile devices. | ||
+ | |||
+ | First, create a question of the type " | ||
+ | |||
+ | |||
+ | Now place this question on a page in the questionnaire that comes before the combined question. | ||
+ | In the following example it is assumed that the variable has the identifier " | ||
+ | |||
+ | Now, with a few lines of [[: | ||
+ | |||
+ | <code php> | ||
+ | if (value(' | ||
+ | // combined question | ||
+ | question(' | ||
+ | } else { | ||
+ | // single questions | ||
+ | question(' | ||
+ | question(' | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | For an explanation of the code, please refer to the [[: |