134. Zum Neuen Jahr 2013: ein simpler Quiz- oder multiple-choice-Generator

134. Zum Neuen Jahr 2013: ein simpler Quiz- oder multiple-choice-Generator

Einleitung

Sie suchen einen einfachen Quiz- oder Multiple-Choice-Generator? Dann sind Sie hier genau richtig! Voraussetzung ist lediglich ein Windowsbetriebssystem (getestet unter Windows 7) und ein Browser.

Der Sternenhimmelstuermer kreierte eine Batch, die als Eingabelayout VBS-Input-Fenster verwendet (die VB-Scripte werden von der Batch erstellt, gestartet und hinterher entmüllt).

Das Endprodukt erstellen Sie dann in zwei Eingabefenstern für eine Frage und eine beliebige Zahl von richtigen oder falschen Antworten.

Die Fragenanzahl ist unbegrenzt und nach jedem Durchlauf von einer Frage und der von Ihnen festgelegten Anzahl von Antworten können Sie eine weitere Frage hinzufügen, um Am Ende das fertige Endprodukt in HTML und Javascript auszugeben.

Das fertige Quiz können Sie dann in in einem beliebigen Browser (Internet Explorer, Chrome, Firefox) spielen oder in ihre Homepage einbinden.

Es werden Checkboxen verwendet, d. h. Sie können Häkchen bei richtigen Antworten setzen.

Die Endauswertung wird durch einen Antwort Button gestartet. Bei jeder richtigen Antwort gibt es einen Pluspunkt und bei jeder falschen Antwort einen Minuspunkt. Ja, Sie können auch in die Miesen abrutschen - manchmal ist Schweigen bzw. kein Häkchen zu setzen auch Gold...

Zusätzlich wird bei jeder Antwort nach der Endauswertung ein true oder false ausgeben, was soviel wie richtig oder falsch heißt...

Der Code ist extrem flexibel und mit css können Sie dann den Rohbau weiter individualisieren.

Schauen Sie sich die Demo an. Wenn das Ihr Fall für ein simples Quiz ist, dann einfach Code kopieren und los geht es...

Sie werden einen Generator dieser Art im Internet nicht finden, aber für den Moderator dieser Webseite ist das absolut unverständlich, da dass für einen geübten Low-Level-Programmierer von Subsprachen echt nicht der Hit ist...ist fast so einfach wie der letzte Vokabeltrainer, den der Sternenhimmelstuermer schrieb...

Inhaltsangabe

Code
Beschreibung
Troubleshooting
Javascript-Code kurz erklärt
Codeerweiterung: Quiz mit farblicher Markierung als Ausgabe vom Generator am 31.12.2012
01.01.2012 final version

Code

Als erstes Erstellen Sie eine leere Textdatei in einem beliebigen Ordner, um daraus die Batchdatei zu erstellen: Rechte Maustaste auf Fensterfläche, aus dem Kontextmenü Neu - Textdokument. Dann die Datei mit Namen benennen: quiz.bat . Wichtig ist die Dateiendung *.bat. Der Name quiz.bat ist Vorschrift!

Wird ihnen die Dateiendung nicht angezeigt, so müssen Sie zuvor das Anzeigen von Dateiendungen auch bei bekannten Dateiendungen in einem beliebigen Ordner einstellen: Extras - Ordneroptionen - Registerkarte: Ansicht. Dann Häkchen bei Erweiterungen bei bekannten Dateiendungen ausblenden entfernen. Sollte auch die Menüleiste mit Extras nicht angezeigt werden, so in das Dropdownmenü von Organisieren - Layout und Menüleiste anzeigen.

Dann öffnen Sie die quiz.bat (rechte Maustaste auf quiz.bat und kopieren folgenden blauen Inhalt per Copy und Paste:

Rem CMD wird ausgeblendet und Fortsetzung nach Abbruch sichergestellt

if exist start.vbs goto anfang
echo 0 >stood1.log
FOR /F "tokens=1* delims= " %%i IN (stood1.log) DO echo %%i>stood.log
del stood1.log
set destination=%~dp0%
for %%I in (.) do echo %%~sI\quiz.bat >zyx.txt
set /p quizpfad=<zyx.txt
>"%destination%start.vbs" ECHO Set WshShell = WScript.CreateObject("WScript.Shell")
>>"%destination%start.vbs" ECHO Return = WshShell.Run("%quizpfad%", 0, True)
>>"%destination%start.vbs" ECHO Set WshShell = Nothing
start "" "start.vbs"
del zyx.txt
exit

Rem ein Schleifendurchlauf beinhaltet eine Frage und zugehoerige Antworten

Rem los geht es mit einer Frage

:anfang
>"%destination%frage.vbs" ECHO ZielDatei = "quest.txt"
>>"%destination%frage.vbs" ECHO username=InputBox ("Geben Sie eine Frage mit Semikolon und Antwortanzahl ein z. B. Frage;3","Frage","Frage;3")
>>"%destination%frage.vbs" ECHO CreateObject("Scripting.FileSystemObject").CreateTextFile(ZielDatei, True).WriteLine username
start /wait frage.vbs
FOR /F "tokens=1,2* delims=;" %%i IN (quest.txt) DO echo %%j>zhlfrg.log
FOR /F "tokens=1,2* delims=;" %%i IN (quest.txt) DO echo ^<TR^>^<TD^>%%i^</TD^>^</TR^>^<TR^>^<TD^> >>bodyjava.txt
set /p ende=<zhlfrg.log
set /a a=0

REM ab hier werden belieig viele Antworten in einer Schleife generiert

:answer
if %a% equ %ende% goto ente
set /a a=%a%+1
>"%destination%antwort.vbs" ECHO ZielDatei = "answ.txt"
>>"%destination%antwort.vbs" ECHO username=InputBox ("Geben Sie eine richtige Antwort mit Semikolon 1 und eine falsche Antwort mit Semikolon und 0 ein, z. B. Antwort;0","Antwort","Antwort;0")
>>"%destination%antwort.vbs" ECHO CreateObject("Scripting.FileSystemObject").CreateTextFile(ZielDatei, True).WriteLine username
start /wait antwort.vbs
FOR /F "tokens=1,2* delims=;" %%i IN (answ.txt) DO echo %%i>antwort.log
FOR /F "tokens=1,2* delims=;" %%i IN (answ.txt) DO echo %%j>zhlntwrt.log

Rem ab hier werden die Anworten einzeln in vier Hilfsdokumenten zusammengesetzt

Rem zuerst true und false jeder einzelnen Javascriptabfrage

set /p vergleich=<zhlntwrt.log
if %vergleich% geq 1 echo true>flschrchtg.log
if %vergleich% neq 1 echo false>flschrchtg.log
set /p antw=<flschrchtg.log
set /p stand=<stood.log

>>"%destination%checkeinzeln.txt" ECHO if (document.quizForm.q%stand%.checked)
set /a stand=%stand%+1
echo %stand% >stood1.log
FOR /F "tokens=1* delims= " %%i IN (stood1.log) DO echo %%i>stood.log
del stood1.log
>>"%destination%checkeinzeln.txt" ECHO    document.quizForm.Antwort%stand%.value = "%antw%";

Rem weiter geht es mit der allgemeinen Auszaehlung fuer die Endauswertung

set /a altstd=%stand%-1
>>"%destination%zaehlung.txt" ECHO if (document.quizForm.q%altstd%.checked)
if %vergleich% geq 1 goto right
>>"%destination%zaehlung.txt" ECHO     var scor = scor - ab;
if %vergleich% neq 1 goto weiter
: right
>>"%destination%zaehlung.txt" ECHO    var scor = scor + dazu;
:weiter

REM jetzt noch den Scriptteil vom Html in Reihenfolge erstellen

set /p answer=<antwort.log
>>"%destination%bodyjava.txt" ECHO %answer% ^<INPUT TYPE="checkbox" NAME="q%altstd%" VALUE="%antw%"^>
>>"%destination%bodyjava1.txt" ECHO ^<TD^>Antwort%stand% ^<INPUT TYPE="TEXTBOX" NAME="Antwort%stand%" VALUE="" SIZE="7"^>^</TD^>
if %a% equ %ende% goto kop
goto answer

Rem nach letzter Antwort einer Frage muss das Javascript geschlossen werden

:kop
>>"%destination%bodyjava.txt" ECHO ^</TR^>
>>"%destination%bodyjava1.txt" ECHO ^<TD^>^<TR^>
for /f "TOKENS=*" %%a in ('dir bodyjava.txt /b') do type "%%a" >> get.txt
for /f "TOKENS=*" %%a in ('dir bodyjava1.txt /b') do type "%%a" >> get.txt
del bodyjava.txt
del bodyjava1.txt
goto answer

:ente

Rem Frage nach Ende oder weiteren Durchlauf von einer Frage und beliebig vielen Antworten

>"%destination%frage.vbs" ECHO ZielDatei = "ende.log"
>>"%destination%frage.vbs" ECHO username=InputBox ("Geben Sie für eine weitere Frage WEITER kleingeschrieben, sonst ENDE kleingeschrieben ein","Fragenende","ende")
>>"%destination%frage.vbs" ECHO CreateObject("Scripting.FileSystemObject").CreateTextFile(ZielDatei, True).WriteLine username
start /wait frage.vbs
set /p further=<ende.log
If %further% equ ende goto create
if %further% equ weiter goto anfang
if %further% nqu weiter goto trouble

Rem Zusammensetzen der Webseite

:create
>"%destination%quiz.htm" ECHO ^<html^>
>>"%destination%quiz.htm" ECHO   ^<head^>
>>"%destination%quiz.htm" ECHO     ^<meta name="generator" content="HTML Studio"^>
>>"%destination%quiz.htm" ECHO     ^<title^>Quiz^</title^>
>>"%destination%quiz.htm" ECHO     ^<meta name="author" content="Sternenhimmelstuermer"^>
>>"%destination%quiz.htm" ECHO     ^<meta name="description" content="Quiz multiple Choice"^>
>>"%destination%quiz.htm" ECHO     ^<SCRIPT LANGUAGE="JavaScript"^>^<!--
>>"%destination%quiz.htm" ECHO function einzeln() {
for /f "TOKENS=*" %%a in ('dir checkeinzeln.txt /b') do type "%%a" >> quiz.htm
>>"%destination%quiz.htm" ECHO }
>>"%destination%quiz.htm" ECHO function count() {
>>"%destination%quiz.htm" ECHO var scor = 0
>>"%destination%quiz.htm" ECHO var dazu = 1
>>"%destination%quiz.htm" ECHO var ab   = 1
for /f "TOKENS=*" %%a in ('dir zaehlung.txt /b') do type "%%a" >> quiz.htm
>>"%destination%quiz.htm" ECHO document.quizForm.Antwort.value = scor
>>"%destination%quiz.htm" ECHO }
>>"%destination%quiz.htm" ECHO //--^>^</SCRIPT^>
>>"%destination%quiz.htm" ECHO    ^</head^>
>>"%destination%quiz.htm" ECHO    ^<body^>
>>"%destination%quiz.htm" ECHO   ^<center^>
>>"%destination%quiz.htm" ECHO   ^<FORM NAME="quizForm"^>
>>"%destination%quiz.htm" ECHO   ^<TABLE^>
for /f "TOKENS=*" %%a in ('dir get.txt /b') do type "%%a" >> quiz.htm
>>"%destination%quiz.htm" ECHO   ^</TABLE^>
>>"%destination%quiz.htm" ECHO ^<P^>
>>"%destination%quiz.htm" ECHO ^<INPUT TYPE="BUTTON" onClick="einzeln(),count()" VALUE="Ergebnis"^>
>>"%destination%quiz.htm" ECHO Antwort: ^<INPUT TYPE="TEXTBOX" NAME="Antwort" VALUE="" SIZE="3"^>^</P^>
>>"%destination%quiz.htm" ECHO ^</FORM^>^</center^>
>>"%destination%quiz.htm" ECHO ^</body^>
>>"%destination%quiz.htm" ECHO ^</html^>

Rem Hilfsdokumente loeschen

del answ.txt
del antwort.log
del checkeinzeln.txt
del ende.log
del flschrchtg.log
del quest.txt
del stood.log
del zaehlung.txt
del zhlfrg.log
del zhlntwrt.log
del antwort.vbs
del frage.vbs
del start.vbs
del get.txt
:trouble
exit

Beschreibung

Nachdem Sie die Batch gestartet haben (durch Doppelklick der quiz.bat), werden drei Inputfelder als Assistenten Sie schnell zum Erfolg führen:

Assistent 1

Assistent für die Frageneingabe

Quelle: Inputfenster des Quizgenerators - screenshot

Zur Veranschaulichung der Syntax ist im Inputfeld Frage;3 eingegeben, also die Frage und drei Antworten. Die Anzahl der Antworten kann beliebig sein.

Also z. B. für den Platzhalter Frage euntragen:

- Wer ist der Kaiser von China?;2 für zwei mögliche Antworten auf die Frage
- Ist die Aussage, Geld macht glücklich, wahr?;1 für eine mögliche Antwort

Erlaubt bei der Eingabe sind: ü,ö,?...

Nicht erlaubt bei der Eingabe: Semikolon. Also z. B. irren ist menschlich; wie geht der Spruch weiter?;3
Immer nur ein Semikolon zwischen Frage und Antwortzahl!

Das ist ein Separator und einziges K.O. -Kriterium.
möglichst kein Leerzeichen zwischen Semikolon und Anzahl der Antworten!

Anmerkung: Sie wollen keine Vorgabe im Assistenten, dann ändern Sie die Zeile

alt: >>"%destination%frage.vbs" ECHO username=InputBox ("Geben Sie eine Frage mit Semikolon und Antwortanzahl ein z. B. Frage;3","Frage","Frage;3")
neu: >>"%destination%frage.vbs" ECHO username=InputBox ("Geben Sie eine Frage mit Semikolon und Antwortanzahl ein z. B. Frage;3","Frage","")

Wir halten fest, Sie haben bis zu diesem Punkt eine Frage und eine von Ihnen bestimmte Anzahl von Antworten festgelegt.

Assistent 2

Assistent zur Generierung von Antworten

Quelle: Inputfenster des Quizgenerators - screenshot

Hier werden also die Antworten auf Ihre Frage abgearbeitet. Eine Antwort nach der anderen. Sie bestimmen mit einer 0 oder 1 hinter dem Semikolon, ob es eine falsche oder richtige Antwort im Quiz wird. Dieses gilt selbstverständlich nur für diese eine Antwort.

Die Vorgabe im Inputfeld können Sie natürlich wieder löschen, aber als Gedankenstütze ist das am Anfang simpler.

alt: >>"%destination%antwort.vbs" ECHO username=InputBox ("Geben Sie eine richtige Antwort mit Semikolon 1 und eine falsche Antwort mit Semikolon und 0 ein, z. B. Antwort;0","Input","Antwort;0")
neu:>>"%destination%antwort.vbs" ECHO username=InputBox ("Geben Sie eine richtige Antwort mit Semikolon 1 und eine falsche Antwort mit Semikolon und 0 ein, z. B. Antwort;0","Input","")

Sobald Sie ihre Antwort;Zahl 0 oder 1 eingegeben haben, wieder mit OK bestätigen.
Dann wird automatisch das nächste Fenster gestartet, bis Ihre Anzahl von Antworten, die Sie bei der Frage eingegeben hatten, erreicht wird...

Assistent 3

Assistent für das Quizende

Quelle: Inputfenster des Quizgenerators - screenshot

Damit kommen wir nun zum letzten Fenster, dass immer nach einem Frage-Antwortkomplex eingeblendet wird.
Hie kommt die wichtige Entscheidung: eine weitere Frage und Antworten eingeben oder beenden?

Geben Sie weiter (auf jedenfall kleingeschrieben und fehlerfrei ein!)

Hier können Sie jederzeit durch Eingabe von dem Wort ende die Eingabe beenden. Das Wort muss kleingeschrieben sein oder bei Troubleshooting weiterlesen...!

Dann wird automatisch die fertige HTM-Seite erstellt, die Sie mit einem beliebigen Broser öffnen können.

>>"%destination%frage.vbs" ECHO username=InputBox ("Geben Sie für eine weitere Frage WEITER kleingeschrieben, sonst ENDE kleingeschrieben ein","Frageende","ende")

Troubleshooting

Eine Falscheingabe beim Assistenten drei schickt die Batch, die im Hintergrund unsichtbar läuft , ins Nirwana. Halb so schlimm. Der Sternenhimmelstuermer konzipierte die Batch dann so, dass alle Hilfsdokumente und Dateien erhalten bleiben. Sie müssen lediglich die start.vbs mit Doppelklick aktivieren. Dann landen Sie bei der nächsten Frage...

Richtig lustig wird es, wenn wegen fehlender Zahlenangabe die Batch sich in einer Endlaufschleife festfährt. Die Batch läuft im Hintergrund , also wird bei einem Abbruch durch das alte Fenster ein neues Fenster geöffnet - Ausstieg erstmal relativ schwer - ne, zur Not verschieben Sie die Batch bei geöffneten VB-Fenster einfach in einen anderen Ordner - klappt...

Javascript-Code kurz erklärt

Hier also der fertige kurze Quizcode für zwei Fragen mit zwei Antworten:

<html>
<head>
    <meta name="generator" content="HTML Studio">
    <title>Quiz</title>
    <meta name="author" content="Sternenhimmelstuermer">
    <meta name="description" content="Quiz multiple Choice">
    <SCRIPT LANGUAGE="JavaScript"></SCRIPT>
   </head>
   <body>
<center>
<FORM NAME="quizForm">
<TABLE>
<TR><TD>Wann ist Mittag?</TD></TR><TR><TD>
18:00 Uhr <INPUT TYPE="checkbox" NAME="q0" VALUE="false">
12:00 Uhr <INPUT TYPE="checkbox" NAME="q1" VALUE="true">
</TR>
<TD>Antwort1 <INPUT TYPE="TEXTBOX" NAME="Antwort1" VALUE="" SIZE="7"></TD>
<TD>Antwort2 <INPUT TYPE="TEXTBOX" NAME="Antwort2" VALUE="" SIZE="7"></TD>
<TD><TR>
<TR><TD>Ist ein Hund ein Säugetier?</TD></TR><TR><TD>
ja <INPUT TYPE="checkbox" NAME="q2" VALUE="true">
Nein <INPUT TYPE="checkbox" NAME="q3" VALUE="false">
</TR>
<TD>Antwort3 <INPUT TYPE="TEXTBOX" NAME="Antwort3" VALUE="" SIZE="7"></TD>
<TD>Antwort4 <INPUT TYPE="TEXTBOX" NAME="Antwort4" VALUE="" SIZE="7"></TD>
<TD><TR>
</TABLE>
<P>
<INPUT TYPE="BUTTON" onClick="einzeln(),count()" VALUE="Ergebnis">
Antwort: <INPUT TYPE="TEXTBOX" NAME="Antwort" VALUE="" SIZE="3">
</FORM></center>
</body>
</html>

Der Kopf bedarf fast keiner Erklärung

<html>
<head>
    <meta name="generator" content="HTML Studio">
    <title>Quiz</title>
    <meta name="author" content="Sternenhimmelstuermer">
    <meta name="description" content="Quiz multiple Choice">

Zwischen den HTML-Tags (<html>Zwischen den beiden Tags sind dann dutzende anderer Tags</html>) spielt sich alles ab. Wie bei einem Brief gibt es einen Kopf (<head></head>).
Zum Grundgerüst zählen: <html><head></head> <body></body></html>

Die Angaben vomTitel ist sinnvoll, da der im Browser im oberen Fenster angezeigt wird (<title>Text</title>).

Name des Autors und eine kurze Beschreibung sind sinnvoll, aber nicht notwendig.

Der Sternenhimmelstuermer verwendet zur Zeit html 4....

Im Headbereich ist die unsichtbare Berechnung des Javascripts. Es besteht also aus zwei Teilen. Genau so gut möglich wäre es das Script in einer *.JS-Datei auszulagern. Das bringt aber bei kleinen Seiten und Skripten nicht wirklich einen Vorteil und Raubkopierer freuen sich eher über ein Extraskript...

<SCRIPT LANGUAGE="JavaScript"></SCRIPT>

Der Sternenhimmelstuermer schrieb ein ganz leichtes Skript, dass keine for i...Schleifen enthält. Das ist leicht zu automatisieren. Die Javascript-Tags sind Pflicht. Darin verpackte der Sternenhimmelstuermer zwei Funktionen - die Beschriftung bei richtigen Antworten (function einzeln()) und die Auszählung (function count()).Der Name der Funktionen ist so etwas von beliebig und uninteressant: Die beiden () sind das Zeichen für eine Funktion.

Eine einfache Funktion, wie sie der Sternenhimmelstuermer erstellte, braucht auch nur zwei {} zum Öffnen und schließen - das reicht für eine simple Funktion.
Danach kommt im Prinzip derselbe Satz mit kleinen Variationen:

if (document.quizForm.q0.checked)
   document.quizForm.Antwort1.value = "false";

Wenn (if) also im Pfad document.quizForm.q0 (fängt mit dem Dokument an. Darin gibt es eine Quizform (Fantasiename) und dort eine Checkbox mit dem Namen Q0., ist also nur eine Adressierung) ein Haken in der Checkbox gesetzt wurde (checked) , dann wird der Befehl in der zweiten Reihe ausgeführt.

Da wird dann wieder in einem Pfad etwas getan: document - was so ungefähr Laufwerk C:/ entspricht, dann zu derselben Quizform, die im Body (<FORM NAME="quizForm">) nun mal so benannt wurde und dann zur Antwort1, die ein Inputfeld (<TD>Antwort1 <INPUT TYPE="TEXTBOX" NAME="Antwort1" VALUE="" SIZE="7"></TD>) im Body besitzt.

Für die wird ein Wert (value = "false") gesetzt, der in Anführungsstrichen liegt und false heißt. So wird der Wert also später bei Aktivierung des Skripts eingetragen, wenn es eine falsche Antwort war.
Bei einer richtigen Antwort wäre es true, wie es im nächsten Kästchen der Fall ist.

Aha, der Sternenhimmelstuermer vergibt also jeder Checkbox einen neuen Namen (q1,q2,...). Das ist nicht unbedingt immer der Fall. Man kann es sich auch komplizierter machen, aber Ende gibt es keine richtigen oder falschen Methoden, sondern nur verschiedene Lösungsansätze. Mit der letzten geschweiften Klammer }beendet der Sternenhimmelstuermer die Funktion und geht nun zum eigentlichen Zähler für richtige und falsche Antworten (function count())

In Javascript wird viel mit Variablen gearbeitet. Alles muss definiert sein. Deshal werden erstmal drei Variablen gebildet (var ist die Einleitung).

Wir fangen mit 0 Punkten var scor = 0 an und dann kommt 1 Punkt bei richtiger Antwort dazu var dazu = 1 oder ein Punkt var ab   = 1 wird abgezogen.

Das müssen wir nur dem blöden Javascript erklären.

if (document.quizForm.q0.checked)
    var scor = scor - ab;

Die erste hälfte des Befehls wurde Ihnen gerade erklärt - es wird lediglich nachgefragt, ob eine Checkbox angekreuzt wurde. Die erste Checkbox ist eine falsche Antwort, also wird beim Ankreuzen (checked) einfach nur der Befehl ausgeführt: Der neue Punktestand ist der alte Punktestand minus der Variablen ab. Im Prinzip hätten zwei Variablen genügt, aber zur Verdeutlichung verwendete der Sternenhimmelstuermer zwei Variablen. Gewöhnen Sie sich das Arbeiten mit Variablen an. Lieber eine zuviel, als eine zu wenig.

document.quizForm.Antwort.value = scor
}

Am Ende vor der geschweiften Klammer dann endlich ein neuer Befehl, den Sie eigentlich allein herausfinden könnten.

Es geht mal wieder ein Pfad lang: beginnend beim Document über unser Feld im Body quizForm bis zu einem Inputfeld mit Namen Antwort. Im body finden Sie das in der Zeile: <INPUT TYPE="TEXTBOX" NAME="Antwort" VALUE="" SIZE="3">

Dort finden Sie auch, dass kein Wert dort zur Zeit eingetragen wurde VALUE="". Das ändern Sie nun und geben in Value die Variable Scor ein value = scor . Übigens hätte der Sternenhimmelstuermer score auch richtig schreiben können, aber darauf kommt es eben bei einem Variablennamen nicht an.

Der Punktestand in der Variablen Scor wurde mit jedem positiven oder negativen Ergebnis des Useres erhöht oder erniedrigt. Nein, hier dürfen dann keine Anführungszeichen um Scor gesetzt werden, da sonst das falsch geschriebene Wort als Endergebnis dem User gezeigt werden würde - und das wäre doch mehr als peinlich...

}
//--></SCRIPT>
   </head>
   <body>
<center>
<FORM NAME="quizForm">
<TABLE>

Nachdem das die letzte Funktion geschlossen wurde und der Script- und Headtag geschlossen wurde, geht es im Body weiter, also in dem Bereich, der nachher für den User sichtbar ist.

Darin Eröffnen wir eine Form mit dem Namen Quizform. Das ist später für die Pfadangaben unerlässlich. Merke: Alles muss für Javascript auch irgendwo adressiert sein. Und Quizform ist nur eine Adresse unter document....

Dann eröffnen wir eine Tabelle (<TABLE>). In einer Tabelle gibt es eigentlich nur zwei Tags <TR> und <TD>. Angefangen wird immer oben links. Ein weiteres <TR> ist der Beginn einer neuen Zeile und ein TD eine weitere Zelle in der betreffenden Zeile.

<TR><TD>Wann ist Mittag?</TD></TR><TR><TD>
18:00 Uhr <INPUT TYPE="checkbox" NAME="q0" VALUE="false">
12:00 Uhr <INPUT TYPE="checkbox" NAME="q1" VALUE="true">
</TR>
<TD>Antwort1 <INPUT TYPE="TEXTBOX" NAME="Antwort1" VALUE="" SIZE="7"></TD>
<TD>Antwort2 <INPUT TYPE="TEXTBOX" NAME="Antwort2" VALUE="" SIZE="7"></TD>
<TD><TR>
<TR><TD>Ist ein Hund ein Säugetier?</TD></TR><TR><TD>
ja <INPUT TYPE="checkbox" NAME="q2" VALUE="true">
Nein <INPUT TYPE="checkbox" NAME="q3" VALUE="false">
</TR>

In der ersten Zeile steht dann Wann ist Mittag? </TR> schließt dann die Zeile und die nächste Zeile wird mit <TR><TD> eingeleitet, also in der nächsten Zeile erste Zelle stehen dann die beiden Checkboxen. Puh, da hat der Sternenhimmelstuermer schludrig gearbeitet. Eine Reihe von Tags sind nicht richtig abgeschlossen - egal, in diesem Punkt verzeihen die Browser viel.

Hingegen duldet Javascript keine Fehler. INPUT TYPE="checkbox" ist also die Art für das Eingabefeld für den User. Da könnte auch Radiobutton drinstehen, was bei der Konstruktion des Sternenhimmelstuermers jedoch absolut unsinnig wäre...

Der Name ist q0 und der Wert false: Pfad zum Wert: document.quizForm.q0.value

Das haben wir bereits im Head-Bereich erläutert. Im Prinzip interessiert uns der Value wenig, weil wir über document.quizForm.q0.checked gingen. Diese Abfrage tangiert aber nicht den Value, sondern nur, ob der User eine Eingabe machte oder nicht. Von daher unterscheidet sich die Technik des Sternenhimmelstuermers von sehr vielen anderen Quizes, die den Value als Bewertungskriterium nehmen. Ist halt ein anderer Ansatz.

<TD>Antwort1 <INPUT TYPE="TEXTBOX" NAME="Antwort1" VALUE="" SIZE="7"></TD>

Ist die Ausgabe vom Javascript für die Angabe true oder false für den User der VALUE="" ist nichts, also ist die Textbox erstmal leer, wird das Javascript aktiviert, so ändert sich das.
Auch hier gilt, das wiederholt sich für alle Checkboxen...bis

</TABLE>
<P>
<INPUT TYPE="BUTTON" onClick="einzeln(),count()" VALUE="Ergebnis">
Antwort: <INPUT TYPE="TEXTBOX" NAME="Antwort" VALUE="" SIZE="3">
</FORM></center>
</body>
</html>

Nachdem die Tabelle geschlossen wurde, wird außerhalb der Tabelle unten ein Button zum start der beiden Funktionen im Javascript installiert. Ja, man kann auch mehrere Funktionen mit einem Button starten. Das Ergebnis wird dann in das Eingabefeld darunter eingetragen und zwar nach alten Schema in das leere Inputfeld.
Vielleicht erinnern Sie sich noch an die letzte Zeile von der Funktion Count():

document.quizForm.Antwort.value = scor

Und was das bedeutet, das wissen Sie nun als angehender Javascript-Amateur...

Fazit

Das alte Jahr endet für den Sternenhimmelstuermer mit VBS und das neue Jahr beginnt dann mit Javascript. Genau so ist dieses Skript aufgebaut. Der Sternenhimmelstuermer wünscht viel Spaß beim Ausprobieren des Skriptes - mit dessen Fertigstellung hört das Quiz für den Sternenhimmelstuermer dann auch auf und für Sie beginnt dann die Arbeit.

Aber es lohnt sich und so einfach für den PC, das Smartphone oder die Webseite ein Quiz zu erstellen aus Batch und VBS umsonst - das gabe es bis Dato nicht...

Codeerweiterung: Quiz mit farblicher Markierung als Endprodukt verbessert am 31.12.2012

Da man bei dem Geballer zu Sylvester sowieso nicht schlafen kann, hier eine Codeerweiterung mit farblicher Markierung des Quizes in grün bei allen richtigen Antworten und rot bei allen falschen Antworten - egal ob angekreuzt oder nicht - in einem Textdokument zum Download. Einfach umbenennen in quiz.bat und wie oben bereits erwähnt loslegen...Der Name ist Pflicht!!!

Eine lauffähige Demo gibt es hier.

Ein paar Wörter zum Code: Der Sternenhimmelstuermer greift auf den Value zurück. Steht da jetzt ein richtig drin, dann wird nach Betätigung des Ergebnis-Button die Farbung in grün und bei falsch in rot ausgelöst.

Das folgende interessiert dann nur Amateure:

Der Sternenhimmelstuermer änderte alle Values erstmal auf richtig oder falsch von true und false. Das war so ziemlich egal, da bisher nur mit der Checjabfrage der Zustand abgefragt wurde, nämlich ob ein Kreuz überhaupt abgefragt wurde oder in Javascript-Code ausgedrückt: if (document.quizForm.q0.checked)

Mit diesem Codeteil wurde also immer die Bedingung gesetzt, dass nach Ankreuzen etwas passiert...

Gehen wir gemeinsam kurz den geänderten Code nochmal durch:

<style type="text/css">
input {
    padding: 4px 6px;
    border: 1px solid #555;
    background-color: #fafafa;
}
input.falsch {
   border-color: red;
   background-color: #FF3300;
}
input.richtig {
border-color: green;
background-color: #33FF33;
</style>

Im Headbereich wurde ein wenig CSS verwendet. Für ein Input-Feld wurde zwischen den Tags (<style type="text/css"> </style>) für CSS eine feste Formatierung für Inputfelder vergeben:

input {
    padding: 4px 6px;
    border: 1px solid #555;
    background-color: #fafafa;
}

Durch die Erweiterung Falsch (input.falsch...) und Richtig (input.richtig {...) wird nur die Formatierung angegeben, wie die Inputfelder aussehen sollen, wenn dort richtig oder falsch steht. Richtig, die Idee die Farbveränderung über CSS zu machen, kommt nicht vom Sternenhimmelstuermer, sondern von dieser Seite...

Der Sternenhimmelstuermer passte trotzdem noch einiges an...Die Funktion count () hingegen braucht nicht angepasst zu werden.

Erstmal im Javascript in der Funktion einzeln().

Hier steht für eine falsche Antwort nun:

function einzeln() {
if (document.quizForm.q0.checked)
   document.quizForm.Antwort1.value = "falsch";
var element = document.getElementById("Antwort1");
if (element.value == "falsch");
element.className = 'falsch';
................................

Die erste Antwort if-Bedingung ist ja bereits bekannt:

if (document.quizForm.q0.checked)
   document.quizForm.Antwort1.value = "falsch";

ist der Kernsatz und füllt weiterhin das angekreuzte Feld mit dem Wert falsch. Hier hat sich nichts vom alten Skript her geändert...

Die nächsten drei Sätze sind neu:

var element = document.getElementById("Antwort1");
if (element.value == "falsch");
element.className = 'falsch';

Eine Variable (element) wird gesetzt, die im document das Objekt (getElementById) mit der ID mit Namen Antwort1 anspricht. Im alten Dokument vergab der Sternenhimmelstuermer keine ID, sondern nur einen Namen. Das Problem ist dabei, dass der Internet Explorer clever genug ist, den Name als ID anzuerkennen, während Chrome und Firefox sich strikt an die Konvention halten und eine ID bei dem Befehl getElementById benötigen.

Ansonsten funktioniert der Befehl nicht, daher im Body die Anpasung <TD>Antwort1 <INPUT TYPE="TEXTBOX" NAME="Antwort1" id=Antwort1 VALUE="" SIZE="7"></TD>
Das verstehen dann Internetexplorer und Firefox, obwohl der Sternenhimmelstuermer zufällig die Anführungszeichen vergaß...

Also gilt die neue Formatierung nur für das Eingabefeld mit Namen Antwort1 und wenn der Value von diesem Wert falsch ist (if (element.value == "falsch");), dann wird diesem Element der className falsch im CSS zugeordnet.

Was heißt das denn wieder? className ist in unserem CSS -Skriptteil wiederum:

input.falsch {
   border-color: red;
   background-color: #FF3300;

Beim Auslösen durch den Ergebnis-Button kommt es also zu einer vorher definierten Änderung. Es wird nun ein Inputfeld mit dem Namen falsch deklariert. VBS, Javascript, css - alles derselbe Mist, nur das es sich diesmal DOM (Document Object model) schimpft.

Dasselbe gilt für eine richtige Anwort.
var element = document.getElementById("Antwort2");
if (element.value == "richtig");
element.className = 'richtig';

HM, könnte man natürlich auch für gecheckte oder nicht gecheckte Elemente anpassen, aber warum? Der Sternenhimmelstuermer schlägt so zwei Fliegen mit einer Klappe: Farbliche Markierung und Anzeige, ob es noch weitere richtige oder falsche Elemente gibt. Das sieht richtig gut aus und den User werden die bunten Farben bestimmt glücklich machen - Prosit Neujahr!

01.01.2012 final version

So, jetzt also die finale Version. Die ist nicht die perfekteste, aber das selbst gesetzte Zeitlimit für die Bearbeitung ist mit 24 Stunden überschritten. Da kennt der Autor nichts. Der Quellcode ist ein wenig besser, deshalb sollten Sie diese Version verwenden...aber funktionieren tuen alle Versionen

In der letzten Version wurde die <Table>-Version durch <Div> Tags ersetzt. Sieht im Firefox besser aus, ist für den Enduser einfacher zu bearbeiten...

Download bzw. Demo:
demo
generator (wieder quiz.txt in quiz.bat umbenennen)

Es wurde im Body ein form-Tag verwendet, in dem die "Formularfelder" stehen. Das nächste Projekt steht dann in den Sternen...

Vielleicht interessiert Sie auch
- ein Vokabeltrainer
- eine Dektopsuchmaschine mit Archivierungsfunktion
- Festplattenspeicherfresser mit Batch finden
- Lottozahlengenerator in VBS und Batch
- Grundlagenabhandlungen zur künstlichen Intelligenz KI I, KI II und Ki III
- eine Ernährungstabelle ernaehrungstabelle.html in Excel ohne Makros

Ansonsten um die 130 Abhandlungen im W7 Bereich...

Impressum
Datenschutz