function MainComponent() { const [questionBank, setQuestionBank] = React.useState([]); const [chineseWord, setChineseWord] = React.useState(''); const [englishWord, setEnglishWord] = React.useState(''); const [testStarted, setTestStarted] = React.useState(false); const [currentQuestion, setCurrentQuestion] = React.useState(null); const [options, setOptions] = React.useState([]); const [page, setPage] = React.useState('words'); const addWord = (e)=>{ e.preventDefault(); const newEntry = { chinese: chineseWord, english: englishWord }; setQuestionBank([ ...questionBank, newEntry ]); setChineseWord(''); setEnglishWord(''); }; const startTest = ()=>{ if (questionBank.length < 4) return; setTestStarted(true); setPage('test'); generateQuestion(); }; const generateQuestion = ()=>{ const randomEntry = questionBank[Math.floor(Math.random() * questionBank.length)]; const incorrectOptions = questionBank.filter((q)=>q !== randomEntry); const randomOptions = incorrectOptions.sort(()=>0.5 - Math.random()).slice(0, 3); const allOptions = [ ...randomOptions, randomEntry ].sort(()=>0.5 - Math.random()); setCurrentQuestion(randomEntry); setOptions(allOptions); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, "Learn Words"), page === 'words' && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-2", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Create Question Bank"), /*#__PURE__*/ React.createElement("form", { className: "mb-8", onSubmit: addWord, __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-roboto mb-1", htmlFor: "chinese-word", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "Chinese Word"), /*#__PURE__*/ React.createElement("input", { value: chineseWord, onChange: (e)=>setChineseWord(e.target.value), type: "text", name: "chinese-word", id: "chinese-word", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-roboto mb-1", htmlFor: "english-word", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "English Translation"), /*#__PURE__*/ React.createElement("input", { value: englishWord, onChange: (e)=>setEnglishWord(e.target.value), type: "text", name: "english-word", id: "english-word", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "Add Word")), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-2", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Start Test"), /*#__PURE__*/ React.createElement("button", { onClick: startTest, className: "w-full py-2 mb-4 bg-green-500 text-white rounded", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Start")), page === 'test' && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-roboto mb-2", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "Translate the following word:"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-roboto mb-4", id: "chinese-question", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, currentQuestion?.chinese), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, options.map((option, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: "py-2 px-4 bg-white border border-gray-300 rounded", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, option.english))))); }