Checkboxen per CSS auffälliger gestalten

Version 1.4 von Carina Enke am 25.09.2024

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.

Information
Hinweis

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.

Die Vorgehensweise zur Änderung der Hintergrundfarbe von Checkboxen oder Radiobuttons wird am Beispiel der Auswahlaufgabe XY erläutert.

1. STEP: Erstellung einer neuen Auswahlaufgabe

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 Auswaghlaufgabe.

2. STEP: Anpassung der Zuordnungselemente (CSS)

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:

.interaction-choice {border-spacing: 5px; border-collapse: separate;}
.choice-input {background: #0099bc; padding: 0 10px;}

Die Einstellung background definiert den Farbton des Hintergrundes. Tragen Sie hier den gewünschten Farbwert ein.

3. STEP: Hinzufügen der CSS-Datei zur Aufgabe oder Test

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 oder Test erstellen > Test-Optionen festlegen

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.