function MainComponent() { const [questionNumber, setQuestionNumber] = React.useState(1); const [selectedAnswer, setSelectedAnswer] = React.useState(''); const [showResult, setShowResult] = React.useState(false); const [correctAnswers, setCorrectAnswers] = React.useState(0); const questions = [ { question: "What is Sake made from?", options: [ "Rice", "Wheat", "Barley", "Grapes" ], correct: "Rice" }, { question: "Where does Sake originate?", options: [ "China", "Japan", "Korea", "Thailand" ], correct: "Japan" }, { question: "What does the term 'Junmai' mean?", options: [ "No added alcohol", "Aged Sake", "Premium grade", "Infused with fruits" ], correct: "No added alcohol" }, { question: "How is Sake traditionally served?", options: [ "Cold", "Hot", "Room temperature", "Varies" ], correct: "Varies" }, { question: "What percentage of rice-polishing does Daiginjo Sake require?", options: [ "At least 50%", "At least 60%", "At least 70%", "At least 40%" ], correct: "At least 50%" }, { question: "What is the main ingredient in Sake production besides rice?", options: [ "Yeast", "Sugar", "Fruits", "Water" ], correct: "Water" }, { question: "What is the traditional Sake brewing season?", options: [ "Spring", "Summer", "Autumn", "Winter" ], correct: "Winter" }, { question: "Which of these is a popular Sake cocktail?", options: [ "Sake Bomb", "Sake Mojito", "Sake Martini", "Sake Sunrise" ], correct: "Sake Bomb" }, { question: "Which region in Japan is famous for its Sake production?", options: [ "Kyoto", "Tokyo", "Osaka", "Nara" ], correct: "Kyoto" }, { question: "What does 'Nama' indicate in a Sake's name?", options: [ "Aged", "Unpasteurized", "Fruit-infused", "Carbonated" ], correct: "Unpasteurized" } ]; const handleAnswerChange = (e)=>{ setSelectedAnswer(e.target.value); }; const handleSubmit = (e)=>{ e.preventDefault(); let isCorrect = questions[questionNumber - 1].correct === selectedAnswer; if (isCorrect) { setCorrectAnswers(correctAnswers + 1); } if (questionNumber < questions.length) { setQuestionNumber(questionNumber + 1); setSelectedAnswer(''); } else { setShowResult(true); } }; const handleRestart = ()=>{ setQuestionNumber(1); setSelectedAnswer(''); setShowResult(false); setCorrectAnswers(0); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F2EDEB] p-4", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-[#6D6875] mb-8", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, "Sake Quiz"), !showResult ? /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-8 mb-6 w-full max-w-lg", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-[#6D6875] mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Question ", questionNumber, " of ", questions.length), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#6D6875] mb-6", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, questions[questionNumber - 1].question), questions[questionNumber - 1].options.map((option, index)=>/*#__PURE__*/ React.createElement("label", { key: index, className: "block mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: `question${questionNumber}`, value: option, checked: selectedAnswer === option, onChange: handleAnswerChange, className: "mr-2", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }), option)), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-6 py-2 px-4 bg-[#E5989B] text-white font-semibold rounded-lg shadow-md hover:bg-[#B5838D]", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Next"))) : /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-8 mb-6 w-full max-w-lg text-center", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-[#6D6875] mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "Quiz Complete!"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#6D6875] mb-6", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "You got ", correctAnswers, " out of ", questions.length, " questions correct."), /*#__PURE__*/ React.createElement("button", { onClick: handleRestart, className: "py-2 px-4 bg-[#E5989B] text-white font-semibold rounded-lg shadow-md hover:bg-[#B5838D]", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Restart Quiz")), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#6D6875]", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, "Sake Quiz 2023")); }

Sake Quiz

Question 1 of 10