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 reading a story that says: "The frog drove a school bus to the moon." Wait a second... does that sound right?

Great readers practice **comprehension monitoring**. When something feels off, **the metacognitive alarm** rings in their brain to alert them that meaning has broken down.

This inner conversation constantly checks three big questions: *Does it make sense?*, *Does it sound right in English?*, and *Does it match the letters I see?*

This inner conversation is called **Comprehension Monitoring**. It works like **The Metacognitive Alarm** in your brain, buzzing whenever a word does not sound right or make sense.

Great readers constantly run a **3-Way Cross-Check**. They ask: Does it match the letters I see (visual)? Does it fit proper **Sentence Structure** and sound right in English (syntax)? And does it match what is happening in the story (meaning)?

<!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>Comprehension Monitoring</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;
    }
    .flow-wrapper {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    /* Mode Selector */
    .tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .tab-btn {
      appearance: none;
      border: 2px solid transparent;
      background: #ffffff;
      padding: 10px 12px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      color: #6b7280;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      transition: all 0.25s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .tab-btn.active-ok {
      background: #ecfdf5;
      color: #065f46;
      box-shadow: 0 0 0 2px #10b981;
    }
    .tab-btn.active-alarm {
      background: #fef2f2;
      color: #991b1b;
      box-shadow: 0 0 0 2px #ef4444;
    }
    /* Reading display card */
    .display-card {
      background: #ffffff;
      border-radius: 16px;
      padding: 18px 16px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      text-align: center;
    }
    .sentence-box {
      font-size: 18px;
      font-weight: 700;
      padding: 8px 16px;
      background: #f1f5f9;
      border-radius: 8px;
      letter-spacing: -0.2px;
    }
    .highlight-err {
      color: #dc2626;
      text-decoration: underline wavy #ef4444 2px;
    }
    /* Brain Monitor */
    .monitor-area {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      padding: 8px 0;
    }
    .brain-node {
      width: 68px;
      height: 68px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      transition: all 0.3s ease;
      background: #f8fafc;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }
    .status-badge {
      font-size: 14px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.25s ease;
    }
    /* Action Outcome */
    .action-box {
      width: 100%;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 700;
      transition: all 0.25s ease;
    }
    /* Dynamic theme states */
    .state-ok .brain-node {
      background: #d1fae5;
      box-shadow: 0 0 0 4px #a7f3d0;
    }
    .state-ok .status-badge {
      background: #10b981;
      color: #ffffff;
    }
    .state-ok .action-box {
      background: #ecfdf5;
      color: #047857;
      border: 1px solid #a7f3d0;
    }
    .state-alarm .brain-node {
      background: #fee2e2;
      box-shadow: 0 0 0 4px #fecaca;
    }
    .state-alarm .status-badge {
      background: #ef4444;
      color: #ffffff;
    }
    .state-alarm .action-box {
      background: #fef2f2;
      color: #b91c1c;
      border: 1px solid #fecaca;
    }
  </style>
</head>
<body>
  <div class="flow-wrapper">
    
    <div class="tabs">
      <button class="tab-btn active-ok" id="btn-ok" type="button">
        <span>✓</span> Normal
      </button>
      <button class="tab-btn" id="btn-alarm" type="button">
        <span>🚨</span> Confusing
      </button>
    </div>

    
    <div class="display-card state-ok" id="display-card">
      <div class="sentence-box" id="sentence-text">
        The dog barked.
      </div>

      <div class="monitor-area">
        <div class="brain-node" id="brain-icon">🧠</div>
        <div class="status-badge" id="status-badge">
          <span>✓</span> Makes Sense
        </div>
      </div>

      <div class="action-box" id="action-text">
        <span>▶</span> Keep Reading
      </div>
    </div>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const btnOk = $('#btn-ok');
    const btnAlarm = $('#btn-alarm');
    const displayCard = $('#display-card');
    const sentenceText = $('#sentence-text');
    const brainIcon = $('#brain-icon');
    const statusBadge = $('#status-badge');
    const actionText = $('#action-text');

    function showMode(mode) {
      if (mode === 'ok') {
        btnOk.className = 'tab-btn active-ok';
        btnAlarm.className = 'tab-btn';
        displayCard.className = 'display-card state-ok';
        sentenceText.innerHTML = 'The dog barked.';
        brainIcon.textContent = '🧠';
        statusBadge.innerHTML = '<span>✓</span> Makes Sense';
        actionText.innerHTML = '<span>▶</span> Keep Reading';
      } else {
        btnOk.className = 'tab-btn';
        btnAlarm.className = 'tab-btn active-alarm';
        displayCard.className = 'display-card state-alarm';
        sentenceText.innerHTML = 'The dog barked <span class="highlight-err">milk</span>.';
        brainIcon.textContent = '🚨';
        statusBadge.innerHTML = '<span>⚠️</span> Broken';
        actionText.innerHTML = '<span>🔄</span> Stop & Reread';
      }
    }

    onTap(btnOk, () => showMode('ok'));
    onTap(btnAlarm, () => showMode('alarm'));
  </script>
</body>
</html>

When a sentence sounds confusing or silly by accident, your brain gives you a little tap on the shoulder to **stop reading**.

So what should you do the moment something doesn't make sense?

Readers do a **3-way cross-check** to make sure three clues all agree: letters and sounds, **sentence structure** (grammar), and story meaning.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="aspect-ratio" content="1:1">
<title>3-Way Cross-Check</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: transparent;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    padding: 12px;
    user-select: none;
  }

  .diagram-area {
    width: 100%;
    max-width: 420px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
  }

  .circle-shape {
    transition: fill-opacity 0.35s ease, stroke 0.35s ease, stroke-width 0.35s ease;
    cursor: pointer;
  }

  .circle-label {
    font-weight: 700;
    font-size: 13px;
    pointer-events: none;
    text-anchor: middle;
    transition: fill 0.3s ease;
  }

  .circle-sub {
    font-size: 11px;
    font-weight: 500;
    pointer-events: none;
    text-anchor: middle;
    fill: #6b7280;
  }

  .center-check {
    font-size: 28px;
    font-weight: 900;
    fill: #10b981;
    text-anchor: middle;
    dominant-baseline: central;
    transition: transform 0.35s ease, opacity 0.35s ease;
    transform-origin: 200px 185px;
  }

  .controls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    margin-top: 8px;
  }

  .btn-check {
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .btn-check:hover {
    border-color: #cbd5e1;
  }

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

  /* Active circle styles */
  .c-visual.active { fill: #22b7ff; fill-opacity: 0.32; stroke: #0284c7; stroke-width: 3px; }
  .c-visual:not(.active) { fill: #22b7ff; fill-opacity: 0.12; stroke: #38bdf8; stroke-width: 1.5px; }

  .c-syntax.active { fill: #f59e0b; fill-opacity: 0.32; stroke: #d97706; stroke-width: 3px; }
  .c-syntax:not(.active) { fill: #f59e0b; fill-opacity: 0.12; stroke: #fbbf24; stroke-width: 1.5px; }

  .c-meaning.active { fill: #10b981; fill-opacity: 0.32; stroke: #059669; stroke-width: 3px; }
  .c-meaning:not(.active) { fill: #10b981; fill-opacity: 0.12; stroke: #34d399; stroke-width: 1.5px; }

  .pulse-center {
    animation: gentlePulse 2s infinite ease-in-out;
  }

  @keyframes gentlePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
  }
</style>
</head>
<body>

<div class="diagram-area">
  <svg viewBox="0 0 400 330" aria-label="3-Way Cross-Check Diagram">
    
    <circle id="circVisual" class="circle-shape c-visual active" cx="200" cy="120" r="82" />

    
    <circle id="circSyntax" class="circle-shape c-syntax active" cx="145" cy="210" r="82" />

    
    <circle id="circMeaning" class="circle-shape c-meaning active" cx="255" cy="210" r="82" />

    
    <circle id="centerDisc" cx="200" cy="185" r="26" fill="#ffffff" stroke="#10b981" stroke-width="2.5" />
    <text id="checkMark" class="center-check pulse-center" x="200" y="186">✓</text>

    
    <g id="lblVisual" style="cursor:pointer;">
      <text class="circle-label" x="200" y="80" fill="#0369a1">LOOK RIGHT?</text>
      <text class="circle-sub" x="200" y="96">Letters &amp; Sounds</text>
    </g>

    
    <g id="lblSyntax" style="cursor:pointer;">
      <text class="circle-label" x="110" y="240" fill="#b45309">SOUND RIGHT?</text>
      <text class="circle-sub" x="110" y="256">Grammar</text>
    </g>

    
    <g id="lblMeaning" style="cursor:pointer;">
      <text class="circle-label" x="290" y="240" fill="#047857">MAKE SENSE?</text>
      <text class="circle-sub" x="290" y="256">Story Meaning</text>
    </g>
  </svg>
</div>

<div class="controls">
  <button class="btn-check" id="btn0" onclick="setMode(0)">1. Look right?</button>
  <button class="btn-check" id="btn1" onclick="setMode(1)">2. Sound right?</button>
  <button class="btn-check" id="btn2" onclick="setMode(2)">3. Make sense?</button>
  <button class="btn-check active" id="btn3" onclick="setMode(3)">All 3 Agree ✓</button>
</div>

<script>
  const cVis = document.getElementById('circVisual');
  const cSyn = document.getElementById('circSyntax');
  const cMean = document.getElementById('circMeaning');
  const cDisc = document.getElementById('centerDisc');
  const chk = document.getElementById('checkMark');
  const buttons = [
    document.getElementById('btn0'),
    document.getElementById('btn1'),
    document.getElementById('btn2'),
    document.getElementById('btn3')
  ];

  let currentMode = 3;
  let autoTimer = null;

  function setMode(mode) {
    currentMode = mode;
    buttons.forEach((b, i) => b.classList.toggle('active', i === mode));

    if (mode === 0) {
      cVis.className.baseVal = 'circle-shape c-visual active';
      cSyn.className.baseVal = 'circle-shape c-syntax';
      cMean.className.baseVal = 'circle-shape c-meaning';
      cDisc.setAttribute('stroke', '#cbd5e1');
      chk.style.opacity = '0.3';
      chk.classList.remove('pulse-center');
    } else if (mode === 1) {
      cVis.className.baseVal = 'circle-shape c-visual';
      cSyn.className.baseVal = 'circle-shape c-syntax active';
      cMean.className.baseVal = 'circle-shape c-meaning';
      cDisc.setAttribute('stroke', '#cbd5e1');
      chk.style.opacity = '0.3';
      chk.classList.remove('pulse-center');
    } else if (mode === 2) {
      cVis.className.baseVal = 'circle-shape c-visual';
      cSyn.className.baseVal = 'circle-shape c-syntax';
      cMean.className.baseVal = 'circle-shape c-meaning active';
      cDisc.setAttribute('stroke', '#cbd5e1');
      chk.style.opacity = '0.3';
      chk.classList.remove('pulse-center');
    } else {
      cVis.className.baseVal = 'circle-shape c-visual active';
      cSyn.className.baseVal = 'circle-shape c-syntax active';
      cMean.className.baseVal = 'circle-shape c-meaning active';
      cDisc.setAttribute('stroke', '#10b981');
      chk.style.opacity = '1';
      chk.classList.add('pulse-center');
    }
  }

  // Interactive circle clicks
  document.getElementById('circVisual').onclick = () => setMode(0);
  document.getElementById('lblVisual').onclick = () => setMode(0);
  document.getElementById('circSyntax').onclick = () => setMode(1);
  document.getElementById('lblSyntax').onclick = () => setMode(1);
  document.getElementById('circMeaning').onclick = () => setMode(2);
  document.getElementById('lblMeaning').onclick = () => setMode(2);
  document.getElementById('centerDisc').onclick = () => setMode(3);
  document.getElementById('checkMark').onclick = () => setMode(3);

  // Initialize
  setMode(3);
</script>

</body>
</html>

When you hit a bump in your reading, you do not just keep going. You use three easy steps to **fix up** the mistake.

<!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>Fix-Up Steps</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; }
    
    body {
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
      gap: 16px;
    }

    .stepper-nav {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 440px;
    }

    .nav-btn {
      flex: 1;
      padding: 8px 4px;
      font-size: 14px;
      font-weight: 700;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      border-radius: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.25s ease;
    }

    .nav-btn.active {
      border-color: #22b7ff;
      background: #e0f2fe;
      color: #0369a1;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.2);
    }

    .visual-stage {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border-radius: 16px;
      padding: 24px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      min-height: 240px;
      position: relative;
      overflow: hidden;
    }

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

    .step-display.active {
      opacity: 1;
      pointer-events: auto;
    }

    .icon-badge {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
    }

    .badge-stop { background: #fee2e2; border: 3px solid #ef4444; }
    .badge-reread { background: #e0f2fe; border: 3px solid #22b7ff; }
    .badge-check { background: #dcfce7; border: 3px solid #22c55e; }

    .step-title {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: 0.5px;
    }

    .color-stop { color: #dc2626; }
    .color-reread { color: #0284c7; }
    .color-check { color: #16a34a; }

    .action-diagram {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 600;
      background: #f8fafc;
      padding: 10px 16px;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
    }

    .flow-indicator {
      display: flex;
      gap: 6px;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      border: none;
      padding: 0;
      transition: all 0.2s ease;
    }

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

  
  <div class="stepper-nav">
    <button class="nav-btn active" data-step="0">1. STOP</button>
    <button class="nav-btn" data-step="1">2. REREAD</button>
    <button class="nav-btn" data-step="2">3. CHECK</button>
  </div>

  
  <div class="visual-stage">
    
    
    <div class="step-display active" id="step-0">
      <div class="icon-badge badge-stop">🛑</div>
      <div class="step-title color-stop">1. STOP</div>
      <div class="action-diagram">
        <span>📖 Reading</span>
        <span>→</span>
        <span>❓ Bump!</span>
      </div>
    </div>

    
    <div class="step-display" id="step-1">
      <div class="icon-badge badge-reread">↩️</div>
      <div class="step-title color-reread">2. REREAD</div>
      <div class="action-diagram">
        <span>Start</span>
        <span>🔁</span>
        <span>Slowly</span>
      </div>
    </div>

    
    <div class="step-display" id="step-2">
      <div class="icon-badge badge-check">💡</div>
      <div class="step-title color-check">3. CHECK</div>
      <div class="action-diagram">
        <span>Makes Sense?</span>
        <span>✅</span>
      </div>
    </div>

  </div>

  
  <div class="flow-indicator">
    <button class="dot active" data-step="0" aria-label="Step 1"></button>
    <button class="dot" data-step="1" aria-label="Step 2"></button>
    <button class="dot" data-step="2" aria-label="Step 3"></button>
  </div>

  <script>
    let currentStep = 0;
    const totalSteps = 3;
    let timer = null;

    const navBtns = document.querySelectorAll('.nav-btn');
    const displays = document.querySelectorAll('.step-display');
    const dots = document.querySelectorAll('.dot');

    function setStep(index) {
      currentStep = index;
      
      navBtns.forEach((btn, i) => {
        btn.classList.toggle('active', i === currentStep);
      });

      displays.forEach((disp, i) => {
        disp.classList.toggle('active', i === currentStep);
      });

      dots.forEach((dot, i) => {
        dot.classList.toggle('active', i === currentStep);
      });
    }

    function nextStep() {
      setStep((currentStep + 1) % totalSteps);
    }

    function startAutoPlay() {
      stopAutoPlay();
      timer = setInterval(nextStep, 3500);
    }

    function stopAutoPlay() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    }

    navBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        const step = parseInt(btn.dataset.step, 10);
        setStep(step);
        stopAutoPlay();
      });
    });

    dots.forEach(dot => {
      dot.addEventListener('click', () => {
        const step = parseInt(dot.dataset.step, 10);
        setStep(step);
        stopAutoPlay();
      });
    });

    // Start auto loop
    startAutoPlay();
  </script>
</body>
</html>

First, **STOP** right where you are. Next, go back to the start of the sentence and **reread** the words slowly.

Finally, look closely at all the letters in the tricky word and check the picture clues to fix it.

Let's see how this works with a real sentence that went wrong!

Let's read this sentence together: "The **house** drank cold water from the pond."

<!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>Does It Make Sense?</title>
  <script src="https://cdn.classace.io/vendor/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: center;
      min-height: 100%;
    }

    .main-wrap {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .toggle-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .toggle-btn {
      appearance: none;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      padding: 8px 12px;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.25s ease;
    }

    .toggle-btn.active.bad {
      background: #fef2f2;
      border-color: #ef4444;
      color: #b91c1c;
      box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
    }

    .toggle-btn.active.good {
      background: #ecfdf5;
      border-color: #10b981;
      color: #047857;
      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
    }

    .sentence-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 16px;
      text-align: center;
      font-size: 19px;
      font-weight: 500;
      color: #334155;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .word-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 6px;
      font-weight: 700;
      transition: background-color 0.25s ease, color 0.25s ease;
    }

    .word-badge.bad {
      background: #fee2e2;
      color: #dc2626;
    }

    .word-badge.good {
      background: #d1fae5;
      color: #059669;
    }

    .visual-stage {
      position: relative;
      height: 180px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }

    .scene-pane {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .scene-pane.active {
      opacity: 1;
      pointer-events: auto;
    }

    .scene-art {
      font-size: 52px;
      line-height: 1;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .status-badge {
      font-size: 14px;
      font-weight: 700;
      padding: 5px 12px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 5px;
    }

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

    .status-badge.good {
      background: #d1fae5;
      color: #047857;
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    <div class="toggle-row">
      <button class="toggle-btn bad active" id="btn0" onclick="setMode(0)">
        <span>❌</span> house
      </button>
      <button class="toggle-btn good" id="btn1" onclick="setMode(1)">
        <span>✅</span> horse
      </button>
    </div>

    <div class="sentence-card">
      The <span class="word-badge bad" id="activeWord">house</span> drank water.
    </div>

    <div class="visual-stage">
      
      <div class="scene-pane active" id="pane0">
        <div class="scene-art">
          <span>🏠</span>
          <span style="font-size:32px; opacity:0.6;">🥤</span>
          <span style="font-size:28px;">❓</span>
        </div>
        <div class="status-badge bad">
          ❌ No sense
        </div>
      </div>

      
      <div class="scene-pane" id="pane1">
        <div class="scene-art">
          <span>🐴</span>
          <span style="font-size:32px; opacity:0.8;">💧</span>
          <span style="font-size:28px;">✨</span>
        </div>
        <div class="status-badge good">
          ✅ Makes sense
        </div>
      </div>
    </div>
  </div>

  <script>
    let current = 0;
    let autoTimer = null;

    function setMode(idx, manual = true) {
      if (manual && autoTimer) {
        clearInterval(autoTimer);
        autoTimer = null;
      }
      current = idx;

      const isBad = current === 0;

      // Update buttons
      const btn0 = document.getElementById('btn0');
      const btn1 = document.getElementById('btn1');
      btn0.classList.toggle('active', isBad);
      btn1.classList.toggle('active', !isBad);

      // Update word badge
      const wordBadge = document.getElementById('activeWord');
      wordBadge.textContent = isBad ? 'house' : 'horse';
      wordBadge.className = 'word-badge ' + (isBad ? 'bad' : 'good');

      // Update visual scenes
      document.getElementById('pane0').classList.toggle('active', isBad);
      document.getElementById('pane1').classList.toggle('active', !isBad);
    }

    // Gentle auto-cycle every 3.5s until interacted with
    autoTimer = setInterval(() => {
      setMode(current === 0 ? 1 : 0, false);
    }, 3500);
  </script>
</body>
</html>

A house cannot drink water! That tells us we made a reading mistake on the word **house**.

When we look closely at the letters, we see **h-o-r-s-e**. The word is **horse**!

Now reread the whole sentence: "The **horse** drank cold water from the pond." That makes total sense!

What happens if you read fast and forget to check?

**Building Fluency** means scooping words together into smooth, meaningful phrases instead of reading in a choppy, robotic word-by-word voice.

When you read in smooth phrases, your working memory can easily hold onto the whole sentence's meaning so you never lose track of the story.

Many readers think good reading means zooming through pages as fast as a race car. But zooming past mistakes means you miss the whole story!

<!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: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      gap: 16px;
    }

    .nav-bar {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 440px;
    }

    .step-btn {
      flex: 1;
      padding: 10px 6px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      cursor: pointer;
      text-align: center;
      transition: all 0.25s ease;
    }

    .step-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.25);
    }

    .stage-container {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 240px;
      overflow: hidden;
    }

    .step-card {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 20px 16px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .step-card.active {
      opacity: 1;
      pointer-events: auto;
    }

    .sentence-box {
      font-size: 22px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 10px 16px;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #edf2f7;
    }

    .word-highlight {
      padding: 2px 8px;
      border-radius: 6px;
      transition: all 0.25s ease;
    }

    .word-error {
      background: #fee2e2;
      color: #dc2626;
      border-bottom: 2px dashed #dc2626;
    }

    .word-fixed {
      background: #dcfce7;
      color: #16a34a;
      border-bottom: 2px solid #16a34a;
    }

    .visual-scene {
      font-size: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      height: 70px;
    }

    .badge {
      font-size: 14px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .badge-warn { background: #fef3c7; color: #b45309; }
    .badge-stop { background: #fee2e2; color: #b91c1c; }
    .badge-success { background: #dcfce7; color: #15803d; }
  </style>
</head>
<body>

  <div class="nav-bar">
    <button class="step-btn active" id="btn-0">1. Read</button>
    <button class="step-btn" id="btn-1">2. Check</button>
    <button class="step-btn" id="btn-2">3. Fix</button>
  </div>

  <div class="stage-container">
    
    <div class="step-card active" id="card-0">
      <div class="sentence-box">
        The cat <span class="word-highlight word-error">flew</span> up
      </div>
      <div class="visual-scene">
        🐱 💨 🏎️
      </div>
      <div class="badge badge-warn">
        Zooming Past
      </div>
    </div>

    
    <div class="step-card" id="card-1">
      <div class="sentence-box">
        Does it make sense?
      </div>
      <div class="visual-scene">
        🛑 🐱 ✈️ ❓
      </div>
      <div class="badge badge-stop">
        No! Stop & Think
      </div>
    </div>

    
    <div class="step-card" id="card-2">
      <div class="sentence-box">
        The cat <span class="word-highlight word-fixed">ran</span> up
      </div>
      <div class="visual-scene">
        🐱 🏃 🌳 ✨
      </div>
      <div class="badge badge-success">
        Makes Sense! ✅
      </div>
    </div>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const btns = [document.getElementById('btn-0'), document.getElementById('btn-1'), document.getElementById('btn-2')];
    const cards = [document.getElementById('card-0'), document.getElementById('card-1'), document.getElementById('card-2')];
    let currentIndex = 0;
    let timer = null;

    function showStep(index) {
      currentIndex = index;
      btns.forEach((b, i) => b.classList.toggle('active', i === index));
      cards.forEach((c, i) => c.classList.toggle('active', i === index));
    }

    btns.forEach((btn, i) => {
      btn.addEventListener('click', () => {
        clearInterval(timer);
        showStep(i);
        startAutoCycle();
      });
    });

    function startAutoCycle() {
      timer = setInterval(() => {
        showStep((currentIndex + 1) % 3);
      }, 3500);
    }

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

Stopping to fix a word does not mean you are stuck — it means you are being a smart **reading detective**.

Next time you read your favorite book, listen to your inner coach on every page and ask: "Does it make sense?"

**Building fluency** means scooping words together into smooth, meaningful phrases rather than reading in a choppy, word-by-word robotic voice.

Phrasing protects your working memory so your brain can easily hold the meaning of the entire sentence from start to finish.

Does It Make Sense? Monitoring Meaning While Reading. Stop and check whether what you are reading makes sense, and fix up mistakes.

Seven Strategies to Teach Students Text Comprehension: Comprehension Monitoring

IXL First Grade Reading Strategies: Use Context to Identify the Meaning of a Word & Monitor Meaning

BBC Bitesize Primary English (KS1): Understanding What You Read and Fix-Up Strategies

Teaching Years 1-2 students to monitor meaning requires explicit 'Think-Aloud' modeling (gradual release: I do, We do, You do). Teachers should intentionally make authentic reading errors during shared reading (e.g. misreading 'barn' as 'burn') and vocalize their internal cognitive alarm: 'Hold on, that didn't sound right! Let me stop and fix it up.' Normalizing self-correction as the superpower of independent readers prevents frustration and cultivates active, reflective literacy habits aligned with Australian Curriculum v9 (AC9E1LY04 & AC9E1LY05).

Does It Make Sense? Monitoring Meaning While Reading

The Fix-Up Action Toolkit

The 3-Way Cross-Check