https://moocwiki.org/index.php?action=history&feed=atom&title=VideoBattle 2026-06-03T23:43:29Z Versionsgeschichte dieser Seite in MediaWiki MediaWiki 1.45.3 https://moocwiki.org/index.php?title=VideoBattle&diff=22284&oldid=prev 2025-09-10T13:36:58Z

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

Glanz