form 1 topics added

components/explorers/integer-multiply-divide-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";
 
@@ -191,8 +192,6 @@ function Thermometer({ data }: { data?: Step["thermometer"] }) {
   const startTemp = data?.startTemp ?? 0;
   const endTemp = data?.endTemp ?? 0;
 
-  const startY = ((startTemp - minTemp) / range) * 100;
-  const endY = ((endTemp - minTemp) / range) * 100;
   const fillY = ((endTemp - minTemp) / range) * 100;
 
   const ticks = [];
@@ -372,30 +371,30 @@ function ThermometerPractice() {
   );
 }
 
+function generateProblem() {
+  const ops = ["×", "÷"] as const;
+  const op = ops[Math.floor(Math.random() * ops.length)];
+
+  if (op === "×") {
+    const a = Math.floor(Math.random() * 25) - 12;
+    const b = Math.floor(Math.random() * 25) - 12;
+    return { a, b, op, answer: a * b };
+  } else {
+    // Generate division with clean integer results
+    const b = Math.floor(Math.random() * 11) - 5;
+    const nonZeroB = b === 0 ? 3 : b;
+    const answer = Math.floor(Math.random() * 21) - 10;
+    const a = answer * nonZeroB;
+    return { a, b: nonZeroB, op, answer };
+  }
+}
+
 function MultiplyDividePractice() {
   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)];
-
-    if (op === "×") {
-      const a = Math.floor(Math.random() * 25) - 12;
-      const b = Math.floor(Math.random() * 25) - 12;
-      return { a, b, op, answer: a * b };
-    } else {
-      // Generate division with clean integer results
-      const b = Math.floor(Math.random() * 11) - 5;
-      const nonZeroB = b === 0 ? 3 : b;
-      const answer = Math.floor(Math.random() * 21) - 10;
-      const a = answer * nonZeroB;
-      return { a, b: nonZeroB, op, answer };
-    }
-  }
-
   function check() {
     const parsed = parseInt(userAnswer);
     if (isNaN(parsed)) return;
@@ -702,7 +701,9 @@ export function IntegerMultiplyDivideExplorer() {
       </Card>
 
       {/* Practice sections */}
-      {tab === "thermometer" ? <ThermometerPractice /> : <MultiplyDividePractice />}
+      <ClientOnly fallback={<Card className="min-h-[220px]" />}>
+        {tab === "thermometer" ? <ThermometerPractice /> : <MultiplyDividePractice />}
+      </ClientOnly>
     </div>
   );
 }