[{"_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","69d8b87481e08191803cb7f6a9506aac","versionInt","title","Clock-quiz-app","type","code/react","content","import React, { useEffect, useMemo, useState } from \"react\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { motion } from \"framer-motion\";\n\nconst TOTAL_QUESTIONS = 5;\nconst MINUTE_OPTIONS = [\"0\", \"5\", \"10\", \"15\", \"20\", \"25\", \"30\", \"35\", \"40\", \"45\", \"50\", \"55\"];\n\nfunction generateQuestions() {\n const times = [];\n const used = new Set();\n\n while (times.length < TOTAL_QUESTIONS) {\n const hour = Math.floor(Math.random() * 12) + 1;\n const minuteOptions = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];\n const minute = minuteOptions[Math.floor(Math.random() * minuteOptions.length)];\n const key = `${hour}:${minute}`;\n if (!used.has(key)) {\n used.add(key);\n times.push({ hour, minute });\n }\n }\n\n return times;\n}\n\nfunction ClockFace({ hour, minute }) {\n const numbers = Array.from({ length: 12 }, (_, i) => i + 1);\n const size = 288;\n const center = size / 2;\n const numberRadius = 96;\n\n const minuteAngle = (minute * 6 - 90) * (Math.PI / 180);\n const hourAngle = (((hour % 12) * 30 + minute * 0.5) - 90) * (Math.PI / 180);\n\n const minuteLength = 96;\n const hourLength = 68;\n\n const minuteX = center + minuteLength * Math.cos(minuteAngle);\n const minuteY = center + minuteLength * Math.sin(minuteAngle);\n const hourX = center + hourLength * Math.cos(hourAngle);\n const hourY = center + hourLength * Math.sin(hourAngle);\n\n return (\n

\n {numbers.map((num) => {\n const angle = ((num * 30) - 90) * (Math.PI / 180);\n const x = center + numberRadius * Math.cos(angle);\n const y = center + numberRadius * Math.sin(angle);\n return (\n \n {num}\n

\n );\n })}\n\n \n \n );\n}\n\nfunction HourPad({ onTap }) {\n const buttons = [\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"けす\", \"0\"];\n\n return (\n

\n {buttons.map((label) => (\n onTap(label)}\n className=\"h-14 rounded-2xl text-xl font-bold\"\n >\n {label}\n \n ))}\n

\n );\n}\n\nfunction MinutePad({ onSelect }) {\n return (\n

\n {MINUTE_OPTIONS.map((minute) => (\n onSelect(minute)}\n className=\"h-12 rounded-2xl text-lg font-bold\"\n >\n {minute.padStart(2, \"0\")}\n \n ))}\n

\n );\n}\n\nfunction CelebrationPopup({ open }) {\n if (!open) return null;\n\n return (\n \n

せいかい！

\n \n

すごい！よくできたね！

\n \n );\n}\n\nexport default function ClockQuizApp() {\n const questions = useMemo(() => generateQuestions(), []);\n const [currentIndex, setCurrentIndex] = useState(0);\n const [hourInput, setHourInput] = useState(\"\");\n const [minuteInput, setMinuteInput] = useState(\"\");\n const [score, setScore] = useState(0);\n const [showResult, setShowResult] = useState(false);\n const [feedback, setFeedback] = useState(\"\");\n const [activeField, setActiveField] = useState(\"hour\");\n const [showCelebration, setShowCelebration] = useState(false);\n\n const current = questions[currentIndex];\n\n useEffect(() => {\n if (!showCelebration) return;\n const timer = setTimeout(() => setShowCelebration(false), 1100);\n return () => clearTimeout(timer);\n }, [showCelebration]);\n\n const handleHourTap = (label) => {\n if (label === \"けす\") {\n setHourInput((prev) => prev.slice(0, -1));\n return;\n }\n\n const next = `${hourInput}${label}`.slice(0, 2);\n if (Number(next) >= 1 && Number(next) <= 12) {\n setHourInput(next);\n } else if (label !== \"0\" && Number(label) >= 1 && Number(label) <= 9) {\n setHourInput(label);\n }\n };\n\n const handleMinuteSelect = (minute) => {\n setMinuteInput(String(Number(minute)));\n };\n\n const handleSubmit = () => {\n const enteredHour = Number(hourInput);\n const enteredMinute = Number(minuteInput);\n\n if (hourInput === \"\" || minuteInput === \"\") {\n setFeedback(\"じかんとふんをいれてね\");\n return;\n }\n\n const isCorrect = enteredHour === current.hour && enteredMinute === current.minute;\n\n if (isCorrect) {\n setScore((prev) => prev + 1);\n setFeedback(\"せいかい！\");\n setShowCelebration(true);\n } else {\n setFeedback(`ざんねん！こたえは ${current.hour}じ${String(current.minute).padStart(2, \"0\")}ふん`);\n }\n\n setTimeout(() => {\n setFeedback(\"\");\n setHourInput(\"\");\n setMinuteInput(\"\");\n setActiveField(\"hour\");\n if (currentIndex + 1 < TOTAL_QUESTIONS) {\n setCurrentIndex((prev) => prev + 1);\n } else {\n setShowResult(true);\n }\n }, 1200);\n };\n\n const restart = () => {\n window.location.reload();\n };\n\n if (showResult) {\n return (\n

\n \n \n けっかはっぴょう\n \n \n

{score} / {TOTAL_QUESTIONS}

よくできました！とけいはまいにちみるほどつよくなるよ。

\n \n \n \n

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

\n \n \n \n \n これはなんじ？\n

5ふんたんいでぜんぶで 5もん！

\n \n \n

\n もんだい {currentIndex + 1} / {TOTAL_QUESTIONS}\n

\n \n \n \n \n\n \n \n \n こたえをいれよう\n \n \n

\n setActiveField(\"hour\")}\n className={`h-14 rounded-2xl border-2 text-center text-xl font-bold ${activeField === \"hour\" ? \"border-sky-500 bg-sky-50\" : \"border-slate-200 bg-white\"}`}\n >\n {hourInput || \"なんじ\"}\n \n じ\n setActiveField(\"minute\")}\n className={`h-14 rounded-2xl border-2 text-center text-xl font-bold ${activeField === \"minute\" ? \"border-sky-500 bg-sky-50\" : \"border-slate-200 bg-white\"}`}\n >\n {minuteInput === \"\" ? \"なんふん\" : minuteInput}\n \n ふん\n

\n\n {activeField === \"hour\" ? (\n \n ) : (\n \n )}\n\n \n\n

{feedback}

\n\n

・じはすうじ、ふんは 5ふんごとのボタンをおしてね

・5ふんごとのもんだいだけでるよ

・れい：7じ15ふん、8じ5ふん

\n\n

いまのてんすう：{score}

\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","6094753300839355079","traceTime",1778692473404]