Wiki-Quellcode von Checkboxen gestalten (CSS)
Zuletzt geändert von Anna Paul-Hasenfuss am 01.10.2024
Zeige letzte Bearbeiter
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{section}} | ||
| 2 | {{column width="60%"}} | ||
| 3 | ONYX ermöglicht die individuelle Anpassung der Aufgabengestaltung mittels CSS**.** Mit CSS können Sie die Hintergrundfarbe von Checkboxen und Radiobuttons, die in Auswahlaufgaben verwendet werden, für die Bildschirmdarstellung anpassen. | ||
| 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="Beispielinhalte (Download)"}} | ||
| 16 | * [[Auswahl_(CSS_Input-Color).zip>>attach:Auswahl_(CSS_Input-Color).zip]] | ||
| 17 | {{/panel}} | ||
| 18 | |||
| 19 | {{panel title="Weiterführende Inhalte"}} | ||
| 20 | * [[Erstellung barrierefreier Tests und Prüfungen>>doc:ONYX.Barrierefreiheit.Erstellung barrierefreier Tests und Prüfungen.WebHome]] | ||
| 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. Diese Aufgabe steht auch als öffentliche Beispielressource mit dem Titel "Auswahl_(CSS_Input-Color)" zur Verfügung. Folgende Bilder zeigen links die Beispielaufgabe ohne gesonderte CSS Gestaltung und rechts mit entsprechender Anpassung. | ||
| 27 | |||
| 28 | [[image:Player - Auswahlaufgabe Checkboxen default.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true"]] [[image:Player - Auswahlaufgabe Checkboxen farbig.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true"]] | ||
| 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. Als Vorlage können Sie folgende CSS-Anweisungen nutzen: | ||
| 39 | |||
| 40 | {{code language="css"}} | ||
| 41 | .interaction-choice {border-spacing: 5px; border-collapse: separate;} | ||
| 42 | .choice-input {background: #0099bc; padding: 0 10px;} | ||
| 43 | {{/code}} | ||
| 44 | |||
| 45 | Die Einstellung (% style="font-family:Courier New,Courier,monospace" %)background(%%) definiert den Farbton des Hintergrundes. Tragen Sie hier den gewünschten Farbwert ein. | ||
| 46 | |||
| 47 | |||
| 48 | == 3. STEP: Hinzufügen der CSS-Datei zur Aufgabe oder Test == | ||
| 49 | |||
| 50 | Speichern Sie ihre Anweisungen in einer CSS-Datei (.css). Diese 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]]. | ||
| 51 | |||
| 52 | Bitte beachten Sie: | ||
| 53 | |||
| 54 | * Wird die CSS-Datei an einer Aufgabe hochgeladen, wirkt sie sich auf das Layout diese Aufgabe aus. | ||
| 55 | * Wird die CSS-Datei an einem Test hochgeladen, werden alle Auswahlaufgaben des gesamten Tests entsprechend gestaltet. | ||
| 56 | * 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. |