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 want to buy a juicy red apple that costs $1, but you only have a $5 bill in your pocket.

Can you still buy the apple even if you do not have a single one-dollar bill?

Yes! **Understanding greater value** means that if you do not have exact coins, you can pay with a larger note or coin where $\text{Amount Paid} > \text{Cost}$.

<!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>Paying with a Larger Bill</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, sans-serif;
    background: transparent;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 12px;
    gap: 14px;
    user-select: none;
  }

  /* Item & Price Header */
  .item-display {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    padding: 8px 18px;
    border-radius: 12px;
    border: 1px solid #e6e6e6;
  }
  .item-emoji { font-size: 32px; line-height: 1; }
  .item-price {
    font-size: 22px;
    font-weight: 700;
    color: #1e2945;
  }

  /* Bill Selection Buttons */
  .bill-options {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 360px;
    justify-content: center;
  }
  .bill-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    background: #ffffff;
    border: 2px solid #e6e6e6;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #1e2945;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .bill-btn .icon { font-size: 20px; }
  .bill-btn.active {
    border-color: #22b7ff;
    background: #f0f9ff;
    box-shadow: 0 0 0 1px #22b7ff;
  }

  /* Visual Comparison Stage */
  .stage {
    width: 100%;
    max-width: 360px;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .bar-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
  }

  .units-track {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 3px;
    height: 28px;
    background: #f1f5f9;
    border-radius: 6px;
    padding: 3px;
  }
  .unit-cell {
    border-radius: 4px;
    background: transparent;
    transition: background-color 0.25s ease;
  }

  /* Unit block colors */
  .unit-cost { background: #3b82f6; }
  .unit-paid { background: #22c55e; }
  .unit-extra { background: #f59e0b; }
  .unit-short { background: #ef4444; }

  /* Comparison Banner */
  .status-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
  }
  .status-valid {
    background: #ecfdf5;
    color: #15803d;
    border: 1px solid #bbf7d0;
  }
  .status-invalid {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
  }
</style>
</head>
<body>

  
  <div class="item-display">
    <span class="item-emoji">🍎</span>
    <span class="item-price">Cost: $3</span>
  </div>

  
  <div class="bill-options">
    <button class="bill-btn" data-val="1">
      <span class="icon">💵</span>
      <span>$1</span>
    </button>
    <button class="bill-btn active" data-val="5">
      <span class="icon">💵</span>
      <span>$5</span>
    </button>
    <button class="bill-btn" data-val="10">
      <span class="icon">💵</span>
      <span>$10</span>
    </button>
  </div>

  
  <div class="stage">
    
    <div class="bar-row">
      <div class="bar-label">
        <span>Cost</span>
        <span>$3</span>
      </div>
      <div class="units-track" id="costTrack"></div>
    </div>

    
    <div class="bar-row">
      <div class="bar-label">
        <span>Paid</span>
        <span id="paidAmtText">$5</span>
      </div>
      <div class="units-track" id="paidTrack"></div>
    </div>

    
    <div id="statusBadge" class="status-badge status-valid">
      $5 &gt; $3 ✓
    </div>
  </div>

<script>
  const COST = 3;
  const costTrack = document.getElementById('costTrack');
  const paidTrack = document.getElementById('paidTrack');
  const paidAmtText = document.getElementById('paidAmtText');
  const statusBadge = document.getElementById('statusBadge');
  const buttons = document.querySelectorAll('.bill-btn');

  // Build 10 unit cells per track
  for (let i = 0; i < 10; i++) {
    const costCell = document.createElement('div');
    costCell.className = 'unit-cell' + (i < COST ? ' unit-cost' : '');
    costTrack.appendChild(costCell);

    const paidCell = document.createElement('div');
    paidCell.className = 'unit-cell';
    paidTrack.appendChild(paidCell);
  }

  function render(paid) {
    paidAmtText.textContent = '$' + paid;
    const paidCells = paidTrack.children;

    for (let i = 0; i < 10; i++) {
      paidCells[i].className = 'unit-cell';
      if (i < paid) {
        if (paid < COST) {
          paidCells[i].classList.add('unit-short');
        } else if (i < COST) {
          paidCells[i].classList.add('unit-paid');
        } else {
          paidCells[i].classList.add('unit-extra');
        }
      }
    }

    if (paid >= COST) {
      statusBadge.className = 'status-badge status-valid';
      statusBadge.innerHTML = `$${paid} &gt; $${COST} ✓`;
    } else {
      statusBadge.className = 'status-badge status-invalid';
      statusBadge.innerHTML = `$${paid} &lt; $${COST} ✗`;
    }
  }

  buttons.forEach(btn => {
    btn.addEventListener('click', () => {
      buttons.forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      render(parseInt(btn.getAttribute('data-val'), 10));
    });
  });

  render(5);
</script>
</body>
</html>

Since you gave the cashier more money than the apple costs, what happens to the extra dollars?

The cashier keeps the cost of the apple and returns the unspent money to you as **change** ($\text{Change} = \text{Amount Paid} - \text{Cost}$).

This shows a part-**whole relationship**: the **Amount Paid** is the whole, while the cost and your change are the two parts ($	ext{Cost} + 	ext{Change} = 	ext{Amount Paid}$).

<!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-On Change</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
    }

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

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

    /* Top Badges */
    .header-row {
      display: flex;
      justify-content: space-between;
      width: 100%;
      gap: 12px;
    }

    .item-card, .paid-card {
      flex: 1;
      background: #ffffff;
      padding: 10px 14px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      border: 1px solid #e6e6e6;
    }

    .icon-badge {
      font-size: 24px;
      line-height: 1;
    }

    .card-info {
      display: flex;
      flex-direction: column;
    }

    .card-label {
      font-size: 12px;
      color: #6b7280;
      text-transform: uppercase;
      font-weight: 600;
      letter-spacing: 0.5px;
    }

    .card-val {
      font-size: 18px;
      font-weight: 800;
      color: #1e2945;
    }

    .paid-card .card-val {
      color: #10b981;
    }

    /* Number Track Container */
    .track-wrapper {
      width: 100%;
      background: #ffffff;
      border-radius: 12px;
      padding: 20px 14px 16px;
      border: 1px solid #e6e6e6;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* SVG Track for dynamic hops */
    .svg-track {
      width: 100%;
      height: 60px;
      overflow: visible;
    }

    .track-line {
      stroke: #e2e8f0;
      stroke-width: 4;
      stroke-linecap: round;
    }

    .hop-arc {
      fill: none;
      stroke: #10b981;
      stroke-width: 3.5;
      stroke-dasharray: 6 3;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .hop-arc.active {
      opacity: 1;
    }

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

    .hop-label.active {
      opacity: 1;
    }

    /* Track Nodes */
    .nodes-row {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 4px;
      position: relative;
    }

    .node {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 44px;
      position: relative;
      cursor: pointer;
    }

    .node-circle {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: #f1f5f9;
      color: #475569;
      font-size: 15px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.25s ease;
      border: 2px solid transparent;
    }

    .node.start .node-circle {
      background: #eff6ff;
      color: #2563eb;
      border-color: #93c5fd;
    }

    .node.target .node-circle {
      background: #ecfdf5;
      color: #059669;
      border-color: #a7f3d0;
    }

    .node.reached .node-circle {
      background: #10b981;
      color: #ffffff;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    }

    .node-tag {
      font-size: 11px;
      font-weight: 700;
      margin-top: 6px;
      color: #94a3b8;
    }

    .node.start .node-tag {
      color: #2563eb;
    }

    .node.target .node-tag {
      color: #059669;
    }

    /* Output Summary Banner */
    .summary-card {
      width: 100%;
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .summary-title {
      font-size: 14px;
      font-weight: 700;
      color: #065f46;
    }

    .change-coins {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .coin-badge {
      background: #10b981;
      color: #ffffff;
      font-size: 13px;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: 20px;
      opacity: 0.2;
      transform: scale(0.9);
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .coin-badge.revealed {
      opacity: 1;
      transform: scale(1);
    }

    .total-change {
      font-size: 16px;
      font-weight: 800;
      color: #047857;
      margin-left: 8px;
    }

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

    .btn {
      background: #ffffff;
      border: 1px solid #d1d5db;
      color: #374151;
      font-size: 14px;
      font-weight: 600;
      padding: 8px 16px;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s, border-color 0.2s;
    }

    .btn:hover {
      background: #f3f4f6;
    }

    .btn-primary {
      background: #10b981;
      border-color: #10b981;
      color: #ffffff;
    }

    .btn-primary:hover {
      background: #059669;
      border-color: #059669;
    }
  </style>
</head>
<body>

  <div class="main-stage">
    
    
    <div class="header-row">
      <div class="item-card">
        <div class="icon-badge">🍎</div>
        <div class="card-info">
          <span class="card-label">Price</span>
          <span class="card-val">7p</span>
        </div>
      </div>

      <div class="paid-card">
        <div class="icon-badge">🪙</div>
        <div class="card-info">
          <span class="card-label">Paid</span>
          <span class="card-val">10p</span>
        </div>
      </div>
    </div>

    
    <div class="track-wrapper">
      <svg class="svg-track" viewBox="0 0 440 60">
        
        <line x1="44" y1="52" x2="396" y2="52" class="track-line" />
        
        
        <path d="M 44 48 Q 102.5 12 161 48" class="hop-arc" id="arc-0" />
        <text x="102.5" y="18" class="hop-label" id="lbl-0">+1p</text>

        
        <path d="M 161 48 Q 219.5 12 278 48" class="hop-arc" id="arc-1" />
        <text x="219.5" y="18" class="hop-label" id="lbl-1">+1p</text>

        
        <path d="M 278 48 Q 337 12 396 48" class="hop-arc" id="arc-2" />
        <text x="337" y="18" class="hop-label" id="lbl-2">+1p</text>
      </svg>

      <div class="nodes-row">
        <div class="node start reached" id="node-0" onclick="setStep(0)">
          <div class="node-circle">7p</div>
          <span class="node-tag">Start</span>
        </div>
        <div class="node" id="node-1" onclick="setStep(1)">
          <div class="node-circle">8p</div>
          <span class="node-tag"></span>
        </div>
        <div class="node" id="node-2" onclick="setStep(2)">
          <div class="node-circle">9p</div>
          <span class="node-tag"></span>
        </div>
        <div class="node target" id="node-3" onclick="setStep(3)">
          <div class="node-circle">10p</div>
          <span class="node-tag">Paid</span>
        </div>
      </div>
    </div>

    
    <div class="summary-card">
      <span class="summary-title">Change Counted:</span>
      <div class="change-coins">
        <div class="coin-badge" id="coin-0">+1p</div>
        <div class="coin-badge" id="coin-1">+1p</div>
        <div class="coin-badge" id="coin-2">+1p</div>
        <span class="total-change" id="total-text">= 0p</span>
      </div>
    </div>

    
    <div class="controls">
      <button class="btn" onclick="prevStep()">← Step</button>
      <button class="btn btn-primary" id="play-btn" onclick="togglePlay()">Pause ⏸</button>
      <button class="btn" onclick="nextStep()">Step →</button>
    </div>

  </div>

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

    function render() {
      // Update nodes
      for (let i = 0; i <= maxSteps; i++) {
        const node = document.getElementById('node-' + i);
        if (i <= currentStep) {
          node.classList.add('reached');
        } else {
          node.classList.remove('reached');
        }
      }

      // Update arcs & hop labels
      for (let i = 0; i < maxSteps; i++) {
        const arc = document.getElementById('arc-' + i);
        const lbl = document.getElementById('lbl-' + i);
        const coin = document.getElementById('coin-' + i);

        if (i < currentStep) {
          arc.classList.add('active');
          lbl.classList.add('active');
          coin.classList.add('revealed');
        } else {
          arc.classList.remove('active');
          lbl.classList.remove('active');
          coin.classList.remove('revealed');
        }
      }

      // Update total
      document.getElementById('total-text').textContent = '= ' + currentStep + 'p';
    }

    function setStep(step) {
      currentStep = step;
      render();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % (maxSteps + 1);
      render();
    }

    function prevStep() {
      currentStep = (currentStep - 1 + (maxSteps + 1)) % (maxSteps + 1);
      render();
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      document.getElementById('play-btn').textContent = isPlaying ? 'Pause ⏸' : 'Play ▶';
      if (isPlaying) {
        startTimer();
      } else {
        clearInterval(timer);
      }
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        if (isPlaying) {
          nextStep();
        }
      }, 3000);
    }

    // Init
    render();
    startTimer();
  </script>
</body>
</html>

We can see money as a **part-whole relationship**: the **Amount Paid** is the Whole, while the **Cost** and the **Change** are the two parts ($\text{Cost} + \text{Change} = \text{Amount Paid}$).

Do you always get change every time you buy something?

A simple counting-**on strategy** for **early learners** is to start at the price and count up along a number track until you reach the amount paid.

If the money given equals the exact price ($\text{Amount Paid} = \text{Cost}$), zero change is due ($0\text{p}$). Whenever $\text{Amount Paid} > \text{Cost}$, change must always be received.

<!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: system-ui, -apple-system, sans-serif; }
    
    body {
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px;
      user-select: none;
    }

    .header-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      max-width: 480px;
      gap: 12px;
    }

    .item-card, .paid-card {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 12px;
      padding: 8px 14px;
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    }

    .item-card { border-color: #ff9800; }
    .paid-card { border-color: #22b7ff; }

    .icon-lg { font-size: 24px; line-height: 1; }
    .val-text { font-size: 15px; font-weight: 700; }
    .sub-lbl { font-size: 11px; color: #6b7280; text-transform: uppercase; font-weight: 600; }

    .track-container {
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 14px;
      padding: 16px 12px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    }

    .track-svg {
      width: 100%;
      height: 110px;
      overflow: visible;
    }

    .hop-path {
      fill: none;
      stroke: #10b981;
      stroke-width: 3;
      stroke-dasharray: 6 3;
      opacity: 0;
      transition: opacity 0.3s ease, stroke-dashoffset 0.4s ease;
    }

    .hop-path.active {
      opacity: 1;
      stroke-dasharray: none;
    }

    .hop-badge {
      fill: #10b981;
      opacity: 0;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .hop-badge.active {
      opacity: 1;
    }

    .hop-text {
      fill: #ffffff;
      font-size: 11px;
      font-weight: 800;
      text-anchor: middle;
      dominant-baseline: central;
    }

    .track-node {
      transition: all 0.3s ease;
    }

    .track-node.reached circle {
      fill: #10b981;
      stroke: #059669;
    }

    .track-node.start circle {
      fill: #ff9800;
      stroke: #d97706;
    }

    .track-node.target circle {
      fill: #22b7ff;
      stroke: #0284c7;
    }

    .result-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 38px;
      margin-top: 4px;
    }

    .coin-tag {
      background: #e6f4ea;
      color: #0d652d;
      border: 1px solid #10b981;
      border-radius: 8px;
      padding: 4px 8px;
      font-size: 13px;
      font-weight: 700;
      opacity: 0;
      transform: translateY(6px);
      transition: all 0.3s ease;
    }

    .coin-tag.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .total-badge {
      background: #10b981;
      color: #ffffff;
      padding: 6px 14px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 800;
      opacity: 0;
      transform: scale(0.9);
      transition: all 0.3s ease;
    }

    .total-badge.visible {
      opacity: 1;
      transform: scale(1);
    }

    .controls-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 480px;
    }

    .ctrl-btn {
      background: #ffffff;
      border: 1px solid #d1d5db;
      color: #1e2945;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }

    .ctrl-btn:active { background: #f3f4f6; }

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

    .step-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #d1d5db;
      cursor: pointer;
      transition: background 0.3s ease, transform 0.3s ease;
    }

    .step-dot.active {
      background: #10b981;
      transform: scale(1.25);
    }
  </style>
</head>
<body>

  <div class="header-row">
    <div class="item-card">
      <span class="icon-lg">🍎</span>
      <div>
        <div class="sub-lbl">Price</div>
        <div class="val-text">70p</div>
      </div>
    </div>
    <div style="font-size: 18px; color: #9ca3af; font-weight: bold;">→</div>
    <div class="paid-card">
      <span class="icon-lg">🪙</span>
      <div>
        <div class="sub-lbl">Paid</div>
        <div class="val-text">£1.00</div>
      </div>
    </div>
  </div>

  <div class="track-container">
    <svg class="track-svg" viewBox="0 0 340 100">
      <line x1="30" y1="75" x2="310" y2="75" stroke="#e5e7eb" stroke-width="6" stroke-linecap="round"/>
      <line id="progressLine" x1="30" y1="75" x2="30" y2="75" stroke="#10b981" stroke-width="6" stroke-linecap="round" style="transition: x2 0.35s ease;"/>

      
      
      <path id="arc1" class="hop-path" d="M 35 65 Q 80 15 125 65"/>
      <g id="badge1" class="hop-badge">
        <rect x="62" y="16" width="36" height="18" rx="9"/>
        <text x="80" y="25" class="hop-text">+10p</text>
      </g>

      
      <path id="arc2" class="hop-path" d="M 125 65 Q 170 15 215 65"/>
      <g id="badge2" class="hop-badge">
        <rect x="152" y="16" width="36" height="18" rx="9"/>
        <text x="170" y="25" class="hop-text">+10p</text>
      </g>

      
      <path id="arc3" class="hop-path" d="M 215 65 Q 260 15 305 65"/>
      <g id="badge3" class="hop-badge">
        <rect x="242" y="16" width="36" height="18" rx="9"/>
        <text x="260" y="25" class="hop-text">+10p</text>
      </g>

      
      
      <g id="node0" class="track-node start">
        <circle cx="35" cy="75" r="10" stroke-width="3"/>
        <text x="35" y="93" font-size="12" font-weight="700" fill="#1e2945" text-anchor="middle">70p</text>
      </g>

      
      <g id="node1" class="track-node">
        <circle cx="125" cy="75" r="8" fill="#e5e7eb" stroke="#d1d5db" stroke-width="2"/>
        <text x="125" y="93" font-size="12" font-weight="600" fill="#6b7280" text-anchor="middle">80p</text>
      </g>

      
      <g id="node2" class="track-node">
        <circle cx="215" cy="75" r="8" fill="#e5e7eb" stroke="#d1d5db" stroke-width="2"/>
        <text x="215" y="93" font-size="12" font-weight="600" fill="#6b7280" text-anchor="middle">90p</text>
      </g>

      
      <g id="node3" class="track-node target">
        <circle cx="305" cy="75" r="10" stroke-width="3"/>
        <text x="305" y="93" font-size="12" font-weight="700" fill="#1e2945" text-anchor="middle">£1.00</text>
      </g>
    </svg>

    <div class="result-row">
      <div id="tag1" class="coin-tag">+10p</div>
      <div id="tag2" class="coin-tag">+10p</div>
      <div id="tag3" class="coin-tag">+10p</div>
      <div id="totalBadge" class="total-badge">Change = 30p</div>
    </div>
  </div>

  <div class="controls-row">
    <button class="ctrl-btn" id="prevBtn" aria-label="Previous">◀</button>
    <div class="dots-row">
      <div class="step-dot active" data-step="0"></div>
      <div class="step-dot" data-step="1"></div>
      <div class="step-dot" data-step="2"></div>
      <div class="step-dot" data-step="3"></div>
    </div>
    <button class="ctrl-btn" id="nextBtn" aria-label="Next">▶</button>
  </div>

  <script>
    const totalSteps = 4;
    let currentStep = 0;
    let autoTimer = null;

    const nodeX = [35, 125, 215, 305];

    function updateView(step) {
      currentStep = step;

      // Progress bar line
      document.getElementById('progressLine').setAttribute('x2', nodeX[step]);

      // Hops & Badges
      for (let i = 1; i <= 3; i++) {
        const arc = document.getElementById(`arc${i}`);
        const badge = document.getElementById(`badge${i}`);
        const tag = document.getElementById(`tag${i}`);
        
        if (step >= i) {
          arc.classList.add('active');
          badge.classList.add('active');
          tag.classList.add('visible');
        } else {
          arc.classList.remove('active');
          badge.classList.remove('active');
          tag.classList.remove('visible');
        }
      }

      // Nodes coloring
      for (let i = 1; i <= 2; i++) {
        const node = document.getElementById(`node${i}`);
        if (step >= i) {
          node.classList.add('reached');
        } else {
          node.classList.remove('reached');
        }
      }

      // Total Badge
      const totalBadge = document.getElementById('totalBadge');
      if (step === 3) {
        totalBadge.classList.add('visible');
      } else {
        totalBadge.classList.remove('visible');
      }

      // Dots
      document.querySelectorAll('.step-dot').forEach((dot, idx) => {
        dot.classList.toggle('active', idx === step);
      });
    }

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

    function prevStep() {
      updateView((currentStep - 1 + totalSteps) % totalSteps);
    }

    document.getElementById('nextBtn').addEventListener('click', () => {
      resetAuto();
      nextStep();
    });

    document.getElementById('prevBtn').addEventListener('click', () => {
      resetAuto();
      prevStep();
    });

    document.querySelectorAll('.step-dot').forEach((dot) => {
      dot.addEventListener('click', (e) => {
        resetAuto();
        const step = parseInt(e.target.getAttribute('data-step'), 10);
        updateView(step);
      });
    });

    function startAuto() {
      autoTimer = setInterval(nextStep, 3200);
    }

    function resetAuto() {
      clearInterval(autoTimer);
      startAuto();
    }

    // Initialize
    updateView(0);
    startAuto();
  </script>
</body>
</html>

Next time you are at the store, look at your money and the price tag — if your money is bigger, get ready to hold out your hand for change!

A great method for **early learners** is the counting-**on strategy**: start at the item's cost on a number track and count up until you reach the **Amount Paid**.

math

Paying with a Larger Coin or Bill. Understand when a payment is greater than the cost of an item and change is due.

Solve Problems Including Those Involving Giving Change (KS1 / CfE First Level)

Toy Shop Money Game: Finding Change and Paying with Coins

How to Calculate Change using UK Coins and Notes

Curriculum for Excellence Benchmarks: Money - Making Change up to 20p and £1

At Early Level (P1) transitioning toward First Level (MNU 1-09a), the concept of change must be anchored in tactile role-play and visual models before introducing purely abstract subtraction. Using a classroom 'tuck shop' or 'toy shop' setup allows children to physically exchange a larger coin for goods plus change. Concrete manipulatives like 10-frames, Numicon, and number tracks bridge the gap between counting on and the part-whole subtraction structure of money.

Paying with a Larger Coin or Bill

Paying with More

Getting Change Back

The Part-Whole Relationship