Zuordnungselemente anpassen CSS

Zuletzt geändert von Carina Enke am 13.01.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:

CSS Einstellung
.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 CSS-Anweisungen in einer Datei *.css. Die CSS-Datei können Sie im Tab Optionen unter Layout-Einstellung hochladen. Eine detaillierte Anleitung finden Sie im Hilfeabschnitt Aufgabe erstellen > Layouteinstellungen.