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 could add a secret letter to the end of a word that makes no sound at all, but changes everything?

The letters **a**, **e**, **i**, **o**, and **u** are called **vowels**. They can make short sounds, or they can say their own names.

When a **silent e** appears at the very end of a word, it stays quiet and tells the first vowel to say its name.

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

    /* Word selector tabs */
    .word-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .word-tab {
      background: #ffffff;
      border: 2px solid #e5e7eb;
      color: #4b5563;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: all 0.2s ease;
    }
    .word-tab.active {
      border-color: #8b5cf6;
      background: #8b5cf6;
      color: #ffffff;
    }

    /* Stage Area */
    .stage {
      position: relative;
      width: 100%;
      max-width: 420px;
      background: #ffffff;
      border-radius: 16px;
      padding: 24px 16px 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 230px;
      justify-content: center;
    }

    /* Arc SVG overlay for pointing magic */
    .arc-overlay {
      position: absolute;
      top: 10px;
      left: 0;
      width: 100%;
      height: 90px;
      pointer-events: none;
      overflow: visible;
    }
    .magic-path {
      stroke: #8b5cf6;
      stroke-width: 3;
      stroke-dasharray: 6, 6;
      fill: none;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .magic-path.active {
      opacity: 1;
      animation: dash 1.5s linear infinite;
    }
    @keyframes dash {
      to { stroke-dashoffset: -24; }
    }

    /* Tiles row */
    .tiles {
      display: flex;
      gap: 8px;
      margin-top: 20px;
      margin-bottom: 24px;
      align-items: center;
      position: relative;
    }
    .tile {
      width: 60px;
      height: 72px;
      background: #f1f5f9;
      border: 2px solid #cbd5e1;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      font-weight: 800;
      color: #1e2945;
      position: relative;
      transition: all 0.3s ease;
    }

    /* Target Vowel Styling */
    .tile.vowel {
      background: #ede9fe;
      border-color: #c4b5fd;
      color: #6d28d9;
    }
    .tile.vowel.long {
      background: #8b5cf6;
      border-color: #7c3aed;
      color: #ffffff;
      box-shadow: 0 0 16px rgba(139, 92, 246, 0.45);
    }

    /* Vowel Sound Badge above tile */
    .sound-badge {
      position: absolute;
      top: -26px;
      font-size: 13px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 10px;
      background: #e2e8f0;
      color: #475569;
      white-space: nowrap;
      transition: all 0.3s ease;
    }
    .tile.vowel.long .sound-badge {
      background: #7c3aed;
      color: #ffffff;
    }

    /* Silent E Tile */
    .tile.silent-e {
      border: 2px dashed #cbd5e1;
      background: #f8fafc;
      color: #94a3b8;
      opacity: 0.25;
      transform: scale(0.9);
      transition: all 0.3s ease;
    }
    .tile.silent-e.active {
      opacity: 1;
      transform: scale(1);
      border-style: solid;
      border-color: #8b5cf6;
      background: #faf5ff;
      color: #8b5cf6;
    }
    .silent-badge {
      position: absolute;
      bottom: -24px;
      font-size: 11px;
      font-weight: 700;
      color: #8b5cf6;
      opacity: 0;
      transition: opacity 0.3s ease;
      white-space: nowrap;
    }
    .tile.silent-e.active .silent-badge {
      opacity: 1;
    }

    /* Toggle Switch Button */
    .toggle-btn {
      background: #8b5cf6;
      color: #ffffff;
      border: none;
      padding: 10px 24px;
      font-size: 15px;
      font-weight: 700;
      border-radius: 24px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3);
      transition: background 0.2s, box-shadow 0.2s;
    }
    .toggle-btn:active {
      background: #7c3aed;
      box-shadow: 0 2px 6px rgba(139, 92, 246, 0.3);
    }
  </style>
</head>
<body>

  
  <div class="word-tabs">
    <button class="word-tab active" data-idx="0">cap → cape</button>
    <button class="word-tab" data-idx="1">hop → hope</button>
    <button class="word-tab" data-idx="2">pin → pine</button>
    <button class="word-tab" data-idx="3">cub → cube</button>
  </div>

  
  <div class="stage">
    <svg class="arc-overlay">
      <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1 L 8 5 L 0 9 z" fill="#8b5cf6"/>
        </marker>
      </defs>
      <path id="magicArc" class="magic-path" d="M 270 20 Q 185 -10 100 20" marker-end="url(#arrow)" />
    </svg>

    <div class="tiles">
      <div class="tile" id="letter1">c</div>
      <div class="tile vowel" id="letter2">
        <span class="sound-badge" id="vowelLabel">ă</span>
        <span id="vowelChar">a</span>
      </div>
      <div class="tile" id="letter3">p</div>
      <div class="tile silent-e" id="letterE">
        <span>e</span>
        <span class="silent-badge">🤫 SILENT</span>
      </div>
    </div>

    
    <button class="toggle-btn" id="toggleBtn">
      <span id="toggleText">+ Add Silent E</span>
    </button>
  </div>

  <script>
    const WORDS = [
      { c1: 'c', v: 'a', c2: 'p', shortSound: 'ă (short)', longSound: 'ā (says "A")' },
      { c1: 'h', v: 'o', c2: 'p', shortSound: 'ŏ (short)', longSound: 'ō (says "O")' },
      { c1: 'p', v: 'i', c2: 'n', shortSound: 'ĭ (short)', longSound: 'ī (says "I")' },
      { c1: 'c', v: 'u', c2: 'b', shortSound: 'ŭ (short)', longSound: 'ū (says "U")' }
    ];

    let currentWordIdx = 0;
    let hasE = false;

    const l1 = document.getElementById('letter1');
    const l2 = document.getElementById('letter2');
    const vChar = document.getElementById('vowelChar');
    const vLabel = document.getElementById('vowelLabel');
    const l3 = document.getElementById('letter3');
    const lE = document.getElementById('letterE');
    const arc = document.getElementById('magicArc');
    const toggleBtn = document.getElementById('toggleBtn');
    const toggleText = document.getElementById('toggleText');
    const tabs = document.querySelectorAll('.word-tab');

    function update() {
      const data = WORDS[currentWordIdx];
      l1.textContent = data.c1;
      vChar.textContent = data.v;
      l3.textContent = data.c2;

      if (hasE) {
        lE.classList.add('active');
        l2.classList.add('long');
        arc.classList.add('active');
        vLabel.textContent = data.longSound;
        toggleText.textContent = '− Remove E';
      } else {
        lE.classList.remove('active');
        l2.classList.remove('long');
        arc.classList.remove('active');
        vLabel.textContent = data.shortSound;
        toggleText.textContent = '+ Add Silent E';
      }
    }

    tabs.forEach((tab, idx) => {
      tab.addEventListener('click', () => {
        tabs.forEach(t => t.classList.remove('active'));
        tab.classList.add('active');
        currentWordIdx = idx;
        hasE = false;
        update();
      });
    });

    toggleBtn.addEventListener('click', () => {
      hasE = !hasE;
      update();
    });

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

How does this quiet letter work on other words we know?

In the word **cap**, the letter **a** makes the short sound /æ/. When we add **e** at the end, it becomes **cape**, and the **a** says its name.

Let's see what happens with the other vowels:

<!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>Silent E Rule</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f8f9fa;
    color: #1e2945;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 12px;
    user-select: none;
  }

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

  /* Vowel Selector Tabs */
  .vowel-tabs {
    display: flex;
    gap: 8px;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 14px;
  }

  .tab-btn {
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 700;
    color: #64748b;
    padding: 6px 18px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .tab-btn.active {
    background: #ffffff;
    color: #2563eb;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }

  /* Main Interactive Card */
  .stage {
    width: 100%;
    background: #ffffff;
    border-radius: 20px;
    padding: 24px 16px 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  /* Meaning Visual */
  .meaning-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 72px;
    margin-bottom: 8px;
  }

  .emoji-icon {
    font-size: 52px;
    line-height: 1;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* Word Tiles Container */
  .word-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 96px;
    margin-top: 14px;
  }

  .tile {
    width: 58px;
    height: 68px;
    background: #f1f5f9;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 800;
    color: #1e2945;
    position: relative;
    transition: all 0.3s ease;
  }

  .tile.vowel-tile {
    background: #eff6ff;
    color: #2563eb;
    box-shadow: inset 0 0 0 2px #bfdbfe;
  }

  .tile.vowel-tile.long {
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(37,99,235,0.35);
  }

  /* Vowel Sound Indicator Badge */
  .sound-badge {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    color: #2563eb;
    font-size: 13px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    white-space: nowrap;
    transition: all 0.3s ease;
  }

  /* Silent E Tile */
  .tile.e-tile {
    background: #f8fafc;
    color: #cbd5e1;
    border: 2px dashed #cbd5e1;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .tile.e-tile.active {
    background: #fef3c7;
    color: #d97706;
    border: 2px solid #f59e0b;
    box-shadow: 0 4px 12px rgba(245,158,11,0.2);
  }

  .silent-icon {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .tile.e-tile.active .silent-icon {
    opacity: 1;
  }

  /* SVG Power Arc */
  .arc-svg {
    position: absolute;
    top: -12px;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
  }

  .power-path {
    fill: none;
    stroke: #f59e0b;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 6 4;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .power-path.active {
    opacity: 1;
    animation: pulseDash 1.2s linear infinite;
  }

  @keyframes pulseDash {
    to { stroke-dashoffset: -20; }
  }

  /* Action Toggle Button */
  .toggle-btn {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 999px;
    border: none;
    background: #2563eb;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37,99,235,0.25);
    transition: all 0.2s ease;
  }

  .toggle-btn:active {
    opacity: 0.9;
  }

  .toggle-btn.has-e {
    background: #e0e7ff;
    color: #2563eb;
    box-shadow: none;
  }
</style>
</head>
<body>

<div class="diagram">
  
  <div class="vowel-tabs">
    <button class="tab-btn active" onclick="setVowel(0)">A</button>
    <button class="tab-btn" onclick="setVowel(1)">I</button>
    <button class="tab-btn" onclick="setVowel(2)">O</button>
    <button class="tab-btn" onclick="setVowel(3)">U</button>
  </div>

  
  <div class="stage">
    
    <div class="meaning-box">
      <div id="emoji" class="emoji-icon">🧢</div>
    </div>

    
    <div class="word-row">
      <svg class="arc-svg" viewBox="0 0 280 100">
        
        <path id="powerArc" class="power-path" d="M 235 25 Q 160 -15 85 25" />
      </svg>

      <div id="t1" class="tile">C</div>
      <div id="t2" class="tile vowel-tile">
        <span id="soundBadge" class="sound-badge">ă</span>
        <span id="vowelLetter">A</span>
      </div>
      <div id="t3" class="tile">P</div>
      <div id="t4" class="tile e-tile" onclick="toggleE()">
        E
        <span class="silent-icon">🤫</span>
      </div>
    </div>

    
    <button id="toggleBtn" class="toggle-btn" onclick="toggleE()">
      + Silent E
    </button>
  </div>
</div>

<script>
  const WORDS = [
    { base: ['C','A','P'], e: 'E', emojiShort: '🧢', emojiLong: '🦸', shortPhon: 'ă', longPhon: 'ā' },
    { base: ['P','I','N'], e: 'E', emojiShort: '📌', emojiLong: '🌲', shortPhon: 'ĭ', longPhon: 'ī' },
    { base: ['H','O','P'], e: 'E', emojiShort: '🦘', emojiLong: '✨', shortPhon: 'ŏ', longPhon: 'ō' },
    { base: ['C','U','B'], e: 'E', emojiShort: '🐻', emojiLong: '🧊', shortPhon: 'ŭ', longPhon: 'ū' }
  ];

  let currentVowel = 0;
  let hasE = false;

  function render() {
    const data = WORDS[currentVowel];
    
    // Letters
    document.getElementById('t1').textContent = data.base[0];
    document.getElementById('vowelLetter').textContent = data.base[1];
    document.getElementById('t3').textContent = data.base[2];
    
    // E state
    const t2 = document.getElementById('t2');
    const t4 = document.getElementById('t4');
    const arc = document.getElementById('powerArc');
    const badge = document.getElementById('soundBadge');
    const emoji = document.getElementById('emoji');
    const btn = document.getElementById('toggleBtn');

    if (hasE) {
      t4.classList.add('active');
      t2.classList.add('long');
      arc.classList.add('active');
      badge.textContent = data.longPhon;
      emoji.textContent = data.emojiLong;
      btn.textContent = '− Remove E';
      btn.classList.add('has-e');
    } else {
      t4.classList.remove('active');
      t2.classList.remove('long');
      arc.classList.remove('active');
      badge.textContent = data.shortPhon;
      emoji.textContent = data.emojiShort;
      btn.textContent = '+ Silent E';
      btn.classList.remove('has-e');
    }

    // Tabs update
    document.querySelectorAll('.tab-btn').forEach((btn, idx) => {
      btn.classList.toggle('active', idx === currentVowel);
    });
  }

  function setVowel(idx) {
    currentVowel = idx;
    render();
  }

  function toggleE() {
    hasE = !hasE;
    render();
  }

  // Initial render
  render();
</script>

</body>
</html>

Does the letter **e** at the end ever make a sound in these words?

A common mistake is trying to sound out the **e** at the end, like reading **bike** as *by-kuh*.

Remember: the **e** does not speak at all! It only gives its power to the middle vowel, so **bike** rhymes with **like**.

Whenever you spot an **e** at the end of a short word, look back at the first vowel and let it say its name!

What Is the Silent E Rule?. Understand that a silent e at the end of a word makes the first vowel say its name.

Khan Academy Kids: Early Reading & Phonics - Long Vowels and Silent E

IXL: Complete the Silent E Words & Spell Silent E Words (Grade 1 Phonics)

BBC Bitesize Primary Phonics: Split Digraphs and the Magic E

Instruction for RF.1.3.c is most effective when grounded in explicit, systematic Science of Reading principles. Begin with minimal-pair contrast routines (transforming CVC words to CVCe words such as mad->made, fin->fine, cut->cute, hop->hope). Use multisensory cues such as physical 'e' wand pointers, finger jumping arcs over the consonant, and Elkonin sound boxes to emphasize that while the word has 4 letters, it consists of only 3 phonemes.

What Is the Silent E Rule?

Meet the Silent E

Watch the Magic Happen

A Common Mistake