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

    /* Tabs / Word Switcher */
    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      width: 100%;
      max-width: 440px;
      justify-content: center;
    }
    .tab-btn {
      flex: 1;
      padding: 8px 12px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      font-size: 14px;
      font-weight: 600;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    .tab-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
    }

    /* 2-Column Comparison Layout */
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 520px;
    }

    .column-card {
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      overflow: visible;
    }

    .column-card.long-card {
      border-color: #bae6fd;
      background: #f0f9ff;
    }

    .col-header {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 12px;
      color: #64748b;
    }
    .long-card .col-header {
      color: #0284c7;
    }

    /* Letter Tiles */
    .word-display {
      display: flex;
      gap: 6px;
      margin-bottom: 12px;
      align-items: center;
      justify-content: center;
      height: 52px;
    }

    .tile {
      width: 38px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: 700;
      border-radius: 8px;
      background: #f1f5f9;
      color: #1e2945;
      border: 1px solid #cbd5e1;
      position: relative;
    }

    .tile.vowel-short {
      background: #e2e8f0;
      color: #0f172a;
      border-color: #94a3b8;
    }

    .tile.vowel-long {
      background: #38bdf8;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
    }

    .tile.silent-e {
      background: #fef08a;
      color: #854d0e;
      border-color: #eab308;
      border-style: dashed;
    }

    /* Sound Waves next to Long Vowel */
    .sound-pulse {
      position: absolute;
      top: -6px;
      right: -6px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #0284c7;
      animation: pulse-ring 1.4s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
    }

    @keyframes pulse-ring {
      0% {
        transform: scale(0.6);
        opacity: 0.9;
      }
      100% {
        transform: scale(2.4);
        opacity: 0;
      }
    }

    /* Sound Badges */
    .sound-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 700;
      background: #f1f5f9;
      color: #475569;
      cursor: pointer;
      border: 1px solid #cbd5e1;
      user-select: none;
      transition: background 0.15s ease;
    }
    .sound-badge:active {
      background: #e2e8f0;
    }

    .sound-badge.long {
      background: #0284c7;
      color: #ffffff;
      border-color: #0369a1;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
    }
    .sound-badge.long:active {
      background: #0369a1;
    }

    /* Magic E Jump Path */
    .magic-arrow {
      position: absolute;
      top: -10px;
      left: 36px;
      right: 18px;
      height: 16px;
      pointer-events: none;
    }

    /* Responsive */
    @media (max-width: 380px) {
      .tile {
        width: 32px;
        height: 42px;
        font-size: 20px;
      }
      .col-header {
        font-size: 11px;
      }
      .sound-badge {
        font-size: 12px;
        padding: 5px 8px;
      }
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="tab-btn active" onclick="setPair(0)">cap ➔ cape</button>
    <button class="tab-btn" onclick="setPair(1)">pin ➔ pine</button>
    <button class="tab-btn" onclick="setPair(2)">hat ➔ hate</button>
  </div>

  
  <div class="comparison-grid">
    
    
    <div class="column-card" onclick="playSound(false)">
      <div class="col-header">Short Vowel</div>
      <div class="word-display" id="shortWord">
        
      </div>
      <div class="sound-badge" id="shortBadge">
        <span>🔊</span> <span id="shortSoundText">/ă/ Quick</span>
      </div>
    </div>

    
    <div class="column-card long-card" onclick="playSound(true)">
      <div class="col-header">Long Vowel</div>
      <div class="word-display" id="longWord">
        
      </div>
      <div class="sound-badge long" id="longBadge">
        <span>🔊</span> <span id="longSoundText">Says "A"!</span>
      </div>
    </div>

  </div>

  <script>
    const pairs = [
      {
        short: ['c', 'a', 'p'],
        shortVowelIdx: 1,
        shortPhoneme: '/ă/',
        long: ['c', 'a', 'p', 'e'],
        longVowelIdx: 1,
        longName: 'A',
        shortTone: 280,
        longTones: [440, 554.37] // A major chime
      },
      {
        short: ['p', 'i', 'n'],
        shortVowelIdx: 1,
        shortPhoneme: '/ĭ/',
        long: ['p', 'i', 'n', 'e'],
        longVowelIdx: 1,
        longName: 'I',
        shortTone: 330,
        longTones: [493.88, 659.25] // Bright E/B chord
      },
      {
        short: ['h', 'a', 't'],
        shortVowelIdx: 1,
        shortPhoneme: '/ă/',
        long: ['h', 'a', 't', 'e'],
        longVowelIdx: 1,
        longName: 'A',
        shortTone: 280,
        longTones: [440, 554.37]
      }
    ];

    let currentIdx = 0;
    let audioCtx = null;

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

    function playSound(isLong) {
      initAudio();
      const pair = pairs[currentIdx];
      const now = audioCtx.currentTime;

      if (!isLong) {
        // Quick, staccato woodblock/pop tone
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = 'triangle';
        osc.frequency.setValueAtTime(pair.shortTone, now);
        gain.gain.setValueAtTime(0.2, now);
        gain.gain.exponentialRampToValueAtTime(0.001, now + 0.12);
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        osc.start(now);
        osc.stop(now + 0.12);
      } else {
        // Sustained, singing chime
        pair.longTones.forEach((freq, i) => {
          const osc = audioCtx.createOscillator();
          const gain = audioCtx.createGain();
          osc.type = 'sine';
          osc.frequency.setValueAtTime(freq, now + (i * 0.04));
          gain.gain.setValueAtTime(0, now + (i * 0.04));
          gain.gain.linearRampToValueAtTime(0.2, now + (i * 0.04) + 0.05);
          gain.gain.exponentialRampToValueAtTime(0.001, now + 0.65);
          osc.connect(gain);
          gain.connect(audioCtx.destination);
          osc.start(now + (i * 0.04));
          osc.stop(now + 0.65);
        });
      }
    }

    function render() {
      const data = pairs[currentIdx];
      
      // Render Short Word
      const shortContainer = document.getElementById('shortWord');
      shortContainer.innerHTML = '';
      data.short.forEach((char, idx) => {
        const tile = document.createElement('div');
        tile.className = 'tile' + (idx === data.shortVowelIdx ? ' vowel-short' : '');
        tile.textContent = char;
        shortContainer.appendChild(tile);
      });
      document.getElementById('shortSoundText').textContent = data.shortPhoneme + ' Quick';

      // Render Long Word
      const longContainer = document.getElementById('longWord');
      longContainer.innerHTML = '';
      data.long.forEach((char, idx) => {
        const tile = document.createElement('div');
        const isVowel = (idx === data.longVowelIdx);
        const isE = (idx === data.long.length - 1);
        
        let cls = 'tile';
        if (isVowel) cls += ' vowel-long';
        if (isE) cls += ' silent-e';
        tile.className = cls;
        tile.textContent = char;

        if (isVowel) {
          const pulse = document.createElement('div');
          pulse.className = 'sound-pulse';
          tile.appendChild(pulse);
        }

        longContainer.appendChild(tile);
      });
      document.getElementById('longSoundText').textContent = `Says "${data.longName}"!`;

      // Update Tabs
      const buttons = document.querySelectorAll('.tab-btn');
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === currentIdx);
      });
    }

    function setPair(index) {
      currentIdx = index;
      render();
      playSound(true);
    }

    // Initialize display
    render();
  </script>
</body>
</html>

Hearing the Difference: Long and Short Vowels

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ear Detective</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
    }

    body {
      background: transparent;
      color: #1e2945;
      display: flex;
      justify-content: center;
      padding: 8px;
    }

    #app {
      width: 100%;
      max-width: 350px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Header */
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 2px;
    }

    .title {
      font-size: 16px;
      font-weight: 800;
      color: #0f172a;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .progress-dots {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }

    .dot.active {
      background: #0284c7;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.3);
    }

    .dot.done {
      background: #16a34a;
    }

    /* Tab switcher for 3 challenge pairs */
    .pair-tabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }

    .tab-btn {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 7px 4px;
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      cursor: pointer;
      text-align: center;
      transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }

    .tab-btn.active {
      background: #e0f2fe;
      border-color: #38bdf8;
      color: #0369a1;
    }

    /* Challenge Area (No outer card shell) */
    .challenge-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      width: 100%;
      padding: 4px 0;
      min-height: 230px;
    }

    /* Toggle word inside challenge */
    .word-picker {
      display: flex;
      gap: 12px;
      margin-bottom: 12px;
      width: 100%;
      justify-content: center;
    }

    .word-chip {
      flex: 1;
      max-width: 130px;
      padding: 9px 4px;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      font-size: 19px;
      font-weight: 800;
      background: #f8fafc;
      color: #334155;
      cursor: pointer;
      text-align: center;
      transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    }

    .word-chip.selected {
      border-color: #0284c7;
      background: #f0f9ff;
      color: #0369a1;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.18);
    }

    /* Listen Button */
    .listen-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 7px 16px;
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      margin-bottom: 14px;
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    .listen-btn:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }

    .listen-btn:active {
      background: #e2e8f0;
    }

    /* Detective Action Choice Buttons */
    .choice-group {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
    }

    .choice-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 12px 6px;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      background: #ffffff;
      cursor: pointer;
      text-align: center;
      transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .choice-btn .icon {
      font-size: 22px;
    }

    .choice-btn .btn-title {
      font-size: 13px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.2;
    }

    .choice-btn .btn-sub {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      line-height: 1.1;
    }

    .choice-btn:hover {
      border-color: #94a3b8;
    }

    .choice-btn.correct {
      border-color: #16a34a;
      background: #f0fdf4;
      box-shadow: 0 2px 8px rgba(22, 163, 74, 0.15);
    }

    .choice-btn.incorrect {
      border-color: #ef4444;
      background: #fef2f2;
      box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
    }

    /* Rule Banner / Feedback */
    .feedback-box {
      margin-top: 12px;
      width: 100%;
      border-radius: 8px;
      padding: 10px 12px;
      font-size: 13px;
      font-weight: 700;
      text-align: center;
      display: none;
      align-items: center;
      justify-content: center;
      gap: 6px;
      animation: fadeIn 0.35s ease-out;
    }

    .feedback-box.show {
      display: flex;
    }

    .feedback-box.correct {
      background: #dcfce7;
      color: #15803d;
      border: 1px solid #86efac;
    }

    .feedback-box.try-again {
      background: #fee2e2;
      color: #b91c1c;
      border: 1px solid #fca5a5;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Confetti Stars */
    .star-confetti {
      position: absolute;
      pointer-events: none;
      font-size: 18px;
      animation: popStar 0.8s ease-out forwards;
    }

    @keyframes popStar {
      0% { transform: translate(0, 0) scale(0.3); opacity: 1; }
      100% { transform: translate(var(--tx), var(--ty)) scale(1.2); opacity: 0; }
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="header">
      <div class="title">🕵️ Ear Detective</div>
      <div class="progress-dots">
        <div class="dot active" onclick="selectChallenge(0)" title="Challenge 1"></div>
        <div class="dot" onclick="selectChallenge(1)" title="Challenge 2"></div>
        <div class="dot" onclick="selectChallenge(2)" title="Challenge 3"></div>
      </div>
    </div>

    
    <div class="pair-tabs">
      <button class="tab-btn active" id="tab0" onclick="selectChallenge(0)">hop / hope</button>
      <button class="tab-btn" id="tab1" onclick="selectChallenge(1)">tap / tape</button>
      <button class="tab-btn" id="tab2" onclick="selectChallenge(2)">rob / robe</button>
    </div>

    
    <div class="challenge-area" id="challengeWorkspace">
      
      <div class="word-picker">
        <button class="word-chip selected" id="word0" onclick="selectWord(0)"></button>
        <button class="word-chip" id="word1" onclick="selectWord(1)"></button>
      </div>

      
      <button class="listen-btn" onclick="playCurrentWordAudio()">
        <span>🔊</span>
        <span id="listenLabel">Listen: "hop"</span>
      </button>

      
      <div class="choice-group">
        <button class="choice-btn" id="btnShort" onclick="handleChoice('short')">
          <span class="icon">🐇</span>
          <span class="btn-title">Short Vowel</span>
          <span class="btn-sub">Quick sound</span>
        </button>

        <button class="choice-btn" id="btnLong" onclick="handleChoice('long')">
          <span class="icon">📢</span>
          <span class="btn-title">Long Vowel</span>
          <span class="btn-sub">Says name</span>
        </button>
      </div>

      
      <div class="feedback-box" id="feedbackBox"></div>
    </div>
  </div>

  <script>
    const challenges = [
      {
        pair: ["hop", "hope"],
        types: ["short", "long"],
        vowels: ["short O", "O says its name"],
        phonetics: [
          "<b>hop</b> has a short vowel sound!",
          "<b>hope</b> says O! That is a long vowel!"
        ]
      },
      {
        pair: ["tap", "tape"],
        types: ["short", "long"],
        vowels: ["short A", "A says its name"],
        phonetics: [
          "<b>tap</b> has a short vowel sound!",
          "<b>tape</b> says A! That is a long vowel!"
        ]
      },
      {
        pair: ["rob", "robe"],
        types: ["short", "long"],
        vowels: ["short O", "O says its name"],
        phonetics: [
          "<b>rob</b> has a short vowel sound!",
          "<b>robe</b> says O! That is a long vowel!"
        ]
      }
    ];

    let currentChallengeIndex = 0;
    let currentWordIndex = 0;
    const completedChallenges = [false, false, false];

    function playTone(type) {
      try {
        const AudioContext = window.AudioContext || window.webkitAudioContext;
        if (!AudioContext) return;
        const ctx = new AudioContext();
        if (type === 'correct') {
          const freqs = [523.25, 659.25, 783.99]; // C5, E5, G5
          freqs.forEach((freq, idx) => {
            const osc = ctx.createOscillator();
            const gain = ctx.createGain();
            osc.frequency.value = freq;
            osc.connect(gain);
            gain.connect(ctx.destination);
            const start = ctx.currentTime + (idx * 0.08);
            gain.gain.setValueAtTime(0.12, start);
            gain.gain.exponentialRampToValueAtTime(0.001, start + 0.3);
            osc.start(start);
            osc.stop(start + 0.3);
          });
        } else if (type === 'wrong') {
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          osc.type = 'sawtooth';
          osc.frequency.setValueAtTime(220, ctx.currentTime);
          osc.frequency.exponentialRampToValueAtTime(140, ctx.currentTime + 0.3);
          osc.connect(gain);
          gain.connect(ctx.destination);
          gain.gain.setValueAtTime(0.1, ctx.currentTime);
          gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.3);
          osc.start();
          osc.stop(ctx.currentTime + 0.3);
        }
      } catch (e) {}
    }

    function playCurrentWordAudio() {
      const activeWord = challenges[currentChallengeIndex].pair[currentWordIndex];
      if ('speechSynthesis' in window) {
        window.speechSynthesis.cancel();
        const utter = new SpeechSynthesisUtterance(activeWord);
        utter.rate = 0.85;
        utter.pitch = 1.05;
        utter.lang = 'en-US';
        window.speechSynthesis.speak(utter);
      }
    }

    function renderState() {
      const c = challenges[currentChallengeIndex];

      // Update tabs
      for (let i = 0; i < 3; i++) {
        const tab = document.getElementById(`tab${i}`);
        tab.className = `tab-btn ${i === currentChallengeIndex ? 'active' : ''}`;
        const dot = document.querySelectorAll('.dot')[i];
        dot.className = `dot ${i === currentChallengeIndex ? 'active' : ''} ${completedChallenges[i] ? 'done' : ''}`;
      }

      // Update word chips
      const w0 = document.getElementById('word0');
      const w1 = document.getElementById('word1');
      w0.textContent = c.pair[0];
      w1.textContent = c.pair[1];
      w0.className = `word-chip ${currentWordIndex === 0 ? 'selected' : ''}`;
      w1.className = `word-chip ${currentWordIndex === 1 ? 'selected' : ''}`;

      // Update listen label
      document.getElementById('listenLabel').textContent = `Listen: "${c.pair[currentWordIndex]}"`;

      // Reset choice buttons & feedback
      const bShort = document.getElementById('btnShort');
      const bLong = document.getElementById('btnLong');
      bShort.className = 'choice-btn';
      bLong.className = 'choice-btn';
      const fb = document.getElementById('feedbackBox');
      fb.className = 'feedback-box';
      fb.innerHTML = '';
    }

    function selectChallenge(index) {
      currentChallengeIndex = index;
      currentWordIndex = 0;
      renderState();
    }

    function selectWord(index) {
      currentWordIndex = index;
      renderState();
      playCurrentWordAudio();
    }

    function spawnConfetti() {
      const container = document.getElementById('challengeWorkspace');
      const stars = ['✨', '⭐', '🌟', '🎉'];
      for (let i = 0; i < 6; i++) {
        const el = document.createElement('div');
        el.className = 'star-confetti';
        el.textContent = stars[i % stars.length];
        el.style.left = `${30 + Math.random() * 40}%`;
        el.style.top = `${30 + Math.random() * 30}%`;
        const tx = `${(Math.random() - 0.5) * 120}px`;
        const ty = `${-30 - Math.random() * 60}px`;
        el.style.setProperty('--tx', tx);
        el.style.setProperty('--ty', ty);
        container.appendChild(el);
        setTimeout(() => el.remove(), 800);
      }
    }

    function handleChoice(chosenType) {
      const c = challenges[currentChallengeIndex];
      const correctType = c.types[currentWordIndex];
      const fb = document.getElementById('feedbackBox');
      const bShort = document.getElementById('btnShort');
      const bLong = document.getElementById('btnLong');

      bShort.className = 'choice-btn';
      bLong.className = 'choice-btn';

      if (chosenType === correctType) {
        playTone('correct');
        spawnConfetti();

        const activeBtn = chosenType === 'short' ? bShort : bLong;
        activeBtn.classList.add('correct');

        fb.className = 'feedback-box correct show';
        fb.innerHTML = `<span>✓</span> <span>${c.phonetics[currentWordIndex]}</span>`;

        completedChallenges[currentChallengeIndex] = true;
        const dot = document.querySelectorAll('.dot')[currentChallengeIndex];
        dot.classList.add('done');
      } else {
        playTone('wrong');
        const activeBtn = chosenType === 'short' ? bShort : bLong;
        activeBtn.classList.add('incorrect');

        fb.className = 'feedback-box try-again show';
        fb.innerHTML = `<span>Listen again! Does it say its name?</span>`;
      }
    }

    // Initial render
    renderState();
  </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;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

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

    /* Meter display showing short bounce */
    .meter-container {
      width: 100%;
      max-width: 420px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .meter-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .meter-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #64748b;
    }

    .meter-status {
      font-size: 15px;
      font-weight: 800;
      color: #ea580c;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .wave-display {
      display: flex;
      align-items: center;
      gap: 4px;
      height: 28px;
    }

    .wave-bar {
      width: 5px;
      height: 6px;
      background: #cbd5e1;
      border-radius: 999px;
      transition: height 0.15s ease, background-color 0.15s ease;
    }

    .animating .wave-bar:nth-child(1) { height: 16px; background: #f97316; }
    .animating .wave-bar:nth-child(2) { height: 26px; background: #f97316; }
    .animating .wave-bar:nth-child(3) { height: 22px; background: #f97316; }
    .animating .wave-bar:nth-child(4) { height: 12px; background: #f97316; }

    /* Card Grid */
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 460px;
    }

    .vowel-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 12px 4px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      transition: transform 0.1s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      outline: none;
    }

    .vowel-card:active {
      transform: translateY(2px);
    }

    .vowel-card.active {
      border-color: #f97316;
      box-shadow: 0 4px 14px rgba(249, 115, 22, 0.25);
    }

    .vowel-letter {
      font-size: 26px;
      font-weight: 900;
      line-height: 1;
      border-radius: 50%;
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Bubble Color Accents */
    .card-a .vowel-letter { background: #fee2e2; color: #dc2626; }
    .card-e .vowel-letter { background: #fef3c7; color: #d97706; }
    .card-i .vowel-letter { background: #e0f2fe; color: #0284c7; }
    .card-o .vowel-letter { background: #ffedd5; color: #ea580c; }
    .card-u .vowel-letter { background: #f3e8ff; color: #9333ea; }

    .vowel-card.active .vowel-letter {
      background: #f97316;
      color: #ffffff;
    }

    .vowel-icon {
      font-size: 24px;
      line-height: 1;
    }

    .word-spelling {
      font-size: 15px;
      font-weight: 700;
      color: #475569;
      letter-spacing: 1px;
      margin-top: 2px;
    }

    .vowel-card.active .word-vowel {
      color: #f97316;
      font-weight: 900;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .hint-text {
      font-size: 12px;
      font-weight: 600;
      color: #94a3b8;
      margin-top: 10px;
    }

    @media (max-width: 380px) {
      .vowel-letter {
        font-size: 22px;
        width: 36px;
        height: 36px;
      }
      .vowel-icon {
        font-size: 20px;
      }
      .word-spelling {
        font-size: 13px;
      }
      .cards-grid {
        gap: 6px;
      }
    }
  </style>
</head>
<body>

  
  <div class="meter-container">
    <div class="meter-info">
      <span class="meter-label">Sound Length</span>
      <span class="meter-status" id="statusText">⚡ Quick & Short!</span>
    </div>
    <div class="wave-display" id="waveDisplay">
      <div class="wave-bar"></div>
      <div class="wave-bar"></div>
      <div class="wave-bar"></div>
      <div class="wave-bar"></div>
    </div>
  </div>

  
  <div class="cards-grid">
    
    <button class="vowel-card card-a active" data-freq="340" aria-label="Short A sound">
      <div class="vowel-letter">A</div>
      <div class="vowel-icon">🍎</div>
      <div class="word-spelling">b<span class="word-vowel">a</span>t</div>
    </button>

    
    <button class="vowel-card card-e" data-freq="420" aria-label="Short E sound">
      <div class="vowel-letter">E</div>
      <div class="vowel-icon">🥚</div>
      <div class="word-spelling">b<span class="word-vowel">e</span>d</div>
    </button>

    
    <button class="vowel-card card-i" data-freq="500" aria-label="Short I sound">
      <div class="vowel-letter">I</div>
      <div class="vowel-icon">🧊</div>
      <div class="word-spelling">p<span class="word-vowel">i</span>g</div>
    </button>

    
    <button class="vowel-card card-o" data-freq="380" aria-label="Short O sound">
      <div class="vowel-letter">O</div>
      <div class="vowel-icon">🐙</div>
      <div class="word-spelling">h<span class="word-vowel">o</span>p</div>
    </button>

    
    <button class="vowel-card card-u" data-freq="300" aria-label="Short U sound">
      <div class="vowel-letter">U</div>
      <div class="vowel-icon">☂️</div>
      <div class="word-spelling">s<span class="word-vowel">u</span>n</div>
    </button>
  </div>

  <div class="hint-text">Tap a vowel to hear the quick sound</div>

  <script>
    let audioCtx = null;

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

        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();

        // Quick bouncy staccato pop
        osc.type = 'triangle';
        osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
        osc.frequency.exponentialRampToValueAtTime(freq * 1.3, audioCtx.currentTime + 0.08);

        gain.gain.setValueAtTime(0.3, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.18);

        osc.connect(gain);
        gain.connect(audioCtx.destination);

        osc.start();
        osc.stop(audioCtx.currentTime + 0.18);
      } catch (e) {
        // Fallback for non-audio environments
      }
    }

    const cards = document.querySelectorAll('.vowel-card');
    const waveDisplay = document.getElementById('waveDisplay');
    let animTimeout;

    cards.forEach(card => {
      card.addEventListener('click', () => {
        cards.forEach(c => c.classList.remove('active'));
        card.classList.add('active');

        const freq = parseFloat(card.getAttribute('data-freq'));
        playShortSound(freq);

        // Animate wave meter
        waveDisplay.classList.remove('animating');
        void waveDisplay.offsetWidth; // Trigger reflow
        waveDisplay.classList.add('animating');

        clearTimeout(animTimeout);
        animTimeout = setTimeout(() => {
          waveDisplay.classList.remove('animating');
        }, 320);
      });
    });
  </script>
</body>
</html>

OGE.2.RF.2

Aligned learning resources

Related diagrams