function MainComponent({ score, question, options, onSelectOption, selectedOption, onSubmitAnswer, answerSubmitted, feedback }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-between h-screen bg-gray-200 p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto mt-4 mb-2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "GED STUDY GUIDE"), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-white rounded shadow p-4 max-w-xl text-left my-auto", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-bold font-roboto", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "Score: ", score), /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-sm font-roboto text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, "Return to Home")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-bold font-roboto mb-2", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, question), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, options && options.map((option, index)=>{ const isSelected = selectedOption === index; return /*#__PURE__*/ React.createElement("div", { key: index, className: "mb-2 flex items-center", __source: { fileName: "", lineNumber: 16, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", id: `option-${index}`, name: "option", value: index, checked: isSelected, onChange: onSelectOption, className: "mr-2", __source: { fileName: "", lineNumber: 17, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: `option-${index}`, className: "font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 19 }, __self: this }, option)); }))), !answerSubmitted && /*#__PURE__*/ React.createElement("button", { onClick: onSubmitAnswer, className: "bg-blue-500 text-white w-full py-2 rounded font-roboto text-center", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Submit Answer"), answerSubmitted && /*#__PURE__*/ React.createElement("div", { className: "text-green-600 font-roboto my-2", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, feedback)), /*#__PURE__*/ React.createElement("footer", { className: "w-full text-center bg-gray-200 text-gray-700 p-2 mt-4 font-crimson-text", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://bfloore.online", className: "hover:underline", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "A product of bfloore.online"), " on the ", /*#__PURE__*/ React.createElement("a", { href: "https://create.xyz", className: "hover:underline", __source: { fileName: "", lineNumber: 45, columnNumber: 109 }, __self: this }, "create.xyz"), " platform, (c) 2024")); } function StoryComponent() { const [score, setScore] = React.useState(0); const [selectedOption, setSelectedOption] = React.useState(null); const [answerSubmitted, setAnswerSubmitted] = React.useState(false); const [feedback, setFeedback] = React.useState(''); const question = "What is 5 + 3?"; const options = [ "6", "7", "8", "None of the above" ]; const correctOption = 2; const handleSelectOption = (e)=>setSelectedOption(Number(e.target.value)); const handleSubmitAnswer = ()=>{ setAnswerSubmitted(true); if (selectedOption === correctOption) { setScore(score + 1); setFeedback("Correct! 5 + 3 equals 8."); } else { setFeedback("Incorrect. 5 + 3 equals 8."); } }; return /*#__PURE__*/ React.createElement(MainComponent, { score: score, question: question, options: options, onSelectOption: handleSelectOption, selectedOption: selectedOption, onSubmitAnswer: handleSubmitAnswer, answerSubmitted: answerSubmitted, feedback: feedback, __source: { fileName: "", lineNumber: 74, columnNumber: 5 }, __self: this }); }