improved slightly mroe

components/MathQuizApp.tsx

@@ -39,6 +39,7 @@ const MathQuizApp = () => {
   const [userAnswer, setUserAnswer] = useState('');
   const [result, setResult] = useState('');
   const [score, setScore] = useState(0);
+  const [wrongAnswers, setWrongAnswers] = useState(0);
   const [difficulty, setDifficulty] = useState('easy');
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
@@ -48,6 +49,7 @@ const MathQuizApp = () => {
       setScore(score + 1);
     } else {
       setResult(`Incorrect. The correct answer is ${question.answer}.`);
+      setWrongAnswers(wrongAnswers + 1);
     }
     setUserAnswer('');
     setQuestion(generateQuestion(difficulty));
@@ -57,17 +59,22 @@ const MathQuizApp = () => {
     setDifficulty(e.target.value);
     setQuestion(generateQuestion(e.target.value));
     setScore(0);
+    setWrongAnswers(0);
   };
 
   return (
-    <div className="max-w-3xl mx-auto p-8 mt-10 bg-white rounded-lg shadow-md">
+    <div className="max-w-3xl mx-auto p-8 mt-20 bg-white rounded-lg shadow-md">
       <h1 className="text-4xl font-bold mb-8 text-center">Math Quiz App</h1>
       <form onSubmit={handleSubmit} className="space-y-6">
-        <div className="flex justify-between items-center">
+        <div className="flex flex-col items-center gap-6">
+          <div className="flex gap-8 items-center justify-center">
+            <div className="text-xl font-bold">Correct: {score}</div>
+            <div className="text-xl font-bold text-red-500">Wrong: {wrongAnswers}</div>
+          </div>
           <select
             value={difficulty}
             onChange={handleDifficultyChange}
-            className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 w-48"
+            className="bg-gray-50 border border-gray-300 text-gray-900 text-lg rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 w-48 text-center"
           >
             {difficulties.map((difficulty) => (
               <option key={difficulty} value={difficulty}>
@@ -75,9 +82,8 @@ const MathQuizApp = () => {
               </option>
             ))}
           </select>
-          <p className="text-xl font-bold">Score: {score}</p>
         </div>
-        <div className="text-center">
+        <div className="text-center mt-8">
           <p className="text-3xl font-bold mb-6">
             What is {question.num1} {question.operation} {question.num2}?
           </p>