Web - Kompetenzcheck JavaScript & Datenspeicherung: Das Quiz

Das Mathequiz

• Grundgerüst ist eine Seite mit neun nummerierten Feldern (Stell dir ein Spielbrett vor)
• Aktuelle Spielstand wird dabei dadurch gekennzeichnet, dass das entsprechende Feld, auf dem der Spieler steht, mit einem farbigen Hintergrund markiert ist.
• Wenn Spieler einen Zug durchführen will, muss er auf einen Button unter dem Spielfeld klicken
  • Daraufhin wird ihm eine Rechenaufgabe gestellt
  • Diese sollen jeweils auf Zufallswerten basieren
    • Grundsätzliche Rechenarten für jedes Feld sind fest vorgegeben (siehe Punkt: #Schwierigkeitsgrade der Mathe-Aufgaben)
    • Schwierigkeitsgrad soll immer weiter ansteigen
    • Wenn Spieler Aufgabe richtig gelöst hat, rückt er ein Feld vor
    • Wenn Ergebnis falsch ist, bleibt er auf der Position
• Zweiter Button für Spiel neu starten

Beispiele von anderen TeilnehmerInnen

Grundaufbau

1. Grundaufbau der Seite festlegen (Spielfeld 1 – 9 erstellen)
2. Jedes Feld erhält eine ID auf die im JS zugegriffen werden kann
3. Buttons unter dem Spielfeld positionieren und Überschrift setzen
4. JS Code in eigene Datei speichern und mit HTML Seite verlinken
5. Spielstand:
   1. Variable für Spielstand deklarieren – den sollte man zu jedem Zeitpunkt im Spiel kennen
   2. Spielstand soll im localStorage mit richtigem Wert gespeichert werden
   3. Entsprechendes Feld laut Wert im localStorage farblich markieren

Funktion für die Buttons

1. Zug ausführen (function nextQuestion())
2. Besucher wird eine Frage gestellt
3. Die eigentliche Frage steht in einer eigenen Funktion (function askQuestion(score))
4. hier wird nur die Funktion askQuestion(score) aufgerufen
5. die Funktion für die Quizfragen sollte so aufgebaut sein:
   1. Hat als Parameter/ Übergabewert den Spielstand
   2. Liefert dem Anwender eine passende (je nach Schwierigkeitsgrad) Frage
   3. Überprüft das Ergebnis gleich. Ist es richtig gibt sie den Wert true zurück, ansonsten false.
6. User Eingabe überprüfen, den Spielstand dementsprechend anpassen, auf ein neues Feld weiterrücken (wenn die Antwort richtig war, wenn nicht nochmal eine Quizfrage aus dem selben Schwierigkeitsgrad stellen)
7. Sonderfall: Ende des Spieles: passende Nachricht für das Spielende ausgeben (z.B.: gz Einstein 🧮 du hast das Mathequiz gelöst)
8. Zweiter Button für den Neustart des Quizzes (function newGame())
   1. bisherigen Fortschritt (Markierungen auf dem Spielfeld) entfernen
   2. Spielstand auf Feld 1 setzen, um ein neues Spiel zu beginnen
   3. Hintergrund von Feld 1 setzen

Die Fragen erstellen

1. Zufallswerte kommen zum Einsatz
2. Grundsätzliche Art der Aufgabenstellung bei jedem Spielfeld fest vorgegeben sein, der Schwierigkeitsgrad steigt von Frage zu Frage
3. Die Funktion (function askQuestion(score)) erhält den Spielstand als Übergabeparameter

• Genereller Aufbau der Funktion
  • Frage stellen
  • Überprüfung der Eingabe des Spielers
  • Wenn richtig, Funktion gibt entsprechende Nachricht aus und liefert den Wert true zurück
  • Wenn falsch, entsprechende Nachricht ausgeben und false zurück geben

Schwierigkeitsgrade der Mathe-Aufgaben

1. Aufgabe: einfache Addition mit Zufallszahlen zwischen 1 und 50
2. Aufgabe: Subtraktion ohne negativen Ergebnis. Erste Zahl im Bereich 51 bis 100, zweite Zahl zwischen 1 und 50
3. Aufgabe: Multiplikation
4. Aufgabe: Division hier wird der Divisor und das Ergebnis per Zufall bestimmt, da sonst komplizierte Nachkommastellen berechnet werden müssen
5. bis 7. Aufgabe: Berechnungen mit drei verschiedenen Zufallsvariablen
8. Aufgabe: Quadratwurzel eines Werts (Math.pow()) Sinnvoll auch hier das Ergebnis per Zufallswert zu bestimmen. Stellt sicher, dass es eine ganze Zahl ist. Für die Aufgabenstellung wird dieser dann mit sich selbst multipliziert
9. Aufgabe: Logarithmus eines Werts (das JavaScript Math Object wird euch dabei helfen ;))

Math.log(x) //returns the natural logarithm of x.
Math.log2(x) //returns the base 2 logarithm of x.
Math.log10(x) //returns the base 10 logarithm of x.