Zum Inhalt springen
Version 196.1 von Carina Enke am 10.01.2024
Zeige letzte Bearbeiter
1 {{layout}}
2 {{layout-section ac:type="single"}}
3 {{layout-cell}}
4
5 {{/layout-cell}}
6 {{/layout-section}}
7
8 {{layout-section ac:type="two_right_sidebar"}}
9 {{layout-cell}}
10 ONYX bietet die Möglichkeit, mit CSS die Aufgabengestaltung anzupassen. Mittels CSS können Objekte auch am Bildschirm platziert werden. Auf diese Weise wird es möglich, Lücken auf einer Hintergrundgrafik zu platzieren.
11
12 {{info title="Hinweis"}}
13 Die Platzierung von Lücken auf einer Grafik funktioniert nur im Browser. Eine korrekte Anzeige der Aufgabe ist in den Exportansichten (PDF-Export, Prüfungseinsichtsseite) nicht möglich. Voraussetzung für die individuelle Platzierung von Lücken auf einer Grafik sind grundlegende Kenntnisse in HTML und CSS.
14
15 Für die Umsetzung vieler Szenarien eignet sich auch der Aufgabentyp [[Grafische Zuordnung>>doc:ONYX.Erstellung von Testinhalten.Aufgabentypen.Grafische Zuordnung.WebHome]].
16 {{/info}}
17 {{/layout-cell}}
18
19 {{layout-cell}}
20 {{panel borderColor="#ddd" bgColor="#f0f0f0" title="Inhalt"}}
21 {{toc style="square"/}}
22 {{/panel}}
23
24 {{panel borderColor="#ddd" bgColor="#f0f0f0" title="Beispiel-Ressourcen"}}
25 * [[attach:Anwendung1.zip]]
26 * [[attach:Anwendung1.css]]
27 {{/panel}}
28 {{/layout-cell}}
29 {{/layout-section}}
30
31 {{layout-section ac:type="single"}}
32 {{layout-cell}}
33 Die Vorgehensweise zur Platzierung von Lücken auf einer Hintergrundgrafik wird am Beispiel einer Aufgabe zum Thema Sachsen erläutert. Als Hintergrundgrafik wird eine Karte des Freistaates Sachsen genutzt. Drei Lücken werden auf der Karte so platziert, dass die Namen der Städte direkt an der richtigen Stelle auf der Karte eingegeben werden können.
34
35 [[image:attach:Beispiel Anwendung1png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
36
37
38
39
40
41
42
43
44
45
46
47
48 == 1. STEP: Erstellung einer neuen Aufgabe im Lückentext-Format ==
49
50 Der ONYX Editor unterstützt verschiedene Lückentext-Formate (u. a. Lückentext, Numerische Eingabe, Berechnung, Formelvergleich). Die Platzierung der Lücken auf einer Hintergrundgrafik funktioniert für alle Formate gleich. Im Folgenden wird die Platzierung für einen einfachen Lückentext erklärt. Um eine neue Aufgabe zu erstellen, klicken Sie auf den Button „Neue Aufgabe“. Wählen Sie den Aufgabentyp „Lückentextaufgabe“ und vergeben Sie einen Titel für Ihre Aufgabe.
51 {{/layout-cell}}
52 {{/layout-section}}
53
54 {{layout-section ac:type="single"}}
55 {{layout-cell}}
56
57 {{/layout-cell}}
58 {{/layout-section}}
59
60 {{layout-section ac:type="single"}}
61 {{layout-cell}}
62 == 2. STEP: Aufgabenbearbeitung und Hinzufügen der Inhalte ==
63
64 Der gesamte Aufgabeninhalt wird im Abschnitt Lückentext im HTML-Eingabefeld hinzugefügt. Tragen Sie zunächst Ihre Fragestellung ein, z. B. „Name the three independent cities of the state of Saxony“.
65
66 Fügen Sie nun die Hintergrundgrafik hinzu, auf der die Lücken später platziert werden sollen.
67
68 Anschließend fügen Sie direkt unterhalb der Grafik beliebig viele Lücken ein. Definieren Sie für jede Lücke die korrekte Lösung und die maximale Punktzahl. Zusätzlich können Sie weitere Einstellungen vornehmen.
69
70 {{info title="Hinweis"}}
71 Die Lücken sind direkt unter der Grafik zu platzieren.
72 {{/info}}
73 {{/layout-cell}}
74 {{/layout-section}}
75
76 {{layout-section ac:type="single"}}
77 {{layout-cell}}
78
79 {{/layout-cell}}
80 {{/layout-section}}
81
82 {{layout-section ac:type="single"}}
83 {{layout-cell}}
84 == 3. STEP: Platzierung der Lücken auf der Grafik I (HTML) ==
85
86 Die Platzierung der Lücken auf der Hintergrundgrafik wird mittels einer CSS-Positionierung der Lücken erreicht. Voraussetzung ist die Definition von CSS-Klassen im HTML-Quellcode. Den HTML-Quellcode Ihrer Aufgabe können Sie über die Option „Quellcode“ des HTML-Editors einsehen und bearbeiten.
87
88 Hinweis: Damit Sie das HTML besser bearbeiten können, sollten Sie Zeilenumbrüche einfügen, sodass jedes Element (<p>, <span>, <img /> usw.) auf einer eigenen Zeile steht.
89 {{/layout-cell}}
90 {{/layout-section}}
91
92 {{layout-section ac:type="two_equal"}}
93 {{layout-cell}}
94 [[image:attach:Aufgabe - Quelltext öffnen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
95
96
97 {{/layout-cell}}
98
99 {{layout-cell}}
100 [[image:attach:Aufgabe - sourcecode_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
101 {{/layout-cell}}
102 {{/layout-section}}
103
104 {{layout-section ac:type="single"}}
105 {{layout-cell}}
106
107 {{/layout-cell}}
108 {{/layout-section}}
109
110 {{layout-section ac:type="single"}}
111 {{layout-cell}}
112 Ihre Grafik erkennen Sie an folgendem HTML-Code:
113
114 {{code language="xml" title="Lücke"}}
115  <img data-cke-saved-src="media?r=mMjc2MzQ1MzI src="media?r=mMjc2MzQ1MzI ... />
116 {{/code}}
117
118 (% class="auto-cursor-target" %)
119 Die Lücken werden im HTML wie folgt ausgezeichnet:
120
121 {{code language="xml" title="Lücke"}}
122 <img id="RESPONSE_1" class="mce_onyx_gap" data-cke-saved-src="img/icons/gap-placeholder.png" src="img/icons/gap-placeholder.png" alt="" />
123 {{/code}}
124 {{/layout-cell}}
125 {{/layout-section}}
126
127 {{layout-section ac:type="single"}}
128 {{layout-cell}}
129
130 {{/layout-cell}}
131 {{/layout-section}}
132
133 {{layout-section ac:type="two_equal"}}
134 {{layout-cell}}
135 Um die Grafik und Ihre Lücken müssen Sie einen Container (<div>) mit der Klasse „gap-container“ setzen.
136
137 {{code language="xml" title="Lücke"}}
138 <div class="gap-container">
139 [Grafik]
140 [Lücken]
141 </div>
142 {{/code}}
143
144 Benötigen Sie die CSS-Platzierung auf der Hintergrundgrafik für mehrere Aufgaben im Test, ergänzen Sie bei der Klassenbezeichnung die Angabe [NAMEderAUFGABE]. Setzen Sie für "NAMEderAUFGABE" einen testweit eindeutigen Bezeichner ein.
145
146 {{code language="xml" title="Lücke"}}
147 <div class="gap-container [NAMEderAUFGABE]">
148 [Grafik]
149 [Lücken]
150 </div>
151 {{/code}}
152
153 Achten Sie bitte darauf, dass das <div> Ihre Grafik und alle Lücken umschließt. Vergessen Sie nach der letzten Lücke das schließende Tag (</div>) nicht.
154 {{/layout-cell}}
155
156 {{layout-cell}}
157 (% class="auto-cursor-target" %)
158 [[image:attach:Aufgbe - HTML mit Container_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
159 {{/layout-cell}}
160 {{/layout-section}}
161
162 {{layout-section ac:type="two_equal"}}
163 {{layout-cell}}
164 Nun fügen Sie um jede einzelne Lücke einen weiteren Container hinzu. Alle Container (<span>) bekommen die Klasse „gap“ zugewiesen. Zusätzlich vergeben Sie bitte eine weitere Klasse, die jede einzelne Lücke individuell auszeichnet. Am besten nummerieren Sie Ihre Lücken entsprechend der Reihenfolge und vergeben für die erste Lücke die Klasse „gap1“, für die zweite die Klasse „gap2“ usw.
165
166 {{code language="xml" title="Lücke"}}
167 <span class="gap [LückenID]"> </span>
168 {{/code}}
169
170 {{info title="Wichtig"}}
171 Achten Sie beim Bearbeiten bitte drauf, den bestehenden HTML-Code nicht zu verändern. Eine falsche Anpassung im HTML kann die gesamte Aufgabe unbrauchbar machen.
172 {{/info}}
173
174 {{code language="xml" title="Beispiele"}}
175 <span class="gap gap1"> </span>
176 <span class="gap gap2"> </span>
177 {{/code}}
178 {{/layout-cell}}
179
180 {{layout-cell}}
181 (% class="auto-cursor-target" %)
182 [[image:attach:Aufgabe - sourcecode2_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
183
184
185
186 {{/layout-cell}}
187 {{/layout-section}}
188
189 {{layout-section ac:type="single"}}
190 {{layout-cell}}
191
192 {{/layout-cell}}
193 {{/layout-section}}
194
195 {{layout-section ac:type="single"}}
196 {{layout-cell}}
197 == 4. STEP: Platzierung der Lücken auf der Grafik II (CSS) ==
198
199 Um Ihre Lücken auf der Hintergrundgrafik zu platzieren, ist nun noch die genaue Positionsangabe erforderlich. Diese erfolgt in einer separaten CSS-Datei, welche Sie zu jeder Aufgabe hochladen können.
200 {{/layout-cell}}
201 {{/layout-section}}
202
203 {{layout-section ac:type="two_equal"}}
204 {{layout-cell}}
205 Als Vorlage können Sie folgende CSS-Anweisungen für eine einzelne Aufgabe im Test nutzen:
206 {{/layout-cell}}
207
208 {{layout-cell}}
209 {{code language="xml" title="Lücke"}}
210 .gap-container {position: relative;}
211 .gap {position: absolute;}
212
213 .[LückenID] {top: [x]px; left: [y]px;}
214 {{/code}}
215 {{/layout-cell}}
216 {{/layout-section}}
217
218 {{layout-section ac:type="two_equal"}}
219 {{layout-cell}}
220 Wenn Sie zu mehreren Aufgaben im Test eine Platzierung per CSS vornehmen und somit im HTML der Aufgabe die Klassenbezeichnung "gap-container [NAMEderAUFGABE]" genutzt haben, dann verwenden Sie diese Vorlage:
221
222 {{info title="Hinweis"}}
223 Achten Sie auf das Leerzeichen zwischen Aufgaben- und Lückenbezeichnung.
224 {{/info}}
225
226 Bei den Anweisungen für die einzelnen Lücken (.gap1, .gap2 usw.) setzen Sie nun Ihre Werte bei top und left für die Positionierung ein. Fügen Sie so viele Anweisungen hinzu, wie Sie Lücken in Ihrer Aufgabe definiert haben.
227
228 Speichern Sie Ihre Datei als CSS-Datei (.css) ab und fügen Sie diese im ONYX Editor Ihrer Aufgabe im Tab Optionen hinzu.
229
230 Nutzen Sie die Vorschau im ONYX Editor, um die korrekte Darstellung Ihrer Aufgabe zu überprüfen.
231 {{/layout-cell}}
232
233 {{layout-cell}}
234 {{code language="xml" title="Lücke"}}
235 .gap-container {position: relative;}
236 .gap {position: absolute;}
237
238 .[NAMEderAUFGABE] .[LückenID] {top: [x]px; left: [y]px;}
239 {{/code}}
240
241 {{code language="xml" title="Beispiel"}}
242 .gap-container {position: relative;}
243 .gap {position: absolute;}
244
245
246 .Anwendung1 .gap1 {top: 100px; left: 255px;}
247 .Anwendung1 .gap2 {top: 50px; left: 75px;}
248 .Anwendung1 .gap3 {top: 180px; left: 90px;}
249 {{/code}}
250 {{/layout-cell}}
251 {{/layout-section}}
252 {{/layout}}
253
254 {{layout}}
255 {{layout-section ac:type="two_right_sidebar"}}
256 {{layout-cell}}
257 ONYX allows you to customise the question design with CSS. Using CSS, you can also place elements on the screen. This makes it possible to place gaps on a background graphic.
258
259 {{info title="Note"}}
260 Placing gaps on a graphic only works in the browser. The export views (PDF export, exam overview page, etc.) do not allow for a correct question display. A prerequisite for placing individual gaps on a graphic is basic knowledge of HTML and CSS.
261
262 The [[graphic match interaction>>url:https://www.bps-system.de/help/display/ONYXintern/Grafische+Zuordnung||shape="rect" title="Graphic match interaction"]] question type is also suitable for implementing many scenarios.
263 {{/info}}
264 {{/layout-cell}}
265
266 {{layout-cell}}
267 {{panel title="Content"}}
268 {{toc style="square"/}}
269 {{/panel}}
270
271 {{panel title="Example resources"}}
272 * [[Application1.zip>>url:https://www.bps-system.de/help/download/attachments/390266997/Anwendung1.zip?version=1&modificationDate=1605172913165&api=v2||shape="rect"]]
273 * [[Application2.css>>url:https://www.bps-system.de/help/download/attachments/390266997/Anwendung1.css?version=1&modificationDate=1605172913151&api=v2||shape="rect"]]
274 {{/panel}}
275 {{/layout-cell}}
276 {{/layout-section}}
277
278 {{layout-section ac:type="single"}}
279 {{layout-cell}}
280 The procedure for placing gaps on a background graphic is explained using the example of a question about Saxony. A map of the Free State of Saxony serves as a background graphic. Three gaps are placed on the map so that the names of the cities can be entered directly in the correct place on the map.
281
282 [[image:attach:Beispiel Anwendung1png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
283
284 == STEP 1: Create new question in text entry format ==
285
286 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 the "New question” button. Then select the "text entry interaction" question type and enter a title for your question.
287 {{/layout-cell}}
288 {{/layout-section}}
289
290 {{layout-section ac:type="single"}}
291 {{layout-cell}}
292
293 {{/layout-cell}}
294 {{/layout-section}}
295
296 {{layout-section ac:type="single"}}
297 {{layout-cell}}
298 == STEP 2: Edit question and add content ==
299
300 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".
301
302 Now add the background graphic on which the gaps should be placed later.
303
304 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.
305
306 {{info title="Note"}}
307 The gaps need to be placed directly below the graphic.
308 {{/info}}
309 {{/layout-cell}}
310 {{/layout-section}}
311
312 {{layout-section ac:type="single"}}
313 {{layout-cell}}
314
315 {{/layout-cell}}
316 {{/layout-section}}
317
318 {{layout-section ac:type="single"}}
319 {{layout-cell}}
320 == STEP 3: Place gaps on graphic I (HTML) ==
321
322 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.
323
324 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.
325 {{/layout-cell}}
326 {{/layout-section}}
327
328 {{layout-section ac:type="two_equal"}}
329 {{layout-cell}}
330 [[image:attach:Aufgabe - Quelltext öffnen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
331 {{/layout-cell}}
332
333 {{layout-cell}}
334 [[image:attach:Aufgabe - sourcecode_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
335 {{/layout-cell}}
336 {{/layout-section}}
337
338 {{layout-section ac:type="single"}}
339 {{layout-cell}}
340
341 {{/layout-cell}}
342 {{/layout-section}}
343
344 {{layout-section ac:type="single"}}
345 {{layout-cell}}
346 You can identify your graphic by the following HTML code:
347
348 {{code language="xml" title="Gap"}}
349 <img data-cke-saved-src="media?r=mMjc2MzQ1MzI src="media?r=mMjc2MzQ1MzI ... />
350 {{/code}}
351
352 The gaps are marked in the HTML as follows:
353
354 {{code language="xml" title="Gap"}}
355 <img id="RESPONSE_1" class="mce_onyx_gap" data-cke-saved-src="img/icons/gap-placeholder.png" src="img/icons/gap-placeholder.png" alt="" />
356 {{/code}}
357 {{/layout-cell}}
358 {{/layout-section}}
359
360 {{layout-section ac:type="single"}}
361 {{layout-cell}}
362
363 {{/layout-cell}}
364 {{/layout-section}}
365
366 {{layout-section ac:type="two_equal"}}
367 {{layout-cell}}
368 You need to set a container (<div>) with the class "gap-container" around the graphic and your gaps.
369
370 {{code language="xml" title="Gap"}}
371 <div class="gap-container">
372 [graphic]
373 [gaps]
374 </div>
375 {{/code}}
376
377 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.
378
379 {{code language="xml" title="Gap"}}
380 <div class="gap-container [TITLEofQUESTION]">
381 [graphic]
382 [gaps]
383 </div>
384 {{/code}}
385
386 Make sure that <div> encloses your graphic and all gaps. Do not forget the closing tag (</div>) following the last gap.
387 {{/layout-cell}}
388
389 {{layout-cell}}
390 [[image:attach:Aufgbe - HTML mit Container_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
391 {{/layout-cell}}
392 {{/layout-section}}
393
394 {{layout-section ac:type="two_equal"}}
395 {{layout-cell}}
396 Now add another container around each individual gap. For all containers (<span>), the class "gap” should be assigned. Another class should be assigned to identify each gap individually. We recommend to number your gaps in order, starting with class "gap1” for the first gap, "gap2" for the second gap and so on.
397
398 {{code language="xml" title="Gap"}}
399 <span class="gap [gapID]"> </span>
400 {{/code}}
401
402 {{info title="Important"}}
403 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.
404 {{/info}}
405
406 {{code language="xml" title="Examples"}}
407 <span class="gap gap1"> </span>
408 <span class="gap gap2"> </span>
409 {{/code}}
410 {{/layout-cell}}
411
412 {{layout-cell}}
413 [[image:attach:Aufgabe - sourcecode2_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
414 {{/layout-cell}}
415 {{/layout-section}}
416
417 {{layout-section ac:type="single"}}
418 {{layout-cell}}
419
420 {{/layout-cell}}
421 {{/layout-section}}
422
423 {{layout-section ac:type="single"}}
424 {{layout-cell}}
425 == STEP 4: Place gaps on graphic II (CSS) ==
426
427 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.
428 {{/layout-cell}}
429 {{/layout-section}}
430
431 {{layout-section ac:type="two_equal"}}
432 {{layout-cell}}
433 You can use the following CSS statements as a template for individual questions in the test:
434 {{/layout-cell}}
435
436 {{layout-cell}}
437 {{code language="xml" title="Gap"}}
438 .gap-container {position: relative;}
439 .gap {position: absolute;}
440
441 .[gapID] {top: [x]px; left: [y]px;}
442 {{/code}}
443 {{/layout-cell}}
444 {{/layout-section}}
445
446 {{layout-section ac:type="two_equal"}}
447 {{layout-cell}}
448 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:
449
450 {{info title="Note"}}
451 Ensure there is a space between the question and the gap name.
452 {{/info}}
453
454 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.
455
456 Save your file to a CSS file (.css) and add it to your question on the **Options** tab in the ONYX Editor.
457
458 Use the preview in the ONYX Editor to verify whether the question is properly displayed.
459 {{/layout-cell}}
460
461 {{layout-cell}}
462 {{code language="xml" title="Gap"}}
463 .gap-container {position: relative;}
464 .gap {position: absolute;}
465
466 .[TITLEofQUESTION] .[gapID] {top: [x]px; left: [y]px;}
467 {{/code}}
468
469 {{code language="xml" title="Example"}}
470 .gap-container {position: relative;}
471 .gap {position: absolute;}
472
473
474 .Application1 .gap1 {top: 100px; left: 255px;}
475 .Application1 .gap2 {top: 50px; left: 75px;}
476 .Application1 .gap3 {top: 180px; left: 90px;}
477 {{/code}}
478 {{/layout-cell}}
479 {{/layout-section}}
480 {{/layout}}