[{"_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","69cd04afc9ac819185bd0f0236cb977c","versionInt","title","Fotosyntesen Quiz Ak7","type","code/react","content","import React, { useMemo, useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Progress } from \"@/components/ui/progress\";\nimport { CheckCircle2, XCircle, Leaf, RotateCcw } from \"lucide-react\";\n\nconst questions = [\n {\n question: \"Vad behöver växter för att genomföra fotosyntesen?\",\n options: [\n \"Syre, jord och värme\",\n \"Koldioxid, vatten och solljus\",\n \"Socker, syre och vatten\",\n \"Järn, vatten och luft\",\n ],\n correct: 1,\n explanation:\n \"Rätt svar innehåller de tre viktigaste delarna: koldioxid från luften, vatten från marken och energi från solljuset.\",\n wrongFeedback:\n \"Inte riktigt. Tänk på vad växten tar in från luften, marken och solen.\",\n },\n {\n question: \"Var i växten sker fotosyntesen främst?\",\n options: [\n \"I rötterna\",\n \"I blommorna\",\n \"I bladen\",\n \"I fröna\",\n ],\n correct: 2,\n explanation:\n \"Fotosyntesen sker främst i bladen, där klorofyll fångar upp solljus.\",\n wrongFeedback:\n \"Försök igen. Tänk på vilken del av växten som oftast är grön och fångar ljus.\",\n },\n {\n question: \"Vilket ämne bildas som växtens näring vid fotosyntesen?\",\n options: [\n \"Socker druvsocker\",\n \"Salt\",\n \"Protein\",\n \"Olja\",\n ],\n correct: 0,\n explanation:\n \"Vid fotosyntesen bildas druvsocker som växten använder som energi och byggmaterial.\",\n wrongFeedback:\n \"Inte rätt. Växten tillverkar ett slags socker som den använder som näring.\",\n },\n {\n question: \"Vilken gas släpper växten ut som en restprodukt vid fotosyntesen?\",\n options: [\n \"Kväve\",\n \"Koldioxid\",\n \"Syre\",\n \"Väte\",\n ],\n correct: 2,\n explanation:\n \"Syre bildas och släpps ut i luften. Det är viktigt för människor och djur.\",\n wrongFeedback:\n \"Nära men inte rätt. Det är samma gas som människor och djur behöver för att andas.\",\n },\n {\n question: \"Varför är fotosyntesen viktig för livet på jorden?\",\n options: [\n \"Den gör att växter kan springa snabbare\",\n \"Den skapar mat till växter och bidrar med syre i luften\",\n \"Den gör att vatten försvinner från haven\",\n \"Den byter färg på blommor varje natt\",\n ],\n correct: 1,\n explanation:\n \"Fotosyntesen gör att växter kan tillverka sin egen näring och samtidigt bildas syre som många levande organismer behöver.\",\n wrongFeedback:\n \"Inte riktigt. Tänk på både växternas mat och vad som kommer ut i luften.\",\n },\n];\n\nfunction QuizOption({ text, onClick, selected, isCorrect, isWrong, disabled }) {\n const base = \"w-full text-left justify-start whitespace-normal rounded-2xl px-4 py-4 h-auto border transition-all\";\n const variant = isCorrect\n ? \"border-green-500 bg-green-50\"\n : isWrong\n ? \"border-red-500 bg-red-50\"\n : selected\n ? \"border-slate-900 bg-slate-50\"\n : \"border-slate-200 bg-white hover:bg-slate-50\";\n\n return (\n \n {text}\n \n );\n}\n\nexport default function FotosyntesenQuizAk7() {\n const [current, setCurrent] = useState(0);\n const [selected, setSelected] = useState(null);\n const [showResult, setShowResult] = useState(false);\n const [score, setScore] = useState(0);\n const [mistakeMessage, setMistakeMessage] = useState(\"\");\n const [history, setHistory] = useState([]);\n\n const question = questions[current];\n const progress = useMemo(() => ((current + 1) / questions.length) * 100, [current]);\n const quizFinished = current >= questions.length;\n\n const handleAnswer = (index) => {\n if (showResult) return;\n\n setSelected(index);\n\n if (index === question.correct) {\n setShowResult(true);\n setScore((prev) => prev + 1);\n setHistory((prev) => [\n ...prev,\n { question: question.question, correct: true, explanation: question.explanation },\n ]);\n setMistakeMessage(\"\");\n } else {\n setMistakeMessage(question.wrongFeedback);\n }\n };\n\n const nextQuestion = () => {\n if (current < questions.length - 1) {\n setCurrent((prev) => prev + 1);\n setSelected(null);\n setShowResult(false);\n setMistakeMessage(\"\");\n } else {\n setCurrent(questions.length);\n }\n };\n\n const restartQuiz = () => {\n setCurrent(0);\n setSelected(null);\n setShowResult(false);\n setScore(0);\n setMistakeMessage(\"\");\n setHistory([]);\n };\n\n if (quizFinished) {\n return (\n

\n \n \n \n

\n \n

Klart!

\n Quiz om fotosyntesen\n

\n \n \n

Ditt resultat

{score} av {questions.length}

\n {score === questions.length\n ? \"Snyggt! Du hade full koll på fotosyntesen.\"\n : score >= 3\n ? \"Bra jobbat! Du kan det viktigaste, men det finns lite till att träna på.\"\n : \"Bra kämpat! Testa gärna igen och se om du kan förbättra resultatet.\"}\n

\n\n

Det här kunde du

\n {history.map((item, index) => (\n

{item.question}

{item.explanation}

\n ))}\n

\n\n \n \n \n \n

\n );\n }\n\n return (\n

\n \n \n \n

\n \n

NO åk 7

\n Fotosyntesen\n

\n Fråga {current + 1} av {questions.length}\n

\n \n \n\n \n

{question.question}

\n Välj ett svar. Om det blir fel får du en ledtråd direkt och kan försöka igen.\n

\n\n

\n {question.options.map((option, index) => {\n const isCorrect = showResult && index === question.correct;\n const isWrong = selected === index && !showResult;\n return (\n handleAnswer(index)}\n selected={selected === index}\n isCorrect={isCorrect}\n isWrong={isWrong}\n disabled={showResult}\n />\n );\n })}\n

\n\n {mistakeMessage && !showResult && (\n \n

\n \n

Inte rätt ännu

{mistakeMessage}

\n \n )}\n\n {showResult && (\n \n

\n \n

Rätt svar!

{question.explanation}

\n \n )}\n\n

Poäng: {score}

\n \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","415278328312465655","traceTime",1780386115978]