774 lines
32 KiB
TypeScript
774 lines
32 KiB
TypeScript
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.ComponentType<React.SVGProps<SVGSVGElement>>;
|
||
}) => {
|
||
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 & Main Point"
|
||
icon={BookOpen}
|
||
/>
|
||
<SectionMarker
|
||
index={1}
|
||
title="Old/New & Structure"
|
||
icon={Target}
|
||
/>
|
||
<SectionMarker
|
||
index={2}
|
||
title="Pronouns & 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 & Ideas — Domain 2
|
||
</div>
|
||
<h2 className="text-4xl font-extrabold text-slate-900 mb-2">
|
||
Central Ideas & 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 & 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 & 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 & 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;
|