\n \n \n \n",[],[202,204],"de663fd6-9410-4eb9-af22-e8467873a85c","favicon.svg","4349bc4a-7a3b-11f1-ac1b-1607ee4eb77e",5,["D",1783453037542],"\n",[],[202,211],"a334e976-6a45-4447-b689-3e5395010e25","App.tsx","438b99f8-7a3b-11f1-ac1b-1607ee4eb77e","7e25cac2-cb60-43ca-b728-464140c10768",11,["D",1783453198672],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface Question {\n id: string;\n question: string;\n option_a: string;\n option_b: string;\n option_c: string;\n option_d: string;\n correct_option: string;\n explanation: string;\n category: string;\n}\n\ntype Phase = \"loading\" | \"category\" | \"warning\" | \"quiz\" | \"results\";\n\nconst OPTION_KEYS = [\"A\", \"B\", \"C\", \"D\"] as const;\n\nfunction sampleQuestions(pool: Question[], max: number): Question[] {\n const copy = [...pool];\n // Fisher-Yates shuffle\n for (let i = copy.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [copy[i], copy[j]] = [copy[j], copy[i]];\n }\n return copy.slice(0, Math.min(max, copy.length));\n}\n\nfunction optionText(q: Question, key: string): string {\n switch (key) {\n case \"A\":\n return q.option_a;\n case \"B\":\n return q.option_b;\n case \"C\":\n return q.option_c;\n default:\n return q.option_d;\n }\n}\n\nexport function App() {\n const [allQuestions, setAllQuestions] = useState([]);\n const [phase, setPhase] = useState(\"loading\");\n const [loadError, setLoadError] = useState(null);\n\n // Selected category state\n const [category, setCategory] = useState(null);\n const [isSurprise, setIsSurprise] = useState(false);\n\n // Game state\n const [gameQuestions, setGameQuestions] = useState([]);\n const [currentIndex, setCurrentIndex] = useState(0);\n const [selectedAnswer, setSelectedAnswer] = useState(null);\n const [correctCount, setCorrectCount] = useState(0);\n const [streak, setStreak] = useState(0);\n const [maxStreak, setMaxStreak] = useState(0);\n const [startTime, setStartTime] = useState(0);\n const [elapsedSeconds, setElapsedSeconds] = useState(0);\n\n useEffect(() => {\n fetch(\"/api/questions\")\n .then((r) => r.json())\n .then((data) => {\n setAllQuestions(data.questions);\n setPhase(\"category\");\n })\n .catch((e) => setLoadError(String(e)));\n }, []);\n\n const categories = useMemo(() => {\n const seen: string[] = [];\n for (const q of allQuestions) {\n if (!seen.includes(q.category)) seen.push(q.category);\n }\n return seen;\n }, [allQuestions]);\n\n const categoryCount = (cat: string) =>\n allQuestions.filter((q) => q.category === cat).length;\n\n function startGame(cat: string) {\n const pool = allQuestions.filter((q) => q.category === cat);\n setGameQuestions(sampleQuestions(pool, 10));\n setCurrentIndex(0);\n setSelectedAnswer(null);\n setCorrectCount(0);\n setStreak(0);\n setMaxStreak(0);\n setStartTime(Date.now());\n setPhase(\"quiz\");\n }\n\n function handleCategorySelect(cat: string, surprise: boolean) {\n setCategory(cat);\n setIsSurprise(surprise);\n if (categoryCount(cat) < 10) {\n setPhase(\"warning\");\n } else {\n startGame(cat);\n }\n }\n\n function handleSurpriseMe() {\n const cat = categories[Math.floor(Math.random() * categories.length)];\n handleCategorySelect(cat, true);\n }\n\n function handleAnswer(key: string) {\n if (selectedAnswer !== null) return;\n setSelectedAnswer(key);\n const q = gameQuestions[currentIndex];\n if (key === q.correct_option) {\n setCorrectCount((c) => c + 1);\n setStreak((s) => {\n const next = s + 1;\n setMaxStreak((m) => Math.max(m, next));\n return next;\n });\n } else {\n setStreak(0);\n }\n }\n\n function handleNext() {\n if (currentIndex + 1 >= gameQuestions.length) {\n setElapsedSeconds(Math.round((Date.now() - startTime) / 1000));\n setPhase(\"results\");\n } else {\n setCurrentIndex((i) => i + 1);\n setSelectedAnswer(null);\n }\n }\n\n function backToCategories() {\n setCategory(null);\n setIsSurprise(false);\n setPhase(\"category\");\n }\n\n if (loadError) {\n return (\n

\n Failed to load questions: {loadError}\n

\n );\n }\n\n if (phase === \"loading\") {\n return (\n

\n Loading questions…\n

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

🎯 Quiz Game

\n \n view source\n \n

\n\n {phase === \"category\" && (\n

Choose a Category

\n {categories.map((cat) => (\n handleCategorySelect(cat, false)}\n className=\"p-4 rounded-lg bg-white border border-gray-200 shadow hover:bg-indigo-50 hover:border-indigo-300 text-left\"\n >\n

{cat}

\n {categoryCount(cat)} question{categoryCount(cat) === 1 ? \"\" : \"s\"}\n

\n \n ))}\n \n 🎲 Surprise Me!\n \n

\n )}\n\n {phase === \"warning\" && category && (\n

\n {isSurprise && (\n

\n 🎲 Surprise! Your category is: {category}\n

\n )}\n

⚠️ Warning

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

\n \"{category}\" only has {categoryCount(category)} question\n {categoryCount(category) === 1 ? \"\" : \"s\"} (fewer than 10). Perfect\n Round won't be possible.\n

\n startGame(category)}\n className=\"px-4 py-2 rounded bg-indigo-600 text-white font-semibold hover:bg-indigo-700\"\n >\n Proceed Anyway\n \n \n Back to Categories\n \n

\n )}\n\n {phase === \"quiz\" && gameQuestions.length > 0 && (() => {\n const q = gameQuestions[currentIndex];\n const answered = selectedAnswer !== null;\n const isCorrect = answered && selectedAnswer === q.correct_option;\n const isLast = currentIndex + 1 >= gameQuestions.length;\n return (\n

\n \n Question {currentIndex + 1} of {gameQuestions.length}\n \n \n {isSurprise ? `🎲 Surprise category: ${category}` : category}\n \n

{q.question}

\n {OPTION_KEYS.map((key) => {\n let cls =\n \"w-full text-left p-3 rounded-lg border flex items-center gap-3 \";\n if (!answered) {\n cls += \"bg-white border-gray-300 hover:bg-indigo-50 hover:border-indigo-400 cursor-pointer\";\n } else if (key === q.correct_option) {\n cls += \"bg-green-100 border-green-500 text-green-900 font-semibold\";\n } else if (key === selectedAnswer) {\n cls += \"bg-red-100 border-red-500 text-red-900\";\n } else {\n cls += \"bg-gray-50 border-gray-200 text-gray-500\";\n }\n return (\n handleAnswer(key)}\n disabled={answered}\n className={cls}\n >\n {key}.\n {optionText(q, key)}\n \n );\n })}\n

\n {answered && (\n \n \n {isCorrect ? \"Correct!\" : \"Incorrect\"}\n

\n {!isCorrect && (\n

\n The correct answer was {q.correct_option}.{\" \"}\n {optionText(q, q.correct_option)}\n

\n )}\n

{q.explanation}

\n )}\n {answered && (\n \n {isLast ? \"See Results\" : \"Next Question\"}\n \n )}\n

\n Streak: {streak} · Best streak: {maxStreak}\n

\n \n );\n })()}\n\n {phase === \"results\" && (() => {\n const total = gameQuestions.length;\n const percent = total > 0 ? Math.round((correctCount / total) * 100) : 0;\n const achievements: { name: string; icon: string; desc: string }[] = [];\n if (total === 10 && correctCount === total) {\n achievements.push({\n name: \"Perfect Round\",\n icon: \"🏆\",\n desc: \"All questions answered correctly!\",\n });\n }\n if (maxStreak >= 5) {\n achievements.push({\n name: \"Hot Streak\",\n icon: \"🔥\",\n desc: \"5 or more consecutive correct answers!\",\n });\n }\n if (maxStreak >= 3) {\n achievements.push({\n name: \"Triple Win\",\n icon: \"⭐\",\n desc: \"3 or more consecutive correct answers!\",\n });\n }\n return (\n

Results

Category: {category}

\n {correctCount}/{total} Correct ({percent}%)\n

\n Time: {elapsedSeconds} seconds\n

Achievements

\n {achievements.length === 0 ? (\n

No achievements this round

\n ) : (\n

\n {a.icon}\n

{a.name}

{a.desc}

\n \n ))}\n

\n )}\n

\n category && startGame(category)}\n className=\"px-5 py-2 rounded bg-indigo-600 text-white font-semibold hover:bg-indigo-700\"\n >\n Play Again\n \n \n New Category\n \n

\n );\n })()}\n \n );\n}\n",[],[202,227,219],"components","e4aae168-d9e2-4740-ad92-48a5e83855bd",6,["D",1783453037832],[169],[202,227],"e630c7cf-5a07-4dc0-837b-f541dd39fdea",["D",1783453037073],[168,170,171,172],[202],["D",1783453114052],[],[18,64],["D",1783453114052],[166],[18],["D",1783453036640],{"_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":280,"_281":282,"_283":284,"_285":30,"_286":30,"_287":30,"_288":24,"_289":-5,"_290":-7,"_291":-7,"_292":26,"_293":30,"_294":30,"_295":-5,"_296":30,"_297":30,"_298":30,"_299":-5},"ENV",{"_251":252,"_253":254,"_255":16,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279},"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