Wiki-Quellcode von Lücken auf einer Hintergrundgrafik platzieren (CSS)

Zuletzt geändert von Carina Enke am 26.09.2024

version	line-number	content
198.2	1	{{section}}
	2	{{column width="60%"}}
195.1	3	ONYX bietet die Möglichkeit, mit CSS die Aufgabengestaltung anzupassen. Mittels CSS können Objekte auch am Bildschirm platziert werden. Auf diese Weise wird es möglich, Lücken auf einer Hintergrundgrafik zu platzieren.
189.1	4
65.1	5	{{info title="Hinweis"}}
	6	Die Platzierung von Lücken auf einer Grafik funktioniert nur im Browser. Eine korrekte Anzeige der Aufgabe ist in den Exportansichten (PDF-Export, Prüfungseinsichtsseite) nicht möglich. Voraussetzung für die individuelle Platzierung von Lücken auf einer Grafik sind grundlegende Kenntnisse in HTML und CSS.
195.1	7
195.7	8	Für die Umsetzung vieler Szenarien eignet sich auch der Aufgabentyp [[Grafische Zuordnung>>doc:ONYX.Erstellung von Testinhalten.Aufgabentypen.Grafische Zuordnung.WebHome]].
65.1	9	{{/info}}
198.2	10	{{/column}}
65.1	11
198.2	12	{{column width="30%"}}
	13	{{panel title="Inhalt"}}
	14	{{toc start="2"/}}
65.1	15	{{/panel}}
195.1	16
198.2	17	{{panel title="Beispielinhalte (Download)"}}
195.1	18	* [[attach:Anwendung1.zip]]
	19	* [[attach:Anwendung1.css]]
	20	{{/panel}}
200.1	21
198.2	22	{{/column}}
	23	{{/section}}
	24
	25
195.1	26	Die Vorgehensweise zur Platzierung von Lücken auf einer Hintergrundgrafik wird am Beispiel einer Aufgabe zum Thema Sachsen erläutert. Als Hintergrundgrafik wird eine Karte des Freistaates Sachsen genutzt. Drei Lücken werden auf der Karte so platziert, dass die Namen der Städte direkt an der richtigen Stelle auf der Karte eingegeben werden können.
65.1	27
198.6	28	[[image:attach:Beispiel Anwendung1png\|\|data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true"]]
65.1	29
195.1	30
65.1	31	== 1. STEP: Erstellung einer neuen Aufgabe im Lückentext-Format ==
	32
195.1	33	Der ONYX Editor unterstützt verschiedene Lückentext-Formate (u. a. Lückentext, Numerische Eingabe, Berechnung, Formelvergleich). Die Platzierung der Lücken auf einer Hintergrundgrafik funktioniert für alle Formate gleich. Im Folgenden wird die Platzierung für einen einfachen Lückentext erklärt. Um eine neue Aufgabe zu erstellen, klicken Sie auf den Button „Neue Aufgabe“. Wählen Sie den Aufgabentyp „Lückentextaufgabe“ und vergeben Sie einen Titel für Ihre Aufgabe.
65.1	34
198.6	35
65.1	36	== 2. STEP: Aufgabenbearbeitung und Hinzufügen der Inhalte ==
	37
195.1	38	Der gesamte Aufgabeninhalt wird im Abschnitt Lückentext im HTML-Eingabefeld hinzugefügt. Tragen Sie zunächst Ihre Fragestellung ein, z. B. „Name the three independent cities of the state of Saxony“.
65.1	39
	40	Fügen Sie nun die Hintergrundgrafik hinzu, auf der die Lücken später platziert werden sollen.
	41
	42	Anschließend fügen Sie direkt unterhalb der Grafik beliebig viele Lücken ein. Definieren Sie für jede Lücke die korrekte Lösung und die maximale Punktzahl. Zusätzlich können Sie weitere Einstellungen vornehmen.
	43
198.6	44	{{info}}
	45	Hinweis: Die Lücken sind direkt unter der Grafik zu platzieren.
65.1	46	{{/info}}
	47
198.7	48
73.1	49	== 3. STEP: Platzierung der Lücken auf der Grafik I (HTML) ==
65.1	50
	51	Die Platzierung der Lücken auf der Hintergrundgrafik wird mittels einer CSS-Positionierung der Lücken erreicht. Voraussetzung ist die Definition von CSS-Klassen im HTML-Quellcode. Den HTML-Quellcode Ihrer Aufgabe können Sie über die Option „Quellcode“ des HTML-Editors einsehen und bearbeiten.
	52
198.8	53	Hinweis: Damit Sie das HTML besser bearbeiten können, sollten Sie Zeilenumbrüche einfügen, sodass jedes Element ((% style="font-family:Courier New,Courier,monospace" %)<p>, <span>, <img />(%%) usw.) auf einer eigenen Zeile steht.
65.1	54
198.9	55	[[image:attach:Aufgabe - Quelltext öffnen_de.png\|\|data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]] [[image:attach:Aufgabe - sourcecode_de.png\|\|data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="185" width="220"]]
65.1	56
198.9	57
65.1	58	Ihre Grafik erkennen Sie an folgendem HTML-Code:
	59
198.2	60	{{code language="xml"}}
195.7	61	<img data-cke-saved-src="media?r=mMjc2MzQ1MzI src="media?r=mMjc2MzQ1MzI ... />
65.1	62	{{/code}}
	63
198.2	64
65.1	65	Die Lücken werden im HTML wie folgt ausgezeichnet:
	66
198.6	67	{{code language="xml"}}
195.7	68	<img id="RESPONSE_1" class="mce_onyx_gap" data-cke-saved-src="img/icons/gap-placeholder.png" src="img/icons/gap-placeholder.png" alt="" />
65.1	69	{{/code}}
	70
195.1	71	Um die Grafik und Ihre Lücken müssen Sie einen Container (<div>) mit der Klasse „gap-container“ setzen.
65.1	72
198.2	73	{{code language="xml"}}
195.1	74	<div class="gap-container">
	75	[Grafik]
	76	[Lücken]
	77	</div>
	78	{{/code}}
65.1	79
195.1	80	Benötigen Sie die CSS-Platzierung auf der Hintergrundgrafik für mehrere Aufgaben im Test, ergänzen Sie bei der Klassenbezeichnung die Angabe [NAMEderAUFGABE]. Setzen Sie für "NAMEderAUFGABE" einen testweit eindeutigen Bezeichner ein.
	81
198.2	82	{{code language="xml"}}
195.1	83	<div class="gap-container [NAMEderAUFGABE]">
	84	[Grafik]
	85	[Lücken]
	86	</div>
65.1	87	{{/code}}
	88
198.9	89	Achten Sie bitte darauf, dass das <div> Ihre Grafik und alle Lücken umschließt. Vergessen Sie nach der letzten Lücke das schließende Tag ((% style="font-family:Courier New,Courier,monospace" %)</div>(%%)) nicht.
195.1	90
195.7	91	[[image:attach:Aufgbe - HTML mit Container_de.png\|\|data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
195.1	92
198.9	93	Nun fügen Sie um jede einzelne Lücke einen weiteren Container hinzu. Alle Container ((% style="font-family:Courier New,Courier,monospace" %)<span>(%%)) bekommen die Klasse „gap“ zugewiesen. Zusätzlich vergeben Sie bitte eine weitere Klasse, die jede einzelne Lücke individuell auszeichnet. Am besten nummerieren Sie Ihre Lücken entsprechend der Reihenfolge und vergeben für die erste Lücke die Klasse „gap1“, für die zweite die Klasse „gap2“ usw.
195.1	94
198.2	95	{{code language="xml"}}
195.7	96	<span class="gap [LückenID]"> </span>
	97	{{/code}}
195.1	98
198.4	99	{{info}}
	100	Wichtig: Achten Sie beim Bearbeiten bitte drauf, den bestehenden HTML-Code nicht zu verändern. Eine falsche Anpassung im HTML kann die gesamte Aufgabe unbrauchbar machen.
79.1	101	{{/info}}
65.1	102
195.1	103	{{code language="xml" title="Beispiele"}}
	104	<span class="gap gap1"> </span>
	105	<span class="gap gap2"> </span>
	106	{{/code}}
	107
198.2	108
195.7	109	[[image:attach:Aufgabe - sourcecode2_de.png\|\|data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
195.1	110
	111
65.1	112	== 4. STEP: Platzierung der Lücken auf der Grafik II (CSS) ==
	113
198.13	114	Um Ihre Lücken auf der Hintergrundgrafik zu platzieren, ist nun noch die genaue Positionsangabe erforderlich. Diese erfolgt in einer separaten CSS-Datei, welche Sie zu jeder Aufgabe hochladen können.
65.1	115
195.1	116	Als Vorlage können Sie folgende CSS-Anweisungen für eine einzelne Aufgabe im Test nutzen:
65.1	117
198.2	118	{{code language="css"}}
65.1	119	.gap-container {position: relative;}
	120	.gap {position: absolute;}
	121
198.9	122	.[LueckenID] {top: [x]px; left: [y]px;}
65.1	123	{{/code}}
	124
195.1	125	Wenn Sie zu mehreren Aufgaben im Test eine Platzierung per CSS vornehmen und somit im HTML der Aufgabe die Klassenbezeichnung "gap-container [NAMEderAUFGABE]" genutzt haben, dann verwenden Sie diese Vorlage:
	126
198.4	127	{{info}}
	128	Hinweis: Achten Sie auf das Leerzeichen zwischen Aufgaben- und Lückenbezeichnung.
195.1	129	{{/info}}
	130
65.1	131	Bei den Anweisungen für die einzelnen Lücken (.gap1, .gap2 usw.) setzen Sie nun Ihre Werte bei top und left für die Positionierung ein. Fügen Sie so viele Anweisungen hinzu, wie Sie Lücken in Ihrer Aufgabe definiert haben.
	132
	133	Speichern Sie Ihre Datei als CSS-Datei (.css) ab und fügen Sie diese im ONYX Editor Ihrer Aufgabe im Tab Optionen hinzu.
	134
195.1	135	Nutzen Sie die Vorschau im ONYX Editor, um die korrekte Darstellung Ihrer Aufgabe zu überprüfen.
	136
198.2	137	{{code language="css"}}
195.1	138	.gap-container {position: relative;}
	139	.gap {position: absolute;}
	140
198.9	141	.[NAMEderAUFGABE] .[LueckenID] {top: [x]px; left: [y]px;}
195.1	142	{{/code}}
	143
198.12	144	Beispiel
198.10	145
198.9	146	{{code language="css"}}
	147	.gap-container {position: relative;}
195.1	148	.gap {position: absolute;}
	149	.Anwendung1 .gap1 {top: 100px; left: 255px;}
	150	.Anwendung1 .gap2 {top: 50px; left: 75px;}
198.9	151	.Anwendung1 .gap3 {top: 180px; left: 90px;}
	152	{{/code}}
198.13	153
199.1	154
	155
198.13	156	== 5. STEP: Hinzufügen der CSS-Datei ==
	157
199.2	158	Speichern Sie ihre Anweisungen in einer CSS-Datei (.css). Diese Datei können Sie im Tab Optionen unter Layout-Einstellung hochladen. Eine detaillierte Anleitung finden Sie im Hilfeabschnitt [[Aufgabe erstellen ~> Optionen festlegen>>path:/wiki/bin/view/ONYX/Erstellung%20von%20Testinhalten/Aufgaben/Optionen%20festlegen/]] oder [[Test erstellen ~> Test-Optionen festlegen>>path:/wiki/bin/view/ONYX/Erstellung%20von%20Testinhalten/Test%20erstellen/Test-Optionen%20festlegen/]].
198.13	159
	160	Bitte beachten Sie:
	161
	162	* Wird die CSS-Datei an einer Aufgabe hochgeladen, wirkt sie sich auf das Layout diese Aufgabe aus.
	163	* Wird die CSS-Datei an einem Test hochgeladen, werden alle Auswahlaufgaben des gesamten Tests entsprechend gestaltet.
	164	* Wird am Test die Option Alle Aufgaben einer Sektion pro Seite anzeigen aktiviert, wirkt sich eine CSS-Datei an einer Einzelaufgabe auf alle Aufgaben der gleichen Sektion aus.
	165

Wiki-Quellcode von Lücken auf einer Hintergrundgrafik platzieren (CSS)

Suchen

ONYXGlobal

ONYXMenü

Zuletzt besucht