Skip to Content
Last modified by Anna Paul-Hasenfuss on 13.11.2024
Hide last authors
Carina Enke 549.2 1 {{section}}
2 {{column width="60%"}}
Anna Paul-Hasenfuss 552.1 3 ONYX allows you to customise the design of assignment elements via CSS. With CSS, objects such as the elements of a match interaction task (drag-and-drop) can be customised with regard to their size and spacing for the display on a screen.
Carina Enke 182.1 4
Anna Paul-Hasenfuss 552.1 5 {{info}}
6 **Note**: The individual layout of the assignment element, 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.). It is necessary to have a basic understanding in HTML and CSS to use this function.
Carina Enke 182.1 7 {{/info}}
Carina Enke 549.2 8 {{/column}}
Carina Enke 182.1 9
Carina Enke 549.2 10 {{column width="30%"}}
Anna Paul-Hasenfuss 552.1 11 {{panel title="Content"}}
Carina Enke 549.2 12 {{toc start="2"/}}
Carina Enke 182.1 13 {{/panel}}
Carina Enke 549.2 14 {{/column}}
15 {{/section}}
16
Anna Paul-Hasenfuss 552.1 17 The procedure for changing the size and the spacing of assignment elements is explained by the example of an assignment task on the subject of Johann Wolfgang von Goethe. The assignment element contains text quotations from the works of the poet. The default display of the assignment task restricts the assignment element 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.
Carina Enke 182.1 18
Anna Paul-Hasenfuss 552.1 19 [[image:attach:Order_without_css.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="208" width="428"]][[image:attach:Order_with_css.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 182.1 20
21 {{info}}
Anna Paul-Hasenfuss 552.1 22 The increased width of the assignment element, for example, complicates the navigation during tests taken on devices with small screens, e.g. smartphones.
Carina Enke 182.1 23 {{/info}}
24
Anna Paul-Hasenfuss 552.1 25 == STEP 1: Creating a new match interaction ==
Carina Enke 182.1 26
Anna Paul-Hasenfuss 552.1 27 The configuration is possible for the assignment element of a simple match interaction (drag-and-drop). To create the task, proceed as usual. Detailed instructions can be found in the help section [[Match interaction>>doc:ONYX.Erstellung von Testinhalten.Aufgabentypen.Einfache Zuordnungsaufgabe.WebHome||shape="rect"]].
Carina Enke 182.1 28
Carina Enke 549.4 29
Anna Paul-Hasenfuss 552.1 30 == STEP 2: Configuration of the assignment elements (CSS) ==
Carina Enke 182.1 31
Anna Paul-Hasenfuss 552.1 32 The individual configuration for the size and distance of the content to the edge of the assignment elements is done in a separate CSS file, which you can upload to any task.
Carina Enke 182.1 33
Anna Paul-Hasenfuss 552.1 34 You can use the following CSS statements as a template:
Carina Enke 182.1 35
Carina Enke 549.4 36 {{code language="css"}}
Carina Enke 182.1 37 .interaction-match .dragCont {min-width: 500px;}
38 .interaction-match .dragCont div {padding: 10px;}
39 {{/code}}
40
Anna Paul-Hasenfuss 552.1 41 The setting (% style="font-family:Courier New,Courier,monospace" %)min-width(%%) defines the size of the assignment elements. The default setting, if no CSS configuration is present, is 300 px.
Carina Enke 182.1 42
Anna Paul-Hasenfuss 552.1 43 The setting (% style="font-family:Courier New,Courier,monospace" %)padding (%%)defines the distance of the content to the edge of the assignment elements. The default setting, if no CSS configuration is present, is 0 px.
Carina Enke 549.5 44
Carina Enke 182.1 45
Anna Paul-Hasenfuss 552.1 46 == STEP 3: Adding the CSS file to the task ==
Carina Enke 549.5 47
Anna Paul-Hasenfuss 552.1 48 Save your CSS statement in a CSS file *.css. Now you can upload this file in the **Options** tab under **Layout setting**. Detailed instructions can be found in the help section [[Create task ~> Layout settings>>doc:ONYX.Erstellung von Testinhalten.Aufgaben.Optionen festlegen.WebHome||shape="rect"]] or [[Test configuration>>doc:LMS.Benutzerhandbuch OPAL.Lehren.Kursbausteine.Test.KB Test Konfiguration.Test-Konfiguration.WebHome]].
Carina Enke 549.5 49
Anna Paul-Hasenfuss 552.1 50
51 Please note:
52
53 * If the CSS file is uploaded to a question, it will affect the layout of such.
54 * If the CSS file is uploaded to a test, all selection tasks of the entire test are designed accordingly.
55 * If the **Show all questions of a section per page** option is activated on the test, a CSS file on an individual question affects all questions in the same section.
56
57