<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Active Annotation Guide</title>
  <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: transparent;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .main-wrap {
      width: 100%;
      max-width: 640px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Interactive filter tabs */
    .filter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
    }

    .filter-btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    }

    .filter-btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

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

    /* Text container rendered directly on background */
    .content-area {
      position: relative;
      line-height: 2.2;
      font-size: 15px;
      color: #334155;
    }

    /* Annotation Items */
    .annot-item {
      position: relative;
      display: inline;
      transition: opacity 0.25s ease;
    }

    /* Dimming inactive annotations when a filter is active */
    .dimmed {
      opacity: 0.25;
    }

    /* 1. Central Claim Underline */
    .annot-claim {
      color: #1e2945;
      font-weight: 600;
      border-bottom: 3px solid #f59e0b;
      background: #fef3c7;
      padding: 3px 6px;
      border-radius: 4px;
      white-space: normal;
    }

    /* 2. Key Term Circle */
    .annot-term {
      color: #0f766e;
      font-weight: 600;
      border: 2px solid #0d9488;
      background: #ccfbf1;
      border-radius: 16px;
      padding: 2px 8px;
      white-space: nowrap;
    }

    /* 3. Confusing Point Question Mark */
    .annot-confusing {
      color: #be123c;
      background: #ffe4e6;
      border-radius: 4px;
      padding: 2px 6px;
      font-weight: 500;
    }

    .q-marker {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      background: #e11d48;
      color: #ffffff;
      font-weight: 800;
      font-size: 12px;
      border-radius: 50%;
      margin-left: 4px;
      vertical-align: middle;
    }

    /* Floating callout badges */
    .badge {
      display: inline-flex;
      align-items: center;
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      padding: 2px 7px;
      border-radius: 6px;
      margin-left: 4px;
      vertical-align: middle;
      user-select: none;
      white-space: nowrap;
    }

    .badge-claim {
      background: #fef3c7;
      color: #b45309;
      border: 1px solid #fde68a;
    }

    .badge-term {
      background: #ccfbf1;
      color: #0f766e;
      border: 1px solid #99f6e4;
    }

    .badge-confusing {
      background: #ffe4e6;
      color: #be123c;
      border: 1px solid #fecdd3;
    }

    /* 4. Margin Note Sticky Box */
    .margin-note-box {
      margin-top: 14px;
      background: #f1f5f9;
      border-left: 4px solid #6366f1;
      border-radius: 0 8px 8px 0;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-size: 13.5px;
      color: #1e2945;
      line-height: 1.5;
    }

    .margin-note-text {
      font-style: italic;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .badge-margin {
      background: #e0e7ff;
      color: #4338ca;
      border: 1px solid #c7d2fe;
      flex-shrink: 0;
    }

    /* Small dot indicators on buttons */
    .dot-claim { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; }
    .dot-term { width: 8px; height: 8px; border-radius: 50%; background: #0d9488; }
    .dot-confusing { width: 8px; height: 8px; border-radius: 50%; background: #e11d48; }
    .dot-margin { width: 8px; height: 8px; border-radius: 50%; background: #6366f1; }

    @media (max-width: 480px) {
      body {
        padding: 10px 8px;
      }
      .filter-btn {
        font-size: 12px;
        padding: 5px 9px;
      }
      .content-area {
        font-size: 14px;
        line-height: 2.3;
      }
      .margin-note-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
      }
    }
  </style>
</head>
<body>

<div class="main-wrap">
  
  <div class="filter-bar">
    <button class="filter-btn active" data-type="all">Show All</button>
    <button class="filter-btn" data-type="claim"><span class="dot-claim"></span>Central Claim</button>
    <button class="filter-btn" data-type="term"><span class="dot-term"></span>Key Term</button>
    <button class="filter-btn" data-type="confusing"><span class="dot-confusing"></span>Confusing Point</button>
    <button class="filter-btn" data-type="margin"><span class="dot-margin"></span>Margin Note</button>
  </div>

  
  <div class="content-area">
    <p>
      Successful participation requires active preparation.
      <span class="annot-item" data-annot="claim">
        <span class="annot-claim">Annotation transforms reading into thoughtful discussion</span>
        <span class="badge badge-claim">Central Claim</span>
      </span>
      by highlighting critical insights. Students must examine each
      <span class="annot-item" data-annot="term">
        <span class="annot-term">rhetorical device</span>
        <span class="badge badge-term">Key Term</span>
      </span>
      to evaluate evidence. When facing
      <span class="annot-item" data-annot="confusing">
        <span class="annot-confusing">implicit assumptions</span><span class="q-marker">?</span>
        <span class="badge badge-confusing">Confusing Point</span>
      </span>
      readers flag questions for group inquiry.
    </p>

    
    <div class="annot-item" data-annot="margin" style="display: block;">
      <div class="margin-note-box">
        <span class="margin-note-text">✏️ Connect this to the opening debate argument</span>
        <span class="badge badge-margin">My Margin Note</span>
      </div>
    </div>
  </div>
</div>

<script>
  const buttons = document.querySelectorAll('.filter-btn');
  const items = document.querySelectorAll('.annot-item');

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

      const selected = btn.getAttribute('data-type');

      items.forEach(item => {
        const itemType = item.getAttribute('data-annot');
        if (selected === 'all' || selected === itemType) {
          item.classList.remove('dimmed');
        } else {
          item.classList.add('dimmed');
        }
      });
    });
  });
</script>

</body>
</html>

Preparing Assigned Materials for Discussions

<!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 {
      background-color: #f8fafc;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .header-area {
      text-align: center;
      margin-bottom: 12px;
    }

    .title {
      font-size: 18px;
      font-weight: 700;
      color: #1e2945;
      letter-spacing: -0.02em;
    }

    .controls {
      display: flex;
      gap: 8px;
      margin-top: 8px;
      justify-content: center;
    }

    .mode-btn {
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #64748b;
      font-size: 12px;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: 9999px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

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

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

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

    .column {
      background: #ffffff;
      border-radius: 12px;
      padding: 14px;
      border: 2px solid #e2e8f0;
      transition: opacity 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
      position: relative;
    }

    .column.dimmed {
      opacity: 0.35;
    }

    .column.blue-col {
      border-top: 5px solid #2563eb;
    }

    .column.orange-col {
      border-top: 5px solid #ea580c;
    }

    .column-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px dashed #e2e8f0;
    }

    .col-title {
      font-size: 14px;
      font-weight: 700;
    }

    .blue-col .col-title {
      color: #2563eb;
    }

    .orange-col .col-title {
      color: #ea580c;
    }

    .phase-tag {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 2px 6px;
      border-radius: 4px;
      letter-spacing: 0.04em;
    }

    .blue-col .phase-tag {
      background: #eff6ff;
      color: #1d4ed8;
    }

    .orange-col .phase-tag {
      background: #fff7ed;
      color: #c2410c;
    }

    .note-item {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 10px;
      padding: 8px 10px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
    }

    .note-item:last-child {
      margin-bottom: 0;
    }

    .blue-item {
      background: #f0f7ff;
      color: #1e3a8a;
    }

    .orange-item {
      background: #fff7ed;
      color: #7c2d12;
    }

    .icon-badge {
      font-size: 13px;
      line-height: 1;
      margin-top: 2px;
    }

    .item-label {
      flex: 1;
    }
  </style>
</head>
<body>

  <div class="header-area">
    <div class="title">Two-Way Note-Catcher</div>
    <div class="controls">
      <button class="mode-btn active" onclick="setMode('all')">Both Sides</button>
      <button class="mode-btn" onclick="setMode('prep')">1. Prep</button>
      <button class="mode-btn" onclick="setMode('discuss')">2. Discuss</button>
    </div>
  </div>

  <div class="sheet-grid">
    
    <div class="column blue-col" id="colPrep">
      <div class="column-header">
        <span class="col-title">Side 1: My Prep Notes</span>
        <span class="phase-tag">Before</span>
      </div>

      <div class="note-item blue-item">
        <span class="icon-badge">❝</span>
        <span class="item-label">Quotes &amp; Page Numbers</span>
      </div>

      <div class="note-item blue-item">
        <span class="icon-badge">✦</span>
        <span class="item-label">My Main Claims</span>
      </div>

      <div class="note-item blue-item">
        <span class="icon-badge">?</span>
        <span class="item-label">Prepared Questions</span>
      </div>
    </div>

    
    <div class="column orange-col" id="colDiscuss">
      <div class="column-header">
        <span class="col-title">Side 2: Classmate Ideas</span>
        <span class="phase-tag">During</span>
      </div>

      <div class="note-item orange-item">
        <span class="icon-badge">•</span>
        <span class="item-label">Peer Perspectives</span>
      </div>

      <div class="note-item orange-item">
        <span class="icon-badge">✓</span>
        <span class="item-label">Agreements &amp; Evidence</span>
      </div>

      <div class="note-item orange-item">
        <span class="icon-badge">→</span>
        <span class="item-label">New Follow-ups</span>
      </div>
    </div>
  </div>

  <script>
    function setMode(mode) {
      const colPrep = document.getElementById('colPrep');
      const colDiscuss = document.getElementById('colDiscuss');
      const buttons = document.querySelectorAll('.mode-btn');

      buttons.forEach(btn => btn.classList.remove('active'));

      if (mode === 'all') {
        buttons[0].classList.add('active');
        colPrep.classList.remove('dimmed');
        colDiscuss.classList.remove('dimmed');
      } else if (mode === 'prep') {
        buttons[1].classList.add('active');
        colPrep.classList.remove('dimmed');
        colDiscuss.classList.add('dimmed');
      } else if (mode === 'discuss') {
        buttons[2].classList.add('active');
        colPrep.classList.add('dimmed');
        colDiscuss.classList.remove('dimmed');
      }
    }
  </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; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f1f5f9;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 100%;
    }

    .header-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 0 4px;
    }

    .main-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      flex: 1;
    }

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

    /* Left Column: Simulated Reading Page */
    .page-sheet {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      position: relative;
    }

    .page-title {
      font-size: 14px;
      font-weight: 800;
      color: #0f172a;
      border-bottom: 2px solid #e2e8f0;
      padding-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .text-line {
      font-size: 13px;
      line-height: 1.45;
      color: #475569;
    }

    .target-text {
      cursor: pointer;
      padding: 2px 4px;
      border-radius: 4px;
      background-color: #fef9c3;
      border-bottom: 2px solid #eab308;
      color: #0f172a;
      font-weight: 600;
      transition: all 0.2s ease;
      display: inline;
    }

    .target-text.active {
      box-shadow: 0 0 0 2px #3b82f6;
    }

    /* Right Column: Sticky Notes Pinboard */
    .pinboard {
      display: flex;
      flex-direction: column;
      gap: 8px;
      justify-content: space-between;
    }

    .sticky-card {
      border-radius: 6px;
      padding: 10px 12px;
      cursor: pointer;
      border: 1px solid rgba(0,0,0,0.08);
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      transition: box-shadow 0.2s ease, filter 0.2s ease;
      position: relative;
    }

    .sticky-card:hover {
      filter: brightness(0.97);
    }

    .sticky-card.active {
      box-shadow: 0 0 0 2.5px #2563eb, 0 4px 10px rgba(0,0,0,0.12);
    }

    .sticky-pin {
      position: absolute;
      top: -4px;
      right: 10px;
      font-size: 12px;
      line-height: 1;
    }

    .badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 2px 6px;
      border-radius: 4px;
      margin-bottom: 4px;
      background: rgba(0,0,0,0.08);
    }

    .sticky-text {
      font-size: 12.5px;
      font-weight: 600;
      line-height: 1.35;
      color: #1e2945;
    }

    .note-detail { background: #fef08a; }
    .note-question { background: #bae6fd; }
    .note-connection { background: #bbf7d0; }

    /* Nav buttons */
    .controls {
      display: flex;
      justify-content: center;
      gap: 8px;
      align-items: center;
    }

    .btn-tab {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #475569;
      font-size: 12px;
      font-weight: 700;
      padding: 6px 12px;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-tab.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }
  </style>
</head>
<body>

  <div class="header-bar">
    <span>📖 Assigned Reading</span>
    <span>📌 Discussion Prep</span>
  </div>

  <div class="main-grid">
    
    <div class="page-sheet">
      <div class="page-title">
        <span>📄</span> Article: The Secret Life of Bees
      </div>

      <div class="text-line">
        Pollinators sustain wild ecosystems worldwide.
        <span class="target-text active" data-index="0">Honeybees visit 1,000 flowers in one trip!</span>
        They gather nectar and pollen to feed their colonies.
      </div>

      <div class="text-line">
        Recent habitat loss has caused steep colony declines.
        <span class="target-text" data-index="1">One out of every three bites of our food depends on bees.</span>
      </div>

      <div class="text-line">
        Anyone can help protect them.
        <span class="target-text" data-index="2">Planting native flowers provides essential pollen all spring.</span>
      </div>
    </div>

    
    <div class="pinboard">
      <div class="sticky-card note-detail active" data-index="0">
        <span class="sticky-pin">📌</span>
        <div class="badge">1. Key Detail</div>
        <div class="sticky-text">"Honeybees visit 1,000 flowers in one trip!"</div>
      </div>

      <div class="sticky-card note-question" data-index="1">
        <span class="sticky-pin">📌</span>
        <div class="badge">2. Discussion Question</div>
        <div class="sticky-text">"What would happen to grocery stores if bees disappeared?"</div>
      </div>

      <div class="sticky-card note-connection" data-index="2">
        <span class="sticky-pin">📌</span>
        <div class="badge">3. Personal Connection</div>
        <div class="sticky-text">"This reminds me of planting sunflowers in my garden last spring."</div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn-tab active" data-index="0">1. Detail</button>
    <button class="btn-tab" data-index="1">2. Question</button>
    <button class="btn-tab" data-index="2">3. Connection</button>
  </div>

  <script>
    const targets = document.querySelectorAll('.target-text');
    const cards = document.querySelectorAll('.sticky-card');
    const tabs = document.querySelectorAll('.btn-tab');

    function setActive(index) {
      targets.forEach((t, i) => t.classList.toggle('active', i === index));
      cards.forEach((c, i) => c.classList.toggle('active', i === index));
      tabs.forEach((b, i) => b.classList.toggle('active', i === index));
    }

    [...targets, ...cards, ...tabs].forEach(el => {
      el.addEventListener('click', () => {
        const idx = parseInt(el.getAttribute('data-index'), 10);
        setActive(idx);
      });
    });
  </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;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100%;
    }

    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      max-width: 640px;
      margin: 0 auto;
    }

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

    .side-card {
      border-radius: 12px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
      background: #ffffff;
      transition: box-shadow 0.2s ease;
    }

    .side-card.left {
      border: 2px solid #fca5a5;
      background: #fff5f5;
    }

    .side-card.right {
      border: 2px solid #86efac;
      background: #f0fdf4;
    }

    .header-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      margin-bottom: 12px;
    }

    .left .header-badge {
      background: #fee2e2;
      color: #b91c1c;
    }

    .right .header-badge {
      background: #dcfce7;
      color: #15803d;
    }

    .character-stage {
      position: relative;
      height: 90px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 8px;
    }

    .avatar {
      font-size: 54px;
      line-height: 1;
      position: relative;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06));
    }

    .bubble-floating {
      position: absolute;
      top: 0;
      right: 18%;
      font-size: 22px;
      animation: float 2.5s ease-in-out infinite;
    }

    .card-floating {
      position: absolute;
      top: 4px;
      right: 18%;
      font-size: 26px;
      animation: float 2.5s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }

    .quote-box {
      width: 100%;
      border-radius: 8px;
      padding: 10px 12px;
      font-size: 13px;
      font-weight: 500;
      line-height: 1.35;
      margin-top: auto;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .left .quote-box {
      background: #ffffff;
      border: 1px dashed #f87171;
      color: #7f1d1d;
    }

    .right .quote-box {
      background: #ffffff;
      border: 1px solid #4ade80;
      color: #14532d;
      box-shadow: 0 1px 3px rgba(22, 163, 74, 0.08);
    }

    .tagline {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-top: 2px;
    }

    .left .tagline {
      color: #dc2626;
    }

    .right .tagline {
      color: #16a34a;
    }

    .status-icon {
      font-size: 16px;
      font-weight: 800;
      display: inline-block;
      margin-right: 2px;
    }
  </style>
</head>
<body>

  <div class="comparison-grid">
    
    <div class="side-card left">
      <div class="header-badge">
        <span class="status-icon">✕</span> Relying on Memory
      </div>

      <div class="character-stage">
        <div class="avatar">😓</div>
        <div class="bubble-floating">💭❓</div>
      </div>

      <div class="quote-box">
        <div>"Uh... I forgot what page that was on."</div>
        <div class="tagline">No Evidence Ready</div>
      </div>
    </div>

    
    <div class="side-card right">
      <div class="header-badge">
        <span class="status-icon">✓</span> Prepared Notes
      </div>

      <div class="character-stage">
        <div class="avatar">🙋‍♂️</div>
        <div class="card-floating">📝</div>
      </div>

      <div class="quote-box">
        <div>"According to paragraph 2, honeybees help grow our food!"</div>
        <div class="tagline">Exact Evidence Cited</div>
      </div>
    </div>
  </div>

</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;
      -webkit-tap-highlight-color: transparent;
    }
    body {
      background: #f8f9fa;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .header {
      text-align: center;
      margin-bottom: 16px;
    }
    .header h1 {
      font-size: 18px;
      font-weight: 700;
      color: #1e2945;
      letter-spacing: -0.2px;
    }
    .header p {
      font-size: 13px;
      color: #64748b;
      margin-top: 2px;
    }
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      width: 100%;
      max-width: 640px;
    }
    @media (max-width: 520px) {
      .cards-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }
    .note-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 12px;
      display: flex;
      flex-direction: column;
      cursor: pointer;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
      position: relative;
      overflow: hidden;
      min-height: 170px;
    }
    .note-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 6px;
    }
    .card-blue::before { background: #22b7ff; }
    .card-amber::before { background: #f59e0b; }
    .card-green::before { background: #10b981; }

    .note-card.active.card-blue {
      border-color: #22b7ff;
      box-shadow: 0 4px 14px rgba(34, 183, 255, 0.22);
    }
    .note-card.active.card-amber {
      border-color: #f59e0b;
      box-shadow: 0 4px 14px rgba(245, 158, 11, 0.22);
    }
    .note-card.active.card-green {
      border-color: #10b981;
      box-shadow: 0 4px 14px rgba(16, 185, 129, 0.22);
    }

    .card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
      padding-top: 4px;
    }
    .card-title {
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .card-blue .card-title { color: #0284c7; }
    .card-amber .card-title { color: #d97706; }
    .card-green .card-title { color: #059669; }

    .icons {
      font-size: 16px;
      line-height: 1;
      letter-spacing: 2px;
    }
    .lines-box {
      background: #f8fafc;
      border: 1px dashed #cbd5e1;
      border-radius: 8px;
      padding: 10px 8px;
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .example-text {
      font-size: 13px;
      line-height: 1.4;
      color: #1e2945;
      font-weight: 500;
    }
    .badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 2px 6px;
      border-radius: 4px;
      margin-bottom: 6px;
      align-self: flex-start;
    }
    .card-blue .badge { background: #e0f2fe; color: #0369a1; }
    .card-amber .badge { background: #fef3c7; color: #92400e; }
    .card-green .badge { background: #d1fae5; color: #065f46; }

    .hint {
      margin-top: 14px;
      font-size: 12px;
      color: #94a3b8;
      display: flex;
      align-items: center;
      gap: 6px;
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>3 Prep Note Cards for Discussion</h1>
    <p>Bring facts, curiosities, and ideas to every talk</p>
  </div>

  <div class="cards-grid">
    
    <div class="note-card card-blue active" onclick="selectCard(this)">
      <span class="badge">Fact / Evidence</span>
      <div class="card-top">
        <div class="card-title">1. Key Detail</div>
        <div class="icons">📖 💬</div>
      </div>
      <div class="lines-box">
        <div class="example-text">"Page 12 states sharks lose up to 30,000 teeth."</div>
      </div>
    </div>

    
    <div class="note-card card-amber" onclick="selectCard(this)">
      <span class="badge">Curiosity</span>
      <div class="card-top">
        <div class="card-title">2. Big Question</div>
        <div class="icons">🔍 ❓</div>
      </div>
      <div class="lines-box">
        <div class="example-text">"Why do shark teeth regrow so much faster than ours?"</div>
      </div>
    </div>

    
    <div class="note-card card-green" onclick="selectCard(this)">
      <span class="badge">Connection</span>
      <div class="card-top">
        <div class="card-title">3. My Thought</div>
        <div class="icons">💡 💭</div>
      </div>
      <div class="lines-box">
        <div class="example-text">"Constant sharp teeth keep sharks at the top of the food chain."</div>
      </div>
    </div>
  </div>

  <div class="hint">
    <span>✦</span> Tap a note card to highlight its role
  </div>

  <script>
    function selectCard(card) {
      document.querySelectorAll('.note-card').forEach(c => c.classList.remove('active'));
      card.classList.add('active');
    }
  </script>
</body>
</html>

What Active Listening Looks Like in Third Grade

Asking Relevant Questions to Clarify Information

Making Pertinent Comments in Discussions

Adding to Others' Ideas in Group Discussions

Active Listening & Discussion Participation

Participating Effectively in Teacher-Led Discussions

Establishing and Following Discussion Rules

Affirming and Building on Others' Ideas in Discussions

Asking Clarifying Questions to Deepen Understanding

Disagreeing Respectfully and Explaining Your Viewpoint

Synthesizing Group Ideas to Reach Consensus

Collaborative Discussions and Group Conversations

Understanding Turn-Taking in Conversations

Using Polite Language in Different Situations

Formal and Informal Language Choices

Adapting Your Language for Different Audiences

Social Conventions in Group Discussions

Building on Others' Ideas in Conversation

Listening Actively in Conversations

Disagreeing Politely in Discussions

Understanding Formality in School and Home

Language for Conversational Skills

Słuchanie poleceń i instrukcji — zrozumienie i wykonanie

Słuchanie wierszy — wyodrębnianie głównych treści

Słuchanie opowiadań — kolejność wydarzeń

Słuchanie tekstów informacyjnych — zapamiętywanie faktów

Rozpoznawanie intencji nadawcy w wypowiedzi ustnej

Rozpoznawanie emocji i tonu w wypowiedzi

Słuchanie i rozumienie wypowiedzi ustnych

Following Agreed-Upon Rules for Discussions

Establishing Protocols for Group Work

Taking Turns in Conversations

Listening Attentively to Classmates

Responding Respectfully to Different Ideas

Discussion Rules & Respectful Interaction

Formułowanie pytań do wysłuchanego tekstu

Odpowiadanie na pytania do wysłuchanego tekstu

Prowadzenie dialogu — zasady kulturalnej rozmowy

Przedstawianie siebie i swoich zainteresowań

Recytacja wierszy z odpowiednią intonacją

Interakcja ustna i prezentacja

Asking Questions About a Text You Read

Making Personal Connections With Oral Texts

Polite Conversation in All Situations

Adjusting Your Language for Different Settings

Listening Without Interrupting Others

Listening to Texts & Adapting Language

Working Toward Shared Goals in Groups

Knowing When to Ask for Clarification

Restating What Others Have Said

Practicing Social Communication Skills

Group Collaboration & Communication Skills

What Is a Collaborative Discussion?

Talking With Adults and Peers About Topics

Preparing for Discussions by Reading First

Following Rules for Group Discussions

Building on What Others Say

Sharing Your Own Ideas Clearly

Participating in Collaborative Discussions

Słuchanie z uwagą i szacunkiem w różnych sytuacjach życiowych

Słuchanie lektur czytanych przez nauczyciela i innych — uważne odbieranie

Słuchanie na uroczystościach i koncertach — odpowiednie zachowanie

Szukanie wzorców poprawnej artykulacji w słuchanych tekstach

Słuchanie z uwagą w różnych sytuacjach

Coming to Discussions Prepared by Reading First

Using What You Read and Know in Discussions

Agreeing on Rules for How We Talk Together

Joining the Conversation Without Interrupting

Asking Questions to Check Your Understanding

Staying on Topic During a Discussion

Linking Your Comments to What Others Say

Explaining Your Ideas Based on the Discussion

Discussion Skills in Depth

Czekanie na swoją kolej — panowanie nad chęcią nagłego wypowiadania się

Okazywanie szacunku osobie mówiącej — mowa ciała i postawa

Zadawanie pytań, gdy nie rozumiem usłyszanej wypowiedzi

Słuchanie i reagowanie na wypowiedzi innych w grupie

Kultura słuchania — szacunek i reagowanie w grupie

Rozpoznawanie rodzaju uroczystości i dostosowanie zachowania

Słuchanie interpretacji artystycznych — wiersze i proza

Prowadzenie rozmowy w sytuacjach formalnych — zasady i postawa

Dobieranie form komunikacji do sytuacji społecznych

Zachowanie na uroczystościach i kultura rozmowy

Wygłaszanie z pamięci krótkich tekstów prozatorskich

Wyrażanie empatii i szacunku w rozmowie — dobór formy komunikacji

Wyrażanie prośby w różnych sytuacjach

Eksperymenty językowe — tworzenie własnych form wypowiedzi

Nadawanie znaczenia czynnościom i doświadczeniom — twórcze mówienie

Zabawy słowem — przekształcanie wypowiedzi ustnie

Recytacja, komunikacja społeczna i eksperymenty językowe

Sharing Information Clearly in Discussions

Sharing Your Ideas With a Group

Asking Questions to Clarify and Learn in Discussions

Staying on Topic in Group Discussions

Summarising Key Points From a Discussion

Contributing to Discussions

Identifying the Audience of a Text

Identifying the Purpose of Imaginative Texts

Identifying the Purpose of Informative Texts

Identifying the Purpose of Persuasive Texts

Same Purpose, Different Audiences

How Language Changes for Different Audiences

How Images Change for Different Audiences

How Text Structure Adapts to Audience

Comparing Two Texts With the Same Purpose for Different Audiences

Texts for Different Audiences

Los elementos fundamentales del circuito de la comunicación

El canal y el código en diferentes situaciones comunicativas

El contexto social y su influencia en el significado del mensaje

Caracterización de roles: hablante, oyente, moderador y relator

Semejanzas y diferencias entre quien crea el mensaje y quien lo recibe

Adaptación del mensaje según el interlocutor y el propósito

Reconocimiento del otro como interlocutor válido

El respeto por los turnos conversacionales y el uso de la palabra

Identificación de intenciones comunicativas: informar, persuadir y emocionar

Resolución dialógica de conflictos y acuerdos comunicativos

Análisis ético de conversaciones y debates en la vida real

Ética de la comunicación, interlocutores y roles

OGE.4.SL.1

OGE.4.SL.1

Aligned learning resources

Related diagrams