Erstellung von Selbsttests

Grundgerüst

<div class="question" qtype="short_text" id="short_1">
<h4>
  <b>Frage 1:</b><br>
  Freitext Frage
</h4> <!-- Fragetext -->

<!--
Block indem Antworten stehen
-->
<div class="answers">
    <label>Lösung: <input type="text" name="q"/></label>
</div>

<!-- Feedback für eine richtige Antwort -->
<div class="feedback correct">
    Richtig
</div>

<!-- Feedback für eine falsche Antwort -->
<div class="feedback incorrect">
    Falsch
</div>

<!-- Verschlüsselt ist hier das Wort "answer" -->
<a class="ans">693da517cf61c81742ef090221bfd5d6</a>
</div>

Dieses Grundgerüst beinhaltet ersteinmal alles was benötigt wird. Man kann überall Bilder einfügen. Empfohlen wird es, ein Bild zur Frage zwischen der Überschrift (h4) und dem Antwortenblock (div.answers) einzufügen.

Es ergibt sich:

Fragetypen

In der ersten Zeile tauchen bereits Variable Werte auf, die angepasst werden müssen.

<div class="question" qtype="short_text" id="short_1">

In diesem Fall die Felder qtype und id. Die id ist nur für das Referenzieren einer Frage, dazu gibt es den extra Abschnitt Referenzieren.

Das Feld qtype definiert den Typ der Frage. Hier gibt es mittlerweile einige verschiedene. Hier eine Liste aller Fragetypen aus der aktuellen Version (0.3.2):

• short_text: Ein kleines Textfeld. Normalerweise für ein Wort
• choice: Auswahl als Single- oder Multiple-Choice (Auch Bilderauswahl)
• free_text: Größeres Textfeld, für längere Texte (unbewertet)
• fill_blank: Lückentext mit Textfeldern. Funktioniert wie mehrere short_text Felder
• fill_blank_choice: Lückentext mit Auswahlboxen (Liste aus Begriffen/Sätzen zur Auswahl)
• error_text: Fehlertext. Hier lassen sich Wörter markieren in Form von Unter- oder Durchstreichen
• matrix_choice: Wie choice nur in Tabellenform für mehrere Aufgaben
• hotspot: Vorgegebene Punkte auf einem Bild müssen Begriffen zugeordnet werden
• classification: Zuordnung. Bilder oder Texte in Felder einsortieren
• order: Reihenfolge/Ordnen. Bilder oder Texte in die richtige Reihenfolge bringen
• petri: Petrinetz. Plätze können markiert werden. Mehrere Schritte möglich
• drawing: Zeichnen. Freies Zeichnen auf einem Hintergrundbild (unbewertet)

Die einzelnen Aufgabentypen werden weiter unten noch genauer ausgeführt.

Überschrift

Die einzelnen Bereiche sind schnell erklärt.

<h4>
  <b>Frage 1:</b><br>
  Freitext Frage
</h4>

In dem h4 Bereich Steht einfach die Überschrift bzw. Frage. Hier kann z.B. i oder b verwendet werden, um Text einfach hervorzuheben.

Antworten

<div class="answers">
  <label>Lösung: <input type="text" name="q"/></label>
</div>

In dem div.answers Bereich werden alle Antwortmöglichkeiten angegeben. In diesem Beispiel handelt es sich um ein einfaches Textfeld in welches Freitext eingegeben wird. Dieses Beispiel ist aus qtype="short_text".

Andere Möglichkeiten sind (für qtype="choice"):

<!-- Mehrfachauswahl -->

<div class="answers multiple">
  <label><input val="Antwort 1">Antwort 1</input></label>
  <label><input val="Antwort 2">Antwort 2</input></label>
</div>


<!-- Einzelauwahl -->

<div class="answers single">
    ...


<!-- Bildauswahl -->

<div class="answers single">
    <label class="img_radio">
      <input val="bild1"/>
      <img src ="bild1.png" style="max-width: 250px;"/>
    </label>
    <label class="img_radio">
        ...
</div>

Hier sind jeweils nur Beispiele genannt. Diese Beispiele kann man kopieren und folgende Werte anpassen:

• value: Dieser Wert wird später verschlüsselt angegeben, um eine richtige Antwort zu kennzeichnen. Dazu später mehr. Achtung bei Auswahlaufgaben wird val statt value verwendet.
• src: Die Bilddatei bei der Bildauswahl. Dieser Name muss nicht mit dem value übereinstimmen.
• style: kann je nach Bedarf angepasst werden, damit das gewünschte Ergebnis erzielt wird. (Hierbei handelt es sich um CSS Befehle)
• texte: In den label Bereichen stehen meist einzeln Texte. Diese sind die sichtbaren Antworten die angezeigt werden.

Feedbacktexte

<!-- Feedback für eine richtige und falsche Antwort -->
<div class="feedback correct incorrect">
  Richtig
</div>

Hier wird der Textblock definiert, der angezeigt wird, wenn eine richtige oder falsche Antwort gegeben wurde. In diesem Block lassen sich neben b und i z.B. auch Links angeben als a oder Bilder als img.

In diesem Fall steht der eine Text sowohl für eine richtige als auch eine falsche Antwort. Um diese Bereiche einzeln zu definieren kann man die Bereiche wie in dem Grundgerüst gezeigt aufteilen.

Angabe der richtigen Antworten

Für jede richtige Antwort wird genau ein a Block verwendet. Möchte man die Antworten nicht verschlüsseln, gibt es dazu Möglichkeiten, die im Bereich Nicht verschlüsselte Fragen unter Erweiterbarkeit der normalen Funktionen erklärt werden.

<!-- Verschlüsselt ist hier das Wort "answer" -->
<a class="ans">693da517cf61c81742ef090221bfd5d6</a>

Der Text der in diesem Block steht ist der Wert des value Feldes der jeweiligen Antwort, bzw. bei Texteingaben einfach die gewünschte Eingabe, per md5 verschlüsselt. Natürlich sollte man hier nicht immer die unverschlüsselte Version direkt darüber schreiben. Dies ist nur als Hilfe gedacht.

Zur Generierung der MD5-Verschlüsselten Antworten eignet sich z.B. http://www.md5-generator.de/ . Man sollte darauf achten, keine zusätzlichen Leerzeichen oder Zeilenumbrüche dort einzugeben.

Bei mehreren richtigen Antworten stehen also einfach mehrere a Blöcke untereinander.

Behandelt werden mehrere richtige Antworten wie folgt:

• Checkbox: Jede richtige Antwort muss angekreuzt werden, sonst gilt die Frage als falsch beantwortet.
• Textfeld: Eine der richtigen Antworten muss eingegeben werden.

Kurzantworten: short_text

Beispiel:

Technische Umsetzung

Dieser Typ funktioniert genau wie oben beschrieben. In dem div.answers befindet sich folgendes

<label>Lösung: <input type="text" name="q"></label>

Dabei kann natürlich der Text "Lösung:" beliebig verändert werden. Er kann auch außerhalb des label stehen.

Einfach-, Mehrfach- und Bilderauswahl: choice

Hier ein Beispiel für eine Mehrfachauswahl:

Technische Umsetzung

Auch hiervon wurden Teile bereits zuvor bereits beschrieben. Hierzu sollte man im Bereich Antworten nachsehen.

Die Bildauswahl ist das vermutlich einzige Konstrukt welches in vielen Fällen speziell angepasst werden muss. Der Umgang mit verschieden großen Bildern ist nicht genug automatisiert. Hier muss man also per style vorgeben, wie die Bilder genau dargestellt werden sollen.

Bei der Bildauswahl kann man für das .answers Element als class sowohl .multiple als auch .single nehmen.

Ein Beispiel für eine Bild-Einzelauswahl wäre:

Bildauswahl

Wie sieht das folgende Petri Netz aus, wenn produce geschaltet wird?

Richtig

Falsch

e0f7fbd4c18827653333ba13ca57d5c9

Freitextaufgaben: free_text

Hierbei handelt es sich um ein größeres Textfeld in das längere Antworten eingegeben werden können. Diese werden nicht überprüft, da es sich um einen offenen Fragetypen handelt. Dieser Typ ist also nur für Aufgaben mit Selbstkontrolle geeignet.

Ein Beispiel für eine Freitextfrage:

Technische Umsetzung

Hierzu wird im div.answers folgendes eingefügt:

<label>
    Antwort:
    <textarea></textarea>
</label>

Natürlich ist auch hier der Text "Antwort:" beliebig veränderbar. Er kann auch weggelassen werden.

Da diese Aufgabe nicht kontrolliert wird, müssen auch keine richtigen Antworten angegeben werden. Im Feedbacktext kann man natürlich korrekte Lösungen erklären.

Anders als oben beschrieben gibt es hier keinen Feedbacktext für richtige Antworten und ebenfalls keinen für falsche sondern nur einen generellen, der immer nach der Beantwortung angezeigt wird. Dieser sieht wie folgt aus:

<div class="feedback information">
    <b>Richtige Antwort:</b><br>
    Text
</div>

Innerhalb dieses div kann man einfügen was man möchte. Es sind also auch Bilder möglich. Das Beispiel b druckt den Text innerhalb fett. Diese Art von Feedbacktext wird auch noch bei anderen Fragetypen genutzt.

Lückentext mit Textfeldern: fill_blank

Ein Beispiel für einen Lückentext:

Technische Umsetzung

Dieser Aufgabentyp erlaubt es mehrere Textfelder zu haben, die alle funktionieren wie in einer short_text Aufgabe. Als korrekt gilt die Antwort nur, wenn alle eingegebenen Wörter korrekt sind.

Hier kann man für jede Lücke mehrere korrekte Antwort angeben, bei der Groß- und Kleinschreibung entscheident sind! Empfohlen ist diese Aufgabe also eigentlich nur, wenn man Lösungswörter vorgibt, die einsortiert werden sollen. Generell wird eher fill_blank_choice empfohlen.

Ein Beispiel für den Teil innerhalb des div.answers ist:

Hier wäre ein langer Text mit
<label><input id="0" type="text"></label>
und diese müssen
<label><input id="1" type="text"></label>
werden.

In die erste Lücke soll dabei "Lücken" eingesetzt werden, in die zweite "gefüllt".

Wichtig ist, dass die id Felder für jede Lücke unterschiedlich sind und sich nicht wiederholen, damit man die richtigen Antworten angeben kann. Jedes input muss in einem label sein.

Die Angabe der Antworten erfolgt ähnlich wie bereits zuvor. Hier der Block für dieses Beispiel:

<a class="ans" id="0">6497dcbced26ee0f510bf82de5234653</a>
<a class="ans" id="1">2c8b2465235308f69defd8ae2e46cdd3</a>

Das erste a verweist durch seine id auf das erste input, welches dieselbe id hat. Hier verschlüsselt ist also die Antwort für diese Lücke. Verschlüsseln tut man die Antwort wie bereits zuvor erklärt. Für jedes input muss also ein a mit übereinstimmender id erstellt werden, indem die jeweilige Antwort verschlüsselt ist. Möchte man für ein Feld mehrere richtige Antwortmöglichkeiten angeben, erstellt man mehrere a mit derselben id die unterschiedliche verschlüsselte Antworten enthalten. Überprüft wird, ob die gegebene Antwort mit einer der angegebenen Möglichkeiten übereinstimmt.

Lückentext mit Auswahl: fill_blank_choice

Ein Beispiel für einen Lückentext:

Technische Umsetzung

Diese Art von Lückentext funktioniert ähnlich wie die vorherige. Allerdings wird hier für jede Lücke eine Auswahl an Antwortmöglichkeiten vorgegeben, von denen nur eine richtig ist.

Innerhalb des div.answers werden die input ersetzt durch select:

Hier wäre ein langer Text mit

<!-- Auswahlblock -->
<label>
    <select id="0">
        <option>Elefanten</option>
        <option>Lücken</option>
    </select>
</label>

und diese müssen

<!-- weiterer Auswahlblock -->
<label>
    <select id="1">
        <option>gefüllt</option>
        <option>überbacken</option>
    </select>
</label>

werden.

Jedes select muss in einem label sein. Innerhalb eines select können beliebig viele option eingebaut werden. Diese können auch in verschiedenen select mehrfach auftauchen.

Die Angabe der Antworten erfolgt ähnlich wie bereits zuvor. Hier der Block für dieses Beispiel:

<a class="ans" id="0">6497dcbced26ee0f510bf82de5234653</a>
<a class="ans" id="1">2c8b2465235308f69defd8ae2e46cdd3</a>

Das erste a verweist durch seine id auf das erste select, welches dieselbe id hat. Hier verschlüsselt ist also die Antwort für diese Lücke. Verschlüsselt wird die Antwort wie bereits zuvor erklärt. Für jedes select muss also ein a mit übereinstimmender id erstellt werden, indem die jeweilige Antwort verschlüsselt ist. Möchte man für ein Feld mehrere richtige Antwortmöglichkeiten angeben, erstellt man mehrere a mit derselben id die unterschiedliche verschlüsselte Antworten enthalten. Überprüft wird, ob die gegebene Antwort mit einer der angegebenen Möglichkeiten übereinstimmt.

Fehlertext oder Wortmarkierung: error_text

Ein Beispiel für einen Fehlertext:

Technische Umsetzung

Dieser Aufgabentyp ist dazu gedacht, in einem Fließtext Wörter durch- oder unterstreichen zu können. So kann man z.B. falsche Wörter durchstreichen oder richtige Wörter unterstreichen. Je Aufgabe ist allerdings nur eine Art der Markierung möglich.

Standardmäßig werden angeklickte Wörter durchgestrichen. Um das umzuschalten und eine Unterstreichen zu ermöglichen, muss das div.answers um die Klasse underline erweitert werden.

<div class="answers underline">

In das div.answers schreibt man dann den gewünschten Text. Markierbare Wörter werden wie folgt eingebaut:

<button class="error_button">Wort</button>

Hier kann der Text "Wort" wieder beliebig verändert werden. Es können theoretisch auch Ganze Sätze innerhalb eines Buttons verwendet werden. Jedes markierbare Wort muss in einen solchen button eingebaut werden. Es kann beliebig viele button geben.

Als richtige Antwort wird angegeben, welche Wörter markiert werden sollen, also entweder unter- oder durchgestrichen. Verschlüsselt wird der Teil innerhalb des button. Im oberen Beispiel müsste also "Wort" verschlüsselt werden, was folgendes ergibt:

<a class="ans">7e2aa751bdcb1636344f39483040e3e1</a>

Wörter die nicht markiert werden sollen, werden ignoriert.

Matrix: matrix_choice

Ein Beispiel für eine Matrixaufgabe:

Technische Umsetzung

Matrix Aufgaben funktionieren wie choice Aufgaben in einer Tabellenform. Dabei können mehrere Aufgaben mit gleichen Antwortmöglichkeiten untereinander abgefragt werden.

Für die Erstellung wird auf die HTML-Tabelle table zurückgegriffen:

<div class="answers single">
    <table class="matrix">
        <tr>
            <td>Aufgabe</td>
            <th id="wahr" class="answer">Wahr</th>
            <th id="falsch" class="answer">Falsch</th>
        </tr>

        <tr id="0">
            <td>Ein Elefant ist grau.</td>
        </tr>

        <tr id="1">
            <td>Lügen haben lange Beine.</td>
        </tr>
    </table>
</div>

Dieser Block kann so kopiert, verändert und erweitert werden. Das äußere table sollte dabei unverändert bleiben. Die tr Elemente stehen für die Zeilen der Tabelle. Die oberste Zeile enthält die Antwortmöglichkeiten und eventuell in der ersten Spalte etwas wie "Aufgabe", was die Spalte beschreibt, in der die Aufgaben stehen. Jedes td entspricht einer Spalte innerhalb der Zeile, also genau genommen der exakten Zelle. Die Elemente th verhalten sich genau so, stehen aber für "header" Zellen. Diese werden in diesem Fall verwendet um die Antwortmöglichkeiten hervozuheben. In jeder Zeile tr müssen sich zusammengerechnet die gleiche Anzahl an td und th befinden.

Erste Zeile: Die id der beiden th.answer wird für die Angabe der richtigen Antworten jeder Zeile benötigt. Sie sollte also für jede Antwortmöglichkeit einzigartig sein. Die Klasse antwort muss bei den vorgegebenen Antwortmöglichkeiten beibehalten bleiben. Innerhalb der th.answer steht nun der Text der angezeigt wird. Möchte man eine größere Auswahl an Antwortmöglichkeiten haben, können weitere th.answer Elemente dort eingefügt werden.

Nach der ersten Zeile kommen dann die eigentlichen Aufgaben. Jede Zeile muss eine einzigartige id bekommen (abgesehen von der obersten Zeile). Diese können z.B. durchnummeriert werden. Innerhalb der Zeile steht dann in dem ersten td ein Aufgabentext (erste Spalte). Die Auswahloptionen für den Nutzer werden automatisch eingefügt. Um zwischen Einfach- und Mehrfachauswahl zu unterscheiden, erhält das div.answers die zusätzliche Klasse single oder multiple:

Einfachauswahl
<div class="answers single">

Merhfachauswahl
<div class="answers multiple">

Um hier nun die richtigen Antworten anzugeben, muss man einige Dinge beachten. Angegeben werden nur die Boxen, die markiert werden sollen. Die id des a.ans entspricht der id der Zeile zu der die Antwort gehört. Verschlüsselt wird die id des th.answer, welches richtig ist.

Im oberen Beispiel ist die Antwort der Zeile mit der id 0 "wahr", also wird die id "wahr" verschlüsselt. Das a.ans enthält nun die id 0, da es zu dieser Zeile gehört und die MD5-Verschlüsselte Form von "wahr" als inneren Text.

<a id="0" class="ans">c90c13507fc364353401f4e04939a619</a>

Müssen in einer Zeile mehrere Spalten markiert werden, gibt es mehrere a.ans mit derselben id, aber unterschiedlichen Werten. Dies ist nur bei Mehrfachauswahl möglich.

Hotspot: hotspot

Ein Beispiel für eine Hotspot-Aufgabe:

Hotspot

Markiere die Stelle an die der folgende Begriff gehört:

Richtig

Falsch

Hier das korrekt ausgefüllte Bild:

24f682f769992022dba3cf73550b7da0 fedce951c5a3cfa14347eff6301859b0 28ed2ea313ce00277f4b48056439e08d f8bf8558a8a955083984dcdd887608c4 6c7169e4667d2d39b782b290c502152a

Technische Umsetzung

Bei Hotspot Aufgaben, werden auf einem Bild verschiedene Punkte platziert. Im folgenden werden dann Begriffe abgefragt und der Nutzer muss den zugehörigen Punkt auswählen. Es sollte also zu jedem Begriff nur einen Punkt geben der korrekt ist. Außerdem sollten möglichst alle Punkte abgefragt werden, damit am Ende die richtige Lösung auf den Punkten angegeben werden kann.

Die Erstellung einer Hotspot-Aufgabe ist aufwendiger, da die Positionierung der Punkte per Ausprobieren stattfindet.

Als Grundlage für diese Aufgabe muss ein Bild mit den Punkten innerhalb des div.answers definiert werden:

<div class="hotspot_image">

    <!-- Hintergrundbild -->
    <img src="bild.png"/>

    <!-- Markierbarer Punkt -->
    <div style="top: 25%; left: 50%;" class="hotspot" id="obj1"></div>
</div>

Das Bild wird ganz normal eingebaut, hierzu muss nur der src Wert verändert werden. Die markierbaren Punkte werden dann wie in dem Beispiel eingebaut. Jeder Punkt entspricht einem div.hotspot und muss eine einzigartige id haben. Die Position wird prozentual auf dem Bild festgelegt, basierend auf dem Abstand zum oberen und Linken Rand des Bildes, und muss per Probieren angepasst werden. Sichtbar sind die Punkte nur, wenn die Maus auf dem Bild liegt. Es können beliebig viele Punkte hinzugefügt werden, diese müssen lediglich eine unterschiedliche id haben.

Angegebene Begriffe werden in dem span.task angezeigt. Dieses kann frei innerhalb des Fragenblocks platziert werden. Die Begriffe werden bei der Angabe der richtigen Antworten erstellt. Ein möglicher Text der die Begriffe abfragt könnte wie folgt aussehen:

Markiere <b><span class="task"></span></b> in dem Bild.

Um die abgefragten Begriffe anzugeben und den Punkten zuzuordnen werden die a.ans verwendet. In diesem Fall entspricht die id des a.ans dem abgefragten Begriff der so angezeigt wird wie er dort eingetragen wurde. Verschlüsselt innerhalb des a.ans ist die id des zugehörigen div.hotspot, in diesem Beispiel "obj1".

<a id="Begriff Nummer 1" class="ans">24f682f769992022dba3cf73550b7da0</a>

Die Begriffe werden normalerweise in der Reihenfolge der angegebenen Antworten abgefragt. Möchte man eine zufällige Reihenfolge, muss das div.hotspot_image um die Klasse shuffle erweitert werden:

<div class="hotspot_image shuffle">

Das Feedback funktioniert bei diesem Aufgabentyp anders. Nach jedem zugeordneten Begriff wird entweder das div.feedback.correct oder div.feedback.incorrect angezeigt. Also die Blöcke die bereits zuvor erklärt wurden. Hier eignet es sich einfach nur einen kurzen, allgemeinen Text wie "Leider falsch" einzutragen. Wurden alle Begriffe zugeordnet, wird das div.feedback.information angezeigt. Hier kann man also abschließend zum Beispiel ein Bild mit allen Begriffen anzeigen und eine Erklärung geben.

Zusätzlich wird beim fahren über die Punkte jeweils angezeigt welche Begriffe den Punkten zugeordnet wurde. Falsche Begriffe sind dabei durchgestrichen und richtige Begriffe nicht. Wurden alle Begriffe zugeordnet, wird für jedes a.ans außerdem dem zugehörigen div.hotspot der richtige Begriff zugeordnet, sodass dieser beim Herüberfahren angezeigt wird. Falsch zugeordnete Begriffe bleiben in der Anzeige erhalten.

Zuordnung (Drag and Drop): classification

Ein Beispiel für eine Zuordnungsaufgabe:

Technische Umsetzung

Zuordnungsaufgaben sind dazu gedacht Objekte in etwas einzusortieren. So können z.B. Satzbausteine in Lücken gezogen werden oder Bilder zu ihnen entsprechenden Definitionen sortiert werden.

Es gibt verschiedene Art der Darstellung einer solchen Aufgabe. Generell wird von der Verwendung, Bildausschnitte in ein Bild einzusortieren, abgeraten. In diesem Fall ist zum einen die Erstellung der Aufgabe sehr aufwendig und zum anderen häufig die Darstellung auf kleineren Geräten/Displays nicht wie ursprünglich erwünscht, was sogar zur Unlösbarkeit der Aufgabe führen kann. Sollte man die Aufgabe unbedingt so haben wollen, sollte jemand mit genug CSS Kenntnis dies erstellen und testen.

Generell wird zu Darstellungen geraten, die möglichst variabel sind, wie das Einsortieren von Textbausteinen in Sätze oder das Zuordnen von Bildern zu Überschriften oder Beschreibungen.

Es ist möglich, für ein Feld mehrere mögliche Antworten anzugeben. Man kann also z.B. eine Tabelle bauen, an der die Position innerhalb der Spalten irrelevant ist.

Wieder wird das Grundgerüst von oben verwendet. In dem div.answers werden dann die Objekte definiert die einsortiert werden sollen. Jedes Objekt entspricht dabei einem solchen Block:

<div class="object">
    <span id="obj1">Satzbaustein</span>
</div>

Dabei ist es wichtig, dass innerhalb des div.object nur ein Element zu finden ist, welches eine einzigartige id haben muss. Diese können durchnummeriert werden. Zu empfehlen ist für Texte ein span Element, für Bilder ein img Element wie folgendes:

<div class="object">
    <img id="obj2" src="bild.png"/>
</div>

Jedes dieser Objekte kann nur einmal verwendet werden innerhalb der Aufgabe. Außerdem kann jedem Zielfeld nur genau ein Objekt zugewiesen werden.

Um diese Objekte herum können beschreibende Texte oder Bilder zu finden sein. Hier kann jeglicher HTML Code verwendet werden.

Für die Objekte müssen Zielfelder erstellt werden. Zu jedem Objekt gibt es genau ein festdefiniertes Zielfeld in das es gezogen werden muss. Dies kann z.B. so aussehen:

In einer solchen Aufgabe muss dann jeweils ein
<div class="object destination" id="ziel0"></div>
in ein zugehöriges Ziel gezogen werden.

In diesem Fall handelt es sich um einen Text in dem ein Feld ist, in welches das Wort "Satzbaustein", das oben als Objekt definiert wurde, gezogen werden soll. Jedes dieser Zielfelder muss ein div mit den Klassen object und destination sein. Außerdem muss jedes dieser Zielfelder, ähnlich wie die Objekte, eine einzigartige id haben. Diese können wieder durchnummeriert werden.

Um nun zu definieren welches Objekt in welches Zielfeld gehört werden wieder die a.ans verwendet. Für jedes Zielfeld wird ein a.ans erstellt, welches dieselbe id wie das div.object.destination hat. Verschlüsselt wird in das Feld dann die id des Objekts eingetragen.

<a class="ans" id="ziel0">24f682f769992022dba3cf73550b7da0</a>

Hier wird für das Zielfeld #ziel0 die MD5 verschlüsselte Version von "obj1" eingetragen. Für jedes Zielfeld wird nun ein solches a.ans erstellt. Möchte man für ein Feld mehrere richtige Antwortmöglichkeiten angeben, erstellt man mehrere a mit derselben id die unterschiedliche verschlüsselte Antworten enthalten. Überprüft wird, ob die gegebene Antwort mit einer der angegebenen Möglichkeiten übereinstimmt.

Sortieren (Drag and Drop): order

Ein Beispiel für eine Sortieraufgabe:

Technische Umsetzung

Bei Sortieraufgaben werden mehrere Objekte vorgegeben, die in eine Reihenfolge gebracht werden sollen. Diese Reihenfolge kann nicht zu variabel sein. Für jedes Objekt muss eine Position angegeben werden. Mehrere Objekte können dieselbe Position haben und wären somit untereinander austauschbar.

Die zu sortierenden Objekte funktionieren wie bei einer Zuordnungsaufgabe. Jedes Objekt kann aus einem Text oder einem Bild bestehen. Hier eine Beispielaufgabe mit Text:

<div class="answers">
    Es gibt die Vier Brüder Gert, Karl, Heinrich und Otto. Gert ist der
    Kleinste und Karl ist der Größte. Sortiere die Brüder der Größe
    nach von klein zu groß.

    <br>
    <br>

    <div class="object">
        <span id="obj0">Gert</span>
    </div>
    <div class="object">
        <span id="obj1">Karl</span>
    </div>
    <div class="object">
        <span id="obj2">Heinrich</span>
    </div>
    <div class="object">
        <span id="obj3">Otto</span>
    </div>
</div>

Wieder können die span Elemente durch img ausgetauscht werden, wenn man Bilder statt Text verwenden möchte.

<div class="object">
    <img id="0" src="bild.png"/>
</div>

Die Objekte sind dabei immer nur so breit, wie sie müssen. Möchte man, dass jedes Objekt die volle Breite einnimmt und damit alle Objekte untereinander stehen muss man dem div.answers die Klasse fill hinzufügen.

<div class="answers fill">

Nun muss für jedes Objekt die Position definiert werden. Das Objekt, welches an vorderster Stelle stehen soll bekommt die Position 0. Man erstellt also ein a.ans mit derselben ID wie das zugehörige Objekt und verschlüsselt per MD5 die Zahl "0". Es ergibt sich:

<a class="ans" id="obj0">cfcd208495d565ef66e7dff9f98764da</a>

Kann ein weiteres Objekt an derselben Stelle sein, wird auch dieselbe Zahl verschlüsselt angegeben. Ansonsten wird für das jeweils nächste Objekt weiter hochgezählt.

Da in unserem Beispiel Heinrich und Otto nicht eindeutig zu sortieren sind, erhalten sie beide die Position "1". Karl hingegen ist eindeutig größer und erhält somit die Poisition "2". Es darf niemals eine Zahl übersprungen werden.

Petrinetzaufgaben: petri

Ein Beispiel für eine Petrinetzaufgabe:

Petrinetz

Markiere die Plätze an denen mindestens eine Marke vorhanden ist, wenn Transition geschaltet wird.

Hier die Ausgangssituation:

---

Richtig

Falsch

Die korrekte Lösung ist in einzelnen Schritten zu sehen.

ec6ef230f1828039ee794566b9c58adc ed92eff813a02a31a2677be0563a0739 c6c27fc98633c82571d75dcb5739bbdf 1d665b9b1467944c128a5575119d1cfd c6c27fc98633c82571d75dcb5739bbdf

Technische Umsetzung

Der Petrinetzaufgabentyp ermöglicht einfache Petrinetzaufgaben. Dabei können jedoch immer nur ganze Plätze markiert werden. Es kann also keine Anzahl von Marken auf einem Platz abgefragt werden.

Generell wird bei diesem Aufgabentypen sehr viel mit Bildern gearbeitet. Außerdem sind mehrere Schritte möglich. Alle markierbaren Plätze müssen manuell vom Ersteller der Aufgabe platziert werden. Dies ist mit sehr viel Probieren verbunden.

Zum einen gibt es ein Hintergrundbild auf dem (ähnlich wie bei Hotspots) die Plätze markiert werden können. Dieses Hintergrundbild ist in jedem Schritt änderbar. Wird ein Schritt gelöst wird das Hintergrundbild ausgetauscht und es kann dort eine Lösung angezeigt werden.

Beispiel:

<div class="answers">
    <div class="petri_image">

        <img id="0" task="produce" src="assets/img/producerConsumer_empty.jpg"/>
        <img id="0" task="produce" class="correct" src="assets/img/producerConsumer_1.jpg"/>

        <img id="1" task="deliver" src="assets/img/producerConsumer_empty.jpg"/>
        <img id="1" task="deliver" class="correct" src="assets/img/producerConsumer_2.jpg"/>

        <img src="assets/img/producerConsumer_2.jpg"/>

        ...
    </div>
</div>

Anfangs wird hier das allererste img angezeigt. Auf diesem markiert der Nutzer nun bestimmte Plätze in denen sich z.B. mindestens eine Marke befindet. Löst der Nutzer nun den Aufgabenteil wird das zweite Bild nämlich img#0.correct angezeigt. Er kann hier seine markierten Plätze mit der Lösung vergleichen. Geht er einen Schritt weiter, wird der nächste Aufgabenschritt geladen. Also das erste img#1. Ist der Nutzer mit allen Schritten fertig wird abschließend ein letztes Bild angezeigt. Dieses hat weder Klassen noch eine id. Auf diesem Abschlussbild sind keine Plätze mehr vom Nutzer markierbar.

Um in der Aufgabenstellung konkret auf den aktuellen Schritt einzugehen, werden in den Bildern die Felder task definiert. Hier kann man z.B. den Namen einer Transition eingeben und den Text dann so formulieren, dass immer nur der Transitionsname ausgetauscht wird. Um diese individuellen Tasks in seinen Aufgabentext einzubauen kann man folgenden Block einfügen:

<span class="task"></span>

Beispiel:
Markiere die Plätze an denen mindestens eine Marke
vorhanden ist, wenn Transition
<b><span class="task"></span></b> geschaltet wird.

Sollte man extra zu jedem Schritt eine Ausgangssituation anzeigen wollen und als Hintergrundbild, auf dem die Plätze markiert werden müssen, dann ein leeres Petrinetz, kann man wie im oberen Beispiel in jedem Schritt zunächst das leere Netz als Bild und dazu darüber in der Aufgabenstellung die Ausgangssituation anzeigen lassen. Dazu wird ähnlich wie mit den Tasks ein Block eingefügt, indem zu jedem Schritt ein weiteres Bild definiert ist. Beispiel:

Hier die Ausgangssituation:
<div class="petri_task">
    <img id="0" src="assets/img/producerConsumer.jpg"/>
    <img id="1" src="assets/img/producerConsumer_1.jpg"/>
</div>

Das obere Bild img#0 wird also angezeigt wenn der erste Schritt aktiv ist. Im nächsten Schritt dann img#1. Die id entspricht dabei der id der Bilder aus div.petri_image die zuvor definiert wurden.
Wo dieses Bild der Ausgangssituation angezeigt wird ist dabei egal, solang es innerhalb der Aufgabe bleibt.

Die genutzten Hintergrundbilder sollten immer dieselbe Anordnung von Plätzen verwenden, da markierbare Plätze nur einmal für die gesamte Aufgabe definiert werden können. Für jeden Platz muss ein Block wie folgt eingebaut werden:

<div class="answers">
    <div class="petri_image">

        ...

        <div style="top: 28%; left: 22.5%;" class="place" id="p1"></div>
        <div style="top: 39%; left: 48.2%;" class="place" id="p2"></div>
    </div>
</div>

In diesem Beispiel sind zwei markierbare Plätze definiert. Diese werden ergänzend unter den vorher definierten Bilder eingebaut. Jeder Platz muss eine einzigartige id haben. Außerdem muss jeder Platz einzeln positioniert werden. Dies geschieht durch die Angabe der prozentualen Abstände zum oberen und linken Bildrand.

Für jeden Schritt muss nun definiert werden, welche Plätze markiert werden sollen. Dazu wird für jeden Schritt und jeden darin markierten Platz ein a.ans angelegt. Die id des jeweiligen a.ans entspricht der id des zugehörigen Bildes aus div.petri_image. Verschlüsselt wird hier wieder die id des zu markierenden Platzes. Soll also im ersten Schritt nur Platz #p1 markiert werden und im zweiten Schritt dann zusätzlich #p2 ergibt sich folgendes:

<a id="0" class="ans">ec6ef230f1828039ee794566b9c58adc</a>

<a id="1" class="ans">ec6ef230f1828039ee794566b9c58adc</a>
<a id="1" class="ans">1d665b9b1467944c128a5575119d1cfd</a>

Das Feedback funktioniert bei diesem Aufgabentyp anders. Nach jedem Schritt wird entweder das div.feedback.correct oder div.feedback.incorrect angezeigt. Also die Blöcke die bereits zuvor erklärt wurden. Hier eignet es sich einfach nur einen kurzen, allgemeinen Text wie "Leider falsch" einzutragen. Wurden alle Begriffe zugeordnet, wird das div.feedback.information angezeigt. Hier kann man also abschließend zum Beispiel ein Bild mit allen Schritten anzeigen und eine Erklärung geben.

Zeichnen: drawing

Ein Beispiel für eine Zeichenaufgabe:

Zeichnen

Ergänze die Linie zu einer Parabel:

Eine unverschobene und ungestauchte Parabel ist symmetrisch zur Y-Achse und geht außerdem durch den Ursprung des Graphen. Zur Illustration wird hier X² verwendet.

Technische Umsetzung

Beim Zeichnen kann der Nutzer auf einem vorgegebenen Untergrund frei zeichnen. Dabei können keine besonderen Formen verwendet oder getippt werden. Lediglich die Mausbewegung bzw. die Touchbewegung ist möglich.

Beim Lösen der Aufgabe wird das Hintergrundbild ersetzt. So kann z.B. die Musterlösung angezeigt werden. Es kann aber auch beide male das selbe Bild angezeigt werden. Zudem gibt es das generelle Feedback wie bei allen anderen Aufgabentypen.

Zur Erstellung muss innerhalb des div.answers lediglich folgendes eingefügt werden:

<div class="drawing_canvas_container red">

    <img class="background" style="opacity: 0.5" src="assets/img/parabel_bg.png"/>

    <img class="correct" style="opacity: 0.5" src="assets/img/parabel.png"/>

</div>

Dabei entspricht das div.drawing_canvas_container dem Bereich indem gemalt werden kann. Die zusätzliche Klasse red gibt an, dass die Zeichnung "rot" ist. Es gibt folgende vordefinierte Farben: red (#FF0000), blue (#0000FF), green (#00FF00), cyan (#00FFFF), yellow (#FFFF00), orange (#FF8000), purple (#FF00FF), black (#000000). Es kann nur eine dieser Farben angegeben werden. Diese kann nicht während des Zeichnens verändert werden.

Der Nutzer hat die Möglichkeit seine Schritte einzeln Rückgängig zumachen oder das gesamte Bild zu löschen. Möchte man, dass das einzelne Rückgängigmachen nicht möglich ist, kann man zusätzlich zu der Klasse für die Farbe die Klasse no_steps hinzufügen.

<div class="drawing_canvas_container red no_steps">

Innerhalb dieses div.drawing_canvas_container werden nun die beiden Hintergrundbilder definiert. Das img.background ist das Bild, welches beim Zeichnen aktiv als Hintergrund genutzt wird. Das img.correct entspricht dem Bild, welches nach dem Lösen angezeigt wird. Beide Bilder können gleich sein. Wichtig ist, dass beide Bilder gleich groß sein sollten, da es sonst zu fehlerhaften Darstellungen der Zeichnung kommen kann.

Das zusätzliche style="opacity: 0.5" sorgt dafür, dass die Bilder nur 50% sichtbar sind. Dieser Wert ist anpassbar.

Anders als oben beschrieben gibt es hier keinen Feedbacktext für richtige Antworten und ebenfalls keinen für falsche sondern nur einen generellen, der immer nach der Beantwortung angezeigt wird. Dieser sieht wie folgt aus:

<div class="feedback information">
    <b>Richtige Antwort:</b><br>
    Text
</div>

Innerhalb dieses div kann man einfügen was man möchte. Es sind also auch Bilder möglich. Das Beispiel b druckt den Text innerhalb fett. Diese Art von Feedbacktext wird auch noch bei anderen Fragetypen genutzt.

Unbewertete Fragen

Es gibt neuere Fragetypen die nicht bewertet werden können oder sollen. Dies kann auch bei Auswahlfragen der Fall sein. Hierzu gibt es die Möglichkeit, Fragen als unranked zu kennzeichnen. Nach dem beantworten der Frage, kann dann eine allgemeine Rückmeldung angezeigt werden, die Antworten werden aber nicht als richtig oder falsch markiert.

Um dies zu erreichen, wird ganz dem div.question die Klasse unranked hinzugefügt. Das ganze sieht dann zum Beispiel so aus:

<div class="question unranked" qtype="choice" id="choice_1">

Bei unbewerteten Fragen, wird nicht wie gewöhnlich der Feedbackblock für richtig oder falsch angezeigt sondern ein zusätzlicher, der statt correct oder incorrect die Klasse information hat. Dieser sieht dann beispielsweise so aus:

<!-- Feedback für eine unbewertete Frage -->
<div class="feedback information">
  Eine richtige Antwort wäre hier z.B: ...
</div>

Bei unbewerteten Fragen können alle a.ans weggelassen werden.

Ein Beispiel für eine unbewertete Frage:

Nicht verschlüsselte Fragen

Die korrekten Antworten müssen bei bewerteten Fragen als HD5 gehashte Werte angegeben werden. Das sorgt vor Allem für einen zusätzlichen Erstellungsaufwand. Möchte man nicht verhindern, dass Nutzer in dem Quelltext die korrekte Antwort lesen können, gibt es zwei einfache Möglichkeiten, dieses Hashing zu umgehen.

Generell deaktivieren

Möchte man für keine Frage verschlüsselte Antworten angeben, kann man per JavaScript Aufruf quizJS.setEncrypted(false) die Verschlüsselung deaktivieren. Das bedeutet, dass überall in den <a class="ans"> direkt die unverschlüsselte Antwort hinterlegen kann.

Fragenspezifisch deaktiveren

Möchte man nur für einzelne Fragen die Verschlüsselung deaktiveren oder den JavaScript Aufruf umgehen kann man bei der Frage zusätzlich zu der Klasse question die Klasse unencrypted ergänzen:

<!-- hier steht die zusätzliche Klasse -->
    <div class="question unencrypted" qtype="choice" id="q_choice">
        <h4>Welche Unterordner werden in der Dateistruktur von digitalen Skripten erwartet?</h4>

        <div class="answers multiple">
            <label><input val="Frage-1">assets</label>
            <label><input val="Frage-2">movies</label>
            <label><input val="Frage-3">img</label>
            <label><input val="Frage-4">css</label>
            <label><input val="Frage-5">lang</label>
        </div>

        <div class="feedback correct">
            Genau, diese Ordner werden auf jeden Fall benötigt. Sogar noch ein paar mehr.
        </div>
        <div class="feedback incorrect">
            Deine Antwort ist leider nicht ganz richtig. Entweder fehlt ein Ordner, oder du hast einen ausgewählt, der nicht benötigt wird.
        </div>

        <!--
        Hier werden alle richtigen Antwortmöglichkeiten angegeben.
        Unverschlüsselt
        -->
        <a class="ans">Frage-1</a>
        <a class="ans">Frage-3</a>
        <a class="ans">Frage-4</a>
    </div>
    

Nicht zurücksetzbare Fragen

Normalerweise kann jede Frage nachdem sie beantwortet wurde zurückgesetzt werden. Um dies zu verhindern kann man die Funktion deaktivieren. Natürlich muss man dazu erwähnen, dass mit genügent JavaScript Kenntnis diese Blockade leicht umgangen werden kann, aber dem Nutzer wird zumindest der Knopf zum zurücksetzen nicht mehr präsentiert und somit sollte der durchschnittliche Nutzer auch nicht weiter suchen.

Um diese Knopf also zu deaktivieren fügt man, ähnlich wie bei unbewerteten Fragen der Frage eine Klasse hinzu. In diesem Fall wird dem div.question die Klasse reset_blocked hinzugefügt. Das sieht dann zum Beispiel so aus:

<div class="question reset_blocked" qtype="choice" id="choice_1">

Ein Beispiel für eine nicht zurücksetzbare Frage:

Zeitlich begrenzte Fragen

Für den Fall, dass man Fragen zeitlich begrenzen möchte, kann man eine maximale Zeit in Minuten angeben, nach der die Frage automatisch, so wie sie ist, beantwortet wird. Dies kann nützlich sein, wenn in einer betreuten Übung die Aufgaben bearbeitet werden sollen. Diese zeitliche Begrenzung lässt sich zum Beispiel umgehen, in dem die Seite einfach neu geladen wird.

Diese zeitliche Begrenzung lässt sich für jede Frage einzeln einbauen, indem man das Feld max-time hinzufügt:

<div class="question reset_blocked" qtype="choice" id="choice_1" max-time="30">

Die Zahl entspricht der Zeit in Minuten.

Die Zeit läuft immer runter, solang die section, in der sich die Frage befindet, sichtbar ist. Man kann also z.B. jede Frage in eine einzelne section einbauen und somit jeder Frage eine individuelle Zeit zuweisen oder man macht eine section in der sich alle Fragen befinden und somit laufen alle Zeiten gleichmäßig runter. Letzteres ist z.B. bei eine Probeklausur sinnvoll. Dort könnte man dann jeder Frage eine zeitliche Begrenzung der maximalen Bearbeitungszeit insgesamt geben.

Ein Beispiel für eine zeitlich begrenzte Aufgabe:

Referenzieren

Falls man in einem späteren Block eine vorher bearbeitete Frage noch einmal anzeigen möchte, beziehungsweise die Möglichkeit geben möchte dieses zu tun kann man einen Knopf in den Quelltext einbauen, der auf die Frage verweist. Wenn dieser gedrückt wird, wird die Frage an der Stelle des Knopfes noch einmal angezeigt, ist aber nicht mehr veränderbar. Sollte die Frage noch nicht, beantwortet worden sein, wird sie so unbeantwortet angezeigt.

Um dieses Referenzieren zu ermöglichen, muss die Frage auf die verwiesen wird eine eindeutige id haben, die bereits unter Fragetypen erwähnt wurde.

An der gewünschten Stelle wird dann folgender Button eingebaut:

<button id="choice_1_ref" onclick="showQuestionHere(this)">
  Vorherige Antwort anzeigen
</button>

Hierbei muss die id des Buttons der der Frage entsprechen und um _ref erweitert werden. Der onclick Teil muss umbedingt so vorhanden bleiben, damit der Knopf auch seine Funktionalität hat. Der Text "Vorherige Antwort anzeigen" kann beliebig verändert werden. Um um den Button herum Platz zu schaffen, kann es hilfreich sein, davor oder danach einen oder mehrere <br> einzufügen.

Als Beispiel hier ein Button der eine vorherige Frage wieder anzeigt:

Veränderte Darstellung (CSS)

Um die Frage auf eine bestimmte Weise darzustellen, kann es nötig sein, den Stylesheet anzupassen. Dabei muss CSS verwendet werden. Sollten die folgenden Erklärungen also nicht reichen, kann die Suche mit dem Stichwort CSS im Internet schnell zur richtigen Lösung führen.

Generell kann man an verschiedenen Stellen CSS Stile definieren. Die Grundeinstellung der Stilisierung sind für diese Skripte in der "elearn.css" und der "quiz.css" vorgegeben. Diese werden in das HTML Dokument eingebunden, damit der Browser weiß, wie die Dinge dargestellt werden sollen.

Um allerdings nur einzelne Fragen anders Darzustellen, ist eine extra Datei nicht unbedingt notwendig und führt auch nicht zwangsläufig zu mehr Übersicht. In den Beispielen wurde deshalb zumeist ein style Block direkt vor der jeweiligen Frage eingefügt.

Hier ein Beispiel für eine Sortieraufgabe:

<style>
    #order_1 .object {
        width: 50px;
        height: 50px;
    }
</style>
<div class="question" qtype="order" id="order_1">
...
</div>

In diesem Fall wird für alle Elemente mit der Klasse object die sich in dem Element mit der ID order_1 befinden eine exakte Breite und Höhe eingestellt. Wichtig ist zu wissen, wie man die gemeinten Elemente angibt. Wie bereits zuvor erklärt steht ein # für den id Wert und ein Punkt für den class Wert. Ein Leerzeichen bedeutet, dass das hintere Element innerhalb des davorstehenden ist. Diese Dinge lassen sich kombinieren:

div.question#order_1 div.answers .object { ... }

Dieses Beispiel beschreibt genaugenommen das selber Element, ist allerdings spezifischer. So wurde zusätzlich angegeben, dass das Element mit der ID order_1 auch ein div ist und die Klasse question besitzt. Außerdem wurde zusätzlich angegeben, dass sich das .object innerhalb des div mit der Klasse answers befindet.

Man sollte bei dieser Angabe immer so genau wie möglich sein, um nicht ausversehen andere Elemente ebenfalls zu verändern. Achtet man aber darauf, dass die id Felder alle Fragen einzigartig sind innerhalb des Dokuments, kann eine zusätzliche Spezifikation unnötig kompliziert sein. In diesem Fall reicht das erste Beispiel aus.

Nicht übernommenen Änderungen: Innerhalb der geschweiften Klammern wird dann angegeben, wie genau der Stil beeinflusst wird. Dies kann vorherige Angaben überschreiben. CSS wählt in den meisten Fällen die Definition, bei der das Element am genausten angesprochen wurde. Sollten also die Werte nicht wie gewünscht übernommen werden und somit nichts am Aussehen ändern, kann es in vielen Fällen helfen ein !important vor das abschließende Semikolon einzufügen:

width: 100px !important;

Hiermit sollte man allerdings vorsichtig sein, da es dann erzwungermaßen vorherige Definitionen überschreibt. Das ist nicht immer erwünscht.

Einstellbare Werte: Generell kann man in CSS extrem viel einstellen. Ich kann hier nicht auf Alles eingehen und versuche die wichtigsten Werte zu erklären.

Width/Height: Die Werte width und height werden zumeist in Pixeln (px), Breite eines M (em) oder auch prozentual zur verfügbaren Breite angegeben (%). Prozentuale Angaben funktionieren in den meisten Fällen nur bei der Breite, nicht bei der Höhe.

width: 25%;
height: 15em;

Background: Der Hintergrund wird in der meisten Fällen als Farbe angegeben. Diese kann als RGB Code oder als Hex Code definiert werden. Folgendes Beispiel ist ein grelles Rot.

background: rgb(255,0,0);
background: #ff0000;

Padding/Margin: Padding und Maring sind Abstände zum Rand. Dabei ist Margin der Abstand außerhalb des Elements und Padding entspricht einem Einrücken innerhalb. Zwischen den Beiden ist der Rand der als border ebenfalls definiert werden kann. Bei sowohl Padding als auch Margin, können verschieden Viele Werte benutzt werden.

• Ein Wert: Alle Abstände gleich
• Zwei Werte: 1. Oben/Unten, 2. Links/Rechts
• Drei Werte 1. Oben, 2. Links/Rechts, 3. Unten
• Vier Werte: 1. Oben, 2. Rechts, 3. Unten, 4. Links

padding: 20px 15em;
margin: 0 15px 5px;

Border: Ein Rand um das Element herum. Hier werden in der Regel drei Werte definiert:

• 1. Breite des Randes
• 2. Art des Randes (normalerweise immer "solid")
• 3. Farbe des Randes (Wie bei Background)

background: 2px solid #e2001a;

Text-Align: Ausrichtung des Textes innerhalb dieses Elements. Zumeist verwendet werden "left", "center", "right".

text-align: center;

Andere Stile: Komplexere Dinge werden hier nicht erklärt. Darstellungen, wie Objekte nebeneinander, sind generell nicht ganz so einfach und führen auf mobilen oder älteren Geräten häufiger zu Fehlern, wenn sie nicht optimal eingebaut wurde. Hierzu sollten die speziellen Fälle einzeln gesucht werden.