Wie programmiert man ein Quiz mit Javascript?

Ich möchte gerne ein kleines Programm mit Javascript programmieren.
Es sollte ein kleines Quiz werden.
Das heißt es soll eine Frage gestellt werden und 3 Antwortmöglichkeiten (A,B,C) geben.
Am Ende sollte es eine Anzeige geben wie viele Antworten richtig beantwortet wurden.

Ich habe leider keine Ahnung wie ich das anfangen soll.
Könntet ihr mir vielleicht einige Tipps geben?
Danke im vorraus

Moin Schmetterling,

Ich möchte gerne ein kleines Programm mit Javascript
programmieren.

Deine Aufgabe ist, wenn Du gar keine Ahnung hast, schon ziemlich kompliziert. Du
kannst bei de.selfhtml.org alles erfahren, was Du brauchst, musst Dich aber auf
einiges Lernen gefasst machen. Ansonsten google doch mal nach „Quiz Generator“
oder so.

– D.

das mit den Quiz ist nicht allzu schwer.

was ich vorher wissen muss, ist wie sieht deine Serverumgebung aus.
hast du PHP, Java, JSP, MySQL,… zur Verfügung?
Warum ich das Frage ist, durch deine Serverumgebung kann man dieses Quiz unterschiedlich elegant umsetzen. Mit reinen Javascript wäre es auch möglich, aber ohne großen Aufwand, würde dort keine elegante Lösung raus kommen.

Hallo cooler-butterfly,

sinnvollerweise gar nicht, da JS clientseitig ausgeführt wird. Es könnte also jeder einfach in den Quelltext schauen und dort die richtige Antwort entnehmen. Wenn es trotzdem nur Javascript (also nicht AJAX) sein soll, dann sollten Fragen und Antworten verschlüsselt gespeichert sein - damit das Mogeln schwerer fällt - und vom Skript entsprechend entschlüsselt werden.

Besser ist eine serverseitige Implementierung, bei der dem Kandidaten (Client) die Fragen dargestellt werden und dessen Antwort zwecks Auswertung an einen Server (kann auch lokal aufgesetzt sein) zurückgeschickt werden. Für die serverseitige Auswertung bieten sich gängigerweise PHP oder Perl an. Die Visualisierung der Fragen und das Ergebnis der Auswertung kann dann wieder über HTML / JS (AJAX) erfolgen.

Zum Quiz selbst:
Es ist sinnvoll sich zunächst mit Papier, Bleistift und Radiergummi Gedanken zu machen, wie das Quiz ablaufen soll:
Welche Akteure gibt es?
Was kann jeder einzelne Akteur?
Was passiert, wenn der Akteur eine Aktion durchführt?
Was wird und an welcher Stelle wird es angezeigt?
Wie werden die Daten (Fragen und dazugehörende Antworten) gespeichert?
Ist eine einmal abgegebene Antwort verbindlich oder kann der Kandidat seine Antwort noch einmal ändern?
uvm.

Idealerweise trennt man die Oberfläche (View) von der Logik (Controller) und den Daten (Model). Die Oberfläche macht nichts weiter als die ihr zugewiesenen Daten anzuzeigen. Das Model speichert die Daten lediglich. Die Logik verbindet beide und stellt damit die Schnittstelle dar. Hier wird z. B. ermittelt, welche Frage anzuzeigen ist, ob eine abgegebene Antwort korrekt oder falsch ist, was in Abhängigkeit der Korrektheit der Antwort als nächstes zu tun ist, usw.

Das Programmieren ist jetzt nur noch stupides Umsetzen dessen, das man sich soeben mit Papier, Bleistift und Radiergummi überlegt hat. Dafür gibt es ausreichend Dokumentationen und Referenzen im WWW. Für PHP z. B. www.php.net oder für HTML selfhtml.org.

Viel Erfolg und Grüße
gelignite

Nunja so wunderschön muss es am Ende nicht aussehen.
Muss nur ein kleines Programm sein, welches ein paar kurze Fragen/Antowrten beinhaltet.

Imho macht es wenig Sinn ein Quiz mit reinem Javascript zu realisieren, da der Quellcode, wenn nicht gepackt/verschlüsselt, offen einsehbar ist und somit ja die Lösungen ja einsehbar wären. Wenn Schummler kein Problem darstellen gibt es die Möglichkeit eine XML-Datei zu erstellen, welche die Fragen und Antwortmöglichkeiten sowie die richtige Lösung beinhaltet und diese dann per XMLHttpRequest per Javascript einliest und die Daten dann verarbeitet (parsen, darstellen, Auswertung der eingegebenen Antworten erstellen…). Funktioniert nur sofern Datei per Url erreichbar ist (auf einem Webserver) und nicht, wenn das Quiz nur lokal ausgeführt werden soll, da müsste man dann die Daten unschöner z.B. in Arrays innerhalb des Scripts speichern.

Bsp Aufbau der XML Datei:

Antworttext1Antworttext2Antworttext3

Die aber wohl beste Lösung (wenn Quiz online) ist eine serverseitige Sprache (z.B. PHP) mit einer Datenbank im Hintergrund in der die Daten für das Quiz gespeichert werden. Die vom User eingegebenen Antworten kann man dann in einer Session-Variable zwischenspeichern und am Ende mithilfe der Daten in der Datenbank auswerten.

Noch eine weitere Möglichkeit wäre u. U. auch ein Java-Applet.

Wenn das Quiz lokal laufen soll und nicht zwingend in einem Browser, dann würde ich aber eher zu einer .NET Applikation mit lokaler Datenbank o.ä. tendieren.

Schau doch mal hier:
http://www.s.shuttle.de/s/emg/InformatikAG/Quiztext.pdf

@LapPro das mag zwar ein Beispiel für einen Ansatz eines Quiz mit Javascript sein, aber es ist alles andere als best practice was dort beschrieben wird und alles in allem würde ich eine solche Anleitung nicht empfehlen… naja, jedem das seine, auch wenn ich der Meinung bin, dass man es, wenn man sich schon die Mühe macht so etwas zu schreiben, wenigstens „richtig“ machen sollte :wink:

Hallo cooler-butterfly,

ich kenne ja den Hintergrund der Idee nicht.
Alternativ würde ich vorschlagen:
Man nehme ein existierendes Quiz, es gibt auch welche als Freeware, wir haben ein preiswertes für Schulaufgaben. Es gibt immer 4 Antwortmöglichkeiten und Kategorien.
Man kann selbst Kategorien neu erstellen und auch Fragen und die dazugehörigen Abtworten. Alles mit Punkten usw.

Vielleicht ist das schneller und einfacher, als es selbst zu programmieren.

Falls du es doch selbst tun willst, kann ich dir nicht viel helfen, weil ich mit den dynamischen Sachen nicht viel mache. Ich fand es immer sehr kompliziert und greife auf fertig programmierte Blöcke zurück.

MFG
sansee74