[{"_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","69d984b490b481918093768bc19ed97b","versionInt","title","Price-tag-quiz-app","type","code/react","content","import React, { useMemo, useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\n\nconst GOODS = [\n { emoji: \"🍎\", name: \"りんご\", price: 120 },\n { emoji: \"🍌\", name: \"ばなな\", price: 180 },\n { emoji: \"🍞\", name: \"ぱん\", price: 150 },\n { emoji: \"🥛\", name: \"ぎゅうにゅう\", price: 200 },\n { emoji: \"🍪\", name: \"くっきー\", price: 130 },\n { emoji: \"🧃\", name: \"じゅーす\", price: 160 },\n { emoji: \"🍙\", name: \"おにぎり\", price: 140 },\n { emoji: \"🍫\", name: \"ちょこ\", price: 110 },\n { emoji: \"🧸\", name: \"くまのおもちゃ\", price: 300 },\n { emoji: \"✏️\", name: \"えんぴつ\", price: 90 },\n { emoji: \"📓\", name: \"のーと\", price: 170 },\n { emoji: \"🖍️\", name: \"くれよん\", price: 250 },\n];\n\nconst MONEY = [\n { value: 1, label: \"1円\", kind: \"coin\", color: \"slate\" },\n { value: 5, label: \"5円\", kind: \"coin\", color: \"amber\" },\n { value: 10, label: \"10円\", kind: \"coin\", color: \"amber\" },\n { value: 50, label: \"50円\", kind: \"coin\", color: \"amber\" },\n { value: 100, label: \"100円\", kind: \"coin\", color: \"silver\" },\n { value: 500, label: \"500円\", kind: \"coin\", color: \"gold\" },\n { value: 1000, label: \"1000円\", kind: \"bill\", color: \"green\" },\n];\n\nconst PRAISE = [\"やったね！\", \"せいかい！\", \"すごい！\", \"ばっちり！\", \"てんさい！\"];\n\nfunction shuffle(array) {\n const arr = [...array];\n for (let i = arr.length - 1; i > 0; i -= 1) {\n const j = Math.floor(Math.random() * (i + 1));\n [arr[i], arr[j]] = [arr[j], arr[i]];\n }\n return arr;\n}\n\nfunction makeQuestion() {\n const displayCount = 4 + Math.floor(Math.random() * 2);\n const items = shuffle(GOODS).slice(0, displayCount);\n const answerCount = Math.random() < 0.5 ? 2 : 3;\n const answerIndexes = shuffle(items.map((_, index) => index)).slice(0, answerCount);\n const total = answerIndexes.reduce((sum, index) => sum + items[index].price, 0);\n return { items, total, answerIndexes };\n}\n\nfunction ItemCard({ item, selected, onToggle, disabled }) {\n return (\n \n

\n {item.emoji}\n

{item.name}

\n \n {selected ? \"✓\" : \"\"}\n

\n \n

ねだん

{item.price}円

\n \n );\n}\n\nfunction MoneyVisual({ money, small = false }) {\n const coinSize = small ? \"h-12 w-12\" : \"h-16 w-16\";\n const billSize = small ? \"h-10 w-20\" : \"h-16 w-28\";\n\n if (money.kind === \"bill\") {\n return (\n

NIPPON

1000 YEN

\n 千円\n 1000\n

\n );\n }\n\n const coinPalette = {\n slate: \"border-slate-400 text-slate-700 bg-[radial-gradient(circle_at_30%_30%,#ffffff_0%,#f3f4f6_28%,#d1d5db_62%,#9ca3af_100%)]\",\n amber: \"border-amber-500 text-amber-800 bg-[radial-gradient(circle_at_30%_30%,#fff7d6_0%,#fde68a_30%,#f59e0b_68%,#b45309_100%)]\",\n silver: \"border-zinc-400 text-zinc-700 bg-[radial-gradient(circle_at_30%_30%,#ffffff_0%,#f4f4f5_28%,#d4d4d8_64%,#a1a1aa_100%)]\",\n gold: \"border-yellow-500 text-yellow-900 bg-[radial-gradient(circle_at_30%_30%,#fff8cc_0%,#fde68a_24%,#fbbf24_62%,#b45309_100%)]\",\n };\n\n const numberSize = small ? \"text-sm\" : \"text-lg\";\n const labelSize = small ? \"text-[7px]\" : \"text-[8px]\";\n const isFive = money.value === 5;\n const isFiveHundred = money.value === 500;\n\n return (\n

\n {isFiveHundred ? (\n <>\n

\n \n ) : (\n

\n )}\n\n {isFive && (\n

\n )}\n\n

\n\n

\n JAPAN\n {money.value}\n {!small && YEN}\n

\n );\n}\n\nfunction MoneyButton({ money, onAdd, disabled }) {\n return (\n onAdd(money.value)}\n disabled={disabled}\n className=\"flex h-20 items-center justify-center rounded-2xl border border-transparent bg-transparent p-1 transition hover:bg-slate-50 active:scale-95 disabled:opacity-50\"\n aria-label={money.label}\n title={money.label}\n >\n \n \n );\n}\n\nfunction MoneyPad({ onAdd, onUndo, onClear, onAnswer, disabled }) {\n return (\n

\n {MONEY.map((money) => (\n \n ))}\n

\n\n

\n \n \n \n

\n );\n}\n\nexport default function PriceTagQuizApp() {\n const totalQuestions = 10;\n const [question, setQuestion] = useState(() => makeQuestion());\n const [selectedMoney, setSelectedMoney] = useState([]);\n const [selectedItems, setSelectedItems] = useState([]);\n const [questionIndex, setQuestionIndex] = useState(0);\n const [score, setScore] = useState(0);\n const [feedback, setFeedback] = useState(null);\n const [showResult, setShowResult] = useState(false);\n\n const paidTotal = useMemo(\n () => selectedMoney.reduce((sum, value) => sum + value, 0),\n [selectedMoney]\n );\n\n const selectedItemsTotal = useMemo(\n () => selectedItems.reduce((sum, index) => sum + question.items[index].price, 0),\n [selectedItems, question.items]\n );\n\n const progress = useMemo(() => `${questionIndex + 1} / ${totalQuestions}`, [questionIndex]);\n\n const goNext = () => {\n if (questionIndex + 1 >= totalQuestions) {\n setShowResult(true);\n setFeedback(null);\n return;\n }\n setQuestion(makeQuestion());\n setSelectedMoney([]);\n setSelectedItems([]);\n setQuestionIndex((prev) => prev + 1);\n setFeedback(null);\n };\n\n const handleToggleItem = (index) => {\n if (feedback?.type === \"correct\") return;\n setSelectedItems((prev) =>\n prev.includes(index) ? prev.filter((itemIndex) => itemIndex !== index) : [...prev, index]\n );\n setSelectedMoney([]);\n setFeedback(null);\n };\n\n const handleAddMoney = (value) => {\n setSelectedMoney((prev) => [...prev, value]);\n if (feedback?.type !== \"correct\") {\n setFeedback(null);\n }\n };\n\n const handleUndo = () => {\n setSelectedMoney((prev) => prev.slice(0, -1));\n if (feedback?.type !== \"correct\") {\n setFeedback(null);\n }\n };\n\n const handleClear = () => {\n setSelectedMoney([]);\n if (feedback?.type !== \"correct\") {\n setFeedback(null);\n }\n };\n\n const handleAnswer = () => {\n if (selectedItems.length === 0) {\n setFeedback({ type: \"empty\", message: \"まずしょうひんをえらんでね\" });\n return;\n }\n\n if (selectedMoney.length === 0) {\n setFeedback({ type: \"empty\", message: \"おかねをえらんでね\" });\n return;\n }\n\n if (selectedItemsTotal !== question.total) {\n setFeedback({\n type: \"wrong\",\n message: \"えらぶしょうひんがちがうよ\",\n });\n return;\n }\n\n if (paidTotal === question.total) {\n setScore((prev) => prev + 1);\n setFeedback({\n type: \"correct\",\n message: PRAISE[Math.floor(Math.random() * PRAISE.length)],\n });\n setTimeout(() => {\n goNext();\n }, 900);\n return;\n }\n\n if (paidTotal < question.total) {\n setFeedback({\n type: \"wrong\",\n message: `あと ${question.total - paidTotal}円たりないよ`,\n });\n return;\n }\n\n setFeedback({\n type: \"wrong\",\n message: `${paidTotal - question.total}円おおいよ`,\n });\n };\n\n const handleRetry = () => {\n setQuestion(makeQuestion());\n setSelectedMoney([]);\n setSelectedItems([]);\n setQuestionIndex(0);\n setScore(0);\n setFeedback(null);\n setShowResult(false);\n };\n\n if (showResult) {\n return (\n

\n \n \n \n 🛍️\n \n

おつかいクイズしゅうりょう！

{totalQuestions}もんちゅう

{score}もんせいかい

\n {score === totalQuestions\n ? \"パーフェクト！おみせやさんもびっくり！\"\n : score >= 7\n ? \"とってもじょうず！\"\n : score >= 4\n ? \"よくできました！\"\n : \"もういちどちょうせんしてみよう！\"}\n

\n \n \n \n

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

おかいものいくらクイズ

ならんだしょうひんからかうものをえらんで、そのぶんのおかねをはらおう

\n もんだい {progress}\n

\n\n

\n \n \n しょうひんをえらぼう\n \n \n

\n かうものをタップしてえらぼう。えらんだら、したでおかねをはらうよ。\n

\n {question.items.map((item, idx) => (\n handleToggleItem(idx)}\n disabled={feedback?.type === \"correct\"}\n />\n ))}\n

えらんだしょうひん

\n {selectedItems.length > 0 ? (\n selectedItems.map((index) => {\n const item = question.items[index];\n return (\n

\n {item.emoji}\n {item.name}\n {item.price}円\n

\n );\n })\n ) : (\n まだえらんでいないよ\n )}\n

\n \n \n\n \n \n おかねをえらぼう\n \n \n

\n はらうきんがく\n えらんだしょうひん {selectedItemsTotal}円\n

\n いまだしたおかね\n

\n {paidTotal}\n 円\n

\n\n \n\n

えらんだおかね

\n {selectedMoney.length > 0 ? (\n selectedMoney.map((value, idx) => {\n const money = MONEY.find((item) => item.value === value);\n return money ? (\n

\n \n

\n ) : null;\n })\n ) : (\n まだえらんでいないよ\n )}\n

\n\n \n {feedback && (\n \n {feedback.message}\n \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","14038924279780841635","traceTime",1778699172126]

おつかいクイズ しゅうりょう！

おかいもの いくらクイズ

おつかいクイズしゅうりょう！

おかいものいくらクイズ