Eine Vorlage für einen Vokabeltrainer in Javaskript oder die Lehre von
Datenbanken (Arrays)
Einleitung
Der Sternenhimmelstuermer schrieb bereits einen simplen Vokabeltrainer in VB-Skript
. Diesmal liegt der
Fokus des simplen Vokabeltrainers in Javaskript auf die Handhabung von
Arrays.
Die Sternenhimmelstuermerseite ist eine Lehrseite und deshalb gibt es
diesmal keinen Generator, der ein perfektes mehrdimensionales Array
(Datenbank)
kreiert, sondern nur die Vorlage für eine Basisstruktur erstellt.
Das ist so gewollt.
Hingegen startete der Sternenhimmelstuermer zum neuen Jahr mit einem Quizgenerator,
mit dem Sie leicht ein Multiple Mhoicetest oder Quiz generieren können
(Egal wieviel richtige oder falsche Antworten, farbliche Hervorhebung
der Ergebnisse...und simple Bedienung).
Viele Programmierer fragen, ob es möglich ist, Datenbanken mit einem
Javaskript auszulesen und passiv zu verwenden. Die Anwort lautet: Ein
einfaches Array ist eine eindimensionale Datenbank.
Mit der
mehrdimensionalen Verwendung von Arrays ist es Ihnen möglich,
Datenbanken nach Javascriptkonventionen aufzbauen. Natürlich ist das
mühseelig und nur die zweitbeste Alternative.
Eine andere Alternative ist ein Textdokument mit Separator getrennten
Daten, dass eingelesen wird und die Datenbanksätze dann dargestellt
werden, dieses wird aber Teil einer anderen Abhandlung. Vielleicht
lesen Sie sich diese Abhandlung
über Excel durch, um eine grundlegende Einführung über den
Datenbankengedanken zu bekommen.
Egal ob Batch, VBS oder Javascript - Sie können prinzipiell auch in
jeder Subsprache Datenbanken anlegen und bearbeiten.
Ist es sinnvoll Datenbanken in Javascript anzulegen? Ein klares Njein.
Vom Sicherheitsgedanken her kann jeder Trottel eine Datenbank in einer
offenen Quellsprache mit zwei Mausklicks
kopieren.
Hingegen haben Sie den Vorteil im Intranet, am Privat-PC oder auf dem
Smartphone ohne Fremdsoftware auch Zugriff auf eine
passive Datenbank zu haben, die zwar nicht verändert, aber ausgelesen
werden kann.
Außerdem benötigen viele Anwendungen eine Datenbank. Z. B., wenn Sie
Sternzeichen in Javascript zuordnen wollen, dann brauchen Sie die
Zeiträume, in denen eines von Zwölf Sternzeichen gilt.
Schon haben Sie zumindest eine Datenbank mit zwölf validen
Angaben oder im fachchinesisch von Javascript zumindest ein
(eindimensionales) Array ().
Und dann ist es Ihnen auch egal, ob jemand die Sternzeichen kopiert...
Schauen Sie sich im Internet um, Sie werden viele Datenbanken in
Javaskript finden. Deshalb ist die Grundaussage in Foren und auf vielen
Webseiten, dass Datenbanken in Javaskript nur schwer zu erstellen
seien, schlecht handhabbar sind oder gar unsinnig sind, schlichtweg
falsch, da viele Programmierer oder solche, die vorgeben es zu sein,
nicht einmal wissen, dass Sie laufend mit Datenbanken arbeiten.
Daher geht ein Premiumlink des Sternenhimmelstuermers an diese Seite, die das richtig auch unter vielen
Blindgängern bei Google darstellt.
Hm, Self-html war diesmal wenig hilfreich bei den Recherchen. Ist
ansonsten aber Top und natürlich auch eine Empfehlung, aber schon bei
der Syntax-Darstellung von verschiedenen Arraytypen besteht
Nachholbedarf - nur so als Hinweis, da Arrays essentiell sind, kann man
da mehr erwarten ...
-----
Inhaltsverzeichnis
Basisscript mit Demo für einen vollständigen Vokabeltrainer als Vorlage
Beschreibung
Basisscript mit Demo für einen vollständigen Vokabeltrainer
als Vorlage
Am Anfang können Sie sich die Demo mit 12 Vokabeln anschauen und entscheiden, ob
Sie die Vorlage gebrauchen können.
Funktionalität: 12 Inputfelder zur Eingabe von Übersetzungen. Es können
mehrere Übersetzungen verwendet werden (Datenbank oder eben
mehrdimensionales Array...). Nach Auswertung Farbänderung der
Inputfelder in grün oder rot. Bei falschen Wörtern ein Punkt Abzug. Bei
falschen Wörtern werden richtige Wörter aus Array eingetragen, bei
richtigen Wörtern wird richtig eingetragen.
Das können Sie spätestens nach Lesen der Abhandlung alleine ändern. Es
geht nur darum viele Alternativen der Visualisierung mit Farben oder
Eintrag von Feldern zu lernen...
Hilfreich ist hier auch die Abhandlung über den o. a. Quizgenerator.
Es werden nur einfache Grundbefehle verwendet. Auf Schleifen wurde mit
Absicht verzichtet.
Der folgende Codeauszug ist eine voll lauffähige Demo mit nur einer
Vokabel. Das reicht, um die Funktionalität zu erläutern:
<html>
<head>
<meta
name="generator" content="HTML Studio">
<title>Quiz</title>
<meta
name="author" content="Sternenhimmelstuermer">
<meta
name="description" content="Vokabeltrainer">
<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>
<SCRIPT LANGUAGE="JavaScript"><!--
var vokabel = new Array();
vokabel[0] = new
Array("mögen","mag");
function einzeln()
{
var element =
document.getElementById("Antwort1");
if (element.value == vokabel[0][0] ||
element.value == vokabel[0][1] ){
element.className = 'richtig';
} else {
element.className = 'falsch';
}
var element =
document.getElementById("Antwort1");
if (element.value == vokabel[0][0] ||
element.value == vokabel[0][1]){
document.vokabelForm.Antwort1.value =
"richtig";
} else {
document.vokabelForm.Antwort1.value =
"richtig: " + vokabel[0];
}
}
function
count() {
var scor = 0
var dazu = 1
var ab = 1
var wichtig = "richtig"
var element =
document.getElementById("Antwort1");
if (element.value != wichtig){
var scor = scor - ab;
} else {
var scor = scor + dazu;
}
document.vokabelForm.Antwort.value
=
scor
}
//--></SCRIPT>
</head>
<body>
<center>
<FORM
NAME="vokabelForm">
<div>Ein Kleiner
Vokabeltest<div>
<br>
<br>
<div>like <INPUT
TYPE="text" NAME="Antwort1" id=Antwort1 VALUE=""
SIZE="20"></div>
</div>
<P>
<INPUT TYPE="BUTTON"
onClick="einzeln(),count()" VALUE="Ergebnis">
Antwort: <INPUT
TYPE="TEXTBOX" NAME="Antwort" VALUE="" SIZE="3"></P>
</FORM></center>
</body>
</html>
Beschreibung
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....
<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>
Dieses ist ein CSS-Skript, das für die farbliche Veränderung
verantwortlich ist.
Für alle Input-Felder wurde zwischen den Tags (<style type="text/css"> </style>) für CSS eine
feste Formatierung 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...
Das Javascript löst die farbliche Veränderung aus. Entscheidend ist
dabei die Adressierung input.falsch
und input.richtig.
Damit werden die Farben rot für falsche Antworten und grün für richtige
Antworten vergeben. Urzustand ist einfach input.
Angesprochen im Javascript wird es über die Zeile: element.className
= 'richtig'; Element. und Klassenname sind also der
vorgeschrieben Pfad zu input.richtig.
<SCRIPT
LANGUAGE="JavaScript"><!--
var vokabel = new Array();
vokabel[0] = new
Array("mögen","mag");
Im Javascript bauen wir vor der Verwendung irgendwelcher Funktionen
erstmal die Datenbank auf. Die ist mit einer Zeile eher armseelig.
Dennoch muss Sie am Anfang stehen, da Javascript Zeile für Zeile
abarbeitet. Innerhalb einer Funktion, die abhängig von einem Ereignis
erst zeilenweise eingelesen wird, bringt dieselbe Datenbank nur etwas
für die Funktion...
var vokabel = new Array();
Es wird also erstmal eine Datenbank definiert - oder ein
mehrdimensionales Array. Die Syntax ist sehr fest. Das einzige Wort,
was Sie frei wählen können ist im Beispiel vokabel - Der sinnige Name
für die Datenbank. new Array ist festgelegt.
Sie bauen nun Zeile für Zeile den Inhalt der Datenbank vokabel auf.
vokabel[0] = new Array("mögen","mag");
Die erste Zeile bekommt eine 0
im Javascript, ist jedoch Zeile 1. Der einzige Fehler, der
irgendwie möglich ist. Danach schreiben Sie die einzelnen Spalten.
Mögen und Mag sind die Übersetzung von like.
Abgerufen werden die Daten mit der Adressierung: vokabel[0]
für den ganzen Inhalt der beiden Arrays mögen, mag.
vokabel[0][0]
für mögen
vokabel[0][1]für
mag
Stellen Sie sich das als Tabelle vor:
A1= mögen (vokabel[0][0]),
B1= mag (vokabel[0][1]).
Das Ganze mit Anführungszeichen. Da können auch mehrere Wörter,
Trennzeichen usw. drinstehen
Als Anfänger bauen Sie nun Zeile für Zeile auf.
A2= guten Tag B2= Aufwiedersehen heißt dann für unsere Tabelle in
Javascript:
vokabel[1] = new Array("guten tag","Aufwiedersehen");
Wie lang die Tabelle ist und wieviel Reihen drin sind, wird nur durch
die Grenzen von Javascript bestimmt.
function einzeln() {
var element =
document.getElementById("Antwort1");
if (element.value == vokabel[0][0] ||
element.value == vokabel[0][1] ){
element.className = 'richtig';
} else {
element.className = 'falsch';
}
var element =
document.getElementById("Antwort1");
if (element.value == vokabel[0][0] ||
element.value == vokabel[0][1]){
document.vokabelForm.Antwort1.value =
"richtig";
} else {
document.vokabelForm.Antwort1.value =
"richtig: " + vokabel[0];
}
}
Der Sternenhimmelstuermer schrieb ein ganz leichtes Skript, dass keine
for i...Schleifen enthält. Das ist leicht zu automatisieren. Im Javascript im Headbereich sind
zwei Funktionen. Die Regeln 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 - bei einer if else Anweisung kommen noch ein
paar mehr geschweite Klammern...
var
element = document.getElementById("Antwort1");
if (element.value == vokabel[0][0] ||
element.value == vokabel[0][1] ){
element.className = 'richtig';
} else
Die erste Zeile sagt nur,
dass es ein Inputeld mit der ID Antwort1 im Body gibt, den wir in eine
Variable packen.
Die zweite Zeile sagt, dass wenn in diesem Element zufällig der Wert
von der vokabel[0][0] oder vokabel[0][1]
steht, also in unserem Fall mögen oder mag, dann sag dem
CSS bescheid, dass eine grüne Verfärbung element.className
= 'richtig'; durchgeführt wird.
Sonst...} else {
element.className
= 'falsch';
}
gib den Element die Farbe rot. Aha, wenn der User was falsches
einträgt, dann wird das ganze rot.
Wie die Funbktion ausgelöst wird, sieht selbst ein Profi nur im Body:
Da steht dann irgendeine Methode drin wie <INPUT
TYPE="BUTTON" onClick="einzeln(),count()" VALUE="Ergebnis">
OnClick im Falle des
Beispiels.
Die zweite Hälfte der Funktion unterscheidet sich auf den ersten Blick
fast gar nicht...
var element =
document.getElementById("Antwort1");
if (element.value == vokabel[0][0] ||
element.value == vokabel[0][1]){
document.vokabelForm.Antwort1.value =
"richtig";
} else {
document.vokabelForm.Antwort1.value =
"richtig: " + vokabel[0];
}
Nur wird hier eben statt eine Farbveränderung mit CSS ein neuer Text in
das Feld geschrieben - richtig, wenn die antwort richtig ist und
richtig: magen,mög, wenn das Ergebnis falsch war, also ein
Verbesserungsvorschlag.
Der Sternenhimmelstuermer lässt alles in einem Inputfeld abspielen. Ist
einfacher, man könnte genauso ein zweites Inputfeld für die Ausgabe
kreieren - unnötige Schreibarbeit...
document.vokabelForm.Antwort1.value
= "richtig";
Ist also nur die Adressierung kombiniert mit der Aufforderung den alten
Text destruktiv zu überschreiben. Eben den Wert "richtig" im value der
Antwort1 einzutragen. Die befindet sich in dem Bereich vokabelForm im
document. Das war der Pfad mal umgedreht erklärt.
Zur Erinnerung Bei einer sonstigen falschen Angabe wird die ganze Zeile
der Datenbank Vokable eingetragen document.vokabelForm.Antwort1.value
= "richtig: " + vokabel[0]; .
Es steht also im InputFeld für den User richtig:
mögen,mag "richtig: " + vokabel[0];
Die erste Hälfte des Textes in Anführungszeichen, dass durch das
Pluszeichen mit der betreffenden Zeile des mehrdimensionalen Arrays
gebündelt wird. Variablen stehen in Javascript dann nicht in
Anführungszeichen. Statt vokabel[0] hätte da also auch
vokabel[0][0] für mögen oder
vokabel[0][1] für mag stehen können...
function count() {
var scor = 0
var dazu = 1
var ab = 1
var wichtig = "richtig"
var element =
document.getElementById("Antwort1");
if (element.value != wichtig){
var scor = scor - ab;
} else {
var scor = scor + dazu;
}
document.vokabelForm.Antwort.value
=
scor
}
Das ist also die zweite Funktion, die durch ein Onklick per Button
aufgerufen wird und den Punktestand zählt.
Dazu werden drei Variablen deklariert.
var
scor = 0
var dazu = 1
var ab = 1
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 Javascript erklären.
Wir wissen, dass in einem richtigen Feld nach Eintrag des Users bei
einer richtigen Antwort im ersten Skript Als Value richtig eingetragen
wurde. Also definieren wir erstmal eine Variable mit dem Wort richtig.var
wichtig = "richtig"
Dann nehmen wir fast genau dieselbe Methode wie beim Farbwechsel oder
schriftlichen Vergleich. Erstmal ziehen wir das Inputfeld , indem wir
mit der getElementById
Methode das Element ansprechen. Dann formulieren wir die Bedingung,
dass wenn ein richtig als Wert (value) eingetragen wurde, dann rechne
bitte die Grundvariable plus 1, andernfalls ziehe einen Punkt ab.
Um es nochmal zu betonen: Inzwischen wurde bei einer richtigen Antwort
das Wort richtig eingetragen. Bei einem falschen Wort steht ja z. B. richtig: mögen, mag. Die ganze Variable
wird verglichen und nicht nur das einzelne Wort. Obwohl also das Wort
richtig
durchaus bei einer falschen Antwort eingetragen wird, ist dort ein
anderer Text insgesamt drin - Folge: die Variable wird als
unterschiedlich erkannt.
<body>
<center>
<FORM
NAME="vokabelForm">
<div>Ein Kleiner
Vokabeltest<div>
<br>
<br>
<div>like <INPUT
TYPE="text" NAME="Antwort1" id=Antwort1 VALUE=""
SIZE="20"></div>
</div>
<P>
<INPUT TYPE="BUTTON"
onClick="einzeln(),count()" VALUE="Ergebnis">
Antwort: <INPUT
TYPE="TEXTBOX" NAME="Antwort" VALUE="" SIZE="3"></P>
</FORM></center>
</body>
</html>
Über den Body nur noch kurze Ausführungen:
<FORM NAME="vokabelForm">
Die ganzen Formularfelder sind in einer Form eingetragen, obwohl das
eigentlich nicht nötig wäre, weil jedem Inputfeld eine eindeutige ID
vergeben wurde..ist aber nun Pflicht, dass im Pfad zu berücksichtigen...
<INPUT TYPE="text" NAME="Antwort1"
id=Antwort1 VALUE="" SIZE="20"></div>
Firefox und Co benötigen immer einen ID-Namen, beim Internetexplorer
reicht Name allein. Da Sie in der Regel alle Browser erreichen wollen:
ID ist Pflicht!
Das ist Also das Eingabe-, Input- oder Textfeld... Die Größe 20 können
Sie natürlich vergrößern...Der eingestellte value"" ist erstmal nichts.
Erst der User macht eine Eingabe. Natürlich können Sie dort auch eine
Vorgabe eingeben, die dann destruktiv nach Betätigung des
Ergebnis-Button überschrieben wird.
<INPUT TYPE="BUTTON" onClick="einzeln(),count()"
VALUE="Ergebnis">
Das ist der Ergebnisbutton. Beim Drücken des Buttons
OnClick werden die beiden Funktionen aufgerufen. Der
Sternenhimmelstuermer trennte die Funktionen der Übersicht halber. Das
ist eher selten...
<INPUT TYPE="TEXTBOX" NAME="Antwort" VALUE="" SIZE="3"></P>
Das ist die Box, wo am Schluss der Funktion count() document.vokabelForm.Antwort.value = scor der
Punktestand aufgerufen wird. Bei einer Abfrage langweilig. Da gibt es
nur -1 und 1. Ja, wir zählen auch in den negativen Bereich...
Wie die Skripte erweitert werden, sehen Sie an der Demo.
Am Ende der Funktionen. wird einfach die nächste Funktion angehängt,
natürlich müssen ein paar Kleinigkeiten berücksichtigt werden, damit
die Funktion weiterhin läuft:
Die rote geschweifte Entklammer muss am Ende stehen }.
Die ist zur Beendigung der Funktion_ beliebter Fehler: Sie kopieren die
Codezeilen und fügen Sie hinter die Funktion ein. Dann ignoriert der
Browser nicht nur Ihre Ausgabe, sondern das Script läuft tot. Browser
sind in dieser Beziehung sehr streng.
Bei der Zählfunktion (count) ist dann noch zu beachten, dass Sie die
Ausgabe auch wirklich am Schluss plazieren (document.vokabelForm.Antwort.value = scor )
und nicht hirnlos kopieren.
Insgesamt müssen Sie bei Änderungen also folgende Punkte beachten:
1. Alle beiden Funktionen ändern
2. Im Body weitere Inputfelder mit ID erstellen
Es empfiehlt sich nach jedem Neueintrag einen Probedurchlauf zu machen.
Schreiben Sie 10 neue Vokabeln einfach so hin und machen einen Fehler,
der zu einer Funktionsunfähigkeit führt, dann werden Sie den Fehler nur
schwer finden.
Der Sternenhimmelstuermer schreibt mit dem einfachen Notepad - das ist
nicht sehr intelligent, da dort keine Korrektur, Hilfsfunktionen oder
farbliche Markierungen sind, aber da der Sternenhimmelstuermer sich
nicht so sehr an Konventionen hält, immer neuen Code "erfindet" und
unterschiedliche Programmiersprachen benutzt, ist das O. K.
Impressum
Die Javascript- Tippseite wurde als Überbrückung zur selbst gewählten
Windows 8 Pause am 01.01.2013 ins Leben gerufen. Das zu Grunde liegende
Betriebssystem ist Windows 7, Firefox und Internetexplorer in der
jeweils aktuellen Version. Die Seite ist naturgemäß noch nicht so
üppig.
Der Autor schreibt schon Jahre in Batch, VBS, HTML und Javascript. Ein
paar Hinweise auf ältere Abhandlungen mit Javascript, die unter Windows
7 geschrieben und abgehandelt wurden, werden nochmals verlinkt.