<!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;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      user-select: none;
      -webkit-user-select: none;
    }

    /* Controls Header */
    .toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }

    .btn-group {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .nav-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 5px 10px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    }

    .nav-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    /* Book Page Layout */
    .page-layout {
      position: relative;
      display: grid;
      grid-template-columns: 1.45fr 1fr;
      gap: 16px;
      background: #fdfbf7;
      border-radius: 8px;
      padding: 18px 14px;
      border: 1px solid #e7e5e4;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      min-height: 290px;
    }

    /* Vertical Margin Divider Line */
    .margin-divider {
      position: absolute;
      top: 10px;
      bottom: 10px;
      left: calc(59% - 1px);
      width: 2px;
      background: #e2e8f0;
      border-radius: 1px;
    }

    /* Passage Column */
    .passage-col {
      font-family: Georgia, Cambria, "Times New Roman", serif;
      font-size: 15.5px;
      line-height: 1.85;
      color: #292524;
      position: relative;
      z-index: 2;
    }

    .passage-title {
      font-family: system-ui, sans-serif;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #78716c;
      margin-bottom: 8px;
    }

    /* Target Highlights */
    .target-highlight {
      position: relative;
      cursor: pointer;
      border-radius: 3px;
      padding: 1px 2px;
      transition: background-color 0.2s, box-shadow 0.2s, opacity 0.2s;
    }

    /* Target 1: Underline Amber */
    .target-1 {
      border-bottom: 2.5px solid #d97706;
      background-color: rgba(251, 191, 36, 0.15);
    }
    .target-1.focused {
      background-color: rgba(251, 191, 36, 0.4);
      box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.3);
    }

    /* Target 2: Circle / Pill Indigo */
    .target-2 {
      border: 1.5px dashed #6366f1;
      border-radius: 6px;
      padding: 0px 4px;
      background-color: rgba(99, 102, 241, 0.12);
    }
    .target-2.focused {
      background-color: rgba(99, 102, 241, 0.28);
      border-style: solid;
      box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
    }

    /* Target 3: Underline Emerald */
    .target-3 {
      border-bottom: 2.5px solid #059669;
      background-color: rgba(16, 185, 129, 0.15);
    }
    .target-3.focused {
      background-color: rgba(16, 185, 129, 0.35);
      box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.3);
    }

    /* Dimming inactive when one is focused */
    .page-layout.focus-mode .target-highlight:not(.focused) {
      opacity: 0.45;
    }

    /* Margin Notes Column */
    .margin-col {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 12px;
      position: relative;
      z-index: 2;
    }

    .margin-note-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, opacity 0.2s;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .margin-note-card:hover {
      border-color: #94a3b8;
    }

    .margin-note-card.focused {
      transform: translateX(-3px);
      box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    }

    .page-layout.focus-mode .margin-note-card:not(.focused) {
      opacity: 0.35;
    }

    .margin-note-card.note-1.focused {
      border-color: #d97706;
      background: #fffbeb;
    }

    .margin-note-card.note-2.focused {
      border-color: #6366f1;
      background: #eef2ff;
    }

    .margin-note-card.note-3.focused {
      border-color: #059669;
      background: #ecfdf5;
    }

    .badge {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
    }

    .badge-amber {
      background: #fef3c7;
      color: #92400e;
      border: 1px solid #fde68a;
    }

    .badge-indigo {
      background: #e0e7ff;
      color: #3730a3;
      border: 1px solid #c7d2fe;
    }

    .badge-emerald {
      background: #d1fae5;
      color: #065f46;
      border: 1px solid #a7f3d0;
    }

    .note-content {
      display: flex;
      flex-direction: column;
    }

    .note-text {
      font-size: 13px;
      font-weight: 700;
      color: #1e293b;
      line-height: 1.25;
    }

    .note-tag {
      font-size: 11px;
      font-weight: 500;
      color: #64748b;
      margin-top: 2px;
    }

    /* SVG Connecting Lines Canvas */
    .connectors-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    .connector-path {
      fill: none;
      stroke-width: 2;
      stroke-dasharray: 4 3;
      transition: stroke-opacity 0.2s, stroke-width 0.2s;
    }

    .connector-1 { stroke: #d97706; }
    .connector-2 { stroke: #6366f1; }
    .connector-3 { stroke: #059669; }

    .page-layout.focus-mode .connector-path:not(.focused) {
      stroke-opacity: 0.15;
    }

    .connector-path.focused {
      stroke-width: 2.5;
      stroke-dasharray: none;
      stroke-opacity: 1;
    }

    /* Footer Prompt */
    .footer-tip {
      font-size: 12px;
      color: #64748b;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    @media (max-width: 480px) {
      .page-layout {
        grid-template-columns: 1.35fr 1fr;
        padding: 12px 8px;
        gap: 10px;
      }
      .margin-divider {
        left: calc(57% - 1px);
      }
      .passage-col {
        font-size: 14px;
        line-height: 1.7;
      }
      .note-text {
        font-size: 11.5px;
      }
      .note-tag {
        font-size: 10px;
      }
      .badge {
        width: 24px;
        height: 24px;
        font-size: 12px;
      }
    }
  </style>
</head>
<body>

  
  <div class="toolbar">
    <div class="btn-group">
      <button class="nav-btn active" data-step="0">View All</button>
      <button class="nav-btn" data-step="1">⭐ Home</button>
      <button class="nav-btn" data-step="2">⭕ Vocab</button>
      <button class="nav-btn" data-step="3">💡 Action</button>
    </div>
  </div>

  
  <div class="page-layout" id="pageLayout">
    <div class="margin-divider"></div>

    
    <svg class="connectors-svg" id="connectorsSvg"></svg>

    
    <div class="passage-col">
      <div class="passage-title">Book Excerpt</div>
      The anglerfish <span class="target-highlight target-1" id="target1" data-note="1">lives in the midnight zone</span> of the ocean where sunlight cannot reach. To catch prey in the pitch black, it uses <span class="target-highlight target-2" id="target2" data-note="2">bioluminescence</span> — a glowing lure that hangs from its head. When smaller fish swim close to investigate the light, the anglerfish <span class="target-highlight target-3" id="target3" data-note="3">snaps its massive jaw shut!</span>
    </div>

    
    <div class="margin-col">
      <div class="margin-note-card note-1" id="note1" data-note="1">
        <div class="badge badge-amber">⭐</div>
        <div class="note-content">
          <div class="note-text">Deep sea home</div>
          <div class="note-tag">Main Setting</div>
        </div>
      </div>

      <div class="margin-note-card note-2" id="note2" data-note="2">
        <div class="badge badge-indigo">⭕</div>
        <div class="note-content">
          <div class="note-text">New word: glowing</div>
          <div class="note-tag">Vocabulary</div>
        </div>
      </div>

      <div class="margin-note-card note-3" id="note3" data-note="3">
        <div class="badge badge-emerald">💡</div>
        <div class="note-content">
          <div class="note-text">Trap method!</div>
          <div class="note-tag">Key Behavior</div>
        </div>
      </div>
    </div>
  </div>

  
  <div class="footer-tip">
    <span>✦ Tap any highlight or margin note to isolate its connection</span>
  </div>

  <script>
    let activeStep = 0;

    const pageLayout = document.getElementById('pageLayout');
    const svg = document.getElementById('connectorsSvg');
    const navButtons = document.querySelectorAll('.nav-btn');

    const targets = [
      document.getElementById('target1'),
      document.getElementById('target2'),
      document.getElementById('target3')
    ];

    const notes = [
      document.getElementById('note1'),
      document.getElementById('note2'),
      document.getElementById('note3')
    ];

    function drawConnectors() {
      svg.innerHTML = '';
      const svgRect = svg.getBoundingClientRect();

      targets.forEach((target, i) => {
        const note = notes[i];
        const tRect = target.getBoundingClientRect();
        const nRect = note.getBoundingClientRect();

        const x1 = tRect.right - svgRect.left;
        const y1 = tRect.top + tRect.height / 2 - svgRect.top;
        const x2 = nRect.left - svgRect.left;
        const y2 = nRect.top + nRect.height / 2 - svgRect.top;

        const dx = (x2 - x1) * 0.45;

        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        const d = `M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2} ${y2}`;
        path.setAttribute('d', d);
        path.setAttribute('class', `connector-path connector-${i + 1} ${activeStep === (i + 1) ? 'focused' : ''}`);

        // Add an end dot on the target
        const dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        dot.setAttribute('cx', x1);
        dot.setAttribute('cy', y1);
        dot.setAttribute('r', '2.5');
        dot.setAttribute('fill', i === 0 ? '#d97706' : i === 1 ? '#6366f1' : '#059669');

        svg.appendChild(path);
        svg.appendChild(dot);
      });
    }

    function setStep(step) {
      activeStep = step;

      navButtons.forEach(btn => {
        btn.classList.toggle('active', parseInt(btn.dataset.step) === step);
      });

      if (step === 0) {
        pageLayout.classList.remove('focus-mode');
        targets.forEach(t => t.classList.remove('focused'));
        notes.forEach(n => n.classList.remove('focused'));
      } else {
        pageLayout.classList.add('focus-mode');
        targets.forEach((t, i) => t.classList.toggle('focused', i + 1 === step));
        notes.forEach((n, i) => n.classList.toggle('focused', i + 1 === step));
      }

      drawConnectors();
    }

    // Button event listeners
    navButtons.forEach(btn => {
      btn.addEventListener('click', () => {
        const step = parseInt(btn.dataset.step);
        setStep(step);
      });
    });

    // Element tap listeners
    function attachNoteToggle(el, index) {
      el.addEventListener('click', () => {
        if (activeStep === index) {
          setStep(0);
        } else {
          setStep(index);
        }
      });
    }

    targets.forEach((t, i) => attachNoteToggle(t, i + 1));
    notes.forEach((n, i) => attachNoteToggle(n, i + 1));

    // Responsive line recalculation
    window.addEventListener('resize', drawConnectors);
    window.addEventListener('load', drawConnectors);
    setTimeout(drawConnectors, 50);
  </script>
</body>
</html>

Annotating Key Concepts and Questions in Margin Notes

<!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">
  <title>Highlighter Trap vs. Targeted Annotation</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: transparent;
      color: #1e293b;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
    }

    .title-row {
      text-align: center;
    }

    .title-row h1 {
      font-size: 17px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: -0.01em;
    }

    .columns-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      align-items: stretch;
    }

    @media (max-width: 520px) {
      .columns-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }
    }

    .column {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.01em;
      align-self: flex-start;
    }

    .badge-bad {
      background: #fee2e2;
      color: #b91c1c;
      border: 1px solid #fca5a5;
    }

    .badge-good {
      background: #d1fae5;
      color: #047857;
      border: 1px solid #6ee7b7;
    }

    .page-snippet {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 14px;
      font-size: 13.5px;
      line-height: 1.7;
      color: #334155;
      position: relative;
      flex-grow: 1;
    }

    /* Heavy Highlighter Trap */
    .heavy-hl {
      background: #fde047;
      color: #0f172a;
      box-shadow: 0 0 0 2px #fde047;
      border-radius: 2px;
    }

    /* Targeted Annotations */
    .ink-circle {
      position: relative;
      display: inline-block;
      color: #0f172a;
      font-weight: 600;
      padding: 0 4px;
      z-index: 1;
    }

    .ink-circle::after {
      content: '';
      position: absolute;
      inset: -2px -4px;
      border: 2px solid #2563eb;
      border-radius: 12px 14px 10px 16px;
      pointer-events: none;
      transform: rotate(-1deg);
    }

    .soft-hl {
      background: rgba(254, 240, 138, 0.75);
      border-bottom: 2px solid #facc15;
      padding: 0 2px;
      font-weight: 600;
      color: #0f172a;
      border-radius: 2px;
    }

    .margin-note-box {
      margin-top: 10px;
      padding-top: 8px;
      border-top: 1px dashed #cbd5e1;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .margin-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      color: #2563eb;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 6px;
      padding: 3px 8px;
      width: fit-content;
    }

    .margin-tag.question {
      color: #7c3aed;
      background: #f5f3ff;
      border-color: #ddd6fe;
    }

    .banner {
      padding: 8px 10px;
      border-radius: 6px;
      font-size: 11.5px;
      line-height: 1.4;
      font-weight: 500;
    }

    .banner-bad {
      background: #fff1f2;
      border-left: 3px solid #ef4444;
      color: #991b1b;
    }

    .banner-good {
      background: #ecfdf5;
      border-left: 3px solid #10b981;
      color: #065f46;
    }

    .scan-btn {
      align-self: center;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 20px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.2s ease, border-color 0.2s ease;
      margin-top: 2px;
    }

    .scan-btn:hover {
      background: #e2e8f0;
      border-color: #94a3b8;
    }

    .scan-mode .heavy-hl {
      filter: blur(1.5px);
      opacity: 0.7;
    }

    .scan-mode .target-focus {
      background: #fef08a;
      box-shadow: 0 0 8px rgba(250, 204, 21, 0.8);
    }
  </style>
</head>
<body>

  <div class="title-row">
    <h1>The Highlighter Trap vs. Targeted Annotation</h1>
  </div>

  <div class="columns-grid">
    
    <div class="column">
      <div class="badge badge-bad">
        <span>❌ Over-Highlighting (Passive)</span>
      </div>

      <div class="page-snippet" id="leftSnippet">
        <mark class="heavy-hl">Ecosystems maintain balance through energy flow. Producers absorb sunlight and convert it via photosynthesis. Primary consumers feed on plants, transferring nutrients forward. Decomposers recycle matter back into the soil.</mark>
      </div>

      <div class="banner banner-bad">
        <strong>Visual fatigue:</strong> When everything is highlighted, nothing stands out. Zero synthesis.
      </div>
    </div>

    
    <div class="column">
      <div class="badge badge-good">
        <span>✅ Targeted Annotations (Active)</span>
      </div>

      <div class="page-snippet" id="rightSnippet">
        Ecosystems maintain balance through energy flow. <span class="ink-circle">Producers</span> absorb sunlight and convert it via <mark class="soft-hl target-focus">photosynthesis</mark>. Primary consumers feed on plants, transferring nutrients forward. Decomposers recycle matter back into the soil.

        <div class="margin-note-box">
          <div class="margin-tag">
            <span>☀️ Energy engine! (Producers)</span>
          </div>
          <div class="margin-tag question">
            <span>❓ Q: Who recycles?</span>
          </div>
        </div>
      </div>

      <div class="banner banner-good">
        <strong>Fast retrieval:</strong> Key concepts pop instantly. Margin notes guide active recall.
      </div>
    </div>
  </div>

  <button class="scan-btn" id="toggleScan" aria-label="Toggle 3-second scan test">
    <span>⏱️ Simulate 3-Second Quick Scan</span>
  </button>

  <script>
    const btn = document.getElementById('toggleScan');
    let scanning = false;

    btn.addEventListener('click', () => {
      scanning = !scanning;
      if (scanning) {
        document.body.classList.add('scan-mode');
        btn.innerHTML = '<span>🔄 Reset View</span>';
        btn.style.background = '#e2e8f0';
      } else {
        document.body.classList.remove('scan-mode');
        btn.innerHTML = '<span>⏱️ Simulate 3-Second Quick Scan</span>';
        btn.style.background = '#f1f5f9';
      }
    });
  </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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .title {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: -0.2px;
    }

    .hint {
      font-size: 12px;
      color: #64748b;
    }

    .symbol-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .symbol-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 9px 12px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      cursor: pointer;
      user-select: none;
      transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .symbol-row:hover {
      background: #f1f5f9;
    }

    .icon-badge {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
      background: #ffffff;
      border: 1px solid #e2e8f0;
    }

    .row-text {
      flex: 1;
      min-width: 0;
    }

    .row-title {
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      line-height: 1.2;
      margin-bottom: 2px;
    }

    .row-desc {
      font-size: 12px;
      color: #64748b;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Active Row Styles */
    .symbol-row.active.row-star {
      background: #fefce8;
      border-color: #eab308;
      box-shadow: 0 2px 6px rgba(234, 179, 8, 0.15);
    }
    .symbol-row.active.row-star .icon-badge {
      background: #fef08a;
      border-color: #fde047;
    }

    .symbol-row.active.row-vocab {
      background: #faf5ff;
      border-color: #a855f7;
      box-shadow: 0 2px 6px rgba(168, 85, 247, 0.15);
    }
    .symbol-row.active.row-vocab .icon-badge {
      background: #f3e8ff;
      border-color: #e9d5ff;
    }

    .symbol-row.active.row-question {
      background: #f0f9ff;
      border-color: #0284c7;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15);
    }
    .symbol-row.active.row-question .icon-badge {
      background: #e0f2fe;
      border-color: #bae6fd;
    }

    .symbol-row.active.row-exclamation {
      background: #fff7ed;
      border-color: #f97316;
      box-shadow: 0 2px 6px rgba(249, 115, 22, 0.15);
    }
    .symbol-row.active.row-exclamation .icon-badge {
      background: #ffedd5;
      border-color: #fed7aa;
    }

    /* Preview Panel */
    .preview-box {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 14px;
      display: flex;
      gap: 12px;
      align-items: center;
      min-height: 64px;
    }

    .margin-note {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 4px 8px;
      border-radius: 6px;
      background: #f8fafc;
      border: 1px dashed #cbd5e1;
      font-size: 16px;
      min-width: 38px;
      flex-shrink: 0;
    }

    .margin-note-label {
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      margin-top: 2px;
    }

    .passage-sample {
      font-size: 13px;
      line-height: 1.4;
      color: #334155;
      flex: 1;
    }

    .mark-star {
      background: #fef08a;
      font-weight: 600;
      padding: 1px 4px;
      border-radius: 3px;
    }

    .mark-box {
      outline: 1.5px solid #a855f7;
      background: #f3e8ff;
      font-weight: 600;
      padding: 0 4px;
      border-radius: 3px;
    }

    .mark-question {
      border-bottom: 2px dashed #0284c7;
      background: #e0f2fe;
      padding: 1px 4px;
      border-radius: 3px;
    }

    .mark-exclamation {
      background: #ffedd5;
      border-left: 3px solid #f97316;
      padding: 1px 6px;
      font-style: italic;
    }
  </style>
</head>
<body>

  <div class="header">
    <span class="title">Standard Margin Symbols</span>
    <span class="hint">Tap symbol to preview</span>
  </div>

  <div class="symbol-list">
    
    <div class="symbol-row row-star active" data-index="0">
      <div class="icon-badge">⭐</div>
      <div class="row-text">
        <div class="row-title">Essential Ideas / Claims</div>
        <div class="row-desc">Key takeaways &amp; central points</div>
      </div>
    </div>

    
    <div class="symbol-row row-vocab" data-index="1">
      <div class="icon-badge">🔲</div>
      <div class="row-text">
        <div class="row-title">Tier 2/3 Vocabulary</div>
        <div class="row-desc">Unfamiliar academic &amp; subject words</div>
      </div>
    </div>

    
    <div class="symbol-row row-question" data-index="2">
      <div class="icon-badge">❓</div>
      <div class="row-text">
        <div class="row-title">Points of Confusion / Inquiry</div>
        <div class="row-desc">Tricky parts &amp; questions to research</div>
      </div>
    </div>

    
    <div class="symbol-row row-exclamation" data-index="3">
      <div class="icon-badge">❗</div>
      <div class="row-text">
        <div class="row-title">Surprising Facts / Reactions</div>
        <div class="row-desc">Startling details &amp; personal reactions</div>
      </div>
    </div>
  </div>

  
  <div class="preview-box">
    <div class="margin-note" id="marginIcon">
      ⭐
      <span class="margin-note-label">Margin</span>
    </div>
    <div class="passage-sample" id="passageText">
      "<span class="mark-star">Active annotation boosts long-term recall by 40%</span> during deep reading."
    </div>
  </div>

  <script>
    const examples = [
      {
        icon: '⭐',
        html: '"<span class="mark-star">Active annotation boosts long-term recall by 40%</span> during deep reading."'
      },
      {
        icon: '🔲',
        html: 'The author used <span class="mark-box">metacognition</span> to monitor her own thinking process.'
      },
      {
        icon: '❓',
        html: '"<span class="mark-question">Why did the secondary hypothesis contradict findings?</span>"'
      },
      {
        icon: '❗',
        html: '<span class="mark-exclamation">"The human brain processes images 60,000 times faster than text!"</span>'
      }
    ];

    const rows = document.querySelectorAll('.symbol-row');
    const marginIcon = document.getElementById('marginIcon');
    const passageText = document.getElementById('passageText');

    function selectRow(index) {
      rows.forEach((r, i) => {
        r.classList.toggle('active', i === index);
      });
      marginIcon.firstChild.textContent = examples[index].icon;
      passageText.innerHTML = examples[index].html;
    }

    rows.forEach((row, i) => {
      row.addEventListener('click', () => selectRow(i));
    });
  </script>
</body>
</html>

Illustrating and Diagramming Complex Text Concepts

Paraphrasing Key Sentences Accurately Without Plagiarizing

Summarizing Informational and Literary Texts Accurately

Selecting and Citing Direct Quotations as Text Evidence

Explaining How Cited Text Evidence Supports Your Claim

Incorporating Newly Acquired Domain Vocabulary Into Responses

Constructing Structured Analytical Paragraphs with Text Evidence

Delivering Clear Oral Responses Supported by Textual Details

Evidence-Based Responses and Text Annotation

Características del texto descriptivo

La descripción técnica frente a la descripción literaria

Características del texto informativo y noticioso

Características del texto explicativo y de divulgación

Patrón de causa y efecto en textos expositivos

Patrón de problema y solución en textos informativos

Patrón de comparación y contraste en artículos

El texto instructivo: pasos, materiales y reglas

Tipologías textuales informativas y descriptivas

Argumentos de tipo descriptivo y caracterización de situaciones

La opinión frente al hecho comprobable

La intención comunicativa: informar, narrar, convencer o guiar

Elementos visuales del texto: títulos, subtítulos y recuadros

La fotografía y el pie de foto como fuentes de información

Comparación de dos textos con distinta intención sobre un mismo tema

Evaluación global de la estructura del texto

Argumentación, intención comunicativa y elementos visuales del texto

Distinción entre tema general e idea principal en artículos

Ubicación de la idea principal explícita en párrafos

Deducción de la idea principal implícita

Identificación de detalles de apoyo y ejemplos

Relaciones lógicas entre oraciones en un párrafo

Ideas principales y estructura de párrafos

Inferencias locales sobre causas y consecuencias no dichas

Evidencia textual para justificar afirmaciones

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

El punto de vista y la postura del autor

Detección de sesgos y lenguaje subjetivo en textos

Inferencias y propósito del autor

Distinción entre información relevante e irrelevante

Resumen de párrafos mediante macroproposiciones

Inferencia global del sentido del texto

Evaluación crítica de la claridad y coherencia del autor

Conclusiones fundamentadas tras la lectura crítica

Síntesis y evaluación crítica de textos

Estrategias de clave de contexto para términos desconocidos

Claves de contexto por definición y reformulación

Claves de contexto por contraste y antonimia

Uso del diccionario: acepciones y categorías gramaticales

Estrategias de comprensión léxica y uso del diccionario

La raíz léxica y la familia de palabras

Prefijos de negación y oposición: des-, in-, im-, i-, anti-

Prefijos de tiempo, lugar y repetición: pre-, pos-, sub-, re-

Sufijos para formar sustantivos y adjetivos: -oso, -eza, -dad, -miento

Sufijos aumentativos, diminutivos y despectivos

Análisis morfológico: raíces, prefijos y sufijos

Sinonimia y gradación del significado

Antonimia y relaciones de opuestos

Palabras polisémicas y sentido contextual

Palabras homófonas y homógrafas

Analogías verbales: relaciones de causa, parte-todo e instrumento

Enriquecimiento léxico para la producción de textos

Relaciones semánticas y precisión léxica

Sentido literal frente a sentido figurado

El símil o comparación explícita con conectores

La metáfora: identificación y transferencia de sentido

Diferencias entre el símil y la metáfora

La personificación o prosopopeya en poemas y fábulas

La hipérbole o exageración expresiva

La onomatopeya y la imitación de sonidos

La aliteración y el juego de sonidos en versos

Fundamentos del lenguaje figurado y figuras clásicas

Clases de sustantivos: comunes, propios, concretos y abstractos

Sustantivos individuales y colectivos

Género y número en el sustantivo: reglas y excepciones

Los artículos definidos e indefinidos y su concordancia

El sustantivo y el artículo: clases, género y número

Los adjetivos calificativos y sus grados: positivo, comparativo y superlativo

Adjetivos determinativos: demostrativos y posesivos

Adjetivos numerales: cardinales, ordinales y múltiplos

Concordancia nominal entre artículo, sustantivo y adjetivo

El adjetivo: tipos, grados y concordancia nominal

Describing Personal Connections to Self-Selected Texts

Describing Personal Connections to Assigned Texts

Describing Personal Connections to Multimedia Sources

Writing Responses That Show Understanding

Writing Responses That Compare Ideas Across Texts

Writing Responses That Contrast Ideas Across Texts

Comparing and Contrasting Ideas From Multiple Sources

Making Personal Connections and Writing Responses

Los pronombres personales tónicos y átonos

Los pronombres demostrativos y posesivos en reemplazo del nombre

Pronombres interrogativos y exclamativos con tilde diacrítica

Uso de pronombres para evitar repeticiones: anáfora textual

Concordancia entre pronombre y referente

Detección y corrección de errores de concordancia nominal

Aplicación de categorías nominales en la creación de párrafos

Los pronombres: tipos, funciones y concordancia nominal

Finding Text Evidence to Support Your Response

Using Direct Quotes as Text Evidence

Paraphrasing Text Evidence in Your Response

Using Text Evidence to Support Your Opinion

Using Text Evidence in Responses

El verbo como núcleo del predicado: persona y número

La raíz y la desinencia verbal: verbos regulares

Verbos irregulares frecuentes: ser, estar, ir, haber, tener, hacer

Formas no personales del verbo: infinitivo, gerundio y participio

Estructura del verbo y formas no personales

Retelling Stories in Logical Order

Paraphrasing Passages While Keeping Meaning

Summarizing Informational Texts

Summarizing Narrative Texts

Choosing the Most Important Details for a Summary

Retelling and Summarizing Texts

Taking Notes While Reading

Annotating Texts to Capture Your Understanding

Freewriting to Explore Your Response

Illustrating to Show Your Understanding

Interacting With Texts Through Annotation and Note-Taking

Using New Vocabulary in Written Responses

Using New Vocabulary in Oral Responses

Discussing Important Ideas in a Text

Explaining Which Ideas Matter Most to the Meaning

Discussing Ideas Across Multiple Texts

Using New Vocabulary and Discussing Text Ideas

El adverbio y su función modificadora

Clases de adverbios: lugar, tiempo, modo y cantidad

Adverbios de afirmación, negación y duda

Formación de adverbios terminados en -mente y su acentuación

El adverbio: clases, formación y función

Las preposiciones en español: lista y uso adecuado

Relaciones espaciales, temporales y de causa con preposiciones

Conjunciones coordinantes: copulativas, disyuntivas y adversativas

Conjunciones subordinantes: causales, condicionales y consecutivas

Preposiciones y conjunciones: nexos básicos

La oración bimembre: sujeto y predicado

El sujeto expreso y el sujeto tácito o desinencial

El núcleo del sujeto y sus modificadores directos e indirectos

El núcleo del predicado y los complementos directo e indirecto

Los complementos circunstanciales: lugar, tiempo, modo y causa

Oraciones simples y oraciones compuestas

Identificación y corrección de fragmentos y oraciones incompletas

Sintaxis oracional: estructura y análisis

Drawing Evidence From Literature to Support Analysis

Drawing Evidence From Informational Texts to Support Analysis

Using Text Evidence to Support Reflection and Research

Writing Routinely Over Extended Time Frames

Writing Routinely in Short Time Frames

Drawing Evidence From Texts and Writing Routinely

OGE.5.RC.3

OGE.5.RC.3

Aligned learning resources

Related diagrams