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

Imagine changing just one letter and turning a furry pet into something you wear on your head!

When words share the exact same ending letters and sounds, we call them a **word family**.

The letters **-at** team up to make the short sound */æt/*, like at the end of the word *cat*.

To spell new words, we just slide a new beginning sound in front of the **-at** pattern.

<!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, Helvetica, Arial, sans-serif;
      user-select: none;
    }

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

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

    /* Pattern Toggle */
    .pattern-tabs {
      display: flex;
      gap: 8px;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 24px;
    }

    .tab-btn {
      border: none;
      background: transparent;
      padding: 6px 18px;
      font-size: 15px;
      font-weight: 700;
      color: #64748b;
      border-radius: 20px;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }

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

    /* Word Blending Stage */
    .blend-stage {
      width: 100%;
      background: #ffffff;
      border-radius: 16px;
      padding: 24px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .equation-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
    }

    .tile {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      font-weight: 800;
      border-radius: 12px;
      min-width: 56px;
      height: 64px;
      padding: 0 12px;
      transition: transform 0.3s ease, background-color 0.3s ease;
    }

    .tile-onset {
      background: #e0f2fe;
      color: #0284c7;
      border: 2px solid #bae6fd;
    }

    .tile-rime {
      background: #fef3c7;
      color: #d97706;
      border: 2px solid #fde68a;
    }

    .symbol {
      font-size: 24px;
      font-weight: 700;
      color: #94a3b8;
    }

    .tile-result {
      background: #f0fdf4;
      color: #16a34a;
      border: 2px solid #bbf7d0;
      min-width: 96px;
    }

    /* Emoji / Visual Preview */
    .visual-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 90px;
    }

    .visual-emoji {
      font-size: 48px;
      line-height: 1;
    }

    .sound-breakdown {
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      letter-spacing: 2px;
    }

    /* Onset Selector Buttons */
    .onset-bar {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      width: 100%;
    }

    .onset-btn {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      border: 2px solid transparent;
      background: #ffffff;
      color: #1e2945;
      font-size: 20px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 2px 5px rgba(0,0,0,0.06);
      transition: all 0.2s ease;
    }

    .onset-btn:hover {
      background: #f1f5f9;
    }

    .onset-btn.active {
      background: #0284c7;
      color: #ffffff;
      box-shadow: 0 3px 8px rgba(2, 132, 199, 0.35);
    }

    /* Controls */
    .control-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 4px;
    }

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

    .ctrl-btn:hover {
      background: #f8fafc;
    }
  </style>
</head>
<body>

  <div class="app-wrap">
    
    <div class="pattern-tabs">
      <button class="tab-btn active" id="tabAt">-at</button>
      <button class="tab-btn" id="tabAn">-an</button>
    </div>

    
    <div class="blend-stage">
      <div class="equation-row">
        <div class="tile tile-onset" id="dispOnset">h</div>
        <span class="symbol">+</span>
        <div class="tile tile-rime" id="dispRime">-at</div>
        <span class="symbol">=</span>
        <div class="tile tile-result" id="dispWord">hat</div>
      </div>

      <div class="visual-card">
        <div class="visual-emoji" id="dispEmoji">🎩</div>
        <div class="sound-breakdown" id="dispPhonics">/h/ + /at/</div>
      </div>
    </div>

    
    <div class="onset-bar" id="onsetContainer"></div>

    
    <div class="control-row">
      <button class="ctrl-btn" id="playBtn">⏸ Pause</button>
    </div>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const DATA = {
      at: [
        { letter: 'h', word: 'hat', emoji: '🎩', sound: '/h/ + /at/' },
        { letter: 'c', word: 'cat', emoji: '🐱', sound: '/k/ + /at/' },
        { letter: 'b', word: 'bat', emoji: '🦇', sound: '/b/ + /at/' },
        { letter: 'm', word: 'mat', emoji: '🧘', sound: '/m/ + /at/' },
        { letter: 'r', word: 'rat', emoji: '🐀', sound: '/r/ + /at/' }
      ],
      an: [
        { letter: 'f', word: 'fan', emoji: '🪭', sound: '/f/ + /an/' },
        { letter: 'c', word: 'can', emoji: '🥫', sound: '/k/ + /an/' },
        { letter: 'p', word: 'pan', emoji: '🍳', sound: '/p/ + /an/' },
        { letter: 'm', word: 'man', emoji: '👨', sound: '/m/ + /an/' },
        { letter: 'v', word: 'van', emoji: '🚐', sound: '/v/ + /an/' }
      ]
    };

    let currentPattern = 'at';
    let currentIndex = 0;
    let autoPlayTimer = null;
    let isPlaying = true;

    const dispOnset = document.getElementById('dispOnset');
    const dispRime = document.getElementById('dispRime');
    const dispWord = document.getElementById('dispWord');
    const dispEmoji = document.getElementById('dispEmoji');
    const dispPhonics = document.getElementById('dispPhonics');
    const onsetContainer = document.getElementById('onsetContainer');
    const tabAt = document.getElementById('tabAt');
    const tabAn = document.getElementById('tabAn');
    const playBtn = document.getElementById('playBtn');

    function renderButtons() {
      onsetContainer.innerHTML = '';
      const list = DATA[currentPattern];
      list.forEach((item, idx) => {
        const btn = document.createElement('button');
        btn.className = `onset-btn ${idx === currentIndex ? 'active' : ''}`;
        btn.textContent = item.letter;
        btn.addEventListener('click', () => {
          currentIndex = idx;
          updateView();
          resetTimer();
        });
        onsetContainer.appendChild(btn);
      });
    }

    function updateView() {
      const list = DATA[currentPattern];
      const item = list[currentIndex];

      dispOnset.textContent = item.letter;
      dispRime.textContent = `-${currentPattern}`;
      dispWord.textContent = item.word;
      dispEmoji.textContent = item.emoji;
      dispPhonics.textContent = item.sound;

      // Update button highlights
      const buttons = onsetContainer.querySelectorAll('.onset-btn');
      buttons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === currentIndex);
      });
    }

    function switchPattern(pattern) {
      currentPattern = pattern;
      currentIndex = 0;
      tabAt.classList.toggle('active', pattern === 'at');
      tabAn.classList.toggle('active', pattern === 'an');
      renderButtons();
      updateView();
      resetTimer();
    }

    function nextStep() {
      const list = DATA[currentPattern];
      currentIndex = (currentIndex + 1) % list.length;
      updateView();
    }

    function startTimer() {
      if (autoPlayTimer) clearInterval(autoPlayTimer);
      autoPlayTimer = setInterval(nextStep, 3200);
      playBtn.textContent = '⏸ Pause';
      isPlaying = true;
    }

    function pauseTimer() {
      if (autoPlayTimer) clearInterval(autoPlayTimer);
      autoPlayTimer = null;
      playBtn.textContent = '▶ Play';
      isPlaying = false;
    }

    function resetTimer() {
      if (isPlaying) {
        startTimer();
      }
    }

    tabAt.addEventListener('click', () => switchPattern('at'));
    tabAn.addEventListener('click', () => switchPattern('an'));

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        pauseTimer();
      } else {
        startTimer();
      }
    });

    // Initialize
    renderButtons();
    updateView();
    startTimer();
  </script>
</body>
</html>

To spell **hat**, listen for the first sound /h/ made by **h**, then add **-at** to make **h-a-t**.

To spell **bat**, swap the first letter to **b**, giving you **b-a-t**.

What happens if we switch the ending letter from **t** to **n**?

The letters **-an** make the sound */æn/*, like at the end of the word *fan*.

We can build a whole new group of rhyming words by changing the first letter before **-an**.

<!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>Word Family -an Builder</title>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

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

    .builder-area {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      margin: auto 0;
    }

    .equation-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
    }

    .tile-slot {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .slot-label {
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .tile {
      width: 72px;
      height: 72px;
      background: #ffffff;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      font-weight: 700;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      transition: all 0.25s ease;
      user-select: none;
    }

    .tile-onset {
      color: #0284c7;
      border: 2px solid #38bdf8;
      background: #f0f9ff;
    }

    .tile-rime {
      color: #059669;
      border: 2px solid #34d399;
      background: #ecfdf5;
    }

    .operator {
      font-size: 28px;
      font-weight: 700;
      color: #9ca3af;
      margin-top: 22px;
    }

    .result-card {
      width: 100%;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 16px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .result-word-wrap {
      display: flex;
      align-items: baseline;
      gap: 2px;
      font-size: 42px;
      font-weight: 800;
      line-height: 1;
    }

    .res-onset {
      color: #0284c7;
    }

    .res-rime {
      color: #059669;
    }

    .result-visual {
      font-size: 44px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      background: #f8fafc;
      border-radius: 12px;
    }

    .letter-picker {
      width: 100%;
      max-width: 480px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
      margin-top: 8px;
    }

    .picker-btn {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 0;
      font-size: 24px;
      font-weight: 700;
      color: #334155;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
      transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .picker-btn .mini-emoji {
      font-size: 14px;
      line-height: 1;
      filter: grayscale(0.2);
    }

    .picker-btn.active {
      border-color: #0284c7;
      background: #f0f9ff;
      color: #0284c7;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25);
    }
  </style>
</head>
<body>

  <div class="builder-area">
    <div class="equation-row">
      <div class="tile-slot">
        <span class="slot-label">Sound</span>
        <div class="tile tile-onset" id="tileOnset">p</div>
      </div>

      <div class="operator">+</div>

      <div class="tile-slot">
        <span class="slot-label">Pattern</span>
        <div class="tile tile-rime">-an</div>
      </div>

      <div class="operator">=</div>

      <div class="tile-slot">
        <span class="slot-label">Word</span>
        <div class="tile" style="border: 2px solid #cbd5e1; background: #ffffff;">
          <span class="res-onset" id="eqOnset">p</span><span class="res-rime">an</span>
        </div>
      </div>
    </div>

    <div class="result-card">
      <div class="result-word-wrap">
        <span class="res-onset" id="fullOnset">p</span><span class="res-rime">an</span>
      </div>
      <div class="result-visual" id="wordEmoji">🍳</div>
    </div>
  </div>

  <div class="letter-picker" id="pickerGroup">
    <button class="picker-btn active" data-idx="0">
      <span>p</span>
      <span class="mini-emoji">🍳</span>
    </button>
    <button class="picker-btn" data-idx="1">
      <span>c</span>
      <span class="mini-emoji">🥫</span>
    </button>
    <button class="picker-btn" data-idx="2">
      <span>m</span>
      <span class="mini-emoji">👨</span>
    </button>
    <button class="picker-btn" data-idx="3">
      <span>f</span>
      <span class="mini-emoji">🪭</span>
    </button>
    <button class="picker-btn" data-idx="4">
      <span>v</span>
      <span class="mini-emoji">🚐</span>
    </button>
  </div>

  <script>
    const WORDS = [
      { onset: 'p', word: 'pan', emoji: '🍳' },
      { onset: 'c', word: 'can', emoji: '🥫' },
      { onset: 'm', word: 'man', emoji: '👨' },
      { onset: 'f', word: 'fan', emoji: '🪭' },
      { onset: 'v', word: 'van', emoji: '🚐' }
    ];

    let currentIndex = 0;

    const tileOnset = document.getElementById('tileOnset');
    const eqOnset = document.getElementById('eqOnset');
    const fullOnset = document.getElementById('fullOnset');
    const wordEmoji = document.getElementById('wordEmoji');
    const buttons = document.querySelectorAll('.picker-btn');

    function updateWord(idx, speak = false) {
      currentIndex = idx;
      const data = WORDS[idx];

      tileOnset.textContent = data.onset;
      eqOnset.textContent = data.onset;
      fullOnset.textContent = data.onset;
      wordEmoji.textContent = data.emoji;

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

      if (speak && 'speechSynthesis' in window) {
        window.speechSynthesis.cancel();
        const utter = new SpeechSynthesisUtterance(data.word);
        utter.rate = 0.85;
        window.speechSynthesis.speak(utter);
      }
    }

    buttons.forEach((btn, i) => {
      onTap(btn, () => updateWord(i, true));
    });
  </script>
</body>
</html>

To spell **pan**, write the starting sound **p**, and finish with the pattern **-an**.

How can you tell whether a word belongs to the **-at** family or the **-an** family?

Both families share the short vowel **a**, so you must listen closely to the **final sound**.

Words like *cat* end with a quick tap sound **/t/**, while words like *can* end with a humming sound **/n/**.

<!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>Spelling -at and -an Patterns</title>
<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: #f8f9fa;
    color: #1e2945;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    padding: 16px;
  }

  .builder {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* Family Selector Tabs */
  .pattern-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .pattern-tab {
    background: #ffffff;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 10px 8px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    transition: all 0.2s ease;
  }

  .pattern-tab.active-at {
    border-color: #22b7ff;
    background: #f0f9ff;
  }

  .pattern-tab.active-an {
    border-color: #f59e0b;
    background: #fffbeb;
  }

  .tab-title {
    font-size: 20px;
    font-weight: 800;
    display: block;
  }

  .tab-sub {
    font-size: 13px;
    color: #6b7280;
    font-weight: 600;
    margin-top: 2px;
  }

  /* Onset selection pills */
  .onset-grid {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  .onset-btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    font-size: 18px;
    font-weight: 700;
    color: #1e2945;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    transition: all 0.2s ease;
  }

  .onset-btn.selected {
    background: #1e2945;
    color: #ffffff;
    border-color: #1e2945;
  }

  /* Main Visual Equation Card */
  .display-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-height: 210px;
    justify-content: center;
  }

  .equation {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .tile {
    font-size: 26px;
    font-weight: 800;
    padding: 8px 14px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
  }

  .tile-onset {
    background: #f3f4f6;
    color: #1e2945;
  }

  .tile-at {
    background: #e0f2fe;
    color: #0284c7;
  }

  .tile-an {
    background: #fef3c7;
    color: #d97706;
  }

  .sym {
    font-size: 20px;
    font-weight: 700;
    color: #9ca3af;
  }

  .tile-result {
    font-size: 30px;
    font-weight: 800;
    padding: 8px 16px;
    border-radius: 12px;
    background: #1e2945;
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(30,41,69,0.15);
  }

  .result-showcase {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .emoji-badge {
    font-size: 48px;
    line-height: 1;
    transition: transform 0.2s ease;
  }

  .sound-indicator {
    font-size: 13px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  .sound-at {
    background: #e0f2fe;
    color: #0369a1;
  }

  .sound-an {
    background: #fef3c7;
    color: #b45309;
  }
</style>
</head>
<body>

<div class="builder">
  
  <div class="pattern-tabs">
    <div class="pattern-tab active-at" id="tab-at" onclick="selectPattern('at')">
      <span class="tab-title">-at</span>
      <span class="tab-sub">⚡ /t/ tap</span>
    </div>
    <div class="pattern-tab" id="tab-an" onclick="selectPattern('an')">
      <span class="tab-title">-an</span>
      <span class="tab-sub">〰️ /n/ hum</span>
    </div>
  </div>

  
  <div class="onset-grid">
    <button class="onset-btn selected" onclick="selectOnset('c', this)">c</button>
    <button class="onset-btn" onclick="selectOnset('b', this)">b</button>
    <button class="onset-btn" onclick="selectOnset('m', this)">m</button>
    <button class="onset-btn" onclick="selectOnset('p', this)">p</button>
    <button class="onset-btn" onclick="selectOnset('f', this)">f</button>
    <button class="onset-btn" onclick="selectOnset('r', this)">r</button>
  </div>

  
  <div class="display-card">
    <div class="equation">
      <div class="tile tile-onset" id="tile-onset">c</div>
      <div class="sym">+</div>
      <div class="tile tile-at" id="tile-pattern">at</div>
      <div class="sym">=</div>
      <div class="tile-result" id="tile-result">cat</div>
    </div>

    <div class="result-showcase">
      <div class="emoji-badge" id="emoji-badge">🐱</div>
    </div>

    <div class="sound-indicator sound-at" id="sound-indicator">
      <span>⚡ Quick tap ending</span>
    </div>
  </div>
</div>

<script>
  const data = {
    at: {
      soundLabel: '⚡ Quick tap ending',
      soundClass: 'sound-at',
      tileClass: 'tile-at',
      words: {
        c: { word: 'cat', emoji: '🐱' },
        b: { word: 'bat', emoji: '🦇' },
        m: { word: 'mat', emoji: '🧶' },
        p: { word: 'pat', emoji: '👋' },
        f: { word: 'fat', emoji: '🐡' },
        r: { word: 'rat', emoji: '🐀' }
      }
    },
    an: {
      soundLabel: '〰️ Humming ending',
      soundClass: 'sound-an',
      tileClass: 'tile-an',
      words: {
        c: { word: 'can', emoji: '🥫' },
        b: { word: 'ban', emoji: '🚫' },
        m: { word: 'man', emoji: '👨' },
        p: { word: 'pan', emoji: '🍳' },
        f: { word: 'fan', emoji: '🪭' },
        r: { word: 'ran', emoji: '🏃' }
      }
    }
  };

  let currentPattern = 'at';
  let currentOnset = 'c';

  function updateDisplay() {
    const pData = data[currentPattern];
    const info = pData.words[currentOnset];

    document.getElementById('tile-onset').textContent = currentOnset;
    
    const tilePattern = document.getElementById('tile-pattern');
    tilePattern.textContent = currentPattern;
    tilePattern.className = 'tile ' + pData.tileClass;

    document.getElementById('tile-result').textContent = info.word;
    document.getElementById('emoji-badge').textContent = info.emoji;

    const soundBadge = document.getElementById('sound-indicator');
    soundBadge.textContent = pData.soundLabel;
    soundBadge.className = 'sound-indicator ' + pData.soundClass;
  }

  function selectPattern(pat) {
    currentPattern = pat;
    document.getElementById('tab-at').className = 'pattern-tab' + (pat === 'at' ? ' active-at' : '');
    document.getElementById('tab-an').className = 'pattern-tab' + (pat === 'an' ? ' active-an' : '');
    updateDisplay();
  }

  function selectOnset(onset, btn) {
    currentOnset = onset;
    document.querySelectorAll('.onset-btn').forEach(b => b.classList.remove('selected'));
    btn.classList.add('selected');
    updateDisplay();
  }

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

Next time you want to spell a word, say it slowly, find the ending pattern, and add your beginning letter!

Spelling Words With -at and -an Patterns. Spell one-syllable words that follow the -at and -an letter patterns.

IXL: Complete the Short 'a' Word and Word Family Practice (Grade 1 / Year 1)

BBC Bitesize KS1 Phonics: Short Vowel Sounds and CVC Words

Australian Literacy Hub: Phonics & Spelling Word Families (-at, -an)

Instruction should follow a Systematic Synthetic Phonics (SSP) and Science of Reading framework. Begin with explicit phonological awareness tasks (orally segmenting and rhyming -at and -an words) before progressing to encoding with tactile manipulatives (magnetic letters, Elkonin boxes). Address the nasalisation of short 'a' before 'n' directly by having students feel the airflow in their nose for /n/ versus the clean stop of /t/.

Spelling Words With -at and -an Patterns

The -at Word Family

The -an Word Family