Eine moderne, visuell ansprechende Lernplattform für Mathematik (Klasse 9), die bewusst nicht technisch oder überladen wirkt, sondern zugänglich, motivierend und kinder-, eltern- sowie lehrerfreundlich gestaltet ist.
Mathematik soll hier nicht als trockenes Pflichtfach, sondern als digitales Erlebnis erlebt werden — mit klarer Gestaltung, Gamification-Mechaniken und einer intuitiven Benutzeroberfläche.
Live Beta: https://hatemath.netlify.app/
Im Mittelpunkt steht die Vermittlung mathematischer Inhalte strukturiert entlang eines Lernplans und prüfungsrelevanter Themen. Gleichzeitig werden die sozialen und digitalen Dynamiken moderner Jugendkultur pädagogisch genutzt:
- Wettbewerb und faire Konkurrenz (PvP-Battles)
- Fortschrittssysteme mit sichtbarem Lernweg
- Belohnungen (Coins, Shop-Inhalte, Avatare)
- Intrinsische Motivation durch spielerische Herausforderungen
Ziel ist ein echter Lernmehrwert — nicht nur oberflächliche Gamification.
Der Einstieg erfolgt über einen einfachen Login-Screen. Nutzer wählen einen Login-Namen, unter dem Fortschritt und Erfolge persistent gespeichert werden.
| Aspekt | Aktueller Stand | Geplant für Live-Betrieb |
|---|---|---|
| Authentifizierung | Login-Name ohne Passwort | Passwort + Zwei-Faktor-Authentifizierung |
| Datenspeicherung | Lokal / anonymisiert in der Datenbank | Vollständiges Account-System |
| Profil | Displayname, Avatar, Fortschritt | Erweiterte Profileinstellungen |
Hinweis: Der bewusste Verzicht auf Passwortschutz im Entwicklungsbetrieb reduziert den Setup-Aufwand. Für den produktiven Einsatz mit echten Nutzerdaten sind klassische Sicherheitsmechanismen vorgesehen.
Nach dem Login landet man auf der Quest-Seite — dem zentralen Hub für Lernfortschritt und Navigation.
Die Quest-Seite zeigt den individuellen Fortschritt über alle Lernmodule hinweg. Jede Quest-Karte enthält:
- Kategorie-Tag (Basics, Berechnung, Transformation, Modellierung)
- Schwierigkeitssterne
- Quest-Fortschrittsbalken (0–100 %)
- Coin-Fortschritt und Bounty-Status
- Belohnungen (Quest-Reward und Bounty-Reward)
Von jeder Seite aus erreichbar:
| Werkzeug | Funktion |
|---|---|
| Formelsammlung | Strukturierte Formeln nach Themenbereich |
| Taschenrechner | Floating Calculator während Aufgaben |
| KI-Chat | Tipps und Denkanstöße (coin-basiert) |
| Shop | Avatare, Skins, Tools, KI-Personas u. v. m. |
| Account | Displayname, Avatar, Level |
Die untere Navigationsleiste wechselt zwischen Quests, Blood Dome (PvP) und Shop.
Jedes Lernmodul gliedert sich in drei Bereiche, die unterschiedliche Lernphasen abdecken:
Kompakter Lernbereich mit den wichtigsten Regeln, Definitionen und Beispielen des jeweiligen Themas. Ideal als Einstieg vor den interaktiven Aufgaben.
- Master-Formeln und Merksätze
- Visuelle Übersichten (z. B. Vierecks-Hierarchie)
- Kurze, verständliche Erklärungen
Standardisierte Aufgabenreihen zum Thema. Durch Abschluss werden Coins freigeschaltet.
- Belohnung pro Quest (z. B. 50 Coins)
- Fortschrittsanzeige (Coins gesammelt / Ziel)
- Button „Quiz starten" startet die Aufgabenreihe
Zeitbasierte Herausforderung mit schwierigeren Aufgaben und erhöhtem Einsatz:
- Entry Fee in Coins (z. B. −45 Coins)
- Extra-Reward bei Erfolg (z. B. +300 Coins, einmalig)
- Freischaltung: Quest muss zuerst perfekt abgeschlossen werden
- Status „GESPERRT" bis zur Freischaltung
Während einer Aufgabe stehen je nach Aufgabentyp verschiedene Hilfsmittel zur Verfügung:
- Taschenrechner (floating, jederzeit aufrufbar)
- Formelsammlung (themenbezogene Nachschlagehilfe)
- KI-Hilfe (Tipps gegen Coins — keine vollständigen Lösungen)
Das Interface bleibt bewusst clean und fokussiert: Aufgabe oben, Eingabefeld in der Mitte, Überprüfen-Button unten.
Die Formelsammlung bietet strukturierten Zugriff auf alle relevanten Formeln — jederzeit abrufbar, unabhängig vom aktuellen Modul.
Themenbereiche (Auszug):
| Bereich | Sektionen | Formeln |
|---|---|---|
| Grundlagen | 3 | 10 |
| Potenzen & Reelle Zahlen | 6 | 27 |
| Lineare Funktionen | 1 | 3 |
| Quadratische Funktionen | 5 | 16 |
| Exponentialfunktionen | 1 | 2 |
| Rechtwinkliges Dreieck | 4 | 8 |
| Beliebiges Dreieck | 3 | 3 |
| Vierecke | 4 | 9 |
| Geometrische Körper | 7 | 26 |
| Stochastik | 4 | 8 |
Jede Sektion enthält Formeln mit Beispielen und kurzen Erklärungen — im Spickzettel-Stil, optimiert für schnelles Nachschlagen während Aufgaben.
Die KI dient nicht dazu, Aufgaben vollständig zu lösen. Sie gibt Hilfestellungen, Denkanstöße und Tipps — bewusst so eingestellt, dass Eigenständigkeit beim Lernen gefördert wird.
| Prinzip | Begründung |
|---|---|
| Jede KI-Anfrage kostet Coins | Ressourcenmanagement und bewusster Einsatz |
| Kein Premium-Modell nötig | Schulmathematik Klasse 9 benötigt kein Hochleistungsmodell |
| Manchmal aufwendiger als selbst rechnen | Fördert Eigenständigkeit |
Langfristig soll das Coin-System auch ein Bewusstsein dafür schaffen, dass KI-Computing reale Ressourcen benötigt — ein Aspekt, der in der Cloud-Ära zunehmend relevant wird.
Technisch angebunden über GPT (OpenAI) bzw. Gemini — Details siehe docs/OPENAI_MIGRATION.md.
Kompetitive Lernmodi, in denen Nutzer mathematische Herausforderungen gegeneinander austragen:
- Geschwindigkeit, Genauigkeit und Problemlösungskompetenz im Fokus
- Verschiedene Battle-Modi (Speed Polygon Duel, Angle Meltdown, Power Rush, …)
- Einsatz in Coins, Timer, unterschiedliche Schwierigkeitsgrade
- Realtime-Lobby mit Battle-Signal-System
- Faire Konkurrenzsituationen durch klare Siegbedingungen
Siegbedingungen:
- Anzahl korrekter Antworten (höchste Priorität)
- Zeit als Tie-Breaker bei gleicher Korrektheit
Der Shop ist das Herzstück der Gamification-Ökonomie. Mit verdienten Coins können Nutzer Inhalte freischalten, die Lernen unterstützen oder das Erlebnis personalisieren.
| Kategorie | Inhalt | Screenshot |
|---|---|---|
| Avatare | Profilbilder und Charaktere | (siehe Shop-Übersicht) |
| Effekte | Visuelle Hintergrund-Effekte | Vorschau |
| Skins | UI-Themes (Glass, Neon, Chaos, …) | Skins |
| Tools | Lernhilfen (Formel-Rechner, Schritt-Löser, …) | Tools |
| Gadgets | Spezial-Tastaturen (Potenz-Modus, Parabel-Analyzer, …) | Gadgets |
| Formelsammlungen | Visuelle Varianten der Formelsammlung | Formelsammlungen |
| KI | KI-Personas und Chat-Designs | KI-Personas |
| Gutscheine | Sonderaktionen | — |
Items sind in Common, Rare, Epic und Legendary eingeteilt — analog zu bekannten Spiele-Ökonomien, um Sammel- und Fortschrittsmotivation zu stärken.
Viele Items (besonders Effekte und Skins) können für 5 Coins in einer Live-Vorschau getestet werden, bevor man sie kauft.
Besonderes Augenmerk liegt auf den KI-Personas im Shop — jugendgerechte, humorvolle Charaktere mit eigenem Kommunikationsstil:
| Persona | Stil | Seltenheit |
|---|---|---|
| Insight-KI | Sarkastisch, GLaDOS-artig — herablassend, aber hilfreich | Common (Free) |
| Math MC | Reime, Beat-Flow, Punchlines | Epic |
| Meme-Lord | Erklärt Mathe durch Memes und Ironie | Epic |
| Gym-Bro | Push-Rhetorik, Zahlen wie Gewichte | Rare |
| Hacker | Terminal-Sprache, Mathe als System debuggen | Epic |
| Zocker-Stratege | Skill-Trees, XP, Min-Maxing | Epic |
| Anime-Mentor | Power-Ups und Training Arcs | Epic |
| Bundeskanzler | Politisch absurd, mathematisch kompetent | Epic |
Trotz humorvoller Inszenierung bleibt die primäre Zielsetzung stets die mathematische und pädagogische Förderung — alternative Lernzugänge, die Unterhaltung mit Lernen verbinden.
Die Plattform orientiert sich am Lehrplan Brandenburg, Klasse 9 und deckt aktuell ab:
- Geometrie (Figuren, Winkel, Flächen, Körper, Ähnlichkeit, Alltags-Geometrie)
- Potenzen & Reelle Zahlen (Potenzgesetze, Wurzeln, Gleichungen)
- Quadratische Funktionen (Scheitelpunktform, Parabeln, Anwendungen)
Jedes Segment folgt dem pädagogischen Rhythmus: Spielerischer Einstieg → Vertiefung → Klassischer Abschluss (prüfungstypische Aufgaben). Details in docs/curriculum/LERNKONZEPT.md.
Die Anwendung folgt dem Service-Layer-Pattern — Geschäftslogik getrennt von der UI (React).
- React 19 mit modernen Hooks
- Tailwind CSS — responsives Design, Glasmorphismus
- Vite als Build-Tool
- Auth: Login, Registrierung, Profilverwaltung
- Progress: Quest-Fortschritt, Coins, Bounties
- Battles: Erstellen, Annehmen, Einreichen (Realtime)
- Shop: Käufe, Inventar
- KI:
aiAssistant.cjs— kontextuelle Tipps
npm install
cp .env.example .env # Supabase + OpenAI Keys eintragen
npm run devWeitere Setup-Anleitungen:
math2/
├── App.tsx, index.tsx # React-Einstieg
├── components/ # UI-Komponenten (Battle, Shop, Quest, KI, …)
├── services/ # Quests, Bounties, Battles, Shop-Katalog
├── src/ # Shared Context, Types, Utils
├── netlify/functions/ # Serverless API (Auth, Progress, Battles, KI)
├── public/ # Statische Assets (robots.txt, …)
├── data/ # JSON-Inhaltsdaten
├── scripts/ # Backup, Diagnose, Dev-Skripte
├── tests/ # Vitest & Supabase-Diagnose
├── archive/legacy/ # Alte Referenz-Dateien (nicht im Build)
└── docs/ # Dokumentation, Screenshots, PDFs
├── guides/ # Architektur, Styling, Roadmap
├── curriculum/ # Lernkonzept, Lehrplan, Spickzettel
├── deployment/ # Netlify, Release, Migrationen
├── reports/ # Fix-Reports, Testprotokolle
├── assets/ # README-Screenshots
└── lern_kanon/ # PDF-Material aus dem Unterricht
| Dokument | Inhalt |
|---|---|
| docs/README.md | Übersicht aller Dokumentation |
| docs/curriculum/LERNKONZEPT.md | Pädagogischer Aufbau der Lernsegmente |
| docs/guides/ARCHITEKTUR.md | Detaillierte Systemarchitektur |
| docs/guides/DEVELOPMENT_PLAN.md | Entwicklungs-Roadmap |
| docs/USER_FLOW.md | Nutzerfluss durch die App |
| docs/TESTING.md | Test-Checklisten |
Privates Lernprojekt — nicht für den kommerziellen Einsatz vorgesehen.
Screenshots und UI-Design © Projekt MathMaster Neun.