Mathe Trainer 1+2-3

Erstell den kompletten code für eine Browser-app: Hier ist eine detaillierte Beschreibung und Bedienungsanleitung für die „Mathematik-Trainer All-in-One“ Web-App. Diese Dokumentation eignet sich perfekt für Eltern, Lehrkräfte oder zur Präsentation der App-Funktionalität.

📘 App-Beschreibung: Mathematik-Trainer All-in-One
Die Mathematik-Trainer All-in-One ist eine browserbasierte Lernanwendung, die drei zentrale Bereiche des Grundschul-Unterrichts vereint: Lückentexte (Klasse 1), Addition & Subtraktion (Klasse 2) und das kleine Einmaleins.

Das Ziel der App ist es, Rechenfertigkeiten spielerisch zu festigen, Fehler sofort zu korrigieren und durch eine detaillierte Auswertung den Lernfortschritt transparent zu machen. Die App zeichnet sich durch ihre Single-File-Architektur aus – sie benötigt keine Installation, keinen Server und funktioniert auch komplett offline.

🚀 Kernfeatures & Technische Highlights

Drei integrierte Lernmodi Die App passt sich automatisch an das gewählte Niveau an:
🧩 Klasse 1 (Lückentexte): Fokus auf den Zahlenraum bis 20. Die unbekannte Zahl wandert durch die Gleichung (z.B. ? + 4 = 8 oder 9 - ? = 5). Ideal für das Verständnis von Umkehraufgaben.
➕ Klasse 2 (Plus & Minus): Zahlenraum bis 100. Zufällige Addition und Subtraktion. Bei Minus-Aufgaben wird technisch sichergestellt, dass nur positive Ergebnisse entstehen (kein negativer Zahlenraum).
✖️ Einmaleins: Training der Multiplikationstabelle von
1
×
1
1×1 bis
10
×
10
10×10.
2. Intelligente Bedienung & UX
Eigenes Keypad: Eine große, touch-optimierte Tastatur im App-Fenster verhindert das Aufklappen der störenden Systemtastatur auf Smartphones.
Responsive Design: Das Layout erkennt automatisch die Geräteausrichtung (Portrait ↔ Landscape) und passt sich präzise an (Split-View im Querformat).
Safe-Area-Support: Nutzt env(safe-area-inset) für moderne Smartphones mit Notch oder dynamischer Browser-Leiste, sodass Inhalte nicht verdeckt werden.
3. Pädagogisches Feedback & Analyse
Sofort-Feedback: Nach jeder Eingabe erscheint sofort visuelles Feedback (Grün bei Erfolg, Rot bei Fehler) inkl. der korrekten Lösung.
Detaillierte Auswertung: Nach 20 Aufgaben wird ein vollständiger Bericht generiert:
Farbcodierter Erfolgs-Kreis (Prozentwert).
Statistik-Grid (Richtig/Falsch, Gesamtzeit, Ø-Zeit pro Aufgabe).
Vollständige Aufgabentabelle mit individuellem Zeitwert und Ergebnisvergleich.
4. Technische Robustheit
Offline-fähig: Nach dem ersten Laden der Datei funktioniert die App auch ohne Internetverbindung.
Tastatur-Support: Neben dem Touch-Keypad können auch physische Tastaturen (Ziffernblock, Enter, Backspace) genutzt werden.
📖 Bedienungsanleitung

Start & Menü Öffnen Sie die HTML-Datei in einem beliebigen Browser (Chrome, Safari, Firefox, Edge). Sie sehen das Hauptmenü mit drei großen Karten:
Karte	Beschreibung	Zielgruppe
Klasse 1 🧩	Lückentexte im Zahlenraum bis 20. Die „Lücke“ (?) kann am Anfang, in der Mitte oder als Subtrahend stehen.	1. Klasse / Anfänger
Klasse 2 ➕	Plus- und Minus-Aufgaben mit Zahlen von 0 bis 100. Ergebnisse bleiben immer positiv.	2. Klasse / Fortgeschritten
Einmaleins ✖️	Multiplikationstraining (
1
×
1
1×1 bis
10
×
10
10×10).	Alle Klassenstufen
Aktion: Tippen Sie auf eine der Karten, um den entsprechenden Modus zu starten. Der Header und die Farben der App passen sich dem gewählten Thema an (Lila für Klasse 1, Grün für Klasse 2, Blau für Einmaleins).

Während des Trainings Jede Runde besteht aus 20 zufälligen Aufgaben.
Fortschritt: Oben sehen Sie einen Balken, der den Fortschritt in Prozent und als „Aufgabe X von 20“ anzeigt.
Punkte: Rechts oben werden die aktuellen Treffer (✓) und Fehler (✗) live aktualisiert.
Die Aufgabe: In der Mitte wird die Rechenaufgabe groß dargestellt. Bei Lückentexten ist die fehlende Zahl orange und kursiv markiert (?).
Eingabe der Lösung
Sie haben zwei Möglichkeiten, eine Antwort einzugeben:

Via Touch-Keypad (Empfohlen für Tablets/Handys):

Tippen Sie auf die Ziffern 0–9, um Ihre Antwort zu bilden.
Nutzen Sie ⌫ (Backspace), um das letzte Zeichen zu löschen.
Bestätigen Sie mit der großen Taste ✓ Bestätigen.
Via Physische Tastatur (PC/Laptop):

Tippen Sie die Ziffern direkt ein.
Drücken Sie Enter, um die Antwort zu bestätigen.
Nutzen Sie Backspace zum Löschen.
Feedback
Nach Bestätigung der Antwort:

Richtig: Der Bildschirm wird kurz grün, es erscheint „🎉 Richtig!“ und die gelöste Gleichung. Nach 1,4 Sekunden springt die App automatisch zur nächsten Aufgabe.
Falsch: Der Bildschirm wird kurz rot, es erscheint „😔 Falsch!“ und die korrekte Lösung wird angezeigt (z.B. Lösung: 3 + 5 = 8).
3. Die Auswertung
Nach der 20. Aufgabe endet die Runde automatisch und das Ergebnis-Screen wird angezeigt.

Gesamturteil: Ein großer Kreis zeigt Ihre Trefferquote in Prozent an (z.B. „95 % – Super! 🏆“).
Statistiken: Sie sehen, wie viele Aufgaben richtig/falsch waren und wie lange die gesamte Runde dauerte.
Detail-Tabelle: Eine Liste aller 20 Aufgaben zeigt:
Die ursprüngliche Aufgabe.
Die korrekte Lösung.
Ihre eingegebene Antwort (falsche Antworten sind durchgestrichen).
Die Zeit, die Sie für diese spezifische Aufgabe benötigt haben.
4. Navigation nach der Auswertung
Sie haben zwei Optionen:

„Nochmal üben“ 🔄: Startet eine neue Runde im gleichen Modus. (Beispiel: Wenn Sie gerade Einmaleins geübt haben, startet der Button wieder das Einmaleins). Dies ist ideal für Wiederholungen.
„← Zurück zum Menü“: Bringt Sie zurück zur Auswahl der drei Themen, falls Sie den Schwierigkeitsgrad wechseln möchten (z.B. von Klasse 1 zu Einmaleins).