import React, { useState } from "react"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; import { DndContext, useDraggable, useDroppable } from "@dnd-kit/core"; const questions = [ { id: 1, prompt: "12 ×", correctAnswer: "144" }, { id: 2, prompt: "8 ×", correctAnswer: "64" }, { id: 3, prompt: "15 ×", correctAnswer: "225" }, { id: 4, prompt: "23 ×", correctAnswer: "529" }, ]; export default function WorksheetApp() { const [answers, setAnswers] = useState({}); const [submitted, setSubmitted] = useState(false); const [score, setScore] = useState(null); const handleChange = (id, value) => { setAnswers((prev) => ({ ...prev, [id]: value })); }; const handleSubmit = () => { setSubmitted(true); let totalCorrect = 0; questions.forEach((q) => { if (answers[q.id]?.trim() === q.correctAnswer) { totalCorrect++; } }); setScore(totalCorrect); }; return (

Multiply the numbers

{questions.map((q) => (
handleChange(q.id, e.target.value)} disabled={submitted} />
))} {submitted && (

Responses submitted.

Your score: {score} / {questions.length}

)}
); }