Zuordnungselemente anpassen CSS
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.
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 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.
The procedure for changing the size and the spacing of assignment items is explained by the example of an assignment task on the subject of Johann Wolfgang von Goethe. The assignment items contain text quotations from the works of the poet. The default display of the assignment task restricts the assignment items to 300 pixels (px) width and provides only a small distance to the edge in order to optimise the space requirement and to optimally integrate picture media. For long text passages, however, a wider display of the boxes and an increased distance to the edge may be desired.
1. STEP: Create a new match interaction
The configuration is possible for the assignment items of a simple match interaction. To create the task, proceed as usual. Detailed instructions can be found in the help section Match interaction.
2. STEP: Configure assignment items (CSS)
The individual configuration for the size and distance of the content to the edge of the assignment items is done in a separate CSS file, which you can upload to any task.
You can use the following CSS statements as a template:
.interaction-match .dragCont div {padding: 10px;}
The setting (min-width) defines the size of the assignment items. The default setting, if no CSS configuration is present, is 300 px.
The setting (padding) defines the distance of the content to the edge of the assignment items. The default setting, if no CSS configuration is present, is 0 px.
3. STEP: Add the CSS file to the task
Save your CSS statement in a CSS file *.css. The CSS file can be uploaded to the tab Options under Layout setting. Detailed instructions can be found in the help section Create task > Layout settings.