Zum Inhalt springen
Version 547.2 von Carina Enke am 10.01.2024
Zeige letzte Bearbeiter
1 {{layout}}
2 {{layout-section ac:type="two_right_sidebar"}}
3 {{layout-cell}}
4
5 {{/layout-cell}}
6
7 {{layout-cell}}
8
9 {{/layout-cell}}
10 {{/layout-section}}
11
12 {{layout-section ac:type="two_right_sidebar"}}
13 {{layout-cell}}
14
15
16 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.
17
18
19 {{info title="Hinweis"}}
20 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.
21 {{/info}}
22 {{/layout-cell}}
23
24 {{layout-cell}}
25 {{panel borderColor="#ddd" bgColor="#f0f0f0" title="Inhalt"}}
26 {{toc style="square"/}}
27 {{/panel}}
28 {{/layout-cell}}
29 {{/layout-section}}
30
31 {{layout-section ac:type="single"}}
32 {{layout-cell}}
33 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.
34
35
36 [[image:attach:Order_without_css.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
37
38 [[image:attach:Order_with_css.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
39
40 {{info}}
41 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.
42 {{/info}}
43
44 == 1. STEP: Erstellung einer neuen Einfachen Zuordnung (Drag-and-Drop) ==
45
46 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>>doc:ONYX.Erstellung von Testinhalten.Aufgabentypen.Einfache Zuordnungsaufgabe.WebHome]].
47
48 == 2. STEP: Anpassung der Zuordnungselemente (CSS) ==
49
50 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.
51
52 Als Vorlage können Sie folgende CSS-Anweisungen nutzen:
53
54 {{code language="xml" title="CSS Einstellung"}}
55 .interaction-match .dragCont {min-width: 500px;}
56 .interaction-match .dragCont div {padding: 10px;}
57 {{/code}}
58
59 Die Einstellung (min-width) definiert die Größe der Zuordnungselemente. Die Standardeinstellung, wenn keine CSS-Konfiguration vorliegt sind 300 px.
60 Die Einstellung (padding) definiert den Abstand des Inhaltes zum Rand der Zuordnungselemente. Die Standardeinstellung, wenn keine CSS-Konfiguration vorliegt sind 0 px.
61
62 == 3. STEP: Hinzufügen der CSS-Datei zur Aufgabe ==
63
64 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>>doc:ONYX.Erstellung von Testinhalten.Aufgaben.WebHome]].
65
66
67 {{/layout-cell}}
68 {{/layout-section}}
69 {{/layout}}
70
71 {{layout}}
72 {{layout-section ac:type="two_right_sidebar"}}
73 {{layout-cell}}
74 ONYX allows you to customise an assignment item's design with CSS. By using CSS, users can individually alter assignment item attributes, such as size and spacing, in match interactions.
75
76 {{info title="Note"}}
77 The individual layout of the assignment items, in terms of size and spacing, works only within the browser. The configured layout is not available for export (PDF export, performance results page, etc.). The prerequisite for the use of this function is basic knowledge in HTML and CSS.
78 {{/info}}
79 {{/layout-cell}}
80
81 {{layout-cell}}
82 {{panel title="Content"}}
83 {{toc style="square"/}}
84 {{/panel}}
85 {{/layout-cell}}
86 {{/layout-section}}
87
88 {{layout-section ac:type="single"}}
89 {{layout-cell}}
90 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.
91
92 [[image:attach:Order_without_css.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
93
94 [[image:attach:Order_with_css.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
95
96 {{info}}
97 The increased width of the assignment items, for example, complicates the navigation during tests taken on devices with small screens, e.g. smartphones.
98 {{/info}}
99
100 == 1.  STEP: Create a new match interaction ==
101
102 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>>url:https://www.bps-system.de/help/display/ONYXintern/.Einfache+Zuordnungsaufgabe+v1.11||shape="rect"]].
103
104 == 2.  STEP: Configure assignment items (CSS) ==
105
106 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.
107
108 You can use the following CSS statements as a template:
109
110 {{code language="xml" title="CSS setting"}}
111 .interaction-match .dragCont {min-width: 500px;}
112 .interaction-match .dragCont div {padding: 10px;}
113 {{/code}}
114
115 The setting (min-width) defines the size of the assignment items. The default setting, if no CSS configuration is present, is 300 px.
116
117 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.
118
119 == 3.  STEP: Add the CSS file to the task ==
120
121 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>>doc:ONYX.Erstellung von Testinhalten.Aufgaben.WebHome||shape="rect"]].
122 {{/layout-cell}}
123 {{/layout-section}}
124 {{/layout}}