415 lines
16 KiB
TypeScript
415 lines
16 KiB
TypeScript
import {
|
||
TrendingUp,
|
||
BarChart,
|
||
Zap,
|
||
RotateCcw,
|
||
Layers,
|
||
BookOpen,
|
||
} from "lucide-react";
|
||
import LessonShell, {
|
||
ConceptCard,
|
||
FormulaBox,
|
||
ExampleCard,
|
||
TipCard,
|
||
PracticeFromDataset,
|
||
} from "../../../components/lessons/LessonShell";
|
||
import ParabolaWidget from "../../../components/lessons/ParabolaWidget";
|
||
import PolynomialBehaviorWidget from "../../../components/lessons/PolynomialBehaviorWidget";
|
||
import ExponentialExplorer from "../../../components/lessons/ExponentialExplorer";
|
||
import RemainderTheoremWidget from "../../../components/lessons/RemainderTheoremWidget";
|
||
import GrowthComparisonWidget from "../../../components/lessons/GrowthComparisonWidget";
|
||
import {
|
||
NONLINEAR_FUNC_EASY,
|
||
NONLINEAR_FUNC_MEDIUM,
|
||
} from "../../../data/math/nonlinear-functions";
|
||
|
||
interface LessonProps {
|
||
onFinish?: () => void;
|
||
}
|
||
const SECTIONS = [
|
||
{ title: "Quadratic Functions", icon: TrendingUp },
|
||
{ title: "Polynomial Behavior", icon: BarChart },
|
||
{ title: "Exponential Growth & Decay", icon: Zap },
|
||
{ title: "Radical & Rational Functions", icon: RotateCcw },
|
||
{ title: "Transformations", icon: Layers },
|
||
{ title: "Practice & Quiz", icon: BookOpen },
|
||
];
|
||
|
||
export default function NonlinearFunctionsLesson({ onFinish }: LessonProps) {
|
||
return (
|
||
<LessonShell
|
||
title="Nonlinear Functions"
|
||
sections={SECTIONS}
|
||
color="violet"
|
||
onFinish={onFinish}
|
||
>
|
||
{/* Section 1: Quadratic Functions */}
|
||
<div>
|
||
<h2 className="text-3xl font-extrabold text-slate-900 mb-6">
|
||
Quadratic Functions
|
||
</h2>
|
||
<ConceptCard color="violet">
|
||
<p className="text-slate-700 leading-relaxed">
|
||
A quadratic function can be written in three forms, each revealing
|
||
different information:
|
||
</p>
|
||
<div className="grid md:grid-cols-3 gap-3 mt-4">
|
||
<div className="bg-violet-50 border border-violet-200 rounded-xl p-3">
|
||
<p className="font-bold text-violet-800 text-sm">Standard Form</p>
|
||
<p className="font-mono text-sm text-slate-700">
|
||
f(x) = ax² + bx + c
|
||
</p>
|
||
<p className="text-xs text-slate-500 mt-1">
|
||
Shows y-intercept (c)
|
||
</p>
|
||
</div>
|
||
<div className="bg-violet-50 border border-violet-200 rounded-xl p-3">
|
||
<p className="font-bold text-violet-800 text-sm">Vertex Form</p>
|
||
<p className="font-mono text-sm text-slate-700">
|
||
f(x) = a(x − h)² + k
|
||
</p>
|
||
<p className="text-xs text-slate-500 mt-1">Shows vertex (h, k)</p>
|
||
</div>
|
||
<div className="bg-violet-50 border border-violet-200 rounded-xl p-3">
|
||
<p className="font-bold text-violet-800 text-sm">Factored Form</p>
|
||
<p className="font-mono text-sm text-slate-700">
|
||
f(x) = a(x − r₁)(x − r₂)
|
||
</p>
|
||
<p className="text-xs text-slate-500 mt-1">
|
||
Shows x-intercepts (r₁, r₂)
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<FormulaBox>Vertex x-coordinate: x = −b ÷ 2a</FormulaBox>
|
||
<p className="text-slate-700 text-sm mt-2">
|
||
If a > 0 → opens up (minimum). If a < 0 → opens down
|
||
(maximum).
|
||
</p>
|
||
</ConceptCard>
|
||
<ExampleCard title="Example: Find the Vertex" color="violet">
|
||
<p>f(x) = 2x² − 8x + 3</p>
|
||
<p className="text-slate-500">x = −(−8) ÷ (2 × 2) = 8 ÷ 4 = 2</p>
|
||
<p className="text-slate-500">f(2) = 2(4) − 16 + 3 = −5</p>
|
||
<p className="text-slate-500">
|
||
<strong className="text-violet-700">
|
||
Vertex: (2, −5), minimum value = −5
|
||
</strong>
|
||
</p>
|
||
</ExampleCard>
|
||
<div className="mt-6">
|
||
<ParabolaWidget />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Section 2: Polynomial Behavior */}
|
||
<div>
|
||
<h2 className="text-3xl font-extrabold text-slate-900 mb-6">
|
||
Polynomial Behavior
|
||
</h2>
|
||
<ConceptCard color="violet">
|
||
<p className="text-slate-700 leading-relaxed">
|
||
The <strong>degree</strong> determines the maximum number of turning
|
||
points (degree − 1). The <strong>leading coefficient</strong> and
|
||
degree determine end behavior.
|
||
</p>
|
||
<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 font-bold">
|
||
Degree
|
||
</th>
|
||
<th className="border border-violet-300 px-3 py-2 font-bold">
|
||
Leading Coeff
|
||
</th>
|
||
<th className="border border-violet-300 px-3 py-2 font-bold">
|
||
Left End
|
||
</th>
|
||
<th className="border border-violet-300 px-3 py-2 font-bold">
|
||
Right End
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="text-slate-700">
|
||
<tr className="bg-white">
|
||
<td className="border border-slate-200 px-3 py-2">Even</td>
|
||
<td className="border border-slate-200 px-3 py-2">
|
||
Positive
|
||
</td>
|
||
<td className="border border-slate-200 px-3 py-2">↑ Up</td>
|
||
<td className="border border-slate-200 px-3 py-2">↑ Up</td>
|
||
</tr>
|
||
<tr className="bg-slate-50">
|
||
<td className="border border-slate-200 px-3 py-2">Even</td>
|
||
<td className="border border-slate-200 px-3 py-2">
|
||
Negative
|
||
</td>
|
||
<td className="border border-slate-200 px-3 py-2">↓ Down</td>
|
||
<td className="border border-slate-200 px-3 py-2">↓ Down</td>
|
||
</tr>
|
||
<tr className="bg-white">
|
||
<td className="border border-slate-200 px-3 py-2">Odd</td>
|
||
<td className="border border-slate-200 px-3 py-2">
|
||
Positive
|
||
</td>
|
||
<td className="border border-slate-200 px-3 py-2">↓ Down</td>
|
||
<td className="border border-slate-200 px-3 py-2">↑ Up</td>
|
||
</tr>
|
||
<tr className="bg-slate-50">
|
||
<td className="border border-slate-200 px-3 py-2">Odd</td>
|
||
<td className="border border-slate-200 px-3 py-2">
|
||
Negative
|
||
</td>
|
||
<td className="border border-slate-200 px-3 py-2">↑ Up</td>
|
||
<td className="border border-slate-200 px-3 py-2">↓ Down</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</ConceptCard>
|
||
<ExampleCard title="Example" color="violet">
|
||
<p>f(x) = −2x³ + 5x</p>
|
||
<p className="text-slate-500">
|
||
Degree 3 (odd), negative leading coefficient
|
||
</p>
|
||
<p className="text-slate-500">
|
||
<strong className="text-violet-700">Rises left, falls right</strong>
|
||
</p>
|
||
</ExampleCard>
|
||
<div className="mt-6">
|
||
<PolynomialBehaviorWidget />
|
||
</div>
|
||
<h3 className="text-xl font-bold text-slate-800 mt-10 mb-3">
|
||
Remainder Theorem Explorer
|
||
</h3>
|
||
<p className="text-sm text-slate-500 mb-4">
|
||
Slide the divisor value to see how the remainder changes — when it
|
||
hits zero, you've found a root!
|
||
</p>
|
||
<RemainderTheoremWidget />
|
||
</div>
|
||
|
||
{/* Section 3: Exponential Growth & Decay */}
|
||
<div>
|
||
<h2 className="text-3xl font-extrabold text-slate-900 mb-6">
|
||
Exponential Growth & Decay
|
||
</h2>
|
||
<ConceptCard color="violet">
|
||
<p className="text-slate-700 leading-relaxed">
|
||
Exponential functions change by a constant <strong>factor</strong>{" "}
|
||
(not a constant amount like linear functions).
|
||
</p>
|
||
<div className="space-y-3 mt-4">
|
||
<FormulaBox>
|
||
Growth: f(x) = a(1 + r)<sup>x</sup> where b = 1 + r > 1
|
||
</FormulaBox>
|
||
<FormulaBox>
|
||
Decay: f(x) = a(1 − r)<sup>x</sup> where b = 1 − r < 1
|
||
</FormulaBox>
|
||
</div>
|
||
<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">
|
||
Growth (b > 1)
|
||
</p>
|
||
<p className="text-xs text-slate-600">
|
||
Population, compound interest, bacteria
|
||
</p>
|
||
</div>
|
||
<div className="bg-rose-50 border border-rose-200 rounded-xl p-3">
|
||
<p className="font-bold text-rose-800 text-sm">
|
||
Decay (0 < b < 1)
|
||
</p>
|
||
<p className="text-xs text-slate-600">
|
||
Depreciation, radioactive decay, cooling
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</ConceptCard>
|
||
<ExampleCard title="Example: Growth" color="violet">
|
||
<p>Population starts at 500, grows 8% per year</p>
|
||
<p className="text-slate-500">
|
||
<strong className="text-violet-700">
|
||
P(t) = 500(1.08)<sup>t</sup>
|
||
</strong>
|
||
</p>
|
||
</ExampleCard>
|
||
<div className="mt-4">
|
||
<ExampleCard title="Example: Decay" color="violet">
|
||
<p>Car worth $25,000 depreciates 15% per year</p>
|
||
<p className="text-slate-500">
|
||
<strong className="text-violet-700">
|
||
V(t) = 25000(0.85)<sup>t</sup>
|
||
</strong>
|
||
</p>
|
||
</ExampleCard>
|
||
</div>
|
||
<div className="mt-6">
|
||
<ExponentialExplorer />
|
||
</div>
|
||
<h3 className="text-xl font-bold text-slate-800 mt-10 mb-3">
|
||
Linear vs Exponential Growth
|
||
</h3>
|
||
<p className="text-sm text-slate-500 mb-4">
|
||
Compare how linear and exponential growth diverge over time.
|
||
</p>
|
||
<GrowthComparisonWidget />
|
||
<div className="mt-4">
|
||
<TipCard type="tip">
|
||
<p className="text-slate-700">
|
||
"Doubles every 3 years" means f(t) = a × 2<sup>t÷3</sup>. "Halves
|
||
every 5 hours" means f(t) = a × (0.5)<sup>t÷5</sup>.
|
||
</p>
|
||
</TipCard>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Section 4: Radical & Rational Functions */}
|
||
<div>
|
||
<h2 className="text-3xl font-extrabold text-slate-900 mb-6">
|
||
Radical & Rational Functions
|
||
</h2>
|
||
<ConceptCard color="violet">
|
||
<p className="text-slate-700 leading-relaxed">
|
||
<strong>Radical functions:</strong> f(x) = √(expression). Domain
|
||
requires expression ≥ 0.
|
||
<br />
|
||
<strong>Rational functions:</strong> f(x) = p(x) ÷ q(x). Domain
|
||
excludes where q(x) = 0.
|
||
</p>
|
||
<div className="grid md:grid-cols-2 gap-3 mt-4">
|
||
<div className="bg-white/60 rounded-lg p-3 border border-violet-100 text-sm">
|
||
<p className="font-bold text-violet-800 mb-1">
|
||
Vertical Asymptotes
|
||
</p>
|
||
<p className="text-slate-600">
|
||
Where denominator = 0 (and numerator ≠ 0)
|
||
</p>
|
||
</div>
|
||
<div className="bg-white/60 rounded-lg p-3 border border-violet-100 text-sm">
|
||
<p className="font-bold text-violet-800 mb-1">
|
||
Horizontal Asymptotes
|
||
</p>
|
||
<p className="text-slate-600">
|
||
Compare degrees of numerator and denominator
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</ConceptCard>
|
||
<ExampleCard title="Example: Rational Function" color="violet">
|
||
<p>f(x) = (x + 2) ÷ (x − 3)</p>
|
||
<p className="text-slate-500">Vertical asymptote: x = 3</p>
|
||
<p className="text-slate-500">
|
||
Horizontal asymptote: y = 1 (same degree → ratio of leading
|
||
coefficients)
|
||
</p>
|
||
</ExampleCard>
|
||
</div>
|
||
|
||
{/* Section 5: Transformations */}
|
||
<div>
|
||
<h2 className="text-3xl font-extrabold text-slate-900 mb-6">
|
||
Function Transformations
|
||
</h2>
|
||
<ConceptCard color="violet">
|
||
<p className="text-slate-700 leading-relaxed">
|
||
Transformations modify the graph of a parent function.
|
||
</p>
|
||
<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 font-bold">
|
||
Notation
|
||
</th>
|
||
<th className="border border-violet-300 px-3 py-2 font-bold">
|
||
Transformation
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="text-slate-700">
|
||
<tr className="bg-white">
|
||
<td className="border border-slate-200 px-3 py-2 font-mono">
|
||
f(x) + k
|
||
</td>
|
||
<td className="border border-slate-200 px-3 py-2">
|
||
Shift up k units
|
||
</td>
|
||
</tr>
|
||
<tr className="bg-slate-50">
|
||
<td className="border border-slate-200 px-3 py-2 font-mono">
|
||
f(x) − k
|
||
</td>
|
||
<td className="border border-slate-200 px-3 py-2">
|
||
Shift down k units
|
||
</td>
|
||
</tr>
|
||
<tr className="bg-white">
|
||
<td className="border border-slate-200 px-3 py-2 font-mono">
|
||
f(x − h)
|
||
</td>
|
||
<td className="border border-slate-200 px-3 py-2">
|
||
Shift right h units
|
||
</td>
|
||
</tr>
|
||
<tr className="bg-slate-50">
|
||
<td className="border border-slate-200 px-3 py-2 font-mono">
|
||
f(x + h)
|
||
</td>
|
||
<td className="border border-slate-200 px-3 py-2">
|
||
Shift left h units
|
||
</td>
|
||
</tr>
|
||
<tr className="bg-white">
|
||
<td className="border border-slate-200 px-3 py-2 font-mono">
|
||
−f(x)
|
||
</td>
|
||
<td className="border border-slate-200 px-3 py-2">
|
||
Reflect over x-axis
|
||
</td>
|
||
</tr>
|
||
<tr className="bg-slate-50">
|
||
<td className="border border-slate-200 px-3 py-2 font-mono">
|
||
f(−x)
|
||
</td>
|
||
<td className="border border-slate-200 px-3 py-2">
|
||
Reflect over y-axis
|
||
</td>
|
||
</tr>
|
||
<tr className="bg-white">
|
||
<td className="border border-slate-200 px-3 py-2 font-mono">
|
||
af(x)
|
||
</td>
|
||
<td className="border border-slate-200 px-3 py-2">
|
||
Vertical stretch (a > 1) or compress (0 < a < 1)
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</ConceptCard>
|
||
<TipCard type="remember">
|
||
<p className="text-slate-700">
|
||
"Inside" changes (affecting x) go the <strong>opposite</strong>{" "}
|
||
direction. "Outside" changes (affecting y) go the{" "}
|
||
<strong>same</strong> direction.
|
||
</p>
|
||
</TipCard>
|
||
</div>
|
||
|
||
{/* Section 6: Practice & Quiz */}
|
||
<div>
|
||
<h2 className="text-3xl font-extrabold text-slate-900 mb-6">
|
||
Practice & Quiz
|
||
</h2>
|
||
{NONLINEAR_FUNC_EASY.slice(0, 2).map((q) => (
|
||
<PracticeFromDataset key={q.id} question={q} color="violet" />
|
||
))}
|
||
{NONLINEAR_FUNC_MEDIUM.slice(0, 1).map((q) => (
|
||
<PracticeFromDataset key={q.id} question={q} color="violet" />
|
||
))}
|
||
</div>
|
||
</LessonShell>
|
||
);
|
||
}
|