The closed cloze consists of two parts:
The text snippets are displayed directly one after the other (if not set otherwise), so that a continuous text with gaps results in the questionnaire.
In the question, you can determine whether the available selection options are displayed to the left of the text or below it. They are then each dragged and dropped into the word gaps. If an answer option has been used in the text, its visual layout changes – one answer choice, however, can also be used for several text gaps.
If one respondent has JavaScript disabled in their browser, or if the questionnaire is displayed in screen reader mode, then the text will be displayed with drop-down selection boxes instead of word gaps.
The display of individual answer specifications can be adapted using CSS. This can for example look as follows. In this example, all word gaps are displayed in separate lines and the selection options are coloured differently using CSS.
The CSS code is best placed on the questionnaire page with the function pageCSS()
.
If the question has the identifier “AB01”, the PHP code to include the CSS could look like this:
pageCSS(' div#AB01_option_1 { background-color: #00FF00; } div#AB01_option_2 { background-color: #00FF00; } div#AB01_option_3 { background-color: #00FF00; } div#AB01_option_4 { background-color: #FFFF00; } div#AB01_option_5 { background-color: #FFFF00; } div#AB01_option_6 { background-color: #FFFF00; } div#AB01_option_7 { background-color: #FF9900; } /* etc. */ ');
The individual options are selected on the basis of their HTML-ID (e.g. AB01_option_1
). The easiest way to determine the correct HTML-ID of an element is to use the Browser Developer Tools.