Wiki source code of Checkboxen gestalten (CSS)
Last modified by Anna Paul-Hasenfuss on 30.10.2024
Hide last authors
| author | version | line-number | content |
|---|---|---|---|
 |
1.1 | 1 | {{section}} |
| 2 | {{column width="60%"}} | ||
 |
19.1 | 3 | ONYX allows you to customise the question design by using CSS. With CSS, you can adjust the background colour of checkboxes and radio buttons used in selection tasks for the screen display. |
| |
1.3 | 4 | |
| |
19.1 | 5 | {{info title="Note"}} |
| 6 | Customizing assignment elements, in terms of size and spacing, only works within the browser. The individualised question display is not possible in export views (PDF export, assessment summary page). A basic understanding of HTML and CSS is required for the customisations. | ||
| |
1.3 | 7 | {{/info}} |
| |
1.1 | 8 | {{/column}} |
| 9 | |||
| 10 | {{column width="30%"}} | ||
| |
19.1 | 11 | {{panel title="Content"}} |
| |
1.1 | 12 | {{toc start="2"/}} |
| 13 | {{/panel}} | ||
| 14 | |||
| |
19.1 | 15 | {{panel title="Sample Content (Download)"}} |
| |
17.1 | 16 | * [[Auswahl_(CSS_Input-Color).zip>>attach:Auswahl_(CSS_Input-Color).zip]] |
| 17 | {{/panel}} | ||
| 18 | |||
| |
19.1 | 19 | {{panel title="Related Topics"}} |
| 20 | * [[How to Create Accessible Tests and Exams>>doc:ONYX.Barrierefreiheit.Erstellung barrierefreier Tests und Prüfungen.WebHome]] | ||
| |
1.1 | 21 | {{/panel}} |
| 22 | {{/column}} | ||
| 23 | {{/section}} | ||
| |
1.3 | 24 | |
| 25 | |||
| |
19.1 | 26 | To explain how you can change the background colour of checkboxes or radio buttons, use the airport task as an example. This task is also available as a public sample resource with the title ‘Selection_(CSS_Input-Color)’. The following images show the model task without separate CSS design on the left and with a corresponding customisation on the right. |
| |
1.3 | 27 | |
| |
8.2 | 28 | [[image:Player - Auswahlaufgabe Checkboxen default.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true"]] [[image:Player - Auswahlaufgabe Checkboxen farbig.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true"]] |
| |
1.3 | 29 | |
| 30 | |||
| |
19.1 | 31 | == STEP 1: Creation of a new choice interaction == |
| |
1.3 | 32 | |
| |
19.1 | 33 | Adjustments are possible for single choice and multiple choice tasks. To create the question, proceed as usual. You can find detailed instructions in the help section of the task type [[Choice Interaction>>doc:ONYX.Erstellung von Testinhalten.Aufgabentypen.Auswahlaufgabe.WebHome]]. |
| |
1.3 | 34 | |
| |
1.4 | 35 | |
| |
19.1 | 36 | == STEP 2: Configuration of the assignment elements (CSS) == |
| |
1.3 | 37 | |
| |
19.1 | 38 | You can configure the size and colour individually in a separate CSS file, which you can upload for each question. You can also use the following CSS statements as a template: |
| |
1.3 | 39 | |
| 40 | {{code language="css"}} | ||
| 41 | .interaction-choice {border-spacing: 5px; border-collapse: separate;} | ||
| 42 | .choice-input {background: #0099bc; padding: 0 10px;} | ||
| 43 | {{/code}} | ||
| 44 | |||
| |
19.1 | 45 | The (% style="font-family:Courier New,Courier,monospace" %)background(%%) setting defines the colour of the background. Enter at this place your preferred colour value. |
| |
1.4 | 46 | |
| 47 | |||
| |
19.1 | 48 | == STEP 3: Adding CSS files to a question or test == |
| |
1.4 | 49 | |
| |
19.1 | 50 | Save your statement in a CSS file (.css). Now you can upload this file as an external file in the Options tab under Advanced settings. Detailed instructions on this can be found here [[Set Options>>doc:ONYX.Erstellung von Testinhalten.Aufgaben.Optionen festlegen.WebHome]] or [[Test Configuration>>doc:ONYX.Erstellung von Testinhalten.Test erstellen.Test-Optionen festlegen.WebHome]]. |
| |
1.4 | 51 | |
| |
19.1 | 52 | Please note: |
| |
13.1 | 53 | |
| |
19.1 | 54 | * If the CSS file is uploaded to a question, it will affect the layout of such. |
| 55 | * If the CSS file is uploaded to a test, all selection tasks of the entire test are designed accordingly. | ||
| 56 | * 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. |