form 1 topics added

components/explorers/integer-add-subtract-explorer.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useCallback } from "react";
 import { Card } from "@/components/ui/card";
+import { ClientOnly } from "@/components/ui/client-only";
 import { StepControls } from "./step-controls";
 import { MathDisplay } from "@/components/math/math-display";
 
@@ -282,21 +283,21 @@ function SignRuleCard({ rule, active }: { rule: string; active: boolean }) {
   );
 }
 
+function generateProblem() {
+  const ops = ["+", "-"] as const;
+  const op = ops[Math.floor(Math.random() * ops.length)];
+  const a = Math.floor(Math.random() * 21) - 10;
+  const b = Math.floor(Math.random() * 21) - 10;
+  const answer = op === "+" ? a + b : a - b;
+  return { a, b, op, answer };
+}
+
 function QuickPractice() {
   const [problem, setProblem] = useState(() => generateProblem());
   const [userAnswer, setUserAnswer] = useState("");
   const [feedback, setFeedback] = useState<"correct" | "incorrect" | null>(null);
   const [score, setScore] = useState({ correct: 0, total: 0 });
 
-  function generateProblem() {
-    const ops = ["+", "-"] as const;
-    const op = ops[Math.floor(Math.random() * ops.length)];
-    const a = Math.floor(Math.random() * 21) - 10;
-    const b = Math.floor(Math.random() * 21) - 10;
-    const answer = op === "+" ? a + b : a - b;
-    return { a, b, op, answer };
-  }
-
   function checkAnswer() {
     const parsed = parseInt(userAnswer);
     if (isNaN(parsed)) return;
@@ -587,7 +588,9 @@ export function IntegerAddSubtractExplorer() {
       </Card>
 
       {/* Quick Practice */}
-      <QuickPractice />
+      <ClientOnly fallback={<Card className="min-h-[220px]" />}>
+        <QuickPractice />
+      </ClientOnly>
     </div>
   );
 }