integers added
This commit is contained in:
593
components/explorers/integer-add-subtract-explorer.tsx
Normal file
593
components/explorers/integer-add-subtract-explorer.tsx
Normal file
@@ -0,0 +1,593 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { StepControls } from "./step-controls";
|
||||
import { MathDisplay } from "@/components/math/math-display";
|
||||
|
||||
type Mode = "number-line" | "rules";
|
||||
|
||||
interface Step {
|
||||
label: string;
|
||||
math: string;
|
||||
numberLineHighlight?: {
|
||||
start: number;
|
||||
end: number;
|
||||
direction: "left" | "right";
|
||||
moves: number;
|
||||
};
|
||||
}
|
||||
|
||||
function buildAddSubtractSteps(a: number, b: number, op: "add" | "subtract"): Step[] {
|
||||
const steps: Step[] = [];
|
||||
const opSymbol = op === "add" ? "+" : "-";
|
||||
const expression = `${a} ${opSymbol} ${b < 0 ? `(${b})` : b}`;
|
||||
|
||||
// Step 0: Show the original expression
|
||||
steps.push({
|
||||
label: "Start with the expression",
|
||||
math: expression,
|
||||
numberLineHighlight: { start: a, end: a, direction: "right", moves: 0 },
|
||||
});
|
||||
|
||||
if (op === "add") {
|
||||
// Adding
|
||||
steps.push({
|
||||
label: `Place your finger on ${a} on the number line`,
|
||||
math: `\\text{Start at } ${a}`,
|
||||
numberLineHighlight: { start: a, end: a, direction: "right", moves: 0 },
|
||||
});
|
||||
|
||||
if (b >= 0) {
|
||||
steps.push({
|
||||
label: `Adding a positive number: move ${b} steps to the RIGHT`,
|
||||
math: `${a} + ${b} \\longrightarrow \\text{move right } ${b}`,
|
||||
numberLineHighlight: { start: a, end: a + b, direction: "right", moves: b },
|
||||
});
|
||||
} else {
|
||||
steps.push({
|
||||
label: `Adding a negative number: move ${Math.abs(b)} steps to the LEFT`,
|
||||
math: `${a} + (${b}) \\longrightarrow \\text{move left } ${Math.abs(b)}`,
|
||||
numberLineHighlight: { start: a, end: a + b, direction: "left", moves: Math.abs(b) },
|
||||
});
|
||||
}
|
||||
|
||||
const result = a + b;
|
||||
steps.push({
|
||||
label: `You land on ${result}`,
|
||||
math: `${expression} = ${result}`,
|
||||
numberLineHighlight: { start: a, end: result, direction: b >= 0 ? "right" : "left", moves: Math.abs(b) },
|
||||
});
|
||||
|
||||
// Sign rule explanation
|
||||
if (a >= 0 && b >= 0) {
|
||||
steps.push({
|
||||
label: "Rule: Positive + Positive = Positive",
|
||||
math: `(+) + (+) = (+) \\quad \\Rightarrow \\quad ${expression} = ${result}`,
|
||||
numberLineHighlight: { start: a, end: result, direction: "right", moves: Math.abs(b) },
|
||||
});
|
||||
} else if (a < 0 && b < 0) {
|
||||
steps.push({
|
||||
label: "Rule: Negative + Negative = Negative (add magnitudes, keep negative sign)",
|
||||
math: `(-) + (-) = (-) \\quad \\Rightarrow \\quad ${expression} = ${result}`,
|
||||
numberLineHighlight: { start: a, end: result, direction: "left", moves: Math.abs(b) },
|
||||
});
|
||||
} else {
|
||||
steps.push({
|
||||
label: "Rule: Different signs? Subtract the smaller from the larger, keep the sign of the larger",
|
||||
math: `|${Math.abs(a)}| - |${Math.abs(b)}| = ${Math.abs(Math.abs(a) - Math.abs(b))} \\quad \\Rightarrow \\quad ${expression} = ${result}`,
|
||||
numberLineHighlight: { start: a, end: result, direction: result >= a ? "right" : "left", moves: Math.abs(b) },
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// Subtracting
|
||||
steps.push({
|
||||
label: `Place your finger on ${a} on the number line`,
|
||||
math: `\\text{Start at } ${a}`,
|
||||
numberLineHighlight: { start: a, end: a, direction: "right", moves: 0 },
|
||||
});
|
||||
|
||||
if (b >= 0) {
|
||||
steps.push({
|
||||
label: `Subtracting a positive number: move ${b} steps to the LEFT`,
|
||||
math: `${a} - ${b} \\longrightarrow \\text{move left } ${b}`,
|
||||
numberLineHighlight: { start: a, end: a - b, direction: "left", moves: b },
|
||||
});
|
||||
} else {
|
||||
steps.push({
|
||||
label: `Subtracting a negative number is the same as ADDING a positive! Move ${Math.abs(b)} steps RIGHT`,
|
||||
math: `${a} - (${b}) = ${a} + ${Math.abs(b)} \\longrightarrow \\text{move right } ${Math.abs(b)}`,
|
||||
numberLineHighlight: { start: a, end: a - b, direction: "right", moves: Math.abs(b) },
|
||||
});
|
||||
}
|
||||
|
||||
const result = a - b;
|
||||
steps.push({
|
||||
label: `You land on ${result}`,
|
||||
math: `${expression} = ${result}`,
|
||||
numberLineHighlight: { start: a, end: result, direction: result >= a ? "right" : "left", moves: Math.abs(b) },
|
||||
});
|
||||
|
||||
// Two like/unlike signs rule
|
||||
if (b >= 0) {
|
||||
steps.push({
|
||||
label: "Two unlike signs (+ -) becomes negative: subtract means move left",
|
||||
math: `+(-)\\text{ becomes } - \\quad \\Rightarrow \\quad ${expression} = ${result}`,
|
||||
numberLineHighlight: { start: a, end: result, direction: "left", moves: Math.abs(b) },
|
||||
});
|
||||
} else {
|
||||
steps.push({
|
||||
label: "Two like signs (- -) becomes positive: subtracting a negative means move right!",
|
||||
math: `-(-) \\text{ becomes } + \\quad \\Rightarrow \\quad ${expression} = ${result}`,
|
||||
numberLineHighlight: { start: a, end: result, direction: "right", moves: Math.abs(b) },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return steps;
|
||||
}
|
||||
|
||||
function NumberLine({
|
||||
highlight,
|
||||
animate,
|
||||
}: {
|
||||
highlight?: Step["numberLineHighlight"];
|
||||
animate: boolean;
|
||||
}) {
|
||||
const minVal = -15;
|
||||
const maxVal = 15;
|
||||
const range = maxVal - minVal;
|
||||
|
||||
const start = highlight?.start ?? 0;
|
||||
const end = highlight?.end ?? 0;
|
||||
|
||||
const startX = ((start - minVal) / range) * 100;
|
||||
const endX = ((end - minVal) / range) * 100;
|
||||
|
||||
const leftX = Math.min(startX, endX);
|
||||
const width = Math.abs(endX - startX);
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-2xl select-none">
|
||||
<div className="relative h-24 px-4">
|
||||
{/* Arrow path highlight */}
|
||||
{highlight && highlight.moves > 0 && (
|
||||
<div
|
||||
className="absolute top-5 h-3 rounded-full transition-all duration-700"
|
||||
style={{
|
||||
left: `calc(${leftX}% + 16px)`,
|
||||
width: `${width}%`,
|
||||
backgroundColor: highlight.direction === "right"
|
||||
? "rgba(124, 58, 237, 0.25)"
|
||||
: "rgba(220, 38, 38, 0.25)",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Direction arrow */}
|
||||
{highlight && highlight.moves > 0 && (
|
||||
<div
|
||||
className="absolute top-1 text-xs font-bold transition-all duration-500"
|
||||
style={{
|
||||
left: `calc(${(startX + endX) / 2}% + 16px)`,
|
||||
transform: "translateX(-50%)",
|
||||
color: highlight.direction === "right" ? "var(--unit-5)" : "var(--incorrect)",
|
||||
}}
|
||||
>
|
||||
{highlight.direction === "right" ? "→ right →" : "← left ←"}
|
||||
<div className="text-center text-[10px] font-semibold opacity-70">
|
||||
{highlight.moves} step{highlight.moves !== 1 ? "s" : ""}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Number line */}
|
||||
<div className="absolute bottom-8 left-4 right-4">
|
||||
<div className="h-0.5 bg-foreground/40" />
|
||||
{/* Tick marks */}
|
||||
{Array.from({ length: range + 1 }, (_, i) => {
|
||||
const val = minVal + i;
|
||||
const x = (i / range) * 100;
|
||||
const isZero = val === 0;
|
||||
const isHighlighted = highlight && (val === start || val === end);
|
||||
const isInRange = highlight && highlight.moves > 0 &&
|
||||
val >= Math.min(start, end) && val <= Math.max(start, end);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={val}
|
||||
className="absolute -translate-x-1/2"
|
||||
style={{ left: `${x}%` }}
|
||||
>
|
||||
<div
|
||||
className={`h-3 w-0.5 -translate-y-1.5 transition-colors duration-300 ${
|
||||
isHighlighted
|
||||
? "bg-unit-5 h-4"
|
||||
: isZero
|
||||
? "bg-foreground"
|
||||
: isInRange
|
||||
? "bg-unit-5/50"
|
||||
: "bg-foreground/30"
|
||||
}`}
|
||||
/>
|
||||
{(val % 5 === 0 || isHighlighted) && (
|
||||
<span
|
||||
className={`mt-1 block text-center text-[10px] transition-all duration-300 ${
|
||||
isHighlighted
|
||||
? "text-xs font-extrabold text-unit-5"
|
||||
: isZero
|
||||
? "font-bold text-foreground"
|
||||
: "text-muted/70"
|
||||
}`}
|
||||
>
|
||||
{val}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Start marker */}
|
||||
{highlight && (
|
||||
<div
|
||||
className="absolute bottom-16 -translate-x-1/2 transition-all duration-500"
|
||||
style={{ left: `calc(${startX}% + 16px)` }}
|
||||
>
|
||||
<div className="flex flex-col items-center">
|
||||
<span className="rounded-full bg-unit-5 px-2 py-0.5 text-[10px] font-bold text-white shadow-md">
|
||||
Start
|
||||
</span>
|
||||
<div className="h-3 w-0.5 bg-unit-5" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* End marker */}
|
||||
{highlight && highlight.moves > 0 && animate && (
|
||||
<div
|
||||
className="absolute bottom-16 -translate-x-1/2 transition-all duration-700"
|
||||
style={{ left: `calc(${endX}% + 16px)` }}
|
||||
>
|
||||
<div className="flex flex-col items-center">
|
||||
<span className="rounded-full bg-correct px-2 py-0.5 text-[10px] font-bold text-white shadow-md">
|
||||
End: {end}
|
||||
</span>
|
||||
<div className="h-3 w-0.5 bg-correct" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Arrows on edges */}
|
||||
<div className="flex justify-between px-2 text-xs text-muted/50">
|
||||
<span>← negative</span>
|
||||
<span>positive →</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SignRuleCard({ rule, active }: { rule: string; active: boolean }) {
|
||||
return (
|
||||
<div
|
||||
className={`rounded-xl border-2 px-3 py-2 text-center text-sm font-semibold transition-all duration-300 ${
|
||||
active
|
||||
? "border-unit-5 bg-unit-5-light text-unit-5-dark scale-105 shadow-md"
|
||||
: "border-border/40 bg-surface text-muted"
|
||||
}`}
|
||||
>
|
||||
{rule}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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;
|
||||
const isCorrect = parsed === problem.answer;
|
||||
setFeedback(isCorrect ? "correct" : "incorrect");
|
||||
setScore((prev) => ({
|
||||
correct: prev.correct + (isCorrect ? 1 : 0),
|
||||
total: prev.total + 1,
|
||||
}));
|
||||
}
|
||||
|
||||
function nextProblem() {
|
||||
setProblem(generateProblem());
|
||||
setUserAnswer("");
|
||||
setFeedback(null);
|
||||
}
|
||||
|
||||
const displayB = problem.b < 0 ? `(${problem.b})` : `${problem.b}`;
|
||||
|
||||
return (
|
||||
<Card className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs font-bold uppercase tracking-wider text-unit-5">Quick Practice</p>
|
||||
<span className="rounded-full bg-unit-5-light px-3 py-1 text-xs font-bold text-unit-5-dark">
|
||||
{score.correct}/{score.total}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-center gap-3">
|
||||
<span className="text-2xl font-extrabold">
|
||||
{problem.a} {problem.op} {displayB} =
|
||||
</span>
|
||||
<input
|
||||
type="number"
|
||||
value={userAnswer}
|
||||
onChange={(e) => {
|
||||
setUserAnswer(e.target.value);
|
||||
setFeedback(null);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
if (feedback !== null) nextProblem();
|
||||
else checkAnswer();
|
||||
}
|
||||
}}
|
||||
className={`w-20 rounded-lg border-2 px-3 py-2 text-center text-xl font-bold outline-none transition-colors ${
|
||||
feedback === "correct"
|
||||
? "border-correct bg-correct-light"
|
||||
: feedback === "incorrect"
|
||||
? "border-incorrect bg-incorrect-light"
|
||||
: "border-border focus:border-unit-5"
|
||||
}`}
|
||||
placeholder="?"
|
||||
aria-label="Your answer"
|
||||
/>
|
||||
{feedback === null ? (
|
||||
<button
|
||||
onClick={checkAnswer}
|
||||
className="rounded-lg bg-unit-5 px-5 py-2.5 text-sm font-bold text-white transition-colors hover:bg-unit-5-dark"
|
||||
>
|
||||
Check
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={nextProblem}
|
||||
className="rounded-lg bg-foreground px-5 py-2.5 text-sm font-bold text-background transition-colors hover:bg-foreground/80"
|
||||
>
|
||||
Next →
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{feedback === "correct" && (
|
||||
<p className="text-center text-sm font-bold text-correct">Correct! Well done!</p>
|
||||
)}
|
||||
{feedback === "incorrect" && (
|
||||
<p className="text-center text-sm font-bold text-incorrect">
|
||||
Not quite. The answer is {problem.answer}. Try the next one!
|
||||
</p>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export function IntegerAddSubtractExplorer() {
|
||||
const [mode, setMode] = useState<Mode>("number-line");
|
||||
const [op, setOp] = useState<"add" | "subtract">("add");
|
||||
const [inputA, setInputA] = useState("-3");
|
||||
const [inputB, setInputB] = useState("5");
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const [steps, setSteps] = useState<Step[] | null>(null);
|
||||
const [currentStep, setCurrentStep] = useState(0);
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
|
||||
const done = steps ? currentStep >= steps.length - 1 : false;
|
||||
|
||||
function handleGo() {
|
||||
setError("");
|
||||
const a = parseInt(inputA);
|
||||
const b = parseInt(inputB);
|
||||
if (isNaN(a) || isNaN(b)) {
|
||||
setError("Enter valid integers.");
|
||||
return;
|
||||
}
|
||||
if (Math.abs(a) > 15 || Math.abs(b) > 15) {
|
||||
setError("Keep numbers between -15 and 15 for the number line.");
|
||||
return;
|
||||
}
|
||||
const result = op === "add" ? a + b : a - b;
|
||||
if (Math.abs(result) > 15) {
|
||||
setError("Result goes off the number line. Try smaller numbers.");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const s = buildAddSubtractSteps(a, b, op);
|
||||
setSteps(s);
|
||||
setCurrentStep(0);
|
||||
setIsPlaying(false);
|
||||
} catch {
|
||||
setError("Could not compute. Check your inputs.");
|
||||
}
|
||||
}
|
||||
|
||||
const stepForward = useCallback(() => {
|
||||
if (!steps || currentStep >= steps.length - 1) return;
|
||||
setCurrentStep((s) => s + 1);
|
||||
if (currentStep + 1 >= steps.length - 1) setIsPlaying(false);
|
||||
}, [steps, currentStep]);
|
||||
|
||||
const stepBack = useCallback(() => {
|
||||
if (currentStep <= 0) return;
|
||||
setCurrentStep((s) => s - 1);
|
||||
}, [currentStep]);
|
||||
|
||||
const togglePlay = useCallback(() => setIsPlaying((p) => !p), []);
|
||||
|
||||
const reset = useCallback(() => {
|
||||
setSteps(null);
|
||||
setCurrentStep(0);
|
||||
setIsPlaying(false);
|
||||
}, []);
|
||||
|
||||
const step = steps ? steps[currentStep] : null;
|
||||
|
||||
const addRules = [
|
||||
{ rule: "(+) + (+) = (+)", active: step?.label.includes("Positive + Positive") ?? false },
|
||||
{ rule: "(-) + (-) = (-)", active: step?.label.includes("Negative + Negative") ?? false },
|
||||
{ rule: "Different signs? Subtract, keep sign of larger", active: step?.label.includes("Different signs") ?? false },
|
||||
];
|
||||
|
||||
const subRules = [
|
||||
{ rule: "+(−) becomes −", active: step?.label.includes("unlike signs") ?? false },
|
||||
{ rule: "−(−) becomes +", active: step?.label.includes("like signs") ?? false },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Mode toggle */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{(["number-line", "rules"] as Mode[]).map((m) => (
|
||||
<button
|
||||
key={m}
|
||||
onClick={() => {
|
||||
setMode(m);
|
||||
reset();
|
||||
}}
|
||||
className={`rounded-full border-2 px-4 py-2 text-sm font-semibold transition-colors ${
|
||||
mode === m
|
||||
? "border-unit-5 bg-unit-5 text-white"
|
||||
: "border-unit-5/40 text-unit-5 hover:bg-unit-5-light"
|
||||
}`}
|
||||
>
|
||||
{m === "number-line" ? "Number Line" : "Sign Rules"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Operation tabs */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{(["add", "subtract"] as const).map((o) => (
|
||||
<button
|
||||
key={o}
|
||||
onClick={() => {
|
||||
setOp(o);
|
||||
reset();
|
||||
}}
|
||||
className={`rounded-full border-2 px-4 py-2 text-sm font-semibold transition-colors ${
|
||||
op === o
|
||||
? "border-unit-5-dark bg-unit-5-dark text-white"
|
||||
: "border-unit-5/30 text-unit-5-dark hover:bg-unit-5-light"
|
||||
}`}
|
||||
>
|
||||
{o === "add" ? "Add (+)" : "Subtract (−)"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Input Card */}
|
||||
<Card>
|
||||
<p className="mb-3 text-xs font-bold uppercase tracking-wider text-unit-5">
|
||||
Enter two integers
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<input
|
||||
type="number"
|
||||
value={inputA}
|
||||
onChange={(e) => setInputA(e.target.value)}
|
||||
className="w-20 rounded-lg border-2 border-border bg-surface px-3 py-2 text-center text-lg font-bold outline-none focus:border-unit-5"
|
||||
aria-label="First integer"
|
||||
/>
|
||||
<span className="text-xl font-bold text-muted">
|
||||
{op === "add" ? "+" : "−"}
|
||||
</span>
|
||||
<input
|
||||
type="number"
|
||||
value={inputB}
|
||||
onChange={(e) => setInputB(e.target.value)}
|
||||
className="w-20 rounded-lg border-2 border-border bg-surface px-3 py-2 text-center text-lg font-bold outline-none focus:border-unit-5"
|
||||
aria-label="Second integer"
|
||||
/>
|
||||
<button
|
||||
onClick={handleGo}
|
||||
className="rounded-lg bg-unit-5 px-6 py-2.5 text-sm font-bold text-white transition-colors hover:bg-unit-5-dark"
|
||||
>
|
||||
Go →
|
||||
</button>
|
||||
</div>
|
||||
{error && <p className="mt-2 text-sm text-incorrect">{error}</p>}
|
||||
</Card>
|
||||
|
||||
{/* Sign Rules Reference */}
|
||||
{mode === "rules" && (
|
||||
<div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
|
||||
{(op === "add" ? addRules : subRules).map((r) => (
|
||||
<SignRuleCard key={r.rule} rule={r.rule} active={r.active} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Display Card with Number Line */}
|
||||
<Card className="flex min-h-[280px] flex-col items-center justify-center gap-4 p-6">
|
||||
{!step ? (
|
||||
<p className="text-muted/50">
|
||||
Enter integers above and click <strong>Go</strong>
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-sm font-medium text-muted">{step.label}</p>
|
||||
<MathDisplay math={step.math} className="text-2xl" />
|
||||
{mode === "number-line" && (
|
||||
<NumberLine
|
||||
highlight={step.numberLineHighlight}
|
||||
animate={currentStep > 0}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Controls */}
|
||||
<Card className="p-4">
|
||||
<StepControls
|
||||
currentStep={currentStep + 1}
|
||||
totalSteps={steps?.length ?? 0}
|
||||
isPlaying={isPlaying}
|
||||
onStepForward={stepForward}
|
||||
onStepBack={stepBack}
|
||||
onTogglePlay={togglePlay}
|
||||
onReset={reset}
|
||||
canStepForward={!!steps && !done}
|
||||
canStepBack={!!steps && currentStep > 0}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* Result */}
|
||||
<Card className="flex min-h-[80px] flex-col items-center justify-center gap-1.5 text-center">
|
||||
{!done || !steps ? (
|
||||
<p className="text-sm text-muted/40">Result will appear here when steps are complete</p>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-xs uppercase tracking-wider text-muted">Answer</p>
|
||||
<div className="text-3xl font-extrabold max-sm:text-2xl">
|
||||
<MathDisplay math={steps[steps.length - 1].math} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Quick Practice */}
|
||||
<QuickPractice />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
708
components/explorers/integer-multiply-divide-explorer.tsx
Normal file
708
components/explorers/integer-multiply-divide-explorer.tsx
Normal file
@@ -0,0 +1,708 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { StepControls } from "./step-controls";
|
||||
import { MathDisplay } from "@/components/math/math-display";
|
||||
|
||||
type Tab = "multiply" | "divide" | "thermometer";
|
||||
|
||||
interface Step {
|
||||
label: string;
|
||||
math: string;
|
||||
signVisual?: { signA: "+" | "-"; signB: "+" | "-"; resultSign: "+" | "-" };
|
||||
thermometer?: { startTemp: number; change: number; endTemp: number };
|
||||
}
|
||||
|
||||
function getSign(n: number): "+" | "-" {
|
||||
return n >= 0 ? "+" : "-";
|
||||
}
|
||||
|
||||
function buildMultiplySteps(a: number, b: number): Step[] {
|
||||
const steps: Step[] = [];
|
||||
const result = a * b;
|
||||
const signA = getSign(a);
|
||||
const signB = getSign(b);
|
||||
const signR = getSign(result);
|
||||
|
||||
steps.push({
|
||||
label: "Start with the multiplication",
|
||||
math: `${a < 0 ? `(${a})` : a} \\times ${b < 0 ? `(${b})` : b}`,
|
||||
});
|
||||
|
||||
// Step: Multiply the absolute values
|
||||
steps.push({
|
||||
label: `First, multiply the absolute values: ${Math.abs(a)} × ${Math.abs(b)}`,
|
||||
math: `|${a}| \\times |${b}| = ${Math.abs(a)} \\times ${Math.abs(b)} = ${Math.abs(result)}`,
|
||||
});
|
||||
|
||||
// Step: Determine the sign
|
||||
const sameSign = (a >= 0 && b >= 0) || (a < 0 && b < 0);
|
||||
if (sameSign) {
|
||||
steps.push({
|
||||
label: `Same signs (${signA} × ${signB}): the result is POSITIVE`,
|
||||
math: `(${signA}) \\times (${signB}) = (+)`,
|
||||
signVisual: { signA, signB, resultSign: "+" },
|
||||
});
|
||||
} else {
|
||||
steps.push({
|
||||
label: `Different signs (${signA} × ${signB}): the result is NEGATIVE`,
|
||||
math: `(${signA}) \\times (${signB}) = (-)`,
|
||||
signVisual: { signA, signB, resultSign: "-" },
|
||||
});
|
||||
}
|
||||
|
||||
// Step: Combine
|
||||
steps.push({
|
||||
label: "Combine the magnitude and sign",
|
||||
math: `${a < 0 ? `(${a})` : a} \\times ${b < 0 ? `(${b})` : b} = ${result}`,
|
||||
signVisual: { signA, signB, resultSign: signR },
|
||||
});
|
||||
|
||||
// Story time for negative × negative
|
||||
if (a < 0 && b < 0) {
|
||||
steps.push({
|
||||
label: "Why does negative × negative = positive? Think of it like a double-negative in English!",
|
||||
math: `\\text{\"Do NOT not eat!\"} = \\text{\"Eat!\"} \\quad (-) \\times (-) = (+)`,
|
||||
signVisual: { signA: "-", signB: "-", resultSign: "+" },
|
||||
});
|
||||
}
|
||||
|
||||
return steps;
|
||||
}
|
||||
|
||||
function buildDivideSteps(a: number, b: number): Step[] {
|
||||
const steps: Step[] = [];
|
||||
const result = a / b;
|
||||
const signA = getSign(a);
|
||||
const signB = getSign(b);
|
||||
const signR = getSign(result);
|
||||
const isWhole = Number.isInteger(result);
|
||||
const displayResult = isWhole ? result.toString() : result.toFixed(2);
|
||||
|
||||
steps.push({
|
||||
label: "Start with the division",
|
||||
math: `${a < 0 ? `(${a})` : a} \\div ${b < 0 ? `(${b})` : b}`,
|
||||
});
|
||||
|
||||
steps.push({
|
||||
label: `First, divide the absolute values: ${Math.abs(a)} ÷ ${Math.abs(b)}`,
|
||||
math: `|${a}| \\div |${b}| = ${Math.abs(a)} \\div ${Math.abs(b)} = ${isWhole ? Math.abs(result) : Math.abs(result).toFixed(2)}`,
|
||||
});
|
||||
|
||||
const sameSign = (a >= 0 && b >= 0) || (a < 0 && b < 0);
|
||||
if (sameSign) {
|
||||
steps.push({
|
||||
label: `Same signs (${signA} ÷ ${signB}): the result is POSITIVE`,
|
||||
math: `(${signA}) \\div (${signB}) = (+)`,
|
||||
signVisual: { signA, signB, resultSign: "+" },
|
||||
});
|
||||
} else {
|
||||
steps.push({
|
||||
label: `Different signs (${signA} ÷ ${signB}): the result is NEGATIVE`,
|
||||
math: `(${signA}) \\div (${signB}) = (-)`,
|
||||
signVisual: { signA, signB, resultSign: "-" },
|
||||
});
|
||||
}
|
||||
|
||||
steps.push({
|
||||
label: "Combine the magnitude and sign",
|
||||
math: `${a < 0 ? `(${a})` : a} \\div ${b < 0 ? `(${b})` : b} = ${displayResult}`,
|
||||
signVisual: { signA, signB, resultSign: signR },
|
||||
});
|
||||
|
||||
return steps;
|
||||
}
|
||||
|
||||
function buildThermometerSteps(startTemp: number, change: number): Step[] {
|
||||
const steps: Step[] = [];
|
||||
const endTemp = startTemp + change;
|
||||
const direction = change >= 0 ? "rose" : "dropped";
|
||||
const absChange = Math.abs(change);
|
||||
|
||||
steps.push({
|
||||
label: "Read the starting temperature on the thermometer",
|
||||
math: `\\text{Starting temperature: } ${startTemp}°C`,
|
||||
thermometer: { startTemp, change: 0, endTemp: startTemp },
|
||||
});
|
||||
|
||||
steps.push({
|
||||
label: `The temperature ${direction} by ${absChange}°C`,
|
||||
math: change >= 0
|
||||
? `${startTemp}°C + ${absChange}°C`
|
||||
: `${startTemp}°C - ${absChange}°C`,
|
||||
thermometer: { startTemp, change: 0, endTemp: startTemp },
|
||||
});
|
||||
|
||||
steps.push({
|
||||
label: change >= 0 ? "Rising temperature means we ADD" : "Dropping temperature means we SUBTRACT",
|
||||
math: `${startTemp} + (${change}) = ${endTemp}`,
|
||||
thermometer: { startTemp, change, endTemp },
|
||||
});
|
||||
|
||||
steps.push({
|
||||
label: `The new temperature is ${endTemp}°C`,
|
||||
math: `\\text{New temperature: } ${endTemp}°C`,
|
||||
thermometer: { startTemp, change, endTemp },
|
||||
});
|
||||
|
||||
return steps;
|
||||
}
|
||||
|
||||
function SignRuleGrid({ visual, operation }: { visual?: Step["signVisual"]; operation: "×" | "÷" }) {
|
||||
const rules = [
|
||||
{ a: "+", b: "+", result: "+", example: operation === "×" ? "3 × 2 = 6" : "6 ÷ 2 = 3" },
|
||||
{ a: "-", b: "-", result: "+", example: operation === "×" ? "(-3) × (-2) = 6" : "(-6) ÷ (-2) = 3" },
|
||||
{ a: "+", b: "-", result: "-", example: operation === "×" ? "3 × (-2) = -6" : "6 ÷ (-2) = -3" },
|
||||
{ a: "-", b: "+", result: "-", example: operation === "×" ? "(-3) × 2 = -6" : "(-6) ÷ 2 = -3" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
|
||||
{rules.map((r) => {
|
||||
const isActive = visual && visual.signA === r.a && visual.signB === r.b;
|
||||
return (
|
||||
<div
|
||||
key={`${r.a}${r.b}`}
|
||||
className={`rounded-xl border-2 p-3 text-center transition-all duration-300 ${
|
||||
isActive
|
||||
? "border-unit-5 bg-unit-5-light shadow-md scale-105"
|
||||
: "border-border/40 bg-surface"
|
||||
}`}
|
||||
>
|
||||
<p className={`text-lg font-extrabold ${isActive ? "text-unit-5-dark" : "text-foreground"}`}>
|
||||
({r.a}) {operation} ({r.b}) = ({r.result})
|
||||
</p>
|
||||
<p className={`mt-1 text-xs ${isActive ? "text-unit-5-dark/70" : "text-muted"}`}>
|
||||
{r.example}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Thermometer({ data }: { data?: Step["thermometer"] }) {
|
||||
const minTemp = -20;
|
||||
const maxTemp = 30;
|
||||
const range = maxTemp - minTemp;
|
||||
|
||||
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 = [];
|
||||
for (let t = minTemp; t <= maxTemp; t += 5) {
|
||||
ticks.push(t);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex items-end gap-6">
|
||||
{/* Thermometer */}
|
||||
<div className="relative flex flex-col items-center">
|
||||
<div className="relative h-64 w-8 overflow-hidden rounded-t-full border-2 border-foreground/30 bg-gradient-to-b from-red-50 to-blue-50">
|
||||
{/* Mercury fill */}
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 rounded-t-sm transition-all duration-700"
|
||||
style={{
|
||||
height: `${Math.max(0, Math.min(100, fillY))}%`,
|
||||
background: endTemp >= 0
|
||||
? `linear-gradient(to top, #dc2626, #f97316)`
|
||||
: `linear-gradient(to top, #2563eb, #60a5fa)`,
|
||||
}}
|
||||
/>
|
||||
{/* Tick marks */}
|
||||
{ticks.map((t) => {
|
||||
const y = ((t - minTemp) / range) * 100;
|
||||
return (
|
||||
<div
|
||||
key={t}
|
||||
className="absolute left-0 right-0 flex items-center"
|
||||
style={{ bottom: `${y}%`, transform: "translateY(50%)" }}
|
||||
>
|
||||
<div className={`h-px flex-1 ${t === 0 ? "bg-foreground" : "bg-foreground/20"}`} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{/* Bulb */}
|
||||
<div className="relative -mt-1 flex h-12 w-12 items-center justify-center rounded-full border-2 border-foreground/30 bg-red-500">
|
||||
<span className="text-[8px] font-bold text-white">°C</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scale labels */}
|
||||
<div className="relative h-64">
|
||||
{ticks.map((t) => {
|
||||
const y = ((t - minTemp) / range) * 100;
|
||||
const isStart = t === startTemp;
|
||||
const isEnd = data && data.change !== 0 && t === endTemp;
|
||||
return (
|
||||
<div
|
||||
key={t}
|
||||
className="absolute flex items-center gap-1"
|
||||
style={{ bottom: `${y}%`, transform: "translateY(50%)" }}
|
||||
>
|
||||
<span
|
||||
className={`text-xs transition-all duration-300 ${
|
||||
isEnd
|
||||
? "font-extrabold text-correct text-sm"
|
||||
: isStart
|
||||
? "font-bold text-unit-5"
|
||||
: t === 0
|
||||
? "font-semibold text-foreground"
|
||||
: "text-muted/60"
|
||||
}`}
|
||||
>
|
||||
{t}°C
|
||||
</span>
|
||||
{isStart && (
|
||||
<span className="rounded bg-unit-5 px-1.5 py-0.5 text-[9px] font-bold text-white">
|
||||
START
|
||||
</span>
|
||||
)}
|
||||
{isEnd && (
|
||||
<span className="rounded bg-correct px-1.5 py-0.5 text-[9px] font-bold text-white">
|
||||
END
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ThermometerPractice() {
|
||||
const scenarios = [
|
||||
{ city: "London", startTemp: -3, change: 7, question: "The temperature rose by 7°C. What is the new temperature?" },
|
||||
{ city: "Moscow", startTemp: -12, change: -5, question: "The temperature dropped by 5°C. What is the new temperature?" },
|
||||
{ city: "Kingston", startTemp: 28, change: -10, question: "The temperature dropped by 10°C. What is the new temperature?" },
|
||||
{ city: "Ottawa", startTemp: -8, change: 15, question: "The temperature rose by 15°C. What is the new temperature?" },
|
||||
{ city: "Reykjavik", startTemp: -1, change: -6, question: "The temperature dropped by 6°C. What is the new temperature?" },
|
||||
];
|
||||
|
||||
const [scenarioIdx, setScenarioIdx] = useState(0);
|
||||
const [userAnswer, setUserAnswer] = useState("");
|
||||
const [feedback, setFeedback] = useState<"correct" | "incorrect" | null>(null);
|
||||
|
||||
const scenario = scenarios[scenarioIdx];
|
||||
const correctAnswer = scenario.startTemp + scenario.change;
|
||||
|
||||
function check() {
|
||||
const parsed = parseInt(userAnswer);
|
||||
if (isNaN(parsed)) return;
|
||||
setFeedback(parsed === correctAnswer ? "correct" : "incorrect");
|
||||
}
|
||||
|
||||
function next() {
|
||||
setScenarioIdx((i) => (i + 1) % scenarios.length);
|
||||
setUserAnswer("");
|
||||
setFeedback(null);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="space-y-4">
|
||||
<p className="text-xs font-bold uppercase tracking-wider text-unit-5">
|
||||
Real-World Challenge
|
||||
</p>
|
||||
<div className="rounded-xl border-2 border-unit-5/20 bg-unit-5-light/50 p-4">
|
||||
<p className="text-sm font-bold text-unit-5-dark">
|
||||
In {scenario.city}, the temperature is {scenario.startTemp}°C.
|
||||
</p>
|
||||
<p className="mt-1 text-sm text-unit-5-dark/80">{scenario.question}</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<input
|
||||
type="number"
|
||||
value={userAnswer}
|
||||
onChange={(e) => {
|
||||
setUserAnswer(e.target.value);
|
||||
setFeedback(null);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
if (feedback !== null) next();
|
||||
else check();
|
||||
}
|
||||
}}
|
||||
className={`w-24 rounded-lg border-2 px-3 py-2 text-center text-lg font-bold outline-none transition-colors ${
|
||||
feedback === "correct"
|
||||
? "border-correct bg-correct-light"
|
||||
: feedback === "incorrect"
|
||||
? "border-incorrect bg-incorrect-light"
|
||||
: "border-border focus:border-unit-5"
|
||||
}`}
|
||||
placeholder="°C"
|
||||
aria-label="Temperature answer"
|
||||
/>
|
||||
<span className="text-sm font-semibold text-muted">°C</span>
|
||||
{feedback === null ? (
|
||||
<button
|
||||
onClick={check}
|
||||
className="rounded-lg bg-unit-5 px-5 py-2.5 text-sm font-bold text-white transition-colors hover:bg-unit-5-dark"
|
||||
>
|
||||
Check
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={next}
|
||||
className="rounded-lg bg-foreground px-5 py-2.5 text-sm font-bold text-background transition-colors hover:bg-foreground/80"
|
||||
>
|
||||
Next City →
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{feedback === "correct" && (
|
||||
<p className="text-sm font-bold text-correct">
|
||||
Correct! {scenario.startTemp} + ({scenario.change}) = {correctAnswer}°C
|
||||
</p>
|
||||
)}
|
||||
{feedback === "incorrect" && (
|
||||
<p className="text-sm font-bold text-incorrect">
|
||||
Not quite. {scenario.startTemp} + ({scenario.change}) = {correctAnswer}°C
|
||||
</p>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
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;
|
||||
const isCorrect = parsed === problem.answer;
|
||||
setFeedback(isCorrect ? "correct" : "incorrect");
|
||||
setScore((prev) => ({
|
||||
correct: prev.correct + (isCorrect ? 1 : 0),
|
||||
total: prev.total + 1,
|
||||
}));
|
||||
}
|
||||
|
||||
function next() {
|
||||
setProblem(generateProblem());
|
||||
setUserAnswer("");
|
||||
setFeedback(null);
|
||||
}
|
||||
|
||||
const displayA = problem.a < 0 ? `(${problem.a})` : `${problem.a}`;
|
||||
const displayB = problem.b < 0 ? `(${problem.b})` : `${problem.b}`;
|
||||
|
||||
return (
|
||||
<Card className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs font-bold uppercase tracking-wider text-unit-5">Quick Practice</p>
|
||||
<span className="rounded-full bg-unit-5-light px-3 py-1 text-xs font-bold text-unit-5-dark">
|
||||
{score.correct}/{score.total}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center justify-center gap-3">
|
||||
<span className="text-2xl font-extrabold">
|
||||
{displayA} {problem.op} {displayB} =
|
||||
</span>
|
||||
<input
|
||||
type="number"
|
||||
value={userAnswer}
|
||||
onChange={(e) => {
|
||||
setUserAnswer(e.target.value);
|
||||
setFeedback(null);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
if (feedback !== null) next();
|
||||
else check();
|
||||
}
|
||||
}}
|
||||
className={`w-20 rounded-lg border-2 px-3 py-2 text-center text-xl font-bold outline-none transition-colors ${
|
||||
feedback === "correct"
|
||||
? "border-correct bg-correct-light"
|
||||
: feedback === "incorrect"
|
||||
? "border-incorrect bg-incorrect-light"
|
||||
: "border-border focus:border-unit-5"
|
||||
}`}
|
||||
placeholder="?"
|
||||
aria-label="Your answer"
|
||||
/>
|
||||
{feedback === null ? (
|
||||
<button onClick={check} className="rounded-lg bg-unit-5 px-5 py-2.5 text-sm font-bold text-white transition-colors hover:bg-unit-5-dark">
|
||||
Check
|
||||
</button>
|
||||
) : (
|
||||
<button onClick={next} className="rounded-lg bg-foreground px-5 py-2.5 text-sm font-bold text-background transition-colors hover:bg-foreground/80">
|
||||
Next →
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{feedback === "correct" && (
|
||||
<p className="text-center text-sm font-bold text-correct">Correct!</p>
|
||||
)}
|
||||
{feedback === "incorrect" && (
|
||||
<p className="text-center text-sm font-bold text-incorrect">
|
||||
Not quite. The answer is {problem.answer}.
|
||||
</p>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export function IntegerMultiplyDivideExplorer() {
|
||||
const [tab, setTab] = useState<Tab>("multiply");
|
||||
const [inputA, setInputA] = useState("-3");
|
||||
const [inputB, setInputB] = useState("5");
|
||||
const [startTemp, setStartTemp] = useState("-3");
|
||||
const [tempChange, setTempChange] = useState("7");
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const [steps, setSteps] = useState<Step[] | null>(null);
|
||||
const [currentStep, setCurrentStep] = useState(0);
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
|
||||
const done = steps ? currentStep >= steps.length - 1 : false;
|
||||
|
||||
function handleGo() {
|
||||
setError("");
|
||||
|
||||
if (tab === "thermometer") {
|
||||
const st = parseInt(startTemp);
|
||||
const ch = parseInt(tempChange);
|
||||
if (isNaN(st) || isNaN(ch)) {
|
||||
setError("Enter valid integers.");
|
||||
return;
|
||||
}
|
||||
if (Math.abs(st) > 20 || Math.abs(ch) > 30) {
|
||||
setError("Keep temperatures reasonable (-20 to 30).");
|
||||
return;
|
||||
}
|
||||
const s = buildThermometerSteps(st, ch);
|
||||
setSteps(s);
|
||||
setCurrentStep(0);
|
||||
setIsPlaying(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const a = parseInt(inputA);
|
||||
const b = parseInt(inputB);
|
||||
if (isNaN(a) || isNaN(b)) {
|
||||
setError("Enter valid integers.");
|
||||
return;
|
||||
}
|
||||
if (tab === "divide" && b === 0) {
|
||||
setError("Cannot divide by zero!");
|
||||
return;
|
||||
}
|
||||
if (Math.abs(a) > 99 || Math.abs(b) > 99) {
|
||||
setError("Keep numbers under 100.");
|
||||
return;
|
||||
}
|
||||
if (tab === "divide" && !Number.isInteger(a / b)) {
|
||||
setError("Choose numbers that divide evenly for now.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const s = tab === "multiply" ? buildMultiplySteps(a, b) : buildDivideSteps(a, b);
|
||||
setSteps(s);
|
||||
setCurrentStep(0);
|
||||
setIsPlaying(false);
|
||||
} catch {
|
||||
setError("Could not compute. Check your inputs.");
|
||||
}
|
||||
}
|
||||
|
||||
const stepForward = useCallback(() => {
|
||||
if (!steps || currentStep >= steps.length - 1) return;
|
||||
setCurrentStep((s) => s + 1);
|
||||
if (currentStep + 1 >= steps.length - 1) setIsPlaying(false);
|
||||
}, [steps, currentStep]);
|
||||
|
||||
const stepBack = useCallback(() => {
|
||||
if (currentStep <= 0) return;
|
||||
setCurrentStep((s) => s - 1);
|
||||
}, [currentStep]);
|
||||
|
||||
const togglePlay = useCallback(() => setIsPlaying((p) => !p), []);
|
||||
|
||||
const reset = useCallback(() => {
|
||||
setSteps(null);
|
||||
setCurrentStep(0);
|
||||
setIsPlaying(false);
|
||||
}, []);
|
||||
|
||||
const step = steps ? steps[currentStep] : null;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Tab selector */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{(["multiply", "divide", "thermometer"] as Tab[]).map((t) => (
|
||||
<button
|
||||
key={t}
|
||||
onClick={() => {
|
||||
setTab(t);
|
||||
reset();
|
||||
}}
|
||||
className={`rounded-full border-2 px-4 py-2 text-sm font-semibold transition-colors ${
|
||||
tab === t
|
||||
? "border-unit-5 bg-unit-5 text-white"
|
||||
: "border-unit-5/40 text-unit-5 hover:bg-unit-5-light"
|
||||
}`}
|
||||
>
|
||||
{t === "multiply"
|
||||
? "Multiply (×)"
|
||||
: t === "divide"
|
||||
? "Divide (÷)"
|
||||
: "Thermometer"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Input Card */}
|
||||
<Card>
|
||||
<p className="mb-3 text-xs font-bold uppercase tracking-wider text-unit-5">
|
||||
{tab === "thermometer" ? "Enter temperature scenario" : "Enter two integers"}
|
||||
</p>
|
||||
|
||||
{tab === "thermometer" ? (
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<div className="flex flex-col">
|
||||
<label className="mb-1 text-xs font-semibold text-muted">Start temp (°C)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={startTemp}
|
||||
onChange={(e) => setStartTemp(e.target.value)}
|
||||
className="w-24 rounded-lg border-2 border-border bg-surface px-3 py-2 text-center text-lg font-bold outline-none focus:border-unit-5"
|
||||
aria-label="Starting temperature"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<label className="mb-1 text-xs font-semibold text-muted">Change (°C)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={tempChange}
|
||||
onChange={(e) => setTempChange(e.target.value)}
|
||||
className="w-24 rounded-lg border-2 border-border bg-surface px-3 py-2 text-center text-lg font-bold outline-none focus:border-unit-5"
|
||||
aria-label="Temperature change"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleGo}
|
||||
className="mt-5 rounded-lg bg-unit-5 px-6 py-2.5 text-sm font-bold text-white transition-colors hover:bg-unit-5-dark"
|
||||
>
|
||||
Go →
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<input
|
||||
type="number"
|
||||
value={inputA}
|
||||
onChange={(e) => setInputA(e.target.value)}
|
||||
className="w-20 rounded-lg border-2 border-border bg-surface px-3 py-2 text-center text-lg font-bold outline-none focus:border-unit-5"
|
||||
aria-label="First integer"
|
||||
/>
|
||||
<span className="text-xl font-bold text-muted">
|
||||
{tab === "multiply" ? "×" : "÷"}
|
||||
</span>
|
||||
<input
|
||||
type="number"
|
||||
value={inputB}
|
||||
onChange={(e) => setInputB(e.target.value)}
|
||||
className="w-20 rounded-lg border-2 border-border bg-surface px-3 py-2 text-center text-lg font-bold outline-none focus:border-unit-5"
|
||||
aria-label="Second integer"
|
||||
/>
|
||||
<button
|
||||
onClick={handleGo}
|
||||
className="rounded-lg bg-unit-5 px-6 py-2.5 text-sm font-bold text-white transition-colors hover:bg-unit-5-dark"
|
||||
>
|
||||
Go →
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{error && <p className="mt-2 text-sm text-incorrect">{error}</p>}
|
||||
</Card>
|
||||
|
||||
{/* Sign Rules Grid (for multiply/divide) */}
|
||||
{tab !== "thermometer" && (
|
||||
<SignRuleGrid
|
||||
visual={step?.signVisual}
|
||||
operation={tab === "multiply" ? "×" : "÷"}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Display Card */}
|
||||
<Card className="flex min-h-[300px] flex-col items-center justify-center gap-4 p-6">
|
||||
{!step ? (
|
||||
<p className="text-muted/50">
|
||||
Enter values above and click <strong>Go</strong>
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-sm font-medium text-muted">{step.label}</p>
|
||||
<MathDisplay math={step.math} className="text-2xl" />
|
||||
{step.thermometer && <Thermometer data={step.thermometer} />}
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Controls */}
|
||||
<Card className="p-4">
|
||||
<StepControls
|
||||
currentStep={currentStep + 1}
|
||||
totalSteps={steps?.length ?? 0}
|
||||
isPlaying={isPlaying}
|
||||
onStepForward={stepForward}
|
||||
onStepBack={stepBack}
|
||||
onTogglePlay={togglePlay}
|
||||
onReset={reset}
|
||||
canStepForward={!!steps && !done}
|
||||
canStepBack={!!steps && currentStep > 0}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* Result */}
|
||||
<Card className="flex min-h-[80px] flex-col items-center justify-center gap-1.5 text-center">
|
||||
{!done || !steps ? (
|
||||
<p className="text-sm text-muted/40">Result will appear here when steps are complete</p>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-xs uppercase tracking-wider text-muted">Answer</p>
|
||||
<div className="text-3xl font-extrabold max-sm:text-2xl">
|
||||
<MathDisplay math={steps[steps.length - 1].math} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Practice sections */}
|
||||
{tab === "thermometer" ? <ThermometerPractice /> : <MultiplyDividePractice />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -11,6 +11,7 @@ const unitColorMap = {
|
||||
"unit-2": "text-unit-2-dark",
|
||||
"unit-3": "text-unit-3-dark",
|
||||
"unit-4": "text-unit-4-dark",
|
||||
"unit-5": "text-unit-5-dark",
|
||||
};
|
||||
|
||||
const unitDotColor = {
|
||||
@@ -18,6 +19,7 @@ const unitDotColor = {
|
||||
"unit-2": "bg-unit-2",
|
||||
"unit-3": "bg-unit-3",
|
||||
"unit-4": "bg-unit-4",
|
||||
"unit-5": "bg-unit-5",
|
||||
};
|
||||
|
||||
export function MobileNav() {
|
||||
|
||||
@@ -31,6 +31,12 @@ const unitColorMap = {
|
||||
heading: "text-unit-4-dark",
|
||||
hoverBg: "hover:bg-unit-4-light/50",
|
||||
},
|
||||
"unit-5": {
|
||||
active: "bg-unit-5-light text-unit-5-dark border-unit-5/20",
|
||||
dot: "bg-unit-5",
|
||||
heading: "text-unit-5-dark",
|
||||
hoverBg: "hover:bg-unit-5-light/50",
|
||||
},
|
||||
};
|
||||
|
||||
export function Sidebar() {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import { type HTMLAttributes } from "react";
|
||||
|
||||
type BadgeVariant = "default" | "unit-1" | "unit-2" | "unit-3" | "unit-4";
|
||||
type BadgeVariant = "default" | "unit-1" | "unit-2" | "unit-3" | "unit-4" | "unit-5";
|
||||
|
||||
interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
||||
variant?: BadgeVariant;
|
||||
@@ -13,6 +13,7 @@ const variantStyles: Record<BadgeVariant, string> = {
|
||||
"unit-2": "border border-unit-2/20 bg-unit-2-light text-unit-2-dark",
|
||||
"unit-3": "border border-unit-3/20 bg-unit-3-light text-unit-3-dark",
|
||||
"unit-4": "border border-unit-4/20 bg-unit-4-light text-unit-4-dark",
|
||||
"unit-5": "border border-unit-5/20 bg-unit-5-light text-unit-5-dark",
|
||||
};
|
||||
|
||||
export function Badge({ variant = "default", className, children, ...props }: BadgeProps) {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import { type ButtonHTMLAttributes } from "react";
|
||||
|
||||
type ButtonVariant = "primary" | "secondary" | "ghost" | "unit-1" | "unit-2" | "unit-3" | "unit-4";
|
||||
type ButtonVariant = "primary" | "secondary" | "ghost" | "unit-1" | "unit-2" | "unit-3" | "unit-4" | "unit-5";
|
||||
type ButtonSize = "sm" | "md" | "lg";
|
||||
|
||||
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
@@ -17,6 +17,7 @@ const variantStyles: Record<ButtonVariant, string> = {
|
||||
"unit-2": "bg-unit-2 text-white shadow-[var(--shadow-sm)] hover:bg-unit-2-dark hover:shadow-[var(--shadow-lg)]",
|
||||
"unit-3": "bg-unit-3 text-white shadow-[var(--shadow-sm)] hover:bg-unit-3-dark hover:shadow-[var(--shadow-lg)]",
|
||||
"unit-4": "bg-unit-4 text-white shadow-[var(--shadow-sm)] hover:bg-unit-4-dark hover:shadow-[var(--shadow-lg)]",
|
||||
"unit-5": "bg-unit-5 text-white shadow-[var(--shadow-sm)] hover:bg-unit-5-dark hover:shadow-[var(--shadow-lg)]",
|
||||
};
|
||||
|
||||
const sizeStyles: Record<ButtonSize, string> = {
|
||||
|
||||
@@ -2,7 +2,7 @@ import { cn } from "@/lib/utils";
|
||||
import { type HTMLAttributes } from "react";
|
||||
|
||||
interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
||||
accent?: "unit-1" | "unit-2" | "unit-3" | "unit-4";
|
||||
accent?: "unit-1" | "unit-2" | "unit-3" | "unit-4" | "unit-5";
|
||||
hover?: boolean;
|
||||
}
|
||||
|
||||
@@ -11,6 +11,7 @@ const accentStyles = {
|
||||
"unit-2": "border-l-4 border-l-unit-2",
|
||||
"unit-3": "border-l-4 border-l-unit-3",
|
||||
"unit-4": "border-l-4 border-l-unit-4",
|
||||
"unit-5": "border-l-4 border-l-unit-5",
|
||||
};
|
||||
|
||||
export function Card({
|
||||
|
||||
Reference in New Issue
Block a user