Erstellung von Selbsttests

Julia Kühnemund und Arne Westphal
eLearning Büro - MIN
cc by-sa | 2016

Titelbild

Inhaltsverzeichnis

Verwendung von Selbsttestaufgaben

Die Quizfragen dienen dazu, die Aufmerksamkeit der Studierenden zu wecken und sich selbst zu überprüfen. Sie geben die Möglichkeit, die wichtigsten Aspekte in den Vordergrund zu rücken. Durch verschiedene Fragetypen kann man abhängig vom Lernziel helfen, das Material u.a. zu verstehen, wiederholen, einzuordnen oder zu lernen.

Fragetypen

Die Fragen können offen oder geschlossen sein. Fragen mit kurzen Antworten kann man als halboffene oder halbgeschlossene Fragen bezeichnen.

Die geschlossene Form verlangt eine eindeutige Antwort, z.B. „Ja“ oder „Nein“. Bei diesen Fragen sind die Antwortmöglichkeiten vorgegeben.

Die offenen Fragen ermöglichen Antworten in beliebiger Form. Dabei ist die Antwortform nur vom Lernziel abhängig. Die Studierenden können ihre Antwort durch Auswählen oder Verschieben von Objekten und auch in Form einer Zeichnung geben.

Alle diese Fragetypen haben ihre Vor- und Nachteile und müssen Lernziel abhängig verwendet sein.

Geschlossene und offene Fragen

Geschlossene (konvergente) Fragen können automatisch ausgewertet werden, d.h. die Studierenden können sofort nach jeder Frage oder am Ende des ganzen Quiz ihren Kenntnisstand überprüfen und wenn vorgesehen bewerten lassen. Außerdem ist die Benotung objektiv, da der Computer immer die gleiche Bewertung für eine bestimmte Antwort gibt, ohne dabei emotionale Bestandteile in die Benotung (schlechte Laune, Frustration oder Ablenkung) einfließen zu lassen. Als Nachteil wird oft die Zufallsrate benannt, d.h. die Studierende klicken ohne nachzudenken oder merken sich vorgegebene Muster. Technischen Probleme können auch die Benotung beeinflussen. Aus diesem Grund sind computerbasierte Prüfungen noch nicht sehr verbreitet. Und an den Stellen, an denen computerbasierte Prüfungen stattfinden, gibt es die Möglichkeit, den ganzen Prüfungsprozess durch Menschen zu kontrollieren, z.B. in Papierform. Außerdem fehlt oft der rechtliche und organisatorische Hintergrund.

Zurzeit sind folgende geschlossene Fragetypen verbreitet:

  • Multiple-Choice
  • Single-Choice
  • Wahr-Falsch
  • Zuordnung
  • Rang-/Reihenfolge

Die halbgeschlossenen Fragen können auch automatisch ausgewertet werden, jedoch darf die Antwort nur aus einen vorgegeben, begrenzte Anzahl von Wörtern bestehen. Bei Aufzählungen in der Antwort muss man zusätzliche Anweisungen geben, z.B. „nur in alphabetische Reihenfolge“ oder „keine Wiederholung“, um die Eindeutigkeit der Antwort zu gewährleisten.

Zu den halbgeschlossenen Fragen gehören: Kurztext, Lückentext, Hotspot und alle andere Fragenformen, beim denen man etwas eintippen muss.

Offene Fragen können in der Regel nicht automatisch ausgewertet werden. Als Alternative werden Musterlösungen dargestellt, welche man nach einer bestimmten Zeit, auf Knopfduck oder nach der Abgabe der eigenen Antwort zum Vergleich sehen kann.

Der Vorteil ist hier, dass die Frage nicht extra in eine geschlossene umformuliert werden muss und die Studierenden beim Antworten in Struktur und Form frei sind, wodurch sie unter Umständen ihre Kenntnisse besser darstellen können. Die Bewertung ist aber nur durch eine Person und nicht durch Computer realisierbar. Die Menschen sind immer subjektiv.

Die offene Aufgabenform ist vielseitig. Hier sind einige Beispiele: Freitextaufgabe, Zeichnungsaufgabe, Begründungsaufgabe, Problemaufgabe und Offene Situation.

Selbsttests mit quiz.js

Mit der quiz.js Erweiterung zum eLearn.js Projekt sind folgende Fragetypen relisierbar:

Bei allen Fragetypen kann die eigene Antwort mit einer Musterlösung verglichen werden. Zudem können die geschlossenen Fragen automatisch ausgewertet werden, z.B. durch eine Anzeige von "Richtig" oder "Falsch". Die abgegebene Antwort und die Musterlösung kann an einer beliebigen Stelle vom Skript abgerufen/gezeigt, wieder geschlossen und zurückgesetzt werden.

Technische Grundlage

Im folgenden werden HTML Elemente immer wieder abgekürzt beschrieben. Dabei handelt es sich um die CSS Schreibweisen zur Spezifikation von Elementen. CSS ist eine Sprache, um das Aussehen der angezeigten Seite zu definieren. Wie man mit CSS das Aussehen verändert wird im Abschnitt Veränderte Darstellung (CSS) noch grundsätzlich erklärt. Elemente wie <div> werden dabei einfach nur div genannt. Die Klassen der Elemente werden jeweils mit einem einzelnen Punkt begonnen. div.eins würde also z.B. <div class="eins"> entsprechen. Das Feld id wird mit einem einzelnen # begonnen. div#eins würde also z.B. <div id="eins"> entsprechen. Diese Teile lassen sich beliebig oft aneinander hängen.

Manuell Quizelemente in HTML schreiben

Durch die Erweiterungen in quiz.js Version 0.3.0 wurde viele Quiztypen hinzugefügt. Da der OSAEditor diese nicht unterstützt, lohnt sich eine manuelle Erstellung der Elelemente im Quelltext.

Um dies zu vereinfachen folgen detaillierte Beispiele. Zusätzliche Beispiele, mit Quelltext Kommentaren sind in der "quizJS_examples.html" zu finden. Ansehen kann man sich diese hier: Link

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 "antwort" -->
<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:

Frage 1:
Freitext Frage

693da517cf61c81742ef090221bfd5d6

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.


    <!-- Verschlüsselt ist hier das Wort "antwort" -->
    <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.

Einzelne Fragetypen

Seit der quiz.js Version 0.3.0, welche ergänzend zur eLearn.js Version 0.9 entwickelt wurde, gibt es mehr Fragetypen. Hier werden die einzelnen Typen in ihrer Funktionsweise und Verwendung erklärt.

Kurzantworten: short_text

Beispiel:

Frage 1:
Gib das Wort "antwort" ein.

693da517cf61c81742ef090221bfd5d6

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:

Welche Unterordner werden in der Dateistruktur von digitalen Skripten erwartet?

b5ceb729a1b347aa357790e1588c88b3 1fd302a9c89fc92eead418857a7e5a07 4fc364339b2127eb81c13ab986a27085

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?
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, das es sich um einen offenen Fragetypen handelt. Dieser Typ ist also nur für Aufgaben mit Selbstkontrolle geeignet.

Ein Beispiel für eine Freitextfrage:

Welche Unterordner werden in der Dateistruktur von digitalen Skripten erwartet?

Bei digitalen Skripten könnten viele verschiedene Ordner angelegt werden. Welche davon sind aber wirklich wichtig und werden generell erwartet?

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:

Fülle die Lücken im Text wie oben beschrieben!

Hier wäre ein langer Text mit und diese müssen werden.
6497dcbced26ee0f510bf82de5234653 2c8b2465235308f69defd8ae2e46cdd3

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:

Fülle die Lücken im Text wie oben beschrieben!

Hier wäre ein langer Text mit und diese müssen werden.
6497dcbced26ee0f510bf82de5234653 2c8b2465235308f69defd8ae2e46cdd3

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:

Streiche falsche Wörter

In Deutschland gibt es die Flüsse , , und .
54b851fdfcb598592d15214f24c6fdc7 14c5492ce2fe855f408481fdbd13f7a6

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:

Wähle aus, ob die Aussagen richtig oder falsch sind

Aufgabe Wahr Falsch
Ein Elefant ist grau.
Lügen haben lange Beine.
c90c13507fc364353401f4e04939a619 8042c2ef76e94fb1b546ec621c46c769

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="antwort">Wahr</th>
            <th id="falsch" class="antwort">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.antwort 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.antwort steht nun der Text der angezeigt wird. Möchte man eine größere Auswahl an Antwortmöglichkeiten haben, können weitere th.antwort 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.antwort, 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:
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.gesucht 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="gesucht"></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:

Zuordnung in Satz

Die folgenden Objekte müssen in den leeren Rechtecken platziert werden (Objekte können wieder zurückgelegt werden):
Satzbaustein
Ziel

In einer solchen Aufgabe muss dann jeweils ein
in ein zugehöriges
gezogen werden.
8a8bb7cd343aa2ad99b7d762030857a2 edbab45572c72a5d9440b40bcc0500c0

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:

Sortieren

Die folgenden Objekte müssen in die korrekte Reihenfolge gebracht werden (zwischen einzelnen Objekten könnte die Reihenfolge egal sein):

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

Gert
Karl
Heinrich
Otto
cfcd208495d565ef66e7dff9f98764da c81e728d9d4c2f636f067f89cc14862c c4ca4238a0b923820dcc509a6f75849b c4ca4238a0b923820dcc509a6f75849b

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:

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="gesucht"></span>

Beispiel:
Markiere die Plätze an denen mindestens eine Marke
vorhanden ist, wenn Transition
<b><span class="gesucht"></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_aufgabe">
    <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:

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.

Erweiterbarkeit der normalen Funktion

Die einzelnen Elemente können in ihrer Funktionalität erweitert werden. Welche Funktionen möglich sind, wird im folgenden Bereich erklärt.

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 unbewertet 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 unbewertet hinzugefügt. Das ganze sieht dann zum Beispiel so aus:

<div class="question unbewertet" 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:

Wähle aus, ob die Aussagen wahr oder falsch sind

Aufgabe Wahr Falsch
Ein Elefant ist grau.
Lügen haben lange Beine.

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:

Welche Unterordner werden in der Dateistruktur von digitalen Skripten erwartet?

Bei digitalen Skripten könnten viele verschiedene Ordner angelegt werden. Welche davon sind aber wirklich wichtig und werden generell erwartet?

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:

Sortieren

Die folgenden Objekte müssen in die korrekte Reihenfolge gebracht werden (zwischen einzelnen Objekten könnte die Reihenfolge egal sein):

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

Gert
Karl
Heinrich
Otto
cfcd208495d565ef66e7dff9f98764da c81e728d9d4c2f636f067f89cc14862c c4ca4238a0b923820dcc509a6f75849b c4ca4238a0b923820dcc509a6f75849b

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.

Erstellung mit dem OSAEditor (v0.2.04)

Der OSAEditor ist dafür gedacht, genau solch ein Quiz zu generieren und bietet so mehr Komfort bei der Erstellung der Fragen. Außerdem lassen sich damit leichter zufällig generierte Antworten (Zahlen) einbauen. Das Einbauen kann auf verschiedene Arten passieren. Empfohlen wird die JQuery Variante.

Der OSAEditor v0.2.04 unterstützt die neuen Fragetypen nicht. Unterstützt werden dort nur short_text und choice, da er mit der älteren Version 0.2.1 des quiz.js arbeitet. Auch die Darstellung kann damit anders sein.

Einbinden als iFrame

Eine andere Möglichkeit ein ganzes Quiz mit Ergebnisseite einzubinden ist ein iFrame. So kann man ganz einfach den kompletten exportierten Ordner des Programms auf der Seite einbinden oder großartig den Quelltext zu verändern. Der Nachteil hierbei ist, dass der iFrame eine feste Größe hat. So kann es sein, dass man in dem kleinen Block scrollen muss. Hier muss man sich überlegen, ob sich dieses Scrollen sinnvoll in die Seite integrieren lässt.

Einbinden per JQuery

Mit Ausgaben der neusten Version des OSAEditors ist es möglich diese einzubinden ohne Probleme bei der Darstellung oder Funktion.

Die einfachste Möglichkeit ist per JavaScript. Man kopiert die exportierten Dateien in den Ordner der Seite in die es eingebunden werden soll. Neben der beispiel.html (hier soll das Quiz eingebunden werden) liegt also jetzt der Ordner data und die Datei quiz.html.

Zunächst muss in der quiz.html folgender code entfernt werden:

<script type="text/javascript">
$(document).ready(function() {
    var qs = new QuizScript(".quiz-wrapper");
    qs.initQuiz();
});
</script>

Es kann der komplette script Block gelöscht werden. Dieser Bereich ist nur dafür gedacht, falls das Quiz alleine und nicht eingebunden verwendet wird. (Sonderfall)

Benötigt wird dann ein div auf der Seite beispiel.html welches z.B. so aussieht:

<div class="frame">
    <!-- Quiz Frame -->
    <div id="loading">
        Lädt...
    </div>
    <div id="quiz-frame"></div>
</div>

Das eigentliche einbinden passiert dann durch ein script Block im header:

<script type="text/javascript">
    $(document).ready(function() {
        $("#quiz-frame").load("quiz.html", function() {
            $('#loading').hide();
            var quizScript = new QuizScript("#quiz-frame");
            quizScript.initQuiz();
        });
    });
</script>

Es ist zu beachten, dass das #quiz-frame in den Klammern hinter new QuizScript(...) genau so sein muss wie die id des Containers in den das Quiz geladen wird. Man kann die id ändern (z.B. durchnummerieren), dann muss sie aber an den 3 Stellen gleich sein.

Wichtig ist, dass für jedes Quiz, welches man einbinden möchte, diese Blöcke unterschiedliche id Werte haben. Denn sonst führt es zu fehlern. Man kann die hier als Code angegebenen Blöcke einfach mehrfach kopieren und an das #quiz-frame jeweils eine Nummer hängen. (Es muss jeweils an 3 Stellen geändert werden.)

Es wird also so lange ein einfaches Lädt... auf der Seite angezeigt, bis das Quiz vollständig geladen ist.

Zusatz

Dieser JQuery load Befehl macht nicht anderes, als den kompletten Code der quiz.html in das DIV zu kopieren. Möchte man also auf JQuery verzichten, kann man auch per Hand die Script und Style Dateien aus dem head der quiz.html kopieren und anschließend den gesamten body in das gewünschte div.