/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [question, setQuestion] = useState(""); const [answer, setAnswer] = useState(""); const [feedback, setFeedback] = useState(""); const [score, setScore] = useState(0); const [totalQuestions, setTotalQuestions] = useState(0); const [consecutiveCorrect, setConsecutiveCorrect] = useState(0); const generateQuestion = () => { const smallNumber = Math.floor(Math.random() * 5) + 1; const oneDigitNumber = Math.floor(Math.random() * 9) + 1; setQuestion(`${smallNumber} × ${oneDigitNumber}`); setAnswer(""); setFeedback(""); }; useEffect(() => { generateQuestion(); }, []); const handleSubmit = (e) => { e.preventDefault(); const [num1, num2] = question.split("×").map(num => parseInt(num.trim())); const correctAnswer = num1 * num2; const userAnswer = parseInt(answer); if (userAnswer === correctAnswer) { const newConsecutiveCorrect = consecutiveCorrect + 1; setConsecutiveCorrect(newConsecutiveCorrect); setScore(score + 1); if (newConsecutiveCorrect === 10) { setFeedback("Amazing! You got 10 correct in a row! 🎉🏆 Show this to your parents and ask for a reward!"); } else { setFeedback("Correct! 🎉"); } } else { setFeedback(`Incorrect. The correct answer is ${correctAnswer}. 😕`); setConsecutiveCorrect(0); } setTotalQuestions(totalQuestions + 1); setTimeout(generateQuestion, 2000); }; return (

Multiply

Practice multiplying small numbers (up to 5) by one-digit numbers.

{question} = ?

{feedback}

Score: {score} / {totalQuestions}

Consecutive Correct: {consecutiveCorrect}

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(` Multiply

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f4f4f4; } .container { max-width: 600px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1 { color: #333; text-align: center; } .game-area { text-align: center; margin-top: 20px; } input[type="number"] { width: 100px; padding: 5px; font-size: 16px; } button { padding: 5px 10px; font-size: 16px; background-color: #4CAF50; color: white; border: none; cursor: pointer; margin-left: 10px; } button:hover { background-color: #45a049; } .feedback { font-weight: bold; margin-top: 10px; } .score, .consecutive { margin-top: 10px; font-size: 18px; } .view-source { display: block; text-align: center; margin-top: 20px; color: #666; text-decoration: none; } .view-source:hover { text-decoration: underline; } `;

Multiply

Version 2