<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, sans-serif;
    }

    body {
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-width: 680px;
      margin: 0 auto;
    }

    /* Filter Bar */
    .filter-bar {
      display: flex;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .tab-btn {
      background: #f1f5f9;
      border: 1.5px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .tab-btn:hover {
      background: #e2e8f0;
    }

    .tab-btn.active-all {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }

    .tab-btn.active-green {
      background: #059669;
      color: #ffffff;
      border-color: #059669;
    }

    .tab-btn.active-purple {
      background: #7c3aed;
      color: #ffffff;
      border-color: #7c3aed;
    }

    /* Passage Section */
    .passage-box {
      background: #fafafa;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 12px 14px;
      font-size: 14px;
      line-height: 1.6;
      color: #334155;
    }

    .passage-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-weight: 700;
      color: #94a3b8;
      margin-bottom: 6px;
    }

    .s-green, .s-purple {
      border-radius: 4px;
      padding: 2px 4px;
      margin: 0 1px;
      transition: all 0.25s ease;
      cursor: pointer;
    }

    .s-green {
      background-color: #d1fae5;
      color: #065f46;
      border-bottom: 2px solid #10b981;
    }

    .s-purple {
      background-color: #ede9fe;
      color: #5b21b6;
      border-bottom: 2px solid #8b5cf6;
    }

    /* Dimming inactive states */
    .dimmed {
      opacity: 0.25;
      filter: grayscale(80%);
    }

    .highlighted {
      font-weight: 600;
      box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
    }

    /* Connecting indicator */
    .flow-indicator {
      display: flex;
      justify-content: space-around;
      padding: 0 24px;
      font-size: 12px;
      font-weight: 700;
      color: #94a3b8;
    }

    /* Summary Cards Grid */
    .cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    @media (max-width: 480px) {
      .cards-grid {
        grid-template-columns: 1fr;
      }
    }

    .idea-card {
      border-radius: 10px;
      padding: 10px 12px;
      cursor: pointer;
      transition: all 0.25s ease;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .idea-card.green {
      background: #f0fdf4;
      border: 2px solid #10b981;
    }

    .idea-card.purple {
      background: #faf5ff;
      border: 2px solid #8b5cf6;
    }

    .card-header {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
    }

    .green .card-header {
      color: #065f46;
    }

    .purple .card-header {
      color: #5b21b6;
    }

    .card-desc {
      font-size: 12px;
      line-height: 1.4;
      color: #475569;
    }

    .card-tag {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 2px 6px;
      border-radius: 4px;
      width: fit-content;
      margin-top: 4px;
    }

    .green .card-tag {
      background: #bbf7d0;
      color: #047857;
    }

    .purple .card-tag {
      background: #e9d5ff;
      color: #6b21a8;
    }
  </style>
</head>
<body>

  
  <div class="filter-bar">
    <button class="tab-btn active-all" id="btnAll" onclick="setFilter('all')">✦ View Both Ideas</button>
    <button class="tab-btn" id="btnGreen" onclick="setFilter('green')">🌲 Idea 1: Ecology</button>
    <button class="tab-btn" id="btnPurple" onclick="setFilter('purple')">⚖️ Idea 2: Conflict</button>
  </div>

  
  <div class="passage-box">
    <div class="passage-title">Excerpt: Yellowstone Reintroduction</div>
    <span>In 1995, gray wolves returned to Yellowstone. </span>
    <span class="s-green" onclick="setFilter('green')">By curbing elk herds, wolves allowed willow trees to recover, welcoming beavers and songbirds back.</span>
    <span> </span>
    <span class="s-purple" onclick="setFilter('purple')">However, neighboring ranchers faced livestock losses and mounted fierce legal challenges.</span>
    <span> </span>
    <span class="s-green" onclick="setFilter('green')">Plant diversity and river habitats stabilized across the northern range.</span>
    <span> </span>
    <span class="s-purple" onclick="setFilter('purple')">Meanwhile, agricultural groups demanded compensation programs and predator quotas.</span>
  </div>

  
  <div class="flow-indicator">
    <span>↓ Maps to Idea 1</span>
    <span>↓ Maps to Idea 2</span>
  </div>

  
  <div class="cards-grid">
    
    <div class="idea-card green" id="cardGreen" onclick="setFilter('green')">
      <div class="card-header">
        <span>🌲</span>
        <span>Central Idea 1</span>
      </div>
      <div class="card-desc">
        <b>Ecological Restoration:</b> Wolves revived biodiversity and plant life across Yellowstone.
      </div>
      <div class="card-tag">Elk • Willows • Beavers</div>
    </div>

    
    <div class="idea-card purple" id="cardPurple" onclick="setFilter('purple')">
      <div class="card-header">
        <span>⚖️</span>
        <span>Central Idea 2</span>
      </div>
      <div class="card-desc">
        <b>Human-Wildlife Conflict:</b> Wolf recovery sparked economic loss and legal clashes with ranchers.
      </div>
      <div class="card-tag">Ranchers • Livestock • Lawsuits</div>
    </div>
  </div>

  <script>
    let currentFilter = 'all';

    function setFilter(filter) {
      if (currentFilter === filter && filter !== 'all') {
        currentFilter = 'all';
      } else {
        currentFilter = filter;
      }
      updateView();
    }

    function updateView() {
      const btnAll = document.getElementById('btnAll');
      const btnGreen = document.getElementById('btnGreen');
      const btnPurple = document.getElementById('btnPurple');

      const greenSpans = document.querySelectorAll('.s-green');
      const purpleSpans = document.querySelectorAll('.s-purple');

      const cardGreen = document.getElementById('cardGreen');
      const cardPurple = document.getElementById('cardPurple');

      // Reset button classes
      btnAll.className = 'tab-btn' + (currentFilter === 'all' ? ' active-all' : '');
      btnGreen.className = 'tab-btn' + (currentFilter === 'green' ? ' active-green' : '');
      btnPurple.className = 'tab-btn' + (currentFilter === 'purple' ? ' active-purple' : '');

      if (currentFilter === 'all') {
        greenSpans.forEach(el => el.classList.remove('dimmed', 'highlighted'));
        purpleSpans.forEach(el => el.classList.remove('dimmed', 'highlighted'));
        cardGreen.classList.remove('dimmed');
        cardPurple.classList.remove('dimmed');
      } else if (currentFilter === 'green') {
        greenSpans.forEach(el => { el.classList.remove('dimmed'); el.classList.add('highlighted'); });
        purpleSpans.forEach(el => { el.classList.add('dimmed'); el.classList.remove('highlighted'); });
        cardGreen.classList.remove('dimmed');
        cardPurple.classList.add('dimmed');
      } else if (currentFilter === 'purple') {
        greenSpans.forEach(el => { el.classList.add('dimmed'); el.classList.remove('highlighted'); });
        purpleSpans.forEach(el => { el.classList.remove('dimmed'); el.classList.add('highlighted'); });
        cardGreen.classList.add('dimmed');
        cardPurple.classList.remove('dimmed');
      }
    }
  </script>
</body>
</html>

Determining Multiple Central Ideas in Complex Texts

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .header-pill {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #64748b;
      background: #f1f5f9;
      padding: 4px 10px;
      border-radius: 999px;
      margin-bottom: 12px;
    }

    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 600px;
    }

    @media (max-width: 480px) {
      .comparison-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }

    .column {
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      background: #f8fafc;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      cursor: pointer;
    }

    .column.active {
      border-color: #22b7ff;
      box-shadow: 0 0 0 1px #22b7ff, 0 4px 12px rgba(34, 183, 255, 0.12);
      background: #ffffff;
    }

    .role-title {
      font-size: 14px;
      font-weight: 800;
      margin-bottom: 2px;
    }

    .role-sub {
      font-size: 11px;
      color: #64748b;
      font-weight: 600;
      margin-bottom: 12px;
    }

    .stage {
      height: 100px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      margin-bottom: 10px;
      background: #ffffff;
      border-radius: 8px;
      border: 1px dashed #cbd5e1;
    }

    .column.active .stage {
      border-style: solid;
      border-color: #e2e8f0;
    }

    /* Left Visual: Single Twig / Branch */
    .branch-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .branch-icon {
      font-size: 32px;
      line-height: 1;
    }

    /* Right Visual: Umbrella over 3 items */
    .umbrella-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }

    .umbrella-top {
      font-size: 34px;
      line-height: 1;
      margin-bottom: 4px;
    }

    .sheltered-items {
      display: flex;
      justify-content: center;
      gap: 8px;
      font-size: 18px;
      background: #f1f5f9;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid #e2e8f0;
    }

    .quote-box {
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      font-style: italic;
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      padding: 0 4px;
      line-height: 1.3;
    }

    .tag {
      font-size: 11px;
      font-weight: 700;
      padding: 5px 10px;
      border-radius: 6px;
      width: 100%;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .tag-narrow {
      background: #fee2e2;
      color: #b91c1c;
    }

    .tag-broad {
      background: #dbeafe;
      color: #1d4ed8;
    }
  </style>
</head>
<body>

  <div class="header-pill">Scope Test</div>

  <div class="comparison-grid">
    
    <div class="column" id="col-detail" onclick="selectCol('detail')">
      <div class="role-title">Supporting Detail</div>
      <div class="role-sub">Too Narrow</div>

      <div class="stage">
        <div class="branch-box">
          <div class="branch-icon">🌿</div>
          <span style="font-size: 10px; font-weight: 700; color: #64748b;">1 Element</span>
        </div>
      </div>

      <div class="quote-box">"Willow trees grew taller along riverbanks"</div>
      <div class="tag tag-narrow">Supports 1 Sentence</div>
    </div>

    
    <div class="column active" id="col-idea" onclick="selectCol('idea')">
      <div class="role-title">Central Idea</div>
      <div class="role-sub">Broad Umbrella</div>

      <div class="stage">
        <div class="umbrella-box">
          <div class="umbrella-top">☂️</div>
          <div class="sheltered-items">
            <span title="Trees">🌲</span>
            <span title="Birds">🦅</span>
            <span title="Beavers">🦫</span>
          </div>
        </div>
      </div>

      <div class="quote-box">"Predators triggered a widespread ecosystem revival"</div>
      <div class="tag tag-broad">Carries Entire Text</div>
    </div>
  </div>

  <script>
    function selectCol(type) {
      document.getElementById('col-detail').classList.toggle('active', type === 'detail');
      document.getElementById('col-idea').classList.toggle('active', type === 'idea');
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, sans-serif;
    }

    body {
      background: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .diagram {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    /* TOPIC CARD */
    .topic-card {
      background: #f8fafc;
      border: 2px solid #cbd5e1;
      border-radius: 12px;
      padding: 10px 18px;
      text-align: center;
      width: 100%;
      max-width: 320px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      transition: all 0.3s ease;
    }

    .badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 2px 8px;
      border-radius: 20px;
      margin-bottom: 4px;
    }

    .topic-badge {
      background: #e2e8f0;
      color: #475569;
    }

    .topic-title {
      font-size: 17px;
      font-weight: 700;
      color: #0f172a;
    }

    /* CONNECTOR SVG */
    .connector-box {
      width: 100%;
      max-width: 480px;
      height: 42px;
      display: flex;
      justify-content: center;
    }

    .connector-svg {
      width: 100%;
      height: 100%;
    }

    /* BRANCHES CONTAINER */
    .branches {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
    }

    @media (max-width: 460px) {
      .branches {
        grid-template-columns: 1fr;
      }
      .connector-box {
        display: none;
      }
    }

    /* CENTRAL IDEA CARDS */
    .idea-card {
      border-radius: 12px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      border: 2px solid transparent;
      cursor: pointer;
      user-select: none;
      transition: all 0.25s ease;
    }

    .idea-blue {
      background: #eff6ff;
      border-color: #93c5fd;
    }

    .idea-blue .badge {
      background: #dbeafe;
      color: #1d4ed8;
    }

    .idea-blue .idea-title {
      color: #1e40af;
    }

    .idea-orange {
      background: #fff7ed;
      border-color: #fdba74;
    }

    .idea-orange .badge {
      background: #ffedd5;
      color: #c2410c;
    }

    .idea-orange .idea-title {
      color: #9a3412;
    }

    .idea-title {
      font-size: 14px;
      font-weight: 700;
      line-height: 1.2;
    }

    .idea-desc {
      font-size: 13px;
      line-height: 1.35;
      color: #334155;
    }

    /* INTERACTION CONTROLS */
    .controls {
      display: flex;
      gap: 8px;
      margin-top: 6px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .filter-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #475569;
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .filter-btn:hover {
      background: #e2e8f0;
    }

    .filter-btn.active {
      background: #0ea5e9;
      border-color: #0ea5e9;
      color: #ffffff;
    }

    /* ACTIVE / DIMMED STATES */
    .dimmed {
      opacity: 0.35;
      transform: scale(0.98);
    }

    .highlighted {
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      transform: translateY(-2px);
    }
  </style>
</head>
<body>

  <div class="diagram">
    
    <div id="topicCard" class="topic-card">
      <span class="badge topic-badge">Topic (Broad Subject)</span>
      <div class="topic-title">🚗 Electric Cars</div>
    </div>

    
    <div class="connector-box">
      <svg class="connector-svg" viewBox="0 0 400 42" preserveAspectRatio="none">
        <path d="M 200 0 L 200 16 L 100 16 L 100 38" fill="none" stroke="#93c5fd" stroke-width="2.5" stroke-linecap="round"/>
        <polygon points="96,36 104,36 100,42" fill="#93c5fd"/>
        
        <path d="M 200 0 L 200 16 L 300 16 L 300 38" fill="none" stroke="#fdba74" stroke-width="2.5" stroke-linecap="round"/>
        <polygon points="296,36 304,36 300,42" fill="#fdba74"/>
      </svg>
    </div>

    
    <div class="branches">
      
      <div id="card1" class="idea-card idea-blue" onclick="selectView('1')">
        <div><span class="badge">Central Idea 1 (Tech & Env)</span></div>
        <div class="idea-title">🔋 Cleaner Travel</div>
        <div class="idea-desc">Battery advances make vehicles cleaner and more efficient.</div>
      </div>

      
      <div id="card2" class="idea-card idea-orange" onclick="selectView('2')">
        <div><span class="badge">Central Idea 2 (Grid & Economy)</span></div>
        <div class="idea-title">⚡ Costly Upgrades</div>
        <div class="idea-desc">National adoption requires expensive grid expansions.</div>
      </div>
    </div>

    
    <div class="controls">
      <button id="btnAll" class="filter-btn active" onclick="selectView('all')">Show Both Ideas</button>
      <button id="btn1" class="filter-btn" onclick="selectView('1')">Focus Idea 1</button>
      <button id="btn2" class="filter-btn" onclick="selectView('2')">Focus Idea 2</button>
    </div>
  </div>

  <script>
    function selectView(mode) {
      const c1 = document.getElementById('card1');
      const c2 = document.getElementById('card2');
      const bAll = document.getElementById('btnAll');
      const b1 = document.getElementById('btn1');
      const b2 = document.getElementById('btn2');

      // Reset buttons
      bAll.classList.remove('active');
      b1.classList.remove('active');
      b2.classList.remove('active');

      // Reset card states
      c1.classList.remove('dimmed', 'highlighted');
      c2.classList.remove('dimmed', 'highlighted');

      if (mode === '1') {
        b1.classList.add('active');
        c1.classList.add('highlighted');
        c2.classList.add('dimmed');
      } else if (mode === '2') {
        b2.classList.add('active');
        c2.classList.add('highlighted');
        c1.classList.add('dimmed');
      } else {
        bAll.classList.add('active');
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, sans-serif;
    }

    body {
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .diagram-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      width: 100%;
      max-width: 580px;
    }

    .model-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .model-title {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      text-align: center;
    }

    .doc-page {
      width: 100%;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: relative;
      transition: border-color 0.25s ease;
    }

    .paragraph-block {
      border-radius: 6px;
      padding: 6px 8px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      transition: opacity 0.25s ease, box-shadow 0.25s ease;
    }

    .p-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }

    .line-group {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .text-line {
      height: 5px;
      border-radius: 3px;
      width: 100%;
      opacity: 0.45;
    }

    .text-line.short {
      width: 70%;
    }

    /* Sectional Colors */
    .sec-part1 {
      background: #fef3c7;
      border-left: 4px solid #f59e0b;
    }
    .sec-part1 .tag {
      color: #b45309;
    }
    .sec-part1 .text-line {
      background: #f59e0b;
    }

    .sec-part2 {
      background: #e0f2fe;
      border-left: 4px solid #0284c7;
    }
    .sec-part2 .tag {
      color: #0369a1;
    }
    .sec-part2 .text-line {
      background: #0284c7;
    }

    /* Thematic Dual-Strand Rows */
    .thematic-block {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      padding: 6px;
    }

    .strand {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 3px 6px;
      border-radius: 4px;
      margin-bottom: 3px;
    }

    .strand:last-child {
      margin-bottom: 0;
    }

    .strand-a {
      background: #ecfdf5;
      border-left: 3px solid #10b981;
    }
    .strand-a .tag {
      color: #047857;
    }
    .strand-a .text-line {
      background: #10b981;
    }

    .strand-b {
      background: #eef2ff;
      border-left: 3px solid #6366f1;
    }
    .strand-b .tag {
      color: #4338ca;
    }
    .strand-b .text-line {
      background: #6366f1;
    }

    .tag {
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }

    /* Interactive Stepper */
    .controls {
      display: flex;
      gap: 6px;
      margin-top: 12px;
      align-items: center;
      justify-content: center;
    }

    .step-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
    }

    .step-btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }

    .dimmed {
      opacity: 0.25;
    }

    .highlighted {
      box-shadow: 0 0 0 2px #1e2945;
    }

    @media (max-width: 420px) {
      .diagram-grid {
        gap: 8px;
      }
      .tag {
        font-size: 11px;
      }
      .model-title {
        font-size: 14px;
      }
      .doc-page {
        padding: 6px;
        gap: 6px;
      }
    }
  </style>
</head>
<body>

  <div class="diagram-grid">
    
    <div class="model-col">
      <div class="model-title">Sectional</div>
      <div class="doc-page" id="docLeft">
        <div class="paragraph-block sec-part1" data-p="1">
          <div class="tag">Part 1: History</div>
          <div class="line-group">
            <div class="text-line"></div>
            <div class="text-line short"></div>
          </div>
        </div>
        <div class="paragraph-block sec-part1" data-p="2">
          <div class="tag">Part 1: History</div>
          <div class="line-group">
            <div class="text-line"></div>
            <div class="text-line short"></div>
          </div>
        </div>
        <div class="paragraph-block sec-part2" data-p="3">
          <div class="tag">Part 2: Economy</div>
          <div class="line-group">
            <div class="text-line"></div>
            <div class="text-line short"></div>
          </div>
        </div>
        <div class="paragraph-block sec-part2" data-p="4">
          <div class="tag">Part 2: Economy</div>
          <div class="line-group">
            <div class="text-line"></div>
            <div class="text-line short"></div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="model-col">
      <div class="model-title">Thematic</div>
      <div class="doc-page" id="docRight">
        <div class="paragraph-block thematic-block" data-p="1">
          <div class="strand strand-a">
            <span class="tag">Ecology</span>
            <div class="text-line"></div>
          </div>
          <div class="strand strand-b">
            <span class="tag">Commerce</span>
            <div class="text-line"></div>
          </div>
        </div>
        <div class="paragraph-block thematic-block" data-p="2">
          <div class="strand strand-a">
            <span class="tag">Ecology</span>
            <div class="text-line"></div>
          </div>
          <div class="strand strand-b">
            <span class="tag">Commerce</span>
            <div class="text-line"></div>
          </div>
        </div>
        <div class="paragraph-block thematic-block" data-p="3">
          <div class="strand strand-a">
            <span class="tag">Ecology</span>
            <div class="text-line"></div>
          </div>
          <div class="strand strand-b">
            <span class="tag">Commerce</span>
            <div class="text-line"></div>
          </div>
        </div>
        <div class="paragraph-block thematic-block" data-p="4">
          <div class="strand strand-a">
            <span class="tag">Ecology</span>
            <div class="text-line"></div>
          </div>
          <div class="strand strand-b">
            <span class="tag">Commerce</span>
            <div class="text-line"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="step-btn active" data-step="all">All</button>
    <button class="step-btn" data-step="1">¶ 1</button>
    <button class="step-btn" data-step="2">¶ 2</button>
    <button class="step-btn" data-step="3">¶ 3</button>
    <button class="step-btn" data-step="4">¶ 4</button>
  </div>

  <script>
    const buttons = document.querySelectorAll('.step-btn');
    const blocks = document.querySelectorAll('.paragraph-block');

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        buttons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        const step = btn.dataset.step;

        blocks.forEach(block => {
          if (step === 'all') {
            block.classList.remove('dimmed', 'highlighted');
          } else {
            if (block.dataset.p === step) {
              block.classList.remove('dimmed');
              block.classList.add('highlighted');
            } else {
              block.classList.add('dimmed');
              block.classList.remove('highlighted');
            }
          }
        });
      });
    });
  </script>
</body>
</html>

Identifying Explicit Textual Evidence in Primary Sources

Drawing Logical Inferences from Secondary Historical Accounts

Constructing Historical Claims with Textual Evidence

Using Accurate Historical Facts and Data to Strengthen Claims

Distinguishing Central Ideas from Supporting Details in History

Crafting Objective Summaries of Primary Sources

Summarizing Secondary Historical Articles Accurately

Separating Prior Knowledge from Text-Based Information

Tracing Central Idea Development Across Historical Speeches

Evaluating Evidence Sufficiency in Short Historical Texts

Reading Grade-Level Informational History Texts Independently

social-studies

Citing Textual Evidence and Summarizing Historical Sources (Grades 6–8)

¿Qué es una tipología textual? Criterios de clasificación

El texto narrativo: estructura y rasgos distintivos

El texto descriptivo: prosopografía, etopeya y topografía

El texto expositivo: organización lógica y claridad

El texto argumentativo: tesis, argumentos y postura

El texto instructivo: pasos, secuencias y verbos en imperativo

Tipologías textuales: clasificación y características

Tracing How Central Ideas Develop Across a Text

Analyzing How Subtopics and Classifications Support Central Ideas

Distinguishing Essential Details From Interesting Trivia

Writing an Objective Summary Free From Personal Opinion and Bias

Summarizing Technical and Scientific Conclusions Objectively

Central Ideas, Subtopics, and Objective Summaries

Writing an Objective Summary With Central Ideas

Writing About How an Author Develops a Key Idea

Finding Central Ideas in Primary Source Documents

Summarizing Primary Sources Objectively

Identifying Key Steps in Historical Processes

Tracing How a Bill Becomes Law

Tracing How Interest Rates Are Raised or Lowered

Identifying Process Steps in Social Studies Texts

Summarizing Historical and Social Studies Sources

Secuencias textuales híbridas: narración dentro de la exposición

Secuencias textuales híbridas: argumentación y descripción

Comparación de estructuras formales entre diversos tipos de texto

El registro formal e informal según la tipología textual

Clasificación práctica de textos reales del entorno cotidiano

Síntesis y aplicación de tipologías textuales

La lectura literal: localización de datos y detalles clave

Idea principal y oraciones tópicas en el párrafo

Ideas secundarias: ejemplos, justificaciones y detalles

La inferencia textual: deducir lo no dicho a partir de pistas

Formulación de hipótesis de lectura: antes, durante y después

El propósito del autor: informar, persuadir, entretener o advertir

El tono del texto: irónico, humorístico, solemne o crítico

Comprensión literal e inferencial del texto

What Does "Cite Textual Evidence" Mean in Informational Text?

Quoting From Informational Texts to Support Analysis

Citing Evidence From Science Articles

Finding Central Ideas in Science Texts

Following Multistep Procedures in Science Texts

Following Technical Instructions Precisely

Citing Evidence and Summarizing Science and Technical Texts

Citing Several Pieces of Evidence for a Single Claim

Using Multiple Pieces of Evidence for Informational Analysis

Quoting and Paraphrasing Informational Evidence

Determining Two or More Central Ideas

Summarizing Without Personal Opinion

Applying Evidence and Summary Skills to a Full Article

Evidence, Central Ideas, and Summaries in Informational Text

Evaluating Details to Determine Key Ideas

Distinguishing Key Ideas From Minor Details

Determining Which Details Most Strongly Support Key Ideas

Evaluating Details to Determine Central Ideas

Paraphrasing Texts While Maintaining Meaning

Summarizing Texts in Logical Order

Paraphrasing Longer Passages Accurately

Summarizing Multiple Texts on One Topic

Paraphrasing and Summarizing Texts

Analyzing the Controlling Idea or Thesis in Informational Text

Analyzing Supporting Evidence for the Thesis in Informational Text

Analyzing References and Acknowledgements in Informational Texts

Analyzing Organizational Patterns for Multiple Topics and Subcategories

Identifying the Claim in Argumentative Texts

Analyzing Types of Evidence Used to Support an Argument

Analyzing How Authors Consider Alternatives in Arguments

Identifying the Intended Audience in Argumentative Texts

Analyzing Characteristics of Multimodal and Digital Texts

Analyzing Informational, Argumentative, and Multimodal Texts

Planificación textual: audiencia, tema, propósito y tipo de texto

Esquema de secuencias para el texto argumentativo oral y escrito

Formulación de la hipótesis para demostrar en un texto oral

Tipos de argumentos: de autoridad, ejemplificación y datos

La contraargumentación: anticipar objeciones y refutarlas

Fundamentos de la argumentación: planificación y tesis

Conectores lógicos: aditivos, adversativos, causales y consecutivos

Uso de estrategias descriptivas para demostrar la hipótesis oral

La comunicación oral en situaciones comunicativas auténticas

Redacción del borrador: coherencia global y lineal

Revisión y edición: ortografía, puntuación y estilo

Comparación crítica entre el artículo de opinión y la noticia

Publicación y socialización del texto escrito en la comunidad escolar

Producción oral y escrita del texto argumentativo

OGE.8.RI.2

OGE.8.RI.2

Aligned learning resources

Related diagrams