Ein Quiz mit JavaSkipt

In diesem Workshop werde ich euch zeigen, wie man ein Quiz für eine Homepage erstellen kann

Inhaltsverzeichnis
1... Neues Quiz
2... Die Fragen
3... Der Auswert- und Löschbutton
4... Einstellung
5... Das Ergebnis
6... Beispielcode für ein Quiz

1: <<< Neues Quiz >>>

Damit der Browser erkennt, dass es sich um ein Quiz handelt, beginne das Quiz mit folgendem Code:

Dann geht es bei Schritt 2 mit den Fragen weiter.

2: <<< Die Fragen >>>

Das Quiz kann auf beliebig viele Fragen erweitert werden. Füge für jede Frage folgenden Code ein:

<DT>
<DIV align=left>Deine Frage</DIV>
<DT>
<DIV align=left>  <INPUT onclick=one() type=radio name=frage1>Antwort 1</FONT></DIV>
<DT>
<DIV align=left>  <INPUT onclick=oneX() type=radio name=frage1>Antwort 2</FONT></DIV>
<DT>
<DIV align=left>  <INPUT onclick=oneX() type=radio name=frage1>Antwort 3</FONT></DIV>

Die Antwortzahl kann beliebig erweitert werden. Die richtige Antwort wird mit one() bezeichnet. Alle falschen Antworten mit oneX()

Wenn du jetzt eine zweite,dritte,vierte,... Frage einfügen willst, füge den gleichen Code nocheinmal ein nur anstatt dem one musst du two,three,... einfügen und anstatt frage1 dann frage2,frage3,frage4,...

Hast du alle deine Fragen erstellt, geht es weiter zu Schritt 3.

3: <<< Der Auswert- und Löschbutton >>>

Nur fehlt noch der Auswert- und Löschbutton. Füge dazu einfach unter den Fragen folgenden Code ein:

4: <<< Einstellung >>>

Jetzt kommt der JavaScript Code, damit das Quiz auch funktioniert. Folgenden Code könnt ihr erst mal übernehmen und unter den bisherigen Code einfügen:

function SymError()
{
return true;
}
window.onerror = SymError;
var SymRealWinOpen = window.open;
function SymWinOpen(url, name, attributes)
{
return (new Object());
}
window.open = SymWinOpen;

</SCRIPT>

Beim folgenden Code musst du so die Reihe a,b,c,... so oft fortsetzen, wie viele Fragen du hast. Füge ihn dann einfach darunter ein.

<SCRIPT language=JavaScript>
var a = 0
var b = 0
var c = 0
...
tot = 0

Füge dann darunter folgenden Code ein. Auch diese Reihe muss für die Anzahl der Fragen vorgesetzt werden:

function one() { a=1 }
function two() { b=1 }
function three() { c=1 }
...

Füge danach diesen Code ein. Setze ihn wieder passend fort:

function oneX() { a=0 }
function twoX() { b=0 }
function threeX() { c=0 }
...

Füge danach diesen Code ein. Setze die Reihe a,b,c,.. auch sooft fort, wie viele Fragen du hast:

function compute(form) {

tot = (a + b + c + ...)

5: <<< Das Ergebnis >>>

Nun muss noch das Ergebnis angezeigt werden. Dies machen wir mit einem Fenster, dass sich öffnet. Darin wird angezeigt, wie viele Fragen man richtig hat. Beginnen wir bei 0 Antworten richtig:

if (tot == 0)

{confirm("Du hast 0 Antworten richtig");

location="http://www.ADRESSE.de"}

Bei ADRESSE musst du die Adresse angeben, zu der man weitergeleitet wird, wenn man auf das Fenster mit dem Ergebnis schließt.
Bei der 0 musst du dann jeweil die Anzahl der richtig beantworteten Fragen eingeben.

Diesen Code musst du für jede Anzahl der richtigen Antwortenanzahl erstellen, d.h. mit 1, 2, 3,... so weit, wie viele Fragen du hast.

Hast du alle Ergebnisse eingefügt, schließe den ganzen Code mit diesem Code ab:

}
</SCRIPT>

6: <<< Beispielcode für ein Quiz >>>

Um nocheinmal Überblick zu verschaffen, habe ich ein Beispielquiz mit 5 Fragen erstellt:

<FORM method=post>
<DT>
<DIV align=left>Frage 1</DIV>
<DT>
<DIV align=left>  <INPUT onclick=one() type=radio name=frage1>Richtige Antwort</FONT></DIV>
<DT>
<DIV align=left>  <INPUT onclick=oneX() type=radio name=frage1>Falsche Antwort</FONT></DIV>
<DT>
<DIV align=left>  <INPUT onclick=oneX() type=radio name=frage1>Falsche Antwort</FONT></DIV>
<DT>
<DIV> </DIV>
<DIV align=left>Frage 2</DIV>
<DT>
<DIV align=left>  <INPUT onclick=twoX() type=radio name=frage2>Falsche Antwort</FONT></DIV>
<DT>
<DIV align=left>  <INPUT onclick=two() type=radio name=frage2>Richtige Antwort</FONT></DIV>
<DT>
<DIV> </DIV>
<DIV align=left>Frage 3</DIV>
<DT>
<DIV align=left>  <INPUT onclick=threeX() type=radio name=frage3>Falsche Antwort</FONT></DIV>
<DT>
<DIV align=left>  <INPUT onclick=threeX() type=radio name=frage3>Falsche Antwort</FONT></DIV>
<DT>
<DIV align=left>  <INPUT onclick=three() type=radio name=frage3>Richtige Antwort</FONT></DIV>
<DT>
<DIV align=left>  <INPUT onclick=threeX() type=radio name=frage3>Falsche Antwort</FONT></DIV>
<DT>
<DIV> </DIV>
<DIV align=left>Frage 4</DIV>
<DT>
<DIV align=left>  <INPUT onclick=fourX() type=radio name=frage4>Falsche Antwort</FONT></DIV>
<DT>
<DIV align=left>  <INPUT onclick=fourX() type=radio name=frage4>Falsche Antwort</FONT></DIV>
<DT>
<DIV align=left>  <INPUT onclick=four() type=radio name=frage4>Richtige Antwort</FONT></DIV>
<DT>
<DIV> </DIV>
<DIV align=left>Frage 5</DIV>
<DT>
<DIV align=left>  <INPUT onclick=fiveX() type=radio name=frage5>Falsche Antwort</FONT></DIV>
<DT>
<DIV align=left>  <INPUT onclick=five() type=radio name=frage5>Richtige Antwort</FONT></DIV>
<DIV> </DIV>
<DIV align=left><INPUT onclick=compute(form) type=reset value=Auswerten name=auswerten sname="Submit"><INPUT type=reset value=Löschen name=reset></DIV>

function SymError()
{
return true;
}
window.onerror = SymError;
var SymRealWinOpen = window.open;
function SymWinOpen(url, name, attributes)
{
return (new Object());
}
window.open = SymWinOpen;

</SCRIPT>

<SCRIPT language=JavaScript>
var a = 0
var b = 0
var c = 0
var d = 0
var e = 0
tot = 0

function one() { a=1 }
function two() { b=1 }
function three() { c=1 }
function four() { d=1 }
function five() { e=1 }

function oneX() { a=0 }
function twoX() { b=0 }
function threeX() { c=0 }
function fourX() { d=0 }
function fiveX() { e=0 }

function compute(form) {

tot = (a + b + c + d + e)

if (tot == 0)

{confirm("Du hast 0 Antworten richtig");