[{"_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","68f866d332b881918ab3372d7a13e349","versionInt","title","Galatian Quiz Animation","type","code/react","content","import { motion, AnimatePresence } from 'framer-motion'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Button } from '@/components/ui/button'\nimport { useState, useMemo, useEffect, useRef } from 'react'\nimport Confetti from 'react-confetti'\n\n// ===== 題庫：羅馬書 20 題 =====\nconst romans = [\n { q: '《羅馬書》的作者是誰？', options: ['保羅', '彼得', '約翰', '雅各'], answer: 0, verse: '羅 1:1' },\n { q: '《羅馬書》最主要的主題是？', options: ['律法的意義', '信心稱義', '聖靈的工作', '教會秩序'], answer: 1, verse: '羅 1:17' },\n { q: '「世人都犯了罪，虧缺了神的榮耀」出自哪一章？', options: ['第1章', '第2章', '第3章', '第4章'], answer: 2, verse: '羅 3:23' },\n { q: '亞伯拉罕被稱為「信心之父」是因為他？', options: ['行律法完全', '在未受割禮前就信神', '建立祭壇', '為神獻上以撒'], answer: 1, verse: '羅 4:3' },\n { q: '「罪的工價乃是死，惟有神的恩賜…乃是永生」出自哪裡？', options: ['羅5:8', '羅6:23', '羅8:1', '羅10:9'], answer: 1, verse: '羅 6:23' },\n { q: '「如今那些在基督耶穌裡的，就不被定罪了」出自哪一章？', options: ['第5章', '第6章', '第7章', '第8章'], answer: 3, verse: '羅 8:1' },\n { q: '保羅在第12章教導信徒應當？', options: ['行律法的義', '對仇敵報仇', '將身體獻上當作活祭', '尋求財富'], answer: 2, verse: '羅 12:1' },\n { q: '「我們既因信稱義，就藉著主耶穌基督得與神相和」出自哪裡？', options: ['羅5:1', '羅6:23', '羅7:4', '羅8:1'], answer: 0, verse: '羅 5:1' },\n { q: '信徒「一舉一動有新生的樣式」的經文背景是受洗聯合於誰？', options: ['亞伯拉罕', '摩西', '基督的死與復活', '大衛'], answer: 2, verse: '羅 6:4' },\n { q: '誰能使我們與基督的愛隔絕？', options: ['患難', '逼迫', '刀劍', '沒有任何事能隔絕'], answer: 3, verse: '羅 8:38–39' },\n { q: '「凡求告主名的就必得救」強調：', options: ['呼求的重要', '信心與宣告的結合', '律法的功德', '悔改的行為'], answer: 1, verse: '羅 10:13' },\n { q: '第9–11章主要討論：', options: ['外邦人的救恩', '以色列的揀選與救恩計畫', '聖靈的能力', '教會制度'], answer: 1, verse: '羅 11:26' },\n { q: '「不要效法這個世界，只要心意更新而變化」出自哪一章？', options: ['第8章', '第10章', '第12章', '第13章'], answer: 2, verse: '羅 12:2' },\n { q: '保羅勸信徒與眾人和睦，強調？', options: ['不爭論', '忍耐', '饒恕與愛仇敵', '避免聚會'], answer: 2, verse: '羅 12:18' },\n { q: '第13章提到基督徒對政府的態度應當是？', options: ['反抗', '順服掌權者', '隱退避世', '冷漠不理'], answer: 1, verse: '羅 13:1' },\n { q: '「凡事都不可虧欠人，惟有彼此相愛要常以為虧欠」出自？', options: ['第10章', '第11章', '第12章', '第13章'], answer: 3, verse: '羅 13:8' },\n { q: '不要彼此論斷，因為我們都要：', options: ['彼此順服', '站在神的審判台前', '遵行律法', '學會禁食'], answer: 1, verse: '羅 14:10' },\n { q: '「信心軟弱的人你們要接納」的要點是：', options: ['堅守己見', '包容與接納', '遠離軟弱者', '多辯論真理'], answer: 1, verse: '羅 14:1' },\n { q: '福音是「神的大能」，要救：', options: ['猶太人', '外邦人', '所有信的人', '義人'], answer: 2, verse: '羅 1:16' },\n { q: '第16章多次問安顯出保羅：', options: ['政治野心', '重視團契與同工', '害怕孤單', '喜歡奉承'], answer: 1, verse: '羅 16:3' },\n]\n\n// ===== 題庫：加拉太書 20 題 =====\nconst galatians = [\n { q: '《加拉太書》的作者是誰？', options: ['保羅', '彼得', '約翰', '猶大'], answer: 0, verse: '加 1:1' },\n { q: '保羅把書信寫給誰？', options: ['羅馬眾教會', '耶路撒冷教會', '加拉太各教會', '亞細亞七教會'], answer: 2, verse: '加 1:2' },\n { q: '《加拉太書》的核心主題是：', options: ['末世論', '因信稱義與在基督裡的自由', '教會秩序', '屬靈恩賜'], answer: 1, verse: '加 2:16；5:1' },\n { q: '保羅在安提阿當面指責哪位使徒的偽善？', options: ['雅各', '約翰', '彼得（磯法）', '巴拿巴'], answer: 2, verse: '加 2:11-14' },\n { q: '「我已經與基督同釘十字架……如今活著的不再是我」出自：', options: ['加 2:20', '加 3:28', '加 5:1', '加 6:14'], answer: 0, verse: '加 2:20' },\n { q: '信徒領受聖靈是因為：', options: ['遵行律法', '獻祭', '聽信福音（憑信心）', '守節期'], answer: 2, verse: '加 3:2' },\n { q: '保羅以哪位舊約人物作信心的榜樣？', options: ['摩西', '大衛', '亞伯拉罕', '以利亞'], answer: 2, verse: '加 3:6-9' },\n { q: '「你們在基督裡都成為一了」出自：', options: ['加 2:20', '加 3:28', '加 4:4', '加 5:13'], answer: 1, verse: '加 3:28' },\n { q: '夏甲與撒拉的比喻說明：', options: ['婚姻教導', '兩種約：奴僕與自由', '祭祀制度', '王權更替'], answer: 1, verse: '加 4:21-31' },\n { q: '「基督釋放了我們，叫我們得以自由」強調不要再：', options: ['彼此相愛', '被奴僕的軛轄制', '傳福音', '守主日'], answer: 1, verse: '加 5:1' },\n { q: '「要用愛心互相服事」是對自由的正確運用，出自：', options: ['加 5:13', '加 2:16', '加 6:2', '加 1:8'], answer: 0, verse: '加 5:13' },\n { q: '勝過情慾的方法是：', options: ['加強意志', '多守規條', '靠聖靈行事', '遠避人群'], answer: 2, verse: '加 5:16' },\n { q: '下列何者屬於「聖靈的果子」？', options: ['嫉妒', '溫柔', '邪淫', '紛爭'], answer: 1, verse: '加 5:22-23' },\n { q: '下列何者屬於「情慾的事」？', options: ['仁愛', '節制', '信實', '嫉妒'], answer: 3, verse: '加 5:19-21' },\n { q: '「若有人偶然被過犯所勝…當用溫柔的心把他挽回」出自：', options: ['加 6:1', '加 6:10', '加 1:10', '加 2:10'], answer: 0, verse: '加 6:1' },\n { q: '「你們各人的重擔要互相擔當」出自：', options: ['加 6:2', '加 6:7', '加 5:26', '加 2:20'], answer: 0, verse: '加 6:2' },\n { q: '「人種的是什麼，收的也是什麼」主要在教導：', options: ['農業原則', '施比受更為有福', '屬靈的撒種與收成', '十一奉獻'], answer: 2, verse: '加 6:7-8' },\n { q: '保羅誇口只在於：', options: ['他的背景', '他的異象', '十字架', '他的教會增長'], answer: 2, verse: '加 6:14' },\n { q: '在基督裡「受割禮不受割禮都無關緊要，要緊的是：」', options: ['守誡命', '新造的人', '行善事', '守安息日'], answer: 1, verse: '加 6:15' },\n { q: '對傳別的福音的人，保羅說：', options: ['多溝通', '勸他悔改', '可咒詛（當受咒詛）', '暫且包容'], answer: 2, verse: '加 1:8-9' },\n]\n\n// 主題樣式與音樂配置\nconst THEMES = {\n romans: {\n title: '羅馬書簡易測驗（選擇題）',\n bgFrom: 'from-amber-50',\n bgTo: 'to-amber-200',\n titleColor: 'text-amber-800',\n barTrack: 'bg-amber-100',\n barFill: 'bg-amber-500',\n hover: 'hover:bg-amber-50',\n border: 'border-amber-200',\n letter: 'text-amber-800 bg-amber-100 border-amber-300',\n verse: 'text-amber-700',\n backdropText: '信心稱義 — 羅馬書主題',\n bgm: 'https://cdn.pixabay.com/download/audio/2023/03/01/audio_33e8c71627.mp3?filename=gentle-acoustic-background-140158.mp3',\n questions: romans,\n },\n galatians: {\n title: '加拉太書簡易測驗（選擇題）',\n bgFrom: 'from-sky-50',\n bgTo: 'to-indigo-200',\n titleColor: 'text-indigo-800',\n barTrack: 'bg-indigo-100',\n barFill: 'bg-indigo-500',\n hover: 'hover:bg-indigo-50',\n border: 'border-indigo-200',\n letter: 'text-indigo-800 bg-indigo-100 border-indigo-300',\n verse: 'text-indigo-700',\n backdropText: '因信得自由 — 加拉太書主題',\n bgm: 'https://cdn.pixabay.com/download/audio/2022/10/24/audio_9a3a6c9b1a.mp3?filename=inspiring-acoustic-123059.mp3',\n questions: galatians,\n },\n} as const\n\ntype BookKey = keyof typeof THEMES\n\n// 動畫 variants\nconst fadeUp = {\n hidden: { opacity: 0, y: 16 },\n visible: (i: number) => ({ opacity: 1, y: 0, transition: { delay: 0.05 * i, duration: 0.35 } }),\n}\n\n// 工具函式：洗牌\nfunction shuffleArray(arr: T[], seed?: number): T[] {\n const a = arr.slice()\n let m = a.length, t: T, i: number\n let s = seed ?? Math.floor(Math.random() * 1e9)\n const rand = () => (s = (s * 48271) % 0x7fffffff) / 0x7fffffff\n while (m) {\n i = Math.floor(rand() * m--)\n t = a[m]; a[m] = a[i]; a[i] = t\n }\n return a\n}\n\n// 依設定準備題目/選項\nfunction prepareQuestions(base: typeof romans, count: number, shuffleQ: boolean, shuffleOpt: boolean, seed?: number) {\n let qs = shuffleQ ? shuffleArray(base, seed) : base.slice()\n qs = qs.slice(0, Math.min(count, qs.length))\n if (!shuffleOpt) return qs\n return qs.map((q) => {\n const optionPairs = q.options.map((opt, idx) => ({ opt, idx }))\n const shuffled = shuffleArray(optionPairs, Math.floor(Math.random() * 1e9))\n const newOptions = shuffled.map((p) => p.opt)\n const newAnswer = shuffled.findIndex((p) => p.idx === q.answer)\n return { ...q, options: newOptions, answer: newAnswer }\n })\n}\n\nexport default function QuizWithSwitcher() {\n const [book, setBook] = useState('galatians')\n const [questionCount, setQuestionCount] = useState<10 | 15 | 20>(20)\n const [shuffleQuestions, setShuffleQuestions] = useState(true)\n const [shuffleOptions, setShuffleOptions] = useState(true)\n const [shuffleKey, setShuffleKey] = useState(0) // 重新洗牌用\n\n const theme = THEMES[book]\n const bgmRef = useRef(null)\n const correctSoundRef = useRef(null)\n const wrongSoundRef = useRef(null)\n\n // 準備題目（依目前設定）\n const questions = useMemo(() => {\n return prepareQuestions(theme.questions, questionCount, shuffleQuestions, shuffleOptions, shuffleKey)\n }, [theme.questions, questionCount, shuffleQuestions, shuffleOptions, shuffleKey])\n\n const [index, setIndex] = useState(0)\n const [selected, setSelected] = useState(null)\n const [locked, setLocked] = useState(false)\n const [score, setScore] = useState(0)\n const [showConfetti, setShowConfetti] = useState(false)\n\n const current = questions[index]\n const progress = Math.round((questions.length ? (index) / questions.length : 0) * 100)\n\n // 自動播放與切換音樂\n useEffect(() => {\n if (!bgmRef.current) return\n bgmRef.current.src = theme.bgm\n bgmRef.current.volume = 0.28\n bgmRef.current.loop = true\n bgmRef.current.play().catch(() => {})\n }, [theme.bgm])\n\n // 切換題庫或設定時重置\n useEffect(() => {\n setIndex(0)\n setSelected(null)\n setLocked(false)\n setScore(0)\n }, [book, questionCount, shuffleKey])\n\n // 迷你自檢（開發用）\n useEffect(() => {\n try {\n const banks = [romans, galatians]\n banks.forEach((bank, i) => {\n console.assert(Array.isArray(bank) && bank.length === 20, `題庫 ${i} 應為 20 題`)\n const bad = bank.findIndex(q => q.options.length !== 4 || q.answer < 0 || q.answer > 3)\n console.assert(bad === -1, `題庫 ${i} 所有題目需為 4 個選項且答案索引介於 0–3`)\n })\n } catch {}\n }, [])\n\n const reShuffle = () => setShuffleKey((k) => k + 1)\n\n const onSwitch = (e: React.ChangeEvent) => {\n const next = e.target.value as BookKey\n setBook(next)\n }\n\n const onCount = (e: React.ChangeEvent) => {\n setQuestionCount(Number(e.target.value) as 10 | 15 | 20)\n }\n\n const choose = (i: number) => {\n if (locked || !current) return\n setSelected(i)\n setLocked(true)\n if (i === current.answer) {\n setScore((s) => s + 1)\n correctSoundRef.current?.play()\n setShowConfetti(true)\n setTimeout(() => setShowConfetti(false), 1500)\n } else {\n wrongSoundRef.current?.play()\n }\n }\n\n const next = () => {\n const nextIdx = index + 1\n if (nextIdx < questions.length) {\n setIndex(nextIdx)\n setSelected(null)\n setLocked(false)\n }\n }\n\n const restart = () => {\n setIndex(0)\n setSelected(null)\n setLocked(false)\n setScore(0)\n reShuffle()\n }\n\n const finished = index === questions.length - 1 && locked\n\n return (\n

\n {showConfetti && }\n\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","578949837166433193","traceTime",1776396956764]

{current?.q}