Placing Gaps on a Background Graphic (CSS)

ONYX allows you to customise the question design with CSS. Using CSS, you can also place elements on the screen which makes it possible to place gaps on top of a background graphic.

4

5

6

**Note**: Placing gaps on a graphic only works within the browser. The export views (PDF export, exam overview page, etc.) do not allow for a correct question display. A basic understanding of HTML and CSS is required for the customisations.

7

8

The [[graphic match interaction>>doc:ONYX.Erstellung von Testinhalten.Aufgabentypen.Grafische Zuordnung.WebHome||shape="rect" title="Graphic match interaction"]] question type is also suitable for creating many scenarios.

* [[Application1.zip>>attach:Application1.zip||shape="rect"]]

19

* [[Application2.css>>attach:Application2.css||shape="rect"]]

The procedure for placing gaps on a background graphic is explained in the following example, which is a question about Saxony. Here, a map of the Free State of Saxony is used as a background graphic and there are three gaps placed on top of the map so that the names of the cities can be entered directly in the correct place.

26

27

[[image:attach:Beispiel Anwendung1png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true"]]

28

29

== STEP 1: Create a new question in text entry format ==

30

31

The ONYX Editor supports various text entry formats (e.g. text entry, numerical input, calculation, formula comparison). Placing the gaps on a background graphic works the same for all formats. In the following, instructions on how to place gaps are provided for a simple text entry interaction. To create a new question, click on "New question”. Then select the "text entry interaction" question type and enter a title for your question.

32

33

34

== STEP 2: Edit the question and add content ==

35

36

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

37

38

Now add the background graphic on which the gaps should be placed later.

39

40

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

41

42

43

**Note**: The gaps need to be placed directly below the graphic.

== STEP 3: Place gaps on the graphic I (HTML) ==

48

49

Placing the gaps on the background graphic is achieved by CSS positioning. The only prerequisite is the definition of CSS classes in the HTML source code. You can view and edit the HTML source code of your question using the "Source code” option of the HTML editor.

50

51

52

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

53

54

55

[[image:attach:Aufgabe - Quelltext öffnen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]

56

[[image:attach:Aufgabe - sourcecode_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]

57

58

You can identify your graphic by the following HTML code:

The gaps are marked in the HTML as follows:

You need to set a container (<div>) with the class "gap-container" around the graphic and your gaps.

[graphic]

[gaps]

</div>

If you require CSS placement on the background graphic for several questions in the test, add [TITLEofQUESTION] to the class name. Insert an identifier for “TITLEofQUESTION” that is unique throughout the test.

[graphic]

[gaps]

</div>

Make sure that <(% style="font-family:Courier New,Courier,monospace" %)div(%%)> encloses your graphic and all gaps. Do not forget the closing tag ((% style="font-family:Courier New,Courier,monospace" %)</div>(%%)) following the last gap.

89

90

[[image:Aufgbe - HTML mit Container_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]

91

92

Now add another container around each gap. For all containers ((% style="font-family:Courier New,Courier,monospace" %)<span>(%%)), the class "gap” should be assigned. Another class should be assigned to identify each gap individually. We recommend numbering your gaps in order, starting with class "gap1” for the first gap, "gap2" for the second, and so on.

Please ensure not to alter the existing HTML code when editing the gaps. An incorrect adjustment in the HTML can render the whole question unusable.

Examples

[[image:attach:Aufgabe - sourcecode2_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]

110

111

112

== STEP 4: Place gaps on the graphic II (CSS) ==

113

114

To place your gaps on the background graphic, you now need to specify the exact position. This is done in a separate CSS file that can be uploaded to each question.

115

116

You can use the following CSS statements as a template for individual questions in the test:

117

118

119

.gap-container {position: relative;}

120

.gap {position: absolute;}

121

122

.[gapID] {top: [x]px; left: [y]px;}

123

124

125

If you place gaps for several questions in the test using CSS and have thus used the class, name "gap-container [TITLEofQUESTION]" in the HTML of the question, then deploy this template:

126

127

128

**Note**: Ensure that there is a space between the question and the gap name.

129

130

131

Now insert your values for top and left in the statements related to the individual gaps (.gap1, .gap2, etc.) to determine their position. Add as many statements as there are gaps defined in your question.

132

133

Save your file as a CSS file (.css) and add it to your question on the **Options** tab in the ONYX Editor.

134

135

Use the preview in the ONYX Editor to verify whether the question is properly displayed.

136

137

138

.gap-container {position: relative;}

139

.gap {position: absolute;}

140

141

.[TITLEofQUESTION] .[gapID] {top: [x]px; left: [y]px;}

Examples

.gap-container {position: relative;}

148

.gap {position: absolute;}

149

150

.Application1 .gap1 {top: 100px; left: 255px;}

151

.Application1 .gap2 {top: 50px; left: 75px;}

152

.Application1 .gap3 {top: 180px; left: 90px;}

== STEP 5: Add the CSS file ==

157

158

Save your statement in a CSS file (.css). Now you can upload this file in the Options tab under Layout settings. Detailed instructions on this can be found here [[Set Options>>url:https://help.bps-system.de/wiki/bin/view/ONYX/Erstellung%20von%20Testinhalten/Aufgaben/Optionen%20festlegen/]] or [[Test configuration>>url:https://help.bps-system.de/wiki/bin/view/ONYX/Erstellung%20von%20Testinhalten/Test%20erstellen/Test-Optionen%20festlegen/]].

Please note:

* If the CSS file is uploaded to a question, it will affect the layout of such.

164

* If the CSS file is uploaded to a test, all selection tasks of the entire test are designed accordingly.

165

* 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.

166

167

Wiki source code of Lücken auf einer Hintergrundgrafik platzieren (CSS)

Search

ONYXGlobal

ONYXMenü

Recently Visited

author	version	line-number	content
		1	{{section}}
		2	{{column width="60%"}}
		3	ONYX allows you to customise the question design with CSS. Using CSS, you can also place elements on the screen which makes it possible to place gaps on top of a background graphic.
		4
		5	{{info}}
		6	Note: Placing gaps on a graphic only works within the browser. The export views (PDF export, exam overview page, etc.) do not allow for a correct question display. A basic understanding of HTML and CSS is required for the customisations.
		7
		8	The [[graphic match interaction>>doc:ONYX.Erstellung von Testinhalten.Aufgabentypen.Grafische Zuordnung.WebHome\|\|shape="rect" title="Graphic match interaction"]] question type is also suitable for creating many scenarios.
		9	{{/info}}
		10	{{/column}}
		11
		12	{{column width="30%"}}
		13	{{panel title="Content"}}
		14	{{toc start="2"/}}
		15	{{/panel}}
		16
		17	{{panel title="Example resources"}}
		18	* [[Application1.zip>>attach:Application1.zip\|\|shape="rect"]]
		19	* [[Application2.css>>attach:Application2.css\|\|shape="rect"]]
		20	{{/panel}}
		21	{{/column}}
		22	{{/section}}
		23
		24
		25	The procedure for placing gaps on a background graphic is explained in the following example, which is a question about Saxony. Here, a map of the Free State of Saxony is used as a background graphic and there are three gaps placed on top of the map so that the names of the cities can be entered directly in the correct place.
		26
		27	[[image:attach:Beispiel Anwendung1png\|\|data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true"]]
		28
		29	== STEP 1: Create a new question in text entry format ==
		30
		31	The ONYX Editor supports various text entry formats (e.g. text entry, numerical input, calculation, formula comparison). Placing the gaps on a background graphic works the same for all formats. In the following, instructions on how to place gaps are provided for a simple text entry interaction. To create a new question, click on "New question”. Then select the "text entry interaction" question type and enter a title for your question.
		32
		33
		34	== STEP 2: Edit the question and add content ==
		35
		36	All question content can be added via the HTML input field in the Text entry interaction section. Start by entering your question text, e.g. "Name the three independent cities of the state of Saxony".
		37
		38	Now add the background graphic on which the gaps should be placed later.
		39
		40	Then add any number of gaps directly below the graphic. Define the correct solution and the maximum score for each gap. You can also configure additional settings.
		41
		42	{{info}}
		43	Note: The gaps need to be placed directly below the graphic.
		44	{{/info}}
		45
		46
		47	== STEP 3: Place gaps on the graphic I (HTML) ==
		48
		49	Placing the gaps on the background graphic is achieved by CSS positioning. The only prerequisite is the definition of CSS classes in the HTML source code. You can view and edit the HTML source code of your question using the "Source code” option of the HTML editor.
		50
		51	{{info}}
		52	Note: To make it easier for you to edit the HTML code, you should insert line breaks so that each element (<p>, <span>, <img />, etc.) is on a separate line.
		53	{{/info}}
		54
		55	[[image:attach:Aufgabe - Quelltext öffnen_de.png\|\|data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
		56	[[image:attach:Aufgabe - sourcecode_de.png\|\|data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
		57
		58	You can identify your graphic by the following HTML code:
		59
		60	{{code language="xml"}}
		61	<img data-cke-saved-src="media?r=mMjc2MzQ1MzI src="media?r=mMjc2MzQ1MzI ... />
		62	{{/code}}
		63
		64	The gaps are marked in the HTML as follows:
		65
		66	{{code language="xml"}}
		67	<img id="RESPONSE_1" class="mce_onyx_gap" data-cke-saved-src="img/icons/gap-placeholder.png" src="img/icons/gap-placeholder.png" alt="" />
		68	{{/code}}
		69
		70	You need to set a container (<div>) with the class "gap-container" around the graphic and your gaps.
		71
		72	{{code language="xml"}}
		73	<div class="gap-container">
		74	[graphic]
		75	[gaps]
		76	</div>
		77	{{/code}}
		78
		79	If you require CSS placement on the background graphic for several questions in the test, add [TITLEofQUESTION] to the class name. Insert an identifier for “TITLEofQUESTION” that is unique throughout the test.
		80
		81	{{code language="xml"}}
		82	<div class="gap-container [TITLEofQUESTION]">
		83	[graphic]
		84	[gaps]
		85	</div>
		86	{{/code}}
		87
		88	Make sure that <(% style="font-family:Courier New,Courier,monospace" %)div(%%)> encloses your graphic and all gaps. Do not forget the closing tag ((% style="font-family:Courier New,Courier,monospace" %)</div>(%%)) following the last gap.
		89
		90	[[image:Aufgbe - HTML mit Container_de.png\|\|data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
		91
		92	Now add another container around each gap. For all containers ((% style="font-family:Courier New,Courier,monospace" %)<span>(%%)), the class "gap” should be assigned. Another class should be assigned to identify each gap individually. We recommend numbering your gaps in order, starting with class "gap1” for the first gap, "gap2" for the second, and so on.
		93
		94	{{code language="xml"}}
		95	<span class="gap [gapID]"> </span>
		96	{{/code}}
		97
		98	{{info title="Important"}}
		99	Please ensure not to alter the existing HTML code when editing the gaps. An incorrect adjustment in the HTML can render the whole question unusable.
		100	{{/info}}
		101
		102	Examples
		103
		104	{{code language="xml"}}
		105	<span class="gap gap1"> </span>
		106	<span class="gap gap2"> </span>
		107	{{/code}}
		108
		109	[[image:attach:Aufgabe - sourcecode2_de.png\|\|data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
		110
		111
		112	== STEP 4: Place gaps on the graphic II (CSS) ==
		113
		114	To place your gaps on the background graphic, you now need to specify the exact position. This is done in a separate CSS file that can be uploaded to each question.
		115
		116	You can use the following CSS statements as a template for individual questions in the test:
		117
		118	{{code language="css"}}
		119	.gap-container {position: relative;}
		120	.gap {position: absolute;}
		121
		122	.[gapID] {top: [x]px; left: [y]px;}
		123	{{/code}}
		124
		125	If you place gaps for several questions in the test using CSS and have thus used the class, name "gap-container [TITLEofQUESTION]" in the HTML of the question, then deploy this template:
		126
		127	{{info}}
		128	Note: Ensure that there is a space between the question and the gap name.
		129	{{/info}}
		130
		131	Now insert your values for top and left in the statements related to the individual gaps (.gap1, .gap2, etc.) to determine their position. Add as many statements as there are gaps defined in your question.
		132
		133	Save your file as a CSS file (.css) and add it to your question on the Options tab in the ONYX Editor.
		134
		135	Use the preview in the ONYX Editor to verify whether the question is properly displayed.
		136
		137	{{code language="css"}}
		138	.gap-container {position: relative;}
		139	.gap {position: absolute;}
		140
		141	.[TITLEofQUESTION] .[gapID] {top: [x]px; left: [y]px;}
		142	{{/code}}
		143
		144	Examples
		145
		146	{{code language="css"}}
		147	.gap-container {position: relative;}
		148	.gap {position: absolute;}
		149
		150	.Application1 .gap1 {top: 100px; left: 255px;}
		151	.Application1 .gap2 {top: 50px; left: 75px;}
		152	.Application1 .gap3 {top: 180px; left: 90px;}
		153	{{/code}}
		154
		155
		156	== STEP 5: Add the CSS file ==
		157
		158	Save your statement in a CSS file (.css). Now you can upload this file in the Options tab under Layout settings. Detailed instructions on this can be found here [[Set Options>>url:https://help.bps-system.de/wiki/bin/view/ONYX/Erstellung%20von%20Testinhalten/Aufgaben/Optionen%20festlegen/]] or [[Test configuration>>url:https://help.bps-system.de/wiki/bin/view/ONYX/Erstellung%20von%20Testinhalten/Test%20erstellen/Test-Optionen%20festlegen/]].
		159
		160
		161	Please note:
		162
		163	* If the CSS file is uploaded to a question, it will affect the layout of such.
		164	* If the CSS file is uploaded to a test, all selection tasks of the entire test are designed accordingly.
		165	* 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.
		166
		167