function MainComponent() { const [questionIndex, setQuestionIndex] = React.useState(0); const [showAnswer, setShowAnswer] = React.useState(false); const [answeredCorrectly, setAnsweredCorrectly] = React.useState(false); const [hint, setHint] = React.useState(false); const [attempts, setAttempts] = React.useState(0); const imageOptions = [ "/images/blue-airplane.jpg", "/images/nature.jpg", "/images/forest.jpg", "/images/mountain.jpg" ]; const quiz = [ { question: "1/2 + 1/3", options: [ "2/5", "5/6", "1/6" ], answer: 1, hint: "Common denominators help!" }, { question: "1/4 + 1/4", options: [ "1/2", "1/4", "1/8" ], answer: 0, hint: "Adding the same fractions" }, { question: "1/3 + 1/6", options: [ "1/2", "1/9", "1/3" ], answer: 0, hint: "Find a common denominator" }, { question: "2/3 - 1/6", options: [ "1/6", "1/2", "2/6" ], answer: 1, hint: "Convert to common denominators" } ]; const handleAnswer = (index)=>{ if (index === quiz[questionIndex].answer) { setAnsweredCorrectly(true); setShowAnswer(false); setHint(false); setTimeout(()=>{ setQuestionIndex((prevIndex)=>(prevIndex + 1) % quiz.length); setAnsweredCorrectly(false); setAttempts(0); }, 1000); } else { setAnsweredCorrectly(false); setShowAnswer(true); setAttempts((prevAttempts)=>{ if (prevAttempts === 0) { setHint(true); } return prevAttempts + 1; }); } }; const randomImage = imageOptions[Math.floor(Math.random() * imageOptions.length)]; return /*#__PURE__*/ React.createElement("div", { className: "h-screen w-full flex flex-col items-center bg-[#f5f5f5] font-noto-sans", __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-blue-500 p-4 flex justify-between items-center shadow-md", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-white", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, "簡単な分数の計算アプリ")), /*#__PURE__*/ React.createElement("main", { className: "flex-grow flex flex-col items-center justify-center text-center px-4", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-semibold mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, "分数クイズ"), /*#__PURE__*/ React.createElement("p", { className: "text-lg mb-6", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, quiz[questionIndex].question), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, quiz[questionIndex].options.map((option, index)=>{ const optionName = `option-${index}`; return /*#__PURE__*/ React.createElement("button", { key: index, name: optionName, className: "px-4 py-2 bg-blue-500 text-white rounded shadow-md hover:bg-blue-700", onClick: ()=>handleAnswer(index), __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, option); })), showAnswer && !answeredCorrectly && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-red-500", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "正解: ", quiz[questionIndex].options[quiz[questionIndex].answer]), hint && !answeredCorrectly && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-blue-500", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, "ヒント: ", quiz[questionIndex].hint), showAnswer && !answeredCorrectly && /*#__PURE__*/ React.createElement("img", { src: randomImage, alt: "間違い", className: "w-[300px] h-[200px] mt-6", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("footer", { className: "w-full bg-[#333333] p-4 text-white text-center", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, "© 2023 簡単な分数の計算アプリ. All Rights Reserved."))); }