Skip to Content
Last modified by Anna Paul-Hasenfuss on 24.02.2025
Hide last authors
Carina Enke 198.2 1 {{section}}
2 {{column width="60%"}}
Carina Enke 200.1 3 ONYX allows you to customise the question design with CSS. Using CSS, you can also place elements on the screen which makes it possible to place gaps on top of a background graphic.
Carina Enke 189.1 4
Carina Enke 200.1 5 {{info}}
6 **Note**: Placing gaps on a graphic only works within the browser. The export views (PDF export, exam overview page, etc.) do not allow for a correct question display. A basic understanding of HTML and CSS is required for the customisations.
Carina Enke 195.1 7
Carina Enke 200.1 8 The [[graphic match interaction>>doc:ONYX.Erstellung von Testinhalten.Aufgabentypen.Grafische Zuordnung.WebHome||shape="rect" title="Graphic match interaction"]] question type is also suitable for creating many scenarios.
Carina Enke 65.1 9 {{/info}}
Carina Enke 198.2 10 {{/column}}
Carina Enke 65.1 11
Carina Enke 198.2 12 {{column width="30%"}}
Carina Enke 200.1 13 {{panel title="Content"}}
Carina Enke 198.2 14 {{toc start="2"/}}
Carina Enke 65.1 15 {{/panel}}
Carina Enke 195.1 16
Carina Enke 200.1 17 {{panel title="Example resources"}}
18 * [[Application1.zip>>attach:Application1.zip||shape="rect"]]
19 * [[Application2.css>>attach:Application2.css||shape="rect"]]
Carina Enke 195.1 20 {{/panel}}
Carina Enke 198.2 21 {{/column}}
22 {{/section}}
23
24
Carina Enke 200.1 25 The procedure for placing gaps on a background graphic is explained in the following example, which is a question about Saxony. Here, a map of the Free State of Saxony is used as a background graphic and there are three gaps placed on top of the map so that the names of the cities can be entered directly in the correct place.
Carina Enke 65.1 26
Carina Enke 198.6 27 [[image:attach:Beispiel Anwendung1png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true"]]
Carina Enke 65.1 28
Carina Enke 200.1 29 == STEP 1: Create a new question in text entry format ==
Carina Enke 195.1 30
Carina Enke 200.1 31 The ONYX Editor supports various text entry formats (e.g. text entry, numerical input, calculation, formula comparison). Placing the gaps on a background graphic works the same for all formats. In the following, instructions on how to place gaps are provided for a simple text entry interaction. To create a new question, click on  "New question”. Then select the "text entry interaction" question type and enter a title for your question.
Carina Enke 65.1 32
33
Carina Enke 200.1 34 == STEP 2: Edit the question and add content ==
Carina Enke 198.6 35
Carina Enke 200.1 36 All question content can be added via the HTML input field in the Text entry interaction section. Start by entering your question text, e.g. "Name the three independent cities of the state of Saxony".
Carina Enke 65.1 37
Carina Enke 200.1 38 Now add the background graphic on which the gaps should be placed later.
Carina Enke 65.1 39
Carina Enke 200.1 40 Then add any number of gaps directly below the graphic. Define the correct solution and the maximum score for each gap. You can also configure additional settings.
Carina Enke 65.1 41
Carina Enke 198.6 42 {{info}}
Carina Enke 200.1 43 **Note**: The gaps need to be placed directly below the graphic.
Carina Enke 65.1 44 {{/info}}
45
Carina Enke 198.7 46
Carina Enke 200.1 47 == STEP 3: Place gaps on the graphic I (HTML) ==
Carina Enke 65.1 48
Carina Enke 200.1 49 Placing the gaps on the background graphic is achieved by CSS positioning. The only prerequisite is the definition of CSS classes in the HTML source code. You can view and edit the HTML source code of your question using the "Source code” option of the HTML editor.
Carina Enke 65.1 50
Carina Enke 200.1 51 {{info}}
52 **Note**: To make it easier for you to edit the HTML code, you should insert line breaks so that each element (<p>, <span>, <img />, etc.) is on a separate line.
53 {{/info}}
Carina Enke 65.1 54
Carina Enke 200.1 55 [[image:attach:Aufgabe - Quelltext öffnen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
56 [[image:attach:Aufgabe - sourcecode_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 65.1 57
Carina Enke 200.1 58 You can identify your graphic by the following HTML code:
Carina Enke 198.9 59
Carina Enke 198.2 60 {{code language="xml"}}
Carina Enke 200.1 61 <img data-cke-saved-src="media?r=mMjc2MzQ1MzI src="media?r=mMjc2MzQ1MzI ... />
Carina Enke 65.1 62 {{/code}}
63
Carina Enke 200.1 64 The gaps are marked in the HTML as follows:
Carina Enke 198.2 65
Carina Enke 198.6 66 {{code language="xml"}}
Carina Enke 195.7 67 <img id="RESPONSE_1" class="mce_onyx_gap" data-cke-saved-src="img/icons/gap-placeholder.png" src="img/icons/gap-placeholder.png" alt="" />
Carina Enke 65.1 68 {{/code}}
69
Carina Enke 200.1 70 You need to set a container (<div>) with the class "gap-container" around the graphic and your gaps.
Carina Enke 65.1 71
Carina Enke 198.2 72 {{code language="xml"}}
Carina Enke 195.1 73 <div class="gap-container">
Carina Enke 200.1 74 [graphic]
75 [gaps]
Carina Enke 195.1 76 </div>
77 {{/code}}
Carina Enke 65.1 78
Carina Enke 200.1 79 If you require CSS placement on the background graphic for several questions in the test, add [TITLEofQUESTION] to the class name. Insert an identifier for “TITLEofQUESTION” that is unique throughout the test.
Carina Enke 195.1 80
Carina Enke 198.2 81 {{code language="xml"}}
Carina Enke 200.1 82 <div class="gap-container [TITLEofQUESTION]">
83 [graphic]
84 [gaps]
Carina Enke 195.1 85 </div>
Carina Enke 65.1 86 {{/code}}
87
Carina Enke 200.1 88 Make sure that <(% style="font-family:Courier New,Courier,monospace" %)div(%%)> encloses your graphic and all gaps. Do not forget the closing tag ((% style="font-family:Courier New,Courier,monospace" %)</div>(%%)) following the last gap.
Carina Enke 195.1 89
Carina Enke 200.1 90 [[image:Aufgbe - HTML mit Container_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 195.1 91
Carina Enke 200.1 92 Now add another container around each gap. For all containers ((% style="font-family:Courier New,Courier,monospace" %)<span>(%%)), the class "gap” should be assigned. Another class should be assigned to identify each gap individually. We recommend numbering your gaps in order, starting with class "gap1” for the first gap, "gap2" for the second, and so on.
Carina Enke 195.1 93
Carina Enke 198.2 94 {{code language="xml"}}
Carina Enke 200.1 95 <span class="gap [gapID]"> </span>
Carina Enke 195.7 96 {{/code}}
Carina Enke 195.1 97
Carina Enke 200.1 98 {{info title="**Important**"}}
99 Please ensure not to alter the existing HTML code when editing the gaps. An incorrect adjustment in the HTML can render the whole question unusable.
Carina Enke 79.1 100 {{/info}}
Carina Enke 65.1 101
Carina Enke 200.1 102 Examples
103
104 {{code language="xml"}}
Carina Enke 195.1 105 <span class="gap gap1"> </span>
106 <span class="gap gap2"> </span>
107 {{/code}}
108
Carina Enke 195.7 109 [[image:attach:Aufgabe - sourcecode2_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 195.1 110
111
Carina Enke 200.1 112 == STEP 4: Place gaps on the graphic II (CSS) ==
Carina Enke 65.1 113
Carina Enke 200.1 114 To place your gaps on the background graphic, you now need to specify the exact position. This is done in a separate CSS file that can be uploaded to each question.
Carina Enke 65.1 115
Carina Enke 200.1 116 You can use the following CSS statements as a template for individual questions in the test:
Carina Enke 65.1 117
Carina Enke 198.2 118 {{code language="css"}}
Carina Enke 65.1 119 .gap-container {position: relative;}
120 .gap {position: absolute;}
121
Carina Enke 200.1 122 .[gapID] {top: [x]px; left: [y]px;}
Carina Enke 65.1 123 {{/code}}
124
Carina Enke 200.1 125 If you place gaps for several questions in the test using CSS and have thus used the class, name "gap-container [TITLEofQUESTION]" in the HTML of the question, then deploy this template:
Carina Enke 195.1 126
Carina Enke 198.4 127 {{info}}
Carina Enke 200.1 128 **Note**: Ensure that there is a space between the question and the gap name.
Carina Enke 195.1 129 {{/info}}
130
Carina Enke 200.1 131 Now insert your values for top and left in the statements related to the individual gaps (.gap1, .gap2, etc.) to determine their position. Add as many statements as there are gaps defined in your question.
Carina Enke 65.1 132
Carina Enke 200.1 133 Save your file as a CSS file (.css) and add it to your question on the **Options** tab in the ONYX Editor.
Carina Enke 65.1 134
Carina Enke 200.1 135 Use the preview in the ONYX Editor to verify whether the question is properly displayed.
Carina Enke 195.1 136
Carina Enke 198.2 137 {{code language="css"}}
Carina Enke 195.1 138 .gap-container {position: relative;}
139 .gap {position: absolute;}
140
Carina Enke 200.1 141 .[TITLEofQUESTION] .[gapID] {top: [x]px; left: [y]px;}
Carina Enke 195.1 142 {{/code}}
143
Carina Enke 200.1 144 Examples
Carina Enke 198.10 145
Carina Enke 198.9 146 {{code language="css"}}
147 .gap-container {position: relative;}
Carina Enke 195.1 148 .gap {position: absolute;}
Carina Enke 200.1 149
150 .Application1 .gap1 {top: 100px; left: 255px;}
151 .Application1 .gap2 {top: 50px; left: 75px;}
152 .Application1 .gap3 {top: 180px; left: 90px;}
Carina Enke 198.9 153 {{/code}}
Carina Enke 198.13 154
Carina Enke 199.1 155
Carina Enke 200.1 156 == STEP 5: Add the CSS file ==
Carina Enke 199.1 157
Carina Enke 200.1 158 Save your statement in a CSS file (.css). Now you can upload this file in the Options tab under Layout settings. Detailed instructions on this can be found here [[Set Options>>url:https://help.bps-system.de/wiki/bin/view/ONYX/Erstellung%20von%20Testinhalten/Aufgaben/Optionen%20festlegen/]] or [[Test configuration>>url:https://help.bps-system.de/wiki/bin/view/ONYX/Erstellung%20von%20Testinhalten/Test%20erstellen/Test-Optionen%20festlegen/]].
Carina Enke 198.13 159
160
Carina Enke 200.1 161 Please note:
Carina Enke 198.13 162
Carina Enke 200.1 163 * If the CSS file is uploaded to a question, it will affect the layout of such.
164 * If the CSS file is uploaded to a test, all selection tasks of the entire test are designed accordingly.
165 * If the Show all questions of a section per page option is activated on the test, a CSS file on an individual question affects all questions in the same section.
Carina Enke 198.13 166
167