Zum Inhalt springen
Version 65.1 von Carina Enke am 20.10.2023
Zeige letzte Bearbeiter
1 {{sv-translation language="de"}}
2 {{layout}}
3 {{layout-section ac:type="single"}}
4 {{layout-cell}}
5 \\
6
7 {{details}}
8 (% class="wrapped" %)
9 |=(((
10 Verantwortlicher
11 )))|(((
12 \\
13 )))
14 |=(% colspan="1" %)(% colspan="1" %)
15 (((
16 Status
17 )))|(% class="highlight-yellow" colspan="1" data-highlight-colour="yellow" %)(% class="highlight-yellow" colspan="1" data-highlight-colour="yellow" %)
18 (((
19 (% class="content-wrapper" %)
20 (((
21 {{sv-metadata type="workflow-status"/}}
22
23 {{status colour="Green" title="Fertig"/}}
24 )))
25 )))
26 |=(% colspan="1" %)(% colspan="1" %)
27 (((
28 Varianten
29 )))|(% colspan="1" %)(% colspan="1" %)
30 (((
31 (% class="content-wrapper" %)
32 (((
33 {{sv-metadata type="variants"/}}
34 )))
35 )))
36 |=(% colspan="1" %)(% colspan="1" %)
37 (((
38 Attribute
39 )))|(% colspan="1" %)(% colspan="1" %)
40 (((
41 (% class="content-wrapper" %)
42 (((
43 {{sv-metadata type="attributes"/}}
44 )))
45 )))
46 |=(% colspan="1" %)(% colspan="1" %)
47 (((
48 Pagekey
49 )))|(% colspan="1" %)(% colspan="1" %)
50 (((
51 (% class="content-wrapper" %)
52 (((
53 {{sv-metadata type="pagekey"/}}
54 )))
55 )))
56 |=(% colspan="1" %)(% colspan="1" %)
57 (((
58 Übersetzung
59 )))|(% colspan="1" %)(% colspan="1" %)
60 (((
61 (% class="content-wrapper" %)
62 (((
63 Place gaps on a background graphic (CSS) 
64
65 {{status colour="Green" title="fertig"/}}
66 )))
67 )))
68 |=(% colspan="1" %)(% colspan="1" %)
69 (((
70 TODOs
71 )))|(% colspan="1" %)(% colspan="1" %)
72 (((
73 (% class="task-list" %)
74 (((
75 {{task reference="/Tasks/Task_4" status="Done"}}
76 carina: MARKETING-143 Versionstypen angepasst
77 {{/task}}
78
79 {{task reference="/Tasks/Task_5" status="Done"}}
80 carina: Anpassung durch ONYX-8568
81 {{/task}}
82
83 {{task reference="/Tasks/Task_7" status="Done"}}
84 carina {{mention reference="XWiki.0a49950f5c0f19a8015c101b60e10001" style="FULL_NAME" anchor="XWiki-0a49950f5c0f19a8015c101b60e10001-vnGCt"/}}Ein paar inhaltliche Änderungen (Step3 und 4){{date value="2020-11-30" format="yyyy-MM-dd"/}}
85 {{/task}}
86 )))
87 )))
88 {{/details}}
89 {{/layout-cell}}
90 {{/layout-section}}
91
92 {{layout-section ac:type="two_right_sidebar"}}
93 {{layout-cell}}
94 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.
95
96 {{info title="Hinweis"}}
97 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.
98
99 Für die Umsetzung vieler Szenarien eignet sich auch der Aufgabentyp [[doc:Grafische Zuordnung]].
100 {{/info}}
101 {{/layout-cell}}
102
103 {{layout-cell}}
104 {{panel borderColor="#ddd" bgColor="#f0f0f0" title="Inhalt"}}
105
106
107 {{toc style="square"/}}
108 {{/panel}}
109
110 {{panel borderColor="#ddd" bgColor="#f0f0f0" title="Beispiel-Ressourcen"}}
111 * [[attach:Anwendung1.zip]]
112 * [[attach:Anwendung1.css]]
113 {{/panel}}
114 {{/layout-cell}}
115 {{/layout-section}}
116
117 {{layout-section ac:type="single"}}
118 {{layout-cell}}
119 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.
120
121 [[image:attach:Beispiel Anwendung1png]]
122
123 \\
124
125 \\
126
127 \\
128
129 \\
130
131 \\
132
133 \\
134
135 \\
136
137 \\
138
139 \\
140
141 \\
142
143 \\
144
145 == 1. STEP: Erstellung einer neuen Aufgabe im Lückentext-Format ==
146
147 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.
148 {{/layout-cell}}
149 {{/layout-section}}
150
151 {{layout-section ac:type="single"}}
152 {{layout-cell}}
153 \\
154 {{/layout-cell}}
155 {{/layout-section}}
156
157 {{layout-section ac:type="single"}}
158 {{layout-cell}}
159 == 2. STEP: Aufgabenbearbeitung und Hinzufügen der Inhalte ==
160
161 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“.
162
163 Fügen Sie nun die Hintergrundgrafik hinzu, auf der die Lücken später platziert werden sollen.
164
165 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.
166
167 {{info title="Hinweis"}}
168 Die Lücken sind direkt unter der Grafik zu platzieren.
169 {{/info}}
170 {{/layout-cell}}
171 {{/layout-section}}
172
173 {{layout-section ac:type="single"}}
174 {{layout-cell}}
175 \\
176 {{/layout-cell}}
177 {{/layout-section}}
178
179 {{layout-section ac:type="single"}}
180 {{layout-cell}}
181 == 3. STEP: Platzierung der Lücken auf der Grafik I (HTML) ==
182
183 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.
184
185 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.
186 {{/layout-cell}}
187 {{/layout-section}}
188
189 {{layout-section ac:type="two_equal"}}
190 {{layout-cell}}
191 [[image:attach:Aufgabe - Quelltext öffnen_de.png]]
192
193 \\
194 {{/layout-cell}}
195
196 {{layout-cell}}
197 [[image:attach:Aufgabe - sourcecode_de.png]]
198 {{/layout-cell}}
199 {{/layout-section}}
200
201 {{layout-section ac:type="single"}}
202 {{layout-cell}}
203 \\
204 {{/layout-cell}}
205 {{/layout-section}}
206
207 {{layout-section ac:type="single"}}
208 {{layout-cell}}
209 Ihre Grafik erkennen Sie an folgendem HTML-Code:
210
211 {{code language="xml" title="Lücke"}}
212  <img src="media?r=mMjc2MzQ1MzI ... />
213 {{/code}}
214
215 (% class="auto-cursor-target" %)
216 Die Lücken werden im HTML wie folgt ausgezeichnet:
217
218 {{code language="xml" title="Lücke"}}
219 <img id="RESPONSE_1" class="mce_onyx_gap" src="img/icons/gap-placeholder.png" alt="" />
220 {{/code}}
221 {{/layout-cell}}
222 {{/layout-section}}
223
224 {{layout-section ac:type="single"}}
225 {{layout-cell}}
226 \\
227 {{/layout-cell}}
228 {{/layout-section}}
229
230 {{layout-section ac:type="two_equal"}}
231 {{layout-cell}}
232 Um die Grafik und Ihre Lücken müssen Sie einen Container (<div>) mit der Klasse „gap-container“ setzen.
233
234 {{code language="xml" title="Lücke"}}
235 <div class="gap-container">
236 [Grafik]
237 [Lücken]
238 </div>
239 {{/code}}
240
241 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.
242
243 {{code language="xml" title="Lücke"}}
244 <div class="gap-container [NAMEderAUFGABE]">
245 [Grafik]
246 [Lücken]
247 </div>
248 {{/code}}
249
250 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.
251 {{/layout-cell}}
252
253 {{layout-cell}}
254 (% class="auto-cursor-target" %)
255 [[image:attach:Aufgbe - HTML mit Container_de.png]]
256 {{/layout-cell}}
257 {{/layout-section}}
258
259 {{layout-section ac:type="two_equal"}}
260 {{layout-cell}}
261 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.
262
263 {{code language="xml" title="Lücke"}}<span class="gap [LückenID]"> </span>{{/code}}\\
264
265 {{info title="Wichtig"}}
266 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.
267 {{/info}}
268
269 {{code language="xml" title="Beispiele"}}
270 <span class="gap gap1"> </span>
271 <span class="gap gap2"> </span>
272 {{/code}}
273 {{/layout-cell}}
274
275 {{layout-cell}}
276 (% class="auto-cursor-target" %)
277 [[image:attach:Aufgabe - sourcecode2_de.png]]
278
279
280 \\
281 {{/layout-cell}}
282 {{/layout-section}}
283
284 {{layout-section ac:type="single"}}
285 {{layout-cell}}
286 \\
287 {{/layout-cell}}
288 {{/layout-section}}
289
290 {{layout-section ac:type="single"}}
291 {{layout-cell}}
292 == 4. STEP: Platzierung der Lücken auf der Grafik II (CSS) ==
293
294 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.
295 {{/layout-cell}}
296 {{/layout-section}}
297
298 {{layout-section ac:type="two_equal"}}
299 {{layout-cell}}
300 Als Vorlage können Sie folgende CSS-Anweisungen für eine einzelne Aufgabe im Test nutzen:
301 {{/layout-cell}}
302
303 {{layout-cell}}
304 {{code language="xml" title="Lücke"}}
305 .gap-container {position: relative;}
306 .gap {position: absolute;}
307
308 .[LückenID] {top: [x]px; left: [y]px;}
309 {{/code}}
310 {{/layout-cell}}
311 {{/layout-section}}
312
313 {{layout-section ac:type="two_equal"}}
314 {{layout-cell}}
315 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:
316
317 {{info title="Hinweis"}}
318 Achten Sie auf das Leerzeichen zwischen Aufgaben- und Lückenbezeichnung.
319 {{/info}}
320
321 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.
322
323 Speichern Sie Ihre Datei als CSS-Datei (.css) ab und fügen Sie diese im ONYX Editor Ihrer Aufgabe im Tab Optionen hinzu.
324
325 Nutzen Sie die Vorschau im ONYX Editor, um die korrekte Darstellung Ihrer Aufgabe zu überprüfen.
326 {{/layout-cell}}
327
328 {{layout-cell}}
329 {{code language="xml" title="Lücke"}}
330 .gap-container {position: relative;}
331 .gap {position: absolute;}
332
333 .[NAMEderAUFGABE] .[LückenID] {top: [x]px; left: [y]px;}
334 {{/code}}
335
336 {{code language="xml" title="Beispiel"}}
337 .gap-container {position: relative;}
338 .gap {position: absolute;}
339
340
341 .Anwendung1 .gap1 {top: 100px; left: 255px;}
342 .Anwendung1 .gap2 {top: 50px; left: 75px;}
343 .Anwendung1 .gap3 {top: 180px; left: 90px;}
344 {{/code}}
345 {{/layout-cell}}
346 {{/layout-section}}
347 {{/layout}}
348 {{/sv-translation}}
349
350 {{sv-translation language="en"}}
351 {{layout}}
352 {{layout-section ac:type="two_right_sidebar"}}
353 {{layout-cell}}
354 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.
355
356 {{info title="Note"}}
357 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.
358
359 The [[graphic match interaction>>url:https://www.bps-system.de/help/display/ONYXintern/Grafische+Zuordnung||title="Graphic match interaction" shape="rect"]] question type is also suitable for implementing many scenarios.
360 {{/info}}
361 {{/layout-cell}}
362
363 {{layout-cell}}
364 {{panel title="Content"}}
365
366
367 {{toc style="square"/}}
368 {{/panel}}
369
370 {{panel title="Example resources"}}
371 * [[Application1.zip>>url:https://www.bps-system.de/help/download/attachments/390266997/Anwendung1.zip?version=1&modificationDate=1605172913165&api=v2||shape="rect"]]
372 * [[Application2.css>>url:https://www.bps-system.de/help/download/attachments/390266997/Anwendung1.css?version=1&modificationDate=1605172913151&api=v2||shape="rect"]]
373 {{/panel}}
374 {{/layout-cell}}
375 {{/layout-section}}
376
377 {{layout-section ac:type="single"}}
378 {{layout-cell}}
379 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.
380
381 [[image:attach:Beispiel Anwendung1png]]
382
383 == STEP 1: Create new question in text entry format ==
384
385 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.
386 {{/layout-cell}}
387 {{/layout-section}}
388
389 {{layout-section ac:type="single"}}
390 {{layout-cell}}
391 \\
392 {{/layout-cell}}
393 {{/layout-section}}
394
395 {{layout-section ac:type="single"}}
396 {{layout-cell}}
397 == STEP 2: Edit question and add content ==
398
399 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".
400
401 Now add the background graphic on which the gaps should be placed later.
402
403 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.
404
405 {{info title="Note"}}
406 The gaps need to be placed directly below the graphic.
407 {{/info}}
408 {{/layout-cell}}
409 {{/layout-section}}
410
411 {{layout-section ac:type="single"}}
412 {{layout-cell}}
413 \\
414 {{/layout-cell}}
415 {{/layout-section}}
416
417 {{layout-section ac:type="single"}}
418 {{layout-cell}}
419 == STEP 3: Place gaps on graphic I (HTML) ==
420
421 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.
422
423 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.
424 {{/layout-cell}}
425 {{/layout-section}}
426
427 {{layout-section ac:type="two_equal"}}
428 {{layout-cell}}
429 [[image:attach:Aufgabe - Quelltext öffnen_de.png]]
430 {{/layout-cell}}
431
432 {{layout-cell}}
433 [[image:attach:Aufgabe - sourcecode_de.png]]
434 {{/layout-cell}}
435 {{/layout-section}}
436
437 {{layout-section ac:type="single"}}
438 {{layout-cell}}
439 \\
440 {{/layout-cell}}
441 {{/layout-section}}
442
443 {{layout-section ac:type="single"}}
444 {{layout-cell}}
445 You can identify your graphic by the following HTML code:
446
447 {{code language="xml" title="Gap"}}
448 <img src="media?r=mMjc2MzQ1MzI ... />
449 {{/code}}
450
451 The gaps are marked in the HTML as follows:
452
453 {{code language="xml" title="Gap"}}
454 <img id="RESPONSE_1" class="mce_onyx_gap" src="img/icons/gap-placeholder.png" alt="" />
455 {{/code}}
456 {{/layout-cell}}
457 {{/layout-section}}
458
459 {{layout-section ac:type="single"}}
460 {{layout-cell}}
461 \\
462 {{/layout-cell}}
463 {{/layout-section}}
464
465 {{layout-section ac:type="two_equal"}}
466 {{layout-cell}}
467 You need to set a container (<div>) with the class "gap-container" around the graphic and your gaps.
468
469 {{code language="xml" title="Gap"}}
470 <div class="gap-container">
471 [graphic]
472 [gaps]
473 </div>
474 {{/code}}
475
476 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.
477
478 {{code language="xml" title="Gap"}}
479 <div class="gap-container [TITLEofQUESTION]">
480 [graphic]
481 [gaps]
482 </div>
483 {{/code}}
484
485 Make sure that <div> encloses your graphic and all gaps. Do not forget the closing tag (</div>) following the last gap.
486 {{/layout-cell}}
487
488 {{layout-cell}}
489 [[image:attach:Aufgbe - HTML mit Container_de.png]]
490 {{/layout-cell}}
491 {{/layout-section}}
492
493 {{layout-section ac:type="two_equal"}}
494 {{layout-cell}}
495 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.
496
497 {{code language="xml" title="Gap"}}
498 <span class="gap [gapID]"> </span>
499 {{/code}}
500
501 {{info title="Important"}}
502 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.
503 {{/info}}
504
505 {{code language="xml" title="Examples"}}
506 <span class="gap gap1"> </span>
507 <span class="gap gap2"> </span>
508 {{/code}}
509 {{/layout-cell}}
510
511 {{layout-cell}}
512 [[image:attach:Aufgabe - sourcecode2_de.png]]
513 {{/layout-cell}}
514 {{/layout-section}}
515
516 {{layout-section ac:type="single"}}
517 {{layout-cell}}
518 \\
519 {{/layout-cell}}
520 {{/layout-section}}
521
522 {{layout-section ac:type="single"}}
523 {{layout-cell}}
524 == STEP 4: Place gaps on graphic II (CSS) ==
525
526 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.
527 {{/layout-cell}}
528 {{/layout-section}}
529
530 {{layout-section ac:type="two_equal"}}
531 {{layout-cell}}
532 You can use the following CSS statements as a template for individual questions in the test:
533 {{/layout-cell}}
534
535 {{layout-cell}}
536 {{code language="xml" title="Gap"}}
537 .gap-container {position: relative;}
538 .gap {position: absolute;}
539
540 .[gapID] {top: [x]px; left: [y]px;}
541 {{/code}}
542 {{/layout-cell}}
543 {{/layout-section}}
544
545 {{layout-section ac:type="two_equal"}}
546 {{layout-cell}}
547 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:
548
549 {{info title="Note"}}
550 Ensure there is a space between the question and the gap name.
551 {{/info}}
552
553 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.
554
555 Save your file to a CSS file (.css) and add it to your question on the **Options** tab in the ONYX Editor.
556
557 Use the preview in the ONYX Editor to verify whether the question is properly displayed.
558 {{/layout-cell}}
559
560 {{layout-cell}}
561 {{code language="xml" title="Gap"}}
562 .gap-container {position: relative;}
563 .gap {position: absolute;}
564
565 .[TITLEofQUESTION] .[gapID] {top: [x]px; left: [y]px;}
566 {{/code}}
567
568 {{code language="xml" title="Example"}}
569 .gap-container {position: relative;}
570 .gap {position: absolute;}
571
572
573 .Application1 .gap1 {top: 100px; left: 255px;}
574 .Application1 .gap2 {top: 50px; left: 75px;}
575 .Application1 .gap3 {top: 180px; left: 90px;}
576 {{/code}}
577 {{/layout-cell}}
578 {{/layout-section}}
579 {{/layout}}
580 {{/sv-translation}}