function ToeicWordQuiz({ question, answers, handleAnswerClick }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mx-auto p-4 bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, question), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, answers.map((answer, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: "font-roboto py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-700", onClick: ()=>handleAnswerClick(answer), name: `answer-${index}`, __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, answer)))); } function ToeicWordQuizStory() { const question = "What is the meaning of 'ubiquitous'?"; const answers = [ "Rare", "Common", "Invisible", "Difficult" ]; const handleAnswerClick = (answer)=>{ console.log(`Selected answer: ${answer}`); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ToeicWordQuiz, { question: question, answers: answers, handleAnswerClick: handleAnswerClick, __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this })); } function MainComponent() { const quizData = [ { question: "What is the meaning of 'apple'?", answers: [ "りんご", "さる", "ねこ", "いぬ" ], correct: "りんご" }, { question: "What is the meaning of 'cat'?", answers: [ "いぬ", "さる", "ねこ", "りんご" ], correct: "ねこ" }, { question: "What is the meaning of 'dog'?", answers: [ "ねこ", "いぬ", "さる", "りんご" ], correct: "いぬ" } ]; const [currentStep, setCurrentStep] = React.useState(0); const handleAnswerClick = (answer)=>{ const isCorrect = answer === quizData[currentStep].correct; if (isCorrect) { const nextStep = currentStep + 1; if (nextStep < quizData.length) { setCurrentStep(nextStep); } else { alert("You've completed all questions!"); setCurrentStep(0); } } else { alert("Wrong answer, try again!"); } }; const { question, answers } = quizData[currentStep]; return /*#__PURE__*/ React.createElement(ToeicWordQuiz, { question: question, answers: answers, handleAnswerClick: handleAnswerClick, __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex items-center justify-center bg-gray-100", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this })); }