function MainComponent() { const [questions, setQuestions] = React.useState([ { id: 1, text: "When was the first restaurant opened?", correctAnswer: "1765", options: [ "1650", "1765", "1823", "1905" ] }, { id: 2, text: "What is the world's oldest continuously operating restaurant?", correctAnswer: "Sobrino de Botin", options: [ "La Tour d'Argent", "Sobrino de Botin", "Zum Franziskaner", "St. Peter Stiftskulinarium" ] }, { id: 3, text: "Which city is known as the food capital of the world?", correctAnswer: "Tokyo", options: [ "Paris", "New York", "Tokyo", "Bangkok" ] } ]); const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0); const [userAnswer, setUserAnswer] = React.useState(''); const [result, setResult] = React.useState(''); const [score, setScore] = React.useState(0); const handleChange = (event)=>{ setUserAnswer(event.target.value); }; const handleSubmit = (event)=>{ event.preventDefault(); if (userAnswer === questions[currentQuestionIndex].correctAnswer) { setResult('Correct! 🎉'); setScore(score + 1); } else { setResult('Wrong answer. Try again! 💭'); } setUserAnswer(''); setCurrentQuestionIndex(currentQuestionIndex + 1 < questions.length ? currentQuestionIndex + 1 : 0); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#f8f1f1]", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-4xl text-[#d62828] mb-8", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "Restaurant Trivia Game"), currentQuestionIndex < questions.length ? /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg overflow-hidden w-[90%] md:w-[50%] lg:w-[30%]", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#003049] p-4", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl text-white", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "Question ", currentQuestionIndex + 1)), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-xl mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, questions[currentQuestionIndex].text), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, questions[currentQuestionIndex].options.map((option)=>/*#__PURE__*/ React.createElement("label", { key: option, className: "block mb-2", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "answer", value: option, onChange: handleChange, className: "mr-2", checked: userAnswer === option, __source: { fileName: "", lineNumber: 41, columnNumber: 19 }, __self: this }), option)), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#d62828] text-white font-roboto py-2 rounded mt-4", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, "Submit")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, result)))) : /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg overflow-hidden w-[90%] md:w-[50%] lg:w-[30%] p-6", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-3xl text-[#003049] mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Game Over"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Your score: ", score, " out of ", questions.length), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setScore(0); setCurrentQuestionIndex(0); setResult(''); }, className: "bg-[#d62828] text-white font-roboto py-2 rounded mt-4", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "Restart Game"))); }

Restaurant Trivia Game

Question 1