Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

What if you had a secret key that could unlock every single word in a whole storybook?

You already know the sounds letters make, like **/c/**, **/a/**, and **/t/**.

When you slide those sounds together to say **cat**, you just **decoded** a word!

<!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>Decoding Sounds into Words</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --primary: #22b7ff;
    --primary-dark: #0096dc;
    --text: #1e2945;
    --border: #e2e8f0;
    --bg: #f8fafc;
    --muted: #64748b;
    --success: #10b981;
  }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text);
    background: transparent;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    user-select: none;
    -webkit-user-select: none;
  }

  .word-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
  }
  .tab-btn {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: #ffffff;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .tab-btn.active {
    background: var(--text);
    color: #ffffff;
    border-color: var(--text);
  }

  .stage {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 220px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .letters-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    transition: gap 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 12px;
  }
  .stage.blended .letters-track {
    gap: 4px;
  }

  .letter-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .tile {
    width: 58px;
    height: 64px;
    background: #f1f5f9;
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 800;
    color: var(--text);
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
  }
  .stage.blended .tile {
    background: #e0f2fe;
    border-color: var(--primary);
    color: #0369a1;
  }
  .sound-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #94a3b8;
    transition: all 0.3s ease;
  }
  .stage.blended .sound-dot {
    transform: scale(0);
    opacity: 0;
  }

  .result-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    font-size: 26px;
    font-weight: 800;
    color: var(--text);
  }
  .stage.blended .result-banner {
    opacity: 1;
    transform: translateY(0);
  }
  .result-emoji {
    font-size: 34px;
    line-height: 1;
  }

  .slide-bar {
    width: 100%;
    max-width: 420px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    gap: 12px;
    margin-top: 10px;
  }

  .step-btn {
    flex: 1;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background: #ffffff;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    transition: all 0.2s ease;
  }
  .step-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
  }
  .step-btn.primary {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
  }
  .step-btn.primary:hover {
    background: var(--primary-dark);
  }

  .status-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
</style>
</head>
<body>

  <div class="word-tabs">
    <button class="tab-btn active" onclick="setWord(0)">c - a - t</button>
    <button class="tab-btn" onclick="setWord(1)">s - u - n</button>
    <button class="tab-btn" onclick="setWord(2)">d - o - g</button>
  </div>

  <div class="stage" id="stage">
    <div class="letters-track">
      <div class="letter-box">
        <div class="tile" id="l1">c</div>
        <div class="sound-dot"></div>
      </div>
      <div class="letter-box">
        <div class="tile" id="l2">a</div>
        <div class="sound-dot"></div>
      </div>
      <div class="letter-box">
        <div class="tile" id="l3">t</div>
        <div class="sound-dot"></div>
      </div>
    </div>
    
    <div class="result-banner">
      <span id="wordText">cat</span>
      <span class="result-emoji" id="wordEmoji">🐱</span>
    </div>
  </div>

  <div class="slide-bar">
    <button class="step-btn" id="soundBtn" onclick="setSeparate()">
      ✦ Separate
    </button>
    <button class="step-btn primary" id="blendBtn" onclick="toggleSlide()">
      → Slide & Blend
    </button>
  </div>

<script>
  const WORDS = [
    { letters: ['c', 'a', 't'], word: 'cat', emoji: '🐱' },
    { letters: ['s', 'u', 'n'], word: 'sun', emoji: '☀️' },
    { letters: ['d', 'o', 'g'], word: 'dog', emoji: '🐶' }
  ];

  let currentWordIdx = 0;
  let isBlended = false;

  const stage = document.getElementById('stage');
  const l1 = document.getElementById('l1');
  const l2 = document.getElementById('l2');
  const l3 = document.getElementById('l3');
  const wordText = document.getElementById('wordText');
  const wordEmoji = document.getElementById('wordEmoji');
  const tabs = document.querySelectorAll('.tab-btn');
  const blendBtn = document.getElementById('blendBtn');

  function renderWord() {
    const data = WORDS[currentWordIdx];
    l1.textContent = data.letters[0];
    l2.textContent = data.letters[1];
    l3.textContent = data.letters[2];
    wordText.textContent = data.word;
    wordEmoji.textContent = data.emoji;

    tabs.forEach((tab, idx) => {
      tab.classList.toggle('active', idx === currentWordIdx);
    });
  }

  function setSeparate() {
    isBlended = false;
    stage.classList.remove('blended');
    blendBtn.textContent = '→ Slide & Blend';
    blendBtn.className = 'step-btn primary';
  }

  function setBlended() {
    isBlended = true;
    stage.classList.add('blended');
    blendBtn.textContent = '✓ Decoded!';
    blendBtn.className = 'step-btn';
  }

  function toggleSlide() {
    if (isBlended) {
      setSeparate();
    } else {
      setBlended();
    }
  }

  function setWord(idx) {
    currentWordIdx = idx;
    renderWord();
    setSeparate();
  }

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

What happens when we put lots of these words together into a whole page?

A **decodable text** is a book or sentence filled with words you can sound out using letters you already know.

You do not need to guess from pictures because the letters give you all the clues you need to read.

<!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>Decoding Words We Know</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

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

    /* Word switcher tabs */
    .word-tabs {
      display: flex;
      gap: 8px;
      justify-content: center;
      width: 100%;
      max-width: 380px;
    }

    .word-tab {
      flex: 1;
      padding: 8px 12px;
      border: 2px solid #e6e6e6;
      background: #ffffff;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 700;
      color: #6b7280;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }

    .word-tab.active {
      border-color: #2ecc71;
      color: #1e2945;
      background: #f0fdf4;
      box-shadow: 0 2px 6px rgba(46, 204, 113, 0.2);
    }

    /* Main decoding arena */
    .decode-card {
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
      border: 1px solid #eef0f2;
      width: 100%;
      max-width: 380px;
      padding: 20px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    /* Letter tiles row */
    .tiles-row {
      display: flex;
      gap: 12px;
      justify-content: center;
      width: 100%;
    }

    .letter-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      flex: 1;
      max-width: 80px;
    }

    .letter-tile {
      width: 100%;
      aspect-ratio: 1;
      background: #f8f9fa;
      border: 2px solid #e6e6e6;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 34px;
      font-weight: 800;
      color: #1e2945;
      cursor: pointer;
      transition: all 0.25s ease;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    }

    .letter-tile.active {
      background: #2ecc71;
      color: #ffffff;
      border-color: #27ae60;
      box-shadow: 0 4px 12px rgba(46, 204, 113, 0.35);
    }

    .sound-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #d1d5db;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .sound-dot.active {
      background: #2ecc71;
      transform: scale(1.3);
    }

    /* Sound indicator label */
    .sound-tag {
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      min-height: 20px;
      text-align: center;
    }

    /* Blend result banner */
    .blend-result {
      width: 100%;
      height: 54px;
      border-radius: 12px;
      background: #f8f9fa;
      border: 2px dashed #d1d5db;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 20px;
      font-weight: 800;
      color: #9ca3af;
      transition: all 0.3s ease;
    }

    .blend-result.revealed {
      background: #ecfdf5;
      border: 2px solid #2ecc71;
      color: #065f46;
      box-shadow: 0 4px 12px rgba(46, 204, 113, 0.15);
    }

    .blend-result .emoji {
      font-size: 26px;
      opacity: 0;
      transform: scale(0.5);
      transition: all 0.3s ease;
    }

    .blend-result.revealed .emoji {
      opacity: 1;
      transform: scale(1);
    }

    /* Control action buttons */
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 380px;
    }

    .btn {
      flex: 1;
      padding: 10px 14px;
      font-size: 15px;
      font-weight: 700;
      border-radius: 12px;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .btn-blend {
      background: #2ecc71;
      color: #ffffff;
      box-shadow: 0 3px 8px rgba(46, 204, 113, 0.3);
    }

    .btn-blend:active {
      background: #27ae60;
    }

    .btn-reset {
      background: #ffffff;
      color: #6b7280;
      border: 2px solid #e6e6e6;
      flex: 0 0 44px;
      padding: 0;
      font-size: 16px;
    }

    .btn-reset:active {
      background: #f3f4f6;
    }
  </style>
</head>
<body>

  
  <div class="word-tabs">
    <button class="word-tab active" data-word="0">c - a - t</button>
    <button class="word-tab" data-word="1">s - u - n</button>
    <button class="word-tab" data-word="2">m - a - p</button>
  </div>

  
  <div class="decode-card">
    <div class="tiles-row">
      <div class="letter-col" data-idx="0">
        <div class="letter-tile" id="tile0">c</div>
        <div class="sound-dot" id="dot0"></div>
        <div class="sound-tag" id="sound0">/k/</div>
      </div>
      <div class="letter-col" data-idx="1">
        <div class="letter-tile" id="tile1">a</div>
        <div class="sound-dot" id="dot1"></div>
        <div class="sound-tag" id="sound1">/æ/</div>
      </div>
      <div class="letter-col" data-idx="2">
        <div class="letter-tile" id="tile2">t</div>
        <div class="sound-dot" id="dot2"></div>
        <div class="sound-tag" id="sound2">/t/</div>
      </div>
    </div>

    
    <div class="blend-result" id="blendBox">
      <span id="blendWord">Blend Sound Clues</span>
      <span class="emoji" id="blendEmoji">🐱</span>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn btn-blend" id="blendBtn">▶ Sound & Blend</button>
    <button class="btn btn-reset" id="resetBtn" title="Reset">↺</button>
  </div>

  <script>
    const WORDS = [
      {
        letters: ['c', 'a', 't'],
        sounds: ['/k/', '/æ/', '/t/'],
        word: 'cat',
        emoji: '🐱'
      },
      {
        letters: ['s', 'u', 'n'],
        sounds: ['/s/', '/ʌ/', '/n/'],
        word: 'sun',
        emoji: '☀️'
      },
      {
        letters: ['m', 'a', 'p'],
        sounds: ['/m/', '/æ/', '/p/'],
        word: 'map',
        emoji: '🗺️'
      }
    ];

    let currentWordIdx = 0;
    let animTimer = null;

    const tileEls = [document.getElementById('tile0'), document.getElementById('tile1'), document.getElementById('tile2')];
    const dotEls = [document.getElementById('dot0'), document.getElementById('dot1'), document.getElementById('dot2')];
    const soundEls = [document.getElementById('sound0'), document.getElementById('sound1'), document.getElementById('sound2')];
    const blendBox = document.getElementById('blendBox');
    const blendWord = document.getElementById('blendWord');
    const blendEmoji = document.getElementById('blendEmoji');
    const blendBtn = document.getElementById('blendBtn');
    const resetBtn = document.getElementById('resetBtn');
    const tabs = document.querySelectorAll('.word-tab');

    function loadWord(idx) {
      clearAnimation();
      currentWordIdx = idx;
      const data = WORDS[idx];

      tabs.forEach((tab, i) => {
        tab.classList.toggle('active', i === idx);
      });

      for (let i = 0; i < 3; i++) {
        tileEls[i].textContent = data.letters[i];
        soundEls[i].textContent = data.sounds[i];
        tileEls[i].classList.remove('active');
        dotEls[i].classList.remove('active');
      }

      blendBox.classList.remove('revealed');
      blendWord.textContent = 'Blend Sound Clues';
      blendEmoji.textContent = data.emoji;
    }

    function clearAnimation() {
      if (animTimer) {
        clearTimeout(animTimer);
        animTimer = null;
      }
      tileEls.forEach(t => t.classList.remove('active'));
      dotEls.forEach(d => d.classList.remove('active'));
    }

    function highlightTile(idx) {
      tileEls.forEach((t, i) => t.classList.toggle('active', i === idx));
      dotEls.forEach((d, i) => d.classList.toggle('active', i === idx));
    }

    function soundOutAndBlend() {
      clearAnimation();
      blendBox.classList.remove('revealed');
      blendWord.textContent = '...';

      const data = WORDS[currentWordIdx];

      // Step 1: sound 0
      highlightTile(0);

      animTimer = setTimeout(() => {
        // Step 2: sound 1
        highlightTile(1);

        animTimer = setTimeout(() => {
          // Step 3: sound 2
          highlightTile(2);

          animTimer = setTimeout(() => {
            // Step 4: Blend all together
            tileEls.forEach(t => t.classList.add('active'));
            dotEls.forEach(d => d.classList.add('active'));
            blendBox.classList.add('revealed');
            blendWord.textContent = data.word;
            animTimer = null;
          }, 600);

        }, 600);

      }, 600);
    }

    // Tap individual letter column to focus sound
    document.querySelectorAll('.letter-col').forEach(col => {
      col.addEventListener('click', () => {
        clearAnimation();
        const idx = parseInt(col.getAttribute('data-idx'), 10);
        highlightTile(idx);
        blendBox.classList.remove('revealed');
        blendWord.textContent = WORDS[currentWordIdx].sounds[idx];
      });
    });

    // Tab switching
    tabs.forEach(tab => {
      tab.addEventListener('click', () => {
        const idx = parseInt(tab.getAttribute('data-word'), 10);
        loadWord(idx);
      });
    });

    blendBtn.addEventListener('click', soundOutAndBlend);
    resetBtn.addEventListener('click', () => loadWord(currentWordIdx));

    // Initialize
    loadWord(0);
  </script>
</body>
</html>

Are you ready to test your reading power on a real sentence?

Look at each letter from left to right, say its sound, and **blend** them into words.

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

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

  .step-btn {
    border: 2px solid transparent;
    background: #ffffff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
  }

  .step-btn.active {
    background: #8e44ad;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(142, 68, 173, 0.25);
  }

  .display-area {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 220px;
    overflow: hidden;
  }

  .stage-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

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

  .sound-row {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
  }

  .tile {
    width: 64px;
    height: 72px;
    background: #ffffff;
    border: 2px solid #8e44ad;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(142, 68, 173, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    color: #8e44ad;
  }

  .tile-sub {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
  }

  .blend-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    padding: 16px 20px;
    border-radius: 16px;
    border: 2px solid #8e44ad;
    box-shadow: 0 6px 16px rgba(142, 68, 173, 0.12);
  }

  .blend-word {
    font-size: 32px;
    font-weight: 800;
    color: #8e44ad;
    letter-spacing: 2px;
  }

  .arrow-symbol {
    font-size: 22px;
    color: #8e44ad;
  }

  .book-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 24px;
    border: 2px solid #8e44ad;
    box-shadow: 0 6px 18px rgba(142, 68, 173, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .book-icon {
    font-size: 36px;
  }

  .sentence {
    font-size: 22px;
    font-weight: 700;
    color: #1e2945;
  }

  .status-badge {
    font-size: 13px;
    font-weight: 600;
    color: #27ae60;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
  }

  .controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
  }

  .ctrl-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #1e2945;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }

  .ctrl-btn:hover {
    opacity: 0.85;
  }
</style>
</head>
<body>

<div class="nav-bar">
  <button class="step-btn active" id="btn-0" onclick="goToStep(0)">1. Letter Sounds</button>
  <button class="step-btn" id="btn-1" onclick="goToStep(1)">2. Blend Word</button>
  <button class="step-btn" id="btn-2" onclick="goToStep(2)">3. Unlock Text</button>
</div>

<div class="display-area">
  
  <div class="stage-view active" id="view-0">
    <div class="sound-row">
      <div class="tile">
        <span>s</span>
        <span class="tile-sub">🔑</span>
      </div>
      <div class="tile">
        <span>u</span>
        <span class="tile-sub">🔑</span>
      </div>
      <div class="tile">
        <span>n</span>
        <span class="tile-sub">🔑</span>
      </div>
    </div>
    <div class="status-badge" style="color:#8e44ad;">
      <span>Known Sound Keys</span>
    </div>
  </div>

  
  <div class="stage-view" id="view-1">
    <div class="sound-row">
      <div class="blend-box">
        <span>s</span>
        <span>•</span>
        <span>u</span>
        <span>•</span>
        <span>n</span>
        <span class="arrow-symbol">→</span>
        <span class="blend-word">sun</span>
      </div>
    </div>
    <div class="status-badge">
      <span>Blend sounds together</span>
    </div>
  </div>

  
  <div class="stage-view" id="view-2">
    <div class="book-card">
      <div class="book-icon">📖</div>
      <div class="sentence">The sun is up.</div>
    </div>
    <div class="status-badge">
      <span>100% Decodable ✓</span>
    </div>
  </div>
</div>

<div class="controls">
  <button class="ctrl-btn" id="prev-btn" onclick="prevStep()">◀</button>
  <button class="ctrl-btn" id="play-btn" onclick="togglePlay()">⏸</button>
  <button class="ctrl-btn" id="next-btn" onclick="nextStep()">▶</button>
</div>

<script>
  let currentStep = 0;
  let isPlaying = true;
  let timer = null;

  function updateView() {
    for (let i = 0; i < 3; i++) {
      const btn = document.getElementById('btn-' + i);
      const view = document.getElementById('view-' + i);
      if (i === currentStep) {
        btn.classList.add('active');
        view.classList.add('active');
      } else {
        btn.classList.remove('active');
        view.classList.remove('active');
      }
    }
  }

  function goToStep(index) {
    currentStep = index;
    updateView();
  }

  function nextStep() {
    currentStep = (currentStep + 1) % 3;
    updateView();
  }

  function prevStep() {
    currentStep = (currentStep - 1 + 3) % 3;
    updateView();
  }

  function togglePlay() {
    isPlaying = !isPlaying;
    const playBtn = document.getElementById('play-btn');
    playBtn.textContent = isPlaying ? '⏸' : '▶';
    if (isPlaying) {
      startAutoPlay();
    } else {
      clearInterval(timer);
    }
  }

  function startAutoPlay() {
    clearInterval(timer);
    timer = setInterval(() => {
      if (isPlaying) {
        nextStep();
      }
    }, 3200);
  }

  startAutoPlay();
</script>

</body>
</html>

Whenever you open a decodable book, tap each sound, slide them across, and listen to the word you just read.

What Is a Decodable Text? Reading Words We Know. Understand that a decodable text is made up of words we can sound out using letters we know.

Using Decodable Texts to Support Beginning Readers (Australian Curriculum v9 Aligned)

Phonics and Early Reading: Blending Sounds to Read Words

Decodable Texts: Supporting Phonics and Early Word Reading

When teaching this Foundation lesson, follow an explicit 'I do, We do, You do' instructional sequence. Begin by reviewing the targeted set of taught grapheme-phoneme correspondences before placing the text in front of students. Pre-teach any irregular high-frequency 'heart words' found in the passage. During reading, model continuous blending (holding each voiced sound into the next) to prevent phoneme dropping. Ensure students touch each word from left to right, reinforcing one-to-one correspondence between print and speech as outlined in AC9EFLY04, and always conclude with a comprehension check to anchor meaning.

What Is a Decodable Text? Reading Words We Know

Secret Letter Sounds

What Is a Decodable Text?

Let's Read Together