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 walking into a bakery and smelling warm, fresh chocolate-chip cookies! How do you get to take one home?

You give the baker **money**, and the baker gives you the cookie.

Why do people everywhere use coins and dollar bills instead of just trading toys or rocks?

**Money** is a tool we use to pay for things we need and want.

It can be shiny metal **coins** or paper **bills** that everyone in our community agrees have value.

<!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>Coins and Notes</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;
      -webkit-user-select: none;
    }

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

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

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

    .nav-btn.active {
      color: #0f172a;
      outline: 2px solid #22b7ff;
      background: #ffffff;
      box-shadow: 0 4px 10px rgba(34, 183, 255, 0.15);
    }

    .stage-container {
      position: relative;
      width: 100%;
      max-width: 420px;
      height: 250px;
      background: #ffffff;
      border-radius: 18px;
      box-shadow: 0 4px 14px rgba(0,0,0,0.05);
      overflow: hidden;
    }

    .panel {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transform: translateY(8px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      padding: 16px;
    }

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

    /* Coins Panel */
    .coins-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin-bottom: 12px;
    }

    .coin {
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      box-shadow: inset 0 2px 4px rgba(255,255,255,0.7), 0 4px 8px rgba(0,0,0,0.12);
      border: 3px solid rgba(255,255,255,0.6);
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .coin:active {
      transform: scale(0.96);
    }

    .coin-gold {
      width: 76px;
      height: 76px;
      background: radial-gradient(circle at 35% 35%, #ffd966, #d4a017);
      color: #5c4300;
      font-size: 20px;
    }

    .coin-silver {
      width: 66px;
      height: 66px;
      background: radial-gradient(circle at 35% 35%, #f1f5f9, #94a3b8);
      color: #334155;
      font-size: 17px;
    }

    .coin-copper {
      width: 58px;
      height: 58px;
      background: radial-gradient(circle at 35% 35%, #fca5a5, #b45309);
      color: #451a03;
      font-size: 15px;
    }

    /* Notes Panel */
    .notes-col {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
      max-width: 280px;
      align-items: center;
      margin-bottom: 12px;
    }

    .note {
      width: 100%;
      height: 58px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      font-weight: 700;
      box-shadow: 0 3px 6px rgba(0,0,0,0.08);
      border: 2px dashed rgba(255,255,255,0.5);
      cursor: pointer;
      transition: transform 0.2s ease;
    }

    .note:active {
      transform: scale(0.98);
    }

    .note-5 {
      background: linear-gradient(135deg, #0ea5e9, #0284c7);
      color: #ffffff;
    }

    .note-10 {
      background: linear-gradient(135deg, #f97316, #ea580c);
      color: #ffffff;
    }

    .note-20 {
      background: linear-gradient(135deg, #a855f7, #7e22ce);
      color: #ffffff;
    }

    .note-symbol {
      font-size: 20px;
      opacity: 0.85;
    }

    .note-val {
      font-size: 22px;
      letter-spacing: 0.5px;
    }

    /* Agreed Value Panel */
    .agree-flow {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      margin-bottom: 14px;
    }

    .person-box {
      background: #f8fafc;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      font-size: 26px;
    }

    .agree-center {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .deal-icon {
      font-size: 32px;
      animation: pulse 2s infinite ease-in-out;
    }

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

    .badge-label {
      background: #f1f5f9;
      color: #475569;
      padding: 5px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.3px;
    }

    .hint-label {
      font-size: 13px;
      color: #94a3b8;
      margin-top: 4px;
    }
  </style>
</head>
<body>

  <div class="nav-bar">
    <button class="nav-btn active" data-target="0">🪙 Coins</button>
    <button class="nav-btn" data-target="1">💵 Notes</button>
    <button class="nav-btn" data-target="2">🤝 Value</button>
  </div>

  <div class="stage-container">
    
    <div class="panel active" id="p0">
      <div class="coins-row">
        <div class="coin coin-gold">£1</div>
        <div class="coin coin-silver">50p</div>
        <div class="coin coin-copper">2p</div>
      </div>
      <div class="badge-label">Metal Coins</div>
      <div class="hint-label">Round • Shiny • Metal</div>
    </div>

    
    <div class="panel" id="p1">
      <div class="notes-col">
        <div class="note note-5">
          <span class="note-symbol">✦</span>
          <span class="note-val">£5</span>
        </div>
        <div class="note note-10">
          <span class="note-symbol">✦</span>
          <span class="note-val">£10</span>
        </div>
        <div class="note note-20">
          <span class="note-symbol">✦</span>
          <span class="note-val">£20</span>
        </div>
      </div>
      <div class="badge-label">Paper & Polymer Notes</div>
    </div>

    
    <div class="panel" id="p2">
      <div class="agree-flow">
        <div class="person-box">
          <span>🧑</span>
        </div>
        <div class="agree-center">
          <div class="deal-icon">🤝</div>
          <div style="font-weight: 700; color: #22b7ff; font-size: 18px;">=</div>
        </div>
        <div class="person-box">
          <span>🏪</span>
        </div>
      </div>
      <div class="badge-label">Agreed Value</div>
      <div class="hint-label">Everyone agrees what it is worth</div>
    </div>
  </div>

  <script>
    const btns = document.querySelectorAll('.nav-btn');
    const panels = document.querySelectorAll('.panel');
    let currentIndex = 0;
    let autoTimer = null;

    function showTab(idx) {
      currentIndex = idx;
      btns.forEach((b, i) => b.classList.toggle('active', i === idx));
      panels.forEach((p, i) => p.classList.toggle('active', i === idx));
    }

    btns.forEach((btn, idx) => {
      btn.addEventListener('click', () => {
        clearInterval(autoTimer);
        showTab(idx);
      });
    });

    // Auto cycle peacefully every 4.5s
    autoTimer = setInterval(() => {
      showTab((currentIndex + 1) % panels.length);
    }, 4500);
  </script>
</body>
</html>

So what kinds of things can you get when you spend money?

**Goods** are items you can touch, hold, and take home with you.

Everyday things like juicy apples, warm shoes, pencils, and storybooks are all goods.

<!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: #f8fafc;
    color: #1e293b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }

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

  /* Goods Selector Tabs */
  .goods-nav {
    display: flex;
    gap: 8px;
    width: 100%;
    justify-content: center;
  }

  .nav-btn {
    flex: 1;
    max-width: 90px;
    padding: 8px 4px;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transition: all 0.2s ease;
  }

  .nav-btn .label {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
  }

  .nav-btn.active {
    border-color: #3b82f6;
    background: #eff6ff;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
  }

  .nav-btn.active .label {
    color: #1d4ed8;
  }

  /* Exchange Arena */
  .exchange-card {
    width: 100%;
    background: #ffffff;
    border-radius: 20px;
    border: 2px solid #e2e8f0;
    padding: 16px 12px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  }

  .entity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 90px;
  }

  .bubble {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    transition: transform 0.3s ease;
  }

  .bubble.money {
    background: #fef9c3;
    border-color: #fde047;
  }

  .bubble.good {
    background: #f0fdf4;
    border-color: #bbf7d0;
  }

  .entity-title {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
  }

  .trade-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .arrow-symbol {
    font-size: 26px;
    color: #3b82f6;
    font-weight: 900;
  }

  .trade-label {
    font-size: 11px;
    font-weight: 700;
    color: #3b82f6;
    background: #dbeafe;
    padding: 3px 8px;
    border-radius: 12px;
  }

  /* Feature Badges */
  .features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }

  .feat-card {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    padding: 10px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .feat-icon {
    font-size: 20px;
  }

  .feat-text {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
  }
</style>
</head>
<body>

<div class="stage">
  
  <div class="goods-nav">
    <button class="nav-btn active" onclick="setGood(0)">
      <span>🍎</span>
      <span class="label">Apple</span>
    </button>
    <button class="nav-btn" onclick="setGood(1)">
      <span>👟</span>
      <span class="label">Shoes</span>
    </button>
    <button class="nav-btn" onclick="setGood(2)">
      <span>✏️</span>
      <span class="label">Pencil</span>
    </button>
    <button class="nav-btn" onclick="setGood(3)">
      <span>📚</span>
      <span class="label">Book</span>
    </button>
  </div>

  
  <div class="exchange-card">
    <div class="entity">
      <div class="bubble money">🪙</div>
      <div class="entity-title">Money</div>
    </div>

    <div class="trade-arrow">
      <div class="arrow-symbol">⇄</div>
      <span class="trade-label">Buy</span>
    </div>

    <div class="entity">
      <div class="bubble good" id="goodEmoji">🍎</div>
      <div class="entity-title" id="goodName">Good</div>
    </div>
  </div>

  
  <div class="features-grid">
    <div class="feat-card">
      <span class="feat-icon">🤲</span>
      <span class="feat-text">Touch & Hold</span>
    </div>
    <div class="feat-card">
      <span class="feat-icon">🎒</span>
      <span class="feat-text">Put in Bag</span>
    </div>
  </div>
</div>

<script>
  const goods = [
    { emoji: '🍎', name: 'Apple' },
    { emoji: '👟', name: 'Shoes' },
    { emoji: '✏️', name: 'Pencil' },
    { emoji: '📚', name: 'Book' }
  ];

  let activeIndex = 0;
  const buttons = document.querySelectorAll('.nav-btn');
  const goodEmoji = document.getElementById('goodEmoji');
  const goodName = document.getElementById('goodName');

  function setGood(idx) {
    activeIndex = idx;
    buttons.forEach((btn, i) => {
      btn.classList.toggle('active', i === idx);
    });
    goodEmoji.textContent = goods[idx].emoji;
    goodName.textContent = goods[idx].name;
  }
</script>
</body>
</html>

Can money also pay for something you cannot hold in your hands or put in a bag?

A **service** is an action or helpful job that someone does for you.

When a barber cuts your hair, a doctor checks your health, or a bus driver drives you to school, you are paying for their **service**.

<!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>Goods vs Services</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .main-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 580px;
    }

    .panel {
      border-radius: 12px;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transition: box-shadow 0.25s ease;
    }

    .panel-goods {
      background-color: #eff6ff;
      border: 2px solid #bfdbfe;
    }

    .panel-services {
      background-color: #f0fdf4;
      border: 2px solid #bbf7d0;
    }

    .panel-title {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 2px;
    }

    .panel-subtitle {
      font-size: 13px;
      color: #64748b;
      margin-bottom: 12px;
    }

    .items-row {
      display: flex;
      justify-content: center;
      gap: 8px;
      width: 100%;
      margin-bottom: 12px;
    }

    .item-btn {
      flex: 1;
      max-width: 68px;
      aspect-ratio: 1;
      background: #ffffff;
      border: 2px solid rgba(0, 0, 0, 0.08);
      border-radius: 10px;
      font-size: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    .panel-goods .item-btn.selected {
      border-color: #3b82f6;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
    }

    .panel-services .item-btn.selected {
      border-color: #22c55e;
      box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
    }

    .exchange-box {
      width: 100%;
      background: #ffffff;
      border-radius: 10px;
      padding: 12px 8px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      border: 1px solid rgba(0, 0, 0, 0.06);
    }

    .bubble {
      font-size: 28px;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f8fafc;
      border-radius: 50%;
    }

    .arrows {
      font-size: 16px;
      font-weight: bold;
      color: #94a3b8;
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 1.1;
    }

    .arrow-top {
      color: #eab308;
    }

    .arrow-bottom {
      color: #64748b;
    }

    .footer-prompt {
      margin-top: 10px;
      font-size: 13px;
      color: #6b7280;
      font-weight: 500;
    }

    @media (max-width: 420px) {
      .main-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .panel {
        padding: 12px 10px;
      }
      .panel-title {
        font-size: 16px;
      }
      .item-btn {
        max-width: 60px;
        font-size: 22px;
      }
      .bubble {
        font-size: 24px;
        width: 38px;
        height: 38px;
      }
    }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div class="panel panel-goods">
      <div class="panel-title">Goods</div>
      <div class="panel-subtitle">Physical item</div>
      
      <div class="items-row">
        <button class="item-btn selected" onclick="selectGood('🍎')" aria-label="Apple">🍎</button>
        <button class="item-btn" onclick="selectGood('📚')" aria-label="Book">📚</button>
        <button class="item-btn" onclick="selectGood('👕')" aria-label="Shirt">👕</button>
      </div>

      <div class="exchange-box">
        <div class="bubble">💷</div>
        <div class="arrows">
          <span class="arrow-top">→</span>
          <span class="arrow-bottom">←</span>
        </div>
        <div class="bubble" id="good-display">🍎</div>
      </div>
    </div>

    
    <div class="panel panel-services">
      <div class="panel-title">Services</div>
      <div class="panel-subtitle">Helpful action</div>

      <div class="items-row">
        <button class="item-btn selected" onclick="selectService('✂️')" aria-label="Haircut">✂️</button>
        <button class="item-btn" onclick="selectService('🩺')" aria-label="Doctor">🩺</button>
        <button class="item-btn" onclick="selectService('🚌')" aria-label="Bus ride">🚌</button>
      </div>

      <div class="exchange-box">
        <div class="bubble">💷</div>
        <div class="arrows">
          <span class="arrow-top">→</span>
          <span class="arrow-bottom">←</span>
        </div>
        <div class="bubble" id="service-display">✂️</div>
      </div>
    </div>
  </div>

  <div class="footer-prompt">Tap icons to trade</div>

  <script>
    function selectGood(emoji) {
      document.getElementById('good-display').textContent = emoji;
      const btns = document.querySelectorAll('.panel-goods .item-btn');
      btns.forEach(btn => {
        if (btn.textContent.trim() === emoji) {
          btn.classList.add('selected');
        } else {
          btn.classList.remove('selected');
        }
      });
    }

    function selectService(emoji) {
      document.getElementById('service-display').textContent = emoji;
      const btns = document.querySelectorAll('.panel-services .item-btn');
      btns.forEach(btn => {
        if (btn.textContent.trim() === emoji) {
          btn.classList.add('selected');
        } else {
          btn.classList.remove('selected');
        }
      });
    }
  </script>
</body>
</html>

Next time you visit a shop, look closely at what is happening around you.

Are people paying money for a **good** they can take home, or a **service** someone is doing to help them?

math

Discovering What Money Is and Why We Use It. Explain that money is used to pay for goods, services, and everyday items in our community.

Early Level Numeracy and Mathematics: Exploring Money

Curriculum for Excellence: Early Level Money (MNU 0-09a)

Early Years Mathematics: Role Play, Sorting, and Value in the Real World

At Early Level (Primary 1, ages 4–5), concrete manipulation and experiential role-play are paramount. In an increasingly cashless society, young learners frequently witness tap-and-go card payments, making physical cash exchange in classroom role-play (e.g., bakeries, bus journeys, post offices) essential to build foundational understanding that money is exchanged for both tangible items (goods) and helpful actions (services). Pair concrete coin handling with subitising/dot patterns to bridge physical appearance with numerical value before moving to multi-coin addition.

Discovering What Money Is and Why We Use It

What Is Money?

Buying Goods