291 lines
11 KiB
TypeScript
291 lines
11 KiB
TypeScript
import {
|
||
ArrowRight,
|
||
Layers,
|
||
Grid3X3,
|
||
Hash,
|
||
Sigma,
|
||
BookOpen,
|
||
} from "lucide-react";
|
||
import LessonShell, {
|
||
ConceptCard,
|
||
FormulaBox,
|
||
ExampleCard,
|
||
TipCard,
|
||
PracticeFromDataset,
|
||
} from "../../../components/lessons/LessonShell";
|
||
import FactoringWidget from "../../../components/lessons/FactoringWidget";
|
||
import RadicalWidget from "../../../components/lessons/RadicalWidget";
|
||
import {
|
||
EQUIV_EXPR_EASY,
|
||
EQUIV_EXPR_MEDIUM,
|
||
} from "../../../data/math/equivalent-expressions";
|
||
|
||
interface LessonProps {
|
||
onFinish?: () => void;
|
||
}
|
||
const SECTIONS = [
|
||
{ title: "Distributive Property", icon: ArrowRight },
|
||
{ title: "Combining Like Terms", icon: Layers },
|
||
{ title: "Factoring Techniques", icon: Grid3X3 },
|
||
{ title: "Special Products", icon: Hash },
|
||
{ title: "Exponents & Radicals", icon: Sigma },
|
||
{ title: "Practice & Quiz", icon: BookOpen },
|
||
];
|
||
|
||
export default function EquivalentExpressionsLesson({ onFinish }: LessonProps) {
|
||
return (
|
||
<LessonShell
|
||
title="Equivalent Expressions"
|
||
sections={SECTIONS}
|
||
color="violet"
|
||
onFinish={onFinish}
|
||
>
|
||
{/* Section 1: Distributive Property */}
|
||
<div>
|
||
<h2 className="text-3xl font-extrabold text-slate-900 mb-6">
|
||
Distributive Property
|
||
</h2>
|
||
<ConceptCard color="violet">
|
||
<p className="text-slate-700 leading-relaxed">
|
||
The distributive property lets you multiply a factor across terms
|
||
inside parentheses. It also works in reverse — factoring out a
|
||
common factor.
|
||
</p>
|
||
<FormulaBox>a(b + c) = ab + ac</FormulaBox>
|
||
</ConceptCard>
|
||
<ExampleCard title="Example: Distribute" color="violet">
|
||
<p>3(2x − 5) = 6x − 15</p>
|
||
</ExampleCard>
|
||
<div className="mt-4">
|
||
<ExampleCard title="Example: Distribute a Negative" color="violet">
|
||
<p>−2(x² − 4x + 1)</p>
|
||
<p className="text-slate-500">= −2x² + 8x − 2</p>
|
||
</ExampleCard>
|
||
</div>
|
||
<div className="mt-4">
|
||
<TipCard type="warning">
|
||
<p className="text-slate-700">
|
||
Watch for distributing negatives — a very common source of SAT
|
||
errors. Remember: −(a − b) = −a + b, not −a − b.
|
||
</p>
|
||
</TipCard>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Section 2: Combining Like Terms */}
|
||
<div>
|
||
<h2 className="text-3xl font-extrabold text-slate-900 mb-6">
|
||
Combining Like Terms
|
||
</h2>
|
||
<ConceptCard color="violet">
|
||
<p className="text-slate-700 leading-relaxed">
|
||
<strong>Like terms</strong> have the same variable raised to the
|
||
same power. Only the coefficients can differ. You can add or
|
||
subtract like terms by combining their coefficients.
|
||
</p>
|
||
<div className="grid md:grid-cols-2 gap-3 mt-4">
|
||
<div className="bg-emerald-50 border border-emerald-200 rounded-xl p-3">
|
||
<p className="font-bold text-emerald-800 text-sm mb-1">
|
||
Like Terms ✓
|
||
</p>
|
||
<p className="text-sm text-slate-700">
|
||
3x² and −5x², 7xy and 2xy
|
||
</p>
|
||
</div>
|
||
<div className="bg-rose-50 border border-rose-200 rounded-xl p-3">
|
||
<p className="font-bold text-rose-800 text-sm mb-1">
|
||
Unlike Terms ✗
|
||
</p>
|
||
<p className="text-sm text-slate-700">3x² and 3x, 2xy and 2x</p>
|
||
</div>
|
||
</div>
|
||
</ConceptCard>
|
||
<ExampleCard title="Example" color="violet">
|
||
<p>3x² + 5x − 2x² + x − 7</p>
|
||
<p className="text-slate-500">= (3x² − 2x²) + (5x + x) − 7</p>
|
||
<p className="text-slate-500">
|
||
= <strong className="text-violet-700">x² + 6x − 7</strong>
|
||
</p>
|
||
</ExampleCard>
|
||
</div>
|
||
|
||
{/* Section 3: Factoring Techniques */}
|
||
<div>
|
||
<h2 className="text-3xl font-extrabold text-slate-900 mb-6">
|
||
Factoring Techniques
|
||
</h2>
|
||
<ConceptCard color="violet">
|
||
<p className="text-slate-700 leading-relaxed">
|
||
Factoring is the reverse of distributing. For trinomials x² + bx +
|
||
c, find two numbers that <strong>add to b</strong> and{" "}
|
||
<strong>multiply to c</strong>.
|
||
</p>
|
||
<FormulaBox>
|
||
x² + bx + c = (x + p)(x + q) where p + q = b and p × q = c
|
||
</FormulaBox>
|
||
</ConceptCard>
|
||
<ExampleCard title="Example: Simple Trinomial" color="violet">
|
||
<p>Factor: x² + 7x + 12</p>
|
||
<p className="text-slate-500">Need: p + q = 7 and p × q = 12</p>
|
||
<p className="text-slate-500">
|
||
p = 3, q = 4 →{" "}
|
||
<strong className="text-violet-700">(x + 3)(x + 4)</strong>
|
||
</p>
|
||
</ExampleCard>
|
||
<div className="mt-4">
|
||
<ExampleCard title="Example: Leading Coefficient ≠ 1" color="violet">
|
||
<p>Factor: 2x² + 5x − 3</p>
|
||
<p className="text-slate-500">Product: 2 × (−3) = −6. Sum: 5</p>
|
||
<p className="text-slate-500">
|
||
Numbers: 6 and −1. Split: 2x² + 6x − x − 3
|
||
</p>
|
||
<p className="text-slate-500">
|
||
Group: 2x(x + 3) − 1(x + 3) ={" "}
|
||
<strong className="text-violet-700">(2x − 1)(x + 3)</strong>
|
||
</p>
|
||
</ExampleCard>
|
||
</div>
|
||
<div className="mt-6">
|
||
<FactoringWidget />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Section 4: Special Products */}
|
||
<div>
|
||
<h2 className="text-3xl font-extrabold text-slate-900 mb-6">
|
||
Special Products
|
||
</h2>
|
||
<ConceptCard color="violet">
|
||
<p className="text-slate-700 leading-relaxed">
|
||
These patterns appear constantly on the SAT. Memorize them!
|
||
</p>
|
||
<div className="space-y-3 mt-4">
|
||
<FormulaBox>a² − b² = (a + b)(a − b)</FormulaBox>
|
||
<FormulaBox>a² + 2ab + b² = (a + b)²</FormulaBox>
|
||
<FormulaBox>a² − 2ab + b² = (a − b)²</FormulaBox>
|
||
</div>
|
||
</ConceptCard>
|
||
<ExampleCard title="Example: Difference of Squares" color="violet">
|
||
<p>Factor: 4x² − 25</p>
|
||
<p className="text-slate-500">
|
||
= (2x)² − 5² ={" "}
|
||
<strong className="text-violet-700">(2x + 5)(2x − 5)</strong>
|
||
</p>
|
||
</ExampleCard>
|
||
<div className="mt-4">
|
||
<ExampleCard title="Example: Perfect Square Trinomial" color="violet">
|
||
<p>Factor: x² + 10x + 25</p>
|
||
<p className="text-slate-500">
|
||
= x² + 2(5)(x) + 5² ={" "}
|
||
<strong className="text-violet-700">(x + 5)²</strong>
|
||
</p>
|
||
</ExampleCard>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Section 5: Exponents & Radicals */}
|
||
<div>
|
||
<h2 className="text-3xl font-extrabold text-slate-900 mb-6">
|
||
Rational Exponents & Radicals
|
||
</h2>
|
||
<ConceptCard color="violet">
|
||
<p className="text-slate-700 leading-relaxed">
|
||
Radicals and rational exponents are two ways to express the same
|
||
thing.
|
||
</p>
|
||
<div className="space-y-3 mt-4">
|
||
<FormulaBox>
|
||
x<sup>1/n</sup> = ⁿ√x and x<sup>m/n</sup>{" "}
|
||
= ⁿ√(x<sup>m</sup>)
|
||
</FormulaBox>
|
||
</div>
|
||
<div className="mt-4 overflow-x-auto">
|
||
<table className="w-full text-sm border-collapse">
|
||
<thead>
|
||
<tr className="bg-violet-100 text-violet-900">
|
||
<th className="border border-violet-300 px-3 py-2 text-left font-bold">
|
||
Rule
|
||
</th>
|
||
<th className="border border-violet-300 px-3 py-2 text-left font-bold">
|
||
Formula
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="text-slate-700">
|
||
<tr className="bg-white">
|
||
<td className="border border-slate-200 px-3 py-2">Product</td>
|
||
<td className="border border-slate-200 px-3 py-2 font-mono">
|
||
x<sup>a</sup> × x<sup>b</sup> = x<sup>a+b</sup>
|
||
</td>
|
||
</tr>
|
||
<tr className="bg-slate-50">
|
||
<td className="border border-slate-200 px-3 py-2">
|
||
Quotient
|
||
</td>
|
||
<td className="border border-slate-200 px-3 py-2 font-mono">
|
||
x<sup>a</sup> ÷ x<sup>b</sup> = x<sup>a−b</sup>
|
||
</td>
|
||
</tr>
|
||
<tr className="bg-white">
|
||
<td className="border border-slate-200 px-3 py-2">
|
||
Power of a Power
|
||
</td>
|
||
<td className="border border-slate-200 px-3 py-2 font-mono">
|
||
(x<sup>a</sup>)<sup>b</sup> = x<sup>ab</sup>
|
||
</td>
|
||
</tr>
|
||
<tr className="bg-slate-50">
|
||
<td className="border border-slate-200 px-3 py-2">
|
||
Zero Exponent
|
||
</td>
|
||
<td className="border border-slate-200 px-3 py-2 font-mono">
|
||
x⁰ = 1 (x ≠ 0)
|
||
</td>
|
||
</tr>
|
||
<tr className="bg-white">
|
||
<td className="border border-slate-200 px-3 py-2">
|
||
Negative
|
||
</td>
|
||
<td className="border border-slate-200 px-3 py-2 font-mono">
|
||
x<sup>−n</sup> = 1 ÷ x<sup>n</sup>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</ConceptCard>
|
||
<ExampleCard title="Example" color="violet">
|
||
<p>
|
||
Simplify: x<sup>3/2</sup> × x<sup>1/2</sup>
|
||
</p>
|
||
<p className="text-slate-500">
|
||
= x<sup>(3/2 + 1/2)</sup> ={" "}
|
||
<strong className="text-violet-700">x²</strong>
|
||
</p>
|
||
</ExampleCard>
|
||
<h3 className="text-xl font-bold text-slate-800 mt-10 mb-3">
|
||
Explore: Fractional Exponents ↔ Radicals
|
||
</h3>
|
||
<p className="text-sm text-slate-500 mb-4">
|
||
Drag the sliders to see how the power (numerator) and root
|
||
(denominator) relate.
|
||
</p>
|
||
<RadicalWidget />
|
||
</div>
|
||
|
||
{/* Section 6: Practice & Quiz */}
|
||
<div>
|
||
<h2 className="text-3xl font-extrabold text-slate-900 mb-6">
|
||
Practice & Quiz
|
||
</h2>
|
||
{EQUIV_EXPR_EASY.slice(0, 2).map((q) => (
|
||
<PracticeFromDataset key={q.id} question={q} color="violet" />
|
||
))}
|
||
{EQUIV_EXPR_MEDIUM.slice(0, 1).map((q) => (
|
||
<PracticeFromDataset key={q.id} question={q} color="violet" />
|
||
))}
|
||
</div>
|
||
</LessonShell>
|
||
);
|
||
}
|