<!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">
  <title>VCCV Syllable Division</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

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

    .main-wrap {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    /* Word selector tabs */
    .word-toggle {
      display: flex;
      background: #f1f5f9;
      padding: 3px;
      border-radius: 24px;
      gap: 4px;
    }

    .word-btn {
      border: none;
      background: transparent;
      color: #64748b;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.5px;
      padding: 6px 18px;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .word-btn.active {
      background: #ffffff;
      color: #1e2945;
      box-shadow: 0 2px 6px rgba(30, 41, 69, 0.08);
    }

    /* Word Stage Box */
    .stage-container {
      width: 100%;
      height: 230px;
      background: #f8fafc;
      border-radius: 16px;
      border: 1px solid #e2e8f0;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .rule-badge {
      position: absolute;
      top: 10px;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1d4ed8;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 12px;
      letter-spacing: 0.5px;
    }

    /* Word Letter Tiles */
    .word-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      position: relative;
      margin-top: 4px;
    }

    .syllable-group {
      display: flex;
      gap: 6px;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .split-active .syllable-group.left {
      transform: translateX(-8px);
    }

    .split-active .syllable-group.right {
      transform: translateX(8px);
    }

    .letter-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 44px;
      position: relative;
    }

    .letter-card {
      width: 44px;
      height: 52px;
      background: #ffffff;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      font-weight: 800;
      color: #1e2945;
      box-shadow: 0 3px 8px rgba(30, 41, 69, 0.06);
      border: 1px solid #e2e8f0;
      transition: all 0.3s ease;
    }

    /* Phonics pattern indicators underneath letters */
    .tag-container {
      height: 28px;
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .v-dot {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #fee2e2;
      border: 2px solid #ef4444;
      color: #b91c1c;
      font-size: 13px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: translateY(6px) scale(0.7);
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .c-sq {
      width: 26px;
      height: 26px;
      border-radius: 6px;
      background: #dbeafe;
      border: 2px solid #3b82f6;
      color: #1d4ed8;
      font-size: 13px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: translateY(6px) scale(0.7);
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .tag-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* Scissor Cut Line */
    .cut-divider {
      position: absolute;
      top: -10px;
      bottom: 24px;
      left: 50%;
      width: 2px;
      transform: translateX(-50%);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }

    .cut-divider.show {
      opacity: 1;
    }

    .scissors-icon {
      font-size: 18px;
      transform: rotate(90deg);
      line-height: 1;
    }

    .cut-line {
      width: 2px;
      height: 100%;
      border-left: 2px dashed #f59e0b;
    }

    /* Decoded Chunks Display (Step 4) */
    .decoded-row {
      position: absolute;
      bottom: 12px;
      display: flex;
      align-items: center;
      gap: 6px;
      opacity: 0;
      transform: translateY(8px);
      transition: all 0.3s ease;
    }

    .decoded-row.show {
      opacity: 1;
      transform: translateY(0);
    }

    .chunk-pill {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      padding: 4px 10px;
      border-radius: 8px;
      font-weight: 700;
      font-size: 13px;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 4px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    }

    .chunk-sound {
      font-size: 11px;
      color: #64748b;
      font-weight: 500;
    }

    .math-sym {
      font-weight: 800;
      color: #94a3b8;
      font-size: 14px;
    }

    .result-pill {
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      color: #047857;
      padding: 4px 12px;
      border-radius: 8px;
      font-weight: 800;
      font-size: 13px;
    }

    /* Stepper Controls */
    .controls {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .step-tabs {
      display: flex;
      gap: 6px;
      flex: 1;
    }

    .step-btn {
      flex: 1;
      padding: 8px 4px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
      white-space: nowrap;
    }

    .step-btn.active {
      background: #1e2945;
      border-color: #1e2945;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(30, 41, 69, 0.15);
    }

    .play-btn {
      width: 36px;
      height: 34px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #1e2945;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }

    .play-btn:active {
      background: #f1f5f9;
    }

    /* Step Prompt Text */
    .step-desc {
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      text-align: center;
      height: 20px;
    }
  </style>
</head>
<body>
  <div class="main-wrap">
    
    <div class="word-toggle">
      <button class="word-btn active" data-word="NAPKIN">NAPKIN</button>
      <button class="word-btn" data-word="RABBIT">RABBIT</button>
    </div>

    
    <div class="stage-container" id="stage">
      <div class="rule-badge" id="ruleBadge">VCCV PATTERN</div>

      <div class="word-row" id="wordRow">
        
        <div class="syllable-group left" id="leftGroup"></div>

        
        <div class="cut-divider" id="cutDivider">
          <div class="scissors-icon">✂</div>
          <div class="cut-line"></div>
        </div>

        
        <div class="syllable-group right" id="rightGroup"></div>
      </div>

      
      <div class="decoded-row" id="decodedRow"></div>
    </div>

    
    <div class="step-desc" id="stepDesc">1. Find vowels (V)</div>

    
    <div class="controls">
      <button class="play-btn" id="playToggle" title="Auto play / pause">⏸</button>
      <div class="step-tabs">
        <button class="step-btn active" data-step="0">1. Vowels</button>
        <button class="step-btn" data-step="1">2. Consonants</button>
        <button class="step-btn" data-step="2">3. Split</button>
        <button class="step-btn" data-step="3">4. Blend</button>
      </div>
    </div>
  </div>

  <script>
    const WORDS = {
      NAPKIN: {
        left: ['N', 'A', 'P'],
        right: ['K', 'I', 'N'],
        leftTags: ['', 'V', 'C'],
        rightTags: ['C', 'V', ''],
        chunk1: 'NAP',
        sound1: 'short ă',
        chunk2: 'KIN',
        sound2: 'short ĭ',
        result: 'NAPKIN'
      },
      RABBIT: {
        left: ['R', 'A', 'B'],
        right: ['B', 'I', 'T'],
        leftTags: ['', 'V', 'C'],
        rightTags: ['C', 'V', ''],
        chunk1: 'RAB',
        sound1: 'short ă',
        chunk2: 'BIT',
        sound2: 'short ĭ',
        result: 'RABBIT'
      }
    };

    const STEP_DESCS = [
      "1. Spot the vowels (V)",
      "2. Spot consonants between (C C)",
      "3. Divide between consonants (VC | CV)",
      "4. Read both closed syllables!"
    ];

    let currentWordKey = 'NAPKIN';
    let currentStep = 0;
    let autoPlayTimer = null;
    let isPlaying = true;

    const leftGroup = document.getElementById('leftGroup');
    const rightGroup = document.getElementById('rightGroup');
    const cutDivider = document.getElementById('cutDivider');
    const decodedRow = document.getElementById('decodedRow');
    const stepDesc = document.getElementById('stepDesc');
    const playToggle = document.getElementById('playToggle');
    const wordBtns = document.querySelectorAll('.word-btn');
    const stepBtns = document.querySelectorAll('.step-btn');
    const wordRow = document.getElementById('wordRow');

    function createLetterCol(letter, tagType) {
      const col = document.createElement('div');
      col.className = 'letter-col';

      const card = document.createElement('div');
      card.className = 'letter-card';
      card.textContent = letter;

      const tagBox = document.createElement('div');
      tagBox.className = 'tag-container';

      if (tagType === 'V') {
        const tag = document.createElement('div');
        tag.className = 'v-dot';
        tag.textContent = 'V';
        tagBox.appendChild(tag);
      } else if (tagType === 'C') {
        const tag = document.createElement('div');
        tag.className = 'c-sq';
        tag.textContent = 'C';
        tagBox.appendChild(tag);
      }

      col.appendChild(card);
      col.appendChild(tagBox);
      return col;
    }

    function renderWord() {
      const data = WORDS[currentWordKey];
      leftGroup.innerHTML = '';
      rightGroup.innerHTML = '';

      data.left.forEach((char, i) => {
        leftGroup.appendChild(createLetterCol(char, data.leftTags[i]));
      });

      data.right.forEach((char, i) => {
        rightGroup.appendChild(createLetterCol(char, data.rightTags[i]));
      });

      decodedRow.innerHTML = `
        <div class="chunk-pill">${data.chunk1} <span class="chunk-sound">(${data.sound1})</span></div>
        <span class="math-sym">+</span>
        <div class="chunk-pill">${data.chunk2} <span class="chunk-sound">(${data.sound2})</span></div>
        <span class="math-sym">=</span>
        <div class="result-pill">${data.result}</div>
      `;

      updateStepView();
    }

    function updateStepView() {
      stepBtns.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === currentStep);
      });

      stepDesc.textContent = STEP_DESCS[currentStep];

      const vDots = document.querySelectorAll('.v-dot');
      const cSquares = document.querySelectorAll('.c-sq');

      // Step 1: Vowels
      vDots.forEach(dot => {
        dot.classList.toggle('tag-visible', currentStep >= 0);
      });

      // Step 2: Consonants
      cSquares.forEach(sq => {
        sq.classList.toggle('tag-visible', currentStep >= 1);
      });

      // Step 3: Split
      const isSplit = currentStep >= 2;
      cutDivider.classList.toggle('show', isSplit);
      wordRow.classList.toggle('split-active', isSplit);

      // Step 4: Blend equation
      decodedRow.classList.toggle('show', currentStep === 3);
    }

    function goToStep(step) {
      currentStep = step;
      updateStepView();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % 4;
      updateStepView();
    }

    function startAutoPlay() {
      stopAutoPlay();
      isPlaying = true;
      playToggle.textContent = '⏸';
      autoPlayTimer = setInterval(nextStep, 3200);
    }

    function stopAutoPlay() {
      isPlaying = false;
      playToggle.textContent = '▶';
      if (autoPlayTimer) {
        clearInterval(autoPlayTimer);
        autoPlayTimer = null;
      }
    }

    playToggle.addEventListener('click', () => {
      if (isPlaying) {
        stopAutoPlay();
      } else {
        nextStep();
        startAutoPlay();
      }
    });

    stepBtns.forEach((btn) => {
      btn.addEventListener('click', () => {
        stopAutoPlay();
        goToStep(parseInt(btn.getAttribute('data-step'), 10));
      });
    });

    wordBtns.forEach((btn) => {
      btn.addEventListener('click', () => {
        wordBtns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        currentWordKey = btn.getAttribute('data-word');
        renderWord();
      });
    });

    // Initialize
    renderWord();
    startAutoPlay();
  </script>
</body>
</html>

Decoding Multisyllabic Words with Closed Syllables

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Syllable Decoding: FANTASTIC</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: #0f172a;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 12px 8px;
      gap: 12px;
      user-select: none;
      -webkit-user-select: none;
      max-width: 520px;
      margin: 0 auto;
    }

    /* Stepper Navigation */
    .nav-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      width: 100%;
    }
    .step-btn {
      flex: 1;
      padding: 7px 4px;
      font-size: 12px;
      font-weight: 700;
      border: 1.5px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    .step-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #1d4ed8;
      box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
    }

    /* Stage Area */
    .stage {
      position: relative;
      width: 100%;
      min-height: 180px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      padding: 16px 8px 12px;
    }

    /* Linear Word Layout (Steps 1-3) */
    .linear-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      gap: 12px;
    }

    .word-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      padding-bottom: 22px;
    }

    .letter-cell {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 33px;
      height: 48px;
      border-radius: 6px;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      font-size: 22px;
      font-weight: 800;
      color: #1e293b;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    @media (min-width: 420px) {
      .letter-cell {
        width: 38px;
        height: 52px;
        font-size: 25px;
        gap: 3px;
      }
    }

    /* Phonics Role Label */
    .phonics-tag {
      position: absolute;
      bottom: -20px;
      font-size: 11px;
      font-weight: 800;
      color: #94a3b8;
      transition: color 0.2s ease;
    }

    /* Vowel Highlighting */
    .letter-cell.vowel {
      background: #fef08a;
      border-color: #b45309;
      color: #78350f;
    }
    .letter-cell.vowel .phonics-tag {
      color: #9a3412;
      font-weight: 900;
    }

    /* Consonant Highlighting */
    .letter-cell.cons-mid {
      background: #e0e7ff;
      border-color: #4338ca;
      color: #312e81;
    }
    .letter-cell.cons-mid .phonics-tag {
      color: #4338ca;
      font-weight: 900;
    }

    /* Cut Divider (Syllable Break) */
    .divider {
      width: 0;
      margin: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #dc2626;
      transition: width 0.2s ease, margin 0.2s ease, opacity 0.2s ease;
      opacity: 0;
    }
    .divider.active {
      width: 18px;
      margin: 0 2px;
      opacity: 1;
    }
    .divider-icon {
      font-size: 13px;
      line-height: 1;
      margin-bottom: 2px;
    }
    .divider-line {
      width: 2px;
      height: 38px;
      background: repeating-linear-gradient(to bottom, #dc2626, #dc2626 4px, transparent 4px, transparent 8px);
    }

    /* Instruction / Pattern Hint */
    .pattern-hint {
      font-size: 12.5px;
      font-weight: 600;
      color: #334155;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
      text-align: center;
      min-height: 24px;
    }
    .pattern-badge {
      padding: 2px 7px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.5px;
    }
    .v-tag { background: #fef08a; color: #78350f; border: 1px solid #d97706; }
    .c-tag { background: #e0e7ff; color: #312e81; border: 1px solid #6366f1; }

    /* Step 4 Syllable Cards */
    .chunks-container {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: center;
      width: 100%;
    }
    .chunk-card {
      flex: 1;
      max-width: 130px;
      border-radius: 10px;
      border: 2px solid;
      padding: 8px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.04);
    }
    .chunk-1 { border-color: #0284c7; background: #f0f9ff; }
    .chunk-2 { border-color: #7c3aed; background: #f5f3ff; }
    .chunk-3 { border-color: #059669; background: #ecfdf5; }

    .chunk-type {
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: #64748b;
    }
    .chunk-letters {
      font-size: 22px;
      font-weight: 900;
      letter-spacing: 1px;
    }
    .chunk-1 .chunk-letters { color: #0369a1; }
    .chunk-2 .chunk-letters { color: #6d28d9; }
    .chunk-3 .chunk-letters { color: #047857; }

    .sound-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 11.5px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 16px;
      background: #ffffff;
      color: #1e293b;
      cursor: pointer;
      border: 1px solid rgba(0,0,0,0.12);
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: background-color 0.15s ease;
    }
    .sound-badge:hover {
      background: #f1f5f9;
    }

    /* Bottom Action Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      justify-content: center;
    }
    .action-btn {
      flex: 1;
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 700;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: #f8fafc;
      color: #334155;
      transition: background-color 0.15s ease;
    }
    .action-btn:hover { background: #e2e8f0; }
    .action-btn.primary {
      flex: 1.5;
      background: #2563eb;
      color: #ffffff;
      border-color: #1d4ed8;
    }
    .action-btn.primary:hover { background: #1d4ed8; }
    .action-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      background: #f1f5f9;
    }
  </style>
</head>
<body>

  
  <div class="nav-bar">
    <button class="step-btn active" id="tab1" onclick="setStep(1)">1. Vowels</button>
    <button class="step-btn" id="tab2" onclick="setStep(2)">2. Cut 1</button>
    <button class="step-btn" id="tab3" onclick="setStep(3)">3. Cut 2</button>
    <button class="step-btn" id="tab4" onclick="setStep(4)">4. Read</button>
  </div>

  
  <div class="stage">
    
    <div class="linear-container" id="linearWord">
      <div class="word-row" id="wordRow">
        <div class="letter-cell" id="c0">F<span class="phonics-tag">c</span></div>
        <div class="letter-cell" id="c1">A<span class="phonics-tag">v</span></div>
        <div class="letter-cell" id="c2">N<span class="phonics-tag">c</span></div>
        
        <div class="divider" id="cut1">
          <span class="divider-icon">✂</span>
          <div class="divider-line"></div>
        </div>
        
        <div class="letter-cell" id="c3">T<span class="phonics-tag">c</span></div>
        <div class="letter-cell" id="c4">A<span class="phonics-tag">v</span></div>
        <div class="letter-cell" id="c5">S<span class="phonics-tag">c</span></div>
        
        <div class="divider" id="cut2">
          <span class="divider-icon">✂</span>
          <div class="divider-line"></div>
        </div>
        
        <div class="letter-cell" id="c6">T<span class="phonics-tag">c</span></div>
        <div class="letter-cell" id="c7">I<span class="phonics-tag">v</span></div>
        <div class="letter-cell" id="c8">C<span class="phonics-tag">c</span></div>
      </div>

      
      <div class="pattern-hint" id="patternHint">
        <span>Identify 3 Vowels:</span>
        <span class="pattern-badge v-tag">A</span>
        <span class="pattern-badge v-tag">A</span>
        <span class="pattern-badge v-tag">I</span>
      </div>
    </div>

    
    <div id="chunksView" class="chunks-container" style="display:none;">
      
      <div class="chunk-card chunk-1">
        <div class="chunk-type">Closed</div>
        <div class="chunk-letters">FAN</div>
        <button class="sound-badge" onclick="saySyllable('fan', 260)">🔊 /făn/</button>
      </div>

      
      <div class="chunk-card chunk-2">
        <div class="chunk-type">Closed</div>
        <div class="chunk-letters">TAS</div>
        <button class="sound-badge" onclick="saySyllable('tas', 280)">🔊 /tăs/</button>
      </div>

      
      <div class="chunk-card chunk-3">
        <div class="chunk-type">Closed</div>
        <div class="chunk-letters">TIC</div>
        <button class="sound-badge" onclick="saySyllable('tik', 320)">🔊 /tĭk/</button>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="action-btn" id="prevBtn" onclick="prevStep()">← Back</button>
    <button class="action-btn primary" id="nextBtn" onclick="nextStep()">Next Step →</button>
  </div>

  <script>
    let currentStep = 1;

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

    function saySyllable(text, toneFreq) {
      playTone(toneFreq, 0.25);
      if ('speechSynthesis' in window) {
        window.speechSynthesis.cancel();
        const u = new SpeechSynthesisUtterance(text);
        u.rate = 0.85;
        window.speechSynthesis.speak(u);
      }
    }

    function setStep(step) {
      currentStep = step;
      document.querySelectorAll('.step-btn').forEach((btn, idx) => {
        btn.classList.toggle('active', idx + 1 === step);
      });

      const linearWord = document.getElementById('linearWord');
      const chunksView = document.getElementById('chunksView');
      const cut1 = document.getElementById('cut1');
      const cut2 = document.getElementById('cut2');
      const patternHint = document.getElementById('patternHint');
      const prevBtn = document.getElementById('prevBtn');
      const nextBtn = document.getElementById('nextBtn');

      prevBtn.disabled = (step === 1);

      // Reset letters
      for (let i = 0; i <= 8; i++) {
        const c = document.getElementById('c' + i);
        c.className = 'letter-cell';
      }

      if (step === 1) {
        linearWord.style.display = 'flex';
        chunksView.style.display = 'none';
        document.getElementById('c1').classList.add('vowel');
        document.getElementById('c4').classList.add('vowel');
        document.getElementById('c7').classList.add('vowel');
        cut1.classList.remove('active');
        cut2.classList.remove('active');
        patternHint.innerHTML = '<span>Spot 3 Vowels:</span> <span class="pattern-badge v-tag">A</span> <span class="pattern-badge v-tag">A</span> <span class="pattern-badge v-tag">I</span>';
        nextBtn.textContent = 'Next: Cut 1 →';
      } else if (step === 2) {
        linearWord.style.display = 'flex';
        chunksView.style.display = 'none';
        document.getElementById('c1').classList.add('vowel');
        document.getElementById('c2').classList.add('cons-mid');
        document.getElementById('c3').classList.add('cons-mid');
        document.getElementById('c4').classList.add('vowel');
        document.getElementById('c7').classList.add('vowel');
        cut1.classList.add('active');
        cut2.classList.remove('active');
        patternHint.innerHTML = '<span>Split consonants 1 & 2:</span> <span class="pattern-badge v-tag">V</span><span class="pattern-badge c-tag">C</span> | <span class="pattern-badge c-tag">C</span><span class="pattern-badge v-tag">V</span>';
        nextBtn.textContent = 'Next: Cut 2 →';
      } else if (step === 3) {
        linearWord.style.display = 'flex';
        chunksView.style.display = 'none';
        document.getElementById('c1').classList.add('vowel');
        document.getElementById('c4').classList.add('vowel');
        document.getElementById('c5').classList.add('cons-mid');
        document.getElementById('c6').classList.add('cons-mid');
        document.getElementById('c7').classList.add('vowel');
        cut1.classList.add('active');
        cut2.classList.add('active');
        patternHint.innerHTML = '<span>Split consonants 2 & 3:</span> <span class="pattern-badge v-tag">V</span><span class="pattern-badge c-tag">C</span> | <span class="pattern-badge c-tag">C</span><span class="pattern-badge v-tag">V</span>';
        nextBtn.textContent = 'See Syllable Blocks →';
      } else if (step === 4) {
        linearWord.style.display = 'none';
        chunksView.style.display = 'flex';
        nextBtn.textContent = '🔊 Read Full Word';
      }
    }

    function nextStep() {
      if (currentStep === 4) {
        saySyllable('fantastic', 300);
      } else {
        setStep(currentStep + 1);
      }
    }

    function prevStep() {
      if (currentStep > 1) {
        setStep(currentStep - 1);
      }
    }

    // Initialize
    setStep(1);
  </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>Digraph Syllable Rule</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      background-color: #f8f9fa;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
    }

    .title-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #e0f2fe;
      color: #0369a1;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 999px;
      margin-bottom: 14px;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

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

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

    .word-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 14px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .word-header {
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.06em;
      color: #64748b;
    }

    .syllable-row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      border-radius: 10px;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: 0.04em;
    }

    .row-bad {
      background: #fef2f2;
      border: 1.5px dashed #f87171;
      color: #991b1b;
    }

    .row-good {
      background: #f0fdf4;
      border: 1.5px solid #86efac;
      color: #166534;
    }

    .syllables {
      display: flex;
      align-items: center;
      gap: 4px;
      font-family: inherit;
    }

    .cut-line {
      display: inline-block;
      width: 2px;
      height: 18px;
      margin: 0 4px;
      border-radius: 1px;
    }

    .cut-bad {
      background: #ef4444;
    }

    .cut-good {
      background: #22c55e;
    }

    .digraph-locked {
      background: #dcfce7;
      color: #15803d;
      padding: 2px 5px;
      border-radius: 6px;
      border: 1.5px solid #86efac;
    }

    .digraph-split {
      text-decoration: underline wavy #ef4444;
      font-weight: 900;
    }

    .status-icon {
      font-size: 18px;
      font-weight: 800;
      line-height: 1;
    }

    .tag-note {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 6px;
      display: inline-block;
      text-align: center;
    }

    .tag-bad {
      background: #fee2e2;
      color: #b91c1c;
    }

    .tag-good {
      background: #dcfce7;
      color: #166534;
    }
  </style>
</head>
<body>

  <div class="title-pill">🔒 Keep Digraph Teams Together</div>

  <div class="grid">
    
    <div class="word-card">
      <div class="word-header">ROCKET</div>

      
      <div class="syllable-row row-bad">
        <div class="syllables">
          ROC <span class="cut-line cut-bad"></span> KET
        </div>
        <span class="status-icon">✕</span>
      </div>

      
      <div class="syllable-row row-good">
        <div class="syllables">
          <span class="digraph-locked">ROCK</span> <span class="cut-line cut-good"></span> ET
        </div>
        <span class="status-icon">✓</span>
      </div>
    </div>

    
    <div class="word-card">
      <div class="word-header">FISHNET</div>

      
      <div class="syllable-row row-bad">
        <div class="syllables">
          FIS <span class="cut-line cut-bad"></span> HNET
        </div>
        <span class="status-icon">✕</span>
      </div>

      
      <div class="syllable-row row-good">
        <div class="syllables">
          <span class="digraph-locked">FISH</span> <span class="cut-line cut-good"></span> NET
        </div>
        <span class="status-icon">✓</span>
      </div>
    </div>
  </div>

</body>
</html>

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

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

    /* Top Syllable Box Area */
    .stage {
      width: 100%;
      max-width: 420px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .room-container {
      position: relative;
      width: 100%;
      height: 120px;
      background: #f8fafc;
      border: 2px solid #cbd5e1;
      border-radius: 14px;
      display: flex;
      align-items: center;
      overflow: hidden;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
    }

    .vowel-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      padding-left: 20px;
      position: relative;
    }

    .vowel-letter {
      font-size: 52px;
      font-weight: 800;
      color: #3b82f6;
      line-height: 1;
      transition: color 0.3s ease;
    }

    /* Sliding Door */
    .door-track {
      width: 110px;
      height: 100%;
      position: relative;
      border-left: 2px dashed #cbd5e1;
      background: #f1f5f9;
    }

    .door-slab {
      position: absolute;
      top: 4px;
      bottom: 4px;
      width: 86px;
      background: #1e2945;
      border-radius: 8px;
      color: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 38px;
      font-weight: 800;
      transition: transform 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
      box-shadow: 0 4px 10px rgba(30, 41, 69, 0.25);
    }

    .door-slab .tag {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      opacity: 0.75;
      margin-top: -2px;
    }

    /* Door States */
    .state-closed .door-slab {
      transform: translateX(12px);
    }

    .state-open .door-slab {
      transform: translateX(95px);
    }

    /* Sound Badge */
    .badge-wrap {
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .sound-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 700;
      transition: all 0.3s ease;
      white-space: nowrap;
    }

    .state-closed .sound-badge {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1d4ed8;
    }

    .state-open .sound-badge {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      color: #15803d;
    }

    /* Controls */
    .toggle-bar {
      display: inline-flex;
      background: #e2e8f0;
      padding: 3px;
      border-radius: 24px;
      gap: 2px;
    }

    .toggle-btn {
      border: none;
      background: transparent;
      padding: 6px 16px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .toggle-btn.active {
      background: #ffffff;
      color: #1e2945;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    /* Side-by-side comparison cards */
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
      max-width: 420px;
    }

    .mini-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 4px;
    }

    .mini-card.active-card {
      border-color: #3b82f6;
      background: #f8faff;
    }

    .card-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }

    .card-word {
      font-size: 26px;
      font-weight: 800;
      color: #1e2945;
      line-height: 1.1;
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .door-char {
      color: #3b82f6;
      background: #eff6ff;
      border-radius: 4px;
      padding: 0 4px;
    }

    .card-sound {
      font-size: 13px;
      font-weight: 700;
      color: #334155;
    }

    .card-meta {
      font-size: 11px;
      color: #64748b;
    }
  </style>
</head>
<body>

  
  <div id="syllableStage" class="stage state-closed">
    <div class="toggle-bar">
      <button class="toggle-btn active" id="btnClosed">🔒 Closed Syllable</button>
      <button class="toggle-btn" id="btnOpen">🚪 Open Syllable</button>
    </div>

    <div class="room-container">
      <div class="vowel-area">
        <div class="vowel-letter" id="vowelLetter">A</div>
      </div>
      <div class="door-track">
        <div class="door-slab">
          <span>T</span>
          <span class="tag">Door</span>
        </div>
      </div>
    </div>

    <div class="badge-wrap">
      <div class="sound-badge" id="badge">
        <span id="badgeIcon">🔒</span>
        <span id="badgeText">Short Vowel Sound: /ă/ (cat)</span>
      </div>
    </div>
  </div>

  
  <div class="comparison-grid">
    <div class="mini-card" id="cardOpen">
      <span class="card-title">Open Syllable</span>
      <div class="card-word">NO</div>
      <div class="card-sound">Long /ō/</div>
      <div class="card-meta">Door Open</div>
    </div>

    <div class="mini-card active-card" id="cardClosed">
      <span class="card-title">Closed Syllable</span>
      <div class="card-word">NO<span class="door-char">T</span></div>
      <div class="card-sound">Short /ŏ/</div>
      <div class="card-meta">T Closes Door</div>
    </div>
  </div>

  <script>
    const stage = document.getElementById('syllableStage');
    const btnClosed = document.getElementById('btnClosed');
    const btnOpen = document.getElementById('btnOpen');
    const badgeText = document.getElementById('badgeText');
    const badgeIcon = document.getElementById('badgeIcon');
    const cardOpen = document.getElementById('cardOpen');
    const cardClosed = document.getElementById('cardClosed');

    function setClosed() {
      stage.className = 'stage state-closed';
      btnClosed.classList.add('active');
      btnOpen.classList.remove('active');
      badgeIcon.textContent = '🔒';
      badgeText.textContent = 'Short Vowel Sound: /ă/ (cat)';
      cardClosed.classList.add('active-card');
      cardOpen.classList.remove('active-card');
    }

    function setOpen() {
      stage.className = 'stage state-open';
      btnOpen.classList.add('active');
      btnClosed.classList.remove('active');
      badgeIcon.textContent = '🚪';
      badgeText.textContent = 'Long Vowel Sound: /ā/ (acorn)';
      cardOpen.classList.add('active-card');
      cardClosed.classList.remove('active-card');
    }

    btnClosed.addEventListener('click', setClosed);
    btnOpen.addEventListener('click', setOpen);
    cardOpen.addEventListener('click', setOpen);
    cardClosed.addEventListener('click', setClosed);
  </script>
</body>
</html>

OGE.4.RF.1

Aligned learning resources

Related diagrams