<!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: #ffffff;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      user-select: none;
      -webkit-user-select: none;
    }

    .visualizer {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .line-row {
      position: relative;
      display: flex;
      align-items: center;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      gap: 10px;
      transition: background 0.25s ease, border-color 0.25s ease;
    }

    .line-row.active-line {
      background: #f0f9ff;
      border-color: #38bdf8;
    }

    .line-label {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      min-width: 48px;
    }

    .beats-container {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: space-between;
      padding: 0 4px;
    }

    .beat-node {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #e2e8f0;
      color: #64748b;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .beat-node.active {
      background: #0284c7;
      color: #ffffff;
      transform: scale(1.22);
      box-shadow: 0 0 0 5px rgba(2, 132, 199, 0.22);
    }

    .rhyme-tag {
      font-size: 13px;
      font-weight: 800;
      padding: 5px 10px;
      border-radius: 8px;
      min-width: 36px;
      text-align: center;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .rhyme-a {
      background: #f1f5f9;
      color: #94a3b8;
      border: 1px dashed #cbd5e1;
    }

    .rhyme-b {
      background: #ffedd5;
      color: #ea580c;
      border: 1px solid #fdba74;
    }

    .rhyme-b.active {
      background: #ea580c;
      color: #ffffff;
      transform: scale(1.15);
      box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.25);
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 14px;
      width: 100%;
    }

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

    .btn:active {
      background: #f1f5f9;
    }

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

    .btn.primary:active {
      background: #0369a1;
    }

    .meter-badge {
      font-size: 11px;
      font-weight: 600;
      color: #0284c7;
      background: #e0f2fe;
      padding: 2px 6px;
      border-radius: 4px;
      margin-left: 2px;
    }
  </style>
</head>
<body>

  <div class="visualizer">
    
    <div class="line-row" id="row-0">
      <div class="line-label">4 Beats <span class="meter-badge">Tetra</span></div>
      <div class="beats-container">
        <div class="beat-node" id="b-0-0">1</div>
        <div class="beat-node" id="b-0-1">2</div>
        <div class="beat-node" id="b-0-2">3</div>
        <div class="beat-node" id="b-0-3">4</div>
      </div>
      <div class="rhyme-tag rhyme-a" id="r-0">A</div>
    </div>

    
    <div class="line-row" id="row-1">
      <div class="line-label">3 Beats <span class="meter-badge">Tri</span></div>
      <div class="beats-container">
        <div class="beat-node" id="b-1-0">1</div>
        <div class="beat-node" id="b-1-1">2</div>
        <div class="beat-node" id="b-1-2">3</div>
      </div>
      <div class="rhyme-tag rhyme-b" id="r-1">B</div>
    </div>

    
    <div class="line-row" id="row-2">
      <div class="line-label">4 Beats <span class="meter-badge">Tetra</span></div>
      <div class="beats-container">
        <div class="beat-node" id="b-2-0">1</div>
        <div class="beat-node" id="b-2-1">2</div>
        <div class="beat-node" id="b-2-2">3</div>
        <div class="beat-node" id="b-2-3">4</div>
      </div>
      <div class="rhyme-tag rhyme-a" id="r-2">C</div>
    </div>

    
    <div class="line-row" id="row-3">
      <div class="line-label">3 Beats <span class="meter-badge">Tri</span></div>
      <div class="beats-container">
        <div class="beat-node" id="b-3-0">1</div>
        <div class="beat-node" id="b-3-1">2</div>
        <div class="beat-node" id="b-3-2">3</div>
      </div>
      <div class="rhyme-tag rhyme-b" id="r-3">B</div>
    </div>
  </div>

  <div class="controls">
    <button class="btn primary" id="playToggle">⏸ Pause</button>
    <button class="btn" id="soundToggle">🔇 Sound Off</button>
  </div>

  <script>
    const sequence = [
      { line: 0, beat: 0, isRhyme: false },
      { line: 0, beat: 1, isRhyme: false },
      { line: 0, beat: 2, isRhyme: false },
      { line: 0, beat: 3, isRhyme: false },
      { line: 1, beat: 0, isRhyme: false },
      { line: 1, beat: 1, isRhyme: false },
      { line: 1, beat: 2, isRhyme: true, rhymeId: 'r-1' },
      { line: 2, beat: 0, isRhyme: false },
      { line: 2, beat: 1, isRhyme: false },
      { line: 2, beat: 2, isRhyme: false },
      { line: 2, beat: 3, isRhyme: false },
      { line: 3, beat: 0, isRhyme: false },
      { line: 3, beat: 1, isRhyme: false },
      { line: 3, beat: 2, isRhyme: true, rhymeId: 'r-3' }
    ];

    let stepIndex = 0;
    let isPlaying = true;
    let soundEnabled = false;
    let timer = null;
    let audioCtx = null;

    function playTone(freq, duration = 0.18, type = 'sine') {
      if (!soundEnabled) return;
      try {
        if (!audioCtx) {
          audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        }
        if (audioCtx.state === 'suspended') {
          audioCtx.resume();
        }
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = type;
        osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        
        gain.gain.setValueAtTime(0.2, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + duration);
        osc.start();
        osc.stop(audioCtx.currentTime + duration);
      } catch (e) {}
    }

    function clearHighlights() {
      document.querySelectorAll('.beat-node').forEach(el => el.classList.remove('active'));
      document.querySelectorAll('.rhyme-tag').forEach(el => el.classList.remove('active'));
      document.querySelectorAll('.line-row').forEach(el => el.classList.remove('active-line'));
    }

    function advance() {
      clearHighlights();
      const current = sequence[stepIndex];

      const row = document.getElementById('row-' + current.line);
      const beat = document.getElementById('b-' + current.line + '-' + current.beat);
      if (row) row.classList.add('active-line');
      if (beat) beat.classList.add('active');

      if (current.isRhyme && current.rhymeId) {
        const rhyme = document.getElementById(current.rhymeId);
        if (rhyme) rhyme.classList.add('active');
        playTone(523.25, 0.35, 'triangle'); // C5 harmonic chime on rhyme
      } else {
        playTone(current.beat === 0 ? 330 : 261.63, 0.12, 'sine'); // Downbeat vs mid beat
      }

      stepIndex = (stepIndex + 1) % sequence.length;
    }

    function startLoop() {
      if (timer) clearInterval(timer);
      timer = setInterval(advance, 520);
    }

    function stopLoop() {
      if (timer) clearInterval(timer);
      timer = null;
    }

    const playToggleBtn = document.getElementById('playToggle');
    playToggleBtn.addEventListener('click', () => {
      isPlaying = !isPlaying;
      if (isPlaying) {
        playToggleBtn.textContent = '⏸ Pause';
        startLoop();
      } else {
        playToggleBtn.textContent = '▶ Play';
        stopLoop();
      }
    });

    const soundToggleBtn = document.getElementById('soundToggle');
    soundToggleBtn.addEventListener('click', () => {
      soundEnabled = !soundEnabled;
      if (soundEnabled) {
        if (!audioCtx) {
          audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        }
        if (audioCtx.state === 'suspended') {
          audioCtx.resume();
        }
        soundToggleBtn.textContent = '🔊 Sound On';
      } else {
        soundToggleBtn.textContent = '🔇 Sound Off';
      }
    });

    advance();
    startLoop();
  </script>
</body>
</html>

Analyzing Stanzas and Traditional Poetic Forms

<!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="1:1">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      user-select: none;
    }

    /* Tabs / Controls */
    .tabs {
      display: flex;
      gap: 4px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .tab-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 9px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      transition: all 0.2s ease;
    }
    .tab-btn.active {
      background: #0f172a;
      color: #ffffff;
      border-color: #0f172a;
    }

    /* Main Diagram Container */
    .sonnet-frame {
      display: flex;
      flex-direction: column;
      gap: 6px;
      position: relative;
    }

    /* Stanza Block */
    .stanza {
      border-radius: 8px;
      padding: 6px 10px;
      border: 1.5px solid transparent;
      cursor: pointer;
      transition: opacity 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
      position: relative;
    }
    .stanza.dimmed {
      opacity: 0.35;
    }
    .stanza.active {
      opacity: 1;
      box-shadow: 0 0 0 2px #0f172a;
    }

    /* Stanza Themes */
    .q1 { background: #eff6ff; border-color: #bfdbfe; }
    .q2 { background: #ecfeff; border-color: #a5f3fc; }
    .q3 { background: #fefce8; border-color: #fef08a; }
    .couplet { background: #f0fdf4; border-color: #bbf7d0; }

    /* Header in Stanza */
    .stanza-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 4px;
    }
    .q1 .stanza-header { color: #1d4ed8; }
    .q2 .stanza-header { color: #0e7490; }
    .q3 .stanza-header { color: #a16207; }
    .couplet .stanza-header { color: #15803d; }

    .role-tag {
      font-size: 11px;
      font-weight: 600;
      padding: 1px 6px;
      border-radius: 4px;
      background: rgba(255,255,255,0.8);
    }

    /* Lines representation */
    .lines-grid {
      display: grid;
      gap: 3px;
    }
    .line-row {
      display: flex;
      align-items: center;
      gap: 6px;
      height: 13px;
    }
    .line-num {
      font-size: 10px;
      font-weight: 600;
      color: #94a3b8;
      width: 14px;
      text-align: right;
    }
    .line-bar {
      flex: 1;
      height: 5px;
      border-radius: 3px;
      background: currentColor;
      opacity: 0.3;
    }
    .q1 .line-bar { color: #3b82f6; }
    .q2 .line-bar { color: #06b6d4; }
    .q3 .line-bar { color: #eab308; }
    .couplet .line-bar { color: #22c55e; }

    .rhyme-code {
      font-size: 11px;
      font-family: monospace;
      font-weight: 700;
      width: 14px;
      text-align: center;
      color: #475569;
    }

    /* Volta Indicator */
    .volta-indicator {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 2px 0;
      color: #e11d48;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.5px;
      transition: opacity 0.25s ease;
    }
    .volta-indicator.dimmed {
      opacity: 0.35;
    }
    .volta-indicator.active {
      opacity: 1;
      transform: scale(1.04);
    }
    .volta-arrow {
      font-size: 13px;
    }
  </style>
</head>
<body>

  
  <div class="tabs" id="tabBar">
    <button class="tab-btn active" data-target="all">All (14 Lines)</button>
    <button class="tab-btn" data-target="q1">Q1 (1–4)</button>
    <button class="tab-btn" data-target="q2">Q2 (5–8)</button>
    <button class="tab-btn" data-target="q3">Q3 (9–12)</button>
    <button class="tab-btn" data-target="volta">⚡ Volta</button>
    <button class="tab-btn" data-target="couplet">Couplet (13–14)</button>
  </div>

  
  <div class="sonnet-frame">
    
    <div class="stanza q1" id="block-q1" data-target="q1">
      <div class="stanza-header">
        <span>Quatrain 1 · ABAB</span>
        <span class="role-tag">The Setup</span>
      </div>
      <div class="lines-grid">
        <div class="line-row"><span class="line-num">1</span><div class="line-bar"></div><span class="rhyme-code">A</span></div>
        <div class="line-row"><span class="line-num">2</span><div class="line-bar"></div><span class="rhyme-code">B</span></div>
        <div class="line-row"><span class="line-num">3</span><div class="line-bar"></div><span class="rhyme-code">A</span></div>
        <div class="line-row"><span class="line-num">4</span><div class="line-bar"></div><span class="rhyme-code">B</span></div>
      </div>
    </div>

    
    <div class="stanza q2" id="block-q2" data-target="q2">
      <div class="stanza-header">
        <span>Quatrain 2 · CDCD</span>
        <span class="role-tag">The Development</span>
      </div>
      <div class="lines-grid">
        <div class="line-row"><span class="line-num">5</span><div class="line-bar"></div><span class="rhyme-code">C</span></div>
        <div class="line-row"><span class="line-num">6</span><div class="line-bar"></div><span class="rhyme-code">D</span></div>
        <div class="line-row"><span class="line-num">7</span><div class="line-bar"></div><span class="rhyme-code">C</span></div>
        <div class="line-row"><span class="line-num">8</span><div class="line-bar"></div><span class="rhyme-code">D</span></div>
      </div>
    </div>

    
    <div class="stanza q3" id="block-q3" data-target="q3">
      <div class="stanza-header">
        <span>Quatrain 3 · EFEF</span>
        <span class="role-tag">The Twist / Shift</span>
      </div>
      <div class="lines-grid">
        <div class="line-row"><span class="line-num">9</span><div class="line-bar"></div><span class="rhyme-code">E</span></div>
        <div class="line-row"><span class="line-num">10</span><div class="line-bar"></div><span class="rhyme-code">F</span></div>
        <div class="line-row"><span class="line-num">11</span><div class="line-bar"></div><span class="rhyme-code">E</span></div>
        <div class="line-row"><span class="line-num">12</span><div class="line-bar"></div><span class="rhyme-code">F</span></div>
      </div>
    </div>

    
    <div class="volta-indicator" id="block-volta" data-target="volta">
      <span class="volta-arrow">⤵</span>
      <span>VOLTA (The Turn)</span>
      <span class="volta-arrow">⤴</span>
    </div>

    
    <div class="stanza couplet" id="block-couplet" data-target="couplet">
      <div class="stanza-header">
        <span>Couplet · GG</span>
        <span class="role-tag">The Resolution</span>
      </div>
      <div class="lines-grid">
        <div class="line-row"><span class="line-num">13</span><div class="line-bar"></div><span class="rhyme-code">G</span></div>
        <div class="line-row"><span class="line-num">14</span><div class="line-bar"></div><span class="rhyme-code">G</span></div>
      </div>
    </div>
  </div>

  <script>
    const tabs = document.querySelectorAll('.tab-btn');
    const stanzas = document.querySelectorAll('.stanza');
    const volta = document.getElementById('block-volta');

    function setActive(target) {
      // Update Tab UI
      tabs.forEach(tab => {
        tab.classList.toggle('active', tab.dataset.target === target);
      });

      // Update Diagram Highlight
      if (target === 'all') {
        stanzas.forEach(s => { s.classList.remove('dimmed', 'active'); });
        volta.classList.remove('dimmed', 'active');
      } else if (target === 'volta') {
        stanzas.forEach(s => { s.classList.add('dimmed'); s.classList.remove('active'); });
        volta.classList.remove('dimmed');
        volta.classList.add('active');
      } else {
        stanzas.forEach(s => {
          if (s.dataset.target === target) {
            s.classList.remove('dimmed');
            s.classList.add('active');
          } else {
            s.classList.add('dimmed');
            s.classList.remove('active');
          }
        });
        volta.classList.add('dimmed');
        volta.classList.remove('active');
      }
    }

    tabs.forEach(tab => {
      tab.addEventListener('click', () => setActive(tab.dataset.target));
    });

    stanzas.forEach(stanza => {
      stanza.addEventListener('click', () => setActive(stanza.dataset.target));
    });

    volta.addEventListener('click', () => setActive('volta'));
  </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, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      user-select: none;
    }

    .title-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
    }
    .main-title {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: -0.2px;
    }

    .tabs {
      display: flex;
      gap: 4px;
      background: #e2e8f0;
      padding: 2px;
      border-radius: 8px;
    }
    .tab-btn {
      border: none;
      background: transparent;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .tab-btn.active {
      background: #ffffff;
      color: #2563eb;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .form-pills {
      display: flex;
      gap: 4px;
      overflow-x: auto;
      padding-bottom: 2px;
    }
    .pill-btn {
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      padding: 3px 8px;
      font-size: 11px;
      font-weight: 600;
      color: #475569;
      border-radius: 12px;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.2s ease;
    }
    .pill-btn.active {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #1d4ed8;
    }

    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      min-height: 270px;
    }
    @media (max-width: 480px) {
      .comparison-grid {
        grid-template-columns: 1fr;
      }
    }

    .panel {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: relative;
    }
    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      border-bottom: 1px solid #e2e8f0;
      padding-bottom: 4px;
    }
    .panel-name {
      font-size: 13px;
      font-weight: 700;
      color: #334155;
    }
    .panel-tag {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
    }

    .canvas-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
      min-height: 180px;
    }

    /* Fixed side lines */
    .line-row {
      display: flex;
      align-items: center;
      gap: 6px;
      height: 16px;
      transition: all 0.3s ease;
    }
    .line-bar {
      height: 8px;
      background: #cbd5e1;
      border-radius: 4px;
      flex: 1;
      display: flex;
      gap: 2px;
      padding: 1px;
      align-items: center;
    }
    .meter-beat {
      flex: 1;
      height: 100%;
      border-radius: 2px;
      background: #94a3b8;
    }
    .meter-beat.stress {
      background: #2563eb;
    }

    .rhyme-badge {
      width: 18px;
      height: 18px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0;
    }
    .rhyme-A { background: #3b82f6; }
    .rhyme-B { background: #f59e0b; }
    .rhyme-C { background: #10b981; }
    .rhyme-D { background: #8b5cf6; }
    .rhyme-E { background: #ec4899; }
    .rhyme-F { background: #06b6d4; }
    .rhyme-G { background: #e11d48; }
    .rhyme-none { background: #cbd5e1; color: #64748b; }

    /* Free verse organic styling */
    .free-wave-box {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 4px 0;
    }
    .organic-line {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .wave-svg {
      flex: 1;
      height: 16px;
    }
    .pause-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #a855f7;
      opacity: 0.8;
    }

    .footer-label {
      font-size: 11px;
      text-align: center;
      font-weight: 600;
      color: #64748b;
      padding-top: 4px;
      border-top: 1px dashed #e2e8f0;
    }
  </style>
</head>
<body>

  <div class="title-bar">
    <div class="main-title">Poetic Form Spectrum</div>
    <div class="tabs">
      <button class="tab-btn active" onclick="setLens('count')">Line Count</button>
      <button class="tab-btn" onclick="setLens('rhyme')">Rhyme</button>
      <button class="tab-btn" onclick="setLens('meter')">Meter</button>
    </div>
  </div>

  <div class="form-pills">
    <button class="pill-btn" onclick="setForm('couplet')">Couplet</button>
    <button class="pill-btn" onclick="setForm('quatrain')">Quatrain</button>
    <button class="pill-btn" onclick="setForm('ballad')">Ballad</button>
    <button class="pill-btn active" onclick="setForm('sonnet')">Sonnet</button>
    <button class="pill-btn" onclick="setForm('free')">Free Verse</button>
  </div>

  <div class="comparison-grid">
    
    <div class="panel">
      <div class="panel-header">
        <span class="panel-name" id="fixedTitle">Fixed: Sonnet</span>
        <span class="panel-tag" id="fixedTag">Strict Rules</span>
      </div>
      <div class="canvas-area" id="fixedArea"></div>
      <div class="footer-label" id="fixedFooter">14 Lines • ABAB CDCD • Iambic</div>
    </div>

    
    <div class="panel">
      <div class="panel-header">
        <span class="panel-name">Free Verse</span>
        <span class="panel-tag">Open Form</span>
      </div>
      <div class="canvas-area" id="freeArea"></div>
      <div class="footer-label" id="freeFooter">Variable • Non-Rhyming • Cadence</div>
    </div>
  </div>

  <script>
    const forms = {
      couplet: {
        name: "Fixed: Couplet",
        tag: "2 Lines",
        lines: 2,
        rhymes: ['A', 'A'],
        beats: [8, 8],
        footer: "2 Lines • AA • Regular Beats"
      },
      quatrain: {
        name: "Fixed: Quatrain",
        tag: "4 Lines",
        lines: 4,
        rhymes: ['A', 'B', 'A', 'B'],
        beats: [8, 8, 8, 8],
        footer: "4 Lines • ABAB • Regular Beats"
      },
      ballad: {
        name: "Fixed: Ballad",
        tag: "4-Line Stanza",
        lines: 4,
        rhymes: ['A', 'B', 'C', 'B'],
        beats: [8, 6, 8, 6],
        footer: "4 Lines • ABCB • 4/3 Beat Alternation"
      },
      sonnet: {
        name: "Fixed: Sonnet",
        tag: "14 Lines",
        lines: 14,
        rhymes: ['A','B','A','B','C','D','C','D','E','F','E','F','G','G'],
        beats: Array(14).fill(10),
        footer: "14 Lines • ABAB CDCD EFEF GG • 10 Beats"
      },
      free: {
        name: "Open: Free Verse",
        tag: "Variable",
        lines: 5,
        rhymes: ['∅','∅','∅','∅','∅'],
        beats: [5, 9, 4, 11, 6],
        footer: "No Fixed Count • Organic Breaths"
      }
    };

    let activeLens = 'count';
    let currentFixed = 'sonnet';

    function setLens(lens) {
      activeLens = lens;
      document.querySelectorAll('.tab-btn').forEach(b => {
        b.classList.toggle('active', b.textContent.toLowerCase().includes(lens === 'count' ? 'line' : lens));
      });
      render();
    }

    function setForm(formKey) {
      if (formKey === 'free') {
        currentFixed = 'sonnet';
      } else {
        currentFixed = formKey;
      }
      document.querySelectorAll('.pill-btn').forEach(b => {
        b.classList.toggle('active', b.textContent.toLowerCase().includes(formKey));
      });
      render();
    }

    function render() {
      const data = forms[currentFixed];
      document.getElementById('fixedTitle').textContent = data.name;
      document.getElementById('fixedTag').textContent = data.tag;
      document.getElementById('fixedFooter').textContent = data.footer;

      // Render Fixed Area
      const fixedArea = document.getElementById('fixedArea');
      fixedArea.innerHTML = '';
      
      const maxDisplayLines = Math.min(data.lines, 14);
      const isDense = maxDisplayLines > 6;

      for (let i = 0; i < maxDisplayLines; i++) {
        const row = document.createElement('div');
        row.className = 'line-row';
        if (isDense) row.style.height = '10px';

        const bar = document.createElement('div');
        bar.className = 'line-bar';

        if (activeLens === 'meter') {
          const beatCount = data.beats[i] || 8;
          for (let b = 0; b < beatCount; b++) {
            const beat = document.createElement('div');
            beat.className = 'meter-beat' + (b % 2 === 1 ? ' stress' : '');
            bar.appendChild(beat);
          }
        }

        row.appendChild(bar);

        if (activeLens === 'rhyme') {
          const badge = document.createElement('div');
          const r = data.rhymes[i] || 'A';
          badge.className = `rhyme-badge rhyme-${r}`;
          badge.textContent = r;
          if (isDense) {
            badge.style.width = '12px';
            badge.style.height = '12px';
            badge.style.fontSize = '8px';
          }
          row.appendChild(badge);
        }

        fixedArea.appendChild(row);
      }

      // Render Free Verse Area
      const freeArea = document.getElementById('freeArea');
      freeArea.innerHTML = '';
      const freeLengths = [85, 45, 95, 60, 75, 40];

      const waveBox = document.createElement('div');
      waveBox.className = 'free-wave-box';

      freeLengths.forEach((w, idx) => {
        const oLine = document.createElement('div');
        oLine.className = 'organic-line';
        
        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        svg.setAttribute('class', 'wave-svg');
        svg.setAttribute('viewBox', `0 0 ${w} 14`);
        svg.style.maxWidth = `${w}%`;

        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
        const strokeColor = activeLens === 'meter' ? '#8b5cf6' : '#94a3b8';
        const d = `M 2 7 Q ${w*0.25} ${idx%2===0?2:12}, ${w*0.5} 7 T ${w-4} 7`;
        
        path.setAttribute('d', d);
        path.setAttribute('fill', 'none');
        path.setAttribute('stroke', strokeColor);
        path.setAttribute('stroke-width', activeLens === 'meter' ? '3' : '2');
        path.setAttribute('stroke-linecap', 'round');
        if (activeLens === 'count') {
          path.setAttribute('stroke-dasharray', '4 2');
        }

        svg.appendChild(path);
        oLine.appendChild(svg);

        if (activeLens === 'rhyme') {
          const badge = document.createElement('div');
          badge.className = 'rhyme-badge rhyme-none';
          badge.textContent = '∅';
          oLine.appendChild(badge);
        } else if (activeLens === 'meter') {
          const pause = document.createElement('div');
          pause.className = 'pause-dot';
          oLine.appendChild(pause);
        }

        waveBox.appendChild(oLine);
      });

      freeArea.appendChild(waveBox);
    }

    render();
  </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, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .toolbar {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .btn {
      background: #ffffff;
      border: 1px solid #d1d5db;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #4b5563;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.25s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    .btn:hover { background: #f3f4f6; }
    .btn.active {
      background: #1e2945;
      border-color: #1e2945;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(30, 41, 69, 0.2);
    }

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

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

    .stanza-card {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .card-header {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid #f3f4f6;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .lines-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
      position: relative;
      flex: 1;
      justify-content: center;
    }

    .line-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f9fafb;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid #f0f2f5;
      font-size: 14px;
      transition: all 0.3s ease;
      position: relative;
    }

    .line-text {
      color: #374151;
      font-style: italic;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-right: 8px;
    }

    .line-text span.rhyme-word {
      font-weight: 700;
      font-style: normal;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .badge {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 13px;
      flex-shrink: 0;
      transition: all 0.3s ease;
    }

    .badge-a {
      background: #eff6ff;
      color: #2563eb;
      border: 1px solid #bfdbfe;
    }

    .badge-b {
      background: #fdf2f8;
      color: #db2777;
      border: 1px solid #fbcfe8;
    }

    /* Glow Highlights */
    .highlight-a .badge-a {
      background: #2563eb;
      color: #ffffff;
      box-shadow: 0 0 10px rgba(37, 99, 235, 0.6);
      transform: scale(1.08);
    }
    .highlight-a .row-a {
      background: #f0f7ff;
      border-color: #93c5fd;
    }
    .highlight-a .row-a .rhyme-word {
      color: #2563eb;
    }

    .highlight-b .badge-b {
      background: #db2777;
      color: #ffffff;
      box-shadow: 0 0 10px rgba(219, 39, 119, 0.6);
      transform: scale(1.08);
    }
    .highlight-b .row-b {
      background: #fdf2f8;
      border-color: #f472b6;
    }
    .highlight-b .row-b .rhyme-word {
      color: #db2777;
    }

    /* Connecting bracket bar */
    .scheme-bracket {
      position: absolute;
      right: -6px;
      top: 12px;
      bottom: 12px;
      width: 4px;
      border-right: 3px solid transparent;
      border-radius: 2px;
      transition: border-color 0.3s ease;
      pointer-events: none;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <button class="btn active" id="btnAll" onclick="setMode('all')">Show All</button>
    <button class="btn" id="btnA" onclick="setMode('a')">Rhyme [A]</button>
    <button class="btn" id="btnB" onclick="setMode('b')">Rhyme [B]</button>
  </div>

  <div class="cards-grid" id="grid">
    
    <div class="stanza-card">
      <div class="card-header">
        <span>Couplet</span>
        <span style="font-size:12px; font-weight:600; color:#6b7280;">2 Lines • A A</span>
      </div>
      <div class="lines-container">
        <div class="line-row row-a">
          <span class="line-text">I have the <span class="rhyme-word">keys</span></span>
          <span class="badge badge-a">A</span>
        </div>
        <div class="line-row row-a">
          <span class="line-text">Among the <span class="rhyme-word">trees</span></span>
          <span class="badge badge-a">A</span>
        </div>
      </div>
    </div>

    
    <div class="stanza-card">
      <div class="card-header">
        <span>Quatrain</span>
        <span style="font-size:12px; font-weight:600; color:#6b7280;">4 Lines • A B A B</span>
      </div>
      <div class="lines-container">
        <div class="line-row row-a">
          <span class="line-text">The sun shines <span class="rhyme-word">bright</span></span>
          <span class="badge badge-a">A</span>
        </div>
        <div class="line-row row-b">
          <span class="line-text">Upon the <span class="rhyme-word">sea</span></span>
          <span class="badge badge-b">B</span>
        </div>
        <div class="line-row row-a">
          <span class="line-text">With all its <span class="rhyme-word">might</span></span>
          <span class="badge badge-a">A</span>
        </div>
        <div class="line-row row-b">
          <span class="line-text">For you and <span class="rhyme-word">me</span></span>
          <span class="badge badge-b">B</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    function setMode(mode) {
      const grid = document.getElementById('grid');
      const btnAll = document.getElementById('btnAll');
      const btnA = document.getElementById('btnA');
      const btnB = document.getElementById('btnB');

      btnAll.classList.remove('active');
      btnA.classList.remove('active');
      btnB.classList.remove('active');
      grid.classList.remove('highlight-a', 'highlight-b');

      if (mode === 'all') {
        btnAll.classList.add('active');
        grid.classList.add('highlight-a', 'highlight-b');
      } else if (mode === 'a') {
        btnA.classList.add('active');
        grid.classList.add('highlight-a');
      } else if (mode === 'b') {
        btnB.classList.add('active');
        grid.classList.add('highlight-b');
      }
    }

    // Default initial highlight
    setMode('all');
  </script>
</body>
</html>

Scanning Poetic Meter, Rhythm, and Syllabic Stress

Analyzing Rhyme Schemes and Internal Rhyme

Evaluating Sound Devices: Alliteration, Assonance, Consonance, and Onomatopoeia

Analyzing Line Breaks, Enjambment, and Caesura

Evaluating Graphical Elements: Capitalization, Punctuation, and Layout

Poetic Craft: Meter, Rhyme, and Visual Structures

Determining Word Meaning in Literature

Figurative Meaning in Literature

Connotative Meaning in Literature

Interpreting Similes and Metaphors

Personification and Its Effects on Meaning

Alliteration's Impact on Meaning

Rhyme and Repetition in Poetry

Onomatopoeia and Sound Imagery

Analyzing Sound Devices in a Specific Stanza

Analyzing Word Choice in a Complete Literary Text

Word Meaning, Figurative Language, and Sound Devices in Literature

How a Poem's Form Contributes to Its Meaning

Analyzing Sonnet Structure and Meaning

Understanding Soliloquy in Drama

How Drama Structure Builds Meaning

How Stanzas Build Meaning in Poetry

Comparing Poem and Drama Structure

Analyzing Structure in a Complete Poem

Analyzing Drama and Poetry Form and Structure

El pacto ficcional: realidad y ficción en la narrativa

Tipos de narrador: omnisciente, protagonista y testigo

Personajes: principales, secundarios, antagonistas y arquetipos

Evolución del personaje: personajes planos y redondos

El tiempo en la narración: tiempo cronológico, analepsis y prolepsis

El espacio y la atmósfera narrativa: escenarios reales y fantásticos

El conflicto narrativo: interno, interpersonal y contra el entorno

Componentes estructurales de la narrativa

El cuento maravilloso tradicional y de hadas

El cuento policial: enigmas, pistas y deducción lógica

El cuento de ciencia ficción y fantástico: lo posible y lo insólito

La novela juvenil: complejidad argumental y multiplicidad de tramas

La crónica literaria: el cruce entre periodismo y narrativa

Procedimientos narrativos: el diálogo, el monólogo y la descripción

Formulación de hipótesis interpretativas en textos narrativos

Lectura y contexto sociocultural de narradores colombianos y latinoamericanos

Géneros narrativos y análisis interpretativo

El yo lírico y la expresión del mundo interior

El verso, la estrofa y el poema como unidad

La métrica: conteo silábico, sinalefa y acentos

La rima: consonante, asonante y el verso libre

Figuras de significación: metáfora y símil

Figuras de significación: personificación e hipérbole

Figuras de dicción y sonido: aliteración y onomatopeya

Figuras sintácticas: anáfora y elipsis

Elementos formales y figuras retóricas en la poesía

Formas poéticas tradicionales: el soneto y el romance

Poesía contemporánea: haiku y caligrama, la imagen poética

Análisis estilístico integrado de textos poéticos y narrativos

Temas universales en la lírica: el amor, el tiempo, la naturaleza y la muerte

La declamación y lectura en voz alta de poemas

Creación poética: juegos de palabras y escritura creativa

Formas poéticas, interpretación y creación literaria

Texto dramático frente a representación teatral

El texto dramático: acotaciones, parlamentos y didascalias

Parlamentos: diálogo, monólogo, soliloquio y aparte

Estructura externa de la obra: actos, cuadros y escenas

Estructura interna del drama: presentación, nudo, clímax y desenlace

Los subgéneros teatrales mayores: la tragedia y la comedia

Los subgéneros menores: el entremés, el sainete y el sketch

El drama o tragicomedia: la mezcla de lo grave y lo cómico

El género dramático: texto, estructura y subgéneros

Elementos de la puesta en escena: escenografía, luces y vestuario

El teatro de títeres, marionetas y sombras

Lectura dramatizada y juegos de rol en el aula

Adaptación de un cuento a guion teatral breve

El teatro en Colombia y Latinoamérica: voces y contextos

Hipótesis de sentido y mensaje social en la obra dramática

Del texto a la escena: puesta en escena, práctica y contexto teatral

¿Qué es un género literario? Criterios de distinción: narrativa, lírica y drama

La intertextualidad: el diálogo entre obras de distintas épocas

El viaje del héroe: comparación del arquetipo en mitos y narrativa moderna

Tratamiento del tiempo en la novela frente al tiempo en el drama

El lenguaje poético en la prosa narrativa: la prosa poética

Personajes en espejo: comparación de protagonistas en diversas obras

Procedimientos comparativos entre géneros literarios

El contexto histórico como clave de interpretación de la obra

Geografía y literatura: la selva, el mar y la ciudad como personajes

Formulación de hipótesis temáticas según la región y época

Síntesis crítica y juicio valorativo sobre obras literarias

Tertulias literarias dialógicas: debate y argumentación estética

Cuadro comparativo de obras literarias por género, época y temática

Contexto, interpretación y juicio crítico literario

Analyzing Rhyme Scheme Across Poetic Forms

Analyzing Meter Across Poetic Forms

Analyzing Punctuation and Capitalization as Graphical Elements in Poetry

Comparing Rhyme, Meter, and Graphics Across Poetic Forms

Analyzing How Dialogue Develops Characters in Drama

Analyzing How Staging and Stage Directions Develop Characters

Analyzing How Playwrights Develop Characters Through Dialogue and Staging Together

Analyzing Poetry and Drama

OGE.8.RL.4

OGE.8.RL.4

Aligned learning resources

Related diagrams