Update components/MathQuizApp.tsx

components/MathQuizApp.tsx

@@ -26,11 +26,25 @@ const generateQuestion = (difficulty) => {
       break;
   }
 
+  // For division, ensure it results in a whole number or simpler decimal
+  if (operation === '/') {
+    // Make sure num2 is not zero to avoid division by zero
+    num2 = num2 === 0 ? 1 : num2;
+    // For easier difficulty levels, try to make divisions that result in whole numbers
+    if (difficulty === 'easy' || difficulty === 'medium') {
+      num1 = num2 * Math.floor(Math.random() * 10) + 1;
+    }
+  }
+
+  const answer = eval(`${num1} ${operation} ${num2}`);
+  // Round the answer to 2 decimal places if it's a float
+  const roundedAnswer = Number.isInteger(answer) ? answer : parseFloat(answer.toFixed(2));
+
   return {
     num1,
     num2,
     operation,
-    answer: eval(`${num1} ${operation} ${num2}`),
+    answer: roundedAnswer,
   };
 };
 
@@ -72,7 +86,7 @@ const CalculatorComponent = ({ onClose }) => {
       case '+': return firstOp + secondOp;
       case '-': return firstOp - secondOp;
       case '*': return firstOp * secondOp;
-      case '/': return firstOp / secondOp;
+      case '/': return secondOp === 0 ? 'Error' : firstOp / secondOp;
       default: return secondOp;
     }
   };
@@ -80,16 +94,26 @@ const CalculatorComponent = ({ onClose }) => {
   const performOperation = (nextOperator) => {
     const inputValue = parseFloat(display);
     
-    if (firstOperand === null) {
-      setFirstOperand(inputValue);
-    } else if (operator) {
-      const result = calculate(firstOperand, inputValue, operator);
-      setDisplay(String(result));
-      setFirstOperand(result);
+    if (nextOperator === '=') {
+      if (operator && firstOperand !== null) {
+        const result = calculate(firstOperand, inputValue, operator);
+        setDisplay(String(result));
+        setFirstOperand(null);
+        setOperator(null);
+        setWaitingForSecondOperand(false);
+      }
+    } else {
+      if (firstOperand === null) {
+        setFirstOperand(inputValue);
+      } else if (operator) {
+        const result = calculate(firstOperand, inputValue, operator);
+        setDisplay(String(result));
+        setFirstOperand(result);
+      }
+      
+      setWaitingForSecondOperand(true);
+      setOperator(nextOperator);
     }
-    
-    setWaitingForSecondOperand(true);
-    setOperator(nextOperator);
   };
 
   return (
@@ -141,13 +165,21 @@ const MathQuizApp = () => {
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    if (Number(userAnswer) === question.answer) {
+    
+    // Parse the user answer as a float and check against the question answer
+    const parsedAnswer = parseFloat(userAnswer);
+    
+    // Check if the answer matches (with some tolerance for floating point)
+    const isCorrect = Math.abs(parsedAnswer - question.answer) < 0.001;
+    
+    if (isCorrect) {
       setResult('Correct!');
       setScore(score + 1);
     } else {
       setResult(`Incorrect. The correct answer is ${question.answer}.`);
       setWrongAnswers(wrongAnswers + 1);
     }
+    
     setUserAnswer('');
     setQuestion(generateQuestion(difficulty));
   };
@@ -157,6 +189,7 @@ const MathQuizApp = () => {
     setQuestion(generateQuestion(e.target.value));
     setScore(0);
     setWrongAnswers(0);
+    setResult('');
   };
 
   return (
@@ -172,7 +205,6 @@ const MathQuizApp = () => {
             {showCalculator ? 'Hide Calculator' : 'Show Calculator'}
           </button>
         </div>
-
         <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
           <div className="space-y-6">
             <form onSubmit={handleSubmit} className="space-y-6">
@@ -202,6 +234,7 @@ const MathQuizApp = () => {
                   value={userAnswer}
                   onChange={(e) => setUserAnswer(e.target.value)}
                   className="bg-gray-50 border border-gray-300 text-gray-900 text-xl rounded-lg focus:ring-blue-500 focus:border-blue-500 p-4 w-full text-center"
+                  step="any"
                 />
               </div>
               <div className="text-center">