function MainComponent() { const [questions, setQuestions] = React.useState([ { question: "Question 1: Sample Question?", options: [ "Option 1", "Option 2", "Option 3", "Option 4" ], correct: 0 } ]); const [currentIndex, setCurrentIndex] = React.useState(0); const [score, setScore] = React.useState(0); const [selectedOption, setSelectedOption] = React.useState(null); const [isQuizCompleted, setIsQuizCompleted] = React.useState(false); function handleOptionClick(index) { setSelectedOption(index); } function handleSubmit() { if (selectedOption === questions[currentIndex].correct) { setScore(score + 10); } setSelectedOption(null); if (currentIndex + 1 < questions.length) { setCurrentIndex(currentIndex + 1); } else { setIsQuizCompleted(true); } } let quizContent; if (isQuizCompleted) { const resultMessage = score >= 80 ? "You passed!" : "You failed!"; quizContent = /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, resultMessage), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Your score: ", score)); } else { quizContent = /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 p-4 rounded-lg mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, questions[currentIndex].question)), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, questions[currentIndex].options.map((option, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: `w-full py-2 mb-2 px-4 rounded-lg ${selectedOption === index ? "bg-blue-700" : "bg-blue-500"} text-white`, onClick: ()=>handleOptionClick(index), __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, option)))); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl p-8 bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center mb-6", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "Quiz App"), quizContent, !isQuizCompleted && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-full py-3 px-4 bg-green-500 text-white rounded-lg mt-6", onClick: handleSubmit, __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "Submit")))); }