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 5 yummy strawberries in a bowl, and someone drops 1 more inside. Do you need to count all of them from 1 again?

Nope! Tap your head and name your **Start Point**: "**I have $5$**!" Holding the **First Number** in mind lets you use **counting on** instead of counting from 1.

Tap your head and say "**I have 5**"! That locks your **First Number** as the **Start Point** without starting from $1$.

**Adding One** ($+1$) simply means moving forward to the **Next Consecutive Number** on the number track.

<!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>Adding One and Two on a Number Line</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --primary: #22b7ff;
    --primary-dark: #0094db;
    --start-color: #f59e0b;
    --end-color: #10b981;
    --text: #1e2945;
    --muted: #64748b;
    --bg: #f8fafc;
    --card-bg: #ffffff;
    --border: #e2e8f0;
  }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: transparent;
    color: var(--text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }
  .app-container {
    width: 100%;
    max-width: 580px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }
  /* Mode Toggle */
  .mode-toggle {
    display: flex;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 999px;
    gap: 4px;
  }
  .mode-btn {
    border: none;
    background: transparent;
    padding: 8px 18px;
    font-size: 15px;
    font-weight: 700;
    color: var(--muted);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .mode-btn.active {
    background: #ffffff;
    color: var(--primary-dark);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }

  /* Equation Display */
  .equation-card {
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 28px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  }
  .num-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    border-radius: 10px;
    color: #fff;
    padding: 0 6px;
    transition: transform 0.2s ease;
  }
  .start-val { background: var(--start-color); }
  .add-val { background: var(--primary); }
  .result-val { background: var(--end-color); }
  .eq-op { color: var(--muted); font-size: 24px; }

  /* Number Line Canvas Container */
  .line-wrapper {
    width: 100%;
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 12px 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  svg {
    width: 100%;
    height: auto;
    overflow: visible;
  }
  .axis { stroke: #94a3b8; stroke-width: 3; stroke-linecap: round; }
  .tick { stroke: #94a3b8; stroke-width: 2.5; stroke-linecap: round; }
  .hop-arc {
    fill: none;
    stroke: var(--primary);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 6 4;
    transition: d 0.3s ease;
  }
  .arc-text {
    font-size: 14px;
    font-weight: 800;
    fill: var(--primary-dark);
    text-anchor: middle;
    font-family: inherit;
  }

  /* Number Buttons Grid */
  .selector-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .num-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .num-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 2px solid var(--border);
    background: #ffffff;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
  }
  .num-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
    border-color: var(--border);
  }
  .num-btn.selected {
    background: var(--start-color);
    border-color: var(--start-color);
    color: #ffffff;
  }
  .num-btn.landed {
    background: #ecfdf5;
    border-color: var(--end-color);
    color: var(--end-color);
  }
</style>
</head>
<body>

<div class="app-container">
  
  <div class="mode-toggle">
    <button class="mode-btn active" id="btnMode1">+1 Step</button>
    <button class="mode-btn" id="btnMode2">+2 Steps</button>
  </div>

  
  <div class="equation-card">
    <span class="num-box start-val" id="eqStart">5</span>
    <span class="eq-op">+</span>
    <span class="num-box add-val" id="eqHop">1</span>
    <span class="eq-op">=</span>
    <span class="num-box result-val" id="eqResult">6</span>
  </div>

  
  <div class="line-wrapper">
    <svg viewBox="0 0 550 115" id="numLineSvg">
      <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1 L 10 5 L 0 9 z" fill="var(--primary)" />
        </marker>
      </defs>

      
      <line x1="25" y1="80" x2="525" y2="80" class="axis" />

      
      <g id="ticksGroup"></g>

      
      <path id="hopPath1" class="hop-arc" marker-end="url(#arrow)" />
      <path id="hopPath2" class="hop-arc" marker-end="url(#arrow)" />
      
      
      <text id="hopLabel1" class="arc-text"></text>
      <text id="hopLabel2" class="arc-text"></text>

      
      <circle id="startDot" r="7" fill="var(--start-color)" cy="80" cx="-50" />
      <circle id="endDot" r="7" fill="var(--end-color)" cy="80" cx="-50" />
    </svg>
  </div>

  
  <div class="selector-label">Tap Starting Number</div>
  <div class="num-grid" id="buttonsGrid"></div>
</div>

<script>
  let startNum = 5;
  let hopAmount = 1;
  const maxLimit = 10;

  const minX = 40;
  const maxX = 510;
  const stepWidth = (maxX - minX) / 10;

  function getX(n) {
    return minX + n * stepWidth;
  }

  // Draw ticks and labels
  const ticksGroup = document.getElementById('ticksGroup');
  for (let i = 0; i <= 10; i++) {
    const x = getX(i);
    // Tick mark
    const tick = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    tick.setAttribute('x1', x);
    tick.setAttribute('x2', x);
    tick.setAttribute('y1', 73);
    tick.setAttribute('y2', 87);
    tick.setAttribute('class', 'tick');
    ticksGroup.appendChild(tick);

    // Number text
    const txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    txt.setAttribute('x', x);
    txt.setAttribute('y', 105);
    txt.setAttribute('text-anchor', 'middle');
    txt.setAttribute('font-size', '15');
    txt.setAttribute('font-weight', '700');
    txt.setAttribute('fill', '#475569');
    txt.textContent = i;
    ticksGroup.appendChild(txt);
  }

  // Create bottom selector buttons
  const buttonsGrid = document.getElementById('buttonsGrid');
  for (let i = 0; i <= 10; i++) {
    const btn = document.createElement('button');
    btn.className = 'num-btn';
    btn.textContent = i;
    btn.onclick = () => {
      startNum = i;
      updateVisuals();
    };
    buttonsGrid.appendChild(btn);
  }

  function updateVisuals() {
    // Clamp start if out of bounds
    if (startNum + hopAmount > maxLimit) {
      startNum = maxLimit - hopAmount;
    }

    const endNum = startNum + hopAmount;

    // Update Equation Text
    document.getElementById('eqStart').textContent = startNum;
    document.getElementById('eqHop').textContent = hopAmount;
    document.getElementById('eqResult').textContent = endNum;

    // Update Buttons state
    const btns = buttonsGrid.children;
    for (let i = 0; i <= 10; i++) {
      btns[i].className = 'num-btn';
      btns[i].disabled = (i + hopAmount > maxLimit);
      if (i === startNum) btns[i].classList.add('selected');
      if (i === endNum) btns[i].classList.add('landed');
    }

    // Update SVGs
    const x0 = getX(startNum);
    const xEnd = getX(endNum);
    const yBase = 77;

    document.getElementById('startDot').setAttribute('cx', x0);
    document.getElementById('endDot').setAttribute('cx', xEnd);

    const hop1 = document.getElementById('hopPath1');
    const hop2 = document.getElementById('hopPath2');
    const lbl1 = document.getElementById('hopLabel1');
    const lbl2 = document.getElementById('hopLabel2');

    if (hopAmount === 1) {
      const x1 = getX(startNum + 1);
      const midX = (x0 + x1) / 2;
      hop1.setAttribute('d', `M ${x0} ${yBase} Q ${midX} 25 ${x1} ${yBase}`);
      lbl1.setAttribute('x', midX);
      lbl1.setAttribute('y', 30);
      lbl1.textContent = '+1';

      hop2.setAttribute('d', '');
      lbl2.textContent = '';
    } else {
      const x1 = getX(startNum + 1);
      const x2 = getX(startNum + 2);
      const mid1 = (x0 + x1) / 2;
      const mid2 = (x1 + x2) / 2;

      hop1.setAttribute('d', `M ${x0} ${yBase} Q ${mid1} 30 ${x1} ${yBase}`);
      lbl1.setAttribute('x', mid1);
      lbl1.setAttribute('y', 33);
      lbl1.textContent = '+1';

      hop2.setAttribute('d', `M ${x1} ${yBase} Q ${mid2} 30 ${x2} ${yBase}`);
      lbl2.setAttribute('x', mid2);
      lbl2.setAttribute('y', 33);
      lbl2.textContent = '+1';
    }
  }

  // Mode button events
  const btnMode1 = document.getElementById('btnMode1');
  const btnMode2 = document.getElementById('btnMode2');

  btnMode1.onclick = () => {
    hopAmount = 1;
    btnMode1.classList.add('active');
    btnMode2.classList.remove('active');
    updateVisuals();
  };

  btnMode2.onclick = () => {
    hopAmount = 2;
    btnMode2.classList.add('active');
    btnMode1.classList.remove('active');
    updateVisuals();
  };

  // Initial draw
  updateVisuals();
</script>
</body>
</html>

Lock 5 in your mind, take one step up: "5... 6!" That means $5 + 1 = 6$.

Let's try it with 7 toy cars. Lock 7 in your mind, jump one number up to 8, and you get $7 + 1 = 8$.

What happens when a friend gives you 2 treats instead of 1?

**Adding Two** ($+2$) works by **Counting On Two Steps** ($n + 1, n + 2$) while tracking the jumps on your fingers or counters.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

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

    .main-wrap {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    /* Equation Display */
    .equation-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 26px;
      font-weight: 700;
      background: #ffffff;
      padding: 8px 24px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      border: 1px solid #e6e6e6;
    }

    .eq-part {
      transition: color 0.3s ease, transform 0.3s ease;
      color: #94a3b8;
    }

    .eq-part.active {
      color: #0284c7;
      transform: scale(1.1);
    }

    .eq-part.result {
      color: #059669;
      transform: scale(1.15);
    }

    /* Number Line SVG Container */
    .chart-container {
      width: 100%;
      background: #ffffff;
      border-radius: 12px;
      padding: 12px 6px;
      border: 1px solid #e6e6e6;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

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

    .num-circle {
      transition: fill 0.3s ease, stroke 0.3s ease, transform 0.3s ease;
      transform-box: fill-box;
      transform-origin: center;
      cursor: pointer;
    }

    .num-text {
      font-size: 15px;
      font-weight: 600;
      fill: #475569;
      pointer-events: none;
      text-anchor: middle;
      dominant-baseline: central;
    }

    .num-circle.active-start {
      fill: #e0f2fe;
      stroke: #0284c7;
      stroke-width: 3;
    }

    .num-circle.active-mid {
      fill: #fef3c7;
      stroke: #f59e0b;
      stroke-width: 3;
    }

    .num-circle.active-end {
      fill: #d1fae5;
      stroke: #059669;
      stroke-width: 3.5;
    }

    /* Jump Arcs */
    .arc-path {
      fill: none;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-dasharray: 120;
      stroke-dashoffset: 120;
      transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .arc-path.show {
      stroke-dashoffset: 0;
    }

    .arc-label {
      font-size: 13px;
      font-weight: 700;
      text-anchor: middle;
      opacity: 0;
      transition: opacity 0.3s ease 0.3s;
    }

    .arc-label.show {
      opacity: 1;
    }

    /* Step Counters Visual (Tapping Fingers) */
    .counters-row {
      display: flex;
      justify-content: center;
      gap: 12px;
      width: 100%;
    }

    .count-chip {
      display: flex;
      align-items: center;
      gap: 6px;
      background: #ffffff;
      padding: 6px 14px;
      border-radius: 20px;
      border: 1.5px solid #e2e8f0;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      transition: all 0.3s ease;
    }

    .count-chip.active {
      border-color: #0284c7;
      background: #f0f9ff;
      color: #0369a1;
      transform: translateY(-2px);
      box-shadow: 0 3px 6px rgba(2, 132, 199, 0.15);
    }

    /* Bottom Controls */
    .controls {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
    }

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 7px 14px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: background 0.15s ease, border-color 0.15s ease;
    }

    .btn:active {
      background: #f1f5f9;
    }

    .btn.primary {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    .btn.primary:active {
      background: #0369a1;
    }

    .step-pills {
      display: flex;
      gap: 6px;
    }

    .step-pill {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #e2e8f0;
      color: #475569;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .step-pill.active {
      background: #0284c7;
      color: #ffffff;
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="equation-bar">
      <span id="eq-start" class="eq-part active">4</span>
      <span class="eq-part active">+</span>
      <span id="eq-add" class="eq-part">2</span>
      <span class="eq-part">=</span>
      <span id="eq-result" class="eq-part">6</span>
    </div>

    
    <div class="chart-container">
      <svg viewBox="0 0 550 170" preserveAspectRatio="xMidYMid meet">
        <defs>
          <marker id="arrow-blue" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
            <polygon points="0 0, 6 3, 0 6" fill="#0284c7" />
          </marker>
          <marker id="arrow-green" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
            <polygon points="0 0, 6 3, 0 6" fill="#059669" />
          </marker>
        </defs>

        
        <line x1="25" y1="130" x2="525" y2="130" stroke="#cbd5e1" stroke-width="3" stroke-linecap="round" />

        
        
        <path id="jump1" class="arc-path" d="M 225 106 C 225 35, 275 35, 275 106" stroke="#0284c7" marker-end="url(#arrow-blue)" />
        <text id="lbl-jump1" class="arc-label" x="250" y="38" fill="#0284c7">+1 (5)</text>

        
        <path id="jump2" class="arc-path" d="M 275 106 C 275 35, 325 35, 325 106" stroke="#059669" marker-end="url(#arrow-green)" />
        <text id="lbl-jump2" class="arc-label" x="300" y="38" fill="#059669">+1 (6)</text>

        
        <g id="nodes-group">
          
          
        </g>
      </svg>
    </div>

    
    <div class="counters-row">
      <div id="chip-start" class="count-chip active">
        <span>●</span> Start: 4
      </div>
      <div id="chip-step1" class="count-chip">
        <span>☝️</span> Tap 1: 5
      </div>
      <div id="chip-step2" class="count-chip">
        <span>✌️</span> Tap 2: 6
      </div>
    </div>

    
    <div class="controls">
      <button id="btn-prev" class="btn" aria-label="Previous">◀</button>
      <div class="step-pills">
        <div class="step-pill active" data-step="0">1</div>
        <div class="step-pill" data-step="1">2</div>
        <div class="step-pill" data-step="2">3</div>
      </div>
      <button id="btn-next" class="btn" aria-label="Next">▶</button>
      <button id="btn-auto" class="btn primary">⏸ Pause</button>
    </div>
  </div>

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

    // Render nodes 0 to 10
    const nodesGroup = document.getElementById('nodes-group');
    for (let i = 0; i <= 10; i++) {
      const cx = 25 + i * 50;
      const cy = 130;

      const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');

      const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      circle.setAttribute('cx', cx);
      circle.setAttribute('cy', cy);
      circle.setAttribute('r', '17');
      circle.setAttribute('fill', '#ffffff');
      circle.setAttribute('stroke', '#cbd5e1');
      circle.setAttribute('stroke-width', '2');
      circle.setAttribute('id', `node-${i}`);
      circle.setAttribute('class', 'num-circle');

      const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      text.setAttribute('x', cx);
      text.setAttribute('y', cy);
      text.setAttribute('class', 'num-text');
      text.textContent = i;

      g.appendChild(circle);
      g.appendChild(text);
      nodesGroup.appendChild(g);
    }

    function setStep(step) {
      currentStep = (step + totalSteps) % totalSteps;

      // Update Step Pills
      document.querySelectorAll('.step-pill').forEach((pill, idx) => {
        pill.classList.toggle('active', idx === currentStep);
      });

      // Elements
      const node4 = document.getElementById('node-4');
      const node5 = document.getElementById('node-5');
      const node6 = document.getElementById('node-6');

      const jump1 = document.getElementById('jump1');
      const lblJump1 = document.getElementById('lbl-jump1');
      const jump2 = document.getElementById('jump2');
      const lblJump2 = document.getElementById('lbl-jump2');

      const eqStart = document.getElementById('eq-start');
      const eqAdd = document.getElementById('eq-add');
      const eqResult = document.getElementById('eq-result');

      const chipStart = document.getElementById('chip-start');
      const chip1 = document.getElementById('chip-step1');
      const chip2 = document.getElementById('chip-step2');

      // Reset node styles
      for (let i = 0; i <= 10; i++) {
        const n = document.getElementById(`node-${i}`);
        n.className.baseVal = 'num-circle';
      }

      if (currentStep === 0) {
        // Step 1: Start at 4
        node4.classList.add('active-start');
        jump1.classList.remove('show');
        lblJump1.classList.remove('show');
        jump2.classList.remove('show');
        lblJump2.classList.remove('show');

        eqStart.className = 'eq-part active';
        eqAdd.className = 'eq-part';
        eqResult.className = 'eq-part';

        chipStart.className = 'count-chip active';
        chip1.className = 'count-chip';
        chip2.className = 'count-chip';
      } else if (currentStep === 1) {
        // Step 2: Jump 1 -> 5
        node4.classList.add('active-start');
        node5.classList.add('active-mid');
        jump1.classList.add('show');
        lblJump1.classList.add('show');
        jump2.classList.remove('show');
        lblJump2.classList.remove('show');

        eqStart.className = 'eq-part';
        eqAdd.className = 'eq-part active';
        eqResult.className = 'eq-part';

        chipStart.className = 'count-chip';
        chip1.className = 'count-chip active';
        chip2.className = 'count-chip';
      } else if (currentStep === 2) {
        // Step 3: Jump 2 -> 6 (Result)
        node4.classList.add('active-start');
        node5.classList.add('active-mid');
        node6.classList.add('active-end');
        jump1.classList.add('show');
        lblJump1.classList.add('show');
        jump2.classList.add('show');
        lblJump2.classList.add('show');

        eqStart.className = 'eq-part';
        eqAdd.className = 'eq-part active';
        eqResult.className = 'eq-part result';

        chipStart.className = 'count-chip';
        chip1.className = 'count-chip';
        chip2.className = 'count-chip active';
      }
    }

    function startAutoPlay() {
      stopAutoPlay();
      isPlaying = true;
      document.getElementById('btn-auto').textContent = '⏸ Pause';
      document.getElementById('btn-auto').classList.add('primary');
      timer = setInterval(() => {
        setStep(currentStep + 1);
      }, 3000);
    }

    function stopAutoPlay() {
      isPlaying = false;
      if (timer) clearInterval(timer);
      document.getElementById('btn-auto').textContent = '▶ Play';
      document.getElementById('btn-auto').classList.remove('primary');
    }

    // Event listeners
    document.getElementById('btn-next').addEventListener('click', () => {
      stopAutoPlay();
      setStep(currentStep + 1);
    });

    document.getElementById('btn-prev').addEventListener('click', () => {
      stopAutoPlay();
      setStep(currentStep - 1);
    });

    document.getElementById('btn-auto').addEventListener('click', () => {
      if (isPlaying) {
        stopAutoPlay();
      } else {
        startAutoPlay();
      }
    });

    document.querySelectorAll('.step-pill').forEach(pill => {
      pill.addEventListener('click', (e) => {
        stopAutoPlay();
        setStep(parseInt(e.target.dataset.step, 10));
      });
    });

    // Initialize
    setStep(0);
    startAutoPlay();
  </script>
</body>
</html>

Start at 4 and tap two fingers: "5... 6!" So, $4 + 2 = 6$.

Now try starting at 6. Lock 6 in your head, then count two steps: "7, 8!" That gives you $6 + 2 = 8$.

Why is counting on much faster than counting every single dot from the start?

A common trap is going back to 1 and counting "1, 2, 3, 4, 5, 6..." all over again.

<!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;
    padding: 12px;
    gap: 12px;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Controls */
  .controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 520px;
  }
  .btn-group {
    display: flex;
    background: #e2e8f0;
    padding: 3px;
    border-radius: 10px;
    gap: 2px;
  }
  .btn {
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 700;
    color: #475569;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  }
  .btn.active {
    background: #ffffff;
    color: #0284c7;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  }
  .btn-op.active {
    background: #0284c7;
    color: #ffffff;
  }

  /* Display Area */
  .stage-container {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
  }

  /* 1. Cubes View */
  .cubes-row {
    display: flex;
    align-items: center;
    height: 42px;
    gap: 4px;
    overflow-x: auto;
    padding: 2px;
  }
  .cube {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    color: #ffffff;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.06);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  }
  .cube-base {
    background: #0284c7;
  }
  .cube-add {
    background: #10b981;
    animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes popIn {
    0% { transform: scale(0.3) translateY(-10px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
  }

  /* 2. Number Track View */
  .track-wrapper {
    position: relative;
    padding-top: 26px;
  }
  .track-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    pointer-events: none;
    overflow: visible;
  }
  .track-grid {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    gap: 2px;
  }
  .track-cell {
    aspect-ratio: 1;
    max-height: 36px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    transition: all 0.25s ease;
  }
  .track-cell.start {
    background: #e0f2fe;
    border-color: #0284c7;
    color: #0284c7;
    font-weight: 800;
  }
  .track-cell.end {
    background: #dcfce7;
    border-color: #10b981;
    color: #047857;
    font-weight: 800;
    box-shadow: 0 0 0 2px #10b981;
  }

  /* Hop Arc */
  .hop-arc {
    fill: none;
    stroke: #10b981;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    animation: drawArc 0.4s ease forwards;
  }
  @keyframes drawArc {
    to { stroke-dashoffset: 0; }
  }

  /* 3. Mind / Equation View */
  .equation-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 26px;
    font-weight: 900;
    padding: 6px 0;
  }
  .num-start { color: #0284c7; }
  .op-symbol { color: #64748b; }
  .num-add { color: #10b981; }
  .num-result {
    color: #047857;
    background: #dcfce7;
    padding: 2px 14px;
    border-radius: 8px;
    border: 1.5px solid #10b981;
  }
</style>
</head>
<body>

  
  <div class="controls">
    <div class="btn-group" id="start-group">
      <button class="btn" data-val="1">1</button>
      <button class="btn" data-val="2">2</button>
      <button class="btn" data-val="3">3</button>
      <button class="btn active" data-val="4">4</button>
      <button class="btn" data-val="5">5</button>
      <button class="btn" data-val="6">6</button>
      <button class="btn" data-val="7">7</button>
      <button class="btn" data-val="8">8</button>
    </div>
    <div class="btn-group" id="op-group">
      <button class="btn btn-op active" data-op="1">+ 1</button>
      <button class="btn btn-op" data-op="2">+ 2</button>
    </div>
  </div>

  <div class="stage-container">
    
    <div class="panel">
      <div class="panel-header">
        <span>1. Cubes</span>
        <span id="cube-label">4 + 1</span>
      </div>
      <div class="cubes-row" id="cubes-row"></div>
    </div>

    
    <div class="panel">
      <div class="panel-header">
        <span>2. Track</span>
        <span id="track-label">Hop +1</span>
      </div>
      <div class="track-wrapper">
        <svg class="track-svg" id="track-svg"></svg>
        <div class="track-grid" id="track-grid"></div>
      </div>
    </div>

    
    <div class="panel">
      <div class="panel-header">
        <span>3. Mind</span>
        <span>Think & Say</span>
      </div>
      <div class="equation-box" id="equation-box">
        <span class="num-start" id="eq-start">4</span>
        <span class="op-symbol">+</span>
        <span class="num-add" id="eq-add">1</span>
        <span class="op-symbol">=</span>
        <span class="num-result" id="eq-res">5</span>
      </div>
    </div>
  </div>

<script>
  let startNum = 4;
  let addNum = 1;

  const trackGrid = document.getElementById('track-grid');
  const trackSvg = document.getElementById('track-svg');
  const cubesRow = document.getElementById('cubes-row');
  const cubeLabel = document.getElementById('cube-label');
  const trackLabel = document.getElementById('track-label');
  const eqStart = document.getElementById('eq-start');
  const eqAdd = document.getElementById('eq-add');
  const eqRes = document.getElementById('eq-res');

  // Build Track Cells (0 - 10)
  for (let i = 0; i <= 10; i++) {
    const cell = document.createElement('div');
    cell.className = 'track-cell';
    cell.textContent = i;
    cell.id = `cell-${i}`;
    trackGrid.appendChild(cell);
  }

  function render() {
    const total = startNum + addNum;

    // 1. Cubes
    cubesRow.innerHTML = '';
    for (let i = 1; i <= startNum; i++) {
      const c = document.createElement('div');
      c.className = 'cube cube-base';
      c.textContent = i;
      cubesRow.appendChild(c);
    }
    for (let i = 1; i <= addNum; i++) {
      const c = document.createElement('div');
      c.className = 'cube cube-add';
      c.textContent = startNum + i;
      cubesRow.appendChild(c);
    }
    cubeLabel.textContent = `${startNum} + ${addNum}`;

    // 2. Track & Hop
    for (let i = 0; i <= 10; i++) {
      const el = document.getElementById(`cell-${i}`);
      el.className = 'track-cell';
      if (i === startNum) el.classList.add('start');
      if (i === total) el.classList.add('end');
    }
    trackLabel.textContent = `Hop +${addNum}`;
    drawArc(startNum, total);

    // 3. Equation
    eqStart.textContent = startNum;
    eqAdd.textContent = addNum;
    eqRes.textContent = total;
  }

  function drawArc(from, to) {
    const fromCell = document.getElementById(`cell-${from}`);
    const toCell = document.getElementById(`cell-${to}`);
    const wrapper = trackSvg.getBoundingClientRect();

    if (!fromCell || !toCell || wrapper.width === 0) return;

    const rFrom = fromCell.getBoundingClientRect();
    const rTo = toCell.getBoundingClientRect();

    const x1 = (rFrom.left + rFrom.right) / 2 - wrapper.left;
    const x2 = (rTo.left + rTo.right) / 2 - wrapper.left;
    const y = 26;
    const midX = (x1 + x2) / 2;
    const curveY = 2;

    trackSvg.innerHTML = `
      <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
          <path d="M 0 1 L 10 5 L 0 9 z" fill="#10b981" />
        </marker>
      </defs>
      <path class="hop-arc" d="M ${x1} ${y} Q ${midX} ${curveY} ${x2} ${y}" marker-end="url(#arrow)" />
    `;
  }

  // Event Listeners
  document.querySelectorAll('#start-group .btn').forEach(btn => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('#start-group .btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      startNum = parseInt(btn.dataset.val);
      render();
    });
  });

  document.querySelectorAll('#op-group .btn').forEach(btn => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('#op-group .btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      addNum = parseInt(btn.dataset.op);
      render();
    });
  });

  window.addEventListener('resize', () => drawArc(startNum, startNum + addNum));
  render();
</script>
</body>
</html>

You already know you have 6, so keep it safe in your brain and only count the new steps.

This journey is a **Mental Progression**: first using physical cubes, then visual track hops, and finally jumping purely in your mind.

Give it a try right now: lock 8 in your head, take 2 steps forward, and shout what you get!

Quick $+1$ and $+2$ jumps create an **Efficient Bridging** strategy to help you learn all essential **Number Bonds** up to $10$.

As you practice, you follow a **Mental Progression**: starting with physical counters, moving to visual number tracks, and finally picturing the jumps in your head.

This provides an **Efficient Bridging** strategy that prepares you to master all your **Number Bonds** within 10!

math

Adding One and Adding Two to Any Number Within 10. Mentally add 1 or 2 to any number up to 8 by counting on one or two steps.

Early Level Maths and Numeracy: Adding and Counting On

Add by Counting On - Sums up to 10

Early Years Foundation & Primary Number Activities: The Box Game and Counting On

To achieve mastery at Early Level (P1 / CfE MNU 0-03a), transition pupils through a structured Concrete-Pictorial-Abstract (CPA) model. Begin with physical manipulatives (counters, interlocking cubes) and movement along floor number tracks. Teach explicit kinaesthetic routines like the 'Fist to Head' strategy (tapping the head for the first addend and popping up fingers for $+1$ and $+2$) to eliminate the common trap of counting the starting number. Daily low-stakes oral warm-ups (e.g., 'I say $6$, you say $+2$!') build fluency and confidence toward mental recall within 10.

Adding One and Adding Two to Any Number Within 10

Adding 1: Jump One Step

Adding 2: Jump Two Steps