Zum Inhalt springen
Version 6.1 von Carina Enke am 25.09.2024
Zeige letzte Bearbeiter
1 {{section}}
2 {{column width="60%"}}
3 ONYX bietet die Möglichkeit mit CSS die Aufgabengestaltung anzupassen. Mittels CSS kann die Hintergrundfarbe von Checkboxen und Radiobuttons, die bei Auswahlaufgaben genutzt werden, für die Anzeige am Bildschirm angepasst werden.
4
5 {{info title="Hinweis"}}
6 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.
7 {{/info}}
8 {{/column}}
9
10 {{column width="30%"}}
11 {{panel title="Inhalt"}}
12 {{toc start="2"/}}
13 {{/panel}}
14
15 {{panel title="Verwandte Themen"}}
16 text
17 {{/panel}}
18
19 {{panel title="Weiterführende Inhalte"}}
20 text
21 {{/panel}}
22 {{/column}}
23 {{/section}}
24
25
26 Die Vorgehensweise zur Änderung der Hintergrundfarbe von Checkboxen oder Radiobuttons wird am Beispiel der Aufgabe Flughafen erläutert.
27
28 [[image:Player - Auswahlaufgabe Checkboxen default.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="383" width="390"]] [[image:Player - Auswahlaufgabe Checkboxen farbig.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="382" width="380"]]
29
30
31 == 1. STEP: Erstellung einer neuen Auswahlaufgabe ==
32
33 Die Anpassungen sind für Einfache Auswahl- (Single Choice) und Mehrfache Auswahlaufgaben (Multiple Choice) möglich. Für die Erstellung der Aufgabe können Sie wie gewohnt vorgehen. Eine detaillierte Anleitung finden Sie im Hilfeabschnitt zum Aufgabentyp [[Auswahlaufgabe>>doc:ONYX.Erstellung von Testinhalten.Aufgabentypen.Auswahlaufgabe.WebHome]].
34
35
36 == 2. STEP: Anpassung der Zuordnungselemente (CSS) ==
37
38 Die individuelle Konfiguration zur Größe und Farbe erfolgt in einer separaten CSS-Datei, welche Sie zu jeder Aufgabe hochladen können.
39
40 Als Vorlage können Sie folgende CSS-Anweisungen nutzen:
41
42 {{code language="css"}}
43 .interaction-choice {border-spacing: 5px; border-collapse: separate;}
44 .choice-input {background: #0099bc; padding: 0 10px;}
45 {{/code}}
46
47 Die Einstellung (% style="font-family:Courier New,Courier,monospace" %)background(%%) definiert den Farbton des Hintergrundes. Tragen Sie hier den gewünschten Farbwert ein.
48
49
50 == 3. STEP: Hinzufügen der CSS-Datei zur Aufgabe oder Test ==
51
52 Speichern Sie ihre CSS-Anweisungen in einer Datei *.css. Die CSS-Datei können Sie im Tab Optionen unter Erweiterte Einstellungen als Externe Datei hochladen. Eine detaillierte Anleitung finden Sie im Hilfeabschnitt [[Aufgabe erstellen ~> Optionen festlegen>>doc:ONYX.Erstellung von Testinhalten.Aufgaben.Optionen festlegen.WebHome]] oder [[Test erstellen ~> Test-Optionen festlegen>>doc:ONYX.Erstellung von Testinhalten.Test erstellen.Test-Optionen festlegen.WebHome]]
53
54 Wird die Datei an einer Aufgabe hochgeladen wirkt sie sich auf das Layout diese Aufgabe aus. Wird sie an einem Text hochgeladen, werden alle Auswahlaufgaben des gesamten Tests entsprechend dargestellt. 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.