\n \n

\n \n );\n}\n\nfunction Home() {\n const [gameState, setGameState] = React.useState<\"quiz\" | \"results\">(\"quiz\");\n const [questions, setQuestions] = React.useState(() => generateQuestions());\n const [currentQuestion, setCurrentQuestion] = React.useState(0);\n const [answers, setAnswers] = React.useState([]);\n\n const handleAnswer = (answer: string) => {\n const newAnswers = [...answers, answer];\n setAnswers(newAnswers);\n\n if (currentQuestion < questions.length - 1) {\n setCurrentQuestion(currentQuestion + 1);\n } else {\n setGameState(\"results\");\n }\n };\n\n const resetQuiz = () => {\n setQuestions(generateQuestions());\n setCurrentQuestion(0);\n setAnswers([]);\n setGameState(\"quiz\");\n };\n\n if (gameState === \"results\") {\n const score = answers.filter(\n (answer, idx) => answer === questions[idx].correctAnswer\n ).length;\n\n return (\n

\n Quiz Complete! 🎉\n

\n {score}/10\n

\n {score === 10 ? \"Perfect score!\" : score >= 7 ? \"Great job!\" : score >= 5 ? \"Good effort!\" : \"Keep practicing!\"}\n

\n\n

\n {questions.map((q, idx) => {\n const isCorrect = answers[idx] === q.correctAnswer;\n return (\n \n

\n {q.flag}\n

\n \n {isCorrect ? \"✓\" : \"✗\"}\n \n \n {isCorrect ? (\n {q.correctAnswer}\n ) : (\n <>\n Your answer: {answers[idx]}\n
\n Correct: {q.correctAnswer}\n \n )}\n \n

\n );\n })}\n

\n\n \n Play Again\n \n \n );\n }\n\n const question = questions[currentQuestion];\n\n return (\n

\n Question {currentQuestion + 1} of {questions.length}\n

\n \n

\n\n

\n Which country's flag is this?\n

\n\n

{question.flag}

\n\n

\n {question.options.map((option) => (\n handleAnswer(option)}\n className=\"w-full bg-indigo-50 hover:bg-indigo-100 border-2 border-indigo-200 hover:border-indigo-400 text-gray-800 py-4 px-6 rounded-lg font-semibold text-lg transition-colors\"\n >\n {option}\n \n ))}\n

\n );\n}\n\nexport const routes = [\n {\n Component: Layout,\n children: [\n {\n Component: Home,\n index: true,\n },\n ],\n },\n];\n\nexport default routes;\n","deleted","label",[98],"permalink","https://www.val.town/x/willemhelmet/flag-quiz/code/routes.tsx","extension","actionData","errors"]