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

Have you ever read an entire page in a book, reached the bottom, and thought: *Wait, what did I just read?*

That happens to every reader, but strong readers have a superpower called **monitoring** to catch it right away.

How does your brain know when something goes wrong?

When you read, your brain builds a picture or a movie of the story.

**Monitoring** means checking in on your understanding, like a traffic light inside your head.

<!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 Monitor Traffic Light</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

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

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

    /* Signal Selector Tabs */
    .signals-bar {
      display: flex;
      width: 100%;
      gap: 8px;
      justify-content: center;
    }

    .signal-btn {
      flex: 1;
      border: 2px solid transparent;
      background: #ffffff;
      padding: 8px 12px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: #6b7280;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      transition: all 0.25s ease;
    }

    .signal-btn[data-state="green"].active {
      color: #15803d;
      border-color: #22c55e;
      background: #f0fdf4;
      box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
    }

    .signal-btn[data-state="yellow"].active {
      color: #b45309;
      border-color: #eab308;
      background: #fefce8;
      box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.2);
    }

    .signal-btn[data-state="red"].active {
      color: #b91c1c;
      border-color: #ef4444;
      background: #fef2f2;
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
    }

    /* Display Area */
    .display-card {
      width: 100%;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      border: 1px solid #e5e7eb;
    }

    .visual-stage {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      width: 100%;
    }

    /* Traffic Light Housing */
    .traffic-light {
      background: #1f2937;
      padding: 10px;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
    }

    .lamp {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #374151;
      transition: all 0.3s ease;
      cursor: pointer;
      position: relative;
    }

    .lamp.red.on {
      background: #ef4444;
      box-shadow: 0 0 16px #ef4444;
    }

    .lamp.yellow.on {
      background: #eab308;
      box-shadow: 0 0 16px #eab308;
    }

    .lamp.green.on {
      background: #22c55e;
      box-shadow: 0 0 16px #22c55e;
    }

    /* Reader State Avatar */
    .avatar-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 110px;
      height: 110px;
      background: #f8fafc;
      border-radius: 50%;
      border: 3px solid #e2e8f0;
      position: relative;
      transition: border-color 0.3s ease;
    }

    .avatar-icon {
      font-size: 44px;
      line-height: 1;
      transition: transform 0.2s ease;
    }

    .status-badge {
      position: absolute;
      bottom: -6px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 2px 8px;
      border-radius: 10px;
      letter-spacing: 0.5px;
      color: #fff;
    }

    /* Action Outcome Card */
    .action-box {
      width: 100%;
      border-radius: 12px;
      padding: 12px 16px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-weight: 600;
      font-size: 15px;
      transition: all 0.3s ease;
    }

    .action-symbol {
      font-size: 18px;
    }

    /* State-driven theme colors */
    [data-active="green"] .avatar-box { border-color: #86efac; }
    [data-active="green"] .status-badge { background: #22c55e; }
    [data-active="green"] .action-box { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

    [data-active="yellow"] .avatar-box { border-color: #fde047; }
    [data-active="yellow"] .status-badge { background: #eab308; }
    [data-active="yellow"] .action-box { background: #fefce8; color: #854d0e; border: 1px solid #fef08a; }

    [data-active="red"] .avatar-box { border-color: #fca5a5; }
    [data-active="red"] .status-badge { background: #ef4444; }
    [data-active="red"] .action-box { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .nav-btn {
      background: #ffffff;
      border: 1px solid #d1d5db;
      color: #374151;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: background-color 0.15s ease;
    }

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

  <div class="monitor-container" id="monitorApp" data-active="green">
    
    <div class="signals-bar">
      <button class="signal-btn active" data-state="green">🟢 Clear</button>
      <button class="signal-btn" data-state="yellow">🟡 Unsure</button>
      <button class="signal-btn" data-state="red">🔴 Stuck</button>
    </div>

    
    <div class="display-card">
      <div class="visual-stage">
        
        <div class="traffic-light">
          <div class="lamp red" data-state="red"></div>
          <div class="lamp yellow" data-state="yellow"></div>
          <div class="lamp green on" data-state="green"></div>
        </div>

        
        <div class="avatar-box">
          <div class="avatar-icon" id="avatarEmoji">📖</div>
          <span class="status-badge" id="badgeText">I get it</span>
        </div>
      </div>

      
      <div class="action-box" id="actionPrompt">
        <span class="action-symbol" id="actionSymbol">▶</span>
        <span id="actionText">Keep reading</span>
      </div>
    </div>

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

  <script>
    const states = [
      {
        id: 'green',
        tabLabel: '🟢 Clear',
        emoji: '📖',
        badge: 'I get it',
        symbol: '▶',
        action: 'Keep reading'
      },
      {
        id: 'yellow',
        tabLabel: '🟡 Unsure',
        emoji: '🤔',
        badge: 'Wait...',
        symbol: '⏸',
        action: 'Slow down & check'
      },
      {
        id: 'red',
        tabLabel: '🔴 Stuck',
        emoji: '🛑',
        badge: 'Lost',
        symbol: '↺',
        action: 'Stop & reread'
      }
    ];

    let currentIndex = 0;
    const app = document.getElementById('monitorApp');
    const tabBtns = document.querySelectorAll('.signal-btn');
    const lamps = document.querySelectorAll('.lamp');
    const avatarEmoji = document.getElementById('avatarEmoji');
    const badgeText = document.getElementById('badgeText');
    const actionSymbol = document.getElementById('actionSymbol');
    const actionText = document.getElementById('actionText');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    function setState(index) {
      currentIndex = (index + states.length) % states.length;
      const current = states[currentIndex];

      app.setAttribute('data-active', current.id);

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

      lamps.forEach(lamp => {
        lamp.classList.toggle('on', lamp.getAttribute('data-state') === current.id);
      });

      avatarEmoji.textContent = current.emoji;
      badgeText.textContent = current.badge;
      actionSymbol.textContent = current.symbol;
      actionText.textContent = current.action;
    }

    tabBtns.forEach((btn, idx) => {
      btn.addEventListener('click', () => setState(idx));
    });

    lamps.forEach(lamp => {
      lamp.addEventListener('click', () => {
        const stateId = lamp.getAttribute('data-state');
        const targetIndex = states.findIndex(s => s.id === stateId);
        if (targetIndex !== -1) setState(targetIndex);
      });
    });

    prevBtn.addEventListener('click', () => setState(currentIndex - 1));
    nextBtn.addEventListener('click', () => setState(currentIndex + 1));
  </script>
</body>
</html>

What causes that inner light to flash red?

A **meaning breakdown** happens when the words on the page stop making sense in your mind.

Read this sentence carefully: *Leo zipped up his thick winter jacket and ran outside into the scorching desert sand.*

<!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>Monitoring Reading: Clash Detection</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: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    min-height: 100vh;
  }

  .diagram-root {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* Interactive Sentence Box */
  .sentence-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 18px 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e6e6e6;
    line-height: 2;
    font-size: 16px;
    text-align: center;
    position: relative;
    user-select: none;
  }

  .token {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 6px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
  }

  .token.cold {
    background: #e0f2fe;
    color: #0369a1;
    border-color: #bae6fd;
    font-weight: 600;
  }

  .token.hot {
    background: #ffedd5;
    color: #c2410c;
    border-color: #fed7aa;
    font-weight: 600;
  }

  /* Clash & Brake Area */
  .monitor-display {
    position: relative;
    height: 140px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e6e6e6;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .stage-view {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(8px);
  }

  .stage-view.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Stage 1: Smooth reading flow */
  .flow-track {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 28px;
  }
  .flow-pill {
    background: #f0fdf4;
    color: #15803d;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #bbf7d0;
  }

  /* Stage 2: Clash */
  .concept-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    border-radius: 10px;
    min-width: 90px;
  }
  .concept-box.blue {
    background: #e0f2fe;
    border: 1.5px solid #38bdf8;
    color: #0369a1;
  }
  .concept-box.orange {
    background: #ffedd5;
    border: 1.5px solid #fb923c;
    color: #c2410c;
  }
  .concept-icon { font-size: 26px; line-height: 1; }
  .concept-label { font-size: 12px; font-weight: 700; }

  .clash-symbol {
    font-size: 24px;
    color: #ef4444;
    font-weight: 900;
    animation: pulse 1.2s infinite ease-in-out;
  }

  @keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
  }

  /* Stage 3: Hit the brakes */
  .brake-sign {
    background: #fef2f2;
    border: 2px solid #ef4444;
    color: #b91c1c;
    padding: 12px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
  }
  .brake-icon { font-size: 30px; line-height: 1; }

  /* Controls */
  .stepper-nav {
    display: flex;
    gap: 8px;
    justify-content: center;
  }

  .step-btn {
    flex: 1;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    padding: 10px 8px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .step-btn:hover {
    background: #f8fafc;
    color: #1e2945;
  }

  .step-btn.active {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1d4ed8;
    box-shadow: 0 0 0 1px #3b82f6;
  }
</style>
</head>
<body>

<div class="diagram-root">

  
  <div class="sentence-card">
    <span>Leo zipped up his </span>
    <span class="token cold" id="tokenCoat">🧥 winter jacket</span>
    <span> and ran into the </span>
    <span class="token hot" id="tokenDesert">🏜️ scorching desert</span>.
  </div>

  
  <div class="monitor-display">
    
    
    <div class="stage-view active" id="stage1">
      <div class="flow-track">
        <span style="font-size: 22px;">👁️</span>
        <div class="flow-pill">Reading smoothly...</div>
        <span style="font-size: 20px; color:#22c55e;">→</span>
      </div>
    </div>

    
    <div class="stage-view" id="stage2">
      <div class="concept-box blue">
        <span class="concept-icon">🧥</span>
        <span class="concept-label">Cold Gear</span>
      </div>
      <div class="clash-symbol">⚡ ⨉</div>
      <div class="concept-box orange">
        <span class="concept-icon">☀️</span>
        <span class="concept-label">Hot Desert</span>
      </div>
    </div>

    
    <div class="stage-view" id="stage3">
      <div class="brake-sign">
        <span class="brake-icon">🛑</span>
        <span>Hit the Brakes!</span>
      </div>
    </div>

  </div>

  
  <div class="stepper-nav">
    <button class="step-btn active" data-step="0">1. Read</button>
    <button class="step-btn" data-step="1">2. Clash</button>
    <button class="step-btn" data-step="2">3. Stop</button>
  </div>

</div>

<script>
  const stages = [
    document.getElementById('stage1'),
    document.getElementById('stage2'),
    document.getElementById('stage3')
  ];
  const buttons = document.querySelectorAll('.step-btn');
  const tokenCoat = document.getElementById('tokenCoat');
  const tokenDesert = document.getElementById('tokenDesert');

  let currentStep = 0;
  let timer = null;

  function showStep(index) {
    currentStep = index;

    // Update views
    stages.forEach((stage, i) => {
      stage.classList.toggle('active', i === index);
    });

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

    // Highlight sentence tokens
    if (index === 0) {
      tokenCoat.style.boxShadow = 'none';
      tokenDesert.style.boxShadow = 'none';
    } else if (index === 1) {
      tokenCoat.style.boxShadow = '0 0 0 2px #0284c7';
      tokenDesert.style.boxShadow = '0 0 0 2px #ea580c';
    } else {
      tokenCoat.style.boxShadow = '0 0 0 2px #ef4444';
      tokenDesert.style.boxShadow = '0 0 0 2px #ef4444';
    }
  }

  function nextStep() {
    const next = (currentStep + 1) % stages.length;
    showStep(next);
  }

  function startAutoCycle() {
    stopAutoCycle();
    timer = setInterval(nextStep, 3500);
  }

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

  // Click handlers
  buttons.forEach((btn, idx) => {
    btn.addEventListener('click', () => {
      showStep(idx);
      startAutoCycle();
    });
  });

  // Start initial auto cycle
  showStep(0);
  startAutoCycle();
</script>
</body>
</html>

Your brain hits the brakes because a winter coat does not fit in a scorching hot desert.

You might also hit a red light when you see a **mystery word** you have never heard before.

So what should you do the exact second your mental movie stops?

The golden rule of monitoring is: **stop immediately** when meaning breaks down.

<!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>Monitoring: Stop Immediately</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

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

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

    /* Toggle buttons */
    .controls {
      display: flex;
      gap: 8px;
      background: #e5e7eb;
      padding: 4px;
      border-radius: 12px;
    }

    .tab-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 10px 12px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 8px;
      cursor: pointer;
      color: #4b5563;
      transition: all 0.25s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

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

    .tab-btn.active.correct {
      color: #059669;
    }

    .tab-btn.active.incorrect {
      color: #dc2626;
    }

    /* Track Box */
    .track-card {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 14px;
      padding: 20px 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    /* Path visualization */
    .timeline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      padding: 0 8px;
    }

    .timeline::before {
      content: '';
      position: absolute;
      left: 24px;
      right: 24px;
      top: 50%;
      height: 4px;
      background: #e5e7eb;
      transform: translateY(-50%);
      z-index: 1;
    }

    .node {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      width: 80px;
    }

    .icon-box {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #f3f4f6;
      border: 2px solid #e5e7eb;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      transition: all 0.3s ease;
    }

    .node-label {
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      text-align: center;
      white-space: nowrap;
    }

    /* States for Option 1: Stop */
    .state-stop .node:nth-child(1) .icon-box {
      background: #ecfdf5;
      border-color: #10b981;
      box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
    }
    .state-stop .node:nth-child(1) .node-label { color: #059669; }

    .state-stop .node:nth-child(2) .icon-box {
      background: #fef2f2;
      border-color: #ef4444;
      box-shadow: 0 0 0 3px rgba(239,68,68,0.15);
    }
    .state-stop .node:nth-child(2) .node-label { color: #dc2626; }

    .state-stop .node:nth-child(3) .icon-box {
      background: #eff6ff;
      border-color: #22b7ff;
      box-shadow: 0 0 0 3px rgba(34,183,255,0.2);
    }
    .state-stop .node:nth-child(3) .node-label { color: #0284c7; }

    /* States for Option 2: Rush */
    .state-rush .node:nth-child(1) .icon-box {
      background: #ecfdf5;
      border-color: #10b981;
    }
    .state-rush .node:nth-child(1) .node-label { color: #059669; }

    .state-rush .node:nth-child(2) .icon-box {
      background: #fffbeb;
      border-color: #f59e0b;
      box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
    }
    .state-rush .node:nth-child(2) .node-label { color: #d97706; }

    .state-rush .node:nth-child(3) .icon-box {
      background: #fef2f2;
      border-color: #ef4444;
      box-shadow: 0 0 0 3px rgba(239,68,68,0.15);
    }
    .state-rush .node:nth-child(3) .node-label { color: #dc2626; }

    /* Visual Outcome Bar */
    .outcome-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 700;
      transition: all 0.3s ease;
    }

    .state-stop .outcome-bar {
      background: #ecfdf5;
      color: #065f46;
      border: 1px solid #a7f3d0;
    }

    .state-rush .outcome-bar {
      background: #fef2f2;
      color: #991b1b;
      border: 1px solid #fecaca;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="controls">
      <button id="btnStop" class="tab-btn active correct">
        <span>🛑</span> Stop immediately
      </button>
      <button id="btnRush" class="tab-btn">
        <span>⏩</span> Rush ahead
      </button>
    </div>

    <div id="track" class="track-card state-stop">
      <div class="timeline">
        <div class="node">
          <div class="icon-box">📖</div>
          <span class="node-label">Read</span>
        </div>

        <div class="node">
          <div id="midIcon" class="icon-box">🛑</div>
          <span id="midLabel" class="node-label">Stop</span>
        </div>

        <div class="node">
          <div id="endIcon" class="icon-box">💡</div>
          <span id="endLabel" class="node-label">Clear</span>
        </div>
      </div>

      <div id="outcome" class="outcome-bar">
        <span>✓</span> Meaning protected
      </div>
    </div>
  </div>

  <script>
    const btnStop = document.getElementById('btnStop');
    const btnRush = document.getElementById('btnRush');
    const track = document.getElementById('track');
    const midIcon = document.getElementById('midIcon');
    const midLabel = document.getElementById('midLabel');
    const endIcon = document.getElementById('endIcon');
    const endLabel = document.getElementById('endLabel');
    const outcome = document.getElementById('outcome');

    function showStop() {
      btnStop.className = 'tab-btn active correct';
      btnRush.className = 'tab-btn';
      track.className = 'track-card state-stop';
      midIcon.textContent = '🛑';
      midLabel.textContent = 'Stop';
      endIcon.textContent = '💡';
      endLabel.textContent = 'Clear';
      outcome.innerHTML = '<span>✓</span> Meaning protected';
    }

    function showRush() {
      btnRush.className = 'tab-btn active incorrect';
      btnStop.className = 'tab-btn';
      track.className = 'track-card state-rush';
      midIcon.textContent = '❓';
      midLabel.textContent = 'Ignore';
      endIcon.textContent = '🌫️';
      endLabel.textContent = 'Lost';
      outcome.innerHTML = '<span>✗</span> Meaning broken';
    }

    btnStop.addEventListener('click', showStop);
    btnRush.addEventListener('click', showRush);
  </script>
</body>
</html>

A common mistake is rushing to the end of the paragraph, hoping the story will fix itself.

When you catch the bump early, you can point right at the confusing part and get your movie playing again.

Monitoring: Noticing When You Don't Understand. Monitor your understanding while reading and notice when meaning breaks down.

Seven Strategies to Teach Students Text Comprehension: Monitoring Comprehension

Teachers' Guide: Comprehension Monitoring to Check for Understanding

Primary English: Reading Comprehension and Understanding What You Read

In Year 2 (Australian Curriculum v9: AC9E2LY05), teaching comprehension monitoring must prioritize metacognitive awareness—normalizing confusion as a normal, healthy part of reading. Teachers should use explicit Think-Aloud modeling during shared reading to show how adult readers constantly self-check ('Wait, that didn't make sense to me, let me pause'). Utilizing tactile tools such as 'Click/Clunk' cards or 'Traffic Light' sticky notes empowers students to self-regulate before fix-up strategies (like rereading or looking at pictures) are introduced.

Monitoring: Noticing When You Don't Understand

Your Mind's Movie

Spotting a Meaning Breakdown