import React, { useRef, useState, useEffect } from "react"; import { Check, BookOpen, AlertTriangle, Zap, FileText, GitBranch, } from "lucide-react"; import { PracticeFromDataset } from "../../../components/lessons/LessonShell"; import { BOUNDARIES_EASY, BOUNDARIES_MEDIUM, } from "../../../data/rw/boundaries"; import ClauseBreakdownWidget, { type ClauseExample, } from "../../../components/lessons/ClauseBreakdownWidget"; import DecisionTreeWidget, { type TreeScenario, type TreeNode, } from "../../../components/lessons/DecisionTreeWidget"; import RevealCardGrid, { type RevealCard, } from "../../../components/lessons/RevealCardGrid"; import useScrollReveal from "../../../components/lessons/useScrollReveal"; interface LessonProps { onFinish?: () => void; } /* ── Data for RevealCardGrid widgets ── */ const FRAGMENT_TYPES: RevealCard[] = [ { label: "Missing Subject", sublabel: '"Collected data for three years."', content: 'Add a subject: "She collected data…"', }, { label: "Missing Verb", sublabel: '"The team of researchers in the lab."', content: 'Add a verb: "The team…worked in the lab."', }, { label: "-ING Fragment", sublabel: '"Running the experiment."', content: '-ING words are never the main verb alone. Add "was" or a full subject+verb.', }, { label: "Subordinate Clause Alone", sublabel: '"Although the results were promising."', content: 'Remove "although," or attach to a main clause.', }, { label: "Relative Clause Alone", sublabel: '"Which confirmed the hypothesis."', content: "Attach to the noun it modifies.", }, ]; const CLAUSE_EXAMPLES: ClauseExample[] = [ { title: "Legal — Period / Semicolon", segments: [ { text: "The experiment failed", type: "ic", label: "Independent Clause", }, { text: ";", type: "punct" }, { text: " the researchers revised their hypothesis", type: "ic", label: "Independent Clause", }, { text: ".", type: "punct" }, ], }, { title: "Legal — Comma + FANBOYS", segments: [ { text: "The evidence was strong", type: "ic", label: "Independent Clause", }, { text: ",", type: "punct" }, { text: " but", type: "conjunction", label: "FANBOYS Conjunction" }, { text: " the committee was skeptical", type: "ic", label: "Independent Clause", }, { text: ".", type: "punct" }, ], }, { title: "Legal — Colon / Single Dash", segments: [ { text: "There was only one solution", type: "ic", label: "Independent Clause (required before colon)", }, { text: ":", type: "punct" }, { text: " abandon the project entirely", type: "modifier", label: "Explanation / List", }, { text: ".", type: "punct" }, ], }, { title: "Legal — Subordinating Conjunction", segments: [ { text: "Although the evidence was strong", type: "modifier", label: "Dependent Clause", }, { text: ",", type: "punct" }, { text: " the committee remained skeptical", type: "ic", label: "Main Clause", }, { text: ".", type: "punct" }, ], }, { title: "No Comma — FANBOYS joins a phrase (not two ICs)", segments: [ { text: "The researcher collected data", type: "ic", label: "Independent Clause", }, { text: " and", type: "conjunction", label: "FANBOYS — no comma (phrase follows)", }, { text: " analyzed results", type: "modifier", label: "Verb Phrase (no subject = not IC)", }, { text: ".", type: "punct" }, ], }, ]; const TRANSITION_SUBTREE: TreeNode = { id: "transition-check", question: "Is the connector a TRANSITION word (however, therefore, moreover, furthermore, consequently)?", hint: "Transitions are NOT conjunctions. They cannot join two sentences on their own — they need a semicolon before them.", yesLabel: "Yes — there is a transition word", noLabel: "No — no transition word", yes: { id: "transition-fix", question: "", result: "✓ Use a SEMICOLON before the transition: [IC]; however, [IC]. A comma before a transition creates a comma splice.", resultType: "correct", ruleRef: "[IC]; however, / therefore, / moreover, [IC]", }, no: { id: "no-transition", question: "", result: "✓ Use a PERIOD or SEMICOLON to separate the two complete sentences.", resultType: "correct", ruleRef: "[IC]. [IC] or [IC]; [IC]", }, }; const BOUNDARY_TREE: TreeNode = { id: "root", question: "Is there a FANBOYS conjunction (for, and, nor, but, or, yet, so) between the two clauses?", hint: "FANBOYS = For · And · Nor · But · Or · Yet · So. These 7 words can join independent clauses when preceded by a comma.", yesLabel: "Yes — there is a FANBOYS conjunction", noLabel: "No FANBOYS conjunction", yes: { id: "fanboys-check", question: "Can BOTH sides of the conjunction stand alone as complete sentences?", hint: "Cover each side. Does each have its own subject and verb and express a complete thought?", yesLabel: "Yes — both sides are complete sentences", noLabel: "No — one side is a phrase or fragment", yes: { id: "fanboys-both-ic", question: "", result: "✓ Use a COMMA before the FANBOYS conjunction: [IC], [FANBOYS] [IC].", resultType: "correct", ruleRef: "[Independent Clause], [FANBOYS] [Independent Clause]", }, no: { id: "fanboys-one-fragment", question: "", result: "✗ No comma needed. The conjunction joins a clause to a phrase, not two full sentences.", resultType: "info", ruleRef: "[IC] [FANBOYS] [phrase] — no comma before conjunction", }, }, no: { id: "no-fanboys", question: "Is there a SUBORDINATING CONJUNCTION (because, although, since, when, while, if, unless, after, before)?", hint: "Subordinating conjunctions make one clause dependent — this prevents a run-on without needing FANBOYS.", yesLabel: "Yes — there is a subordinating conjunction", noLabel: "No — no subordinating conjunction", yes: { id: "sub-conj", question: "Does the dependent clause come BEFORE the main clause?", hint: "If the dependent clause opens the sentence, a comma separates it from the main clause.", yesLabel: "Yes — dependent clause comes first", noLabel: "No — main clause comes first", yes: { id: "sub-first", question: "", result: "✓ Use a COMMA after the dependent clause: [Subordinate clause], [Main clause].", resultType: "correct", ruleRef: "[Although/Because/When...], [Main clause]", }, no: { id: "sub-last", question: "", result: "✓ No comma needed when the main clause comes first: [Main clause] [subordinate clause].", resultType: "info", ruleRef: "[Main clause] [because/although/when...]", }, }, no: TRANSITION_SUBTREE, }, }; const TREE_SCENARIOS: TreeScenario[] = [ { label: "Sentence 1", sentence: "The data was collected over three years, the researchers published their findings.", tree: BOUNDARY_TREE, }, { label: "Sentence 2", sentence: "The findings were unexpected however the team stood by their methodology.", tree: BOUNDARY_TREE, }, { label: "Sentence 3", sentence: "Although the sample size was small the results were statistically significant.", tree: BOUNDARY_TREE, }, ]; const EBRWBoundariesLesson: React.FC = ({ 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>; }) => { const isActive = activeSection === index; const isPast = activeSection > index; return ( ); }; return (
{/* ── Section 0: What Is a Sentence? ── */}
{ sectionsRef.current[0] = el; }} className="min-h-screen flex flex-col justify-center mb-24 pt-20 lg:pt-0" >
Standard English Conventions — Domain 3

Boundaries

Every boundary question is really a sentence question: can you tell where one sentence ends and another begins?

{/* §7.1 What Makes a Sentence */}

What Makes a Complete Sentence?

A sentence (independent clause) requires all three elements. If any is missing, the group of words is a{" "} fragment.

{[ { req: "A Subject", ex: "The researcher" }, { req: "A Verb", ex: "collected" }, { req: "A Complete Thought", ex: "(no dangling subordinator)" }, ].map((r) => (

{r.req}

{r.ex}

))}

Fragment Types — tap to reveal how to fix each:

Critical Warning: -ING Words Are Never the Main Verb

A word ending in -ing can never be the main verb of a sentence by itself. It always needs a helping verb (is, was, are, were) or it functions as a modifier.

  • ✗ "The scientist discovering a new compound." — fragment, no main verb
  • ✓ "The scientist was discovering a new compound." — complete, "was" is the main verb
  • ✓ "Discovering a new compound, the scientist published immediately." — modifier, "published" is the main verb

Meaning ≠ Sentence Status

A group of words can sound complete and meaningful but still be a fragment. Test it grammatically, not by how it sounds.{" "} "The data that confirmed the hypothesis" sounds fine but is a fragment — no verb applies to "the data."

{/* Group Pronouns */}

Group Pronouns: Who vs. That

WHO — for people

Introduces a clause modifying a person or group of people.

✓ "The researchers who studied the data…"

THAT — for things

Introduces a clause modifying a thing, idea, or place.

✓ "The study that confirmed the data…"

{/* The Four Sentence Types */}

The Four Sentence Types

Understanding these types helps you identify where boundaries belong.

{[ { name: "Simple", desc: "One independent clause.", ex: '"The researcher collected data."', }, { name: "Compound", desc: "Two independent clauses joined by a comma + FANBOYS or semicolon.", ex: '"The data was clear, but the committee disagreed."', }, { name: "Complex", desc: "One independent + one dependent clause.", ex: '"Although the data was clear, the committee disagreed."', }, { name: "Compound-Complex", desc: "Two independent clauses + at least one dependent.", ex: '"Although the data was clear, the lead researcher presented it, and the committee reconsidered."', }, ].map((s) => (

{s.name}

{s.desc}

{s.ex}

))}
{/* ── Section 1: Three Legal Separators ── */}
{ sectionsRef.current[1] = el; }} className="min-h-screen flex flex-col justify-center mb-24" >

The Three Legal Separators

There are exactly three legal ways to separate two independent clauses. Anything else is an error.

{/* Rule 1 */}
1

Period = Semicolon

A semicolon works{" "} exactly like a period — it separates two complete independent clauses. They are interchangeable for boundary purposes.

✓{" "} The experiment failed. The researchers revised their hypothesis.

✓{" "} The experiment failed; the researchers revised their hypothesis.

Critical: never use a semicolon after a comma (,;) and never before a FANBOYS conjunction.

{/* Rule 2 */}
2

Comma + FANBOYS

FANBOYS = For · And · Nor · But · Or · Yet · So. The comma comes{" "} before the conjunction — never after.

Critical Rule: Only use a comma when BOTH sides are independent clauses

If FANBOYS joins a clause to a{" "} phrase (no second subject), do NOT use a comma.

  • ✗ "She ran to the lab, and collected the samples." — "collected" is a phrase, not an IC
  • ✓ "She ran to the lab and collected the samples." — no comma, FANBOYS joins two verbs
  • ✓ "She ran to the lab, and she collected the samples." — comma, both sides are full ICs
{/* Rule 3 */}
3

Colon = Single Em Dash

A colon and a single em dash function identically: the material{" "} before must be a complete independent clause. What follows is an explanation, list, or restatement.

Legal — IC before colon

"There was only one option: abandon the project."

"She brought three things: a notebook, a pen, and data."

Illegal — fragment before colon

"The three items she needed: a notebook, a pen, and data."{" "} (no verb before colon)

Period/Colon Shortcut

If an answer choice ends a clause with a period or colon, the material before it must be a complete sentence. Use this to immediately eliminate fragment answers.

{/* §7.5 Subordinating Conjunctions */}

Subordinating Conjunctions

Subordinating conjunctions (because, although, since, when, while, if, unless, after, before, as, once, until) create a dependent clause — solving the run-on without needing FANBOYS.

{[ { rule: "Rule 1", label: "Comma after dependent clause (when it comes first)", ex: '"Although the results were surprising, the team continued." → Comma after the subordinate clause.', }, { rule: "Rule 2", label: "No comma before subordinate clause (when main clause comes first)", ex: '"The team continued because the results were surprising." → No comma before "because."', }, { rule: "Rule 3", label: "Do NOT use two conjunctions together", ex: '"Although X, but Y" is wrong — use only one. Drop either "although" or "but."', }, ].map((r) => (
{r.rule}

{r.label}

{r.ex}

))}

Double Conjunction Error (Very Common on SAT)

  • ✗ "Although the data was convincing,{" "} but the committee rejected it."
  • ✗ "Because the sample was large,{" "} so the results were significant."
  • ✓ "Although the data was convincing, the committee rejected it." (drop "but")
  • ✓ "The data was convincing, but the committee rejected it." (drop "although")
{/* Clause Anatomy Widget */}

Clause Anatomy

Hover over each segment to see its grammatical role and why the boundary is legal.

{/* ── Section 2: Comma Splices & Hidden Traps ── */}
{ sectionsRef.current[2] = el; }} className="min-h-screen flex flex-col justify-center mb-24" >

Comma Splices & Hidden Traps

The SAT hides boundary errors behind familiar-looking patterns. Learn to spot all of them.

{/* §7.3 Comma Splice Patterns */}

Comma Splice Trigger Patterns

A comma splice is two independent clauses joined by a comma alone. The SAT uses predictable structures to hide them.

Pattern 1: Comma + Pronoun

The most common comma splice on the SAT. A pronoun (he, she, it, they, this, that) after a comma usually signals a new independent clause.

  • ✗ "The study examined 1,000 participants,{" "} they were all volunteers."
  • ✓ "The study examined 1,000 participants ; they were all volunteers."
  • ✓ "The study examined 1,000 participants,{" "} all of whom were volunteers." (relative clause, not IC)

Pattern 2: Comma + Conjunctive Adverb (The Transition Trap)

Words like{" "} however, therefore, moreover, furthermore, consequently, nevertheless {" "} are transition adverbs — not conjunctions. They cannot join two clauses with only a comma.

  • ✗ "The data was inconclusive, however the team continued." — comma splice
  • ✓ "The data was inconclusive; however, the team continued."
  • ✓ "The data was inconclusive. The team,{" "} however, continued." — mid-sentence position

Three Legal Positions for Transition Words

  • Start: "[IC]. However, [IC]." — period, then transition at start of new sentence.
  • Middle: "[IC]; however, [IC]." — semicolon before, comma after.
  • Interior: "[IC]. The team, however, continued." — inserted mid-sentence between two commas.

Edge Case: Colon or Dash After a Non-Essential Transition

When a transition word is set off as non-essential (between commas), you may see a colon or dash immediately after the closing comma. This is legal because the colon/dash follows the full independent clause, not the transition itself.

✓ "The data, however, pointed to one conclusion: the hypothesis was wrong."

The colon follows the IC "The data...pointed to one conclusion" — the transition "however" is just a parenthetical insert.

{/* §7.4 Hidden Boundary Phrases */}

Hidden Boundary Phrases

These three constructions appear innocent but create boundary problems if not punctuated correctly.

{[ { type: "Participial Phrase (-ing modifier)", rule: "An -ing phrase at the start of a sentence modifies the subject of the main clause. Separate it with a comma.", bad: '"Running the experiment the researcher observed unexpected results."', good: '"Running the experiment, the researcher observed unexpected results."', note: 'The -ing phrase is NOT a main verb — "observed" is the main verb.', }, { type: "With...-ing Construction", rule: '"With + noun + -ing" is a modifying phrase attached to the main clause with a comma.', bad: '"With data showing a 40% increase scientists declared success."', good: '"With data showing a 40% increase, scientists declared success."', note: 'The entire "with…" phrase is a modifier, not a main clause.', }, { type: "Which Clause", rule: 'A "which" clause is non-essential — it needs a comma before it. It modifies the noun immediately preceding it.', bad: '"The result which surprised everyone was published."', good: '"The result, which surprised everyone, was published."', note: '"Which" clauses always get commas. "That" clauses never do.', }, ].map((p) => (

{p.type}

{p.rule}

  • ✗ {p.bad}
  • ✓ {p.good}
  • {p.note}
))}

The "Which-Clause-Does-It-Belong-To" Problem

A "which" clause must immediately follow the noun it modifies. Otherwise it is a misplaced modifier.

  • ✗ "The scientist published the paper in the journal,{" "} which was groundbreaking." — was the journal or paper groundbreaking?
  • ✓ "The scientist published the paper, which{" "} was groundbreaking, in the journal."

Golden Rule

A comma alone can NEVER join two independent clauses. Semicolons = periods. Transition words (however, therefore) need a semicolon or period before them — never just a comma. -ING words are never the main verb.

{/* ── Section 3: Decision Tree Lab ── */}
{ sectionsRef.current[3] = el; }} className="min-h-screen flex flex-col justify-center mb-24" >

Decision Tree Lab

Work through the boundary logic step by step to identify errors and apply the correct fix.

{[ { label: "Comma Splice", desc: "Two complete sentences joined by a comma alone — the most tested boundary error on the SAT.", }, { label: "Run-On Sentence", desc: "Two complete sentences with no punctuation between them at all.", }, { label: "Transition Trap", desc: 'Using "however" or "therefore" after only a comma. These words need a semicolon before them.', }, ].map((t) => (

{t.label}

{t.desc}

))}
{/* ── Section 4: Practice ── */}
{ sectionsRef.current[4] = el; }} className="min-h-screen flex flex-col justify-center mb-24" >

Practice Questions

{BOUNDARIES_EASY.slice(0, 2).map((q) => ( ))} {BOUNDARIES_MEDIUM.slice(0, 1).map((q) => ( ))}
); }; export default EBRWBoundariesLesson;