Zum Inhalt springen
Zuletzt geändert von Anna Paul-Hasenfuss am 13.11.2024
Verstecke letzte Bearbeiter
Carina Enke 549.2 1 {{section}}
2 {{column width="60%"}}
Carina Enke 182.1 3 ONYX bietet die Möglichkeit mit CSS die Aufgabengestaltung anzupassen. Mittels CSS können Objekte, wie die Elemente einer Zuordnungsaufgabe (Drag-and-Drop) für die Anzeige am Bildschirm hinsichtlich Größe und Abständen individuell angepasst werden.
Carina Enke 546.8 4
Carina Enke 182.1 5
6 {{info title="Hinweis"}}
7 Die individuelle Anpassung der Zuordnungselemente hinsichtlich Größe und Abständen funktioniert nur im Browser. Die angepasste Anzeige der Aufgabe ist in den Exportansichten (PDF-Export, Prüfungseinsichtsseite) nicht möglich. Voraussetzung für die Anpassungen sind grundlegende Kenntnisse in HTML und CSS.
8 {{/info}}
Carina Enke 549.2 9 {{/column}}
Carina Enke 182.1 10
Carina Enke 549.2 11 {{column width="30%"}}
12 {{panel title="Inhalt"}}
13 {{toc start="2"/}}
Carina Enke 182.1 14 {{/panel}}
Carina Enke 549.2 15 {{/column}}
16 {{/section}}
17
Carina Enke 182.1 18 Die Vorgehensweise zur Änderung der Größe und den Abständen von Zuordnungselementen wird am Beispiel einer Zuordnungsaufgabe zum Thema Johann Wolfgang von Goethe erläutert. Die Zuordnungselemente enthalten Text-Zitate aus den Werken des Dichters. Die Standard-Anzeige der Zuordnungsaufgabe begrenzt die Zuordnungselemente auf 300 Pixel (px) Breite und bietet nur einen geringen Abstand zum Rand, um den Platzbedarf zu optimieren und Bildmedien optimal einzubinden. Für die langen Textpassagen kann eine breitere Anzeige der Boxen und ein erhöhter Abstand zum Rand gewünscht sein.
Carina Enke 546.8 19
Carina Enke 182.1 20
Carina Enke 549.4 21 [[image:attach:Order_without_css.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="209" width="430"]] [[image:attach:Order_with_css.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 182.1 22
23 {{info}}
24 Für die Durchführung der Tests auf Geräten mit kleinen Bildschirmen, beispielsweise auf mobilen Endgeräten, erschwert eine erhöhte Breite der Zuordnungselemente die Navigation erheblich.
25 {{/info}}
26
27 == 1. STEP: Erstellung einer neuen Einfachen Zuordnung (Drag-and-Drop) ==
28
Carina Enke 547.2 29 Die Anpassungen sind für die Zuordnungselemente einer "Einfachen Zuordnung (Drag-and-Drop)" möglich. Für die Erstellung der Aufgabe können Sie wie gewohnt vorgehen. Eine detaillierte Anleitung finden Sie im Hilfeabschnitt zum Aufgabentyp [[Einfache Zuordnungsaufgabe>>doc:ONYX.Erstellung von Testinhalten.Aufgabentypen.Einfache Zuordnungsaufgabe.WebHome]].
Carina Enke 182.1 30
Carina Enke 549.4 31
Carina Enke 182.1 32 == 2. STEP: Anpassung der Zuordnungselemente (CSS) ==
33
34 Die individuelle Konfiguration zur Größe, sowie zum Abstand des Inhaltes zum Rand der Zuordnungselemente erfolgt in einer separaten CSS-Datei, welche Sie zu jeder Aufgabe hochladen können.
35
36 Als Vorlage können Sie folgende CSS-Anweisungen nutzen:
37
Carina Enke 549.4 38 {{code language="css"}}
Carina Enke 182.1 39 .interaction-match .dragCont {min-width: 500px;}
40 .interaction-match .dragCont div {padding: 10px;}
41 {{/code}}
42
Carina Enke 549.5 43 Die Einstellung (% style="font-family:Courier New,Courier,monospace" %)min-width(%%) definiert die Größe der Zuordnungselemente. Die Standardeinstellung, wenn keine CSS-Konfiguration vorliegt sind 300 px.
44 Die Einstellung (% style="font-family:Courier New,Courier,monospace" %)padding (%%)definiert den Abstand des Inhaltes zum Rand der Zuordnungselemente. Die Standardeinstellung, wenn keine CSS-Konfiguration vorliegt sind 0 px.
Carina Enke 182.1 45
Carina Enke 549.5 46
Carina Enke 182.1 47 == 3. STEP: Hinzufügen der CSS-Datei zur Aufgabe ==
48
Carina Enke 550.2 49 Speichern Sie ihre Anweisungen in einer CSS-Datei (.css). Diese Datei können Sie im Tab Optionen unter Layout-Einstellung hochladen. Eine detaillierte Anleitung finden Sie im Hilfeabschnitt [[Aufgabe erstellen ~> Optionen festlegen>>path:/wiki/bin/view/ONYX/Erstellung%20von%20Testinhalten/Aufgaben/Optionen%20festlegen/]] oder [[Test erstellen ~> Test-Optionen festlegen>>path:/wiki/bin/view/ONYX/Erstellung%20von%20Testinhalten/Test%20erstellen/Test-Optionen%20festlegen/]].
Carina Enke 549.5 50
51 Bitte beachten Sie:
52
53 * Wird die CSS-Datei an einer Aufgabe hochgeladen, wirkt sie sich auf das Layout diese Aufgabe aus.
54 * Wird die CSS-Datei an einem Test hochgeladen, werden alle Auswahlaufgaben des gesamten Tests entsprechend gestaltet.
55 * Wird am Test die Option **Alle Aufgaben einer Sektion pro Seite anzeigen** aktiviert, wirkt sich eine CSS-Datei an einer Einzelaufgabe auf alle Aufgaben der gleichen Sektion aus.