[{"_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","68e671112b508191a99535fba31d503e","versionInt","title","Interaktive Web-aufgabe – Wer Ist Schneller? (stufe G)","type","code/react","content","import React, { useMemo, useState } from \"react\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\";\nimport { Label } from \"@/components/ui/label\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ReferenceLine, ResponsiveContainer } from \"recharts\";\nimport { Check, X, RefreshCcw, BarChart2 } from \"lucide-react\";\n\n/**\n * Interaktive Web-Aufgabe (React, Tailwind, shadcn/ui, recharts)\n * Thema: Lineare Funktionen im Kontext – \"Wer ist schneller?\"\n * Stufe G (i. d. R. Jg. 9–10)\n *\n * Features:\n * - Visualisierung zweier linearer Funktionen (y=60x+20, y=80x)\n * - 4 Multiple-Choice-Fragen mit Sofortfeedback + Begründungen\n * - Schrittweises Freischalten: Diagramm -> Frage 1..4\n * - Markierung relevanter Zeiten (0.5h, 1h) im Diagramm\n * - Punktanzeige, Reset, A11y-Labels\n * - Sauberes, modernes UI (Tailwind + shadcn)\n */\n\n// Hilfsfunktionen für das Szenario\nconst fA = (x: number) => 60 * x + 20; // Auto A\nconst fB = (x: number) => 80 * x; // Auto B\n\n// Daten für das Diagramm generieren (0 .. 2 h, Schrittweite 0.1)\nconst makeData = () => {\n const arr: { x: number; A: number; B: number }[] = [];\n for (let i = 0; i <= 20; i++) {\n const x = i / 10;\n arr.push({ x, A: fA(x), B: fB(x) });\n }\n return arr;\n};\n\n// Fragetyp\ntype Choice = {\n key: string;\n label: string;\n};\n\ntype QuizItem = {\n id: string;\n title: string;\n prompt: string;\n choices: Choice[];\n correctKey: string;\n rationaleCorrect: string;\n rationaleWrong: string;\n};\n\nconst QUIZ: QuizItem[] = [\n {\n id: \"q1\",\n title: \"Schnittpunkt – Gleich weit\",\n prompt: \"Wann sind beide Fahrzeuge gleich weit?\",\n choices: [\n { key: \"A\", label: \"Nach 1 Stunde\" },\n { key: \"B\", label: \"Nach 2 Stunden\" },\n { key: \"C\", label: \"Nach 0,5 Stunden\" },\n { key: \"D\", label: \"Nach 1,5 Stunden\" },\n ],\n correctKey: \"A\",\n rationaleCorrect:\n \"Korrekt: 60·1 + 20 = 80 → 80 = 80. Der Schnittpunkt liegt bei x = 1 h.\",\n rationaleWrong:\n \"Prüfe durch Einsetzen in beide Gleichungen: y_A = 60x + 20, y_B = 80x. Nur bei x = 1 h sind die Werte gleich.\",\n },\n {\n id: \"q2\",\n title: \"Wer liegt nach 30 Minuten vorn?\",\n prompt: \"Welches Fahrzeug ist nach 30 Minuten vorne?\",\n choices: [\n { key: \"A\", label: \"Auto A\" },\n { key: \"B\", label: \"Auto B\" },\n { key: \"C\", label: \"Beide gleichauf\" },\n ],\n correctKey: \"A\",\n rationaleCorrect:\n \"Richtig: Nach 0,5 h gilt y_A = 60·0,5 + 20 = 50 km, y_B = 80·0,5 = 40 km. A ist 10 km vorne.\",\n rationaleWrong:\n \"Achtung: B ist schneller, aber A startet mit Vorsprung (20 km). Prüfe x = 0,5 h.\",\n },\n {\n id: \"q3\",\n title: \"Bedeutung des y-Achsenabschnitts\",\n prompt: \"Was bedeutet der y-Achsenabschnitt im Kontext?\",\n choices: [\n { key: \"A\", label: \"Die Geschwindigkeit des Autos\" },\n { key: \"B\", label: \"Die Startzeit\" },\n { key: \"C\", label: \"Die Startstrecke bzw. den Vorsprung\" },\n { key: \"D\", label: \"Die Zeit, wenn Auto A startet\" },\n ],\n correctKey: \"C\",\n rationaleCorrect:\n \"Genau: Der y-Achsenabschnitt gibt die Strecke bei x = 0 an – hier Vorsprung 20 km.\",\n rationaleWrong:\n \"Nicht verwechseln: Steigung = Geschwindigkeit. Der y-Achsenabschnitt ist die Anfangsstrecke (bei x = 0).\",\n },\n {\n id: \"q4\",\n title: \"Bedeutung der Steigung\",\n prompt: \"Welche Bedeutung hat die Steigung der Geraden im Kontext?\",\n choices: [\n { key: \"A\", label: \"Sie zeigt den Startvorsprung.\" },\n { key: \"B\", label: \"Sie zeigt die Geschwindigkeit an.\" },\n { key: \"C\", label: \"Sie zeigt, wann das Auto anhält.\" },\n { key: \"D\", label: \"Sie zeigt, wie lange das Auto gefahren ist.\" },\n ],\n correctKey: \"B\",\n rationaleCorrect:\n \"Richtig: Steigung m = Kilometer pro Stunde – also die Geschwindigkeit.\",\n rationaleWrong:\n \"Die Steigung ist nicht der Startwert (y-Achsenabschnitt), sondern beschreibt die Änderungsrate (km/h).\",\n },\n];\n\n// Farbschema\nconst colors = {\n A: \"#4f46e5\", // Indigo-600\n B: \"#f97316\", // Orange-500\n grid: \"#e5e7eb\", // Gray-200\n};\n\nconst Pill: React.FC<{ right?: boolean; children: React.ReactNode }> = ({ right, children }) => (\n \n {right ? : }\n {children}\n \n);\n\nconst Stat: React.FC<{ label: string; value: string | number }> = ({ label, value }) => (\n

\n {label}\n {value}\n

\n);\n\nexport default function AufgabeWerIstSchneller() {\n const data = useMemo(() => makeData(), []);\n const [activeIndex, setActiveIndex] = useState(0);\n const [answers, setAnswers] = useState>({});\n const [resolved, setResolved] = useState>({});\n\n const current = QUIZ[activeIndex];\n\n const score = useMemo(() =>\n QUIZ.reduce((acc, q) => acc + (answers[q.id] === q.correctKey ? 1 : 0), 0),\n [answers]\n );\n\n // Auswertung einer Antwort\n const onAnswer = (q: QuizItem, key: string) => {\n setAnswers(prev => ({ ...prev, [q.id]: key }));\n setResolved(prev => ({ ...prev, [q.id]: true }));\n };\n\n const next = () => setActiveIndex(i => Math.min(i + 1, QUIZ.length - 1));\n const prev = () => setActiveIndex(i => Math.max(i - 1, 0));\n const reset = () => {\n setActiveIndex(0);\n setAnswers({});\n setResolved({});\n };\n\n const done = Object.keys(answers).length === QUIZ.length;\n\n // Markierungen im Diagramm\n const marks = [0.5, 1];\n\n return (\n

\n {/* Linke Spalte: Diagramm */}\n \n \n \n \n Wer ist schneller? – Diagramm\n \n

\n \n \n

\n \n \n \n \n \n `${v}`}\n label={{ value: \"Zeit x (h)\", position: \"insideBottomRight\", offset: -5 }}\n domain={[0, 2]}\n />\n `${v} km`}\n label={{ value: \"Strecke y (km)\", angle: -90, position: \"insideLeft\" }}\n domain={[0, 200]}\n />\n [value + \" km\", name === \"A\" ? \"Auto A\" : \"Auto B\"]} />\n (value === \"A\" ? \"Auto A (y = 60x + 20)\" : \"Auto B (y = 80x)\")} />\n \n \n\n {/* Markierungen 0.5 h und 1 h */}\n {marks.map((m) => (\n \n ))}\n {/* Schnittpunkt bei x=1, y=80 */}\n \n \n \n

\n Auto A: y = 60x + 20 (Startvorsprung 20 km)\n

\n Auto B: y = 80x (schneller, kein Vorsprung)\n

\n \n \n\n {/* Rechte Spalte: Quiz */}\n \n \n {current.title}\n \n \n

{current.prompt}

\n\n onAnswer(current, v)}\n className=\"grid gap-2\"\n >\n {current.choices.map((c) => (\n \n \n {c.key})\n {c.label}\n \n ))}\n \n\n \n {resolved[current.id] && (\n \n

\n {answers[current.id] === current.correctKey ? (\n Richtige Antwort\n ) : (\n Leider falsch\n )}\n

\n {answers[current.id] === current.correctKey\n ? current.rationaleCorrect\n : current.rationaleWrong}\n

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

\n Frage {activeIndex + 1} von {QUIZ.length}\n

\n \n {activeIndex < QUIZ.length - 1 ? (\n \n ) : (\n \n )}\n

\n\n {done && (\n \n

Geschafft! 🎉

\n Du hast {score} von {QUIZ.length} Punkten erreicht.\n

\n \n

\n \n )}\n\n {/* Hinweiskasten */}\n

\n Hinweis: Steigung (m) beschreibt die Geschwindigkeit (km/h). Der\n y-Achsenabschnitt (b) ist die Startstrecke bei x = 0.\n

\n \n \n\n {/* Erweiterung: Selbststeuerung / Explore-Modus */}\n \n \n Explore-Modus (optional): Werte selbst prüfen\n \n \n

\n Prüfe selbst Werte am Diagramm: Bei x = 0,5 h (gestrichelte Linie) liegt A vor B, weil A\n einen Startvorsprung hat. Bei x = 1 h schneiden sich die Geraden (beide 80 km). Für\n x > 1 h liegt B vorn, da B die größere Steigung (80 km/h) hat.\n

\n Transfer: Formuliere ein eigenes Szenario (z. B. Bus und Radfahrer) mit zwei Geraden. Bestimme den Schnittpunkt durch\n Gleichsetzen und überprüfe ihn grafisch.\n

\n \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","11051077219219395432","traceTime",1777970471901]