<!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;
      user-select: none;
      -webkit-user-select: none;
    }

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

    .grid-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      flex: 1;
    }

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

    .cue-column {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: border-color 0.25s, box-shadow 0.25s;
    }

    .cue-column.main-col {
      border-top: 4px solid #2563eb;
    }

    .cue-column.detail-col {
      border-top: 4px solid #0d9488;
    }

    .col-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
    }

    .icon-title {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .cue-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 10px;
      border-radius: 8px;
      line-height: 1.2;
    }

    .main-col .cue-badge {
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }

    .detail-col .cue-badge {
      background: #f0fdfa;
      color: #0f766e;
      border: 1px solid #99f6e4;
    }

    .wave-display {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      height: 38px;
      background: #f8fafc;
      border-radius: 8px;
      padding: 4px 8px;
    }

    .wave-bar {
      border-radius: 4px;
      transition: height 0.2s ease, opacity 0.2s ease;
    }

    .main-col .wave-bar {
      width: 10px;
      background: #2563eb;
    }

    .detail-col .wave-bar {
      width: 5px;
      background: #0d9488;
    }

    .markers-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 2px;
    }

    .marker-pill {
      font-size: 13px;
      font-weight: 600;
      padding: 6px 10px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      color: #334155;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .play-btn {
      margin-top: auto;
      border: none;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      padding: 8px 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background-color 0.2s, opacity 0.2s;
    }

    .main-col .play-btn {
      background: #2563eb;
      color: #ffffff;
    }

    .main-col .play-btn:active {
      background: #1d4ed8;
    }

    .detail-col .play-btn {
      background: #0d9488;
      color: #ffffff;
    }

    .detail-col .play-btn:active {
      background: #0f766e;
    }

    .quote-icon {
      opacity: 0.6;
      font-size: 11px;
    }
  </style>
</head>
<body>

  <div class="grid-wrap">
    
    <div class="cue-column main-col" id="mainCol">
      <div class="col-header">
        <div class="icon-title">
          <span>📢</span>
          <span>Main Points</span>
        </div>
      </div>

      <div class="wave-display" id="mainWaves">
        <div class="wave-bar" style="height: 28px;"></div>
        <div class="wave-bar" style="height: 12px;"></div>
        <div class="wave-bar" style="height: 32px;"></div>
        <div class="wave-bar" style="height: 10px;"></div>
        <div class="wave-bar" style="height: 30px;"></div>
      </div>

      <div class="cue-badge">🔊 Louder Volume</div>
      <div class="cue-badge">⏸ Slower & Pauses</div>

      <div class="markers-group">
        <div class="marker-pill"><span class="quote-icon">❝</span>Above all...</div>
        <div class="marker-pill"><span class="quote-icon">❝</span>In summary...</div>
      </div>

      <button class="play-btn" id="playMain" onclick="demoRhythm('main')">
        <span>▶</span> Play Rhythm
      </button>
    </div>

    
    <div class="cue-column detail-col" id="detailCol">
      <div class="col-header">
        <div class="icon-title">
          <span>🔍</span>
          <span>Supporting Details</span>
        </div>
      </div>

      <div class="wave-display" id="detailWaves">
        <div class="wave-bar" style="height: 14px;"></div>
        <div class="wave-bar" style="height: 10px;"></div>
        <div class="wave-bar" style="height: 16px;"></div>
        <div class="wave-bar" style="height: 12px;"></div>
        <div class="wave-bar" style="height: 15px;"></div>
        <div class="wave-bar" style="height: 11px;"></div>
        <div class="wave-bar" style="height: 14px;"></div>
      </div>

      <div class="cue-badge">🔈 Softer Voice</div>
      <div class="cue-badge">⚡ Faster Cadence</div>

      <div class="markers-group">
        <div class="marker-pill"><span class="quote-icon">❝</span>For instance...</div>
        <div class="marker-pill"><span class="quote-icon">❝</span>Specifically...</div>
      </div>

      <button class="play-btn" id="playDetail" onclick="demoRhythm('detail')">
        <span>▶</span> Play Rhythm
      </button>
    </div>
  </div>

  <script>
    let audioCtx = null;

    function playTone(freq, dur, gainVal) {
      try {
        if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        if (audioCtx.state === 'suspended') audioCtx.resume();
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.frequency.value = freq;
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        gain.gain.setValueAtTime(gainVal, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + dur);
        osc.start();
        osc.stop(audioCtx.currentTime + dur);
      } catch(e) {}
    }

    function demoRhythm(type) {
      if (type === 'main') {
        const bars = document.querySelectorAll('#mainWaves .wave-bar');
        const beats = [
          { delay: 0, tone: 320, dur: 0.35, vol: 0.28, h: [34, 18, 36, 14, 34] },
          { delay: 450, tone: 360, dur: 0.40, vol: 0.30, h: [20, 36, 20, 36, 20] },
          { delay: 950, tone: 420, dur: 0.50, vol: 0.35, h: [36, 30, 36, 30, 36] }
        ];

        beats.forEach(b => {
          setTimeout(() => {
            playTone(b.tone, b.dur, b.vol);
            bars.forEach((bar, i) => {
              bar.style.height = b.h[i] + 'px';
              bar.style.opacity = '1';
            });
            setTimeout(() => {
              bars.forEach(bar => { bar.style.opacity = '0.7'; });
            }, b.dur * 1000 * 0.7);
          }, b.delay);
        });
      } else {
        const bars = document.querySelectorAll('#detailWaves .wave-bar');
        const rapidBeats = [
          { delay: 0, tone: 520, dur: 0.12, vol: 0.12, h: [18, 14, 20, 16, 18, 14, 18] },
          { delay: 160, tone: 540, dur: 0.12, vol: 0.12, h: [12, 18, 14, 20, 14, 18, 14] },
          { delay: 320, tone: 560, dur: 0.12, vol: 0.12, h: [16, 12, 18, 14, 20, 12, 16] },
          { delay: 480, tone: 580, dur: 0.12, vol: 0.12, h: [14, 20, 12, 18, 14, 20, 12] }
        ];

        rapidBeats.forEach(b => {
          setTimeout(() => {
            playTone(b.tone, b.dur, b.vol);
            bars.forEach((bar, i) => {
              bar.style.height = b.h[i] + 'px';
              bar.style.opacity = '1';
            });
            setTimeout(() => {
              bars.forEach(bar => { bar.style.opacity = '0.7'; });
            }, b.dur * 1000 * 0.7);
          }, b.delay);
        });
      }
    }
  </script>
</body>
</html>

Distinguishing Main Points from Supporting Details in Spoken Discourse

<!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: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .diagram-root {
      width: 100%;
      max-width: 620px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    /* Main Idea Card */
    .main-card {
      width: 100%;
      background: #fffbeb;
      border: 2px solid #f59e0b;
      border-radius: 14px;
      padding: 16px 20px;
      box-shadow: 0 4px 12px rgba(245, 158, 11, 0.12);
      text-align: center;
      position: relative;
      cursor: pointer;
      transition: box-shadow 0.25s ease, transform 0.25s ease;
    }

    .badge-gold {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #f59e0b;
      color: #ffffff;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 4px 12px;
      border-radius: 20px;
      margin-bottom: 8px;
    }

    .main-title {
      font-size: 16px;
      font-weight: 700;
      line-height: 1.4;
      color: #1e2945;
    }

    .hl-safe, .hl-warm {
      padding: 2px 6px;
      border-radius: 6px;
      transition: background 0.3s ease, color 0.3s ease;
    }

    .hl-safe.active {
      background: #0284c7;
      color: #ffffff;
    }

    .hl-warm.active {
      background: #ea580c;
      color: #ffffff;
    }

    /* Branch Lines */
    .connector-svg {
      width: 100%;
      height: 38px;
      display: block;
    }

    /* Details Grid */
    .details-row {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .detail-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      display: flex;
      flex-direction: column;
      gap: 8px;
      cursor: pointer;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .detail-card.active-warm {
      border-color: #ea580c;
      box-shadow: 0 4px 14px rgba(234, 88, 12, 0.18);
    }

    .detail-card.active-safe {
      border-color: #0284c7;
      box-shadow: 0 4px 14px rgba(2, 132, 199, 0.18);
    }

    .badge-detail {
      align-self: flex-start;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 14px;
    }

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

    .badge-safe {
      background: #e0f2fe;
      color: #0369a1;
    }

    .detail-text {
      font-size: 14px;
      font-weight: 600;
      line-height: 1.35;
      color: #334155;
    }

    .hint-bar {
      margin-top: 14px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    @media (max-width: 440px) {
      body {
        padding: 10px;
      }
      .main-title {
        font-size: 14px;
      }
      .details-row {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .connector-svg {
        height: 24px;
      }
    }
  </style>
</head>
<body>

  <div class="diagram-root">
    
    <div class="main-card" id="mainCard" onclick="selectMode('all')">
      <div class="badge-gold">★ MAIN IDEA</div>
      <div class="main-title">
        Sea otters have clever ways to <span class="hl-safe active" id="hlSafe">stay safe</span> and <span class="hl-warm active" id="hlWarm">warm</span> in cold oceans.
      </div>
    </div>

    
    <svg class="connector-svg" viewBox="0 0 400 38" preserveAspectRatio="none">
      <path d="M 200 0 V 16 M 100 38 V 16 H 300 V 38" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>
      <circle cx="200" cy="0" r="3" fill="#f59e0b" />
      <circle cx="100" cy="38" r="3" fill="#ea580c" />
      <circle cx="300" cy="38" r="3" fill="#0284c7" />
    </svg>

    
    <div class="details-row">
      
      <div class="detail-card active-warm" id="cardWarm" onclick="selectMode('warm')">
        <div class="badge-detail badge-warm">🫧 DETAIL 1 • WARMTH</div>
        <div class="detail-text">
          Groom thick fur to trap warm air bubbles.
        </div>
      </div>

      
      <div class="detail-card active-safe" id="cardSafe" onclick="selectMode('safe')">
        <div class="badge-detail badge-safe">🌿 DETAIL 2 • SAFETY</div>
        <div class="detail-text">
          Wrap in kelp so waves do not wash them away.
        </div>
      </div>
    </div>

    
    <div class="hint-bar">
      <span>Tap cards to see how details support the main idea</span>
    </div>
  </div>

  <script>
    function selectMode(mode) {
      const hlSafe = document.getElementById('hlSafe');
      const hlWarm = document.getElementById('hlWarm');
      const cardSafe = document.getElementById('cardSafe');
      const cardWarm = document.getElementById('cardWarm');

      if (mode === 'warm') {
        hlWarm.classList.add('active');
        hlSafe.classList.remove('active');
        cardWarm.classList.add('active-warm');
        cardSafe.classList.remove('active-safe');
      } else if (mode === 'safe') {
        hlSafe.classList.add('active');
        hlWarm.classList.remove('active');
        cardSafe.classList.add('active-safe');
        cardWarm.classList.remove('active-warm');
      } else {
        hlWarm.classList.add('active');
        hlSafe.classList.add('active');
        cardWarm.classList.add('active-warm');
        cardSafe.classList.add('active-safe');
      }
    }
  </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: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      user-select: none;
    }

    .header-box {
      text-align: center;
      margin-bottom: 12px;
      width: 100%;
      max-width: 480px;
    }

    .badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #2563eb;
      background: #eff6ff;
      padding: 3px 10px;
      border-radius: 12px;
      margin-bottom: 6px;
    }

    .question {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.3;
    }

    .options-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
      max-width: 480px;
    }

    .option-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
      -webkit-tap-highlight-color: transparent;
    }

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

    .option-content {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;
    }

    .letter-tag {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: #f1f5f9;
      color: #475569;
      font-weight: 700;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background-color 0.25s ease, color 0.25s ease;
    }

    .option-text {
      font-size: 14px;
      font-weight: 500;
      color: #334155;
      line-height: 1.35;
    }

    .status-tag {
      font-size: 11px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 6px;
      white-space: nowrap;
      opacity: 0;
      transform: translateY(2px);
      transition: opacity 0.25s ease, transform 0.25s ease;
    }

    /* Selected state: Correct Main Idea */
    .option-card.correct {
      border-color: #22c55e;
      background: #f0fdf4;
      box-shadow: 0 0 0 1px #22c55e;
    }
    .option-card.correct .letter-tag {
      background: #22c55e;
      color: #ffffff;
    }
    .option-card.correct .status-tag {
      opacity: 1;
      transform: translateY(0);
      background: #dcfce7;
      color: #15803d;
    }

    /* Selected state: Supporting Detail */
    .option-card.detail {
      border-color: #38bdf8;
      background: #f0f9ff;
      box-shadow: 0 0 0 1px #38bdf8;
    }
    .option-card.detail .letter-tag {
      background: #0284c7;
      color: #ffffff;
    }
    .option-card.detail .status-tag {
      opacity: 1;
      transform: translateY(0);
      background: #e0f2fe;
      color: #0369a1;
    }

    .hint-bar {
      margin-top: 12px;
      font-size: 12px;
      color: #64748b;
      text-align: center;
      min-height: 18px;
    }
  </style>
</head>
<body>

  <div class="header-box">
    <div class="badge">📢 Spoken Announcement</div>
    <div class="question">What is the main idea?</div>
  </div>

  <div class="options-list" role="radiogroup" aria-label="Main idea options">
    
    <div class="option-card" data-type="main" onclick="selectOption(this, true)" role="radio" tabindex="0">
      <div class="option-content">
        <div class="letter-tag">A</div>
        <div class="option-text">Volunteers are needed for the school garden this Saturday.</div>
      </div>
      <div class="status-tag">✓ Main Idea</div>
    </div>

    
    <div class="option-card" data-type="detail" onclick="selectOption(this, false)" role="radio" tabindex="0">
      <div class="option-content">
        <div class="letter-tag">B</div>
        <div class="option-text">Tomato seedlings need water.</div>
      </div>
      <div class="status-tag">🔍 Detail</div>
    </div>

    
    <div class="option-card" data-type="detail" onclick="selectOption(this, false)" role="radio" tabindex="0">
      <div class="option-content">
        <div class="letter-tag">C</div>
        <div class="option-text">Wooden boxes look pretty with paint.</div>
      </div>
      <div class="status-tag">🔍 Detail</div>
    </div>
  </div>

  <div class="hint-bar" id="hint">Tap an option to inspect</div>

  <script>
    function playTone(freq, dur = 0.25) {
      try {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.frequency.value = freq;
        osc.connect(gain);
        gain.connect(ctx.destination);
        gain.gain.setValueAtTime(0.18, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + dur);
        osc.start();
        osc.stop(ctx.currentTime + dur);
      } catch (e) {}
    }

    function selectOption(el, isCorrect) {
      document.querySelectorAll('.option-card').forEach(card => {
        card.classList.remove('correct', 'detail');
        card.setAttribute('aria-checked', 'false');
      });

      el.setAttribute('aria-checked', 'true');
      const hint = document.getElementById('hint');

      if (isCorrect) {
        el.classList.add('correct');
        hint.innerHTML = '🌟 <b>Great job!</b> This is the big message.';
        playTone(587.33, 0.3); // D5
        if (window.answerCorrect) {
          window.answerCorrect({
            answer: 'A',
            explanation: 'Volunteers are needed to help with the school garden this Saturday is the main idea.'
          });
        }
      } else {
        el.classList.add('detail');
        hint.innerHTML = '🔍 <b>Supporting detail:</b> This is just a small piece of info.';
        playTone(392.00, 0.25); // G4
        if (window.answerIncorrect) {
          window.answerIncorrect({
            answer: el.querySelector('.letter-tag').textContent,
            feedback: 'This is a supporting detail, not the big main idea.'
          });
        }
      }
    }

    // Keyboard navigation support
    document.querySelectorAll('.option-card').forEach(card => {
      card.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          card.click();
        }
      });
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Main Idea and Supporting Details</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 10px 12px;
      user-select: none;
      -webkit-user-select: none;
    }

    .nav-toggle {
      display: inline-flex;
      gap: 6px;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 20px;
      margin-bottom: 8px;
    }

    .tab-btn {
      border: none;
      background: transparent;
      padding: 6px 16px;
      border-radius: 16px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .tab-btn:hover {
      color: #0f172a;
    }

    .tab-btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    }

    .stage {
      position: relative;
      width: 100%;
      max-width: 460px;
      height: 285px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .model-view {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }

    .model-view.active {
      opacity: 1;
      pointer-events: auto;
    }

    svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .main-label {
      font-size: 16px;
      font-weight: 800;
      fill: #ffffff;
      text-anchor: middle;
      dominant-baseline: central;
      letter-spacing: 0.4px;
    }

    .detail-label-title {
      font-size: 11px;
      font-weight: 600;
      fill: #0f766e;
      text-anchor: middle;
      dominant-baseline: central;
      letter-spacing: 0.2px;
    }

    .detail-label-num {
      font-size: 13px;
      font-weight: 800;
      fill: #115e59;
      text-anchor: middle;
      dominant-baseline: central;
    }
  </style>
</head>
<body>

  <div class="nav-toggle" role="tablist" aria-label="Model Visualizer">
    <button class="tab-btn active" id="btnUmbrella" role="tab" aria-selected="true" onclick="showModel('umbrella')">
      ☂️ Umbrella Model
    </button>
    <button class="tab-btn" id="btnStool" role="tab" aria-selected="false" onclick="showModel('stool')">
      🪑 Stool Model
    </button>
  </div>

  <div class="stage">
    
    <div class="model-view active" id="viewUmbrella" role="tabpanel">
      <svg viewBox="0 0 460 280" aria-label="Main idea umbrella sheltering three supporting detail raindrops">
        
        <path d="M 230,10 L 230,22" stroke="#0284c7" stroke-width="4" stroke-linecap="round" />

        
        <path d="M 35,100 Q 230,-6 425,100 Q 376,86 328,100 Q 279,86 230,100 Q 181,86 132,100 Q 84,86 35,100 Z" 
              fill="#0284c7" />

        
        <path d="M 230,22 Q 181,60 132,100" fill="none" stroke="#7dd3fc" stroke-width="1.5" opacity="0.45" />
        <path d="M 230,22 Q 279,60 328,100" fill="none" stroke="#7dd3fc" stroke-width="1.5" opacity="0.45" />
        <path d="M 230,22 L 230,95" fill="none" stroke="#7dd3fc" stroke-width="1.5" opacity="0.45" />

        
        <text x="230" y="58" class="main-label">Main Idea</text>

        
        <path d="M 230,98 L 230,126 Q 230,138 216,138" 
              fill="none" stroke="#64748b" stroke-width="4" stroke-linecap="round" />

        
        
        <g transform="translate(85, 145)">
          <path d="M 0,0 C 20,24 44,52 44,78 A 44,44 0 1 1 -44,78 C -44,52 -20,24 0,0 Z" 
                fill="#ccfbf1" stroke="#2dd4bf" stroke-width="2.5" />
          <text x="0" y="70" class="detail-label-title">Supporting</text>
          <text x="0" y="86" class="detail-label-num">Detail 1</text>
        </g>

        
        <g transform="translate(230, 145)">
          <path d="M 0,0 C 20,24 44,52 44,78 A 44,44 0 1 1 -44,78 C -44,52 -20,24 0,0 Z" 
                fill="#ccfbf1" stroke="#2dd4bf" stroke-width="2.5" />
          <text x="0" y="70" class="detail-label-title">Supporting</text>
          <text x="0" y="86" class="detail-label-num">Detail 2</text>
        </g>

        
        <g transform="translate(375, 145)">
          <path d="M 0,0 C 20,24 44,52 44,78 A 44,44 0 1 1 -44,78 C -44,52 -20,24 0,0 Z" 
                fill="#ccfbf1" stroke="#2dd4bf" stroke-width="2.5" />
          <text x="0" y="70" class="detail-label-title">Supporting</text>
          <text x="0" y="86" class="detail-label-num">Detail 3</text>
        </g>
      </svg>
    </div>

    
    <div class="model-view" id="viewStool" role="tabpanel">
      <svg viewBox="0 0 460 280" aria-label="Main idea stool seat supported by three detail legs">
        
        
        <g>
          <polygon points="92,80 148,80 112,255 56,255" fill="#ccfbf1" stroke="#2dd4bf" stroke-width="2.5" />
          <g transform="rotate(-12, 102, 168)">
            <text x="102" y="160" class="detail-label-title">Supporting</text>
            <text x="102" y="177" class="detail-label-num">Detail 1</text>
          </g>
        </g>

        
        <g>
          <rect x="202" y="80" width="56" height="175" rx="5" fill="#ccfbf1" stroke="#2dd4bf" stroke-width="2.5" />
          <text x="230" y="160" class="detail-label-title">Supporting</text>
          <text x="230" y="177" class="detail-label-num">Detail 2</text>
        </g>

        
        <g>
          <polygon points="312,80 368,80 404,255 348,255" fill="#ccfbf1" stroke="#2dd4bf" stroke-width="2.5" />
          <g transform="rotate(12, 358, 168)">
            <text x="358" y="160" class="detail-label-title">Supporting</text>
            <text x="358" y="177" class="detail-label-num">Detail 3</text>
          </g>
        </g>

        
        <rect x="40" y="28" width="380" height="52" rx="12" fill="#0284c7" />
        <text x="230" y="54" class="main-label">Main Idea (Top Seat)</text>
      </svg>
    </div>
  </div>

  <script>
    function showModel(type) {
      const isUmbrella = type === 'umbrella';
      const btnUmbrella = document.getElementById('btnUmbrella');
      const btnStool = document.getElementById('btnStool');
      
      btnUmbrella.classList.toggle('active', isUmbrella);
      btnUmbrella.setAttribute('aria-selected', isUmbrella);
      
      btnStool.classList.toggle('active', !isUmbrella);
      btnStool.setAttribute('aria-selected', !isUmbrella);
      
      document.getElementById('viewUmbrella').classList.toggle('active', isUmbrella);
      document.getElementById('viewStool').classList.toggle('active', !isUmbrella);
    }
  </script>
</body>
</html>

Lässtrategier för enkla texter i olika medier

Aktivera förförståelse med rubriker och bilder

Läsa enkla ord och fraser i vardagstexter

Hitta nyckelord och betydelsebärande ord i text

Läsa mellan raderna: enkla inferenser och slutsatser

Läsa och tolka texter från olika medier

Grundläggande lässtrategier och textavkodning

Identifying Key Details from Read-Aloud Stories

Recounting Main Ideas from Audio and Video Clips

Combining Visual and Oral Information From a Video Source

Following Multi-Step Oral Directions in Sequence

Restating Spoken Instructions in Your Own Words

Giving Clear Step-by-Step Instructions to a Partner

Answering Why and How Questions About Spoken Texts

Listening Comprehension, Instructions, and Multimodal Media

Hälsa och presentera sig själv

Samtala om familj och släkt

Berätta om fritid och intressen

Beskriva hemmet och närmiljön

Strategier för att uppfatta nyckelord i talat språk

Använda förförståelse för att dra slutsatser av tal

Följa och ge enkla muntliga instruktioner

Artigt samtalsskick och turtagning

Samtal och lyssnande i vardagen på romani chib

Ställa frågor till texten: vem, vad, var och när

Reda ut obekanta ord under läsningens gång

Sammanfatta det viktigaste i en enkel text

Lyssna aktivt på talad meänkieli och uppfatta sammanhang

Läflyt och intonation vid högläsning

Kritiskt perspektiv på enkla texter i vardagen

Textbearbetning, läsflyt och kritisk läsning

¿Qué son los medios de comunicación masiva?

La radio: comunicar a través de la voz, los sonidos y la música

La televisión: combinar imágenes en movimiento y sonido

El periódico y las revistas: comunicación impresa y fotografía

Internet y los dispositivos digitales en la comunicación actual

Semejanzas y diferencias entre oír la radio y ver la televisión

Cómo viaja la noticia de un lugar a otro

Los medios de comunicación masiva en nuestra vida

Comentar nuestros programas favoritos de televisión y radio

Los noticieros: contar hechos reales del día a día

Los dibujos animados e historias de animación

Los anuncios comerciales y su intención de promocionar productos

Las telenovelas y series dramáticas: historias con actores

Las caricaturas de opinión en los periódicos

Comparar un noticiero, un dibujo animado y un comercial

Programas, formatos y mensajes en los medios

Uttrycka tankar och känslor i samtal

Diskutera aktuella händelser och samhällsfrågor

Muntlig presentation: Planering, inledning och avslutning

Anpassa kroppsspråk, röst och hjälpmedel vid presentationer

Muntligt berättande: Från traditionell sägen till personligt minne

Språklig anpassning efter syfte, mottagare och sammanhang

Språkets makt och möjlighet att utöva inflytande

Debatt och argumentationsteknik i praktiken

Tala, samtala och argumentera på romani chib

Following One-Step Spoken Instructions

Following Two-Step Spoken Instructions

Following Three-Step Spoken Instructions

Restating Oral Instructions in Your Own Words

Giving Clear Oral Instructions to a Partner

Following & Giving Oral Instructions

Lyssna efter nyckelord och betydelsebärande ord

Använda förförståelse vid lyssnande

Lyssna på enkla muntliga instruktioner

Lyssna på upplästa sagor och berättelser

Uppfatta tonfall och känslor i talat språk

Lyssna på barnradio och poddar på meänkieli

Grundläggande hörförståelse på meänkieli

Sortera viktig och oviktig information vid lyssnande

Lyssna på olika dialekter och uttal av meänkieli

Anteckna och rita medan man lyssnar

Återge information från en muntlig berättare

Lyssna aktivt utan att avbryta

Lyssna och svara på frågor om en dialog

Aktivt lyssnande och bearbetning på meänkieli

Uppfatta nyckelord och namn i talat språk

Använda förförståelse och sammanhang vid lyssnande

Uppfatta tids- och platsangivelser i tal

Lyssna på instruktioner och handla därefter

Förstå handlingen i en uppläst saga

Känna igen känslor genom tonfall och röstläge

Grundläggande hörförståelse i vardag och berättande

Lyssna på korta radioklipp och ljudfiler

Strategier för att gissa ord man inte hör tydligt

Lyssna på och förstå olika varieteter och dialekter

Fånga huvuddragen i en längre presentation

Kritiskt lyssnande till talade medier

Sammanfatta talad information med egna ord

Avancerad hörförståelse, medier och presentationer

What Does Active Listening Look Like?

Following Spoken Instructions

Taking Turns in Conversations

Speaking Clearly for Your Listener

Sharing Your Opinion About a Topic

Responding to Others' Ideas

Agreeing and Disagreeing Politely

Making Statements About What You Know

Giving Clear Instructions to a Partner

Building on Others' Ideas in Group Discussions

Interacting With Others

What Does It Mean to Compare Texts?

Finding the Same Topic in Different Text Types

How a Story Presents Information About a Topic

How an Information Text Presents the Same Topic

How a Persuasive Text Presents the Same Topic

Comparing Language Choices Across Text Types on the Same Topic

Discussing What You Notice About Different Texts

Comparing Texts on the Same Topic

Telling the Main Ideas From a Story Read to You

Sharing Important Details From What You Heard

Getting Information From Videos and Audio

Asking Questions About What Someone Said

Answering Questions About What You Heard

Listening to and Understanding Spoken Information

Telling a Story Out Loud With Details

Telling About an Experience With Good Details

Speaking Loud Enough for Everyone to Hear

Speaking in Full, Clear Sentences When You Talk

Making Audio Recordings of Stories and Poems

Adding Drawings to Help Tell Your Story

Putting It Together: Speaking and Listening Skills

Speaking Clearly and Presenting Information

Escritura de instrucciones: los pasos para un juego de patio

Escritura de una receta sencilla: cómo hacer una ensalada de frutas

Instrucciones para el cuidado y lavado correcto de las manos

Creación de un afiche ilustrado para el aula

Elaboración de una tarjeta de agradecimiento

Escritura de textos instructivos y mensajes prácticos

Descripción oral detallada de un objeto misterioso

Descripción oral de un paisaje o lugar visitado

Contar una anécdota personal siguiendo el orden del tiempo

Dar instrucciones orales para hacer una figura de origami

Explicar un juego tradicional a los amigos del salón

Comunicación oral: narración, descripción e instrucciones

OGE.3.SL.2

OGE.3.SL.2

Aligned learning resources

Related diagrams