/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useCallback } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function MathQuiz() { const [operation, setOperation] = useState("multiplication"); const [currentQuestion, setCurrentQuestion] = useState(null); const [score, setScore] = useState(0); const [feedback, setFeedback] = useState(""); const generateQuestion = useCallback(() => { let num1, num2, correctAnswer, question; switch(operation) { case "multiplication": num1 = Math.floor(Math.random() * 14) + 2; // 2-15 num2 = Math.floor(Math.random() * 14) + 2; // 2-15 correctAnswer = num1 * num2; question = `${num1} × ${num2}`; break; case "addition": num1 = Math.floor(Math.random() * 100) + 1; // 1-100 num2 = Math.floor(Math.random() * 100) + 1; // 1-100 correctAnswer = num1 + num2; question = `${num1} + ${num2}`; break; case "subtraction": num1 = Math.floor(Math.random() * 100) + 1; // 1-100 num2 = Math.floor(Math.random() * num1) + 1; // ensure positive result correctAnswer = num1 - num2; question = `${num1} - ${num2}`; break; default: num1 = 2; num2 = 2; correctAnswer = 4; question = "2 × 2"; } const options = [ correctAnswer, correctAnswer + Math.floor(Math.random() * 5) + 1, Math.max(0, correctAnswer - Math.floor(Math.random() * 5) + 1), correctAnswer + Math.floor(Math.random() * 10) + 5 ].sort(() => Math.random() - 0.5); return { question, correctAnswer, options }; }, [operation]); // Use effect to generate initial question and regenerate when operation changes React.useEffect(() => { setCurrentQuestion(generateQuestion()); }, [generateQuestion]); function handleAnswer(selectedAnswer) { if (currentQuestion && selectedAnswer === currentQuestion.correctAnswer) { setScore(prevScore => prevScore + 1); setFeedback("Correct! 🎉 +1 point"); } else { setFeedback(`Wrong! Correct answer was ${currentQuestion?.correctAnswer} 🤔`); } setTimeout(() => { setCurrentQuestion(generateQuestion()); setFeedback(""); }, 1500); } function changeOperation(newOperation) { setOperation(newOperation); setScore(0); } // Render loading state if question is not yet generated if (!currentQuestion) { return

; } return (

Math Quiz 🧮

{['multiplication', 'addition', 'subtraction'].map(op => ( ))}

Score: {score}

What is {currentQuestion.question}?

{currentQuestion.options.map((option, index) => ( ))}

{feedback && (

{feedback}

)} View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Math Quiz

`, { headers: { "content-type": "text/html", }, }); }

trustingLavenderRodent