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 read words in a snap without sounding out every single letter?

Some words pop up so often in books that we call them **sight words** because our eyes learn to recognize them instantly.

Today, we are mastering five super-star sight words: **the**, **and**, **is**, **was**, and **are**.

High-frequency words fall into two main groups: regular **decodable words** and **Heart Words**.

High-frequency words fall into two groups: completely regular decodable words and **Heart Words**.

A regular word like **and** is sounded out letter by letter (/æ/ + /n/ + /d/), while **Heart Words** like **the**, **is**, **was**, and **are** have tricky parts to learn by heart.

Regular words like **and** can be sounded out completely (/æ/ + /n/ + /d/). Irregular words like **the**, **is**, **was**, and **are** have tricky letter sounds that you must remember by heart!

<!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>High-Frequency Sight Words</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f8f9fa;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 16px;
    user-select: none;
    -webkit-user-select: none;
  }
  .wrapper {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .word-nav {
    display: flex;
    gap: 8px;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
  .word-btn {
    appearance: none;
    border: none;
    background: #ffffff;
    color: #1e2945;
    font-size: 18px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }
  .word-btn.active {
    background: #22b7ff;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(34, 183, 255, 0.35);
  }
  .display-card {
    background: #ffffff;
    width: 100%;
    border-radius: 16px;
    padding: 28px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
    min-height: 220px;
  }
  .main-word {
    font-size: 56px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #1e2945;
    line-height: 1;
  }
  .sound-boxes {
    display: flex;
    gap: 10px;
    justify-content: center;
  }
  .sound-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .box-letter {
    width: 52px;
    height: 52px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    background: #f8fafc;
    color: #1e2945;
  }
  .sound-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #10b981;
  }
  .sound-heart {
    font-size: 14px;
    line-height: 12px;
  }
  .speak-btn {
    appearance: none;
    border: none;
    background: #f1f5f9;
    color: #1e2945;
    font-size: 15px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.2s ease;
  }
  .speak-btn:active {
    background: #e2e8f0;
  }
  .legend {
    display: flex;
    gap: 16px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    align-items: center;
    justify-content: center;
  }
  .legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
  }
</style>
</head>
<body>

<div class="wrapper">
  <div class="word-nav" id="wordNav">
    <button class="word-btn active" data-index="0">the</button>
    <button class="word-btn" data-index="1">and</button>
    <button class="word-btn" data-index="2">is</button>
    <button class="word-btn" data-index="3">was</button>
    <button class="word-btn" data-index="4">are</button>
  </div>

  <div class="display-card">
    <div class="main-word" id="wordDisplay">the</div>
    <div class="sound-boxes" id="soundBoxes"></div>
    <button class="speak-btn" id="speakBtn">Listen 🔊</button>
  </div>

  <div class="legend">
    <div class="legend-item"><span class="sound-dot"></span> Decodable</div>
    <div class="legend-item"><span>❤️</span> Heart Part</div>
  </div>
</div>

<script>
  const wordsData = [
    {
      word: "the",
      parts: [
        { letters: "th", heart: false },
        { letters: "e", heart: true }
      ]
    },
    {
      word: "and",
      parts: [
        { letters: "a", heart: false },
        { letters: "n", heart: false },
        { letters: "d", heart: false }
      ]
    },
    {
      word: "is",
      parts: [
        { letters: "i", heart: false },
        { letters: "s", heart: true }
      ]
    },
    {
      word: "was",
      parts: [
        { letters: "w", heart: false },
        { letters: "a", heart: true },
        { letters: "s", heart: true }
      ]
    },
    {
      word: "are",
      parts: [
        { letters: "are", heart: true }
      ]
    }
  ];

  let currentIndex = 0;
  const wordDisplay = document.getElementById('wordDisplay');
  const soundBoxes = document.getElementById('soundBoxes');
  const navButtons = document.querySelectorAll('.word-btn');
  const speakBtn = document.getElementById('speakBtn');

  function renderWord(index) {
    currentIndex = index;
    const data = wordsData[index];
    wordDisplay.textContent = data.word;

    soundBoxes.innerHTML = '';
    data.parts.forEach(part => {
      const box = document.createElement('div');
      box.className = 'sound-box';

      const letter = document.createElement('div');
      letter.className = 'box-letter';
      letter.textContent = part.letters;

      const marker = document.createElement('div');
      if (part.heart) {
        marker.className = 'sound-heart';
        marker.textContent = '❤️';
      } else {
        marker.className = 'sound-dot';
      }

      box.appendChild(letter);
      box.appendChild(marker);
      soundBoxes.appendChild(box);
    });

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

  navButtons.forEach((btn, i) => {
    btn.addEventListener('click', () => renderWord(i));
  });

  speakBtn.addEventListener('click', () => {
    if ('speechSynthesis' in window) {
      window.speechSynthesis.cancel();
      const utterance = new SpeechSynthesisUtterance(wordsData[currentIndex].word);
      utterance.rate = 0.85;
      utterance.lang = 'en-US';
      window.speechSynthesis.speak(utterance);
    }
  });

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

How do two of these words help us point to things and join them together?

We use **the** when we point out one special thing, like *the* dog.

We use **and** like a sticky bridge to link two words together, like *a cat and a dog*.

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

    /* Word selector tabs */
    .word-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      width: 100%;
      max-width: 480px;
    }
    .word-btn {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    }
    .word-btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(34,183,255,0.3);
    }

    /* Stage canvas */
    .stage-container {
      position: relative;
      width: 100%;
      max-width: 480px;
      height: 220px;
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e6e6e6;
      box-shadow: 0 4px 16px rgba(0,0,0,0.04);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .scene {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      padding: 12px;
    }
    .scene.active {
      opacity: 1;
      pointer-events: auto;
    }

    /* Visual elements */
    .visual-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
    }
    .item-card {
      background: #f0f9ff;
      border: 1px solid #bae6fd;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      min-width: 72px;
    }
    .item-icon {
      font-size: 32px;
      line-height: 1;
    }
    .item-label {
      font-size: 13px;
      font-weight: 600;
      color: #0369a1;
    }

    /* Connector Bridge (for 'and') */
    .bridge-connector {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }
    .bridge-badge {
      background: #22b7ff;
      color: #ffffff;
      font-weight: 800;
      font-size: 14px;
      padding: 4px 10px;
      border-radius: 12px;
      box-shadow: 0 2px 6px rgba(34,183,255,0.35);
    }
    .bridge-line {
      width: 36px;
      height: 4px;
      background: #22b7ff;
      border-radius: 2px;
    }

    /* Pointer / Specific marker (for 'the') */
    .target-ring {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    .pointer-hand {
      font-size: 28px;
    }

    /* Time & Quantity tags */
    .time-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
    }
    .badge-now {
      background: #ecfdf5;
      color: #047857;
      border: 1px solid #a7f3d0;
    }
    .badge-past {
      background: #fef3c7;
      color: #b45309;
      border: 1px solid #fde68a;
    }

    /* Word token in sentence */
    .sentence-box {
      font-size: 18px;
      font-weight: 600;
      color: #334155;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      padding: 8px 16px;
      border-radius: 24px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .highlight-word {
      background: #22b7ff;
      color: #ffffff;
      padding: 2px 8px;
      border-radius: 6px;
      font-weight: 800;
    }

    /* Sub instruction */
    .helper-text {
      font-size: 13px;
      color: #64748b;
      font-weight: 500;
      text-align: center;
    }
  </style>
</head>
<body>

  
  <div class="word-nav" role="tablist">
    <button class="word-btn active" data-index="0">and</button>
    <button class="word-btn" data-index="1">the</button>
    <button class="word-btn" data-index="2">is</button>
    <button class="word-btn" data-index="3">was</button>
    <button class="word-btn" data-index="4">are</button>
  </div>

  
  <div class="stage-container">

    
    <div class="scene active" id="scene-0">
      <div class="visual-row">
        <div class="item-card">
          <span class="item-icon">🐱</span>
          <span class="item-label">cat</span>
        </div>
        <div class="bridge-connector">
          <span class="bridge-badge">and</span>
          <div class="bridge-line"></div>
        </div>
        <div class="item-card">
          <span class="item-icon">🐶</span>
          <span class="item-label">dog</span>
        </div>
      </div>
      <div class="sentence-box">
        cat <span class="highlight-word">and</span> dog
      </div>
    </div>

    
    <div class="scene" id="scene-1">
      <div class="target-ring">
        <span class="pointer-hand">👇</span>
        <div class="item-card" style="border-color:#22b7ff; background:#eff6ff;">
          <span class="item-icon">🐱</span>
          <span class="item-label">cat</span>
        </div>
      </div>
      <div class="sentence-box">
        <span class="highlight-word">the</span> cat
      </div>
    </div>

    
    <div class="scene" id="scene-2">
      <div class="visual-row">
        <div class="item-card">
          <span class="item-icon">🐱</span>
          <span class="item-label">1 cat</span>
        </div>
        <div class="time-badge badge-now">☀️ Now</div>
        <div class="item-card">
          <span class="item-icon">😺</span>
          <span class="item-label">happy</span>
        </div>
      </div>
      <div class="sentence-box">
        cat <span class="highlight-word">is</span> happy
      </div>
    </div>

    
    <div class="scene" id="scene-3">
      <div class="visual-row">
        <div class="item-card">
          <span class="item-icon">🐱</span>
          <span class="item-label">1 cat</span>
        </div>
        <div class="time-badge badge-past">⏳ Past</div>
        <div class="item-card">
          <span class="item-icon">😴</span>
          <span class="item-label">sleepy</span>
        </div>
      </div>
      <div class="sentence-box">
        cat <span class="highlight-word">was</span> sleepy
      </div>
    </div>

    
    <div class="scene" id="scene-4">
      <div class="visual-row">
        <div class="item-card">
          <span class="item-icon">🐱🐱</span>
          <span class="item-label">2+ cats</span>
        </div>
        <div class="time-badge badge-now">☀️ Now</div>
        <div class="item-card">
          <span class="item-icon">😺</span>
          <span class="item-label">happy</span>
        </div>
      </div>
      <div class="sentence-box">
        cats <span class="highlight-word">are</span> happy
      </div>
    </div>

  </div>

  <div class="helper-text">
    Tap a word to see how it works
  </div>

  <script>
    const buttons = document.querySelectorAll('.word-btn');
    const scenes = document.querySelectorAll('.scene');

    function selectWord(index) {
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });
      scenes.forEach((scene, i) => {
        scene.classList.toggle('active', i === index);
      });
    }

    buttons.forEach((btn, index) => {
      btn.addEventListener('click', () => selectWord(index));
    });
  </script>
</body>
</html>

What about words that tell us what someone is doing right now versus yesterday?

Use **is** when talking about **one** person or thing right now, like *the bird is singing*.

Use **was** when talking about **one** thing in the past, like *the bird was asleep*.

Use **are** when talking about **more than one** thing right now, like *the birds are flying*.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="aspect-ratio" content="4:3">
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f8f9fa;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 16px;
    user-select: none;
  }
  .nav-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 440px;
  }
  .word-btn {
    flex: 1 1 60px;
    background: #ffffff;
    border: 2px solid #e6e6e6;
    border-radius: 10px;
    padding: 8px 0;
    font-size: 16px;
    font-weight: 700;
    color: #6b7280;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
  }
  .word-btn.active {
    background: #22b7ff;
    border-color: #22b7ff;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(34, 183, 255, 0.3);
  }
  .stage-area {
    position: relative;
    width: 100%;
    max-width: 440px;
    height: 230px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .scene {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: scale(0.95);
    padding: 16px;
  }
  .scene.active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
  }
  .visual-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 48px;
    height: 80px;
    margin-bottom: 12px;
  }
  .tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
  }
  .sentence {
    font-size: 20px;
    font-weight: 600;
    color: #1e2945;
  }
  .highlight {
    color: #22b7ff;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .past-faded {
    opacity: 0.35;
    filter: grayscale(1);
  }
  .clock-icon {
    font-size: 14px;
  }
</style>
</head>
<body>

<div class="nav-bar">
  <button class="word-btn active" onclick="showTab(0)">the</button>
  <button class="word-btn" onclick="showTab(1)">and</button>
  <button class="word-btn" onclick="showTab(2)">is</button>
  <button class="word-btn" onclick="showTab(3)">are</button>
  <button class="word-btn" onclick="showTab(4)">was</button>
</div>

<div class="stage-area">
  
  <div class="scene active" id="scene-0">
    <div class="visual-box">👉 🐶</div>
    <div class="tag-pill">One exact item</div>
    <div class="sentence"><span class="highlight">The</span> dog</div>
  </div>

  
  <div class="scene" id="scene-1">
    <div class="visual-box">🐱 ➕ 🐶</div>
    <div class="tag-pill">Together</div>
    <div class="sentence">Cat <span class="highlight">and</span> dog</div>
  </div>

  
  <div class="scene" id="scene-2">
    <div class="visual-box">🐦</div>
    <div class="tag-pill"><span class="clock-icon">⏰</span> 1 now</div>
    <div class="sentence">It <span class="highlight">is</span> flying</div>
  </div>

  
  <div class="scene" id="scene-3">
    <div class="visual-box">🐦 🐦 🐦</div>
    <div class="tag-pill"><span class="clock-icon">⏰</span> 2+ now</div>
    <div class="sentence">They <span class="highlight">are</span> flying</div>
  </div>

  
  <div class="scene" id="scene-4">
    <div class="visual-box"><span class="past-faded">🐦</span> ⬅️ ⏳</div>
    <div class="tag-pill"><span class="clock-icon">⏳</span> 1 before</div>
    <div class="sentence">It <span class="highlight">was</span> flying</div>
  </div>
</div>

<script>
  function showTab(index) {
    const btns = document.querySelectorAll('.word-btn');
    const scenes = document.querySelectorAll('.scene');
    btns.forEach((b, i) => b.classList.toggle('active', i === index));
    scenes.forEach((s, i) => s.classList.toggle('active', i === index));
  }
</script>

</body>
</html>

Can you spot all five snap words hiding inside a real story?

Look at each sentence and see how fast your eyes find **the**, **and**, **is**, **was**, and **are**.

<!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>Reading High-Frequency Words</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

    .app-layout {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Word Bank */
    .word-bank {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
    }

    .word-tag {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 16px;
      font-weight: 700;
      color: #475569;
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .word-tag.active {
      background: #e0f2fe;
      border-color: #22b7ff;
      color: #0284c7;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.2);
    }

    /* Sentence Card */
    .sentence-card {
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
      padding: 24px 16px;
      min-height: 160px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      text-align: center;
    }

    .sentence-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 8px;
    }

    .token {
      font-size: 22px;
      font-weight: 600;
      padding: 6px 10px;
      border-radius: 8px;
      border: 2px solid transparent;
      background: transparent;
      color: #1e2945;
      cursor: pointer;
      transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
      line-height: 1.2;
    }

    .token.is-target {
      cursor: pointer;
    }

    .token.is-target:hover {
      background: #f1f5f9;
    }

    .token.found {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 3px 8px rgba(34, 183, 255, 0.35);
    }

    .token.miss {
      animation: nudge 0.3s ease;
      color: #94a3b8;
    }

    @keyframes nudge {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-3px); }
      75% { transform: translateX(3px); }
    }

    /* Counter / Feedback Status */
    .status-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0 4px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
    }

    .badge-count {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #f1f5f9;
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 13px;
    }

    .badge-count.complete {
      background: #dcfce7;
      color: #15803d;
    }

    /* Navigation Bar */
    .nav-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .nav-btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 16px;
      font-size: 15px;
      font-weight: 700;
      color: #334155;
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease;
    }

    .nav-btn:hover {
      background: #f8fafc;
      border-color: #cbd5e1;
    }

    .dots-group {
      display: flex;
      gap: 8px;
    }

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

    .dot.active {
      background: #22b7ff;
      transform: scale(1.25);
    }
  </style>
</head>
<body>

  <div class="app-layout">
    
    <div class="word-bank">
      <button class="word-tag" data-word="the">the</button>
      <button class="word-tag" data-word="and">and</button>
      <button class="word-tag" data-word="is">is</button>
      <button class="word-tag" data-word="was">was</button>
      <button class="word-tag" data-word="are">are</button>
    </div>

    
    <div class="sentence-card">
      <div id="sentenceContainer" class="sentence-container"></div>
    </div>

    
    <div class="status-row">
      <span id="promptText">Tap the sight words</span>
      <span id="foundBadge" class="badge-count">0 / 0</span>
    </div>

    
    <div class="nav-bar">
      <button id="prevBtn" class="nav-btn" aria-label="Previous">◀</button>
      <div class="dots-group" id="dotsGroup"></div>
      <button id="nextBtn" class="nav-btn" aria-label="Next">▶</button>
    </div>
  </div>

  <script>
    const TARGET_WORDS = ['the', 'and', 'is', 'was', 'are'];

    const sentences = [
      { text: "The cat is big and fast." },
      { text: "The dog was happy and wet." },
      { text: "The birds are in the sun." },
      { text: "He was glad and she is here." }
    ];

    let currentIndex = 0;
    let foundSet = new Set();
    let selectedFilterWord = null;

    const sentenceContainer = document.getElementById('sentenceContainer');
    const dotsGroup = document.getElementById('dotsGroup');
    const foundBadge = document.getElementById('foundBadge');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const wordTags = document.querySelectorAll('.word-tag');

    function cleanWord(str) {
      return str.toLowerCase().replace(/[^a-z]/g, '');
    }

    function initDots() {
      dotsGroup.innerHTML = '';
      sentences.forEach((_, idx) => {
        const dot = document.createElement('button');
        dot.className = 'dot' + (idx === currentIndex ? ' active' : '');
        dot.setAttribute('aria-label', `Go to sentence ${idx + 1}`);
        dot.addEventListener('click', () => {
          currentIndex = idx;
          loadSentence();
        });
        dotsGroup.appendChild(dot);
      });
    }

    function updateDots() {
      const dots = dotsGroup.querySelectorAll('.dot');
      dots.forEach((dot, idx) => {
        dot.classList.toggle('active', idx === currentIndex);
      });
    }

    function loadSentence() {
      foundSet.clear();
      sentenceContainer.innerHTML = '';
      updateDots();

      const currentSentence = sentences[currentIndex];
      const rawWords = currentSentence.text.split(' ');
      let totalTargetsInSentence = 0;

      rawWords.forEach((wordText, wordIndex) => {
        const clean = cleanWord(wordText);
        const isTarget = TARGET_WORDS.includes(clean);
        if (isTarget) totalTargetsInSentence++;

        const token = document.createElement('button');
        token.className = 'token' + (isTarget ? ' is-target' : '');
        token.textContent = wordText;
        token.dataset.clean = clean;
        token.dataset.index = wordIndex;

        token.addEventListener('click', () => {
          if (isTarget) {
            token.classList.add('found');
            foundSet.add(wordIndex);
            updateStatus(totalTargetsInSentence);
          } else {
            token.classList.add('miss');
            setTimeout(() => token.classList.remove('miss'), 350);
          }
        });

        // If a word tag filter is currently active, reveal it immediately
        if (selectedFilterWord && clean === selectedFilterWord) {
          token.classList.add('found');
          foundSet.add(wordIndex);
        }

        sentenceContainer.appendChild(token);
      });

      updateStatus(totalTargetsInSentence);
    }

    function updateStatus(total) {
      foundBadge.textContent = `${foundSet.size} / ${total} found`;
      if (foundSet.size === total && total > 0) {
        foundBadge.classList.add('complete');
        foundBadge.textContent = `✓ All ${total} found`;
      } else {
        foundBadge.classList.remove('complete');
      }
    }

    // Word Bank Toggles
    wordTags.forEach(tag => {
      tag.addEventListener('click', () => {
        const word = tag.dataset.word;
        if (selectedFilterWord === word) {
          selectedFilterWord = null;
          tag.classList.remove('active');
        } else {
          wordTags.forEach(t => t.classList.remove('active'));
          selectedFilterWord = word;
          tag.classList.add('active');
        }

        // Apply highlight to current tokens
        const tokens = sentenceContainer.querySelectorAll('.token');
        let totalTargets = 0;
        tokens.forEach(token => {
          const isTarget = TARGET_WORDS.includes(token.dataset.clean);
          if (isTarget) totalTargets++;
          if (selectedFilterWord) {
            if (token.dataset.clean === selectedFilterWord) {
              token.classList.add('found');
              foundSet.add(Number(token.dataset.index));
            }
          }
        });
        updateStatus(totalTargets);
      });
    });

    prevBtn.addEventListener('click', () => {
      currentIndex = (currentIndex - 1 + sentences.length) % sentences.length;
      loadSentence();
    });

    nextBtn.addEventListener('click', () => {
      currentIndex = (currentIndex + 1) % sentences.length;
      loadSentence();
    });

    initDots();
    loadSentence();
  </script>
</body>
</html>

Next time you open your favorite book, see how many times you can spot these five words on a single page!

Reading High-Frequency Words: the, and, is, was, are. Read and recognise a first set of common high-frequency words on sight.

Read Sight Words: a, and, are, as, has, his, is, the, to, was

A New Model for Teaching High-Frequency Words

Tricky Words and High Frequency Words in Early Reading

Under the Science of Reading framework aligned with Australian Curriculum v9 (AC9E1LY14), high-frequency words should not be taught through rote memorisation of whole word shapes (flashcards without sound analysis). Instead, teachers use the 'Heart Word' method: explicit phoneme-grapheme mapping where students count phonemes, match letters to regular phonemes, and explicitly highlight the irregular letter-sound correspondences ('heart parts'). Immediate application in decodable sentences and paired reading builds rapid retrieval and fluency.

Reading High-Frequency Words: the, and, is, was, are

The and And