Einmaleins Trainer

So funktioniert das Script

Das Script hat drei Aufgaben: Es erzeugt eine neue Aufgabe, es vergleicht die Eingabe mit dem richtigen Ergebnis, und es blendet Eingabefeld und OK-Knopf ein und aus. Alles Weitere sind Anzeigen — Aufgabe, Punktestand und Meldung sind drei Elemente auf der Seite, die das Script beschreibt.

let ergebnis = 5;
let punkte = 0;
let laeuft = false;

Diese drei Variablen sind der gesamte Spielstand. In ergebnis merkt sich das Script die Lösung der aktuellen Aufgabe, punkte zählt den Punktestand, und laeuft hält fest, ob gerade eine Runde im Gange ist. Sie stehen ganz oben in der Funktion und sind damit für alle darin liegenden Funktionen sichtbar — deshalb können neueaufgabe() und pruefen() gemeinsam mit demselben Wert arbeiten.

const zahl1 = Math.ceil(Math.random() * 10);
const zahl2 = Math.ceil(Math.random() * 10);
ergebnis = zahl1 * zahl2;
anzeige.textContent = zahl1 + " x " + zahl2;

Math.random() liefert eine Zufallszahl zwischen 0 und 1 (die 1 selbst nie). Mal 10 genommen ergibt das eine Zahl zwischen 0 und 10, und Math.ceil() rundet auf die nächste ganze Zahl auf — heraus kommt also 1 bis 10. Das Produkt wird in ergebnis geparkt, angezeigt wird nur die Aufgabe. Wollt ihr das große Einmaleins üben, ersetzt ihr die beiden Zehnen durch 20.

if (Number(eingabe.value) === ergebnis) {
  punkte++;
} else if (eingabe.value === "") {
  meldung.textContent = "Du musst schon etwas eingeben...";
} else {
  punkte = punkte / 2;
}

Der Inhalt eines Eingabefelds ist immer Text, auch wenn dort eine Zahl steht. Number() macht daraus eine echte Zahl, erst dann lässt sie sich mit === sauber mit dem Ergebnis vergleichen. Der mittlere Zweig fängt den Fall ab, dass gar nichts eingetippt wurde — dafür soll es keinen Punktabzug geben. Bleibt der letzte Zweig: falsche Antwort, Punktestand halbiert. Das ist die eigentliche Spielregel, und sie sorgt dafür, dass raten sich nicht lohnt.

okKnopf.hidden = false;
feld.hidden = false;
eingabe.focus();

Vor dem Start sind Eingabefeld und OK-Knopf nicht zu sehen. Das erledigt das HTML-Attribut hidden, das sich aus JavaScript über die Eigenschaft hidden ein- und ausschalten lässt. focus() setzt anschließend die Schreibmarke ins Eingabefeld, damit man sofort lostippen kann, ohne erst hineinzuklicken.

eingabe.addEventListener("keydown", function (ereignis) {
  if (ereignis.key === "Enter") {
    ereignis.preventDefault();
    pruefen();
  }
});

Damit man beim Üben nicht ständig zwischen Tastatur und Maus wechseln muss, hört das Script auch auf die Eingabetaste. ereignis.key enthält den Namen der gedrückten Taste; bei "Enter" wird dieselbe Prüfung ausgelöst wie beim Klick auf „OK".

Zum Anpassen: Die Siegbedingung steckt in der Zeile if (punkte >= 50) — wer eine kürzere Runde möchte, trägt dort eine kleinere Zahl ein. Und wenn ein Fehler nicht die Hälfte, sondern nur einen Punkt kosten soll, wird aus punkte = punkte / 2; einfach punkte--;.