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 you have 3 juicy strawberries. Your friend gives you 2 more, but then you eat 1!

How do you figure out how many strawberries are left in your bowl?

<!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: 100vh;
    padding: 12px;
  }

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

  .op-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 8px 4px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    user-select: none;
  }

  .op-btn .symbol {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: #6b7280;
  }

  .op-btn .label {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

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

  .op-btn.active .symbol { color: #22b7ff; }
  .op-btn.active .label { color: #1e2945; }

  .stage {
    position: relative;
    width: 100%;
    max-width: 440px;
    height: 220px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    overflow: hidden;
  }

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

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

  .visual-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100px;
    width: 100%;
  }

  .group-box {
    background: #f1f5f9;
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 24px;
    border: 1px dashed #cbd5e1;
  }

  .strawberry {
    font-size: 28px;
    line-height: 1;
    display: inline-block;
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .strawberry.removed {
    opacity: 0.2;
    transform: scale(0.85);
    filter: grayscale(1);
  }

  .math-badge {
    font-size: 22px;
    font-weight: 700;
    color: #1e2945;
    background: #f8fafc;
    padding: 6px 20px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .math-badge .highlight {
    color: #22b7ff;
  }

  .controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
  }

  .ctrl-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    color: #6b7280;
    transition: background 0.2s;
  }

  .ctrl-btn:hover {
    background: #f1f5f9;
    color: #1e2945;
  }
</style>
</head>
<body>

  <div class="nav-bar">
    <div class="op-btn" data-idx="0">
      <span class="symbol">−</span>
      <span class="label">Left</span>
    </div>
    <div class="op-btn active" data-idx="1">
      <span class="symbol">+</span>
      <span class="label">Combine</span>
    </div>
    <div class="op-btn" data-idx="2">
      <span class="symbol">×</span>
      <span class="label">Groups</span>
    </div>
    <div class="op-btn" data-idx="3">
      <span class="symbol">÷</span>
      <span class="label">Share</span>
    </div>
  </div>

  <div class="stage">
    
    <div class="panel" id="panel-0">
      <div class="visual-area">
        <div class="group-box">
          <span class="strawberry">🍓</span>
          <span class="strawberry">🍓</span>
          <span class="strawberry">🍓</span>
          <span class="strawberry removed">🍓</span>
          <span class="strawberry removed">🍓</span>
        </div>
      </div>
      <div class="math-badge">
        5 <span class="highlight">−</span> 2 = 3
      </div>
    </div>

    
    <div class="panel active" id="panel-1">
      <div class="visual-area">
        <div class="group-box">
          <span class="strawberry">🍓</span>
          <span class="strawberry">🍓</span>
          <span class="strawberry">🍓</span>
        </div>
        <span style="font-size:20px; font-weight:700; color:#22b7ff;">+</span>
        <div class="group-box">
          <span class="strawberry">🍓</span>
          <span class="strawberry">🍓</span>
        </div>
      </div>
      <div class="math-badge">
        3 <span class="highlight">+</span> 2 = 5
      </div>
    </div>

    
    <div class="panel" id="panel-2">
      <div class="visual-area">
        <div class="group-box">
          <span class="strawberry">🍓</span>
          <span class="strawberry">🍓</span>
        </div>
        <div class="group-box">
          <span class="strawberry">🍓</span>
          <span class="strawberry">🍓</span>
        </div>
        <div class="group-box">
          <span class="strawberry">🍓</span>
          <span class="strawberry">🍓</span>
        </div>
      </div>
      <div class="math-badge">
        3 <span class="highlight">×</span> 2 = 6
      </div>
    </div>

    
    <div class="panel" id="panel-3">
      <div class="visual-area">
        <div class="group-box">
          <span class="strawberry">🍓</span>
          <span class="strawberry">🍓</span>
          <span class="strawberry">🍓</span>
        </div>
        <span style="font-size:18px; color:#cbd5e1;">|</span>
        <div class="group-box">
          <span class="strawberry">🍓</span>
          <span class="strawberry">🍓</span>
          <span class="strawberry">🍓</span>
        </div>
      </div>
      <div class="math-badge">
        6 <span class="highlight">÷</span> 2 = 3
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="ctrl-btn" id="prevBtn">◀</button>
    <button class="ctrl-btn" id="playBtn">⏸</button>
    <button class="ctrl-btn" id="nextBtn">▶</button>
  </div>

<script>
  const btns = document.querySelectorAll('.op-btn');
  const panels = document.querySelectorAll('.panel');
  const playBtn = document.getElementById('playBtn');
  const prevBtn = document.getElementById('prevBtn');
  const nextBtn = document.getElementById('nextBtn');

  let current = 0;
  let playing = true;
  let timer = null;

  function show(idx) {
    current = (idx + panels.length) % panels.length;
    btns.forEach((b, i) => b.classList.toggle('active', i === current));
    panels.forEach((p, i) => p.classList.toggle('active', i === current));
  }

  function next() {
    show(current + 1);
  }

  function prev() {
    show(current - 1);
  }

  function startTimer() {
    clearInterval(timer);
    timer = setInterval(next, 3200);
    playBtn.textContent = '⏸';
    playing = true;
  }

  function stopTimer() {
    clearInterval(timer);
    playBtn.textContent = '▶';
    playing = false;
  }

  btns.forEach(btn => {
    btn.addEventListener('click', () => {
      stopTimer();
      show(parseInt(btn.dataset.idx, 10));
    });
  });

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

  nextBtn.addEventListener('click', () => {
    stopTimer();
    next();
  });

  prevBtn.addEventListener('click', () => {
    stopTimer();
    prev();
  });

  show(0);
  startTimer();
</script>
</body>
</html>

How do we know which math step to do first?

An **operation** is a math action like **addition** (putting things together) or **subtraction** (taking things away).

We look for **action words** in the story to pick the right symbol.

<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e2945;
    background: transparent;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
  }

  .tabs {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 440px;
    margin-bottom: 12px;
  }

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

  .tab-btn .symbol {
    font-size: 20px;
    line-height: 1;
  }

  .tab-btn .op-name {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .tab-btn.active {
    background: #f0f9ff;
    border-color: #22b7ff;
    color: #0284c7;
    box-shadow: 0 2px 8px rgba(34, 183, 255, 0.2);
  }

  .stage {
    width: 100%;
    max-width: 440px;
    height: 220px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  }

  .action-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
  }

  .action-badge span.highlight {
    color: #0284c7;
    font-weight: 700;
  }

  .scene {
    position: relative;
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .panel-view {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .panel-view.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* Items & Visuals */
  .token {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #38bdf8;
    border: 2px solid #0284c7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  }

  .token.orange {
    background: #fb923c;
    border-color: #ea580c;
  }

  .token.removed {
    opacity: 0.3;
    border-style: dashed;
    background: #cbd5e1;
    border-color: #94a3b8;
  }

  .group-box {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 8px;
    background: #f8fafc;
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
  }

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

  .math-sign {
    font-size: 22px;
    font-weight: 800;
    color: #64748b;
  }

  .arrow-sign {
    font-size: 18px;
    color: #0284c7;
  }

  .equation-bar {
    font-size: 18px;
    font-weight: 700;
    color: #1e2945;
    background: #f8fafc;
    border-radius: 10px;
    padding: 6px 16px;
    letter-spacing: 1px;
    border: 1px solid #e2e8f0;
  }

  .equation-bar .op {
    color: #0284c7;
    margin: 0 4px;
  }
</style>
</head>
<body>

<div class="tabs">
  <button class="tab-btn active" data-tab="0">
    <span class="symbol">+</span>
    <span class="op-name">Join</span>
  </button>
  <button class="tab-btn" data-tab="1">
    <span class="symbol">−</span>
    <span class="op-name">Take</span>
  </button>
  <button class="tab-btn" data-tab="2">
    <span class="symbol">×</span>
    <span class="op-name">Repeat</span>
  </button>
  <button class="tab-btn" data-tab="3">
    <span class="symbol">÷</span>
    <span class="op-name">Share</span>
  </button>
</div>

<div class="stage">
  <div class="action-badge" id="badge">Action: <span class="highlight" id="actionWord">Join Together</span></div>

  <div class="scene">
    
    <div class="panel-view active" id="view-0">
      <div class="row-flex">
        <div class="group-box">
          <div class="token">●</div>
          <div class="token">●</div>
          <div class="token">●</div>
        </div>
        <div class="math-sign">+</div>
        <div class="group-box">
          <div class="token orange">●</div>
          <div class="token orange">●</div>
        </div>
        <div class="arrow-sign">→</div>
        <div class="group-box" style="border-color: #38bdf8;">
          <div class="token">●</div>
          <div class="token">●</div>
          <div class="token">●</div>
          <div class="token orange">●</div>
          <div class="token orange">●</div>
        </div>
      </div>
    </div>

    
    <div class="panel-view" id="view-1">
      <div class="row-flex">
        <div class="group-box">
          <div class="token">●</div>
          <div class="token">●</div>
          <div class="token">●</div>
          <div class="token orange">✕</div>
          <div class="token orange">✕</div>
        </div>
        <div class="arrow-sign">→</div>
        <div class="group-box" style="border-color: #38bdf8;">
          <div class="token">●</div>
          <div class="token">●</div>
          <div class="token">●</div>
        </div>
      </div>
    </div>

    
    <div class="panel-view" id="view-2">
      <div class="row-flex">
        <div class="group-box">
          <div class="token">●</div>
          <div class="token">●</div>
        </div>
        <div class="group-box">
          <div class="token">●</div>
          <div class="token">●</div>
        </div>
        <div class="group-box">
          <div class="token">●</div>
          <div class="token">●</div>
        </div>
      </div>
    </div>

    
    <div class="panel-view" id="view-3">
      <div class="row-flex">
        <div class="group-box" style="background:#fff; border-color:#94a3b8;">
          <div class="token">●</div>
          <div class="token">●</div>
          <div class="token">●</div>
          <div class="token">●</div>
          <div class="token">●</div>
          <div class="token">●</div>
        </div>
        <div class="arrow-sign">→</div>
        <div class="group-box">
          <div class="token">●</div>
          <div class="token">●</div>
          <div class="token">●</div>
        </div>
        <div class="group-box">
          <div class="token">●</div>
          <div class="token">●</div>
          <div class="token">●</div>
        </div>
      </div>
    </div>
  </div>

  <div class="equation-bar" id="eqText">3 <span class="op">+</span> 2 = 5</div>
</div>

<script>
  const info = [
    { badge: "Join / Combine Together", eq: '3 <span class="op">+</span> 2 = 5' },
    { badge: "Take Away / Remove", eq: '5 <span class="op">−</span> 2 = 3' },
    { badge: "Equal Groups Added", eq: '3 <span class="op">×</span> 2 = 6' },
    { badge: "Share / Split Equally", eq: '6 <span class="op">÷</span> 2 = 3' }
  ];

  const buttons = document.querySelectorAll('.tab-btn');
  const views = document.querySelectorAll('.panel-view');
  const actionWord = document.getElementById('actionWord');
  const eqText = document.getElementById('eqText');

  let current = 0;
  let timer = null;

  function setTab(index) {
    current = index;
    buttons.forEach((btn, i) => btn.classList.toggle('active', i === index));
    views.forEach((view, i) => view.classList.toggle('active', i === index));
    actionWord.textContent = info[index].badge;
    eqText.innerHTML = info[index].eq;
  }

  buttons.forEach((btn) => {
    btn.addEventListener('click', () => {
      clearInterval(timer);
      setTab(parseInt(btn.dataset.tab, 10));
      startAutoCycle();
    });
  });

  function startAutoCycle() {
    timer = setInterval(() => {
      setTab((current + 1) % 4);
    }, 3600);
  }

  startAutoCycle();
</script>

</body>
</html>

What happens when a story has two actions happening one after another?

Leo has 4 toy cars. He buys 3 more cars, and then gives 2 cars to Mia.

First, we add his new cars to get a new total: $4 + 3 = 7$ cars.

Next, we take away from that new total: $7 - 2 = 5$ cars left.

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

    .scene-container {
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border-radius: 16px;
      padding: 16px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.06);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .lot-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 6px;
      background: #f1f5f9;
      padding: 10px;
      border-radius: 12px;
      min-height: 70px;
      align-items: center;
    }

    .bay {
      background: #ffffff;
      border: 2px dashed #cbd5e1;
      border-radius: 8px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      position: relative;
      transition: all 0.3s ease;
    }

    .bay.filled {
      border-style: solid;
      border-color: #94a3b8;
    }

    .car {
      display: inline-block;
      transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
    }

    .bay.inactive .car {
      opacity: 0;
      transform: scale(0.4);
    }

    .bay.added {
      border-color: #10b981;
      background: #ecfdf5;
    }

    .bay.removed {
      border-color: #ef4444;
      background: #fef2f2;
    }

    .bay.removed .car {
      opacity: 0.25;
      filter: grayscale(1);
    }

    .bay.removed::after {
      content: "✕";
      position: absolute;
      font-size: 20px;
      font-weight: bold;
      color: #ef4444;
    }

    .equation-box {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 22px;
      font-weight: 700;
      min-height: 44px;
      background: #f8fafc;
      border-radius: 10px;
      padding: 6px 12px;
    }

    .tag {
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 18px;
    }

    .tag.start { background: #e0f2fe; color: #0284c7; }
    .tag.add { background: #dcfce7; color: #16a34a; }
    .tag.sub { background: #fee2e2; color: #dc2626; }
    .tag.total { background: #fef3c7; color: #d97706; }

    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
    }

    .step-btn {
      flex: 1;
      border: none;
      background: #e2e8f0;
      color: #475569;
      padding: 10px;
      border-radius: 10px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      box-shadow: 0 0 0 0 rgba(34, 183, 255, 0);
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }

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

    .play-btn {
      width: 42px;
      border: none;
      background: #ffffff;
      border-radius: 10px;
      font-size: 14px;
      cursor: pointer;
      color: #1e2945;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }
  </style>
</head>
<body>

  <div class="scene-container">
    <div class="lot-grid" id="grid">
      
      <div class="bay filled" id="b1"><span class="car">🚗</span></div>
      <div class="bay filled" id="b2"><span class="car">🚗</span></div>
      <div class="bay filled" id="b3"><span class="car">🚗</span></div>
      <div class="bay filled" id="b4"><span class="car">🚗</span></div>
      <div class="bay" id="b5"><span class="car">🚙</span></div>
      <div class="bay" id="b6"><span class="car">🚙</span></div>
      <div class="bay" id="b7"><span class="car">🚙</span></div>
    </div>

    <div class="equation-box" id="eqBox">
      
    </div>
  </div>

  <div class="controls">
    <button class="play-btn" id="playBtn" aria-label="Play/Pause">⏸</button>
    <button class="step-btn active" id="btn0">1. Start (4)</button>
    <button class="step-btn" id="btn1">2. Add 3 (+3)</button>
    <button class="step-btn" id="btn2">3. Take 2 (−2)</button>
  </div>

  <script>
    const bays = [
      document.getElementById('b1'),
      document.getElementById('b2'),
      document.getElementById('b3'),
      document.getElementById('b4'),
      document.getElementById('b5'),
      document.getElementById('b6'),
      document.getElementById('b7')
    ];

    const eqBox = document.getElementById('eqBox');
    const buttons = [
      document.getElementById('btn0'),
      document.getElementById('btn1'),
      document.getElementById('btn2')
    ];
    const playBtn = document.getElementById('playBtn');

    const steps = [
      {
        render: () => {
          bays.forEach((b, i) => {
            b.className = i < 4 ? 'bay filled' : 'bay inactive';
          });
          eqBox.innerHTML = '<span class="tag start">4 cars</span>';
        }
      },
      {
        render: () => {
          bays.forEach((b, i) => {
            b.className = i < 4 ? 'bay filled' : 'bay added';
          });
          eqBox.innerHTML = '<span class="tag start">4</span> + <span class="tag add">3</span> = <span class="tag total">7</span>';
        }
      },
      {
        render: () => {
          bays.forEach((b, i) => {
            if (i < 5) {
              b.className = i < 4 ? 'bay filled' : 'bay added';
            } else {
              b.className = 'bay removed';
            }
          });
          eqBox.innerHTML = '<span class="tag total">7</span> − <span class="tag sub">2</span> = <span class="tag start">5 left</span>';
        }
      }
    ];

    let currentStep = 0;
    let timer = null;
    let isPlaying = true;

    function showStep(index) {
      currentStep = index;
      buttons.forEach((btn, i) => {
        if (i === index) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });
      steps[index].render();
    }

    function nextStep() {
      showStep((currentStep + 1) % steps.length);
    }

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

    function pauseAuto() {
      if (timer) clearInterval(timer);
      timer = null;
      playBtn.textContent = '▶';
      isPlaying = false;
    }

    buttons.forEach((btn, i) => {
      btn.addEventListener('click', () => {
        showStep(i);
        pauseAuto();
      });
    });

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        pauseAuto();
      } else {
        nextStep();
        startAuto();
      }
    });

    // Init
    showStep(0);
    startAuto();
  </script>
</body>
</html>

A common mistake is trying to subtract 2 from 4 before adding the 3 new cars. Always follow the story in order so your middle total is correct!

Can you follow the clues to solve a playground puzzle?

There are 5 birds on a branch. 4 more birds fly in, and then 3 birds fly away.

First add to find the new group ($5 + 4 = 9$), and then subtract the birds that flew away ($9 - 3 = 6$).

math

Choosing the Correct Operation in Real-Life Situations. Analyze word problem structures to determine the sequence of mathematical operations needed.

Early Level Maths and Numeracy: Adding and Subtracting Stories

Early Years & KS1 Mathematical Problem Solving: Stories and Number Operations

Primary 1 Maths: Addition and Subtraction Word Problems up to 10

For Early Level (P1, Curriculum for Excellence), abstract problem solving in unfamiliar contexts is achieved through dramatic role-play, story-acting, and manipulative-based inquiry. The teacher should guide pupils to identify the 'action' taking place (coming together vs. taking apart) and structure multi-step unfamiliar contexts using the 'First–Then–Now' framework before recording symbolic number sentences.

Choosing the Correct Operation in Real-Life Situations

Action Clues

Step-by-Step Stories