TCCD Quiz Trainer

Interaktiver Quiz-Trainer für die TYPO3 CMS Certified Developer (TCCD) Zertifizierung.

🎯 Features

🎯 Category Mastery System (NEU in v4.5.2)

• ✅ 5-Stufen Mastery Level: Grundlagen → In Übung → Sicher → Sehr gut → Meisterlich
  • Level 1 (⭐): Grundlagen - 1-20 Fragen oder <50%
  • Level 2 (⭐⭐): In Übung - 20-50 Fragen und 50-60%
  • Level 3 (⭐⭐⭐): Sicher - 50-100 Fragen und 60-75%
  • Level 4 (⭐⭐⭐⭐): Sehr gut - 100+ Fragen und 75-85%
  • Level 5 (⭐⭐⭐⭐⭐): Meisterlich - 150+ Fragen und 85%+ 🏆
• 🎨 TYPO3-Farbpalette: Orange für Meisterlich, Grün für Sehr gut, Blau für Sicher
• 📈 Trend-Analyse: improving/stable/declining/new basierend auf letzten 10 Fragen
• 🏆 Mastery Overview: Level-Verteilung, Gesamt-Statistiken, Performance-Highlights
• 📊 Detail-Karten: Pro Kategorie mit Fortschrittsbalken zum nächsten Level
• 👁️ Visuelle Hierarchie: Farbcodierte Badges und Borders, Sterne-Darstellung

💪 Challenge Mode System (NEU in v4.4.11)

• ✅ Tägliche & Wöchentliche Challenges: Zeitlich begrenzte Herausforderungen
  • Tägliche Challenges wechseln um Mitternacht
  • Wöchentliche Challenges wechseln jeden Montag
  • 10+ verschiedene Challenge-Typen
• 🎯 Challenge-Typen: Speed-Runs, Perfect, Mixed-Master, Category-Conqueror, Accuracy, Endurance
  • Security Speed Run (10 Fragen in 3 Min, 80%+)
  • Extension Sprint (15 Fragen in 5 Min, 75%+)
  • Fluid/TypoScript Blitz (10 Fragen in 4 Min, 80%+)
  • Perfekte Programmierung (20 Fragen, alle richtig)
  • Category Conqueror (80 Fragen aus allen Kategorien, 80%+)
  • Endurance Master (100 Fragen, 75%+)
• 🏆 Belohnungen: Bonus-XP (100-800 XP) und spezielle Titel
  • "Speed Demon", "Code Perfectionist", "Category Master"
• 📊 Challenge-Integration: Direkt aus Cards startbar mit CheatMode-Support
• 🔔 Benachrichtigungen: Challenge-Completion im GamificationModal
• 📈 Fortschritts-Tracking: Live-Progress-Anzeige auf Challenge-Cards

📱 PWA Navigation optimiert (v4.4.11)

• ✅ Expandierbares Menü: Gamification-Bereiche in einem Icon vereint
  • 3 Haupt-Icons statt 5: Quiz | Stats | Settings
  • Stats-Icon öffnet Popup-Menü nach oben
  • 4 Unterpunkte: Statistik, Trophäen, Challenges, Level
• 🎯 Visuelles Feedback: Kleines Badge-Icon zeigt aktiven Unterbereich
• ✨ Smooth Animationen: Slide-up mit gestaffelten Item-Delays
• 💡 Auto-Close: Menü schließt bei Klick außerhalb

🎯 Level-System & XP-Progression (v4.3.4)

• ✅ 8 Erfahrungsstufen: Junior Developer → CMS Master
  • Level 1: Junior Developer (🌱 Sprössling)
  • Level 2: Developer (💻 Computer)
  • Level 3: Senior Developer (🏅 Medaille)
  • Level 4: Team Lead (👥 Gruppe)
  • Level 5: TYPO3 Specialist (⚙️ Zahnrad)
  • Level 6: Solution Architect (🏛️ Gebäude)
  • Level 7: TYPO3 Expert (⭐ Stern)
  • Level 8: CMS Master (👑 Krone)
• ⭐ XP-System: Sammle Experience Points durch Quiz-Sessions
  • +10 XP pro richtiger Antwort
  • +20 XP für schwere Fragen korrekt
  • +50 XP Bonus für bestandenes Quiz (≥70%)
  • +100 XP Bonus für perfekte Quiz (100%)
  • -5 XP für falsche Antworten
• 🎆 Level-Up Celebration: Großes Modal mit passendem Icon und Sound
  • Applaus-Sound beim Erreichen eines neuen Levels
  • Animierte Konfetti und Icon-Darstellung
  • Sequentielle Anzeige mit Achievements
• 🎯 Level-Seite: Detaillierte Übersicht mit allen Levels
  • Aktueller Fortschritt und XP-Balken
  • XP-Vergabe-Regeln erklärt
  • Alle Level mit Icons und XP-Anforderungen
• 📱 PWA Integration: Level in Bottom Navigation (5 Menüpunkte)

🔥 Streak-System & Lernfortschritt (v4.2.9)

• ✅ Streak Counter: Tägliche Lern-Serien verfolgen
  • Kompakte Ansicht auf HomePage
  • Detaillierte Ansicht in Statistiken
  • Aktueller Streak & Rekord-Anzeige
  • Motivations-Texte & Warnung bei Unterbrechung
• 📅 Aktivitäts-Heatmap: GitHub-Style Visualisierung
  • Letzte 12 Wochen Lernaktivität
  • 5 Intensitäts-Level in TYPO3-Orange
  • Tooltip mit Details (Datum, Anzahl Quiz)
  • Monatslabels & Wochentags-Grid
  • Mobile-optimiert mit horizontalem Scroll
• ⏱️ Zeit-Tracking erweitert: Neue Dauer-Spalte in Quiz-Sessions
  • Gesamtzeit & Durchschnitt pro Frage
  • Vergleich zum Gesamtdurchschnitt (↑ rot / ↓ grün)
  • Tooltip mit Durchschnittswert
• 🎨 Dark Mode perfektioniert: Alle Kontrast-Probleme behoben
  • StreakCounter, Heatmap, HomePage, Trophäen
  • Pagination aktive Seite gut lesbar
  • Einheitliche Opacity-Werte statt text-muted

🏆 Gamification & Motivation (v4.1.0)

• ✅ Trophäen-System: 46 verschiedene Achievements in 7 Kategorien
  • 🔥 Streak (3, 7, 14, 30, 100 Tage)
  • 📊 Quantität (50, 100, 250, 500, 1000 Fragen)
  • ⭐ Qualität (Perfekte Quiz, Bestandene Sessions)
  • 📚 Kategorien (90%+ in einzelnen Bereichen)
  • ⚡ Speed (Schnelle Antworten bei hoher Genauigkeit)
  • 🏃 Ausdauer (30, 50, 100 Fragen pro Quiz)
  • 💪 Comeback (Nach Fehlversuchen bestehen)
• 🎺 Achievement-Feier: Prominentes Modal mit Fanfare-Sound und Animationen
  • Konfetti-Effekt, Trophy-Bounce, Glow-Animation
  • Kategorie-spezifische Farben
  • Multi-Achievement Support (nacheinander)
• 📊 Fortschritts-Tracking: Aktueller & längster Streak, Level-System vorbereitet
• 🏆 Trophäen-Seite: Vollständige Übersicht mit Filtern und Fortschrittsbalken

Quiz-Modi

• ✅ Übungsmodus (Dry-Run): Direkte Rückmeldung nach jeder Frage mit ausführlicher Erklärung
• ✅ Prüfungsmodus: Auswertung erst am Ende des Quiz (wie in der echten Prüfung)
• ▶️ Quiz fortsetzen: Unterbrochene Quiz nahtlos fortsetzen

Antwort-Validierung (NEU in v4.1.0)

• ⚠️ Intelligente Prüfung: System warnt bei falscher Anzahl ausgewählter Antworten
• 💡 Info-Hinweis: Zeigt Anzahl der richtigen Antworten pro Frage
• ✅ Grammatisch korrekt: Singular/Plural-Anpassung in Meldungen

Intelligentes Lernsystem

• 📊 Adaptive Fragegewichtung: Schwierige Fragen erscheinen häufiger
• 🎯 Erfolgsrate-basiert: Fragen mit niedriger Erfolgsrate (< 30%) werden 4x häufiger gezeigt
• 📈 Lernfortschritt-Tracking: Detaillierte Statistiken zu jedem Themenbereich
• 📚 Historie: Alle Quiz-Sessions werden gespeichert und ausgewertet
• 📖 PDF-Referenzen: Jede Frage zeigt die Seitenzahl aus dem TCCD Study Guide

Statistiken & Fortschritt

• 📊 Erweiterte Filter: Nach Modus, Status (auch offene!) und Ergebnis filterbar
• 📄 Pagination: 10 Sessions pro Seite mit vollständiger Navigation
• 🔍 Unbegrenzt: Alle Quiz-Sessions werden angezeigt (keine Limitierung)
• 📈 Offene Quizzes: Auch ohne abgeschlossene Sessions sichtbar und löschbar
• 📈 Visuelle Darstellung: Farbige Hinterlegung für bestandene/nicht bestandene Quiz
• ⏱️ Zeit-Tracking: Präzise Zeitmessung mit Pause-Erkennung
• 🎯 Prüfungs-Tempo-Analyse: Hochrechnung auf Prüfungsbedingungen (75 Fragen / 90 Min)
• 📈 Zeit-Trend-Diagramm: Visualisierung der Entwicklung über Zeit
• 🚀 Verbesserungs-Tracking: "X% schneller geworden"

Offene Quiz-Verwaltung

• 🎯 Limit: Maximal 5 offene Quiz gleichzeitig
• 📋 Übersicht: Alert-Banner zeigt Anzahl offener Sessions
• ▶️ Fortsetzen: Direkter Zugriff zum Fortsetzen auf Homepage und NewQuiz
• 🗂️ Auswahl-Modal: Bei mehreren offenen Sessions wählbar (sortiert nach ältestem)
• ⚠️ Validierung: Klare Fehlermeldung wenn Limit erreicht

PWA-Funktionalität

• 📱 Native App Experience: Optimierte Bottom Navigation
  • 🎯 Quiz, 📊 Statistik, 🏆 Trophäen, ⚙️ Einstellungen
  • Home-Icon im Header (nur PWA, nicht auf Startseite)
  • Kein Home-Tab mehr nötig (über Titel erreichbar)
• 🌗 Dark/Light Mode: Automatische System-Erkennung oder manuell wählbar
• 💾 Offline-fähig: Funktioniert ohne Internetverbindung
• 🔄 Auto-Update: Benachrichtigung bei neuen Versionen
• 📲 Installierbar: Als App auf Desktop und Mobile

Flexible Konfiguration

• 🔧 Schwierigkeitsgrade: Einfach, Mittel, Schwer, Gemischt
• 🔢 Anzahl der Fragen: 5-75 (echte Prüfung hat 75 Fragen)
• 📋 Kategorien: Aus dem offiziellen TCCD Study Guide (3. Edition)

Benutzerfreundlichkeit

• 🚀 Automatische Initialisierung: Fragen werden beim ersten Start automatisch geladen
• 🎨 Responsive Design: Funktioniert auf allen Geräten
• ⚡ Schnell: Optimierte Performance mit Vite & Vendor-Chunking
• 🔢 Versionierung: Automatisches Version-Tracking im Footer
• 👤 Autor-Info: Kontaktinformationen in den Einstellungen

🎮 Entwickler-Tools (v4.1.0)

• 🎮 CheatMode: Schnelles Testing von Achievements und Statistiken
  • Aktivierbar über CHEAT_MODE_ENABLED in /src/config.ts
  • Gelber "🎮 CheatMode starten" Button auf NewQuizPage
  • Cheat-Button im Quiz mit Modal für Ergebnis (✅/❌) und Zeit (⚡⏱️🐌)
  • Randomisierte Defaults (80% richtig, zufällige Zeit)
  • Automatische Antwort-Simulation für schnelles Durchlaufen
  • ⚠️ Vor Production-Deploy deaktivieren!

📚 Inhalt

Die App enthält aktuell 113 Prüfungsfragen aus folgenden Kategorien:

1. Programming Basics (10 Fragen)
2. Version Control & Package Management (14 Fragen)
3. General TYPO3 Knowledge (12 Fragen)
4. TYPO3 Core Architecture & APIs (14 Fragen)
5. Extension Software Architecture (14 Fragen)
6. Building TYPO3 Extensions (24 Fragen)
7. Templating and Outputs (15 Fragen)
8. Security (8 Fragen)

Alle Fragen basieren auf dem TCCD Study Guide (3rd Edition) von Michael Schams.

🚀 Installation & Setup

Voraussetzungen

• Node.js (v18 oder höher)
• DDEV (für lokale Entwicklung)

Installation

# Dependencies installieren
ddev npm install

# Entwicklungsserver starten
ddev npm run dev

# Production Build erstellen
ddev npm run build

# DDEV starten
ddev start

Build-Varianten & Versionierung

# Interaktives Version-Bump + Build
ddev npm run build

# Build ohne Version-Bump
ddev npm run build:no-bump

# Nur Version erhöhen
ddev npm run bump              # Interaktiv
ddev npm run bump:patch        # 4.1.0 → 4.1.1
ddev npm run bump:minor        # 4.1.0 → 4.2.0
ddev npm run bump:major        # 4.1.0 → 5.0.0

🔧 Technologie-Stack

• Frontend: React 18 + TypeScript
• Build-Tool: Vite 5 mit optimiertem Vendor-Chunking
• UI Framework: Bootstrap 5 + React-Bootstrap
• Routing: React Router v6
• Datenbank: Dexie.js v3 (IndexedDB)
• PWA: vite-plugin-pwa mit Workbox
• Sound: Web Audio API mit MP3-Fallback
• Styling: TYPO3 Brand Guidelines

📖 Weiterführende Ressourcen

• TYPO3 Documentation
• TCCD Syllabus
• TCCD Study Guide (Buch)
• React Documentation
• Bootstrap Documentation
• Dexie.js Documentation
• Vite Documentation

📋 Versionshistorie

Aktuelle Version: 4.5.2 - Category Mastery System mit TYPO3-Farbpalette

📝 Vollständigen Changelog ansehen

Highlights der letzten Versionen:

• v4.5.2 - 🎯 Category Mastery: 5 deutsche Mastery-Level, TYPO3-Farbpalette mit Orange, Trend-Analyse
• v4.4.11 - 💪 Challenge Mode: Tägliche/wöchentliche Challenges, Expandable PWA Menu, Sticky Navigation
• v4.3.4 - 🎯 Level-System: 8 Level, XP-Vergabe, Level-Icons, vereinheitlichtes Benachrichtigungssystem
• v4.2.9 - 🔥 Streak-System: Counter, Heatmap, Zeit-Tracking, Dark Mode Fixes
• v4.1.0 - 🏆 Gamification: 46 Trophäen, Achievement-Feier, Antwort-Validierung, CheatMode
• v3.10.1 - ⏱️ Zeit-Tracking: Präzise Messung, Prüfungs-Tempo-Analyse, Trend-Diagramm
• v3.9.0 - 🎨 TYPO3 Brand Guidelines, erweiterte Fragenverwaltung, PDF-Navigation

🐛 Troubleshooting

Problem: Trophäen werden nicht freigeschaltet

• Browser-Konsole öffnen (F12)
• Schaue nach 🏆 Neue Achievements: [...]
• Datenbank-Version prüfen (sollte v3 sein)
• Optional: IndexedDB löschen und neu initialisieren

Problem: Build schlägt fehl

ddev exec rm -rf node_modules
ddev npm install
ddev npm run build

Problem: Datenbank lässt sich nicht initialisieren

• In Einstellungen "Statistiken zurücksetzen"
• Seite neu laden

🤝 Beitragen

Weitere Fragen aus dem Study Guide können jederzeit hinzugefügt werden. Die modulare Struktur ist darauf ausgelegt, leicht erweiterbar zu sein.

📄 Lizenz

Dieses Projekt basiert auf dem offiziellen TCCD Study Guide (3rd Edition) von Michael Schams.

Die Fragen und Inhalte sind ausschließlich für Lernzwecke bestimmt.

⭐ Credits

• TCCD Study Guide: Michael Schams
• TYPO3: TYPO3 Association
• Icons & Design: Bootstrap 5
• Entwickler: Marko Röper-Grewe (marko.roeper-grewe@udg.de)

---

Viel Erfolg bei deiner TCCD-Zertifizierung! 🎓🚀