Zum Inhalt

🚗 Auto Quiz - Projekt Dokumentation

Willkommen zur Dokumentation des Auto Quiz Projekts. Diese Anwendung ist ein interaktives Quiz, bei dem Nutzer Automodelle anhand von Bildern erraten müssen.

Übersicht

Das Projekt ist eine Angular Single Page Application (SPA), die moderne Angular-Features wie Standalone Components verwendet.

Ziel der Anwendung

Spielerisch das Wissen über verschiedene Automarken und Modelle testen und verbessern.

Funktionen der App

Die Anwendung bietet folgende Hauptfunktionen:

  1. Quiz Modus: Endlose Fragen mit Bildern von Autos.
  2. Score Tracking: Verfolgung von richtigen und falschen Antworten.
  3. Admin Bereich: Ein geschützter Bereich für Verwaltung (Demo).
  4. Responsive Design: Funktioniert auf Desktop und Mobile.

Technische Architektur

Projektstruktur

Die Anwendung ist modular aufgebaut:

src/app/
├── quiz/           # Hauptkomponente für das Spiel
├── admin/          # Geschützter Admin-Bereich
├── contact/        # Kontaktseite
├── services/       # Logik & Datenhaltung (Game Service)
└── guards/         # Routen-Schutz (AuthGuard)

Komponenten Details

Quiz Komponente (quiz.ts)

Dies ist das Herzstück der Anwendung.

  • Funktion: Lädt Fragen, prüft Antworten, zeigt Ergebnisse.
  • Logik: Nutzt den Game Service für den State.
  • UI: Zeigt Bild, 4 Antwortmöglichkeiten und Scoreboard.
Admin Komponente (admin.ts)

Eine Demonstrations-Komponente für geschützte Routen.

  • Zugriff nur möglich, wenn der AuthGuard "True" zurückgibt.

Security & Routing

Das Routing wird in app.routes.ts definiert. Wir nutzen einen Guard, um bestimmte Bereiche zu schützen.

AuthGuard

Der authGuard ist eine einfache Implementierung eines CanActivateFn.

Sicherheitshinweis

Der aktuelle Guard nutzt ein einfaches Browser-Popup (confirm) zur Simulation. In einer echten App würde hier ein echter Authentifizierungs-Service (z.B. OAuth) stehen.

// guards/auth.guard.ts
export const authGuard: CanActivateFn = (route, state) => {
  const isAdmin = confirm('SECURITY CHECK: Bist du ein Admin?');
  return isAdmin; // True = Zugriff erlaubt, False = Blockiert
};

Datenhaltung (Game Service)

Der Game Service (services/game.ts) fungiert als zentrale Datenquelle.

Der Service hält eine Liste von Autos und generiert dynamisch Fragen.

  • allCars: Array mit allen verfügbaren Automodellen.
  • similarCars: Mapping für plausible falsche Antworten (Distractors), um das Quiz schwieriger zu machen.

Wichtige Funktionen des Services:

  • startNewGame(): Setzt Zähler zurück.
  • getNextQuestion(): Wählt zufällig ein Auto und 3 falsche Antworten aus.
  • checkAnswer(): Validiert die Eingabe.

Installation & Start

Befolge diese Schritte, um das Projekt lokal auszuführen:

  1. Repository klonen
  2. Abhängigkeiten installieren: 
    npm install
  3. Server starten: 
    ng serve
# oder
npm start
  4. Öffnen: Navigiere zu http://localhost:4200