\n {!isQuizStarted ? (\n

Quiz Settings

\n \n

\n \n Category\n \n setSelectedCategoryId(e.target.value ? parseInt(e.target.value) : null)}\n className=\"w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500\"\n >\n \n {categories.map(category => (\n \n ))}\n \n

\n \n

\n \n Quiz Mode\n \n

\n \n setQuizMode(\"french-to-english\")}\n />\n French to English\n \n \n setQuizMode(\"english-to-french\")}\n />\n English to French\n \n

\n \n

\n \n Number of Questions\n \n setQuestionCount(parseInt(e.target.value))}\n className=\"w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500\"\n >\n \n \n \n \n \n

\n \n \n Start Quiz\n \n

\n ) : quizResults ? (\n

Quiz Results

\n \n

\n {quizResults.score}%\n

\n \n

Correct Answers

{quizResults.correctAnswers}

Incorrect Answers

{quizResults.incorrectAnswers}

\n \n

Question Review

\n \n

\n {quizResults.questions.map((result, index) => (\n

\n {index + 1}. {quizMode === \"french-to-english\" ? result.question.french : result.question.english}\n

\n Your answer: {result.userAnswer}\n

\n {!result.isCorrect && (\n

\n Correct answer: {result.correctAnswer}\n

\n )}\n

\n ))}\n

\n \n

\n \n New Quiz\n \n

\n ) : (\n

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

\n \n {selectedCategoryId ? \n categories.find(c => c.id === selectedCategoryId)?.name : \n 'All Categories'}\n \n

\n \n

\n {quizMode === \"french-to-english\" ? \"Translate to English:\" : \"Translate to French:\"}\n

\n {quizMode === \"french-to-english\" ? \n currentQuestion.item.french : \n currentQuestion.item.english}\n

\n \n

\n {currentQuestion.options.map((option, index) => (\n handleOptionSelect(index)}\n disabled={isAnswerSubmitted}\n className={`quiz-option w-full p-3 text-left rounded-md border transition-all ${\n selectedOptionIndex === index \n ? 'border-blue-500 bg-blue-50' \n : 'border-gray-300 hover:border-blue-300'\n } ${\n isAnswerSubmitted && index === currentQuestion.correctIndex\n ? 'correct'\n : isAnswerSubmitted && index === selectedOptionIndex && index !== currentQuestion.correctIndex\n ? 'incorrect'\n : ''\n }`}\n >\n {option}\n \n ))}\n

\n \n

\n {!isAnswerSubmitted ? (\n \n Submit Answer\n \n ) : (\n \n {currentQuestionIndex < questions.length - 1 ? 'Next Question' : 'See Results'}\n \n )}\n

\n )}\n

\n );\n};\n\nexport default QuizPage;","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/td1/Crossword/code/frontend/components/QuizPage.tsx","extension","actionData","errors"]