Grundrechenaufgaben

So funktioniert das Script

Das Script hat drei Aufgaben: Es würfelt Zahlen aus, zeigt daraus vier Rechenaufgaben an und vergleicht später eure Antworten mit den richtigen Ergebnissen. Im Original stand für jede der vier Rechenarten ein eigener, fast gleichlautender Block Code — hier ist daraus eine Liste geworden, die viermal dasselbe Verfahren durchläuft. Das ist kürzer, leichter zu überblicken und vor allem leichter zu erweitern.

const aufgaben = [
  { zeichen: "*", rechnen: function (a, b) { return a * b; } },
  { zeichen: "/", rechnen: function (a, b) { return a / b; } },
  { zeichen: "+", rechnen: function (a, b) { return a + b; } },
  { zeichen: "-", rechnen: function (a, b) { return a - b; } }
];

Diese Liste beschreibt die vier Rechenarten. Jeder Eintrag ist ein Objekt — eine kleine Sammlung benannter Angaben — mit zwei Feldern: zeichen ist das Symbol, das in der Aufgabe angezeigt wird, und rechnen ist eine Funktion, die zwei Zahlen entgegennimmt und das Ergebnis liefert. Dass eine Funktion einfach so in einer Liste stehen darf, ist eine der praktischen Eigenschaften von JavaScript: Funktionen sind hier Werte wie Zahlen oder Texte auch.

function zufallszahl() {
  return Math.round(Math.random() * (130 - 2)) + 1;
}

Math.random() liefert eine Zufallszahl zwischen 0 und (knapp unter) 1, etwa 0,7431. Multipliziert mit 128 ergibt das einen Wert zwischen 0 und 128, Math.round() rundet ihn auf eine ganze Zahl, und das + 1 verschiebt den Bereich auf 1 bis 129. Das ist genau die Rechnung aus dem Originalscript — wollt ihr leichtere Aufgaben, ändert einfach die 130 auf zum Beispiel 20.

werte[i] = [zufallszahl(), zufallszahl()];
document.getElementById("gr-aufgabe" + (i + 1)).textContent =
  werte[i][0] + " " + aufgaben[i].zeichen + " " + werte[i][1];

Für jede der vier Aufgaben werden zwei Zufallszahlen gezogen und im Array werte gemerkt — das Script muss sie beim Prüfen ja noch kennen. Danach wird die Aufgabe als Text in die Beschriftung über dem passenden Eingabefeld geschrieben. Der Kniff dabei ist "gr-aufgabe" + (i + 1): Aus dem Schleifenzähler 0, 1, 2, 3 werden so die id-Namen gr-aufgabe1 bis gr-aufgabe4. So kommt eine Schleife mit vier Feldern aus, ohne dass man jedes einzeln aufschreiben muss.

const stimmt = eingabe !== "" && !isNaN(antwort) &&
  Math.abs(antwort - ergebnis) < 0.005;

Hier wird bewertet. Drei Bedingungen müssen zutreffen: Das Feld darf nicht leer sein, die Eingabe muss eine Zahl sein (isNaN heißt „is Not a Number“ und wird hier mit dem Ausrufezeichen verneint), und der Abstand zwischen Antwort und Ergebnis muss winzig sein. Math.abs() liefert dabei den Betrag, also den Abstand ohne Vorzeichen — egal, ob ihr zu hoch oder zu tief liegt. Die Toleranz von 0,005 stört bei Plus, Minus und Mal nicht, weil dort ohnehin nur ganze Zahlen herauskommen; beim Teilen macht sie die Aufgabe überhaupt erst lösbar.

ergebnis.toLocaleString("de-DE", { maximumFractionDigits: 2 })

toLocaleString("de-DE") formatiert eine Zahl nach deutschen Gepflogenheiten: Komma als Dezimaltrenner, Punkt als Tausendertrenner. Mit maximumFractionDigits: 2 werden höchstens zwei Nachkommastellen angezeigt, sodass aus dem sperrigen Divisionsergebnis 3,7647058823529411 die gut lesbare Anzeige 3,76 wird.

Zum Anpassen: Der auffälligste Unterschied zum Original ist, dass es keine alert()-Fenster mehr gibt und die Seite nach dem Prüfen nicht mehr neu geladen wird. Früher erledigte location.href = location.href das Nachladen und damit auch die neuen Aufgaben — heute macht das die Funktion neueAufgaben() direkt, was schneller ist und eure Eingaben nicht mitten im Üben verwirft. Wollt ihr eine fünfte Rechenart ergänzen, genügen ein weiterer Eintrag in der Liste aufgaben und ein zusätzliches Feld im HTML mit den id-Namen gr-aufgabe5 und gr-eingabe5.