[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","69a3190d4b988191a92167b6e04f41c1","versionInt","title","Flashcard App A2 B1 Wortpaket","type","code/react","content","import React, { useEffect, useMemo, useState } from \"react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { motion, AnimatePresence } from \"framer-motion\";\n\n// Flashcards – Vorderseite: Thema (oder Antworten im umgekehrten Modus)\n// Board: alle 20 Themen gleichzeitig\n// Schnellrunde: Timer + Team-Punkte\n// Extras: Shuffle, Klassenraum-Farben\n\nconst groups = [\n {\n topic: \"Biografie und persönlicher Hintergrund\",\n softColor: \"bg-blue-50 border-blue-200\",\n vividColor: \"bg-blue-200 border-blue-700 ring-2 ring-blue-500/40\",\n items: [\"aufwachsen\", \"geboren\", \"die Herkunft\", \"der Lebensstil\", \"die Heimat\"],\n },\n {\n topic: \"Wohnen und Umgebung\",\n softColor: \"bg-green-50 border-green-200\",\n vividColor: \"bg-green-200 border-green-700 ring-2 ring-green-500/40\",\n items: [\n \"der Apartmentkomplex\",\n \"die Wohnsituation\",\n \"die Kleinstadt\",\n \"das Dorf\",\n \"die Landschaft\",\n ],\n },\n {\n topic: \"Beruf und Arbeitswelt\",\n softColor: \"bg-yellow-50 border-yellow-200\",\n vividColor: \"bg-yellow-200 border-yellow-700 ring-2 ring-yellow-500/40\",\n items: [\"die Ausbildung\", \"der Betrieb\", \"die Stelle\", \"die Karriere\", \"verdienen\"],\n },\n {\n topic: \"Studium und Weiterbildung\",\n softColor: \"bg-purple-50 border-purple-200\",\n vividColor: \"bg-purple-200 border-purple-700 ring-2 ring-purple-500/40\",\n items: [\"das Studium\", \"der Kurs\", \"der Studienplatz\", \"die Weiterbildung\", \"Unterricht nehmen\"],\n },\n {\n topic: \"Sport und Bewegung\",\n softColor: \"bg-red-50 border-red-200\",\n vividColor: \"bg-red-200 border-red-700 ring-2 ring-red-500/40\",\n items: [\"trainieren\", \"das Stadion\", \"der Fußballplatz\", \"der See\", \"schwimmen\"],\n },\n {\n topic: \"Freundschaft und Beziehungen\",\n softColor: \"bg-pink-50 border-pink-200\",\n vividColor: \"bg-pink-200 border-pink-700 ring-2 ring-pink-500/40\",\n items: [\"die Freundschaft\", \"der Kontakt\", \"das Netzwerk\", \"kennenlernen\", \"der/die Partner/in\"],\n },\n {\n topic: \"Familie und Familienstand\",\n softColor: \"bg-orange-50 border-orange-200\",\n vividColor: \"bg-orange-200 border-orange-700 ring-2 ring-orange-500/40\",\n items: [\"alleinerziehend\", \"die Eltern\", \"die Mutter\", \"die Tochter\", \"der Sohn\"],\n },\n {\n topic: \"Persönlichkeit und Charakter\",\n softColor: \"bg-indigo-50 border-indigo-200\",\n vividColor: \"bg-indigo-200 border-indigo-700 ring-2 ring-indigo-500/40\",\n items: [\"ehrgeizig\", \"hilfsbereit\", \"loyal\", \"tolerant\", \"zuverlässig\"],\n },\n {\n topic: \"Gefühle und Emotionen\",\n softColor: \"bg-teal-50 border-teal-200\",\n vividColor: \"bg-teal-200 border-teal-700 ring-2 ring-teal-500/40\",\n items: [\"vermissen\", \"wohlfühlen\", \"dankbar\", \"unglücklich\", \"die Erleichterung\"],\n },\n {\n topic: \"Glück und Aberglaube\",\n softColor: \"bg-amber-50 border-amber-200\",\n vividColor: \"bg-amber-200 border-amber-700 ring-2 ring-amber-500/40\",\n items: [\"das Glück\", \"das Unglück\", \"das Pech\", \"das Schicksal\", \"das Glückssymbol\"],\n },\n {\n topic: \"Freizeit und Hobbys\",\n softColor: \"bg-cyan-50 border-cyan-200\",\n vividColor: \"bg-cyan-200 border-cyan-700 ring-2 ring-cyan-500/40\",\n items: [\"die Freizeit\", \"das Hobby\", \"das Abenteuer\", \"das Erlebnis\", \"die Leidenschaft\"],\n },\n {\n topic: \"Reisen und Mobilität\",\n softColor: \"bg-lime-50 border-lime-200\",\n vividColor: \"bg-lime-200 border-lime-700 ring-2 ring-lime-500/40\",\n items: [\"der/die Reisende\", \"die Reiseverbindung\", \"umsteigen\", \"der Zug\", \"die Expedition\"],\n },\n {\n topic: \"Medien und Internet\",\n softColor: \"bg-fuchsia-50 border-fuchsia-200\",\n vividColor: \"bg-fuchsia-200 border-fuchsia-700 ring-2 ring-fuchsia-500/40\",\n items: [\"das Internet\", \"die Castingshow\", \"der Musikclip\", \"der Blogeintrag\", \"der Fernsehsender\"],\n },\n {\n topic: \"Texte und schriftliche Kommunikation\",\n softColor: \"bg-sky-50 border-sky-200\",\n vividColor: \"bg-sky-200 border-sky-700 ring-2 ring-sky-500/40\",\n items: [\"der Brief\", \"die E-Mail\", \"der Zeitungsartikel\", \"die Überschrift\", \"das Porträt\"],\n },\n {\n topic: \"Meinung und Diskussion\",\n softColor: \"bg-rose-50 border-rose-200\",\n vividColor: \"bg-rose-200 border-rose-700 ring-2 ring-rose-500/40\",\n items: [\"die Meinung\", \"der Standpunkt\", \"diskutieren\", \"zustimmen\", \"widersprechen\"],\n },\n {\n topic: \"Ziele und Träume\",\n softColor: \"bg-emerald-50 border-emerald-200\",\n vividColor: \"bg-emerald-200 border-emerald-700 ring-2 ring-emerald-500/40\",\n items: [\"der Traum\", \"verwirklichen\", \"realistisch\", \"aufgeben\", \"weiterversuchen\"],\n },\n {\n topic: \"Gesundheit und Körper\",\n softColor: \"bg-red-50 border-red-300\",\n vividColor: \"bg-red-200 border-red-800 ring-2 ring-red-600/40\",\n items: [\"die Gesundheit\", \"die Behandlung\", \"medizinisch\", \"verletzen\", \"krank\"],\n },\n {\n topic: \"Hilfe und Engagement\",\n softColor: \"bg-blue-50 border-blue-300\",\n vividColor: \"bg-blue-200 border-blue-800 ring-2 ring-blue-600/40\",\n items: [\"der/die Held/in\", \"helfen\", \"ehrenamtlich\", \"die Rettung\", \"der Einsatz\"],\n },\n {\n topic: \"Haushalt und Alltag\",\n softColor: \"bg-gray-50 border-gray-300\",\n vividColor: \"bg-gray-200 border-gray-800 ring-2 ring-gray-600/40\",\n items: [\"die Mülltonne\", \"die Küche\", \"der Balkon\", \"die Zahnpasta\", \"die Wäsche\"],\n },\n {\n topic: \"Sprache und Ausdruck\",\n softColor: \"bg-violet-50 border-violet-200\",\n vividColor: \"bg-violet-200 border-violet-700 ring-2 ring-violet-500/40\",\n items: [\"die Muttersprache\", \"der Begriff\", \"der Ausdruck\", \"das Sprichwort\", \"die Redewendung\"],\n },\n] as const;\n\nfunction cx(...classes: Array) {\n return classes.filter(Boolean).join(\" \");\n}\n\nfunction formatTime(sec: number) {\n const m = Math.floor(sec / 60);\n const s = sec % 60;\n return `${m}:${String(s).padStart(2, \"0\")}`;\n}\n\nfunction shuffleArray(arr: readonly T[]) {\n const a = [...arr];\n for (let i = a.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [a[i], a[j]] = [a[j], a[i]];\n }\n return a;\n}\n\ntype Group = {\n topic: string;\n items: string[];\n softColor: string;\n vividColor: string;\n};\n\nfunction FlashcardNormal({\n topic,\n items,\n isOpen,\n onToggle,\n cardClass,\n}: {\n topic: string;\n items: string[];\n isOpen: boolean;\n onToggle: () => void;\n cardClass: string;\n}) {\n return (\n \n \n \n

{topic}

\n \n

\n\n \n {isOpen && (\n \n

\n •\n {it}\n

\n \n )}\n \n \n \n \n );\n}\n\nfunction FlashcardInverted({\n topic,\n items,\n isOpen,\n onToggle,\n cardClass,\n}: {\n topic: string;\n items: string[];\n isOpen: boolean;\n onToggle: () => void;\n cardClass: string;\n}) {\n return (\n \n \n \n

Antworten

\n •\n {it}\n

\n\n

\n \n

\n\n \n {isOpen && (\n \n

Frage (Thema)

{topic}

\n \n )}\n \n \n \n \n );\n}\n\nexport default function FlashcardBoard() {\n const baseTopics = useMemo(() => (groups as unknown as Group[]), []);\n\n // requested: shuffle\n const [shuffleOn, setShuffleOn] = useState(false);\n\n // requested: vivid classroom styling\n const [classroomMode, setClassroomMode] = useState(false); // true = kräftige Farben\n\n // view mode\n const [mode, setMode] = useState<\"normal\" | \"inverted\">(\"normal\");\n\n // board vs round\n const [playMode, setPlayMode] = useState<\"board\" | \"round\">(\"board\");\n\n // Per-card open state (board mode)\n const [openMap, setOpenMap] = useState>(() => {\n const init: Record = {};\n baseTopics.forEach((g) => (init[g.topic] = false));\n return init;\n });\n\n const topics = useMemo(() => {\n return shuffleOn ? shuffleArray(baseTopics) : baseTopics;\n }, [baseTopics, shuffleOn]);\n\n const cardClassFor = (g: Group) => (classroomMode ? g.vividColor : g.softColor);\n\n // When shuffle toggles, reset board open states for clarity\n useEffect(() => {\n const init: Record = {};\n baseTopics.forEach((g) => (init[g.topic] = false));\n setOpenMap(init);\n }, [shuffleOn, baseTopics]);\n\n const allOpen = useMemo(() => topics.every((g) => openMap[g.topic] === true), [topics, openMap]);\n const anyOpen = useMemo(() => topics.some((g) => openMap[g.topic] === true), [topics, openMap]);\n\n const setAll = (value: boolean) => {\n const next: Record = {};\n topics.forEach((g) => (next[g.topic] = value));\n setOpenMap(next);\n };\n\n const toggleOne = (topic: string) => {\n setOpenMap((prev) => ({ ...prev, [topic]: !prev[topic] }));\n };\n\n // Schnellrunde (Timer)\n const [roundSeconds, setRoundSeconds] = useState(60);\n const [timeLeft, setTimeLeft] = useState(60);\n const [running, setRunning] = useState(false);\n\n // Gruppen-Wettkampf (Punkte)\n const [teams] = useState([\"Team A\", \"Team B\"]);\n const [activeTeam, setActiveTeam] = useState(\"Team A\");\n const [scores, setScores] = useState>({ \"Team A\": 0, \"Team B\": 0 });\n\n // Round deck\n const [deckIndex, setDeckIndex] = useState(0);\n const [reveal, setReveal] = useState(false);\n\n const deck = useMemo(() => topics, [topics]);\n const current = deck.length ? deck[deckIndex % deck.length] : undefined;\n\n useEffect(() => {\n setTimeLeft(roundSeconds);\n }, [roundSeconds]);\n\n useEffect(() => {\n if (!running) return;\n if (timeLeft <= 0) {\n setRunning(false);\n return;\n }\n const t = setTimeout(() => setTimeLeft((s) => s - 1), 1000);\n return () => clearTimeout(t);\n }, [running, timeLeft]);\n\n const resetRound = () => {\n setRunning(false);\n setTimeLeft(roundSeconds);\n setDeckIndex(0);\n setReveal(false);\n };\n\n const nextCard = () => {\n setDeckIndex((i) => (i + 1) % Math.max(1, deck.length));\n setReveal(false);\n };\n\n const prevCard = () => {\n setDeckIndex((i) => (i === 0 ? Math.max(0, deck.length - 1) : i - 1));\n setReveal(false);\n };\n\n const addPoint = (delta: number) => {\n setScores((prev) => ({ ...prev, [activeTeam]: (prev[activeTeam] ?? 0) + delta }));\n };\n\n const resetScores = () => {\n const next: Record = {};\n teams.forEach((t) => (next[t] = 0));\n setScores(next);\n };\n\n // Switch modes resets relevant state\n const switchMode = (nextMode: \"normal\" | \"inverted\") => {\n setMode(nextMode);\n setAll(false);\n setReveal(false);\n };\n\n const switchPlayMode = (next: \"board\" | \"round\") => {\n setPlayMode(next);\n setReveal(false);\n setAll(false);\n if (next === \"round\") {\n setDeckIndex(0);\n setRunning(false);\n setTimeLeft(roundSeconds);\n }\n };\n\n const headerSubtitle =\n playMode === \"board\"\n ? mode === \"normal\"\n ? \"Board: Vorderseite = Thema • Buttons zeigen/verbergen Antworten.\"\n : \"Board: Vorderseite = 5 Elemente • Button zeigt die Frage (Thema).\"\n : \"Schnellrunde: Ein Thema nach dem anderen • Timer + Team-Punkte.\";\n\n const showAllLabel = mode === \"normal\" ? \"Zeig alle Antworten\" : \"Zeig alle Fragen\";\n const hideAllLabel = mode === \"normal\" ? \"Versteck alle Antworten\" : \"Versteck alle Fragen\";\n\n return (\n

Flashcards – Themen & Antworten

{headerSubtitle}

\n\n

\n \n \n

\n\n

\n \n \n

\n\n

\n \n\n setClassroomMode((v) => !v)}\n title=\"Kräftige Farben für den Klassenraum\"\n >\n 🏫 Klassenraum {classroomMode ? \"an\" : \"aus\"}\n \n\n {playMode === \"board\" ? (\n <>\n \n \n \n ) : null}\n

\n\n {playMode === \"board\" ? (\n

\n {topics.map((g) =>\n mode === \"normal\" ? (\n toggleOne(g.topic)}\n cardClass={cardClassFor(g)}\n />\n ) : (\n toggleOne(g.topic)}\n cardClass={cardClassFor(g)}\n />\n )\n )}\n

\n ) : (\n

\n \n \n

Karte

\n {deckIndex + 1} / {deck.length}\n

\n ⏱ {formatTime(timeLeft)}\n

\n \n \n

\n\n

\n {mode === \"normal\" ? (\n <>\n

Thema (Frage)

{current?.topic}

\n \n

\n \n {reveal && (\n \n

\n •\n {it}\n

\n \n )}\n \n \n ) : (\n <>\n

Antworten

\n •\n {it}\n

\n \n

\n \n {reveal && (\n \n

Frage (Thema)

{current?.topic}

\n \n )}\n \n \n )}\n

\n\n

\n \n \n

\n\n

\n \n \n \n

\n\n

\n Tipp: In der Gruppenrunde wähle ein Team rechts aus, gib Punkte (+1/−1) und gehe zur nächsten Karte.\n

\n \n \n

\n\n

\n \n \n

📊 Gruppen-Wettkampf

Punkte

\n \n

\n\n

Aktives Team

\n setActiveTeam(e.target.value)}\n >\n {teams.map((t) => (\n \n ))}\n \n

\n\n

\n {teams.map((t) => (\n \n

{t}

{scores[t] ?? 0}

\n ))}\n

\n\n

\n Schnellstart: Stell den Timer (z.B. 60s), drück Start, vergib Punkte pro Karte.\n

\n\n

⏱ Rundendauer (Sekunden)

\n {\n const v = Math.max(10, Math.min(600, Number(e.target.value || 0)));\n setRoundSeconds(v);\n if (!running) setTimeLeft(v);\n }}\n />\n

10–600 Sekunden

\n \n \n

\n )}\n\n

\n {topics.length} Themen • {topics.reduce((acc, g) => acc + g.items.length, 0)} Elemente\n

\n \n );\n}\n\n// --- Dev sanity checks (lightweight \"tests\") ---\n// These run only in development and help catch broken data shapes early.\nif (typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\") {\n // 20 Themen erwartet\n // @ts-ignore\n console.assert(groups.length === 20, `Expected 20 groups, got ${groups.length}`);\n // Jedes Thema: genau 5 Items\n // @ts-ignore\n console.assert(groups.every((g) => g.items?.length === 5), \"Each group should have exactly 5 items\");\n // Topics unique\n // @ts-ignore\n console.assert(new Set(groups.map((g) => g.topic)).size === groups.length, \"Topics should be unique\");\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","1339055118019011864","traceTime",1780557869409]