Quiz-Script Framework

Dieses JavaScript-Framework habe ich im Rahmen meiner Arbeiten am PG-CMS, einem CMS für Schulwebsites entwickelt. Mit ihm ist es möglich, auf einfachste Art und Weise interaktive Lernaufgaben auf Webseiten zu entwerfen. Dabei ist es im Prinzip zu jedem CMS kompatibel, das es erlaubt, JavaScripte einzubetten.

Seit Version 1.6 ist das Script-Framework auch mit einer Wiki-Software kompatibel.

Demo

Das Script kann auf meiner Demo-Seite ausprobiert werden.

Inzwischen sind Rückmeldungen bei mir eingegangen, dass dieses Quiz-Framework auf anderen Seiten erfolgreiche Anwendung gefunden hat.

Im ZUM Wiki, dem Wiki der Zentrale für Unterrichtsmedien im Internet e.V., kann man seit der Version 1.6 Übungsaufgaben erstellen.

Frau Döding (schreibt bisher sämtliche Quelltexte von Hand) setzt es auf der Website der Theodorschule (eine Grundschule) ein. Hier eine Auswahl:

Herr Hohmann (nutzt WebsiteBaker) hat auf seiner Seite folgende Quiz-Seiten erstellt:

Version

Aktuelle Version: 2.5 (2012/03/18) - quiz_v2.5.zip (141 KB)

Das Script steht unter der GNU Lesser General Public License (LGPL).

Letzte Änderungen sind hier: Changes

Features

Dieses JavaScript-Framework kann zur Zeit Quizze in zehn verschiedenen Arten generieren:

  1. Zuordnungs-Quiz (paarweise; mit Drag&Drop)
  2. Zuordnungs-Quiz (gruppenweise; mit Drag&Drop)
  3. Lückentext-Quiz (sowohl mit Drag&Drop als auch mit Eingabefeldern)
  4. Bilderpuzzle (basierend auf dem Lückentext-Quiz)
  5. Memo-Quiz
  6. Multiple-Choice-Quiz
  7. Schüttelrätsel-Quiz (buchstabenweise; mit Eingabefeldern)
  8. Kreuzworträtsel
  9. Suchsel
  10. Buchstabenraten (Hangman)

Seit Version 0.4 lassen sich die Quizze auch für ein Lösen auf Papier sinnvoll aus dem Browser heraus ausdrucken.

Seit Version 0.6 ist das Script in seinen Ausgaben mehrsprachenfähig. Momentan werden sechs Sprachen unterstützt:

  1. Deutsch (Demo)
  2. Englisch (Demo)
  3. Französisch
  4. Italienisch
  5. Latein
  6. Spanisch
  7. Polnisch

Integration

Soll das Framework auf CMS-verwalteten Seiten zum Einsatz kommen, so muss auch dort letzten Endes die JavaScript-Datei in das jeweilige HTML-Dokument eingebunden werden, damit der Mechanismus greifen kann.

Script-Datei einbinden

Im Dokument muss an irgendeiner Stelle (bevorzugterweise im Kopfbereich) das Script auf herkömmliche Weise eingebunden werden.

<script src="{pfad}/quiz/quiz.js" type="text/javascript"> </script>

Arbeitsweise des Scripts

Nach dem Einbinden initialisiert sich das Script beim Laden der Seite automatisch und durchforstet das HTML-Dokument. Dabei reagiert es auf spezielle Klassennamen und sucht in solcherart ausgezeichneten Elementen nach bestimmten Strukturen (wie z.B. einer Tabelle oder fett formatierten Textabschnitten in Absätzen), um diese in interaktive Quizze umzuwandeln. Ein Beispiel:

<div class="lueckentext-quiz">
<p>Das <strong>Internet (weltweites Computernetz)</strong> weiß alles.</p>
</div>

Der blau markierte Teil wird als Quiz erkannt, und zwar als Lückentext-Quiz (siehe Klassennamen). Der darin fett markierte Teil des Absatzes wird als Quiz-Daten erkannt. Der Teil in Klammern wird als Lösungshinweis verstanden, der Teil außerhalb der Klammern als die tatsächliche Lösung. Das sieht dann so aus:

Das (weltweites Computernetz) weiß alles.

Andere Quiz-Arten werden auf ähnlich simple Art realisiert. Näheres steht in den Kommentaren im Script, oder demnächst in den Anleitungen des PG-CMS, auf die dann hier ein Link zu finden sein wird.

Anzeigen der Lösungen beim Laden verhindern

Damit beim Ladevorgang die Lösungen nicht sichtbar werden, muss auf der Seite (besser noch global) eine seit Version 0.4 enthaltene CSS-Datei mit eingebunden werden, welche die DIV-Elemente mit den Quizzen versteckt. Das geht so:

<link rel="stylesheet" media="all" href="{pfad}/quiz/css/anzeige-blocker.css" />

Hier Im Beispiel steht "(pfad)", was im Einzelfall natürlich jedesmal durch den korrekten Pfad zum Quiz-Ordner ersetzt werden muss.

Sonstiges

Warum sollte man solch ein Script entwickeln, wenn es schon sehr leistungsstarke und nützliche Alternativen wie z.B. Hotpotatoes von Halfbaked Software gibt? Der Grund ist schnell erklärt: Die mit dieser Software hergestellten Dokumente lassen sich nur schwer in eine Website einpflegen, wenn diese mit einem CMS verwaltet wird. Ausserdem müssen Benutzer eine Desktop-Software einsetzen, um die HTML-Dokumente zu erstellen, welche dann in einem weiteren Schritt auf die Webseite hochgeladen werden müssen, anstatt dass die Benutzer in dem von der CMS-Software bereitgestellten Seiten-Editor (meist sogar mit WYSIWYG) die Aufgabe(n!) direkt auf der Webseite entwerfen.

Ich freue mich, wenn mein Script für jemanden nützlich ist. Daher sind E-Mails diesbezüglich immer willkommen. Auch für Verbesserungsvorschläge habe ich ein offenes Ohr, da ich auch ständig dazulerne und meine Scripte gerne besser und sicherer mache.