\n \n \n \n",[],[203,205],"856982b2-e315-4a57-9196-58c1db48c3a8","favicon.svg","ee27e064-7a3c-11f1-b235-1607ee4eb77e",5,["D",1783453753733],"\n",[],[203,213],"2d52c277-1c2c-4f7b-93bd-0201c8c920f2","Counter.tsx","ee49bbc6-7a3c-11f1-a119-1607ee4eb77e","60e0fbb8-8b39-42ee-8421-6decb97797e8",6,["D",1783453753952],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n",[],[203,229,221],"components","7fc09bbc-8901-41cf-9782-591eda63edce","App.tsx","ee66ef02-7a3c-11f1-9f00-1607ee4eb77e",["D",1783453853611],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\n\ntype OptionLetter = \"A\" | \"B\" | \"C\" | \"D\";\n\ntype 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: OptionLetter;\n explanation: string;\n category: string;\n};\n\ntype Screen = \"categories\" | \"warning\" | \"playing\" | \"results\";\n\ntype AnswerRecord = {\n questionId: string;\n selected: OptionLetter;\n correct: boolean;\n};\n\nconst OPTION_LETTERS: OptionLetter[] = [\"A\", \"B\", \"C\", \"D\"];\n\nfunction parseCsv(csvText: string): Question[] {\n const rows = csvText.trim().split(/\\r?\\n/).filter(Boolean);\n const headers = rows[0].split(\",\").map((header) => header.trim());\n\n return rows.slice(1).map((row) => {\n const values = row.split(\",\");\n const record: Record = {};\n headers.forEach((header, index) => {\n record[header] = values[index] ?? \"\";\n });\n return record as Question;\n });\n}\n\nfunction shuffle(items: T[]): T[] {\n const copy = [...items];\n for (let index = copy.length - 1; index > 0; index--) {\n const swapIndex = Math.floor(Math.random() * (index + 1));\n [copy[index], copy[swapIndex]] = [copy[swapIndex], copy[index]];\n }\n return copy;\n}\n\nfunction optionText(question: Question, option: OptionLetter) {\n return question[`option_${option.toLowerCase()}` as keyof Question];\n}\n\nfunction pct(score: number, total: number) {\n return total === 0 ? 0 : Math.round((score / total) * 100);\n}\n\nexport function App() {\n const [questions, setQuestions] = useState([]);\n const [loadError, setLoadError] = useState(\"\");\n const [screen, setScreen] = useState(\"categories\");\n const [selectedCategory, setSelectedCategory] = useState(\"\");\n const [surprisePicked, setSurprisePicked] = useState(false);\n const [roundQuestions, setRoundQuestions] = useState([]);\n const [currentIndex, setCurrentIndex] = useState(0);\n const [selectedOption, setSelectedOption] = useState(null);\n const [submitted, setSubmitted] = useState(false);\n const [answers, setAnswers] = useState([]);\n const [currentStreak, setCurrentStreak] = useState(0);\n const [maxStreak, setMaxStreak] = useState(0);\n const [startedAt, setStartedAt] = useState(0);\n const [finishedAt, setFinishedAt] = useState(0);\n\n useEffect(() => {\n fetch(\"/assets/questions.csv\")\n .then((response) => {\n if (!response.ok) throw new Error(`Could not load questions.csv (${response.status})`);\n return response.text();\n })\n .then((csvText) => setQuestions(parseCsv(csvText)))\n .catch((error) => setLoadError(error instanceof Error ? error.message : String(error)));\n }, []);\n\n const categories = useMemo(\n () => Array.from(new Set(questions.map((question) => question.category))).sort(),\n [questions],\n );\n\n const questionsForSelectedCategory = useMemo(\n () => questions.filter((question) => question.category === selectedCategory),\n [questions, selectedCategory],\n );\n\n const startRound = (category: string, isSurprise = false, forceProceed = false) => {\n const categoryQuestions = questions.filter((question) => question.category === category);\n setSelectedCategory(category);\n setSurprisePicked(isSurprise);\n\n if (categoryQuestions.length < 10 && !forceProceed) {\n setScreen(\"warning\");\n return;\n }\n\n const sample = shuffle(categoryQuestions).slice(0, 10);\n setRoundQuestions(sample);\n setCurrentIndex(0);\n setSelectedOption(null);\n setSubmitted(false);\n setAnswers([]);\n setCurrentStreak(0);\n setMaxStreak(0);\n const now = Date.now();\n setStartedAt(now);\n setFinishedAt(0);\n setScreen(\"playing\");\n };\n\n const startSurprise = () => {\n if (categories.length === 0) return;\n const category = categories[Math.floor(Math.random() * categories.length)];\n startRound(category, true);\n };\n\n const submitAnswer = () => {\n if (!selectedOption || submitted) return;\n const question = roundQuestions[currentIndex];\n const correct = selectedOption === question.correct_option;\n const nextStreak = correct ? currentStreak + 1 : 0;\n setAnswers((previous) => [...previous, { questionId: question.id, selected: selectedOption, correct }]);\n setCurrentStreak(nextStreak);\n setMaxStreak((previous) => Math.max(previous, nextStreak));\n setSubmitted(true);\n };\n\n const goNext = () => {\n if (currentIndex === roundQuestions.length - 1) {\n setFinishedAt(Date.now());\n setScreen(\"results\");\n return;\n }\n setCurrentIndex((index) => index + 1);\n setSelectedOption(null);\n setSubmitted(false);\n };\n\n const playAgain = () => startRound(selectedCategory, false, true);\n\n const newCategory = () => {\n setScreen(\"categories\");\n setSelectedCategory(\"\");\n setSurprisePicked(false);\n setRoundQuestions([]);\n };\n\n const currentQuestion = roundQuestions[currentIndex];\n const score = answers.filter((answer) => answer.correct).length;\n const elapsedSeconds = finishedAt && startedAt ? Math.max(0, Math.round((finishedAt - startedAt) / 1000)) : 0;\n const achievements = [\n ...(roundQuestions.length === 10 && score === roundQuestions.length ? [\"Perfect Round\"] : []),\n ...(maxStreak >= 5 ? [\"Hot Streak\"] : []),\n ...(maxStreak >= 3 ? [\"Triple Win\"] : []),\n ];\n\n return (\n

Session Quiz MVP

Quiz Application

Pick a category, answer up to 10 random questions, and try to earn overlapping achievements.

\n\n {loadError && (\n

Could not load questions

{loadError}

\n )}\n\n {!loadError && questions.length === 0 && (\n

Loading questions...

\n )}\n\n {screen === \"categories\" && questions.length > 0 && (\n

Choose a category

All categories from assets/questions.csv are available. Geography and Science can support a full 10-question round.

\n \n 🎲 Surprise Me!\n Randomly pick a category for me\n \n {categories.map((category) => {\n const count = questions.filter((question) => question.category === category).length;\n return (\n startRound(category)}\n className=\"rounded-xl border border-slate-200 bg-slate-50 px-4 py-4 text-left font-semibold transition hover:border-indigo-300 hover:bg-indigo-50\"\n >\n {category}\n {count} question{count === 1 ? \"\" : \"s\"}\n \n );\n })}\n

View source

\n )}\n\n {screen === \"warning\" && (\n

\n {surprisePicked &&

Surprise Me! selected: {selectedCategory}

}\n

Short category warning

Not enough questions in this category for all accomplishments

{selectedCategory} has {questionsForSelectedCategory.length} question{questionsForSelectedCategory.length === 1 ? \"\" : \"s\"}. You can still proceed with a shorter quiz, but Perfect Round requires 10 questions.

\n startRound(selectedCategory, surprisePicked, true)}\n className=\"rounded-lg bg-amber-600 px-5 py-3 font-bold text-white hover:bg-amber-700\"\n >\n Proceed Anyway\n \n \n New Category\n \n

\n )}\n\n {screen === \"playing\" && currentQuestion && (\n

\n {surprisePicked &&

Surprise Me! selected: {selectedCategory}

}\n

\n Question {currentIndex + 1} of {roundQuestions.length}\n Category: {selectedCategory} · Current streak: {currentStreak} · Best streak: {maxStreak}\n

{currentQuestion.question}

\n {OPTION_LETTERS.map((letter) => {\n const isCorrect = letter === currentQuestion.correct_option;\n const isSelected = letter === selectedOption;\n const stateClass = submitted && isCorrect\n ? \"border-green-500 bg-green-100 text-green-900\"\n : submitted && isSelected && !isCorrect\n ? \"border-red-500 bg-red-100 text-red-900\"\n : isSelected\n ? \"border-indigo-500 bg-indigo-50\"\n : \"border-slate-200 bg-white hover:bg-slate-50\";\n return (\n setSelectedOption(letter)}\n className={`rounded-xl border-2 px-4 py-4 text-left transition ${stateClass}`}\n aria-pressed={isSelected}\n >\n {letter}\n {optionText(currentQuestion, letter)}\n \n );\n })}\n

\n\n {!submitted && (\n \n Submit Answer\n \n )}\n\n {submitted && (\n

\n {answers[answers.length - 1]?.correct ? \"Correct!\" : \"Incorrect\"}\n

Explanation: {currentQuestion.explanation}

\n \n {currentIndex === roundQuestions.length - 1 ? \"See Results\" : \"Next Question\"}\n \n

\n )}\n

\n )}\n\n {screen === \"results\" && (\n

Results

{score}/{roundQuestions.length} Correct ({pct(score, roundQuestions.length)}%)

Elapsed time: {elapsedSeconds} seconds

Maximum consecutive correct: {maxStreak}

\n\n

Achievements

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

🏆 {achievement}

\n ) : (\n

No achievements this round

\n )}\n

\n\n

\n \n Play Again\n \n \n New Category\n \n

\n )}\n

\n );\n}\n",[],[203,229,231],"81891698-5aeb-49d3-a389-8e2229228102",["D",1783453753952],[169,170],[203,229],"eea49ebd-a502-4ca8-b1a2-11c5bb13a8e0",["D",1783453753046],[168,171,172,173],[203],["D",1783453813551],[],[18,64],["D",1783453813551],[166],[18],["D",1783453751903],{"_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":288,"_289":290,"_291":292,"_293":30,"_294":30,"_295":30,"_296":24,"_297":-5,"_298":-7,"_299":-7,"_300":26,"_301":30,"_302":30,"_303":-5,"_304":30,"_305":30,"_306":30,"_307":-5},"ENV",{"_259":260,"_261":262,"_263":16,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287},"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