/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useCallback, useEffect, useRef } 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 [timeLeft, setTimeLeft] = useState(10); const [questionsAnswered, setQuestionsAnswered] = useState(0); const timerRef = useRef(null); // Trigonometric standard values and formulas const trigValues = { "sin(0°)": 0, "sin(30°)": 0.5, "sin(45°)": 1/Math.sqrt(2), "sin(60°)": Math.sqrt(3)/2, "sin(90°)": 1, "cos(0°)": 1, "cos(30°)": Math.sqrt(3)/2, "cos(45°)": 1/Math.sqrt(2), "cos(60°)": 0.5, "cos(90°)": 0, "tan(0°)": 0, "tan(30°)": 1/Math.sqrt(3), "tan(45°)": 1, "tan(60°)": Math.sqrt(3), "tan(90°)": Infinity }; const trigFormulas = [ "sin²θ + cos²θ = 1", "tan θ = sin θ / cos θ", "sin(A+B) = sin A cos B + cos A sin B", "cos(A+B) = cos A cos B - sin A sin B" ]; // Helper function to generate options around the correct answer const generateOptions = useCallback((correctAnswer) => { const variance = Math.max(1, Math.round(correctAnswer * 0.2)); // Adjust variance as needed let options = new Set([correctAnswer]); // Use a Set to avoid duplicates while (options.size < 4) { let option = Math.round(correctAnswer + (Math.random() * 2 - 1) * variance); options.add(option); } return Array.from(options).sort(() => Math.random() - 0.5); }, []); const generateQuestion = useCallback(() => { let question, correctAnswer, options; switch(operation) { case "multiplication": // Generate multiplication tables from 5 to 20 const tables = Array.from({length: 16}, (_, i) => i + 5); const selectedTable = tables[Math.floor(Math.random() * tables.length)]; const multiplier = Math.floor(Math.random() * 10) + 1; question = `${selectedTable} × ${multiplier}`; correctAnswer = selectedTable * multiplier; options = generateOptions(correctAnswer); break; case "addition": const add1 = Math.floor(Math.random() * 181) + 20; // 20 to 200 const add2 = Math.floor(Math.random() * 181) + 20; // 20 to 200 question = `${add1} + ${add2}`; correctAnswer = add1 + add2; options = generateOptions(correctAnswer); break; case "subtraction": let sub1 = Math.floor(Math.random() * 181) + 20; // 20 to 200 let sub2 = Math.floor(Math.random() * 181) + 20; // 20 to 200 // Ensure sub1 is greater than or equal to sub2 to avoid negative results if (sub2 > sub1) { [sub1, sub2] = [sub2, sub1]; // Swap values if sub2 is greater than sub1 } question = `${sub1} - ${sub2}`; correctAnswer = sub1 - sub2; options = generateOptions(correctAnswer); break; case "division": const divisor = Math.floor(Math.random() * 49) + 2; // 2 to 50 let dividend; do { dividend = Math.floor(Math.random() * 481) + 20; // 20 to 500 } while (dividend % divisor !== 0); // Ensure it's divisible question = `${dividend} ÷ ${divisor}`; correctAnswer = dividend / divisor; options = generateOptions(correctAnswer); break; case "trigonometry": const trigType = Math.random() > 0.5 ? "values" : "formulas"; if (trigType === "values") { const trigFunctions = ["sin", "cos", "tan"]; const angles = [0, 30, 45, 60, 90]; const func = trigFunctions[Math.floor(Math.random() * trigFunctions.length)]; const angle = angles[Math.floor(Math.random() * angles.length)]; question = `${func}(${angle}°)`; correctAnswer = trigValues[`${func}(${angle}°)`]; options = generateOptions(correctAnswer); } else { const formula = trigFormulas[Math.floor(Math.random() * trigFormulas.length)]; question = `Which trigonometric formula is this? ${formula}`; const formulaOptions = [ formula, "sin²θ + cos²θ = 1", "tan θ = sin θ / cos θ", "sin(A+B) = sin A cos B + cos A sin B" ].sort(() => Math.random() - 0.5); correctAnswer = formula; options = formulaOptions; } break; case "quadratic": // Generate quadratic equation solving questions const a = Math.floor(Math.random() * 5) + 1; const b = Math.floor(Math.random() * 10) - 5; const c = Math.floor(Math.random() * 10) - 5; // Calculate discriminant const discriminant = b * b - 4 * a * c; if (discriminant >= 0) { const x1 = (-b + Math.sqrt(discriminant)) / (2 * a); const x2 = (-b - Math.sqrt(discriminant)) / (2 * a); question = `Solve: ${a}x² ${b >= 0 ? '+' : '-'} ${Math.abs(b)}x ${c >= 0 ? '+' : '-'} ${Math.abs(c)} = 0`; // Choose between x1 and x2 as correct answer correctAnswer = discriminant === 0 ? x1 : (Math.random() > 0.5 ? x1 : x2); options = generateOptions(correctAnswer); } else { // No real solutions question = `How many real solutions does ${a}x² ${b >= 0 ? '+' : '-'} ${Math.abs(b)}x ${c >= 0 ? '+' : '-'} ${Math.abs(c)} = 0 have?`; correctAnswer = 0; options = [0, 1, 2, 3]; } break; case "calculus": const calcType = Math.random() > 0.5 ? "derivative" : "integral"; if (calcType === "derivative") { // Simple derivative questions const funcs = [ { func: "x²", derivative: "2x" }, { func: "x³", derivative: "3x²" }, { func: "sin(x)", derivative: "cos(x)" }, { func: "cos(x)", derivative: "-sin(x)" }, { func: "e^x", derivative: "e^x" } ]; const selectedFunc = funcs[Math.floor(Math.random() * funcs.length)]; question = `What is the derivative of ${selectedFunc.func}?`; correctAnswer = selectedFunc.derivative; options = [ correctAnswer, "x", "2x²", "sin(x)" ].sort(() => Math.random() - 0.5); } else { // Simple integral questions const integrals = [ { func: "x", integral: "½x²" }, { func: "x²", integral: "⅓x³" }, { func: "sin(x)", integral: "-cos(x)" }, { func: "cos(x)", integral: "sin(x)" } ]; const selectedIntegral = integrals[Math.floor(Math.random() * integrals.length)]; question = `What is the integral of ${selectedIntegral.func}?`; correctAnswer = selectedIntegral.integral; options = [ correctAnswer, "x", "x²", "sin(x)" ].sort(() => Math.random() - 0.5); } break; default: question = "2 × 2"; correctAnswer = 4; options = [4, 5, 3, 6]; } return { question, correctAnswer, options }; }, [operation, generateOptions]); // Define handleTimeOut first to resolve reference error const handleTimeOut = useCallback(() => { setFeedback("Time's up! 😓"); // Generate next question const newQuestion = generateQuestion(); setCurrentQuestion(newQuestion); // Reset timer startTimer(); }, [generateQuestion]); const startTimer = useCallback(() => { const baseTime = operation === "trigonometry" ? 20 : operation === "quadratic" ? 25 : operation === "calculus" ? 30 : Math.max(2, 10 - Math.floor(questionsAnswered / 10) * 0.5); setTimeLeft(baseTime); if (timerRef.current) { clearInterval(timerRef.current); } timerRef.current = setInterval(() => { setTimeLeft(prev => { if (prev <= 0) { clearInterval(timerRef.current); handleTimeOut(); return 0; } return prev - 0.1; }); }, 100); }, [questionsAnswered, operation, handleTimeOut]); const handleAnswer = useCallback((selectedAnswer) => { if (!currentQuestion) return; const isCorrect = selectedAnswer === currentQuestion.correctAnswer; setFeedback(isCorrect ? "Correct! 🎉" : "Incorrect. Try again! 😕"); if (isCorrect) { setScore(prev => prev + 1); } setQuestionsAnswered(prev => prev + 1); // Generate next question const newQuestion = generateQuestion(); setCurrentQuestion(newQuestion); // Reset timer startTimer(); }, [currentQuestion, generateQuestion, startTimer]); useEffect(() => { // Generate initial question when component mounts or operation changes const initialQuestion = generateQuestion(); setCurrentQuestion(initialQuestion); // Start timer startTimer(); // Cleanup timer on unmount return () => { if (timerRef.current) { clearInterval(timerRef.current); } }; }, [operation, generateQuestion, startTimer]); function changeOperation(newOperation) { setOperation(newOperation); setScore(0); setQuestionsAnswered(0); } // If no question is generated yet, return null or loading state if (!currentQuestion) { return

; } return (

Advanced Math Quiz 🧮

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

Score: {score}

Time: {timeLeft.toFixed(1)}s

{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(` Advanced Math Quiz

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

quizApp