function MainComponent() { const [question, setQuestion] = React.useState(''); const [answer, setAnswer] = React.useState(''); const [result, setResult] = React.useState(''); const handleQuestion = ()=>{ setQuestion('Swiftを学習するための最適なプラットフォームはどれですか？'); }; const handleHint1 = ()=>{ window.open('https://link_to_hint1_video.com', '_blank'); }; const handleHint2 = ()=>{ window.open('https://link_to_hint2_video.com', '_blank'); }; const handleChange = (event)=>{ setAnswer(event.target.value); }; const handleSubmit = ()=>{ if (answer.trim().toLowerCase() === 'apple') { setResult('正解です！'); } else { setResult('不正解です。もう一度試してみてください。'); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F0F0F0] flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto mb-8", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, "謎解きゲーム: Swift Puzzle Challenge"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleQuestion, className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "問題を表示"), question && /*#__PURE__*/ React.createElement("p", { className: "mt-4", __source: { fileName: "", lineNumber: 38, columnNumber: 22 }, __self: this }, question)), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "hint1", onClick: handleHint1, className: "mr-2 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "ヒント１"), /*#__PURE__*/ React.createElement("button", { name: "hint2", onClick: handleHint2, className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "ヒント２")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "answer", value: answer, onChange: handleChange, className: "shadow appearance-none border rounded py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline", placeholder: "回答を入力", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, className: "bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "回答を送信"), result && /*#__PURE__*/ React.createElement("p", { className: "mt-4", __source: { fileName: "", lineNumber: 55, columnNumber: 20 }, __self: this }, result))); }