function MainComponent() { const [score, setScore] = React.useState(0); const [currentQuestion, setCurrentQuestion] = React.useState(0); const [gameState, setGameState] = React.useState('start'); const [showExplanation, setShowExplanation] = React.useState(false); const [answerCorrect, setAnswerCorrect] = React.useState(false); const [images, setImages] = React.useState({}); const questions = React.useMemo(()=>{ return [ { question: "What is the primary purpose of a savings account?", options: [ "To earn interest", "To pay bills", "To invest in stocks", "To get loans" ], correct: 0, explanation: "A savings account primarily helps you earn interest on your money." }, { question: "What does budgeting help you achieve?", options: [ "Spend more money", "Track and control expenses", "Increase debt", "Avoid financial planning" ], correct: 1, explanation: "Budgeting helps track and control expenses to avoid financial pitfalls." }, { question: "Which of these is a long-term financial goal?", options: [ "Buying lunch", "Paying rent", "Saving for retirement", "Getting a haircut" ], correct: 2, explanation: "Saving for retirement is a common long-term financial goal." }, { question: "What is a benefit of having an emergency fund?", options: [ "Spending more easily", "Reduced stress in emergencies", "Investing riskily", "Overdrawing accounts" ], correct: 1, explanation: "An emergency fund reduces stress during financial emergencies." }, { question: "What is compound interest?", options: [ "Interest on loans", "Interest on initial deposit only", "Earning interest on interest", "Fees on borrowing" ], correct: 2, explanation: "Compound interest means earning interest on both the initial principal and the accumulated interest." }, { question: "How can you improve your credit score?", options: [ "By maxing out credit cards", "By paying bills on time", "By ignoring debts", "By applying for many loans" ], correct: 1, explanation: "Paying bills on time is essential for improving your credit score." }, { question: "Why diversify investments?", options: [ "To increase risk", "To reduce risk", "To spend more", "To save less" ], correct: 1, explanation: "Diversifying investments helps reduce risk." }, { question: "What is a benefit of online banking?", options: [ "Increased transaction fees", "Easy account access", "Limited access", "Only open on weekdays" ], correct: 1, explanation: "Online banking allows easy access to your accounts anytime." } ].sort(()=>Math.random() - 0.5); }, []); React.useEffect(()=>{ const fetchImages = async ()=>{ const newImages = {}; for(let i = 0; i < questions.length; i++){ const response = await fetch(`/integrations/image-search/imagesearch?q=${encodeURIComponent(questions[i].question)}`); const data = await response.json(); if (data.items && data.items.length > 0) { newImages[i] = data.items[0].thumbnailImageUrl; } } setImages(newImages); }; fetchImages(); }, [ questions ]); const handleStart = ()=>{ setGameState('playing'); }; const handleAnswer = (selectedIndex)=>{ if (selectedIndex === questions[currentQuestion].correct) { setScore(score + 1); setAnswerCorrect(true); } else { setAnswerCorrect(false); } setShowExplanation(true); }; const handleNext = ()=>{ setShowExplanation(false); if (currentQuestion < questions.length - 1) { setCurrentQuestion(currentQuestion + 1); } else { setGameState('end'); } }; const handleRestart = ()=>{ setScore(0); setCurrentQuestion(0); setGameState('start'); setShowExplanation(false); setAnswerCorrect(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-blue-100 to-green-100 flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 106, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-bold text-blue-600 mb-8 font-roboto text-center", __source: { fileName: "", lineNumber: 107, columnNumber: 7 }, __self: this }, "Five Stars Financial Quiz"), gameState === 'start' && /*#__PURE__*/ React.createElement("div", { className: "text-center bg-white rounded-lg shadow-lg p-6 max-w-md", __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-4 text-xl font-roboto text-blue-800", __source: { fileName: "", lineNumber: 111, columnNumber: 3 }, __self: this }, "Learn about financial literacy and goals in a fun way!"), images[0] && /*#__PURE__*/ React.createElement("img", { src: images[0], alt: "Financial literacy concept", className: "w-full mb-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 113, columnNumber: 5 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleStart, className: "bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-full transition duration-300 font-roboto text-lg", __source: { fileName: "", lineNumber: 115, columnNumber: 3 }, __self: this }, "Start Quiz")), gameState === 'playing' && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4 font-roboto text-blue-800", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, questions[currentQuestion].question), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 127, columnNumber: 1 }, __self: this }, questions[currentQuestion].options.map((option, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>handleAnswer(index), disabled: showExplanation, className: `w-full py-3 px-4 border-2 border-blue-400 rounded-lg shadow transition duration-300 font-roboto text-lg ${showExplanation ? index === questions[currentQuestion].correct ? 'bg-green-300 text-blue-800 border-green-500' : 'bg-red-300 text-blue-800 border-red-500' : 'bg-white hover:bg-blue-100 text-blue-800 font-semibold'}`, __source: { fileName: "", lineNumber: 129, columnNumber: 5 }, __self: this }, option))), showExplanation && /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-lg font-roboto bg-gray-100 p-4 rounded-lg", __source: { fileName: "", lineNumber: 146, columnNumber: 13 }, __self: this }, answerCorrect ? /*#__PURE__*/ React.createElement("div", { className: "text-green-600 flex items-center", __source: { fileName: "", lineNumber: 148, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl mr-2", __source: { fileName: "", lineNumber: 149, columnNumber: 7 }, __self: this }, "🎉"), " Correct!") : /*#__PURE__*/ React.createElement("div", { className: "text-red-600", __source: { fileName: "", lineNumber: 152, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 153, columnNumber: 7 }, __self: this }, "Incorrect."), " ", questions[currentQuestion].explanation), /*#__PURE__*/ React.createElement("button", { onClick: handleNext, className: "mt-4 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-6 rounded-full transition duration-300 font-roboto", __source: { fileName: "", lineNumber: 156, columnNumber: 3 }, __self: this }, "Next Question")), images[currentQuestion] && /*#__PURE__*/ React.createElement("img", { src: images[currentQuestion], alt: `Illustration for: ${questions[currentQuestion].question}`, className: "w-full mt-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-lg font-roboto text-blue-600", __source: { fileName: "", lineNumber: 167, columnNumber: 11 }, __self: this }, "Score: ", score, "/", questions.length)), gameState === 'end' && /*#__PURE__*/ React.createElement("div", { className: "text-center bg-white rounded-lg shadow-lg p-6 max-w-md", __source: { fileName: "", lineNumber: 172, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-4 font-roboto text-blue-800", __source: { fileName: "", lineNumber: 173, columnNumber: 3 }, __self: this }, "Quiz Complete!"), /*#__PURE__*/ React.createElement("p", { className: "text-xl mb-4 font-roboto text-blue-600", __source: { fileName: "", lineNumber: 174, columnNumber: 3 }, __self: this }, "Your final score: ", score, "/", questions.length), images[questions.length - 1] && /*#__PURE__*/ React.createElement("img", { src: images[questions.length - 1], alt: "Financial success concept", className: "w-full mb-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 176, columnNumber: 5 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleRestart, className: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-full transition duration-300 font-roboto text-lg", __source: { fileName: "", lineNumber: 178, columnNumber: 3 }, __self: this }, "Play Again")), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-sm text-gray-600 font-roboto bg-white rounded-lg shadow-lg p-6 max-w-md", __source: { fileName: "", lineNumber: 187, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-blue-800 mb-2", __source: { fileName: "", lineNumber: 188, columnNumber: 3 }, __self: this }, "Learn more about financial literacy:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside space-y-1", __source: { fileName: "", lineNumber: 189, columnNumber: 3 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 190, columnNumber: 5 }, __self: this }, "Set clear financial goals"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 191, columnNumber: 5 }, __self: this }, "Create and stick to a budget"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 192, columnNumber: 5 }, __self: this }, "Start saving early for big expenses"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 193, columnNumber: 5 }, __self: this }, "Understand the importance of emergency funds"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 194, columnNumber: 5 }, __self: this }, "Diversify your investments"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 195, columnNumber: 5 }, __self: this }, "Improve your credit score"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 199, columnNumber: 7 }, __self: this }, ` @keyframes confetti { 0% { transform: translateY(-100vh) rotateZ(0deg); } 100% { transform: translateY(100vh) rotateZ(720deg); } } .confetti { position: fixed; width: 10px; height: 10px; background-color: #ffd700; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); animation: confetti 4s ease-out infinite; } .confetti:nth-child(2n) { background-color: #ff6b6b; } .confetti:nth-child(3n) { background-color: #4ecdc4; } .confetti:nth-child(4n) { background-color: #45b7d1; } `), /*#__PURE__*/ React.createElement("footer", { className: "mt-8 text-sm text-gray-600 font-roboto text-center", __source: { fileName: "", lineNumber: 226, columnNumber: 1 }, __self: this }, "Powered by Five Stars App Solutions")); }