<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>AABB Rhyme Scheme Diagram</title>
  <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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px 12px;
      overflow-x: hidden;
    }

    .scheme-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
    }

    .scheme-title {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #64748b;
    }

    .pattern-pills {
      display: flex;
      gap: 4px;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border-radius: 6px;
      font-weight: 800;
      font-size: 14px;
    }

    .pill-a {
      background: #0284c7;
      color: #ffffff;
    }

    .pill-b {
      background: #ea580c;
      color: #ffffff;
    }

    /* Main Poem Grid */
    .poem-layout {
      width: 100%;
      max-width: 540px;
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 10px 8px;
      align-items: center;
      position: relative;
    }

    .line-row {
      display: contents;
    }

    /* Poem text box */
    .line-box {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 15px;
      font-weight: 500;
      color: #334155;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
    }

    .line-box.group-a.active {
      background: #f0f9ff;
      border-color: #0284c7;
      box-shadow: 0 0 0 1px #0284c7;
    }

    .line-box.group-b.active {
      background: #fff7ed;
      border-color: #ea580c;
      box-shadow: 0 0 0 1px #ea580c;
    }

    .line-box.dimmed {
      opacity: 0.4;
    }

    .rhyme-word {
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 4px;
      letter-spacing: 0.02em;
    }

    .group-a .rhyme-word {
      background: #e0f2fe;
      color: #0369a1;
    }

    .group-b .rhyme-word {
      background: #ffedd5;
      color: #c2410c;
    }

    /* Scheme Badge */
    .scheme-badge {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 15px;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .scheme-badge.badge-a {
      background: #0284c7;
      color: #ffffff;
    }

    .scheme-badge.badge-b {
      background: #ea580c;
      color: #ffffff;
    }

    .scheme-badge.dimmed {
      opacity: 0.35;
    }

    /* Brackets */
    .bracket-col {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      padding: 4px 0;
    }

    .bracket-pair {
      grid-column: 3;
      display: flex;
      align-items: center;
      gap: 6px;
      padding-left: 2px;
      transition: opacity 0.25s ease;
    }

    .bracket-pair.dimmed {
      opacity: 0.3;
    }

    .bracket-pair-a {
      grid-row: 1 / span 2;
    }

    .bracket-pair-b {
      grid-row: 3 / span 4;
    }

    .bracket-svg {
      width: 14px;
      height: 72px;
    }

    .bracket-label {
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
      padding: 4px 8px;
      border-radius: 6px;
    }

    .label-a {
      background: #e0f2fe;
      color: #0369a1;
      border: 1px solid #bae6fd;
    }

    .label-b {
      background: #ffedd5;
      color: #c2410c;
      border: 1px solid #fed7aa;
    }

    /* Filter Controls */
    .controls {
      display: flex;
      gap: 8px;
      margin-top: 18px;
    }

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

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

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

    .filter-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    .dot-all { background: #64748b; }
    .dot-a { background: #0284c7; }
    .dot-b { background: #ea580c; }

    @media (max-width: 480px) {
      .line-box {
        font-size: 13px;
        padding: 8px 10px;
      }
      .bracket-label {
        font-size: 11px;
        padding: 3px 6px;
      }
      .scheme-badge {
        width: 28px;
        height: 28px;
        font-size: 13px;
      }
      .bracket-svg {
        height: 64px;
      }
    }
  </style>
</head>
<body>

  <div class="scheme-header">
    <span class="scheme-title">Rhyme Scheme</span>
    <div class="pattern-pills">
      <span class="pill pill-a">A</span>
      <span class="pill pill-a">A</span>
      <span class="pill pill-b">B</span>
      <span class="pill pill-b">B</span>
    </div>
  </div>

  <div class="poem-layout">
    
    <div class="line-box group-a active" data-group="a">
      <span>I saw a little puppy</span>
      <span class="rhyme-word">bark</span>
    </div>
    <div class="scheme-badge badge-a" data-group="a">A</div>

    
    <div class="bracket-pair bracket-pair-a" data-group="a">
      <svg class="bracket-svg" viewBox="0 0 14 72" fill="none">
        <path d="M2 2 C8 2, 8 36, 12 36 C8 36, 8 70, 2 70" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" fill="none"/>
      </svg>
      <span class="bracket-label label-a">A-A pair</span>
    </div>

    
    <div class="line-box group-a active" data-group="a">
      <span>While playing in the sunny</span>
      <span class="rhyme-word">park</span>
    </div>
    <div class="scheme-badge badge-a" data-group="a">A</div>

    
    <div class="line-box group-b active" data-group="b">
      <span>He chased a shiny yellow</span>
      <span class="rhyme-word">ball</span>
    </div>
    <div class="scheme-badge badge-b" data-group="b">B</div>

    
    <div class="bracket-pair bracket-pair-b" data-group="b">
      <svg class="bracket-svg" viewBox="0 0 14 72" fill="none">
        <path d="M2 2 C8 2, 8 36, 12 36 C8 36, 8 70, 2 70" stroke="#ea580c" stroke-width="2.5" stroke-linecap="round" fill="none"/>
      </svg>
      <span class="bracket-label label-b">B-B pair</span>
    </div>

    
    <div class="line-box group-b active" data-group="b">
      <span>And rolled against the garden</span>
      <span class="rhyme-word">wall</span>
    </div>
    <div class="scheme-badge badge-b" data-group="b">B</div>
  </div>

  <div class="controls">
    <button class="filter-btn active" data-filter="all">
      <span class="filter-dot dot-all"></span>All
    </button>
    <button class="filter-btn" data-filter="a">
      <span class="filter-dot dot-a"></span>A-A Pair
    </button>
    <button class="filter-btn" data-filter="b">
      <span class="filter-dot dot-b"></span>B-B Pair
    </button>
  </div>

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

    const buttons = document.querySelectorAll('.filter-btn');
    const lineBoxes = document.querySelectorAll('.line-box');
    const badges = document.querySelectorAll('.scheme-badge');
    const brackets = document.querySelectorAll('.bracket-pair');

    function setFilter(filter) {
      buttons.forEach(btn => {
        btn.classList.toggle('active', btn.dataset.filter === filter);
      });

      const applyState = (elements) => {
        elements.forEach(el => {
          const group = el.dataset.group;
          if (filter === 'all' || filter === group) {
            el.classList.remove('dimmed');
            if (el.classList.contains('line-box')) el.classList.add('active');
          } else {
            el.classList.add('dimmed');
            if (el.classList.contains('line-box')) el.classList.remove('active');
          }
        });
      };

      applyState(lineBoxes);
      applyState(badges);
      applyState(brackets);
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        const filter = btn.dataset.filter;
        if (filter === 'a') playTone(440);
        else if (filter === 'b') playTone(554.37);
        else playTone(523.25);
        setFilter(filter);
      });
    });

    // Tap directly on line boxes to isolate rhyme pairs
    lineBoxes.forEach(box => {
      box.addEventListener('click', () => {
        const group = box.dataset.group;
        if (group === 'a') playTone(440);
        else playTone(554.37);
        setFilter(group);
      });
    });
  </script>
</body>
</html>

Identifying Rhyme Schemes in Poems and Songs

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

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

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

    .tab-btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 999px;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

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

    .tab-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25);
    }

    .tab-btn.tab-a.active {
      background: #0d9488;
      border-color: #0d9488;
      box-shadow: 0 2px 4px rgba(13, 148, 136, 0.25);
    }

    .tab-btn.tab-b.active {
      background: #ea580c;
      border-color: #ea580c;
      box-shadow: 0 2px 4px rgba(234, 88, 12, 0.25);
    }

    .poem-box {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding-right: 50px;
    }

    .line-row {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 14px;
      transition: opacity 0.3s ease, border-color 0.3s ease, background 0.3s ease;
      z-index: 2;
    }

    .line-content {
      display: flex;
      align-items: baseline;
      gap: 10px;
      font-size: 15px;
      font-weight: 500;
      color: #334155;
    }

    .line-num {
      font-size: 12px;
      font-weight: 700;
      color: #94a3b8;
      width: 14px;
      flex-shrink: 0;
    }

    .rhyme-word {
      font-weight: 700;
      border-radius: 4px;
      padding: 2px 4px;
      transition: background 0.3s ease, color 0.3s ease;
    }

    .rhyme-a .rhyme-word {
      color: #0f766e;
      background: #ccfbf1;
    }

    .rhyme-b .rhyme-word {
      color: #c2410c;
      background: #ffedd5;
    }

    .tag-badge {
      width: 26px;
      height: 26px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 13px;
      flex-shrink: 0;
      transition: transform 0.2s ease, filter 0.2s ease;
    }

    .tag-a {
      background: #0d9488;
      color: #ffffff;
    }

    .tag-b {
      background: #ea580c;
      color: #ffffff;
    }

    /* SVG Layer */
    .arrows-layer {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    .scheme-path {
      fill: none;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-dasharray: 6 5;
      transition: opacity 0.3s ease, stroke-width 0.3s ease;
    }

    .path-a {
      stroke: #0d9488;
    }

    .path-b {
      stroke: #ea580c;
    }

    /* States */
    .poem-box.filter-a .rhyme-b {
      opacity: 0.35;
    }
    .poem-box.filter-a .path-b {
      opacity: 0.1;
    }

    .poem-box.filter-b .rhyme-a {
      opacity: 0.35;
    }
    .poem-box.filter-b .path-a {
      opacity: 0.1;
    }

    @media (max-width: 400px) {
      .line-content {
        font-size: 13.5px;
        gap: 6px;
      }
      .poem-box {
        padding-right: 44px;
        gap: 8px;
      }
      .line-row {
        padding: 8px 10px;
      }
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    <div class="nav-controls">
      <button class="tab-btn active" id="btnAll" onclick="setSchemeMode('all')">ABAB Pattern</button>
      <button class="tab-btn tab-a" id="btnA" onclick="setSchemeMode('a')">A Rhymes (sky / by)</button>
      <button class="tab-btn tab-b" id="btnB" onclick="setSchemeMode('b')">B Rhymes (blow / below)</button>
    </div>

    <div class="poem-box" id="poemBox">
      
      <svg class="arrows-layer" viewBox="0 0 450 200" preserveAspectRatio="none">
        <defs>
          <marker id="arrowA" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
            <path d="M0,0 L6,3 L0,6 Z" fill="#0d9488" />
          </marker>
          <marker id="arrowB" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
            <path d="M0,0 L6,3 L0,6 Z" fill="#ea580c" />
          </marker>
        </defs>
        
        <path class="scheme-path path-a" d="M 405 25 C 445 25, 445 125, 405 125" marker-end="url(#arrowA)"></path>
        
        <path class="scheme-path path-b" d="M 405 75 C 455 75, 455 175, 405 175" marker-end="url(#arrowB)"></path>
      </svg>

      
      <div class="line-row rhyme-a" id="row1">
        <div class="line-content">
          <span class="line-num">1</span>
          <span>The stars are shining in the <span class="rhyme-word">sky</span></span>
        </div>
        <div class="tag-badge tag-a">A</div>
      </div>

      
      <div class="line-row rhyme-b" id="row2">
        <div class="line-content">
          <span class="line-num">2</span>
          <span>The gentle breezes <span class="rhyme-word">blow</span></span>
        </div>
        <div class="tag-badge tag-b">B</div>
      </div>

      
      <div class="line-row rhyme-a" id="row3">
        <div class="line-content">
          <span class="line-num">3</span>
          <span>The silver clouds go floating <span class="rhyme-word">by</span></span>
        </div>
        <div class="tag-badge tag-a">A</div>
      </div>

      
      <div class="line-row rhyme-b" id="row4">
        <div class="line-content">
          <span class="line-num">4</span>
          <span>Above the world <span class="rhyme-word">below</span></span>
        </div>
        <div class="tag-badge tag-b">B</div>
      </div>
    </div>
  </div>

  <script>
    function setSchemeMode(mode) {
      const poemBox = document.getElementById('poemBox');
      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');

      poemBox.classList.remove('filter-a', 'filter-b');

      if (mode === 'a') {
        btnA.classList.add('active');
        poemBox.classList.add('filter-a');
      } else if (mode === 'b') {
        btnB.classList.add('active');
        poemBox.classList.add('filter-b');
      } else {
        btnAll.classList.add('active');
      }
    }
  </script>
</body>
</html>

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

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

    .diagram {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
    }

    .header-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 4px;
    }

    .scheme-title {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .scheme-badge {
      display: inline-flex;
      gap: 3px;
      background: #f1f5f9;
      padding: 3px 6px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1px;
    }

    .scheme-badge .a, .scheme-badge .c { color: #64748b; }
    .scheme-badge .b { color: #7c3aed; }

    .poem-layout {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .line-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      border-radius: 10px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      transition: all 0.25s ease;
      cursor: pointer;
      position: relative;
      z-index: 1;
    }

    .line-row.rhyme-b {
      background: #faf5ff;
      border-color: #ddd6fe;
    }

    .line-row.active-rhyme {
      background: #f3e8ff;
      border-color: #8b5cf6;
      box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
    }

    .line-content {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 500;
      color: #334155;
      flex: 1;
      min-width: 0;
    }

    .line-num {
      font-size: 12px;
      font-weight: 700;
      color: #94a3b8;
      width: 14px;
      flex-shrink: 0;
    }

    .line-text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .rhyme-word {
      font-weight: 700;
      padding: 2px 4px;
      border-radius: 4px;
    }

    .rhyme-word.b-word {
      color: #7c3aed;
      background: rgba(124, 58, 237, 0.1);
    }

    .rhyme-word.gray-word {
      color: #475569;
    }

    .line-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .match-status {
      font-size: 11px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .status-no-match {
      color: #94a3b8;
    }

    .tag-pill {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
    }

    .tag-pill.tag-a, .tag-pill.tag-c {
      background: #cbd5e1;
      color: #334155;
    }

    .tag-pill.tag-b {
      background: #7c3aed;
      color: #ffffff;
    }

    /* Right connector bracket */
    .connector-container {
      position: absolute;
      right: -10px;
      top: 52px;
      bottom: 12px;
      width: 24px;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

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

    .footer-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f5f3ff;
      border: 1px dashed #c4b5fd;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #6b21a8;
    }

    .btn-test {
      background: #7c3aed;
      color: #ffffff;
      border: none;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s;
    }

    .btn-test:active {
      background: #6d28d9;
    }

    @media (max-width: 420px) {
      .line-content {
        font-size: 13px;
        gap: 6px;
      }
      .match-status span {
        display: none;
      }
      .footer-bar {
        font-size: 11px;
      }
    }
  </style>
</head>
<body>

  <div class="diagram">
    <div class="header-bar">
      <div class="scheme-title">Rhyme Scheme</div>
      <div class="scheme-badge">
        <span class="a">A</span>
        <span class="b">B</span>
        <span class="c">C</span>
        <span class="b">B</span>
      </div>
    </div>

    <div class="poem-layout" id="poemLayout">
      
      <div class="line-row" id="line1" onclick="playTone(260); flashLine('line1')">
        <div class="line-content">
          <span class="line-num">1</span>
          <span class="line-text">The sailboat glides upon the <span class="rhyme-word gray-word">sea</span></span>
        </div>
        <div class="line-meta">
          <div class="match-status status-no-match">✕ <span>No match</span></div>
          <div class="tag-pill tag-a">A</div>
        </div>
      </div>

      
      <div class="line-row rhyme-b" id="line2" onclick="testRhymePair()">
        <div class="line-content">
          <span class="line-num">2</span>
          <span class="line-text">Beneath the morning <span class="rhyme-word b-word">sun</span></span>
        </div>
        <div class="line-meta">
          <div class="tag-pill tag-b">B</div>
        </div>
      </div>

      
      <div class="line-row" id="line3" onclick="playTone(330); flashLine('line3')">
        <div class="line-content">
          <span class="line-num">3</span>
          <span class="line-text">We wave goodbye to all our <span class="rhyme-word gray-word">friends</span></span>
        </div>
        <div class="line-meta">
          <div class="match-status status-no-match">✕ <span>No match</span></div>
          <div class="tag-pill tag-c">C</div>
        </div>
      </div>

      
      <div class="line-row rhyme-b" id="line4" onclick="testRhymePair()">
        <div class="line-content">
          <span class="line-num">4</span>
          <span class="line-text">Our journey has <span class="rhyme-word b-word">begun</span></span>
        </div>
        <div class="line-meta">
          <div class="tag-pill tag-b">B</div>
        </div>
      </div>
    </div>

    <div class="footer-bar">
      <span>✦ The Only Rhyme Pair (B–B)</span>
      <button class="btn-test" onclick="testRhymePair()">Hear Rhyme 🔊</button>
    </div>
  </div>

  <script>
    let audioCtx = null;

    function getAudioContext() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }
      return audioCtx;
    }

    function playTone(freq, duration = 0.35, delay = 0) {
      try {
        const ctx = getAudioContext();
        setTimeout(() => {
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          osc.type = 'sine';
          osc.frequency.setValueAtTime(freq, ctx.currentTime);
          gain.gain.setValueAtTime(0.2, ctx.currentTime);
          gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration);
          osc.connect(gain);
          gain.connect(ctx.destination);
          osc.start();
          osc.stop(ctx.currentTime + duration);
        }, delay * 1000);
      } catch(e) {}
    }

    function flashLine(id) {
      const el = document.getElementById(id);
      el.style.borderColor = '#94a3b8';
      setTimeout(() => {
        el.style.borderColor = '#e2e8f0';
      }, 350);
    }

    function testRhymePair() {
      const l2 = document.getElementById('line2');
      const l4 = document.getElementById('line4');

      l2.classList.add('active-rhyme');
      playTone(440, 0.3, 0); // Note 1: "sun"

      setTimeout(() => {
        l4.classList.add('active-rhyme');
        playTone(440, 0.45, 0); // Matching note: "begun"
      }, 300);

      setTimeout(() => {
        l2.classList.remove('active-rhyme');
        l4.classList.remove('active-rhyme');
      }, 1300);
    }
  </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>End Rhyme Diagram</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      width: 100%;
      min-height: 100%;
      background: #f8fafc;
      font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px 12px;
      overflow-x: hidden;
    }

    .canvas {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .poem-layout {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      width: 100%;
    }

    .poem-lines {
      display: flex;
      flex-direction: column;
      gap: 14px;
      flex-shrink: 0;
    }

    .poem-line {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      font-size: 21px;
      font-weight: 600;
      color: #334155;
      line-height: 1.2;
    }

    .text-part {
      letter-spacing: -0.2px;
      white-space: nowrap;
    }

    .rhyme-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: #fef08a;
      border: 2px solid #eab308;
      color: #854d0e;
      padding: 6px 14px;
      border-radius: 9999px;
      font-weight: 800;
      font-size: 21px;
      box-shadow: 0 0 14px rgba(234, 179, 8, 0.4);
      cursor: pointer;
      user-select: none;
      transition: background-color 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
      outline: none;
    }

    .rhyme-badge:hover {
      background: #fef9c3;
      box-shadow: 0 0 20px rgba(234, 179, 8, 0.7);
    }

    .rhyme-badge.active {
      background: #fde047;
      border-color: #ca8a04;
      box-shadow: 0 0 22px rgba(202, 138, 4, 0.8);
    }

    .sound-icon {
      font-size: 15px;
      opacity: 0.85;
      transition: opacity 0.5s ease;
    }

    /* Connector and Rhyme Label */
    .connector-container {
      display: flex;
      align-items: center;
      gap: 6px;
      flex: 1;
      min-width: 150px;
    }

    .bracket-svg {
      width: 24px;
      height: 94px;
      flex-shrink: 0;
      overflow: visible;
    }

    .callout {
      display: flex;
      flex-direction: column;
      background: #eff6ff;
      border: 1.5px solid #93c5fd;
      border-radius: 10px;
      padding: 8px 12px;
      color: #1e40af;
      font-size: 13px;
      line-height: 1.35;
    }

    .callout-title {
      font-weight: 800;
      color: #1d4ed8;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .callout-desc {
      font-weight: 600;
      color: #3b82f6;
    }

    .callout-desc strong {
      color: #1d4ed8;
      background: #dbeafe;
      padding: 1px 5px;
      border-radius: 4px;
    }

    /* Action Controls */
    .controls {
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: center;
    }

    .btn-sound {
      background: #2563eb;
      color: #ffffff;
      border: none;
      border-radius: 9999px;
      padding: 8px 20px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 3px 8px rgba(37, 99, 235, 0.25);
      transition: background-color 0.5s ease, opacity 0.5s ease;
      font-family: inherit;
    }

    .btn-sound:hover {
      background: #1d4ed8;
      opacity: 0.95;
    }

    .btn-sound:active {
      opacity: 0.8;
    }

    /* Small Screen Support */
    @media (max-width: 440px) {
      .poem-layout {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
      }
      .poem-line {
        justify-content: space-between;
        font-size: 18px;
      }
      .rhyme-badge {
        font-size: 18px;
        padding: 5px 12px;
      }
      .connector-container {
        flex-direction: column;
        align-items: flex-end;
        width: 100%;
        gap: 4px;
      }
      .bracket-svg {
        display: none;
      }
      .callout {
        width: 100%;
        text-align: center;
        padding: 8px 10px;
        font-size: 13px;
      }
      .callout-title {
        justify-content: center;
      }
    }
  </style>
</head>
<body>
  <div class="canvas">
    <div class="poem-layout">
      
      <div class="poem-lines">
        <div class="poem-line">
          <span class="text-part">The fluffy</span>
          <button class="rhyme-badge" id="catBadge" onclick="playRhyme(523.25, 'catBadge')" aria-label="Word cat">
            <span>cat</span>
            <span class="sound-icon">🔊</span>
          </button>
        </div>

        <div class="poem-line">
          <span class="text-part">Sat on a</span>
          <button class="rhyme-badge" id="matBadge" onclick="playRhyme(659.25, 'matBadge')" aria-label="Word mat">
            <span>mat</span>
            <span class="sound-icon">🔊</span>
          </button>
        </div>
      </div>

      
      <div class="connector-container">
        <svg class="bracket-svg" viewBox="0 0 24 94" fill="none" aria-hidden="true">
          
          <path d="M 4 16 C 14 16, 14 36, 14 47 C 14 58, 14 78, 4 78" stroke="#3b82f6" stroke-width="2.5" stroke-linecap="round" fill="none"/>
          
          <path d="M 14 47 L 22 47" stroke="#3b82f6" stroke-width="2.5" stroke-linecap="round"/>
          <polygon points="19,43 24,47 19,51" fill="#3b82f6"/>
        </svg>

        <div class="callout">
          <span class="callout-title">↳ End Rhyme</span>
          <span class="callout-desc">Same ending sound (<strong>-at</strong>)</span>
        </div>
      </div>
    </div>

    
    <div class="controls">
      <button class="btn-sound" onclick="playBoth()">
        <span>Play Rhyme</span>
        <span>🎵</span>
      </button>
    </div>
  </div>

  <script>
    function highlightBadge(badgeId, duration = 500) {
      const el = document.getElementById(badgeId);
      if (!el) return;
      el.classList.add('active');
      setTimeout(() => {
        el.classList.remove('active');
      }, duration);
    }

    function playTone(freq, delay = 0, badgeId = null) {
      setTimeout(() => {
        if (badgeId) {
          highlightBadge(badgeId, 500);
        }
        try {
          const AudioContext = window.AudioContext || window.webkitAudioContext;
          if (!AudioContext) return;
          const ctx = new AudioContext();
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          
          osc.type = 'sine';
          osc.frequency.setValueAtTime(freq, ctx.currentTime);
          
          gain.gain.setValueAtTime(0.25, ctx.currentTime);
          gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.45);
          
          osc.connect(gain);
          gain.connect(ctx.destination);
          
          osc.start();
          osc.stop(ctx.currentTime + 0.45);
        } catch (e) {
          // Audio fallback gracefully handled
        }
      }, delay);
    }

    function playRhyme(freq, badgeId) {
      playTone(freq, 0, badgeId);
    }

    function playBoth() {
      playTone(523.25, 0, 'catBadge');
      playTone(659.25, 450, 'matBadge');
    }
  </script>
</body>
</html>

Bilderböcker: Samspel mellan text och bild

Romska sagor och berättelser för barn

Berättelsens röda tråd: Inledning, händelse och avslut

Personer och karaktärsdrag i sagor

Miljö och stämning i berättelser

Berättande texter: Sagor, bilderböcker och struktur

Lyssna på och samtala om bilderböcker

Traditionella romska sagor och fabler för barn

Barnsånger och ramsor på romani chib

Enkla dikter med känslor och färger

Skriva en enkel presentation om mig själv

Skriva enkla beskrivningar av djur och saker

Skriva korta meddelanden och hälsningskort

Kombinera text och egen teckning

Berättelser, sånger och enkla texter

Upptäcka bilderböcker på meänkieli

Folksagor och klassiska berättelser

Karaktärer och miljöbeskrivningar i sagor

Tornedalska barnsagor och myter

Rim och ramsor på meänkieli

Enkla dikter för barn

Traditionella och moderna barnsånger

Sagor, rim och sånger på meänkieli

Sagor och berättelser från Tornedalen

Berättande texters struktur: början, handling och avslut

Personer och miljöer i barn- och ungdomslitteratur

Ungdomstexter om identitet och modersmål

Poetiska texter, rim och ramsor på meänkieli

Sångtexter och visor i tornedalsk tradition

Berättande och poetiska texter på meänkieli

Gestalta en saga med roll-lek och dramatisering

Berättelsens röda tråd och tidsord

Utforska dialog och pratbubblor i serier

Känna igen känslor hos karaktärer

Jämföra sagor från olika kulturer

Berättarstruktur, serier och dramatisering

Enkla dikter, rim och ramsor

Sångtexter och visor som berättar

Traditioner och kulturella uttryck i litterära texter

Människors villkor i berättande texter

Kronologi och tidsord i sammanhängande text

Berättarperspektiv: Jag-form och tredje person

Tema och budskap i berättande texter

Poesi, sång och litterär analys

Feeling the Beat: Meter and Rhythm in Verse

Spotting Alliteration and Consonant Sound Patterns

Recognizing Repeated Refrains and Repetition

Exploring Sensory Details and Vivid Imagery

How Word Choice Creates Mood in Stories and Poems

Rhythm, Rhyme, and Poetic Language

Läsa och följa en enkel instruktion

Enkla recept på meänkieli

Spelregler och lekanvisningar

Pysselinstruktioner steg för steg

Beskriva djur och natur i närmiljön

Beskriva vardagsföremål och kläder

Ord för ordning och läge i beskrivningar

Skriva en enkel kom-ihåg-lista och schema

Känna igen skyltar och enkla anslag

Skriva en enkel instruktion med bilder

Beskriva en plats eller ett rum

Jämföra instruktioner och berättelser

Beskrivande och instruerande texter

Feeling the Beat: Rhythm in Poems and Songs

Same Starting Sounds: Alliteration in Stories and Poems

Words That Sound Alike: Rhymes in Poems and Songs

Lines That Come Back: Repeated Lines in Poems and Stories

How Words Make Rhythm and Meaning

Different Characters See Things Differently

Who Is Telling This Story?

Reading Dialogue in Different Character Voices

Two Characters, Two Points of View

Putting It Together: Rhythm, Rhyme, and Points of View

Language, Rhythm, and Points of View in Stories

Uttrycka känslor, kunskaper och åsikter med varierat ordförråd

Synonymer, antonymer och nyansskillnader mellan ord

Ordens värdeladdning: Positiva och negativa konnotationer

Bildspråk: Metaforer och liknelser i romani chib

Idiomatiska uttryck och ordspråk i romani chib

Digitala lexikon och grammatiska uppslagsverk

Romani chib: Ordkunskap, stilistik och bildspråk

Skriva ett vykort eller ett brev

Skriva digitala meddelanden och enkla mejl

Läsa igenom och kontrollera sin egen text

Ge och ta emot enkel kamratrespons

Skriva en egen liten bok med text och bild

Skriva dikt med rim och upprepningar

Berätta om en upplevd händelse i dagboken

Vardagstexter, textbearbetning och kreativt skrivande

Synonymer och motsatsord (antonymer) på meänkieli

Ord och begrepp för årstider, väder och natur i norr

Kulturspecifika ord för mat, släkt och traditionella sysslor

Ordens värdeladdning och känsloton: positiva och negativa ord

Bildspråk: liknelser och metaforer i meänkieli

Idiomatiska uttryck och fasta talesätt

Ordförråd, nyanser och bildspråk på meänkieli

Använda digitala och tryckta ordböcker på meänkieli

Digitala hjälpmedel för stavningskontroll och översättning

Informationssökning i barnanpassade källor

Källkritik för unga: vem har skrivit och varför

Skapa en egen ordlista eller begreppskarta

Ordförrådets bredd: ordval för olika sammanhang

Språkliga verktyg, informationssökning och källkritik

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

Rhythm and Beat in Poems and Chants

Repeated Sound Patterns in Poetry

Experimenting With Word Patterns in Poems

Making Your Own Rhythmic Chant

Creating a Simple Rhyming Poem

Sound and Rhythmic Patterns in Poetry

Bilderböcker med text och bild i samspel

Dikter och ramsor på meänkieli: rim och rytm

Barnsånger och vaggvisor på meänkieli

Berättelser om djur och natur i norr

Återberätta en saga med början, handling och slut

Enkla kulturberättelser om livet förr och nu

Berättelser, sagor och dikter på meänkieli

Planera en kort presentation med stödord och bilder

Presentera ett favoritföremål eller en leksak

Tala med tydlig röst och lagom tempo

Ha ögonkontakt och vända sig till lyssnarna

Berätta en saga muntligt för andra barn

Presentera ett faktaämne om ett djur

Muntligt berättande och enkla presentationer

Återberätta en kort saga med bildstöd

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

Berätta om en händelse i rätt tidsordning

Presentera ett föremål eller en favoritbok

Tala tydligt: Röststyrka, tempo och ögonkontakt

Muntligt berättande och framförande

Ungdomsböcker och berättelser: Teman och budskap

Sånger och dikter på romani chib

Instruerande texter: Recept, regler och steg-för-steg

Skriva enkla instruktioner och manualer

Beskrivande texter: Sakprosa och faktabaserade beskrivningar

Romska författare och deras författarskap

Katarina Taikon och Katitziserien

Samtida romska författare och nutida skildringar

Romsk litteratur och texttyper

Läsa och lyssna på ungdomsberättelser och sagor

Sånger, ramsor och dikter på meänkieli

Instruerande texter: syfte och stegvisa instruktioner

Beskrivande texter: syfte, innehåll och kännetecken

Språkliga drag i instruktioner och beskrivningar

Texter om människors villkor och livsfrågor

Texter med anknytning till tornedalsk kultur

Lära känna tornedalska författare

Författaren Bengt Pohjanen och hans berättelser

Barn- och ungdomsböcker på meänkieli och deras skapare

Texter, berättelser och författare i meänkieli

OGE.3.RL.4

OGE.3.RL.4

Aligned learning resources

Related diagrams