function MainComponent() { const questions = [ { course: "AP US History", unit: "Period 6: 1865-1898", topic: "5.5 Sectional Conflict: Regional Differences", image: "https://cross-platform-rwa.rp.devfactory.com/images/2979%20-%20german%20and%20irish%20immigrant%20groups.png", question: "What were the two largest immigrant groups during the mid-1800's?", options: [ "German & Irish", "Italian & German", "Chinese & Japanese" ], correct: 0 }, { course: "AP US History", unit: "Period 6: 1865-1898", topic: "5.4 The Compromise of 1850", image: "link", question: "What led to the Compromise of 1850?", options: [ "Sectional disagreements over slavery", "Conflict over tariffs", "Arguments surrounding states' rights" ], correct: 0 }, { course: "AP US History", unit: "Period 6: 1865-1898", topic: "5.4 The Compromise of 1850", image: "link", question: "As part of the Compromise of 1850, which state was admitted as a free state?", options: [ "Kansas", "California", "Oregon" ], correct: 1 } ]; const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0); const [selectedOptionIndex, setSelectedOptionIndex] = React.useState(null); const [score, setScore] = React.useState(0); const [feedback, setFeedback] = React.useState(""); const handleOptionClick = (index)=>{ setSelectedOptionIndex(index); if (index === questions[currentQuestionIndex].correct) { setFeedback("Correct"); setScore(score + 1); } else { setFeedback("Wrong answer"); } }; const handleNextQuestion = ()=>{ setCurrentQuestionIndex(currentQuestionIndex + 1); setSelectedOptionIndex(null); setFeedback(""); }; if (currentQuestionIndex >= questions.length) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex items-center justify-center bg-gray-100", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-green-600 font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "You have completed the quiz!"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "Your score: ", score, " / ", questions.length)); } const currentQuestion = questions[currentQuestionIndex]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-gray-100 p-4", __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, "Course: ", currentQuestion.course), /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-2 font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, "Unit: ", currentQuestion.unit), /*#__PURE__*/ React.createElement("h3", { className: "text-lg mb-2 font-roboto", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, "Topic: ", currentQuestion.topic), /*#__PURE__*/ React.createElement("img", { src: currentQuestion.image, alt: "Question visual aid", className: "w-[200px] h-[200px] mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-xl mb-4 font-roboto", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, currentQuestion.question), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, currentQuestion.options.map((option, index)=>{ const optionClass = selectedOptionIndex === index ? index === currentQuestion.correct ? "bg-green-500 text-white" : "bg-red-500 text-white" : "bg-white text-black"; return /*#__PURE__*/ React.createElement("button", { key: index, name: "option", onClick: ()=>handleOptionClick(index), className: `block w-full p-2 border rounded ${optionClass} font-roboto`, __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, option); })), feedback && /*#__PURE__*/ React.createElement("p", { className: `mt-4 text-xl font-roboto ${feedback === "Correct" ? "text-green-600" : "text-red-600"}`, __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, feedback), /*#__PURE__*/ React.createElement("button", { onClick: handleNextQuestion, className: "mt-6 bg-blue-500 text-white px-6 py-2 rounded font-roboto", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, "Next")); }

Course: AP US History

Unit: Period 6: 1865-1898

Topic: 5.5 Sectional Conflict: Regional Differences