function SpellingTestTrigger({ onClick, children }) { return /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white font-roboto px-6 py-2 rounded", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, children); } function SpellingTestTriggerStory() { const handleNextWord = ()=>alert("Next word triggered"); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SpellingTestTrigger, { onClick: handleNextWord, __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, "Next Word")); } function MainComponent() { const words = [ "accommodation", "rhythm", "embarrassment", "acknowledge", "beautiful" ]; const [currentWordIndex, setCurrentWordIndex] = React.useState(0); const [userAnswers, setUserAnswers] = React.useState({}); const [results, setResults] = React.useState(null); const playWord = (word)=>{ const utterance = new SpeechSynthesisUtterance(word); speechSynthesis.speak(utterance); }; const handleChange = (event)=>{ const { name, value } = event.target; setUserAnswers({ ...userAnswers, [name]: value }); }; const handleSubmit = ()=>{ const newResults = words.map((word, index)=>{ const userAnswer = userAnswers[`word-${index + 1}`]; const cleanedAnswer = userAnswer ? userAnswer.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").toLowerCase() : ""; return cleanedAnswer === word.toLowerCase(); }); setResults(newResults); }; const handleNextWord = ()=>{ setCurrentWordIndex((prevIndex)=>(prevIndex + 1) % words.length); setUserAnswers({}); playWord(words[(currentWordIndex + 1) % words.length]); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-6", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, "Spelling Test"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white font-roboto px-4 py-2 rounded", name: "play-word", onClick: ()=>playWord(words[currentWordIndex]), __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-play mr-2", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }), "Play Word")), /*#__PURE__*/ React.createElement("div", { className: "mb-4 w-full max-w-xs", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto block text-lg mb-2", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "Word ", currentWordIndex + 1), /*#__PURE__*/ React.createElement("input", { type: "text", name: `word-${currentWordIndex + 1}`, className: "w-full px-4 py-2 border rounded font-roboto", placeholder: "Type the word here", onChange: handleChange, __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement(SpellingTestTrigger, { onClick: handleNextWord, __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, "Next Word"), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white font-roboto px-6 py-2 rounded", name: "submit-answers", onClick: handleSubmit, __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, "Submit Answers"), results && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, results.map((result, index)=>/*#__PURE__*/ React.createElement("p", { key: index, className: `font-roboto ${result ? 'text-green-500' : 'text-red-500'}`, __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "Word ", index + 1, ": ", result ? 'Correct' : 'Incorrect')))); }