feat(lessons): add lessons from client db
This commit is contained in:
shafin-r
291
src/pages/student/lessons/EquivalentExpressionsLesson.tsx
Normal file
291
src/pages/student/lessons/EquivalentExpressionsLesson.tsx
Normal file
@ -0,0 +1,291 @@
|
||||
import React from "react";
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user