shafin808s/edbridge-scholars
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(lessons): add new lessons for english section

Browse Source
This commit is contained in:
shafin-r
2026-03-09 16:41:06 +06:00
parent b5edb3554f
commit 59e601052f
38 changed files with 9086 additions and 1205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

773
src/pages/student/lessons/EBRWCentralIdeasLesson.tsx Normal file
View File

@ -0,0 +1,773 @@
import React, { useRef, useState, useEffect } from "react";
import { Check, BookOpen, Lightbulb, Zap, Target } from "lucide-react";
import { PracticeFromDataset } from "../../../components/lessons/LessonShell";
import {
CENTRAL_IDEAS_EASY,
CENTRAL_IDEAS_MEDIUM,
} from "../../../data/rw/central-ideas-details";
import EvidenceHunterWidget, {
type EvidenceExercise,
} from "../../../components/lessons/EvidenceHunterWidget";
import RevealCardGrid, {
type RevealCard,
} from "../../../components/lessons/RevealCardGrid";
import useScrollReveal from "../../../components/lessons/useScrollReveal";
interface LessonProps {
onFinish?: () => void;
}
/* ── Data for RevealCardGrid widgets ── */
const WRONG_ANSWER_TAXONOMY: RevealCard[] = [
{
label: "Off-topic",
sublabel: "Is this noun/idea actually in the lines?",
content:
"Mentions something never in the passage or unrelated to the topic.",
},
{
label: "Too broad",
sublabel: "Does answer scope match passage scope?",
content:
'Passage focuses on ONE person but answer says "scientists" or "artists" (plural).',
},
{
label: "Too narrow",
sublabel: "Is this the MAIN thing or just one example?",
content: "Picks a supporting detail instead of the overall idea.",
},
{
label: "Half-right, half-wrong",
sublabel: "Read every word in the answer.",
content:
"First half matches, second half contains a false or unsupported claim.",
},
{
label: "Could-be-true",
sublabel: "Can I point to specific words?",
content:
"Plausible in the real world, but not stated or implied in the text.",
},
{
label: "Wrong scope for purpose",
sublabel: "Focus on what the WHOLE passage does.",
content: "Describes what the passage mentions but not its primary goal.",
},
];
const STRUCTURE_PATTERNS: RevealCard[] = [
{
label: "Old Idea → New Idea",
content: "Challenge/revision: most common in science passages",
},
{
label: "Problem → Solution",
content: "A challenge is identified, then an approach is described",
},
{
label: "Claim → Supporting Evidence",
content: "The main point is stated upfront, followed by examples",
},
{
label: "Description → Implication",
content: "A scenario is described, then its significance is analyzed",
},
{
label: "Comparison / Contrast",
content: "Two entities or views are presented side by side",
},
];
const EVIDENCE_EXERCISES: EvidenceExercise[] = [
{
question: "Which sentence states the central idea of this passage?",
passage: [
"For decades, the standard treatment for depression has been antidepressant medication combined with talk therapy.",
"These approaches help many patients, but roughly one-third do not respond to first-line treatments.",
"Researchers are now investigating ketamine, an anesthetic, as a rapid-acting antidepressant.",
"Unlike traditional medications that take weeks to work, ketamine can reduce depressive symptoms within hours.",
"This suggests that the neuroscience of depression is far more complex — and far more treatable — than previously assumed.",
],
evidenceIndex: 4,
explanation:
'Sentence 5 is the "So What" — it draws a broader conclusion about what ketamine research implies about depression science. It\'s the central idea because it states what the author wants us to take away from all the preceding information.',
},
{
question:
"Which sentence best expresses the main point the author wants the reader to understand?",
passage: [
"Ancient Rome is often praised for its engineering feats: aqueducts, roads, and amphitheaters.",
"These structures have survived millennia and continue to function in some cases today.",
"Less celebrated is Rome's sophisticated financial system, which included credit, interest-bearing loans, and transferable debt.",
"Roman bankers financed trade across the Mediterranean, enabling commerce that would otherwise have been impossible.",
"The financial innovations of Rome were as consequential as its physical ones, yet history has largely ignored them.",
],
evidenceIndex: 4,
explanation:
'Sentence 5 is the thesis — the author\'s main argument that Roman financial innovation was equally important to physical engineering. The word "yet" signals this is the key contrast and the point the author most wants to make.',
},
];
const EBRWCentralIdeasLesson: React.FC<LessonProps> = ({ onFinish }) => {
const [activeSection, setActiveSection] = useState(0);
const sectionsRef = useRef<(HTMLElement | null)[]>([]);
useEffect(() => {
const observers: IntersectionObserver[] = [];
sectionsRef.current.forEach((el, idx) => {
if (!el) return;
const obs = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) setActiveSection(idx);
},
{ threshold: 0.3 },
);
obs.observe(el);
observers.push(obs);
});
return () => observers.forEach((o) => o.disconnect());
}, []);
useScrollReveal();
const scrollToSection = (index: number) => {
setActiveSection(index);
sectionsRef.current[index]?.scrollIntoView({ behavior: "smooth" });
};
const SectionMarker = ({
index,
title,
icon: Icon,
}: {
index: number;
title: string;
icon: React.ElementType;
}) => {
const isActive = activeSection === index;
const isPast = activeSection > index;
return (
<button
onClick={() => scrollToSection(index)}
className={`flex items-center gap-3 p-3 w-full rounded-lg text-left transition-all ${isActive ? "bg-teal-50" : "hover:bg-slate-50"}`}
>
<div
className={`w-8 h-8 rounded-full flex items-center justify-center shrink-0
${isActive ? "bg-teal-600 text-white" : isPast ? "bg-teal-400 text-white" : "bg-slate-200 text-slate-500"}`}
>
{isPast ? (
<Check className="w-4 h-4" />
) : (
<Icon className="w-4 h-4" />
)}
</div>
<p
className={`text-sm font-bold ${isActive ? "text-teal-900" : "text-slate-600"}`}
>
{title}
</p>
</button>
);
};
return (
<div className="flex flex-col lg:flex-row min-h-screen">
<aside className="w-full lg:w-64 lg:fixed lg:top-14 lg:bottom-0 lg:overflow-y-auto p-4 border-r border-slate-200 bg-slate-50 z-0 hidden lg:block">
<nav className="space-y-2 pt-6">
<SectionMarker
index={0}
title="Topic &amp; Main Point"
icon={BookOpen}
/>
<SectionMarker
index={1}
title="Old/New &amp; Structure"
icon={Target}
/>
<SectionMarker
index={2}
title="Pronouns &amp; Compression"
icon={Lightbulb}
/>
<SectionMarker index={3} title="Main Point Hunter" icon={Target} />
<SectionMarker index={4} title="Practice Questions" icon={Zap} />
</nav>
</aside>
<div className="flex-1 lg:ml-64 md:p-12 max-w-full mx-auto">
{/* Section 0 — Topic & Main Point */}
<section
ref={(el) => {
sectionsRef.current[0] = el;
}}
className="min-h-screen flex flex-col justify-center mb-24 pt-20 lg:pt-0"
>
<div className="inline-flex items-center gap-2 bg-teal-100 text-teal-700 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider mb-4 w-fit">
Information &amp; Ideas — Domain 2
</div>
<h2 className="text-4xl font-extrabold text-slate-900 mb-2">
Central Ideas &amp; Details
</h2>
<p className="text-lg text-slate-500 mb-8">
Identify the main point, central claim, and overall structure — and
eliminate every wrong answer type.
</p>
{/* 4A — Identifying the Topic */}
<div className="scroll-reveal stagger-1 rounded-2xl p-6 mb-8 bg-teal-50 border border-teal-200 space-y-4">
<h3 className="text-lg font-bold text-teal-900">
Identifying the Topic
</h3>
<p className="text-sm text-slate-700">
The topic is the person, thing, or idea that is the primary
subject of the passage. Correct answers to main idea questions
must reference the topic — wrong answers often shift to a related
but different subject.
</p>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="card-tilt bg-white border border-teal-200 rounded-xl p-4">
<p className="font-bold text-teal-700 text-sm mb-2">
Key Principles
</p>
<ul className="space-y-1 text-xs text-slate-700">
<li>
• The topic appears in sentence 1–2 in nearly every SAT
passage.
</li>
<li>
• A topic is NOT the same as the theme. Topic = subject;
Theme = abstract lesson.
</li>
<li>
• Recognize restatements: a computer → "the machine," "the
invention," "the technology."
</li>
<li>
• The topic word usually recurs throughout — by name or via
pronoun/compression noun.
</li>
<li>
• Off-topic answers are wrong even if every other word
matches the passage.
</li>
</ul>
</div>
<div className="card-tilt bg-white border border-red-100 rounded-xl p-4">
<p className="font-bold text-red-700 text-sm mb-2">
Common Mistakes
</p>
<ul className="space-y-1 text-xs text-slate-700">
<li>
• Naming a category instead of the specific topic (e.g.,
"Japanese art" instead of "Otagaki Rengetsu's art").
</li>
<li>
• Confusing a supporting detail mentioned in one sentence
for the main topic.
</li>
<li>
• Missing pronoun shifts: "it" may change referent
mid-passage.
</li>
<li>
• Selecting an answer that is too broad in scope — the
passage discusses ONE scientist, not all scientists.
</li>
</ul>
</div>
</div>
</div>
{/* 4B — Main Point Formula */}
<div className="scroll-reveal stagger-2 rounded-2xl p-6 mb-8 bg-white border border-slate-200 space-y-4">
<h3 className="text-lg font-bold text-slate-900">
The Main Point Formula
</h3>
<p className="text-sm text-slate-700">
The main point answers the question: "So what?" It is the primary
argument the author wants to convey — not just a description of
what was discussed.
</p>
<div className="scroll-reveal-scale bg-teal-900 text-white rounded-xl p-5 text-center">
<p className="text-xl font-extrabold tracking-wide">
Topic + So What? = Main Point
</p>
</div>
{/* Worked Example — Otagaki Rengetsu */}
<div className="bg-teal-50 border border-teal-200 rounded-xl p-5 space-y-3">
<p className="font-bold text-teal-800 text-sm uppercase tracking-wider">
Worked Example
</p>
<div className="bg-white border border-slate-200 rounded-lg p-4 text-sm text-slate-700 leading-relaxed italic">
"Admired primarily for her exquisite calligraphy,{" "}
<span className="font-bold text-teal-700 not-italic">
Otagaki Rengetsu
</span>{" "}
(1791–1875) was among Japan's most celebrated artists. She was
also a writer and ceramicist, often inscribing{" "}
<span className="underline decoration-teal-400">her poems</span>{" "}
in{" "}
<span className="underline decoration-teal-400">
her own calligraphy
</span>{" "}
onto clay vessels —{" "}
<span className="font-bold text-teal-700 not-italic">
a distinctive blending of art forms not replicated by any
other artist in Japanese history
</span>
.{" "}
<span className="underline decoration-teal-400">Her work</span>{" "}
was in such great demand during the nineteenth century that
every household in Kyoto was said to own{" "}
<span className="underline decoration-teal-400">
her pottery
</span>
, and today{" "}
<span className="underline decoration-teal-400">
scrolls and ceramics
</span>{" "}
bearing{" "}
<span className="underline decoration-teal-400">
her calligraphy
</span>{" "}
are sought after by collectors."
</div>
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
<div className="card-tilt bg-white border border-teal-200 rounded-lg p-3 text-center">
<p className="text-xs text-slate-500 uppercase tracking-wider mb-1">
Topic
</p>
<p className="font-bold text-teal-800 text-sm">
Otagaki Rengetsu's art
</p>
</div>
<div className="card-tilt bg-white border border-teal-200 rounded-lg p-3 text-center">
<p className="text-xs text-slate-500 uppercase tracking-wider mb-1">
So What?
</p>
<p className="font-bold text-teal-800 text-sm">
Unique, unreplicated qualities
</p>
</div>
<div className="card-tilt bg-teal-700 text-white rounded-lg p-3 text-center">
<p className="text-xs text-teal-200 uppercase tracking-wider mb-1">
Main Point
</p>
<p className="font-bold text-sm">
Her artistic creations are prized for their unique qualities
</p>
</div>
</div>
<div className="bg-amber-50 border border-amber-200 rounded-lg p-3">
<p className="text-xs text-slate-700">
<span className="font-bold text-amber-800">
Notice the topic tracking:
</span>{" "}
The topic "Otagaki Rengetsu's art" is introduced in sentence 1
and then restated in other words throughout —{" "}
<em>
her poems, her own calligraphy, her work, her pottery,
scrolls and ceramics, her calligraphy
</em>
. The topic word recurs by name or via pronoun/compression
noun. Every correct answer must reference this specific topic,
not a broader category like "Japanese art."
</p>
</div>
</div>
<p className="text-sm text-slate-600 font-semibold">
Key locations where the main point is typically found:
</p>
<ul className="space-y-1 text-sm text-slate-700">
<li>
•{" "}
<span className="font-bold">First or first two sentences</span>{" "}
— most common.
</li>
<li>
• <span className="font-bold">Last sentence</span> — especially
when the passage confirms or reasserts the opening claim.
</li>
<li>
• <span className="font-bold">After a major transition</span>{" "}
such as however, but, in fact, therefore — the "new idea" is
often the real main point.
</li>
<li>
•{" "}
<span className="font-bold">
After a dash, colon, or italicized word
</span>{" "}
— these signal that something important follows.
</li>
</ul>
</div>
{/* Fiction & Poetry */}
<div className="scroll-reveal stagger-3 rounded-2xl p-6 mb-8 bg-slate-50 border border-slate-200 space-y-4">
<h3 className="text-lg font-bold text-slate-900">
Fiction &amp; Poetry: Special Cases
</h3>
<div className="space-y-3">
<div>
<p className="font-bold text-teal-700 text-sm mb-1">
Fiction Passages
</p>
<ul className="text-xs text-slate-600 space-y-1">
<li>
• Focus on who the character is and what quality or feeling
the passage emphasizes.
</li>
<li>
• Key information often appears at the end (a quoted line of
dialogue, a narrator's summary, or a character's
reflection).
</li>
<li>
• DO NOT read in symbolism or broader themes beyond what the
text literally states.
</li>
<li>
• Wrong answers often import an emotion or quality from
outside the text, or conflate a detail with the main idea.
</li>
<li className="italic text-slate-400">
Example: Amy Tan passage about ink-making → main point =
characters take great pride in their generational ink-making
tradition. NOT "the importance of family" (too abstract).
</li>
</ul>
</div>
<div>
<p className="font-bold text-teal-700 text-sm mb-1">
Poetry Passages
</p>
<ul className="text-xs text-slate-600 space-y-1">
<li>
• Read the poem literally first — what is the speaker
literally saying?
</li>
<li>
• Identify the speaker's attitude (positive, negative,
ambivalent) — this almost always determines the main point.
</li>
<li>
• Look at the last stanza or final couplet for the poem's
culminating idea.
</li>
<li>
• Avoid symbolic overreach: "the winter represents death" is
interpretation, not literal reading.
</li>
<li>
• Process of elimination is very powerful: eliminate any
answer that is either negative when the poem is positive, or
that mentions something never stated.
</li>
</ul>
</div>
</div>
</div>
{/* 4F — Primary Purpose vs. Main Point */}
<div className="scroll-reveal stagger-4 rounded-2xl p-6 mb-8 bg-teal-50 border border-teal-200 space-y-4">
<h3 className="text-lg font-bold text-teal-900">
Primary Purpose vs. Main Point
</h3>
<div className="overflow-x-auto">
<table className="w-full text-sm border-collapse rounded-xl overflow-hidden">
<thead>
<tr className="bg-teal-600 text-white">
<th className="px-4 py-2 text-left"></th>
<th className="px-4 py-2 text-left">Main Point</th>
<th className="px-4 py-2 text-left">Primary Purpose</th>
</tr>
</thead>
<tbody>
{[
[
"Question asked",
"What does the author claim?",
"Why did the author write this?",
],
[
"Answer uses",
'Specific nouns, claims, findings ("dark matter cannot be seen but must exist")',
"Function verbs: describe, argue, challenge, illustrate, explain, contrast, suggest",
],
[
"Example",
'"Octavia Butler resisted being identified exclusively with science fiction."',
'"To present a claim and support it with examples."',
],
].map(([label, mp, pp], i) => (
<tr
key={label}
className={i % 2 === 0 ? "bg-white" : "bg-teal-50"}
>
<td className="px-4 py-2 font-bold text-slate-700 text-xs">
{label}
</td>
<td className="px-4 py-2 text-slate-600 text-xs">{mp}</td>
<td className="px-4 py-2 text-slate-600 text-xs">{pp}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
{/* Wrong Answer Taxonomy */}
<div className="scroll-reveal stagger-5 rounded-2xl p-6 mb-8 bg-white border border-slate-200 space-y-4">
<h3 className="text-lg font-bold text-slate-900">
Wrong Answer Taxonomy — tap to reveal each trap:
</h3>
<RevealCardGrid
cards={WRONG_ANSWER_TAXONOMY}
columns={3}
accentColor="teal"
/>
</div>
</section>
{/* Section 1 — Old/New & Structure */}
<section
ref={(el) => {
sectionsRef.current[1] = el;
}}
className="min-h-screen flex flex-col justify-center mb-24"
>
<h2 className="text-4xl font-extrabold text-slate-900 mb-2">
Old/New &amp; Structure
</h2>
<p className="text-lg text-slate-500 mb-8">
The most important structural pattern on the SAT — and how to
describe overall passage organization.
</p>
{/* 4C — Old/New */}
<div className="scroll-reveal stagger-1 rounded-2xl p-6 mb-8 bg-teal-50 border border-teal-200 space-y-4">
<h3 className="text-lg font-bold text-teal-900">
Old Idea vs. New Idea Structure
</h3>
<p className="text-sm text-slate-700">
The Old/New template is one of the most important patterns in SAT
science and social science passages. Authors present a
traditionally held view (old idea), then pivot to a new or
contradictory finding.
</p>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="card-tilt bg-white border border-slate-200 rounded-xl p-4">
<p className="font-bold text-red-700 text-sm mb-2">
Old Idea Signal Phrases
</p>
<ul className="text-xs text-slate-600 space-y-1">
<li>• "Some/many/most scientists believe..."</li>
<li>• "It is commonly thought that..."</li>
<li>• "Accepted/conventional wisdom holds..."</li>
<li>• "For decades, researchers thought..."</li>
<li>• "Traditionally, it was believed..."</li>
</ul>
<p className="text-xs text-red-600 mt-2 italic">
→ These phrases signal a view the author DISAGREES with.
</p>
</div>
<div className="card-tilt bg-white border border-slate-200 rounded-xl p-4">
<p className="font-bold text-green-700 text-sm mb-2">
New Idea Signal Phrases
</p>
<ul className="text-xs text-slate-600 space-y-1">
<li>• "However, but in fact..."</li>
<li>• "Actually, in reality..."</li>
<li>• "But is it really true that...?"</li>
<li>• "It now seems / researchers now think..."</li>
<li>• "Recently, it has been found that..."</li>
<li>• "New research/evidence shows..."</li>
</ul>
<p className="text-xs text-green-600 mt-2 italic">
→ These phrases signal the view the author AGREES with.
</p>
</div>
</div>
<div className="bg-teal-900 text-white rounded-xl p-4">
<p className="font-bold text-sm mb-1">STRATEGY</p>
<p className="text-xs text-teal-100">
As you read, jot on scratch paper: Old = [3-word summary] | New
= [3-word summary]. The main point is almost always the NEW
idea. If you identify the old idea, you can predict the new idea
before reading it.
</p>
</div>
</div>
{/* 4G — Overall Structure */}
<div className="scroll-reveal stagger-2 rounded-2xl p-6 mb-8 bg-white border border-slate-200 space-y-4">
<h3 className="text-lg font-bold text-slate-900">
Overall Structure of a Text — tap to reveal each pattern:
</h3>
<p className="text-sm text-slate-600">
Structure questions ask how a passage is organized. Identify the
move from one idea to another — not just what is said, but in what
sequence and for what purpose.
</p>
<RevealCardGrid
cards={STRUCTURE_PATTERNS}
columns={3}
accentColor="teal"
/>
<div className="bg-slate-800 text-white rounded-xl p-4">
<p className="font-bold text-sm mb-1">
STRATEGY for structure questions
</p>
<p className="text-xs text-slate-200">
Focus on the first and last sentence. The first usually
introduces the main move; the last usually shows where the
passage ended up. Then check the answer choices for the option
that correctly names both ends.
</p>
</div>
</div>
</section>
{/* Section 2 — Pronouns & Compression Nouns */}
<section
ref={(el) => {
sectionsRef.current[2] = el;
}}
className="min-h-screen flex flex-col justify-center mb-24"
>
<h2 className="text-4xl font-extrabold text-slate-900 mb-2">
Pronouns &amp; Compression Nouns
</h2>
<p className="text-lg text-slate-500 mb-8">
Failure to track these referents is one of the most common
comprehension errors on the SAT.
</p>
{/* 4H */}
<div className="scroll-reveal stagger-1 rounded-2xl p-6 mb-8 bg-teal-50 border border-teal-200 space-y-4">
<h3 className="text-lg font-bold text-teal-900">
Tracking Pronouns and Compression Nouns
</h3>
<p className="text-sm text-slate-700">
Pronouns (it, they, this, these) and "compression nouns" (this
phenomenon, the former, such developments) refer to ideas already
stated. Failure to track these referents is one of the most common
comprehension errors on the SAT.
</p>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="card-tilt bg-white border border-slate-200 rounded-xl p-4">
<p className="font-bold text-teal-700 text-sm mb-2">
How to Track Pronouns
</p>
<ul className="text-xs text-slate-600 space-y-1">
<li>
• Always back up to the previous sentence (or earlier) to
find the referent.
</li>
<li>• Singular pronouns (it, this) → singular noun.</li>
<li>• Plural pronouns (they, these) → plural noun.</li>
<li>
• "The former" → first-mentioned item; "the latter" →
second-mentioned item.
</li>
<li>
• Do NOT start reading at the pronoun; always work backwards
first.
</li>
</ul>
</div>
<div className="card-tilt bg-white border border-slate-200 rounded-xl p-4">
<p className="font-bold text-teal-700 text-sm mb-2">
Compression Noun Examples
</p>
<ul className="text-xs text-slate-600 space-y-1">
<li>
• "This enhanced convenience" → refers to several sentences
of prior description.
</li>
<li>
• "This divergence" → refers to genetic differences between
dolphin species.
</li>
<li>
• "Such developments" → refers to a process described in the
prior paragraph.
</li>
<li>
• "This phenomenon" → compresses a multi-sentence
explanation into one noun.
</li>
<li>
• The referent may be 3–5 lines BEFORE the compression noun.
</li>
</ul>
</div>
</div>
</div>
<div className="scroll-reveal-scale golden-rule-glow bg-teal-900 text-white rounded-2xl p-5 mb-8">
<p className="font-bold mb-1">Golden Rule</p>
<p className="text-sm text-teal-100">
The main point is NOT the first sentence — it is the "So What"
conclusion. Read the whole passage, then ask: "If I had to explain
in one sentence what the author WANTS me to believe, what would I
say?" That sentence is the main point. For Old/New passages: the
NEW idea is almost always the main point.
</p>
</div>
</section>
{/* Section 3 — Main Point Hunter widget */}
<section
ref={(el) => {
sectionsRef.current[3] = el;
}}
className="min-h-screen flex flex-col justify-center mb-24"
>
<h2 className="text-4xl font-extrabold text-slate-900 mb-2">
Main Point Hunter
</h2>
<p className="text-lg text-slate-500 mb-8">
Find the sentence that states the central idea — the "So What"
conclusion.
</p>
<EvidenceHunterWidget
exercises={EVIDENCE_EXERCISES}
accentColor="teal"
/>
</section>
{/* Section 4 — Practice */}
<section
ref={(el) => {
sectionsRef.current[4] = el;
}}
className="min-h-screen flex flex-col justify-center mb-24"
>
<h2 className="text-4xl font-extrabold text-slate-900 mb-6">
Practice Questions
</h2>
{CENTRAL_IDEAS_EASY.slice(0, 2).map((q) => (
<PracticeFromDataset key={q.id} question={q} color="teal" />
))}
{CENTRAL_IDEAS_MEDIUM.slice(0, 1).map((q) => (
<PracticeFromDataset key={q.id} question={q} color="teal" />
))}
<div className="mt-8 text-center">
<button
onClick={onFinish}
className="px-6 py-3 bg-teal-900 text-white font-bold rounded-full hover:bg-teal-700 transition-colors"
>
Finish Lesson ✓
</button>
</div>
</section>
</div>
</div>
);
};
export default EBRWCentralIdeasLesson;