function EnglishLevelSelector({ label, name, options }) { return /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: name, className: "block mb-2 font-roboto", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, label, ":"), /*#__PURE__*/ React.createElement("select", { name: name, className: "border border-gray-300 p-2 rounded", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, options.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option.value, value: option.value, __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, option.label)))); } function EnglishLevelSelectorStory() { const vocabularyOptions = [ { value: 'EIKEN2', label: 'EIKEN Grade 2' }, { value: 'EIKEN3', label: 'EIKEN Grade 3' }, { value: 'EIKEN4', label: 'EIKEN Grade 4' }, { value: 'EIKEN5', label: 'EIKEN Grade 5' } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(EnglishLevelSelector, { label: "Vocabulary Level", name: "vocabularyLevel", options: vocabularyOptions, __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this })); } function MainComponent() { const [coinBalance, setCoinBalance] = React.useState(100); const [spendingHistory, setSpendingHistory] = React.useState([]); const [isPracticing, setIsPracticing] = React.useState(false); const [selectedLevel, setSelectedLevel] = React.useState(''); const [selectedComplexity, setSelectedComplexity] = React.useState(''); const [currentQuestion, setCurrentQuestion] = React.useState(0); const [userAnswers, setUserAnswers] = React.useState([]); const [showSummary, setShowSummary] = React.useState(false); const vocabularyOptions = [ { value: 'EIKEN2', label: 'EIKEN Grade 2' }, { value: 'EIKEN5', label: 'EIKEN Grade 5' } ]; const complexityOptions = [ { value: 'easy', label: 'Easy' }, { value: 'medium', label: 'Medium' }, { value: 'hard', label: 'Hard' } ]; const handleStartLearning = ()=>{ setIsPracticing(true); setCurrentQuestion(0); }; const handleSubmitAnswer = (userAnswer)=>{ setUserAnswers([ ...userAnswers, userAnswer ]); if (currentQuestion < 9) { setCurrentQuestion(currentQuestion + 1); } else { setShowSummary(true); } }; if (showSummary) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "Summary")); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, !isPracticing && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Learn English Challenge"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Select your vocabulary level and sentence complexity below to begin:"), /*#__PURE__*/ React.createElement(EnglishLevelSelector, { label: "Vocabulary Level", name: "vocabularyLevel", options: vocabularyOptions, onChange: (e)=>setSelectedLevel(e.target.value), __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(EnglishLevelSelector, { label: "Sentence Complexity", name: "complexity", options: complexityOptions, onChange: (e)=>setSelectedComplexity(e.target.value), __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-6 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", onClick: handleStartLearning, __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Start Learning")), isPracticing && !showSummary && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "Translation Practice"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Question ", currentQuestion + 1, "/10"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "userAnswer", className: "border border-gray-300 p-2 rounded w-full", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", onClick: ()=>handleSubmitAnswer(document.getElementsByName("userAnswer")[0].value), __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "Submit")), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded", onClick: ()=>setIsPracticing(false), __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "Back to Home"))); }