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
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

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

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"><!--
function einzeln() {
if (document.quizForm.q0.checked)
document.quizForm.Antwort1.value = "false";
if (document.quizForm.q1.checked)
document.quizForm.Antwort2.value = "true";
if (document.quizForm.q2.checked)
document.quizForm.Antwort3.value = "true";
if (document.quizForm.q3.checked)
document.quizForm.Antwort4.value = "false";
}
function count() {
var scor = 0
var dazu = 1
var ab = 1
if (document.quizForm.q0.checked)
var scor =
scor - ab;
if (document.quizForm.q1.checked)
var scor = scor +
dazu;
if (document.quizForm.q2.checked)
var scor = scor +
dazu;
if (document.quizForm.q3.checked)
var scor =
scor - ab;
document.quizForm.Antwort.value
= scor
}
//--></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"><!--
function einzeln() {
if (document.quizForm.q0.checked)
document.quizForm.Antwort1.value = "false";
if (document.quizForm.q1.checked)
document.quizForm.Antwort2.value = "true";
if (document.quizForm.q2.checked)
document.quizForm.Antwort3.value = "true";
if (document.quizForm.q3.checked)
document.quizForm.Antwort4.value = "false";
}
function count() {
var scor = 0
var dazu = 1
var ab = 1
if (document.quizForm.q0.checked)
var scor =
scor - ab;
if (document.quizForm.q1.checked)
var scor = scor +
dazu;
if (document.quizForm.q2.checked)
var scor = scor +
dazu;
if (document.quizForm.q3.checked)
var scor =
scor - ab;
document.quizForm.Antwort.value
= scor
}
//--></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...