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