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.
- 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.
- 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; }
- 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).
- 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.
document.all.frage.innerHTML = aufgaben[aktuell][1];
Auch mit Mozilla / Firefox verwendbar:
document.getElementById("frage").innerHTML = aufgaben[aktuell][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.
- Implementieren Sie abschließend nun die Auswertung.
(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.