[{"_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","68ecfe62b9a4819183f355757385db47","versionInt","title","Rabattfieber Im Supermarkt – Basisaufgaben (kl","type","code/react","content","import React, { useMemo, useState, useEffect, useRef } from \"react\";\n\n/**\n * Rabattfieber im Supermarkt – Interaktive Lernapp (Basisaufgaben)\n * Klassenstufe: 7–8 | Themenfeld: Gleichungen & Funktionen (Prozentrechnung im Alltag)\n *\n * Leitidee/Didaktik im Code umgesetzt:\n * - Low floor / high ceiling: drei Level (Einsteiger, Fortgeschritten, Profi)\n * - Progressives Feedback: Tippstufen + Fehlkonzept-Erkennung (addieren vs. multiplizieren)\n * - Interaktion: Eingabe, Multiple-Choice, Mini Drag&Drop-Sortierung\n * - Gamification: Punkte, Streak, Abzeichen, Level-Aufstieg, Timer-Option\n * - Barrierearm: klare Sprache, visuelle Hilfen (Prozentbalken), Tastaturbedienung\n */\n\n// ---------- Hilfsfunktionen ----------\nconst rnd = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;\nconst toMoney = (x) => (Math.round(x * 100) / 100).toFixed(2).replace(\".\", \",\");\nconst toNumber = (s) => {\n if (typeof s === \"number\") return s;\n const clean = String(s).replace(/[^0-9,\\.\\-]/g, \"\").replace(\",\", \".\");\n const v = parseFloat(clean);\n return isNaN(v) ? NaN : v;\n};\n\nfunction generateTask(level) {\n // level: 0 Einsteiger, 1 Fortgeschritten, 2 Profi\n const price = rnd(8, 120) + [0, 0.49, 0.99][rnd(0, 2)];\n const perc = [5, 10, 12, 15, 20, 25, 30, 33, 40][rnd(0, 8)];\n const chain = level >= 1 && Math.random() < (level === 1 ? 0.35 : 0.6);\n const perc2 = chain ? [5, 10, 15, 20, 25][rnd(0, 4)] : null;\n\n const newPrice = chain\n ? price * (1 - perc / 100) * (1 - (perc2 ?? 0) / 100)\n : price * (1 - perc / 100);\n\n // Multiple-choice Optionen nah am Ziel (zur Fehlkonzept-Erkennung)\n const wrongAdd = price - (price * (perc / 100)); // fälschlich subtrahieren: price - (price*perc/100) ist korrekt! Wir brauchen \"price - perc\" als Additiv-Fehler.\n const wrongAdditive = price - perc; // typischer Fehler: Prozentwert mit Prozentzahl verwechseln\n const wrongDivide = price / (1 + perc / 100); // Brutto/Netto-Verwechslung\n const wrongRound = Math.floor(newPrice * 100) / 100; // zu frühes Runden\n\n // plausible Distraktoren\n let options = [newPrice, wrongAdditive, wrongDivide, wrongRound];\n // Entfernen von Duplikaten & erzeugen weiterer plausibler Nachbarn\n const uniq = Array.from(new Set(options.map((x) => Math.round(x * 100)))).map(\n (c) => c / 100\n );\n while (uniq.length < 4) {\n const jitter = (Math.random() - 0.5) * (price * 0.1);\n const cand = Math.max(0.01, newPrice + jitter);\n const cents = Math.round(cand * 100);\n if (!uniq.includes(cents / 100)) uniq.push(cents / 100);\n }\n\n // kleine Produktliste für Sortier-Interaktion\n const products = [\n \"Müsli\", \"Sneaker\", \"Rucksack\", \"Bluetooth-Box\", \"Hoodie\", \"Jogginghose\",\n \"Kopfhörer\", \"Wasserkocher\", \"Fitnessband\", \"Thermobecher\"\n ];\n\n return {\n id: crypto.randomUUID(),\n price: Math.round(price * 100) / 100,\n perc,\n chain,\n perc2,\n newPrice: Math.round(newPrice * 100) / 100,\n mcOptions: uniq.sort(() => Math.random() - 0.5).slice(0, 4),\n product: products[rnd(0, products.length - 1)],\n };\n}\n\nfunction pctBar({ base, p1, p2 }) {\n const after1 = base * (1 - p1 / 100);\n const after2 = p2 ? after1 * (1 - p2 / 100) : after1;\n const w1 = 100 - p1;\n const w2 = p2 ? w1 * (1 - p2 / 100) : w1;\n return { after1, after2, w1, w2 };\n}\n\n// ---------- UI-Bausteine ----------\nfunction Pill({ children, className = \"\" }) {\n return (\n \n {children}\n \n );\n}\n\nfunction Progress({ value, max = 100 }) {\n const pct = Math.max(0, Math.min(100, (value / max) * 100));\n return (\n

\n );\n}\n\nfunction Badge({ label }) {\n return (\n

\n 🏅\n {label}\n

\n );\n}\n\nfunction Hint({ stage, onRevealStep }) {\n const steps = [\n \"Tipp 1: 10% von einem Preis ist ein Zehntel. 5% ist die Hälfte von 10%.\",\n \"Tipp 2: 1% = Preis ÷ 100. Dann mit dem Prozentsatz multiplizieren.\",\n \"Tipp 3: Endpreis = Grundpreis × (1 − p/100). Bei Kettenrabatten zweimal multiplizieren.\",\n ];\n return (\n

\n {steps.slice(0, stage).map((t, i) => (\n

{t}

\n ))}\n {stage < steps.length && (\n \n Nächsten Tipp anzeigen\n \n )}\n

\n );\n}\n\n// ---------- Hauptkomponente ----------\nexport default function RabattfieberApp() {\n const [level, setLevel] = useState(0); // 0 Einsteiger, 1 Fortgeschritten, 2 Profi\n const [task, setTask] = useState(() => generateTask(0));\n const [mode, setMode] = useState(0); // 0 Eingabe, 1 Multiple-Choice, 2 Sortier-/Vergleichsmini\n const [input, setInput] = useState(\"\");\n const [feedback, setFeedback] = useState(null);\n const [score, setScore] = useState(0);\n const [streak, setStreak] = useState(0);\n const [badges, setBadges] = useState([]);\n const [hints, setHints] = useState(0);\n const [timerOn, setTimerOn] = useState(false);\n const [timeLeft, setTimeLeft] = useState(60);\n\n const inputRef = useRef(null);\n\n useEffect(() => {\n inputRef.current?.focus();\n }, [task, mode]);\n\n useEffect(() => {\n if (!timerOn) return;\n if (timeLeft <= 0) return;\n const t = setTimeout(() => setTimeLeft((s) => s - 1), 1000);\n return () => clearTimeout(t);\n }, [timerOn, timeLeft]);\n\n useEffect(() => {\n if (streak === 5 && !badges.includes(\"Streak x5\")) setBadges((b) => [...b, \"Streak x5\"]);\n if (streak === 10 && !badges.includes(\"Streak x10\")) setBadges((b) => [...b, \"Streak x10\"]);\n if (score >= 100 && !badges.includes(\"100 Punkte\")) setBadges((b) => [...b, \"100 Punkte\"]);\n }, [streak, score, badges]);\n\n function nextTask(nextMode = mode) {\n const lvlUp = score >= 60 && level === 0 ? 1 : score >= 140 && level === 1 ? 2 : level;\n if (lvlUp !== level) {\n setLevel(lvlUp);\n }\n const m = nextMode;\n setTask(generateTask(lvlUp));\n setMode(m);\n setInput(\"\");\n setFeedback(null);\n setHints(0);\n }\n\n function checkInput() {\n const val = toNumber(input);\n if (isNaN(val)) {\n setFeedback({ type: \"error\", msg: \"Bitte gib eine Zahl ein (z.\\u00A0B. 79,90).\" });\n return;\n }\n const isCorrect = Math.abs(val - task.newPrice) < 0.01;\n\n // Fehlkonzept-Erkennung\n const additive = Math.abs(val - (task.price - task.perc)) < 0.01;\n const divide = Math.abs(val - task.price / (1 + task.perc / 100)) < 0.01;\n\n if (isCorrect) {\n const gain = Math.max(5, 20 - 3 * hints) + (level * 2);\n setScore((s) => s + gain);\n setStreak((s) => s + 1);\n setFeedback({ type: \"ok\", msg: `Richtig! Neuer Preis: ${toMoney(task.newPrice)} € (+${gain} Punkte)` });\n setTimeout(() => nextTask(), 800);\n } else if (additive) {\n setStreak(0);\n setFeedback({\n type: \"warn\",\n msg: \"Achtung: Du hast vermutlich die Prozentzahl als Eurobetrag abgezogen. Nutze: Endpreis = Preis × (1 − p/100).\",\n });\n } else if (divide) {\n setStreak(0);\n setFeedback({\n type: \"warn\",\n msg: \"Verwechslung Netto/Brutto? Teilen statt multiplizieren führt hier zum falschen Wert.\",\n });\n } else {\n setStreak(0);\n setFeedback({ type: \"error\", msg: \"Noch nicht ganz. Prüfe deinen Prozentwert und rechne dann den Endpreis.\" });\n }\n }\n\n function checkMC(choice) {\n const isCorrect = Math.abs(choice - task.newPrice) < 0.001;\n if (isCorrect) {\n const gain = Math.max(3, 12 - 2 * hints) + (level * 2);\n setScore((s) => s + gain);\n setStreak((s) => s + 1);\n setFeedback({ type: \"ok\", msg: `Korrekt! Endpreis: ${toMoney(task.newPrice)} € (+${gain} Punkte)` });\n setTimeout(() => nextTask(), 800);\n } else {\n setStreak(0);\n setFeedback({ type: \"error\", msg: \"Falsch gewählt. Nutze die Tipps und probiere erneut.\" });\n }\n }\n\n // Mini-Vergleich: Ordne drei Angebote nach Ersparnis\n const compareSet = useMemo(() => {\n const base = task.price;\n const pcts = [task.perc, rnd(5, 40), rnd(5, 40)];\n const offers = pcts.map((p, i) => ({\n id: `O${i+1}`,\n p,\n newPrice: Math.round(base * (1 - p / 100) * 100) / 100,\n }));\n return offers.sort(() => Math.random() - 0.5);\n }, [task]);\n\n const sortedBySaving = useMemo(() => {\n return [...compareSet].sort((a, b) => a.newPrice - b.newPrice).map((o) => o.id);\n }, [compareSet]);\n\n const [order, setOrder] = useState([]);\n useEffect(() => setOrder(compareSet.map((o) => o.id)), [compareSet]);\n\n function move(id, dir) {\n const idx = order.indexOf(id);\n if (idx < 0) return;\n const swapIdx = idx + dir;\n if (swapIdx < 0 || swapIdx >= order.length) return;\n const newOrder = [...order];\n [newOrder[idx], newOrder[swapIdx]] = [newOrder[swapIdx], newOrder[idx]];\n setOrder(newOrder);\n }\n\n function checkOrder() {\n const ok = JSON.stringify(order) === JSON.stringify(sortedBySaving);\n if (ok) {\n const gain = 10 + level * 2;\n setScore((s) => s + gain);\n setStreak((s) => s + 1);\n setFeedback({ type: \"ok\", msg: `Perfekt sortiert! (+${gain} Punkte)` });\n setTimeout(() => nextTask(), 900);\n } else {\n setStreak(0);\n setFeedback({ type: \"warn\", msg: \"Noch nicht optimal. Denke: kleinster Endpreis zuerst (größte Ersparnis).\" });\n }\n }\n\n const bar = pctBar({ base: task.price, p1: task.perc, p2: task.chain ? task.perc2 : 0 });\n\n const timeUp = timerOn && timeLeft <= 0;\n useEffect(() => {\n if (timeUp) {\n setFeedback({ type: \"warn\", msg: \"Zeit abgelaufen! Neue Aufgabe gestartet.\" });\n setTimeLeft(60);\n nextTask();\n }\n }, [timeUp]);\n\n return (\n

\n 🛒 Rabattfieber im Supermarkt\n Basisaufgaben – Kl. 7–8 | Gleichungen & Funktionen\n

\n Level: {level === 0 ? \"Einsteiger\" : level === 1 ? \"Fortgeschritten\" : \"Profi\"}\n Punkte: {score}\n Streak: {streak}\n {timerOn && (\n ⏱ {timeLeft}s\n )}\n

\n\n {badges.length > 0 && (\n

\n {badges.map((b) => (\n \n ))}\n

\n )}\n\n {/* Steuerleiste */}\n

\n Modus:\n

\n {[\"Eingabe\", \"Auswahl\", \"Vergleich\"].map((m, i) => (\n nextTask(i)}\n className={`px-3 py-1 text-sm ${mode === i ? \"bg-slate-900 text-white\" : \"bg-white hover:bg-slate-50\"}`}\n >\n {m}\n \n ))}\n

\n\n

\n \n \n \n

\n\n {/* Aufgabenkarte */}\n

Produkt

{task.product}

Grundpreis

{toMoney(task.price)} €

\n\n

\n Rabatt: −{task.perc}%\n {task.chain && (\n zusätzlich −{task.perc2}%\n )}\n Ziel: Endpreis\n

\n\n {/* Visualisierung: Prozentbalken */}\n

Visuelle Hilfe

\n {task.chain && (\n

Nach erstem Rabatt verbleiben {bar.w1.toFixed(1)}% des Preises, nach zweitem Rabatt {bar.w2.toFixed(1)}%.

\n )}\n

\n\n {/* Interaktionsmodi */}\n {mode === 0 && (\n

\n Gib den Endpreis in Euro ein\n

\n setInput(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && checkInput()}\n className=\"w-full rounded-xl border px-3 py-2\"\n />\n \n

Hinweis: Endpreis = Grundpreis × (1 − p/100){task.chain ? \" × (1 − p2/100)\" : \"\"}.

\n )}\n\n {mode === 1 && (\n

\n {task.mcOptions.map((opt) => (\n checkMC(opt)}\n className=\"rounded-2xl border p-4 text-left bg-white hover:bg-slate-50\"\n >\n

Vorschlag

{toMoney(opt)} €

\n \n ))}\n

\n )}\n\n {mode === 2 && (\n

Ordne die Angebote nach größter Ersparnis → kleinste Ersparnis (d. h. Endpreis aufsteigend):

\n {order.map((id) => {\n const o = compareSet.find((x) => x.id === id);\n return (\n

\n {o.id}\n Rabatt: {o.p}%\n Endpreis: {toMoney(o.newPrice)} €\n

\n \n \n

\n );\n })}\n

\n \n

\n )}\n

\n\n {/* Seitenleiste: Tipps, Erklärung, Kompetenzbezug */}\n \n

\n\n {/* Feedback & Fortschritt */}\n

Feedback

\n {feedback?.msg ?? \"Bearbeite die Aufgabe. Nutze Tipps, wenn du unsicher bist.\"}\n

Fortschritt

\n \n

Nächster Meilenstein bei 100 Punkten.

\n\n {/* Fuß: Didaktische Hinweise für Lehrkräfte */}\n \n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","17337756045307791491","traceTime",1779078256939]