Projekt WebSite im GK Informatik der Stufe 13:

Übung 3: Dynamisches HTML mit JavaScript (Multiple-Choice)

Aufgabe:

Bereits in Übung 1 (DHTML am Beipiel Nikitin-Würfel) und Übung 2 (Schiebe-Puzzle) wurden Webseiten dynamisch verändert. Dies soll nun vertieft werden.
Als Vorbereitung für die Abiturprüfung können Multiple-Choice-Tests eine gute Lernhilfe sein. Hier werden Fragestellungen und verschiedene Antwortmöglichkeiten vorgegeben. Der Benutzer muss sich für die richtige(n) Antwort(en) entscheiden. Zum Abschluss einer Testsequenz werden die erreichten Leistungen ausgewertet und angezeigt. Alternativ kann auch eine Art Persönlichkeitstest erzeugt werden.
Die Umsetzung soll in JavaScript (oder in Ausnahmefällen auch in Delphi) erfolgen. Sämtliche Formatierungen sind in CSS-Dateien auszulagern, alle JavaScript-Funktionen und die Inhalte der Aufgaben sind in JS-Dateien auszulagern. Dies schützt zwar nicht die dort hinterlegten Angaben zur korrekten Beantwortung, erschwert aber zumindest die unmittelbare Einsicht (mittels Ansicht/Quelltext). Die Realisierung sollte so universell sein, dass auch Ungeübte auf einfache Weise zu beliebigen Unterrichtsfächern selbst Multiple-Choice-Aufgaben entwickeln können, die das WebTeam dann veröffentlicht.

  1. Erstellen Sie ein Dokument test.htm, das im Kopf eine CSS-Datei css/test.css und eine JavaScript-Datei js/test.js sowie eine Aufgabendatei (z. B. js/mc-test-m1.js für einen Mathematiktest) referenziert. Im Körper sollen die notwendigen, benannten Tags (ID oder NAME) ohne Inhalte und ansonsten ausschließlich der JavaScript-Aufruf init(); stehen.


Beispieldatei als Einstiegshilfe

  1. In der CSS-Datei css/test.css ergänzen Sie nach und nach die benötigten Formatierungen für alle dargestellten Objekte. Verwenden Sie für alle Objekte jeweils geeignete Klassenbezeichnungen (siehe Beispiele rechts).
    ALLE Formatierungsbeschreibungen sollen HIER vorgenommen werden!

td.antw { background-color:teal; align:left; valign:middle;
}
p.fuss { align:center; font-size:8px; font-weight:bolder; color:red; }

  1. Das Füllen der vorbereiteten Tags im Körper der HTML-Seite test.htm sollen die Funktionen init() und next() der JavaScript-Datei js/test.js übernehmen.
    Beginnen Sie damit, Header (h1 für den Titel, h3 für die Frage), in einem p-Tag die Anzeige der Fragenummer (hierzu kann das <span>-Tag sehr hilfreich sein), eine Tabelle und die Zellen (für die Antwortvorschläge) darin darzustellen (in die Zellen innerhalb eines p-Tag anfangs Dummytexte eintragen). Deklarieren Sie auch ein globales Array aufgaben, in das zu allen Aufgaben-Items die zur Darstellung und Auswertung notwendigen Angaben einzutragen sind.
    Buttons (z. B. zur Anzeige der nächsten Frage) sind ebenfalls notwendig.

Implementieren Sie während der Entwicklung Testmeldungen:
 
Nutzen Sie Debug-Werkzeuge wie den Script-Debugger von Microsoft (MSE bzw. MSE7).

  1. Widmen Sie sich nun dem Problem, anfangs die Angaben zur ersten Aufgabe in die Tags einzublenden. Implementieren Sie dazu hilfsweise zu Anfang einen Init-Button.
Nur mit dem MS-IExplorer verwendbar:
document.all.frage.innerHTML = aufgaben[aktuell][1];
Auch mit Mozilla / Firefox verwendbar:
document.getElementById("frage").innerHTML = aufgaben[aktuell][1];
  1. Als nächstes soll das Problem bearbeitet werden, die Inhalte der weiteren Aufgaben auf Knopfdruck anzuzeigen. Nach der letzten Frage sollte dann die Auswertung gestartet werden.
    Als weiteres Problem muss gelöst werden, dass ja nicht nur Tag-Inhalte, sondern auch Formular-Objekte (Input-Tags) gefüllt werden müssen. Denkbar sind hier verschiedene Lösungen: Objekte bereits im HTML-Formular anlegen und später füllen (dann muss dafür gesorgt werden, dass nicht benötigte Objekte unsichtbar sind), oder die Objekte bei Bedarf erzeugen (dann müssen sie im Formular bekannt gegeben werden).

Eine weitere Möglichkeit ist, in einem FrameSet für jede Aufgabe eines der Frames völlig neu aufzubauen.

Für die Auswertung ist es unbedingt wichtig, die bisherigen Ergebnisse clientseitig weiterzugeben. Das kann dann im Parent des Aufgabenframes geschehen.

  1. Implementieren Sie abschließend nun die Auswertung.
 
Hilfreiche JavaScript-Schnipsel:
(vgl. auch Einführung in DHTML bei SelfHTML)

 

hilf.push (new Boolean (false));

Fügt dem Array hilf ein weiteres Element mit Wert false zu.

document.writeln ( ... );

Schreibt eine HTML-Zeile in das aktuelle Dokument.

aufgaben[aufgaben.length]=item;

Hängt an das Array aufgaben ein weiteres Aufgaben-Item (z. B. ein Array) an.

© 2005 Ziemke .:. Letzte Aktualisierung am 29. Januar 2005 durch den WebMaster.