VideoBattle
VideoBattle
Video Battle – KI-Lernquiz-Plattform
Übersicht
- Video Battle ist eine webbasiertes Lernspiel, das aus beliebigen YouTube-Videos automatisch Quizfragen erzeugt.
- Lehrkräfte („Hosts“) können ein Video eingeben, ein Altersband auswählen und per KI (Gemini) genau 10 Multiple-Choice-Fragen generieren lassen.
- Das Spiel eignet sich für Schulen, Hochschulen und lebenslanges Lernen – als moderne Alternative zu Kahoot.
- Spieler:innen treten per Code oder QR-Code bei und beantworten live auf ihren Geräten, während der Host die Sitzung steuert.
Kernfunktionen
- Quiz-Generierung: Eingabe einer YouTube-URL; die Plattform analysiert Inhalte (Bild + Ton) und erzeugt 10 altersgerechte Fragen mit je 4 Antwortoptionen und einer korrekten Antwort.
- Altersbänder: Auswahl zwischen den Stufen „8–10“, „11–14“, „15–18“, „Hochschule“ und „Allgemein“, um den Schwierigkeitsgrad anzupassen.
- Voransicht: Der Host kann alle generierten Fragen anzeigen lassen und bei Bedarf bearbeiten oder neu generieren.
- Session-Erstellung: Nach Bestätigung des Quiz startet der Host eine Live-Session. Es wird eine Session-ID und ein sechsstelliger Code erzeugt; zusätzlich wird ein QR-Code bereitgestellt.
- Beitritt: Lernende geben den Code ein oder scannen den QR-Code und wählen ein Pseudonym, um dem Spiel beizutreten – ohne zwingende Registrierung.
- Spielablauf:
- Das Video kann optional angesehen werden (überspringbar).
- Alle 10 Fragen werden nacheinander gestellt. Jede Frage hat ein Zeitlimit (standardmäßig 10 s).
- Erst wenn alle geantwortet haben oder das Zeitlimit abläuft, zeigt der Host das Zwischenergebnis samt Top‑10‑Leaderboard.
- Punkte berechnen sich aus Korrektheit, Schnelligkeit und Antwortstreak (ähnlich Kahoot).
- Nach der letzten Frage erscheint eine Rangliste; Spieler:innen sehen ihren Score und ihre Platzierung.
Gamification & Belohnung
- Punkte-Konto: Angemeldete Nutzer:innen sammeln Punkte dauerhaft; ein Dashboard zeigt gespielte Battles, erreichte Scores und Badges.
- Abzeichen & Levels: Optionales Belohnungssystem mit Abzeichen für Erfolge (z.B. „100 Fragen richtig“) und Levels zur dauerhaften Motivation.
- Lehrendeinstellungen: Hosts können Belohnungen definieren (z.B. zusätzliche Aufgaben, Bonusmaterial, Zertifikate).
Technik & Architektur
- Frontend:
- Realisiert mit Next.js (React) und TypeScript.
- Modernes Designsystem (Tailwind CSS) mit Dark/Light‑Mode, hohen Kontrasten und responsiver Benutzeroberfläche.
- Zustandsverwaltung via Zustand-Store für Quiz und Spielstatus.
- Framer Motion sorgt für subtile Animationen; QR-Code-Generierung mit qrcode.react.
- Backend:
- Implementiert als NestJS-Anwendung (TypeScript).
- Endpunkte für die Quiz-Erstellung (`POST /quizzes/createFromVideo`), Sessions (`POST /sessions`) und das Beitreten (`POST /sessions/join`).
- Datenmodell für Quizfragen (Index, Text, 4 Optionen, korrekter Index, optional rationale und Zeitstempel).
- In der Minimalversion werden Demo-Fragen aus einer Datei geliefert; die Integration der Gemini-API ist vorbereitet.
- Sessions werden in Memory gespeichert; jeder Session-Code ist sechs Zeichen lang und wird aus der ID abgeleitet.
- OpenAPI-Spezifikation: Eine vollständige `openapi.yaml` dokumentiert alle REST-Endpunkte und die Datenstrukturen.
- Monorepo-Struktur:
- `apps/web/` – Next.js-App mit Seiten: Startseite, Host-Setup, Host-Dashboard, Join-Seite, Spielerseite.
- `apps/api/` – NestJS-Backend mit Modulen für Quiz und Sessions; `openapi.yaml`.
- `packages/` – geteilte Konfigurationen wie TypeScript-Basis.
- Konfigurationsdateien (`tailwind.config.ts`, `tsconfig.json`, `.env.example`) erleichtern den Einstieg.
- Start & Entwicklung:
- Abhängigkeiten via pnpm installieren (`pnpm install`).
- Frontend starten: `pnpm dev:web` (läuft auf Port 3000).
- Backend starten: `pnpm dev:api` (läuft auf Port 4000).
Benutzeroberfläche
- TopBar: Navigationsleiste mit Links zu Start, Host und Beitreten; Dark‑Mode-Schalter.
- Landing Page: Erklärung der Plattform, CTAs zum Host-Start und Beitreten, Demo-Karte mit Beispiel-Frage und Leaderboard.
- Host-Setup: Formulareingaben für Video-URL und Altersband; Vorschau der generierten Fragen; Buttons zum Starten der Session.
- QR-Join: Karte mit QR-Code und Session-Code; bietet Link zum Kopieren.
- Host‑Dashboard: Anzeige der aktuellen Frage, Fortschrittsbalken, Antwortoptionen, Button „Nächste Frage“ und Top‑10-Liste.
- Spieleransicht: Frageanzeige mit vier großen Antwortfeldern; farbliche Rückmeldung für richtig/falsch; Fortschrittsbalken und aktueller Score.
- Ergebnisanzeige: Nach Abschluss aller Fragen wird der Gesamtscore angezeigt und der Spieler kann zur Startseite zurückkehren.
Erweiterungsmöglichkeiten
- Echtzeitkommunikation via WebSockets für sofortige Synchronisation zwischen Host und Spielern.
- Authentifizierung (E-Mail, Telefon, SSO) und Verwaltung von Klassen und Gruppen.
- Persistente Datenbanken (PostgreSQL) und Caching (Redis) für Skalierung.
- Anbindung an Gemini zur echten Videoanalyse mit altersgerechten Fragen und Zeitstempeln.
- Export von Reports (CSV, PDF) sowie Lernanalysen pro Teilnehmer und Frage.
Schulfach+
|
|
aiMOOCs
aiMOOC Projekte
|
|
YouTube Music: THE MONKEY DANCE
Spotify: THE MONKEY DANCE
Apple Music: THE MONKEY DANCE
Amazon Music: THE MONKEY DANCE
The Monkey Dance SpreadShirtShop
|
|
|
|
 |
Children for a better world >> Förderung der AI Fair-Image Challenge
Fair-Image wird von CHILDREN JUGEND HILFT! gefördert und ist mit der deutschlandweiten AI Fair-Image Challenge SIEGERPROJEKT 2025. Alle Infos zur Challenge hier >>. Infos zum Camp25 gibt es hier. Wenn auch Ihr Euch ehrenamtlich engagiert und noch finanzielle Unterstützung für Eurer Projekt braucht, dann stellt gerne einen Antrag bei JUGEND HILFT.
