Zuordnungselemente anpassen (CSS)

Zuletzt geändert von Anna Paul-Hasenfuss am 13.11.2024

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.
 

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.

Inhalt

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.
 

Order_without_css.png Order_with_css.png

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.

1. STEP: Erstellung einer neuen Einfachen Zuordnung (Drag-and-Drop)

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.

2. STEP: Anpassung der Zuordnungselemente (CSS)

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.

Als Vorlage können Sie folgende CSS-Anweisungen nutzen:

.interaction-match .dragCont {min-width: 500px;}
.interaction-match .dragCont div {padding: 10px;}

Die Einstellung min-width definiert die Größe der Zuordnungselemente. Die Standardeinstellung, wenn keine CSS-Konfiguration vorliegt sind 300 px.
Die Einstellung padding definiert den Abstand des Inhaltes zum Rand der Zuordnungselemente. Die Standardeinstellung, wenn keine CSS-Konfiguration vorliegt sind 0 px.

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

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

Bitte beachten Sie:

  • Wird die CSS-Datei an einer Aufgabe hochgeladen, wirkt sie sich auf das Layout diese Aufgabe aus.
  • Wird die CSS-Datei an einem Test hochgeladen, werden alle Auswahlaufgaben des gesamten Tests entsprechend gestaltet.
  • 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.