/mathe-trainer-1-2-3
prompt.txt
01Erstell 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.
02
03📘 App-Beschreibung: Mathematik-Trainer All-in-One
04Die 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.
05
06Das 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.
07
08🚀 Kernfeatures & Technische Highlights
09
10Drei integrierte Lernmodi Die App passt sich automatisch an das gewählte Niveau an:
11🧩 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.
12➕ 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).
13✖️ Einmaleins: Training der Multiplikationstabelle von
141
15×
161
171×1 bis
1810
19×
2010
2110×10.
222. Intelligente Bedienung & UX
23Eigenes Keypad: Eine große, touch-optimierte Tastatur im App-Fenster verhindert das Aufklappen der störenden Systemtastatur auf Smartphones.
24Responsive Design: Das Layout erkennt automatisch die Geräteausrichtung (Portrait ↔ Landscape) und passt sich präzise an (Split-View im Querformat).
25Safe-Area-Support: Nutzt env(safe-area-inset) für moderne Smartphones mit Notch oder dynamischer Browser-Leiste, sodass Inhalte nicht verdeckt werden.
263. Pädagogisches Feedback & Analyse
27Sofort-Feedback: Nach jeder Eingabe erscheint sofort visuelles Feedback (Grün bei Erfolg, Rot bei Fehler) inkl. der korrekten Lösung.
28Detaillierte Auswertung: Nach 20 Aufgaben wird ein vollständiger Bericht generiert:
29Farbcodierter Erfolgs-Kreis (Prozentwert).
30Statistik-Grid (Richtig/Falsch, Gesamtzeit, Ø-Zeit pro Aufgabe).
31Vollständige Aufgabentabelle mit individuellem Zeitwert und Ergebnisvergleich.
324. Technische Robustheit
33Offline-fähig: Nach dem ersten Laden der Datei funktioniert die App auch ohne Internetverbindung.
34Tastatur-Support: Neben dem Touch-Keypad können auch physische Tastaturen (Ziffernblock, Enter, Backspace) genutzt werden.
35📖 Bedienungsanleitung
36
37Start & Menü Öffnen Sie die HTML-Datei in einem beliebigen Browser (Chrome, Safari, Firefox, Edge). Sie sehen das Hauptmenü mit drei großen Karten:
38Karte Beschreibung Zielgruppe
39Klasse 1 🧩 Lückentexte im Zahlenraum bis 20. Die „Lücke“ (?) kann am Anfang, in der Mitte oder als Subtrahend stehen. 1. Klasse / Anfänger
40Klasse 2 ➕ Plus- und Minus-Aufgaben mit Zahlen von 0 bis 100. Ergebnisse bleiben immer positiv. 2. Klasse / Fortgeschritten
41Einmaleins ✖️ Multiplikationstraining (
421
43×
441
451×1 bis
4610
47×
4810
4910×10). Alle Klassenstufen
50Aktion: 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).
51
52Während des Trainings Jede Runde besteht aus 20 zufälligen Aufgaben.
53Fortschritt: Oben sehen Sie einen Balken, der den Fortschritt in Prozent und als „Aufgabe X von 20“ anzeigt.
54Punkte: Rechts oben werden die aktuellen Treffer (✓) und Fehler (✗) live aktualisiert.
55Die Aufgabe: In der Mitte wird die Rechenaufgabe groß dargestellt. Bei Lückentexten ist die fehlende Zahl orange und kursiv markiert (?).
56Eingabe der Lösung
57Sie haben zwei Möglichkeiten, eine Antwort einzugeben:
58
59Via Touch-Keypad (Empfohlen für Tablets/Handys):
60
61Tippen Sie auf die Ziffern 0–9, um Ihre Antwort zu bilden.
62Nutzen Sie ⌫ (Backspace), um das letzte Zeichen zu löschen.
63Bestätigen Sie mit der großen Taste ✓ Bestätigen.
64Via Physische Tastatur (PC/Laptop):
65
66Tippen Sie die Ziffern direkt ein.
67Drücken Sie Enter, um die Antwort zu bestätigen.
68Nutzen Sie Backspace zum Löschen.
69Feedback
70Nach Bestätigung der Antwort:
71
72Richtig: 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.
73Falsch: Der Bildschirm wird kurz rot, es erscheint „😔 Falsch!“ und die korrekte Lösung wird angezeigt (z.B. Lösung: 3 + 5 = 8).
743. Die Auswertung
75Nach der 20. Aufgabe endet die Runde automatisch und das Ergebnis-Screen wird angezeigt.
76
77Gesamturteil: Ein großer Kreis zeigt Ihre Trefferquote in Prozent an (z.B. „95 % – Super! 🏆“).
78Statistiken: Sie sehen, wie viele Aufgaben richtig/falsch waren und wie lange die gesamte Runde dauerte.
79Detail-Tabelle: Eine Liste aller 20 Aufgaben zeigt:
80Die ursprüngliche Aufgabe.
81Die korrekte Lösung.
82Ihre eingegebene Antwort (falsche Antworten sind durchgestrichen).
83Die Zeit, die Sie für diese spezifische Aufgabe benötigt haben.
844. Navigation nach der Auswertung
85Sie haben zwei Optionen:
86
87„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.
88„← 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).