[{"_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","69da550debb4819192fa7748d1e11628","versionInt","title","Juice-volume-quiz-app1.1","type","code/react","content","import React, { useMemo, useState } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { Button } from '@/components/ui/button';\nimport { RefreshCw, Trophy, GlassWater, Star } from 'lucide-react';\n\nconst CONTAINERS = [\n { id: 'same-width-left', label: 'ビーカー', width: 108, height: 180, rim: 10, capacityMl: 300 },\n { id: 'same-width-right', label: 'ビーカー', width: 108, height: 180, rim: 10, capacityMl: 300 },\n { id: 'same-height-slim', label: 'ビーカー', width: 86, height: 180, rim: 10, capacityMl: 240 },\n { id: 'same-height-wide', label: 'ビーカー', width: 132, height: 180, rim: 10, capacityMl: 380 },\n];\n\nconst JUICE_COLOR = 'from-orange-300 to-orange-400';\n\nconst rand = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;\nconst pickAsk = () => (Math.random() > 0.5 ? 'more' : 'less');\n\nfunction generateQuestion() {\n while (true) {\n const mode = Math.random() > 0.5 ? 'amount' : 'width';\n const ask = pickAsk();\n\n if (mode === 'amount') {\n const pair = [CONTAINERS[0], CONTAINERS[1]];\n const [leftContainer, rightContainer] = Math.random() > 0.5 ? pair : [pair[1], pair[0]];\n\n const leftMl = rand(80, Math.min(leftContainer.capacityMl - 30, 220));\n const diffMl = rand(35, 80);\n const rightCandidate = Math.random() > 0.5 ? leftMl + diffMl : leftMl - diffMl;\n const rightMl = Math.max(60, Math.min(Math.min(rightContainer.capacityMl - 25, 260), rightCandidate));\n\n if (Math.abs(leftMl - rightMl) < 30) continue;\n\n const leftFill = leftMl / leftContainer.capacityMl;\n const rightFill = rightMl / rightContainer.capacityMl;\n\n if (leftFill < 0.22 || leftFill > 0.88 || rightFill < 0.22 || rightFill > 0.88) continue;\n\n const moreSide = leftMl > rightMl ? 'left' : 'right';\n const lessSide = leftMl < rightMl ? 'left' : 'right';\n\n return {\n mode,\n ask,\n guide: 'ビーカーの大きさはおなじ。ジュースのりょうを見くらべよう',\n left: {\n container: leftContainer,\n ml: leftMl,\n fillRatio: leftFill,\n color: JUICE_COLOR,\n },\n right: {\n container: rightContainer,\n ml: rightMl,\n fillRatio: rightFill,\n color: JUICE_COLOR,\n },\n correct: ask === 'more' ? moreSide : lessSide,\n };\n }\n\n const pair = [CONTAINERS[2], CONTAINERS[3]];\n const [leftContainer, rightContainer] = Math.random() > 0.5 ? pair : [pair[1], pair[0]];\n\n const sharedFillRatio = rand(32, 78) / 100;\n const leftMl = Math.round(leftContainer.capacityMl * sharedFillRatio);\n const rightMl = Math.round(rightContainer.capacityMl * sharedFillRatio);\n\n if (Math.abs(leftMl - rightMl) < 30) continue;\n\n const moreSide = leftMl > rightMl ? 'left' : 'right';\n const lessSide = leftMl < rightMl ? 'left' : 'right';\n\n return {\n mode,\n ask,\n guide: 'ビーカーのたかさはおなじ。はばだけがちがうよ',\n left: {\n container: leftContainer,\n ml: leftMl,\n fillRatio: sharedFillRatio,\n color: JUICE_COLOR,\n },\n right: {\n container: rightContainer,\n ml: rightMl,\n fillRatio: sharedFillRatio,\n color: JUICE_COLOR,\n },\n correct: ask === 'more' ? moreSide : lessSide,\n };\n }\n}\n\nfunction ContainerGlass({ item, highlight }) {\n const { container, fillRatio, color } = item;\n const liquidHeight = Math.max(10, (container.height - 14) * fillRatio);\n\n return (\n

\n \n \n \n

{container.label}

\n );\n}\n\nfunction ResultOverlay({ correct, onNext, score, total, answerSide, question }) {\n const answerLabel = answerSide === 'left' ? 'ひだり' : 'みぎ';\n const answerMl = answerSide === 'left' ? question.left.ml : question.right.ml;\n const answerText = question.ask === 'more' ? '多いのは' : '少ないのは';\n\n return (\n \n \n \n

\n {correct ? (\n

\n \n

\n ) : (\n

\n \n

\n )}\n

{correct ? 'せいかい！' : 'ざんねん！'}

{answerText} {answerLabel} でした

ほんとうのりょうは {answerMl} mL だよ

{score} / {total} もんせいかい

\n \n \n \n \n );\n}\n\nfunction FinishScreen({ score, totalQuestions, onRestart }) {\n const perfect = score === totalQuestions;\n\n return (\n

\n \n

\n {perfect ? : }\n

おしまい！

{score} / {totalQuestions} もんせいかい

\n {perfect ? 'すごい！ビーカーのちがいをよく見つけたね！' : 'よくできました！つぎはまんてんをめざそう！'}\n

\n \n \n

\n );\n}\n\nfunction BeakerScene({ question, selected, showResult, choose }) {\n\n return (\n

\n choose('left')}\n className={`rounded-[28px] border-2 p-5 transition active:scale-[0.99] ${\n selected === 'left' ? 'border-sky-400 bg-sky-50' : 'border-slate-200/80 bg-white/70'\n }`}\n >\n

ひだり

\n \n

\n \n\n choose('right')}\n className={`rounded-[28px] border-2 p-5 transition active:scale-[0.99] ${\n selected === 'right' ? 'border-sky-400 bg-sky-50' : 'border-slate-200/80 bg-white/70'\n }`}\n >\n

みぎ

\n \n

\n );\n}\n\nexport default function JuiceVolumeQuizApp() {\n const totalQuestions = 10;\n const [questionIndex, setQuestionIndex] = useState(0);\n const [question, setQuestion] = useState(generateQuestion());\n const [selected, setSelected] = useState(null);\n const [showResult, setShowResult] = useState(false);\n const [score, setScore] = useState(0);\n const [finished, setFinished] = useState(false);\n\n const progress = useMemo(() => questionIndex + 1, [questionIndex]);\n const isCorrect = selected === question.correct;\n\n const choose = (side) => {\n if (showResult || finished) return;\n setSelected(side);\n if (side === question.correct) {\n setScore((s) => s + 1);\n }\n setShowResult(true);\n };\n\n const nextQuestion = () => {\n if (questionIndex + 1 >= totalQuestions) {\n setFinished(true);\n setShowResult(false);\n return;\n }\n setQuestionIndex((i) => i + 1);\n setQuestion(generateQuestion());\n setSelected(null);\n setShowResult(false);\n };\n\n const restart = () => {\n setQuestionIndex(0);\n setQuestion(generateQuestion());\n setSelected(null);\n setShowResult(false);\n setScore(0);\n setFinished(false);\n };\n\n return (\n

\n \n \n {!finished ? (\n <>\n

ジュースりょうクイズ

ジュースをみくらべよう！

ビーカーを見くらべて、ジュースが多いほうをえらぼう。

もんだい

{progress} / {totalQuestions}

\n\n

\n ジュースが {question.ask === 'more' ? 'よりおおい' : 'よりすくない'} ほうをえらぼう！\n

\n\n

\n {question.guide}\n

\n\n \n\n

\n せいかい: {score}\n

\n \n

\n\n {showResult && (\n \n )}\n \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","11423506404467198983","traceTime",1778689411361]

{correct ? 'せいかい！' : 'ざんねん！'}

おしまい！

ジュースを みくらべよう！

ジュースをみくらべよう！