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 hopping across numbered stepping stones across a river all the way to 30!

Every time you take one step forward, you land on the next bigger number.

How do we know which number comes next when we hop?

When we **count forward**, we add 1 to get the next number.

<!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>Counting Forward and Backward</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -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: space-between;
      min-height: 100%;
      user-select: none;
    }
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 420px;
      justify-content: center;
    }
    .mode-btn {
      flex: 1;
      padding: 10px 14px;
      font-size: 15px;
      font-weight: 600;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      border-radius: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.25s ease;
    }
    .mode-btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.25);
    }
    .stage {
      position: relative;
      width: 100%;
      max-width: 500px;
      height: 180px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-bottom: 24px;
    }
    .trail-line {
      position: absolute;
      bottom: 48px;
      left: 6%;
      right: 6%;
      height: 6px;
      background: #e2e8f0;
      border-radius: 3px;
      z-index: 1;
    }
    .nodes {
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 0 4px;
    }
    .node {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #ffffff;
      border: 3px solid #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      font-weight: 700;
      color: #475569;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .node.active {
      border-color: #22b7ff;
      background: #22b7ff;
      color: #ffffff;
      box-shadow: 0 0 0 5px rgba(34, 183, 255, 0.25);
      transform: translateY(-2px);
    }
    .hop-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 3;
    }
    .hop-arc {
      fill: none;
      stroke: #22b7ff;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-dasharray: 6 4;
    }
    .hop-badge {
      position: absolute;
      transform: translate(-50%, -50%);
      background: #1e2945;
      color: #ffffff;
      font-size: 14px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 12px;
      box-shadow: 0 3px 8px rgba(0,0,0,0.15);
      z-index: 4;
      transition: left 0.3s ease, top 0.3s ease;
      white-space: nowrap;
    }
    .action-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 420px;
    }
    .nav-btn {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      font-size: 20px;
      font-weight: 700;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, border-color 0.2s;
    }
    .nav-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }
    .display-box {
      flex: 1;
      height: 48px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 700;
      color: #1e2945;
      letter-spacing: 0.5px;
    }
    .math-hl {
      color: #22b7ff;
      margin: 0 4px;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="mode-btn active" id="btnFwd" onclick="setMode('forward')">
      Forward (+1) →
    </button>
    <button class="mode-btn" id="btnBwd" onclick="setMode('backward')">
      ← Backward (−1)
    </button>
  </div>

  <div class="stage" id="stage">
    <svg class="hop-svg" id="hopSvg">
      <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.5 L 8 5 L 0 8.5 z" fill="#22b7ff" />
        </marker>
      </defs>
      <path class="hop-arc" id="hopPath" marker-end="url(#arrow)" />
    </svg>

    <div class="hop-badge" id="hopBadge">+1</div>

    <div class="trail-line"></div>
    <div class="nodes" id="nodesContainer"></div>
  </div>

  <div class="action-bar">
    <button class="nav-btn" id="prevBtn" onclick="step(-1)">‹</button>
    <div class="display-box" id="equationDisplay">22 + 1 = 23</div>
    <button class="nav-btn" id="nextBtn" onclick="step(1)">›</button>
  </div>

  <script>
    const NUMBERS = [21, 22, 23, 24, 25, 26, 27];
    let currentIndex = 2; // Starts at 23 (target missing sequence region 22-26)
    let mode = 'forward';

    const nodesContainer = document.getElementById('nodesContainer');
    const equationDisplay = document.getElementById('equationDisplay');
    const hopPath = document.getElementById('hopPath');
    const hopBadge = document.getElementById('hopBadge');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const btnFwd = document.getElementById('btnFwd');
    const btnBwd = document.getElementById('btnBwd');
    const stage = document.getElementById('stage');

    function init() {
      nodesContainer.innerHTML = '';
      NUMBERS.forEach((num, idx) => {
        const node = document.createElement('div');
        node.className = 'node' + (idx === currentIndex ? ' active' : '');
        node.textContent = num;
        node.onclick = () => selectIndex(idx);
        nodesContainer.appendChild(node);
      });
      update();
    }

    function setMode(newMode) {
      mode = newMode;
      btnFwd.classList.toggle('active', mode === 'forward');
      btnBwd.classList.toggle('active', mode === 'backward');
      
      // Auto adjust target hop if at boundary
      if (mode === 'forward' && currentIndex === NUMBERS.length - 1) {
        currentIndex = NUMBERS.length - 2;
      } else if (mode === 'backward' && currentIndex === 0) {
        currentIndex = 1;
      }
      update();
    }

    function selectIndex(idx) {
      if (mode === 'forward' && idx === NUMBERS.length - 1) {
        currentIndex = idx - 1;
      } else if (mode === 'backward' && idx === 0) {
        currentIndex = 1;
      } else {
        currentIndex = idx;
      }
      update();
    }

    function step(direction) {
      const target = currentIndex + direction;
      if (target >= 0 && target < NUMBERS.length) {
        if (mode === 'forward' && target === NUMBERS.length - 1) {
          currentIndex = target - 1;
        } else if (mode === 'backward' && target === 0) {
          currentIndex = 1;
        } else {
          currentIndex = target;
        }
        update();
      }
    }

    function update() {
      const nodes = document.querySelectorAll('.node');
      nodes.forEach((n, i) => n.classList.toggle('active', i === currentIndex));

      prevBtn.disabled = currentIndex === 0;
      nextBtn.disabled = currentIndex === NUMBERS.length - 1;

      const fromIdx = currentIndex;
      let toIdx = mode === 'forward' ? fromIdx + 1 : fromIdx - 1;
      if (toIdx < 0) toIdx = 0;
      if (toIdx >= NUMBERS.length) toIdx = NUMBERS.length - 1;

      const fromNode = nodes[fromIdx];
      const toNode = nodes[toIdx];

      if (fromNode && toNode && fromIdx !== toIdx) {
        const stageRect = stage.getBoundingClientRect();
        const fromRect = fromNode.getBoundingClientRect();
        const toRect = toNode.getBoundingClientRect();

        const x1 = fromRect.left + fromRect.width / 2 - stageRect.left;
        const y1 = fromRect.top - stageRect.top + 6;
        const x2 = toRect.left + toRect.width / 2 - stageRect.left;
        const y2 = toRect.top - stageRect.top + 6;

        const midX = (x1 + x2) / 2;
        const peakY = Math.max(15, y1 - 65);

        hopPath.setAttribute('d', `M ${x1} ${y1} Q ${midX} ${peakY} ${x2} ${y2}`);
        hopPath.style.display = 'block';

        hopBadge.style.left = `${midX}px`;
        hopBadge.style.top = `${peakY - 4}px`;
        hopBadge.textContent = mode === 'forward' ? '+1' : '−1';
        hopBadge.style.display = 'block';

        const currVal = NUMBERS[fromIdx];
        const nextVal = NUMBERS[toIdx];
        const sign = mode === 'forward' ? '+' : '−';
        equationDisplay.innerHTML = `${currVal} <span class="math-hl">${sign} 1</span> = ${nextVal}`;
      } else {
        hopPath.style.display = 'none';
        hopBadge.style.display = 'none';
        equationDisplay.textContent = `${NUMBERS[currentIndex]}`;
      }
    }

    window.addEventListener('resize', update);
    init();
  </script>
</body>
</html>

Let's find the missing number in this trail: **22, 23, 24, __, 26**.

Since we are going forward by 1, the number right after 24 is **25**.

What happens if we turn around and walk all the way back?

When we **count backward**, we take away 1 to find the number that comes right before.

<!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;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      font-family: -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;
    }
    .main-wrap {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    .toggle-bar {
      display: flex;
      background: #e9ecef;
      padding: 4px;
      border-radius: 12px;
      gap: 4px;
    }
    .mode-btn {
      border: none;
      background: transparent;
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .mode-btn.active {
      background: #ffffff;
      color: #ff9800;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }
    .stage {
      position: relative;
      width: 100%;
      background: #ffffff;
      border-radius: 16px;
      padding: 36px 12px 24px;
      box-shadow: 0 4px 14px rgba(0,0,0,0.05);
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .hop-indicator {
      position: absolute;
      top: 10px;
      font-size: 15px;
      font-weight: 700;
      color: #ff9800;
      background: #fff3e0;
      padding: 3px 10px;
      border-radius: 20px;
      opacity: 0;
      transform: translateY(4px);
      transition: all 0.3s ease;
      pointer-events: none;
    }
    .hop-indicator.show {
      opacity: 1;
      transform: translateY(0);
    }
    .track {
      display: flex;
      justify-content: space-between;
      width: 100%;
      position: relative;
      padding: 40px 4px 8px;
    }
    .number-tile {
      flex: 1;
      max-width: 54px;
      aspect-ratio: 1;
      background: #f8f9fa;
      border: 2px solid #e9ecef;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 700;
      color: #1e2945;
      cursor: pointer;
      position: relative;
      transition: border-color 0.2s, background-color 0.2s;
    }
    .number-tile.target {
      border-color: #ff9800;
      background: #fff8f0;
      color: #ff9800;
    }
    .pawn {
      position: absolute;
      width: 32px;
      height: 32px;
      background: #ff9800;
      border: 3px solid #ffffff;
      border-radius: 50%;
      top: 2px;
      left: 0;
      box-shadow: 0 4px 10px rgba(255, 152, 0, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 14px;
      font-weight: 800;
      pointer-events: none;
      transform: translate(-50%, -50%);
      transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.4s ease;
    }
    .controls {
      display: flex;
      gap: 12px;
      width: 100%;
    }
    .action-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 12px;
      border: none;
      background: #ff9800;
      color: #ffffff;
      font-size: 15px;
      font-weight: 700;
      border-radius: 12px;
      cursor: pointer;
      box-shadow: 0 3px 8px rgba(255, 152, 0, 0.3);
      transition: opacity 0.2s, transform 0.1s;
    }
    .action-btn:active {
      transform: scale(0.98);
    }
    .action-btn:disabled {
      background: #cbd5e1;
      box-shadow: none;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <div class="main-wrap">
    <div class="toggle-bar">
      <button class="mode-btn active" id="btnBack">← Backward (−1)</button>
      <button class="mode-btn" id="btnFwd">Forward (+1) →</button>
    </div>

    <div class="stage">
      <div class="hop-indicator" id="hopBadge">−1</div>
      <div class="track" id="track">
        <div class="number-tile" data-val="11">11</div>
        <div class="number-tile" data-val="12">12</div>
        <div class="number-tile" data-val="13">13</div>
        <div class="number-tile" data-val="14">14</div>
        <div class="number-tile" data-val="15">15</div>
        <div class="number-tile" data-val="16">16</div>
        <div class="pawn" id="pawn">●</div>
      </div>
    </div>

    <div class="controls">
      <button class="action-btn" id="stepBtn">Step ←</button>
    </div>
  </div>

  <script>
    const numbers = [11, 12, 13, 14, 15, 16];
    let currentIndex = 4; // Starts at 15
    let mode = 'backward'; // 'backward' | 'forward'

    const tiles = document.querySelectorAll('.number-tile');
    const pawn = document.getElementById('pawn');
    const badge = document.getElementById('hopBadge');
    const stepBtn = document.getElementById('stepBtn');
    const btnBack = document.getElementById('btnBack');
    const btnFwd = document.getElementById('btnFwd');
    const track = document.getElementById('track');

    function updatePawnPosition(animateHop = false) {
      const tile = tiles[currentIndex];
      const trackRect = track.getBoundingClientRect();
      const tileRect = tile.getBoundingClientRect();

      const targetX = (tileRect.left - trackRect.left) + (tileRect.width / 2);
      
      tiles.forEach((t, i) => {
        t.classList.toggle('target', i === currentIndex);
      });

      if (animateHop) {
        badge.textContent = mode === 'backward' ? '−1' : '+1';
        badge.classList.add('show');
        pawn.style.top = '-8px';
        setTimeout(() => {
          pawn.style.top = '12px';
        }, 180);
      }

      pawn.style.left = targetX + 'px';

      // Update button text & states
      if (mode === 'backward') {
        stepBtn.textContent = 'Step ← (−1)';
        stepBtn.disabled = currentIndex <= 0;
      } else {
        stepBtn.textContent = 'Step → (+1)';
        stepBtn.disabled = currentIndex >= numbers.length - 1;
      }
    }

    function doStep() {
      if (mode === 'backward' && currentIndex > 0) {
        currentIndex--;
        updatePawnPosition(true);
      } else if (mode === 'forward' && currentIndex < numbers.length - 1) {
        currentIndex++;
        updatePawnPosition(true);
      }
    }

    function setMode(newMode) {
      mode = newMode;
      btnBack.classList.toggle('active', mode === 'backward');
      btnFwd.classList.toggle('active', mode === 'forward');
      if (mode === 'backward' && currentIndex === 0) {
        currentIndex = numbers.length - 1;
      } else if (mode === 'forward' && currentIndex === numbers.length - 1) {
        currentIndex = 0;
      }
      updatePawnPosition(false);
    }

    btnBack.addEventListener('click', () => setMode('backward'));
    btnFwd.addEventListener('click', () => setMode('forward'));
    stepBtn.addEventListener('click', doStep);

    tiles.forEach((tile, index) => {
      tile.addEventListener('click', () => {
        const jumped = index !== currentIndex;
        currentIndex = index;
        updatePawnPosition(jumped);
      });
    });

    window.addEventListener('resize', () => updatePawnPosition(false));
    
    // Initial layout
    requestAnimationFrame(() => {
      updatePawnPosition(false);
    });
  </script>
</body>
</html>

Let's find the missing number here: **15, 14, 13, __, 11**.

Counting down by 1 from 13 gives us **12**.

Be careful when you step backward from 20! The number right before 20 is **19**, not 21.

Practice counting down like a rocket blastoff whenever you need to count backward: 5, 4, 3, 2, 1, blast off!

math

Counting Forward and Backward by Ones Within 30. Continue number sequences that go up by 1 or down by 1 within 30.

Counting Forwards and Backwards by 1s (Early Level & KS1 Maths)

Count forwards and backwards - up to 30

Paint the Squares - Interactive Number Grid & Sequencing Tool

For Scottish Curriculum for Excellence (CfE) Early Level (P1), emphasize the Concrete-Pictorial-Abstract (CPA) approach. Begin with physical manipulatives (ten-frames, bead strings, cubes) before moving to linear tracks and abstract numeral sequences. Prioritize oral rehearsal of sequences across the difficult decade thresholds ($19 \rightarrow 20$, $20 \rightarrow 19$, $29 \rightarrow 30$, $30 \rightarrow 29$). Explicitly model sentence stems such as 'The numbers are going up by $1$, so the next number is...' and 'The numbers are going down by $1$, so the rule is take away $1$' to satisfy standard MTH 1-13b.

Counting Forward and Backward by Ones Within 30

Counting Forward by Ones

Counting Backward by Ones