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