function EnglishCheeseburger({ title }) { return /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-[#4B0082] mb-2", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, title); } function EnglishCheeseburgerStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(EnglishCheeseburger, { title: "ダブルチーズバーガーは英語で？", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(EnglishCheeseburger, { title: "単語学習", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this })); } function MainComponent() { const [lessonProgress, setLessonProgress] = React.useState(0); const [correctAnswers, setCorrectAnswers] = React.useState(0); const [totalQuestions, setTotalQuestions] = React.useState(0); const [selectedAnswers, setSelectedAnswers] = React.useState({}); const [lessonCompleted, setLessonCompleted] = React.useState(false); const [difficulty, setDifficulty] = React.useState('初級'); const [lessonHistory, setLessonHistory] = React.useState([]); const [currentStage, setCurrentStage] = React.useState('vocabulary'); const [selectedBurger, setSelectedBurger] = React.useState(null); const burgers = [ { name: 'チーズバーガー', english: 'Cheeseburger', image: '/cheeseburger.png' }, { name: 'ダブルバーガー', english: 'Double burger', image: '/doubleburger.png' }, { name: 'ベーコンバーガー', english: 'Bacon burger', image: '/baconburger.png' } ]; const questions = { vocabulary: [ { question: 'ハンバーガーの英語は?', options: [ 'burger', 'sandwich', 'pizza' ], correct: 'burger' }, { question: 'フライドポテトの英語は?', options: [ 'french fries', 'chips', 'wedges' ], correct: 'french fries' } ], phrase: [ { question: '「ハンバーガーをください」の英語は?', options: [ 'Can I have a burger, please?', 'I want burger now.', 'Give me burger.' ], correct: 'Can I have a burger, please?' }, { question: '「ドリンクは何にしますか？」の英語は?', options: [ 'What would you like to drink?', 'Do you want a drink?', 'Which drink do you prefer?' ], correct: 'What would you like to drink?' } ] }; const handleAnswerSelect = (questionIndex, answer)=>{ setSelectedAnswers((prev)=>({ ...prev, [questionIndex]: answer })); setTotalQuestions((prev)=>prev + 1); if (answer === questions[currentStage][questionIndex].correct) { setCorrectAnswers((prev)=>prev + 1); } setLessonProgress((prev)=>prev + 100 / (questions.vocabulary.length + questions.phrase.length)); if (questionIndex === questions[currentStage].length - 1) { if (currentStage === 'vocabulary') { setCurrentStage('phrase'); } else if (currentStage === 'phrase') { setCurrentStage('pronunciation'); } else if (currentStage === 'pronunciation') { setCurrentStage('ordering'); } else { setLessonCompleted(true); const date = new Date().toLocaleDateString(); const accuracy = Math.round(correctAnswers / totalQuestions * 100); setLessonHistory((prev)=>[ ...prev, { date, accuracy } ]); } } }; const handleDifficultyChange = (newDifficulty)=>{ setDifficulty(newDifficulty); setLessonProgress(0); setCorrectAnswers(0); setTotalQuestions(0); setSelectedAnswers({}); setLessonCompleted(false); setCurrentStage('vocabulary'); }; const handleBurgerSelect = (burger)=>{ setSelectedBurger(burger); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FFF5EE] font-roboto", __source: { fileName: "", lineNumber: 91, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#FFB6C1] p-4 text-center", __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#4B0082]", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, "英会話学習アプリ")), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-[#4B0082] mb-4", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, "難易度設定"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, [ '初級', '中級', '上級' ].map((level)=>/*#__PURE__*/ React.createElement("button", { key: level, className: `px-4 py-2 rounded-md ${difficulty === level ? 'bg-[#FFB6C1]' : 'bg-[#E6E6FA]'} hover:bg-[#FFA07A]`, onClick: ()=>handleDifficultyChange(level), __source: { fileName: "", lineNumber: 102, columnNumber: 17 }, __self: this }, level, " (", level === '初級' ? '英検5級' : level === '中級' ? '英検3級' : 'TOEIC 430点', ")"))))), /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-[#4B0082] mb-4", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, "レッスン: ハンバーガーショップでの注文"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, currentStage === 'vocabulary' && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-[#4B0082] mb-2", __source: { fileName: "", lineNumber: 121, columnNumber: 17 }, __self: this }, "単語学習"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4 mb-4", __source: { fileName: "", lineNumber: 122, columnNumber: 17 }, __self: this }, burgers.map((burger, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-center", __source: { fileName: "", lineNumber: 124, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: burger.image, alt: burger.name, className: "w-32 h-32 mx-auto mb-2", __source: { fileName: "", lineNumber: 125, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 126, columnNumber: 23 }, __self: this }, burger.name), /*#__PURE__*/ React.createElement("button", { className: "mt-2 px-4 py-2 bg-[#E6E6FA] rounded-md hover:bg-[#D8BFD8]", onClick: ()=>handleBurgerSelect(burger), __source: { fileName: "", lineNumber: 127, columnNumber: 23 }, __self: this }, "選択")))), selectedBurger && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 137, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 138, columnNumber: 21 }, __self: this }, `${selectedBurger.name}は英語にすると？`), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 139, columnNumber: 21 }, __self: this }, questions.vocabulary[0].options.map((option, optionIndex)=>/*#__PURE__*/ React.createElement("button", { key: optionIndex, className: `px-4 py-2 rounded-md ${selectedAnswers[0] === option ? option === selectedBurger.english ? 'bg-green-500' : 'bg-red-500' : 'bg-[#E6E6FA] hover:bg-[#D8BFD8]'}`, onClick: ()=>handleAnswerSelect(0, option), disabled: selectedAnswers[0], __source: { fileName: "", lineNumber: 141, columnNumber: 25 }, __self: this }, option))))), currentStage === 'phrase' && questions.phrase.map((q, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 163, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-[#4B0082] mb-2", __source: { fileName: "", lineNumber: 164, columnNumber: 17 }, __self: this }, "例文学習"), /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 165, columnNumber: 17 }, __self: this }, q.question), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 166, columnNumber: 17 }, __self: this }, q.options.map((option, optionIndex)=>/*#__PURE__*/ React.createElement("button", { key: optionIndex, className: `px-4 py-2 rounded-md ${selectedAnswers[index] === option ? option === q.correct ? 'bg-green-500' : 'bg-red-500' : 'bg-[#E6E6FA] hover:bg-[#D8BFD8]'}`, onClick: ()=>handleAnswerSelect(index, option), disabled: selectedAnswers[index], __source: { fileName: "", lineNumber: 168, columnNumber: 21 }, __self: this }, option))))), currentStage === 'pronunciation' && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 188, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-[#4B0082] mb-2", __source: { fileName: "", lineNumber: 189, columnNumber: 17 }, __self: this }, "発音練習"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#FFB6C1] rounded-md hover:bg-[#FFA07A]", onClick: ()=>setCurrentStage('ordering'), __source: { fileName: "", lineNumber: 190, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-microphone mr-2", __source: { fileName: "", lineNumber: 191, columnNumber: 19 }, __self: this }), "録音開始")), currentStage === 'ordering' && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 198, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-[#4B0082] mb-2", __source: { fileName: "", lineNumber: 199, columnNumber: 17 }, __self: this }, "注文練習"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#E6E6FA] p-4 rounded-md", __source: { fileName: "", lineNumber: 200, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 201, columnNumber: 19 }, __self: this }, "質問: What would you like to order?"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "order", placeholder: "ここに注文を入力してください", className: "w-full px-3 py-2 border rounded-md", __source: { fileName: "", lineNumber: 202, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-2 px-4 py-2 bg-[#FFB6C1] rounded-md hover:bg-[#FFA07A]", onClick: ()=>setLessonCompleted(true), __source: { fileName: "", lineNumber: 203, columnNumber: 19 }, __self: this }, "注文する"))))), /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 212, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-[#4B0082] mb-4", __source: { fileName: "", lineNumber: 213, columnNumber: 11 }, __self: this }, "進捗状況"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 214, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 215, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-[#4B0082] mb-2", __source: { fileName: "", lineNumber: 216, columnNumber: 15 }, __self: this }, "レッスン進捗"), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-[#E6E6FA] rounded-full h-2.5", __source: { fileName: "", lineNumber: 217, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#FFB6C1] h-2.5 rounded-full", style: { width: `${lessonProgress}%` }, __source: { fileName: "", lineNumber: 218, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 221, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-[#4B0082] mb-2", __source: { fileName: "", lineNumber: 222, columnNumber: 15 }, __self: this }, "正答率"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold text-[#4B0082]", __source: { fileName: "", lineNumber: 223, columnNumber: 15 }, __self: this }, totalQuestions > 0 ? Math.round(correctAnswers / totalQuestions * 100) : 0, "%")))), lessonCompleted && /*#__PURE__*/ React.createElement("section", { className: "mt-8", __source: { fileName: "", lineNumber: 231, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-[#4B0082] mb-4", __source: { fileName: "", lineNumber: 232, columnNumber: 13 }, __self: this }, "レッスン完了"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 233, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 234, columnNumber: 15 }, __self: this }, "おめでとうございます！レッスンを完了しました。正答率: ", Math.round(correctAnswers / totalQuestions * 100), "%"))), /*#__PURE__*/ React.createElement("section", { className: "mt-8", __source: { fileName: "", lineNumber: 242, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-[#4B0082] mb-4", __source: { fileName: "", lineNumber: 243, columnNumber: 11 }, __self: this }, "レッスン履歴"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 244, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 245, columnNumber: 13 }, __self: this }, lessonHistory.map((lesson, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-2", __source: { fileName: "", lineNumber: 247, columnNumber: 17 }, __self: this }, lesson.date, ": 正答率 ", lesson.accuracy, "%")))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#FFB6C1] p-4 text-center mt-8", __source: { fileName: "", lineNumber: 256, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#4B0082]", __source: { fileName: "", lineNumber: 257, columnNumber: 9 }, __self: this }, "© 2023 英会話学習アプリ"))); }