[{"_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","69d91bb8d280819182fb387070d21e72","versionInt","title","Staff-note-piano-quiz","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, Music4 } from 'lucide-react';\n\nconst NOTES = [\n { id: 'C4', label: 'ド', scientific: 'C4', step: 10, midi: 60, key: 'white', accidental: '' },\n { id: 'C4#', label: 'ド♯', scientific: 'C#4', step: 10, midi: 61, key: 'black', accidental: 'sharp' },\n { id: 'D4', label: 'レ', scientific: 'D4', step: 9, midi: 62, key: 'white', accidental: '' },\n { id: 'D4#', label: 'レ♯', scientific: 'D#4', step: 9, midi: 63, key: 'black', accidental: 'sharp' },\n { id: 'E4', label: 'ミ', scientific: 'E4', step: 8, midi: 64, key: 'white', accidental: '' },\n { id: 'F4', label: 'ファ', scientific: 'F4', step: 7, midi: 65, key: 'white', accidental: '' },\n { id: 'F4#', label: 'ファ♯', scientific: 'F#4', step: 7, midi: 66, key: 'black', accidental: 'sharp' },\n { id: 'G4', label: 'ソ', scientific: 'G4', step: 6, midi: 67, key: 'white', accidental: '' },\n { id: 'G4#', label: 'ソ♯', scientific: 'G#4', step: 6, midi: 68, key: 'black', accidental: 'sharp' },\n { id: 'A4', label: 'ラ', scientific: 'A4', step: 5, midi: 69, key: 'white', accidental: '' },\n { id: 'A4#', label: 'ラ♯', scientific: 'A#4', step: 5, midi: 70, key: 'black', accidental: 'sharp' },\n { id: 'B4', label: 'シ', scientific: 'B4', step: 4, midi: 71, key: 'white', accidental: '' },\n { id: 'C5', label: 'ド', scientific: 'C5', step: 3, midi: 72, key: 'white', accidental: '' },\n { id: 'C5#', label: 'ド♯', scientific: 'C#5', step: 3, midi: 73, key: 'black', accidental: 'sharp' },\n { id: 'D5', label: 'レ', scientific: 'D5', step: 2, midi: 74, key: 'white', accidental: '' },\n { id: 'D5#', label: 'レ♯', scientific: 'D#5', step: 2, midi: 75, key: 'black', accidental: 'sharp' },\n { id: 'E5', label: 'ミ', scientific: 'E5', step: 1, midi: 76, key: 'white', accidental: '' },\n { id: 'F5', label: 'ファ', scientific: 'F5', step: 0, midi: 77, key: 'white', accidental: '' },\n { id: 'F5#', label: 'ファ♯', scientific: 'F#5', step: 0, midi: 78, key: 'black', accidental: 'sharp' },\n { id: 'G5', label: 'ソ', scientific: 'G5', step: -1, midi: 79, key: 'white', accidental: '' },\n { id: 'G5#', label: 'ソ♯', scientific: 'G#5', step: -1, midi: 80, key: 'black', accidental: 'sharp' },\n { id: 'A5', label: 'ラ', scientific: 'A5', step: -2, midi: 81, key: 'white', accidental: '' },\n];\n\nconst STAFF_TOP = 38;\nconst STAFF_GAP = 20;\nconst STAFF_LEFT = 86;\nconst STAFF_WIDTH = 320;\nconst NOTE_X = 250;\nconst NOTE_SIZE_X = 12;\nconst NOTE_SIZE_Y = 8;\n\nfunction getStepY(step) {\n return STAFF_TOP + step * (STAFF_GAP / 2);\n}\n\nfunction playTone(midi, duration = 0.9) {\n const AudioContextClass = window.AudioContext || window.webkitAudioContext;\n if (!AudioContextClass) return;\n\n const audioCtx = new AudioContextClass();\n const oscillator = audioCtx.createOscillator();\n const gain = audioCtx.createGain();\n\n const frequency = 440 * Math.pow(2, (midi - 69) / 12);\n oscillator.type = 'triangle';\n oscillator.frequency.value = frequency;\n\n oscillator.connect(gain);\n gain.connect(audioCtx.destination);\n\n const now = audioCtx.currentTime;\n gain.gain.setValueAtTime(0.0001, now);\n gain.gain.exponentialRampToValueAtTime(0.2, now + 0.03);\n gain.gain.exponentialRampToValueAtTime(0.0001, now + duration);\n\n oscillator.start(now);\n oscillator.stop(now + duration + 0.02);\n\n setTimeout(() => {\n audioCtx.close().catch(() => {});\n }, (duration + 0.1) * 1000);\n}\n\nfunction makeQuestions(count = 10) {\n const pool = [...NOTES];\n const questions = [];\n\n for (let i = 0; i < count; i += 1) {\n const note = pool[Math.floor(Math.random() * pool.length)];\n questions.push({\n id: `${note.id}-${i}-${Math.random().toString(36).slice(2, 7)}`,\n answer: note,\n });\n }\n\n return questions;\n}\n\nfunction getAccidentalSymbol(accidental) {\n if (accidental === 'sharp') return '♯';\n return '';\n}\n\nfunction Staff({ note }) {\n const y = getStepY(note.step);\n const ledgerLines = [];\n\n if (note.step < 0) {\n for (let step = 0; step >= note.step; step -= 2) {\n if (step < 0) ledgerLines.push(step);\n }\n }\n if (note.step > 8) {\n for (let step = 8; step <= note.step; step += 2) {\n if (step > 8) ledgerLines.push(step);\n }\n }\n\n return (\n \n );\n}\n\nfunction PianoKey({ note, onPress, disabled }) {\n if (note.key === 'black') {\n return (\n onPress(note)}\n disabled={disabled}\n className=\"relative z-10 -mx-4 h-24 w-10 rounded-b-xl border border-slate-800 bg-slate-900 pt-2 text-center text-white shadow-md transition active:translate-y-[2px] disabled:opacity-60\"\n >\n

{note.label}

{note.scientific}

\n \n );\n }\n\n return (\n onPress(note)}\n disabled={disabled}\n className=\"relative flex h-40 w-14 flex-col justify-end rounded-b-2xl border border-slate-300 bg-white pb-3 text-center shadow-sm transition active:translate-y-[2px] disabled:opacity-60\"\n >\n {note.label}\n {note.scientific}\n \n );\n}\n\nconst WHITE_KEYS = NOTES.filter((note) => note.key === 'white');\nconst BLACK_KEYS = NOTES.filter((note) => note.key === 'black');\nconst BLACK_KEY_POSITIONS = {\n 'C4#': 38,\n 'D4#': 94,\n 'F4#': 206,\n 'G4#': 262,\n 'A4#': 318,\n 'C5#': 430,\n 'D5#': 486,\n 'F5#': 598,\n 'G5#': 654,\n};\n\nexport default function StaffNotePianoQuiz() {\n const [questions, setQuestions] = useState(() => makeQuestions());\n const [index, setIndex] = useState(0);\n const [result, setResult] = useState(null);\n const [score, setScore] = useState(0);\n const [answered, setAnswered] = useState(false);\n\n const current = questions[index];\n const finished = index >= questions.length;\n\n const progressText = useMemo(() => `${Math.min(index + 1, questions.length)} / ${questions.length}`, [index, questions.length]);\n\n const handleChoice = (note) => {\n if (!current || answered) return;\n\n playTone(note.midi, 0.8);\n const correct = note.id === current.answer.id;\n setAnswered(true);\n setResult(correct ? 'correct' : 'wrong');\n if (correct) setScore((s) => s + 1);\n };\n\n const handleNext = () => {\n if (index + 1 >= questions.length) {\n setIndex(questions.length);\n } else {\n setIndex((i) => i + 1);\n }\n setAnswered(false);\n setResult(null);\n };\n\n const resetQuiz = () => {\n setQuestions(makeQuestions());\n setIndex(0);\n setResult(null);\n setScore(0);\n setAnswered(false);\n };\n\n return (\n

\n \n 五線譜おんぷクイズ\n

\n 五線譜の音を見て、下の鍵盤からただしい音をえらぼう\n

\n \n

\n\n \n \n {finished ? (\n

\n \n 🎹\n \n

おつかれさま！

{questions.length}問中 {score}問せいかい！

もう1回やると、出る音が少し入れかわります。

\n \n

\n ) : (\n

\n もんだい {progressText}\n

\n せいかい {score}\n

\n\n

\n この音はどれ？\n

\n \n

\n\n

\n けんばんをおしてこたえてね\n

\n {BLACK_KEYS.map((note) => (\n \n \n

\n ))}\n

\n {WHITE_KEYS.map((note) => (\n \n ))}\n

\n\n \n {result && (\n \n

{result === 'correct' ? '🎉' : '😊'}

\n {result === 'correct' ? 'せいかい！' : 'おしい！'}\n

\n こたえは {current.answer.label}（{current.answer.scientific}）\n

\n \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","7802584065613799920","traceTime",1778702824281]