[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","682d6636f9c08191b881a61d017c653f","versionInt","title","Flashcard App Words Full","type","code/react","content","import { useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\n\nconst flashcards = [\n { nl: \"aan\", en: \"on / at / to\" },\n { nl: \"aanbieding (de)\", en: \"offer / promotion\" },\n { nl: \"aantrekken\", en: \"to attract / to put on (clothes)\" },\n { nl: \"aardappel (de)\", en: \"potato\" },\n { nl: \"aardbei (de)\", en: \"strawberry\" },\n { nl: \"afrekenen\", en: \"to pay / to check out\" },\n { nl: \"alles\", en: \"everything\" },\n { nl: \"ananas (de)\", en: \"pineapple\" },\n { nl: \"anderhalf\", en: \"one and a half\" },\n { nl: \"anders\", en: \"different / otherwise\" },\n { nl: \"andijvie (de)\", en: \"endive\" },\n { nl: \"appel (de)\", en: \"apple\" },\n { nl: \"armband (de)\", en: \"bracelet\" },\n { nl: \"aspirine (de)\", en: \"aspirin\" },\n { nl: \"bakker (de)\", en: \"baker\" },\n { nl: \"bakkerij (de)\", en: \"bakery\" },\n { nl: \"bank (de)\", en: \"bank / couch\" },\n { nl: \"beige\", en: \"beige\" },\n { nl: \"bestellen\", en: \"to order\" },\n];\n\nexport default function FlashcardApp() {\n const [index, setIndex] = useState(0);\n const [flipped, setFlipped] = useState(false);\n const [quizMode, setQuizMode] = useState(false);\n const [quizIndex, setQuizIndex] = useState(0);\n const [selected, setSelected] = useState(null);\n const [score, setScore] = useState(0);\n\n const nextCard = () => {\n setFlipped(false);\n setIndex((prev) => (prev + 1) % flashcards.length);\n };\n\n const toggleFlip = () => {\n setFlipped((prev) => !prev);\n };\n\n const currentCard = flashcards[index];\n\n const startQuiz = () => {\n setQuizMode(true);\n setQuizIndex(0);\n setScore(0);\n setSelected(null);\n };\n\n const currentQuiz = flashcards[quizIndex];\n const options = [...flashcards]\n .filter((opt) => opt !== currentQuiz)\n .sort(() => 0.5 - Math.random())\n .slice(0, 3)\n .concat(currentQuiz)\n .sort(() => 0.5 - Math.random());\n\n const handleAnswer = (answer) => {\n setSelected(answer);\n if (answer === currentQuiz.nl) {\n setScore((prev) => prev + 1);\n }\n setTimeout(() => {\n if (quizIndex < 4) {\n setQuizIndex((prev) => prev + 1);\n setSelected(null);\n } else {\n alert(`Quiz klaar! Je score: ${score + (answer === currentQuiz.nl ? 1 : 0)}/5`);\n setQuizMode(false);\n }\n }, 1000);\n };\n\n if (quizMode) {\n return (\n

Quiz

\n Wat is de vertaling van \"{currentQuiz.en}\"?\n

\n {options.map((opt, i) => (\n handleAnswer(opt.nl)}\n className={`text-purple-800 ${selected === opt.nl ? (opt.nl === currentQuiz.nl ? \"bg-green-200\" : \"bg-red-200\") : \"bg-white hover:bg-purple-100\"} font-medium px-6 py-2 rounded-xl shadow-md`}\n disabled={selected !== null}\n >\n {opt.nl}\n \n ))}\n

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

Flashcards: Engels → Nederlands

\n \n \n

\n {currentCard.en}\n

\n {currentCard.nl}\n

\n \n \n Volgende\n \n \n Ga naar Quiz\n \n \n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","3501506662699184493","traceTime",1776439556611]