\n \n \n\n",[],[181],"71c3de24-534b-472c-a7f7-13792185be99","app.js","ea0b3f8a-7a23-11f1-99a9-1607ee4eb77e",["D",1783443102389],"script","import htm from \"https://esm.sh/htm@3.1.1\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0,react-dom@18.2.0\";\n\nconst html = htm.bind(React.createElement);\nconst { useState, useEffect, useMemo, useRef } = React;\n\n// -------- CSV parsing --------\n// Handles quoted fields with commas. The given CSV uses no quoting, but we\n// implement it properly just in case.\nfunction parseCSV(text) {\n const rows = [];\n let i = 0;\n let field = \"\";\n let row = [];\n let inQuotes = false;\n while (i < text.length) {\n const c = text[i];\n if (inQuotes) {\n if (c === '\"') {\n if (text[i + 1] === '\"') {\n field += '\"';\n i += 2;\n continue;\n }\n inQuotes = false;\n i++;\n continue;\n }\n field += c;\n i++;\n } else {\n if (c === '\"') {\n inQuotes = true;\n i++;\n } else if (c === \",\") {\n row.push(field);\n field = \"\";\n i++;\n } else if (c === \"\\n\" || c === \"\\r\") {\n row.push(field);\n rows.push(row);\n field = \"\";\n row = [];\n // swallow \\r\\n\n if (c === \"\\r\" && text[i + 1] === \"\\n\") i += 2; else i++;\n } else {\n field += c;\n i++;\n }\n }\n }\n if (field.length > 0 || row.length > 0) {\n row.push(field);\n rows.push(row);\n }\n return rows;\n}\n\nfunction csvToQuestions(csvText) {\n const rows = parseCSV(csvText).filter((r) => r.length > 1);\n if (rows.length === 0) return [];\n const header = rows[0].map((h) => h.trim());\n const col = (name) => header.indexOf(name);\n return rows.slice(1).map((r) => {\n const get = (name) => r[col(name)] ?? \"\";\n return {\n id: get(\"id\"),\n question: get(\"question\"),\n option_a: get(\"option_a\"),\n option_b: get(\"option_b\"),\n option_c: get(\"option_c\"),\n option_d: get(\"option_d\"),\n correct_option: get(\"correct_option\").trim().toUpperCase(),\n explanation: get(\"explanation\"),\n category: get(\"category\").trim(),\n };\n });\n}\n\nfunction shuffle(arr) {\n const a = arr.slice();\n for (let i = a.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [a[i], a[j]] = [a[j], a[i]];\n }\n return a;\n}\n\nfunction sampleQuestions(pool, max = 10) {\n return shuffle(pool).slice(0, Math.min(max, pool.length));\n}\n\n// -------- Components --------\n\nfunction LoadingScreen() {\n return html`\n

Loading questions…

\n `;\n}\n\nfunction ErrorScreen({ message, onRetry }) {\n return html`\n

⚠️

Something went wrong

${message}

\n Retry\n

\n `;\n}\n\nfunction CategoryScreen({ categories, onPick, onSurprise }) {\n return html`\n

🧠 Quiz Game

Pick a category to begin.

Choose a category

\n onPick(c)}\n data-testid=${`category-${c}`}\n >\n
${c}
\n \n

\n \n 🎲 Surprise Me!\n \n

\n view source\n

\n `;\n}\n\nfunction WarningScreen({ category, count, onProceed, onCancel }) {\n return html`\n

⚠️

Not enough questions

\n Not enough questions in this category for all accomplishments\n

\n ${category} has ${count} question${count === 1 ? \"\" : \"s\"}.\n

\n Back\n Proceed anyway\n

\n `;\n}\n\nfunction GameScreen({\n category,\n questions,\n currentIndex,\n totalQuestions,\n onAnswer,\n showFeedback,\n lastAnswerCorrect,\n lastSelected,\n consecutiveCorrect,\n maxConsecutiveCorrect,\n onNext,\n isLast,\n}) {\n const q = questions[currentIndex];\n if (!q) return null;\n const options = [\n { key: \"A\", text: q.option_a },\n { key: \"B\", text: q.option_b },\n { key: \"C\", text: q.option_c },\n { key: \"D\", text: q.option_d },\n ];\n return html`\n

${category}

\n Question ${currentIndex + 1} of ${totalQuestions}\n

${q.question}

\n onAnswer(opt.key)}\n data-testid=${`option-${opt.key}`}\n >\n ${opt.key}\n ${opt.text}\n ${showFeedback && isCorrect &&\n html`✓`}\n ${showFeedback && isSelected && !isCorrect &&\n html`✗`}\n \n

\n ${showFeedback &&\n html`\n \n \n ${lastAnswerCorrect ? \"Correct!\" : \"Incorrect\"}\n

${q.explanation}

\n `}\n ${showFeedback &&\n html`\n

\n Streak: ${consecutiveCorrect} (best ${maxConsecutiveCorrect})\n

\n \n ${isLast ? \"See Results\" : \"Next Question\"}\n \n

\n `}\n \n \n \n `;\n}\n\nfunction ResultsScreen({\n category,\n score,\n total,\n percent,\n elapsedSeconds,\n achievements,\n onPlayAgain,\n onNewCategory,\n}) {\n return html`\n

🎉

Round Complete

${category}

\n ${score}/${total} Correct (${percent}%)

\n Elapsed: ${elapsedSeconds} second${elapsedSeconds === 1 ? \"\" : \"s\"}

🏆 Achievements

\n ${achievements.length === 0\n ? html`

No achievements this round

`\n : html`\n

\n ${a.emoji}\n

${a.name}

${a.description}

\n \n `,\n )}\n

\n `}\n

\n Play Again\n New Category\n

\n view source\n

\n \n \n `;\n}\n\n// -------- App --------\n\nfunction App() {\n const [allQuestions, setAllQuestions] = useState(null);\n const [error, setError] = useState(null);\n const [screen, setScreen] = useState(\"loading\");\n const [category, setCategory] = useState(null);\n const [pendingCategory, setPendingCategory] = useState(null);\n const [questions, setQuestions] = useState([]);\n const [currentIndex, setCurrentIndex] = useState(0);\n const [answers, setAnswers] = useState([]); // array of bool\n const [consecutiveCorrect, setConsecutiveCorrect] = useState(0);\n const [maxConsecutiveCorrect, setMaxConsecutiveCorrect] = useState(0);\n const [showFeedback, setShowFeedback] = useState(false);\n const [lastAnswerCorrect, setLastAnswerCorrect] = useState(false);\n const [lastSelected, setLastSelected] = useState(null);\n const [startTime, setStartTime] = useState(null);\n const [elapsedSeconds, setElapsedSeconds] = useState(0);\n const startTimeRef = useRef(null);\n\n const loadCSV = async () => {\n setError(null);\n setAllQuestions(null);\n setScreen(\"loading\");\n try {\n const res = await fetch(\"/assets/questions.csv\");\n if (!res.ok) throw new Error(`Failed to load questions (${res.status})`);\n const text = await res.text();\n const qs = csvToQuestions(text);\n if (qs.length === 0) throw new Error(\"No questions found in CSV\");\n setAllQuestions(qs);\n setScreen(\"category\");\n } catch (e) {\n setError(e?.message ?? String(e));\n }\n };\n\n useEffect(() => {\n loadCSV();\n }, []);\n\n const categories = useMemo(() => {\n if (!allQuestions) return [];\n const set = new Set();\n for (const q of allQuestions) set.add(q.category);\n return Array.from(set).sort();\n }, [allQuestions]);\n\n const startGame = (cat) => {\n const pool = allQuestions.filter((q) => q.category === cat);\n const sampled = sampleQuestions(pool, 10);\n setCategory(cat);\n setQuestions(sampled);\n setCurrentIndex(0);\n setAnswers([]);\n setConsecutiveCorrect(0);\n setMaxConsecutiveCorrect(0);\n setShowFeedback(false);\n setLastAnswerCorrect(false);\n setLastSelected(null);\n const now = Date.now();\n setStartTime(now);\n startTimeRef.current = now;\n setScreen(\"game\");\n };\n\n const onPickCategory = (cat) => {\n const pool = allQuestions.filter((q) => q.category === cat);\n if (pool.length < 10) {\n setPendingCategory({ cat, count: pool.length });\n setScreen(\"warning\");\n } else {\n startGame(cat);\n }\n };\n\n const onSurprise = () => {\n if (categories.length === 0) return;\n const cat = categories[Math.floor(Math.random() * categories.length)];\n onPickCategory(cat);\n };\n\n const onAnswer = (key) => {\n if (showFeedback) return;\n const q = questions[currentIndex];\n const isCorrect = key === q.correct_option;\n setLastSelected(key);\n setLastAnswerCorrect(isCorrect);\n setShowFeedback(true);\n const newAnswers = answers.concat([isCorrect]);\n setAnswers(newAnswers);\n if (isCorrect) {\n const next = consecutiveCorrect + 1;\n setConsecutiveCorrect(next);\n if (next > maxConsecutiveCorrect) setMaxConsecutiveCorrect(next);\n } else {\n setConsecutiveCorrect(0);\n }\n };\n\n const onNext = () => {\n if (currentIndex + 1 >= questions.length) {\n // end game\n const end = Date.now();\n setElapsedSeconds(Math.max(1, Math.round((end - startTimeRef.current) / 1000)));\n setScreen(\"results\");\n } else {\n setCurrentIndex(currentIndex + 1);\n setShowFeedback(false);\n setLastSelected(null);\n }\n };\n\n const score = answers.filter(Boolean).length;\n const total = questions.length;\n const percent = total > 0 ? Math.round((score / total) * 100) : 0;\n\n const achievements = useMemo(() => {\n const list = [];\n if (total === 10 && score === 10) {\n list.push({\n id: \"perfect\",\n name: \"Perfect Round\",\n emoji: \"💯\",\n description: \"Answered all 10 questions correctly!\",\n });\n }\n if (maxConsecutiveCorrect >= 5) {\n list.push({\n id: \"hotstreak\",\n name: \"Hot Streak\",\n emoji: \"🔥\",\n description: `Got ${maxConsecutiveCorrect} answers right in a row!`,\n });\n }\n if (maxConsecutiveCorrect >= 3) {\n list.push({\n id: \"triple\",\n name: \"Triple Win\",\n emoji: \"🎯\",\n description: `Got ${maxConsecutiveCorrect} answers right in a row!`,\n });\n }\n return list;\n }, [total, score, maxConsecutiveCorrect]);\n\n if (error) {\n return html`<${ErrorScreen} message=${error} onRetry=${loadCSV} />`;\n }\n if (screen === \"loading\" || allQuestions === null) {\n return html`<${LoadingScreen} />`;\n }\n if (screen === \"category\") {\n return html`\n <${CategoryScreen}\n categories=${categories}\n onPick=${onPickCategory}\n onSurprise=${onSurprise}\n />\n `;\n }\n if (screen === \"warning\") {\n return html`\n <${WarningScreen}\n category=${pendingCategory.cat}\n count=${pendingCategory.count}\n onCancel=${() => {\n setScreen(\"category\");\n setPendingCategory(null);\n }}\n onProceed=${() => {\n const cat = pendingCategory.cat;\n setPendingCategory(null);\n startGame(cat);\n }}\n />\n `;\n }\n if (screen === \"game\") {\n return html`\n <${GameScreen}\n category=${category}\n questions=${questions}\n currentIndex=${currentIndex}\n totalQuestions=${questions.length}\n onAnswer=${onAnswer}\n showFeedback=${showFeedback}\n lastAnswerCorrect=${lastAnswerCorrect}\n lastSelected=${lastSelected}\n consecutiveCorrect=${consecutiveCorrect}\n maxConsecutiveCorrect=${maxConsecutiveCorrect}\n onNext=${onNext}\n isLast=${currentIndex + 1 >= questions.length}\n />\n `;\n }\n if (screen === \"results\") {\n return html`\n <${ResultsScreen}\n category=${category}\n score=${score}\n total=${total}\n percent=${percent}\n elapsedSeconds=${elapsedSeconds}\n achievements=${achievements}\n onPlayAgain=${() => startGame(category)}\n onNewCategory=${() => {\n setCategory(null);\n setScreen(\"category\");\n }}\n />\n `;\n }\n return null;\n}\n\ncreateRoot(document.getElementById(\"root\")).render(html`<${App} />`);\n",[],[189],["D",1783442973274],[],[18,64],["D",1783442973274],[166],[18],["D",1783442757964],{"_11":12,"_120":69},{"_11":12,"_116":69,"_68":69,"_31":67,"_117":118,"_119":30},{"_39":107,"_13":16,"_33":36,"_108":73,"_109":-5,"_110":-5,"_111":-5,"_112":-5,"_113":-5,"_114":14,"_115":12},"ctx",{"_52":-5,"_139":239,"_240":241,"_242":243,"_244":30,"_245":30,"_246":30,"_247":24,"_248":-5,"_249":-7,"_250":-7,"_251":26,"_252":30,"_253":30,"_254":-5,"_255":30,"_256":30,"_257":30,"_258":-5},"ENV",{"_210":211,"_212":213,"_214":16,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · assets