function MainComponent() { const [currentSubject, setCurrentSubject] = React.useState('geography'); const [questionNumber, setQuestionNumber] = React.useState(1); const [difficulty, setDifficulty] = React.useState('medium'); const [score, setScore] = React.useState(0); const [questions, setQuestions] = React.useState([]); const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0); const subjects = [ { name: 'Geography', value: 'geography' }, { name: 'Health', value: 'health' }, { name: 'Science', value: 'science' }, { name: 'Animals', value: 'animals' }, { name: 'Interesting Facts', value: 'facts' }, { name: 'Biology', value: 'biology' } ]; React.useEffect(()=>{ // Fetch or generate trivia questions here, pseudocode example below // fetchTriviaQuestions(currentSubject, difficulty).then(setQuestions); }, [ currentSubject, difficulty ]); const handleSubjectChange = (e)=>{ setCurrentSubject(e.target.value); setCurrentQuestionIndex(0); setQuestionNumber(1); }; const handleDifficultyChange = (e)=>{ setDifficulty(e.target.value); }; const handleAnswer = (isCorrect)=>{ const nextIndex = currentQuestionIndex + 1; if (isCorrect) { setScore(score + 1); if (score >= 3 && difficulty === 'medium') { setDifficulty('expert'); } } if (nextIndex < questions.length) { setCurrentQuestionIndex(nextIndex); setQuestionNumber(questionNumber + 1); } else { // End game scenario setCurrentQuestionIndex(0); setQuestionNumber(1); } }; const currentQuestion = questions[currentQuestionIndex]; const subjectBackgrounds = { geography: 'bg-[url(./images/geography.jpg)]', health: 'bg-[url(./images/health.jpg)]', science: 'bg-[url(./images/science.jpg)]', animals: 'bg-[url(./images/animals.jpg)]', facts: 'bg-[url(./images/facts.jpg)]', biology: 'bg-[url(./images/biology.jpg)]' }; const backgroundClass = subjectBackgrounds[currentSubject] || 'bg-[url(./images/default-background.jpg)]'; return /*#__PURE__*/ React.createElement("div", { className: `min-h-screen flex flex-col items-center justify-center p-4 bg-cover bg-center ${backgroundClass}`, __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#ffffff] mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, "Trivia Challenge"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px] bg-white bg-opacity-90 rounded-lg shadow-lg overflow-hidden", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, currentQuestion ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { className: `text-2xl font-semibold mb-4`, __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, "Question ", questionNumber, " of ", questions.length, " - ", difficulty.charAt(0).toUpperCase() + difficulty.slice(1)), /*#__PURE__*/ React.createElement("p", { className: "text-lg mb-6", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, currentQuestion.question), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, currentQuestion.answers.map((answer, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>handleAnswer(answer.isCorrect), className: "p-4 text-lg font-medium bg-[#E2E8F0] hover:bg-[#CBD5E0] rounded transition duration-300 ease-in-out", __source: { fileName: "", lineNumber: 77, columnNumber: 19 }, __self: this }, answer.text)))) : /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, "Loading questions..."), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mt-8", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, "Score: ", score), questionNumber === questions.length && /*#__PURE__*/ React.createElement("button", { className: "flex items-center px-6 py-2 bg-[#FFD700] text-white rounded shadow transition duration-300 ease-in-out", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-trophy mr-2", __source: { fileName: "", lineNumber: 90, columnNumber: 17 }, __self: this }), "Finish Game")))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 flex flex-col items-center sm:flex-row", __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4 sm:mb-0", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "difficulty", className: "text-white font-medium mr-4", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, "Difficulty:"), /*#__PURE__*/ React.createElement("select", { id: "difficulty", name: "difficulty", value: difficulty, onChange: handleDifficultyChange, className: "px-3 py-2 rounded bg-[#E2E8F0] focus:outline-none", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "medium", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, "Medium"), /*#__PURE__*/ React.createElement("option", { value: "expert", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, "Expert"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "subject", className: "text-white font-medium mr-4", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, "Subject:"), /*#__PURE__*/ React.createElement("select", { id: "subject", name: "subject", value: currentSubject, onChange: handleSubjectChange, className: "px-3 py-2 rounded bg-[#E2E8F0] focus:outline-none", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, subjects.map((subject)=>/*#__PURE__*/ React.createElement("option", { key: subject.value, value: subject.value, __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, subject.name))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 114, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .bg-cover { animation: fadeIn 1s ease-in-out; } `)); }