[{"_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","68e6772a1298819187b35086dce9d38f","versionInt","title","Interaktive Web-aufgabe – Formen Und Längen (stufe A)","type","code/react","content","import React, { useState } from \"react\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { motion } from \"framer-motion\";\nimport { Ruler, Shapes, RefreshCcw } from \"lucide-react\";\n\n/**\n * Interaktive Web-Aufgabe: \"Formen und Längen erkennen\"\n * ID: 44 – Themenfeld: Geometrie (Stufe A)\n *\n * Jahrgangsstufe: 1–2\n * Lehrplanbezug (RLP Brandenburg – Leitidee Raum und Form):\n * - Schülerinnen und Schüler erkennen, benennen und vergleichen einfache geometrische Formen und Körper.\n * - Sie können Längen und Größen miteinander vergleichen und ordnen.\n *\n * Thema der Aufgabe: Körper I, Formen I und Längen\n * Lernziel: Kinder ordnen geometrische Grundformen ihren Namen zu und vergleichen einfache Längen.\n * Typ: Drag-and-Drop-Zuordnungsaufgabe mit Sofortfeedback\n */\n\nconst shapes = [\n { id: \"kreis\", name: \"Kreis\", color: \"bg-red-400\", shape:

},\n { id: \"dreieck\", name: \"Dreieck\", color: \"bg-yellow-400\", shape:

},\n { id: \"rechteck\", name: \"Rechteck\", color: \"bg-green-400\", shape:

},\n { id: \"quadrat\", name: \"Quadrat\", color: \"bg-blue-400\", shape:

},\n];\n\nexport default function FormenUndLaengen() {\n const [zuordnung, setZuordnung] = useState>({});\n const [fertig, setFertig] = useState(false);\n\n const namen = [\n { id: \"kreis\", label: \"Kreis\" },\n { id: \"dreieck\", label: \"Dreieck\" },\n { id: \"rechteck\", label: \"Rechteck\" },\n { id: \"quadrat\", label: \"Quadrat\" },\n ];\n\n const handleDrop = (e: React.DragEvent, ziel: string) => {\n e.preventDefault();\n const form = e.dataTransfer.getData(\"shape\");\n setZuordnung((prev) => ({ ...prev, [ziel]: form }));\n };\n\n const handleDrag = (e: React.DragEvent, id: string) => {\n e.dataTransfer.setData(\"shape\", id);\n };\n\n const pruefen = () => setFertig(true);\n const reset = () => {\n setZuordnung({});\n setFertig(false);\n };\n\n const istRichtig = (ziel: string) => zuordnung[ziel] === ziel;\n\n return (\n

\n {/* Einleitung */}\n \n \n \n Klasse 1–2 | Thema: Formen und Längen erkennen\n \n \n \n

\n Lehrplanbezug (RLP Brandenburg, Leitidee Raum und Form): Kinder erkennen und benennen einfache geometrische Formen. Sie vergleichen Längen und Größen und ordnen diese zu.\n

\n \n \n\n {/* Formen zum Ziehen */}\n \n \n Ziehe die Formen zu den richtigen Namen!\n \n \n

\n {shapes.map((s) => (\n

handleDrag(e, s.id)} className=\"cursor-grab active:cursor-grabbing\">\n {s.shape}\n

\n ))}\n

\n\n {/* Ziele für Drag and Drop */}\n

\n {namen.map((n) => (\n e.preventDefault()}\n onDrop={(e) => handleDrop(e, n.id)}\n className={`flex flex-col items-center justify-center h-28 rounded-xl border-2 transition ${\n zuordnung[n.id]\n ? istRichtig(n.id)\n ? \"border-emerald-400 bg-emerald-50\"\n : \"border-rose-400 bg-rose-50\"\n : \"border-dashed border-gray-300 hover:bg-gray-50\"\n }`}\n >\n {n.label}\n {zuordnung[n.id] && (\n \n {shapes.find((s) => s.id === zuordnung[n.id])?.shape}\n \n )}\n

\n ))}\n

\n\n

\n \n \n

\n\n {fertig && (\n \n

Super gemacht! 🎉

Du hast {Object.values(zuordnung).filter((z) => istRichtig(z)).length} von {namen.length} Formen richtig zugeordnet.

\n \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","9375443317869968130","traceTime",1778273243733]