270 lines
9.7 KiB
TypeScript
270 lines
9.7 KiB
TypeScript
import {
|
||
Circle,
|
||
Target,
|
||
Hash,
|
||
Layers,
|
||
Ruler,
|
||
ArrowRight,
|
||
BookOpen,
|
||
} from "lucide-react";
|
||
import LessonShell, {
|
||
ConceptCard,
|
||
FormulaBox,
|
||
ExampleCard,
|
||
TipCard,
|
||
PracticeFromDataset,
|
||
} from "../../../components/lessons/LessonShell";
|
||
import { Frac } from "../../../components/Math";
|
||
import CircleTheoremsWidget from "../../../components/lessons/CircleTheoremsWidget";
|
||
import TangentPropertiesWidget from "../../../components/lessons/TangentPropertiesWidget";
|
||
import PowerOfPointWidget from "../../../components/lessons/PowerOfPointWidget";
|
||
import { CIRCLES_EASY, CIRCLES_MEDIUM } from "../../../data/math/circles";
|
||
|
||
interface LessonProps {
|
||
onFinish?: () => void;
|
||
}
|
||
const SECTIONS = [
|
||
{ title: "Equation of a Circle", icon: Circle },
|
||
{ title: "Completing the Square", icon: Hash },
|
||
{ title: "Central & Inscribed Angles", icon: Target },
|
||
{ title: "Arc Length & Sector Area", icon: Layers },
|
||
{ title: "Tangent Lines", icon: ArrowRight },
|
||
{ title: "Chord Properties", icon: Ruler },
|
||
{ title: "Practice & Quiz", icon: BookOpen },
|
||
];
|
||
|
||
export default function CirclesLesson({ onFinish }: LessonProps) {
|
||
return (
|
||
<LessonShell
|
||
title="Circles"
|
||
sections={SECTIONS}
|
||
color="emerald"
|
||
onFinish={onFinish}
|
||
>
|
||
{/* Section 1: Equation */}
|
||
<div>
|
||
<h2 className="text-3xl font-extrabold text-slate-900 mb-6">
|
||
Equation of a Circle
|
||
</h2>
|
||
<ConceptCard color="emerald">
|
||
<p className="text-slate-700 leading-relaxed">
|
||
The <strong>standard form</strong> of a circle with center (h, k)
|
||
and radius r:
|
||
</p>
|
||
<FormulaBox>(x − h)² + (y − k)² = r²</FormulaBox>
|
||
</ConceptCard>
|
||
<ExampleCard title="Example: Write the Equation" color="emerald">
|
||
<p>Center (3, −2), radius 5</p>
|
||
<p className="text-slate-500">
|
||
<strong className="text-emerald-700">
|
||
(x − 3)² + (y + 2)² = 25
|
||
</strong>
|
||
</p>
|
||
</ExampleCard>
|
||
<div className="mt-4">
|
||
<ExampleCard title="Example: Read Center & Radius" color="emerald">
|
||
<p>(x + 1)² + (y − 4)² = 16</p>
|
||
<p className="text-slate-500">
|
||
Center: (−1, 4), radius = √16 ={" "}
|
||
<strong className="text-emerald-700">4</strong>
|
||
</p>
|
||
</ExampleCard>
|
||
</div>
|
||
<div className="mt-4">
|
||
<TipCard type="warning">
|
||
<p className="text-slate-700">
|
||
(x − h) means h is positive. So (x + 1)² means h = −1. Watch the
|
||
signs!
|
||
</p>
|
||
</TipCard>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Section 2: Completing the Square */}
|
||
<div>
|
||
<h2 className="text-3xl font-extrabold text-slate-900 mb-6">
|
||
Completing the Square for Circles
|
||
</h2>
|
||
<ConceptCard color="emerald">
|
||
<p className="text-slate-700 leading-relaxed">
|
||
Convert from <strong>general form</strong> (x² + y² + Dx + Ey + F =
|
||
0) to standard form by completing the square for both x and y.
|
||
</p>
|
||
<div className="space-y-2 mt-3 text-sm text-slate-700">
|
||
<p>1. Group x terms together, y terms together</p>
|
||
<p>2. Complete the square for each group</p>
|
||
<p>3. Add the same values to both sides</p>
|
||
<p>4. Write in standard form</p>
|
||
</div>
|
||
</ConceptCard>
|
||
<ExampleCard title="Example" color="emerald">
|
||
<p>x² + y² − 6x + 4y − 12 = 0</p>
|
||
<p className="text-slate-500">
|
||
(x² − 6x + 9) + (y² + 4y + 4) = 12 + 9 + 4
|
||
</p>
|
||
<p className="text-slate-500">(x − 3)² + (y + 2)² = 25</p>
|
||
<p className="text-slate-500">
|
||
<strong className="text-emerald-700">
|
||
Center (3, −2), radius = 5
|
||
</strong>
|
||
</p>
|
||
</ExampleCard>
|
||
</div>
|
||
|
||
{/* Section 3: Central & Inscribed */}
|
||
<div>
|
||
<h2 className="text-3xl font-extrabold text-slate-900 mb-6">
|
||
Central & Inscribed Angles
|
||
</h2>
|
||
<ConceptCard color="emerald">
|
||
<p className="text-slate-700 leading-relaxed">
|
||
A <strong>central angle</strong> has its vertex at the center — it
|
||
equals its intercepted arc. An <strong>inscribed angle</strong> has
|
||
its vertex on the circle — it equals <strong>half</strong> its
|
||
intercepted arc.
|
||
</p>
|
||
<FormulaBox>
|
||
Inscribed Angle = <Frac n="1" d="2" /> × Intercepted Arc
|
||
</FormulaBox>
|
||
<div className="mt-4 bg-emerald-50 border border-emerald-200 rounded-xl p-4">
|
||
<p className="font-bold text-emerald-900 text-sm mb-1">
|
||
Key Theorem
|
||
</p>
|
||
<p className="text-sm text-slate-700">
|
||
An inscribed angle that intercepts a semicircle (diameter) is
|
||
always <strong>90°</strong>.
|
||
</p>
|
||
</div>
|
||
</ConceptCard>
|
||
<ExampleCard title="Example" color="emerald">
|
||
<p>Central angle = 80° → intercepted arc = 80°</p>
|
||
<p className="text-slate-500">
|
||
Inscribed angle on same arc ={" "}
|
||
<strong className="text-emerald-700">40°</strong>
|
||
</p>
|
||
</ExampleCard>
|
||
<div className="mt-6">
|
||
<CircleTheoremsWidget />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Section 4: Arc & Sector */}
|
||
<div>
|
||
<h2 className="text-3xl font-extrabold text-slate-900 mb-6">
|
||
Arc Length & Sector Area
|
||
</h2>
|
||
<ConceptCard color="emerald">
|
||
<p className="text-slate-700 leading-relaxed">
|
||
Use the fraction of the circle (central angle ÷ 360°) to find arc
|
||
length and sector area.
|
||
</p>
|
||
<div className="space-y-3 mt-4">
|
||
<FormulaBox>Arc Length = (θ ÷ 360) × 2πr</FormulaBox>
|
||
<FormulaBox>Sector Area = (θ ÷ 360) × πr²</FormulaBox>
|
||
</div>
|
||
<div className="mt-3 bg-white/60 rounded-lg p-3 border border-emerald-100 text-sm">
|
||
<p className="font-bold text-emerald-800 mb-1">In Radians</p>
|
||
<p className="text-slate-700">
|
||
Arc = rθ | Sector = <Frac n="1" d="2" />
|
||
r²θ
|
||
</p>
|
||
</div>
|
||
</ConceptCard>
|
||
<ExampleCard title="Example" color="emerald">
|
||
<p>r = 10, θ = 72°</p>
|
||
<p className="text-slate-500">
|
||
Arc = (72 ÷ 360) × 20π = <Frac n="1" d="5" /> × 20π = 4π
|
||
</p>
|
||
<p className="text-slate-500">
|
||
Sector = (72 ÷ 360) × 100π ={" "}
|
||
<strong className="text-emerald-700">20π</strong>
|
||
</p>
|
||
</ExampleCard>
|
||
</div>
|
||
|
||
{/* Section 5: Tangent Lines */}
|
||
<div>
|
||
<h2 className="text-3xl font-extrabold text-slate-900 mb-6">
|
||
Tangent Lines
|
||
</h2>
|
||
<ConceptCard color="emerald">
|
||
<p className="text-slate-700 leading-relaxed">
|
||
A <strong>tangent line</strong> touches the circle at exactly one
|
||
point and is <strong>perpendicular</strong> to the radius at that
|
||
point.
|
||
</p>
|
||
<div className="space-y-2 mt-3 text-sm text-slate-700">
|
||
<p>• Tangent ⊥ radius at point of tangency</p>
|
||
<p>
|
||
• Two tangent segments from the same external point are{" "}
|
||
<strong>equal in length</strong>
|
||
</p>
|
||
</div>
|
||
</ConceptCard>
|
||
<ExampleCard title="Example" color="emerald">
|
||
<p>
|
||
External point P, tangent to circle with center O, radius = 5, OP =
|
||
13
|
||
</p>
|
||
<p className="text-slate-500">
|
||
Tangent² + 5² = 13² (right triangle!)
|
||
</p>
|
||
<p className="text-slate-500">Tangent² = 169 − 25 = 144</p>
|
||
<p className="text-slate-500">
|
||
<strong className="text-emerald-700">Tangent length = 12</strong>
|
||
</p>
|
||
</ExampleCard>
|
||
<div className="mt-6">
|
||
<TangentPropertiesWidget />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Section 6: Chords */}
|
||
<div>
|
||
<h2 className="text-3xl font-extrabold text-slate-900 mb-6">
|
||
Chord Properties
|
||
</h2>
|
||
<ConceptCard color="emerald">
|
||
<p className="text-slate-700 leading-relaxed">
|
||
A <strong>chord</strong> has both endpoints on the circle. The
|
||
diameter is the longest chord.
|
||
</p>
|
||
<div className="space-y-2 mt-3 text-sm text-slate-700">
|
||
<p>
|
||
• A radius perpendicular to a chord <strong>bisects</strong> the
|
||
chord
|
||
</p>
|
||
<p>• Equal chords are equidistant from the center</p>
|
||
</div>
|
||
</ConceptCard>
|
||
<ExampleCard title="Example" color="emerald">
|
||
<p>Chord of length 24 in a circle of radius 13</p>
|
||
<p className="text-slate-500">
|
||
Perpendicular from center bisects chord: half-chord = 12
|
||
</p>
|
||
<p className="text-slate-500">
|
||
d² + 12² = 13² → d² = 25 →{" "}
|
||
<strong className="text-emerald-700">d = 5</strong>
|
||
</p>
|
||
</ExampleCard>
|
||
<div className="mt-6">
|
||
<PowerOfPointWidget />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Section 7: Practice & Quiz */}
|
||
<div>
|
||
<h2 className="text-3xl font-extrabold text-slate-900 mb-6">
|
||
Practice & Quiz
|
||
</h2>
|
||
{CIRCLES_EASY.slice(0, 2).map((q) => (
|
||
<PracticeFromDataset key={q.id} question={q} color="emerald" />
|
||
))}
|
||
{CIRCLES_MEDIUM.slice(0, 1).map((q) => (
|
||
<PracticeFromDataset key={q.id} question={q} color="emerald" />
|
||
))}
|
||
</div>
|
||
</LessonShell>
|
||
);
|
||
}
|