Page tree
Skip to end of metadata
Go to start of metadata

ONYX allows you to customise an assignment item's design with CSS. Through CSS, elements can be placed on the screen. Using this method, you can add gaps throughout your background image.


Placing gaps within an image only works in the browser. The export views (PDF export, performance results page, etc.) do not allow for a correct display of the task. The prerequisite for the individual placement of gaps within an image is basic knowledge in HTML and CSS.


The procedure for placing gaps within a background image is explained by the example of a task on Saxony. A map of the Free State of Saxony is used as background image. Three gaps are placed within the map so that the names of the cities can be directly entered in the map.

1.  STEP: Create new task in cloze format

The ONYX Editor supports various cloze formats (e.g. text entry, numerical input, calculation, formula comparison). The placement of the gaps within a background image works the same for all formats. In the following, the placing for a simple gap text is explained. To create a new task, click on the button "New task". Select the task type "text entry interaction" and enter a title for your task.

2.  STEP: Edit task and add content

The entire task content can be added in the section text entry interaction by means of the HTML input field. Start by entering your question, e.g. "Name the three independent cities of the state of Saxony."

Now add the background image within which the gaps are to be placed.

Then add any number of gaps directly below the image. Define the correct solution and the maximum score for each gap. You can also make additional settings.


The gaps need to be placed directly below the image.

3.  STEP: Place the gaps within image I (HTML)

The placement of the gaps within the background image is determined by the positioning set with CSS. The prerequisite is the definition of CSS classes in the HTML source code. You can view and edit the HTML source code of your task using the option "Source code" of the HTML editor.

Note: To make it easier to edit your HTML code, you should insert line breaks so that each element (<p>, <span>, <img />, etc.) is on a separate line.

You then need to wrap a container (<div>) of the class "gap-container" around the image and your gaps.

 <div class="gap-container"> 

You can recognise your image by the following HTML code:

 <img src="media?r=m1698365452..." alt="saxony map" />

In the HTML, the gaps are marked as follows:

 <img id="RESPONSE_1397716704302" class="mce_onyx_gap" src="img/icons/gap- placeholder.png" alt="" />

Please make sure the <div> wraps your image and all gaps. Do not forget the closing tag (</div>) after the last gap.

Now add another container around each individual gap. All containers (<span>) are assigned the class "gap". Please assign a further class which marks each gap individually. We recommend you number your gaps accordingly and assign the class "gap1" to the first gap, the class "gap2" to the second gap," etc.

<span class="gap gap1"> </span>
<span class="gap gap2"> </span>


When editing, please make sure you do not alter the existing HTML code. An incorrect adjustment in the HTML can render the entire task unusable.

4.  STEP: Place the gaps within image II (CSS)

To place your gaps successfully within the background image, you now need to position them. Positioning is done in a separate CSS file that you can upload to each task.

You can use the following CSS statements as a template:

.gap-container {position: relative;}
.gap {position: absolute;} 

.gap1 {top: 155px; left: 255px;} 
.gap2 {top: 210px; left: 150px;} 
.gap3 {top: 105px; left: 75px;}

Set your values for top and left in the instructions for the individual gaps (.gap1, .gap2, etc.). Add as many instructions as there are defined gaps in your task.

Save your file as a CSS file (.css) and add it to the Options tab of your task using the ONYX Editor.

Use the preview in the ONYX Editor to verify whether the presentation is correct.