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 opening your piggy bank to buy a cool toy. You find green paper bills and shiny coins mixed together inside!

To find out how much you have, we count the paper **dollars** first, and then count the **cents** from coins.

<!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>Combining Dollar Bills and Coins</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    /* Step Navigation */
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 440px;
      justify-content: center;
      margin-bottom: 8px;
    }
    .step-btn {
      flex: 1;
      padding: 8px 4px;
      font-size: 14px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: all 0.25s ease;
    }
    .step-btn.active {
      background: #10b981;
      color: #ffffff;
      border-color: #10b981;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
    }
    .step-btn.cents-active {
      background: #3b82f6;
      color: #ffffff;
      border-color: #3b82f6;
      box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
    }
    .step-btn.total-active {
      background: #8b5cf6;
      color: #ffffff;
      border-color: #8b5cf6;
      box-shadow: 0 2px 6px rgba(139, 92, 246, 0.25);
    }

    /* Money Area */
    .money-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 480px;
      margin-bottom: 10px;
    }

    .group-box {
      background: #ffffff;
      border: 2px solid transparent;
      border-radius: 12px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      min-height: 140px;
      justify-content: center;
      transition: all 0.3s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .group-box.active-dollars {
      border-color: #10b981;
      background: #f0fdf4;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    }
    .group-box.active-cents {
      border-color: #3b82f6;
      background: #eff6ff;
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
    }
    .group-box.dimmed {
      opacity: 0.45;
    }

    /* Bills layout */
    .bills-stack {
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: center;
      width: 100%;
    }
    .bill {
      width: 85%;
      max-width: 130px;
      height: 34px;
      background: #dcfce7;
      border: 1.5px solid #16a34a;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 8px;
      font-weight: 700;
      color: #15803d;
      font-size: 13px;
      position: relative;
    }
    .bill::after {
      content: "💵";
      font-size: 12px;
      opacity: 0.7;
    }

    /* Coins layout */
    .coins-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      justify-content: center;
      width: 100%;
    }
    .coin {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-weight: 700;
      box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.1);
    }
    .coin-quarter {
      width: 44px;
      height: 44px;
      background: #e2e8f0;
      border: 2px solid #94a3b8;
      color: #334155;
      font-size: 13px;
    }
    .coin-dime {
      width: 34px;
      height: 34px;
      background: #f1f5f9;
      border: 2px solid #cbd5e1;
      color: #475569;
      font-size: 11px;
    }
    .coin-nickel {
      width: 38px;
      height: 38px;
      background: #fed7aa;
      border: 2px solid #f97316;
      color: #9a3412;
      font-size: 11px;
    }

    /* Subtotal Tags */
    .subtotal-badge {
      font-size: 15px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 20px;
      background: #f1f5f9;
      color: #64748b;
      transition: all 0.3s ease;
    }
    .badge-green {
      background: #10b981;
      color: #ffffff;
    }
    .badge-blue {
      background: #3b82f6;
      color: #ffffff;
    }

    /* Result Combined Bar */
    .result-bar {
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      border: 2px solid transparent;
      transition: all 0.3s ease;
    }
    .result-bar.active {
      border-color: #8b5cf6;
      background: #faf5ff;
      box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
    }

    .equation-part {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }
    .eq-label {
      font-size: 11px;
      font-weight: 600;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .eq-val {
      font-size: 20px;
      font-weight: 700;
    }
    .val-dollars { color: #10b981; }
    .val-cents { color: #3b82f6; }
    .val-op { font-size: 20px; color: #94a3b8; font-weight: 700; }

    .final-price {
      font-size: 28px;
      font-weight: 800;
      display: flex;
      align-items: baseline;
      padding: 2px 12px;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }
    .final-currency { color: #10b981; font-size: 20px; margin-right: 1px; }
    .final-dollars { color: #10b981; }
    .final-dot { color: #64748b; margin: 0 1px; }
    .final-cents { color: #3b82f6; }

    /* Play/Pause bottom row */
    .player-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 4px;
    }
    .play-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 4px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="step-btn active" id="btn-0">1. Dollars</button>
    <button class="step-btn" id="btn-1">2. Cents</button>
    <button class="step-btn" id="btn-2">3. Total</button>
  </div>

  
  <div class="money-container">
    
    <div class="group-box active-dollars" id="box-dollars">
      <div class="bills-stack">
        <div class="bill"><span>$1</span><span>$1</span></div>
        <div class="bill"><span>$1</span><span>$1</span></div>
        <div class="bill"><span>$1</span><span>$1</span></div>
      </div>
      <div class="subtotal-badge badge-green" id="badge-dollars">$3</div>
    </div>

    
    <div class="group-box dimmed" id="box-cents">
      <div class="coins-grid">
        <div class="coin coin-quarter">25¢</div>
        <div class="coin coin-dime">10¢</div>
        <div class="coin coin-nickel">5¢</div>
      </div>
      <div class="subtotal-badge" id="badge-cents">40¢</div>
    </div>
  </div>

  
  <div class="result-bar" id="result-bar">
    <div class="equation-part">
      <span class="eq-label">Dollars</span>
      <span class="eq-val val-dollars">$3</span>
    </div>
    <span class="val-op">+</span>
    <div class="equation-part">
      <span class="eq-label">Cents</span>
      <span class="eq-val val-cents">40¢</span>
    </div>
    <span class="val-op">=</span>
    <div class="final-price">
      <span class="final-currency">$</span>
      <span class="final-dollars">3</span>
      <span class="final-dot">.</span>
      <span class="final-cents">40</span>
    </div>
  </div>

  
  <div class="player-row">
    <button class="play-btn" id="play-btn">
      <span id="play-icon">⏸</span> Pause
    </button>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const boxDollars = $('#box-dollars');
    const boxCents = $('#box-cents');
    const badgeDollars = $('#badge-dollars');
    const badgeCents = $('#badge-cents');
    const resultBar = $('#result-bar');
    const buttons = [$('#btn-0'), $('#btn-1'), $('#btn-2')];
    const playBtn = $('#play-btn');
    const playIcon = $('#play-icon');

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

    function renderStep(step) {
      currentStep = step;
      buttons.forEach((b, i) => {
        b.className = 'step-btn';
        if (i === step) {
          if (i === 0) b.classList.add('active');
          if (i === 1) b.classList.add('cents-active');
          if (i === 2) b.classList.add('total-active');
        }
      });

      if (step === 0) {
        // Step 1: Dollars focus
        boxDollars.className = 'group-box active-dollars';
        boxCents.className = 'group-box dimmed';
        badgeDollars.className = 'subtotal-badge badge-green';
        badgeCents.className = 'subtotal-badge';
        resultBar.className = 'result-bar';
      } else if (step === 1) {
        // Step 2: Cents focus
        boxDollars.className = 'group-box dimmed';
        boxCents.className = 'group-box active-cents';
        badgeDollars.className = 'subtotal-badge';
        badgeCents.className = 'subtotal-badge badge-blue';
        resultBar.className = 'result-bar';
      } else {
        // Step 3: Combined Total
        boxDollars.className = 'group-box active-dollars';
        boxCents.className = 'group-box active-cents';
        badgeDollars.className = 'subtotal-badge badge-green';
        badgeCents.className = 'subtotal-badge badge-blue';
        resultBar.className = 'result-bar active';
      }
    }

    function nextStep() {
      const next = (currentStep + 1) % 3;
      renderStep(next);
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3200);
      isPlaying = true;
      playBtn.innerHTML = '<span>⏸</span> Pause';
    }

    function pauseAutoPlay() {
      if (timer) clearInterval(timer);
      timer = null;
      isPlaying = false;
      playBtn.innerHTML = '<span>▶</span> Play';
    }

    buttons.forEach((btn, index) => {
      onTap(btn, () => {
        pauseAutoPlay();
        renderStep(index);
      });
    });

    onTap(playBtn, () => {
      if (isPlaying) {
        pauseAutoPlay();
      } else {
        startAutoPlay();
      }
    });

    renderStep(0);
    startAutoPlay();
  </script>
</body>
</html>

How do we write down bills and coins together just like a price tag in a store?

We put a **dollar sign** (\$) in front, and a little dot called a **decimal point** to separate the whole dollars from the cents.

<!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>Combining Dollar Bills and Coins</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: #f8f9fa;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

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

    /* Preset selector tabs */
    .tabs {
      display: flex;
      gap: 8px;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 20px;
    }

    .tab-btn {
      border: none;
      background: transparent;
      padding: 6px 14px;
      border-radius: 16px;
      font-size: 14px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .tab-btn.active {
      background: #ffffff;
      color: #0f172a;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    /* Visual Money Stage */
    .money-stage {
      width: 100%;
      display: flex;
      gap: 12px;
      align-items: stretch;
      justify-content: center;
    }

    .group-box {
      flex: 1;
      background: #ffffff;
      border-radius: 12px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      min-height: 90px;
      border: 2px solid transparent;
      transition: border-color 0.2s ease, background-color 0.2s ease;
    }

    .group-box.dollars-box {
      border-color: #d1fae5;
    }

    .group-box.cents-box {
      border-color: #fef3c7;
    }

    .items-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      justify-content: center;
    }

    /* Bill Styling */
    .bill {
      background: #ecfdf5;
      border: 1.5px solid #10b981;
      border-radius: 4px;
      color: #047857;
      font-weight: 800;
      font-size: 13px;
      padding: 4px 8px;
      display: flex;
      align-items: center;
      gap: 3px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    /* Coin Styling */
    .coin {
      background: #fffbeb;
      border: 1.5px solid #f59e0b;
      border-radius: 50%;
      color: #b45309;
      font-weight: 800;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .coin.q25 { width: 34px; height: 34px; }
    .coin.d10 { width: 28px; height: 28px; font-size: 11px; }
    .coin.n5  { width: 30px; height: 30px; font-size: 11px; }

    /* Main Big Notation Display */
    .notation-card {
      width: 100%;
      background: #ffffff;
      border-radius: 14px;
      padding: 16px 12px;
      box-shadow: 0 3px 12px rgba(0,0,0,0.05);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .digits-row {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 4px;
    }

    .symbol-part {
      font-size: 38px;
      font-weight: 800;
      line-height: 1;
      padding: 4px 8px;
      border-radius: 8px;
      transition: background 0.2s ease, color 0.2s ease;
    }

    .part-sign {
      color: #10b981;
      background: #ecfdf5;
    }

    .part-dollars {
      color: #047857;
      background: #ecfdf5;
    }

    .part-dot {
      color: #d97706;
      background: #fffbeb;
      padding: 4px 6px;
    }

    .part-cents {
      color: #b45309;
      background: #fffbeb;
    }

    /* Label Connectors */
    .labels-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      width: 100%;
      gap: 8px;
      text-align: center;
    }

    .label-tag {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 6px 4px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
    }

    .tag-dollars {
      background: #ecfdf5;
      color: #047857;
      border: 1px solid #a7f3d0;
    }

    .tag-dot {
      background: #fffbeb;
      color: #b45309;
      border: 1px solid #fde68a;
    }

    .tag-cents {
      background: #fff7ed;
      color: #c2410c;
      border: 1px solid #fed7aa;
    }

    .tag-sub {
      font-size: 11px;
      font-weight: 500;
      opacity: 0.85;
    }
  </style>
</head>
<body>

  <div class="diagram-area">
    
    <div class="tabs">
      <button class="tab-btn active" data-idx="0">$3.45</button>
      <button class="tab-btn" data-idx="1">$2.50</button>
      <button class="tab-btn" data-idx="2">$5.15</button>
    </div>

    
    <div class="money-stage">
      <div class="group-box dollars-box">
        <div class="items-row" id="bills-container"></div>
      </div>
      <div class="group-box cents-box">
        <div class="items-row" id="coins-container"></div>
      </div>
    </div>

    
    <div class="notation-card">
      <div class="digits-row">
        <span class="symbol-part part-sign">$</span>
        <span class="symbol-part part-dollars" id="val-dollars">3</span>
        <span class="symbol-part part-dot">.</span>
        <span class="symbol-part part-cents" id="val-cents">45</span>
      </div>

      <div class="labels-row">
        <div class="label-tag tag-dollars">
          <span>Dollars</span>
          <span class="tag-sub">Whole ($)</span>
        </div>
        <div class="label-tag tag-dot">
          <span>Point (.)</span>
          <span class="tag-sub">Separator</span>
        </div>
        <div class="label-tag tag-cents">
          <span>Cents</span>
          <span class="tag-sub">Coins (¢)</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    const data = [
      {
        dollars: "3",
        cents: "45",
        bills: ["$1", "$1", "$1"],
        coins: [
          { val: "25¢", cls: "q25" },
          { val: "10¢", cls: "d10" },
          { val: "10¢", cls: "d10" }
        ]
      },
      {
        dollars: "2",
        cents: "50",
        bills: ["$1", "$1"],
        coins: [
          { val: "25¢", cls: "q25" },
          { val: "25¢", cls: "q25" }
        ]
      },
      {
        dollars: "5",
        cents: "15",
        bills: ["$5"],
        coins: [
          { val: "10¢", cls: "d10" },
          { val: "5¢", cls: "n5" }
        ]
      }
    ];

    const tabBtns = document.querySelectorAll('.tab-btn');
    const billsContainer = document.getElementById('bills-container');
    const coinsContainer = document.getElementById('coins-container');
    const valDollars = document.getElementById('val-dollars');
    const valCents = document.getElementById('val-cents');

    function render(idx) {
      const item = data[idx];

      // Update text values
      valDollars.textContent = item.dollars;
      valCents.textContent = item.cents;

      // Render Bills
      billsContainer.innerHTML = '';
      item.bills.forEach(b => {
        const el = document.createElement('div');
        el.className = 'bill';
        el.textContent = '💵 ' + b;
        billsContainer.appendChild(el);
      });

      // Render Coins
      coinsContainer.innerHTML = '';
      item.coins.forEach(c => {
        const el = document.createElement('div');
        el.className = 'coin ' + c.cls;
        el.textContent = c.val;
        coinsContainer.appendChild(el);
      });

      // Update active tab button
      tabBtns.forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });
    }

    tabBtns.forEach((btn, idx) => {
      btn.addEventListener('click', () => render(idx));
    });

    // Initialize
    render(0);
  </script>
</body>
</html>

Let's see how easy it is to count a real handful of money step by step!

Always count your paper bills first to get the dollars, and then count your coins to get the cents.

<!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>Combining Dollar Bills and Coins</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    
    body {
      background: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      user-select: none;
    }

    .main-stage {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Step Navigation */
    .stepper-nav {
      display: flex;
      background: #e2e8f0;
      padding: 3px;
      border-radius: 10px;
      gap: 4px;
    }

    .step-btn {
      flex: 1;
      padding: 8px 4px;
      border: none;
      background: transparent;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      transition: all 0.25s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    .step-btn.active {
      background: #ffffff;
      color: #1e2945;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    /* Display Board */
    .board {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .zone {
      background: #ffffff;
      border-radius: 12px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      border: 2px solid transparent;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      transition: all 0.3s ease;
      opacity: 0.45;
    }

    .zone.highlight {
      opacity: 1;
      border-color: #10b981;
      box-shadow: 0 4px 14px rgba(16, 185, 129, 0.15);
    }

    .zone.highlight-coins {
      opacity: 1;
      border-color: #f59e0b;
      box-shadow: 0 4px 14px rgba(245, 158, 11, 0.15);
    }

    .zone-title {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .zone-bills .zone-title { color: #059669; }
    .zone-coins .zone-title { color: #d97706; }

    .items-row {
      display: flex;
      gap: 6px;
      justify-content: center;
      align-items: center;
      min-height: 52px;
      flex-wrap: wrap;
    }

    /* Bills */
    .bill {
      background: linear-gradient(135deg, #ecfdf5, #d1fae5);
      border: 1.5px solid #059669;
      border-radius: 6px;
      padding: 6px 10px;
      font-weight: 800;
      font-size: 16px;
      color: #065f46;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 4px rgba(5, 150, 105, 0.12);
    }

    /* Coins */
    .coin {
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .coin-25 {
      width: 44px;
      height: 44px;
      background: linear-gradient(135deg, #f1f5f9, #cbd5e1);
      border: 2px solid #64748b;
      color: #334155;
      font-size: 14px;
    }

    .coin-10 {
      width: 34px;
      height: 34px;
      background: linear-gradient(135deg, #f1f5f9, #cbd5e1);
      border: 2px solid #64748b;
      color: #334155;
      font-size: 12px;
    }

    .coin-5 {
      width: 38px;
      height: 38px;
      background: linear-gradient(135deg, #fef3c7, #fde68a);
      border: 2px solid #d97706;
      color: #92400e;
      font-size: 13px;
    }

    .subtotal-tag {
      font-size: 18px;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: 6px;
    }

    .subtotal-bills {
      color: #047857;
      background: #ecfdf5;
    }

    .subtotal-coins {
      color: #b45309;
      background: #fffbeb;
    }

    /* Result Box */
    .result-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      border: 2px solid #e2e8f0;
      transition: all 0.3s ease;
    }

    .result-card.highlight-total {
      border-color: #8b5cf6;
      box-shadow: 0 4px 16px rgba(139, 92, 246, 0.15);
    }

    .result-label {
      font-size: 14px;
      font-weight: 800;
      color: #64748b;
      text-transform: uppercase;
    }

    .result-math {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 24px;
      font-weight: 800;
    }

    .val-dollars { color: #059669; }
    .val-dot { color: #1e2945; }
    .val-cents { color: #d97706; }
    .plus-sign { color: #94a3b8; font-size: 20px; }

    /* Controls Bar */
    .controls {
      display: flex;
      justify-content: center;
      gap: 8px;
    }

    .ctrl-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }
  </style>
</head>
<body>

  <div class="main-stage">
    
    <div class="stepper-nav">
      <button class="step-btn active" id="btn0">1. Bills</button>
      <button class="step-btn" id="btn1">2. Coins</button>
      <button class="step-btn" id="btn2">3. Total</button>
    </div>

    
    <div class="board">
      
      <div class="zone zone-bills highlight" id="billsZone">
        <div class="zone-title">Dollars</div>
        <div class="items-row">
          <div class="bill">$5</div>
          <div class="bill">$1</div>
        </div>
        <div class="subtotal-tag subtotal-bills" id="billsTotal">$6</div>
      </div>

      
      <div class="zone zone-coins" id="coinsZone">
        <div class="zone-title">Cents</div>
        <div class="items-row">
          <div class="coin coin-25">25¢</div>
          <div class="coin coin-10">10¢</div>
          <div class="coin coin-5">5¢</div>
        </div>
        <div class="subtotal-tag subtotal-coins" id="coinsTotal">40¢</div>
      </div>
    </div>

    
    <div class="result-card" id="resultCard">
      <div class="result-label">Combine</div>
      <div class="result-math">
        <span class="val-dollars" id="resDollars">$6</span>
        <span class="val-dot">.</span>
        <span class="val-cents" id="resCents">40</span>
      </div>
    </div>

    
    <div class="controls">
      <button class="ctrl-btn" id="playBtn">⏸ Pause</button>
    </div>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const billsZone = document.getElementById('billsZone');
    const coinsZone = document.getElementById('coinsZone');
    const resultCard = document.getElementById('resultCard');
    const playBtn = document.getElementById('playBtn');
    const btns = [
      document.getElementById('btn0'),
      document.getElementById('btn1'),
      document.getElementById('btn2')
    ];

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

    function renderStep(idx) {
      currentStep = idx;
      btns.forEach((b, i) => b.classList.toggle('active', i === idx));

      if (idx === 0) {
        // Step 1: Count Bills
        billsZone.className = 'zone zone-bills highlight';
        coinsZone.className = 'zone zone-coins';
        resultCard.className = 'result-card';
      } else if (idx === 1) {
        // Step 2: Count Coins
        billsZone.className = 'zone zone-bills';
        coinsZone.className = 'zone zone-coins highlight-coins';
        resultCard.className = 'result-card';
      } else {
        // Step 3: Combine Total
        billsZone.className = 'zone zone-bills highlight';
        coinsZone.className = 'zone zone-coins highlight-coins';
        resultCard.className = 'result-card highlight-total';
      }
    }

    function nextStep() {
      renderStep((currentStep + 1) % 3);
    }

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

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

    btns.forEach((btn, index) => {
      btn.addEventListener('click', () => {
        renderStep(index);
        pauseAutoPlay();
      });
    });

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

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

What if you are buying a cool sticker pack at the school store?

You pull out 3 one-dollar bills, 2 dimes ($10\text{¢}$ each), and 1 nickel ($5\text{¢}$).

Three dollar bills make \$3, and the coins add up to $10\text{¢} + 10\text{¢} + 5\text{¢} = 25\text{¢}$, so your total is **\$3.25**.

<!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>Combining Dollar Bills and Coins</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  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: 100%;
    padding: 16px;
    user-select: none;
    -webkit-user-select: none;
  }

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

  /* Navigation Tabs */
  .nav-tabs {
    display: flex;
    gap: 8px;
    background: #e5e7eb;
    padding: 4px;
    border-radius: 20px;
  }

  .nav-btn {
    border: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .nav-btn.active {
    background: #ffffff;
    color: #10b981;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }

  /* Display Area */
  .money-board {
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  /* Row of Bills */
  .bills-group {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    width: 100%;
    transition: opacity 0.3s ease;
  }

  .bill {
    width: 82px;
    height: 48px;
    background: #ecfdf5;
    border: 2px solid #10b981;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #065f46;
    font-weight: 800;
    font-size: 17px;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.15);
    position: relative;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .bill::before, .bill::after {
    content: "$";
    position: absolute;
    font-size: 9px;
    opacity: 0.5;
  }
  .bill::before { top: 3px; left: 4px; }
  .bill::after { bottom: 3px; right: 4px; }

  /* Row of Coins */
  .coins-group {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    width: 100%;
    transition: opacity 0.3s ease;
  }

  .coin {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 0 2px 5px rgba(0,0,0,0.12);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .dime {
    width: 42px;
    height: 42px;
    background: #f1f5f9;
    border: 2px solid #94a3b8;
    color: #334155;
    font-size: 13px;
  }

  .nickel {
    width: 48px;
    height: 48px;
    background: #fef3c7;
    border: 2px solid #f59e0b;
    color: #92400e;
    font-size: 14px;
  }

  /* Combined Math Expression */
  .equation-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 700;
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
    width: 100%;
  }

  .tag {
    padding: 6px 14px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
  }

  .tag-dollars {
    background: #ecfdf5;
    color: #059669;
    border: 1.5px solid #10b981;
  }

  .tag-coins {
    background: #fffbeb;
    color: #d97706;
    border: 1.5px solid #f59e0b;
  }

  .tag-total {
    background: #1e2945;
    color: #ffffff;
    font-size: 26px;
    padding: 8px 18px;
  }

  .tag-total .d-part { color: #34d399; }
  .tag-total .dot-part { color: #94a3b8; }
  .tag-total .c-part { color: #fbbf24; }

  .math-sym {
    color: #94a3b8;
    font-size: 20px;
  }

  /* Focus dimming states */
  .dim {
    opacity: 0.25;
    transform: scale(0.96);
  }
  .highlight {
    transform: scale(1.05);
  }
</style>
</head>
<body>

<div class="stage">
  
  <div class="nav-tabs" role="tablist">
    <button class="nav-btn active" onclick="setStep(0)">1. Bills</button>
    <button class="nav-btn" onclick="setStep(1)">2. Coins</button>
    <button class="nav-btn" onclick="setStep(2)">3. Total</button>
  </div>

  
  <div class="money-board">
    
    <div class="bills-group" id="billsGroup">
      <div class="bill">$1</div>
      <div class="bill">$1</div>
      <div class="bill">$1</div>
    </div>

    
    <div class="coins-group" id="coinsGroup">
      <div class="coin dime">10¢</div>
      <div class="coin dime">10¢</div>
      <div class="coin nickel">5¢</div>
    </div>

    
    <div class="equation-box">
      <span class="tag tag-dollars" id="dollarsTag">$3</span>
      <span class="math-sym">+</span>
      <span class="tag tag-coins" id="coinsTag">25¢</span>
      <span class="math-sym">=</span>
      <span class="tag tag-total" id="totalTag">
        <span class="d-part">$3</span><span class="dot-part">.</span><span class="c-part">25</span>
      </span>
    </div>
  </div>
</div>

<script>
  let currentStep = 0;
  let autoTimer = null;

  const billsGroup = document.getElementById('billsGroup');
  const coinsGroup = document.getElementById('coinsGroup');
  const dollarsTag = document.getElementById('dollarsTag');
  const coinsTag = document.getElementById('coinsTag');
  const totalTag = document.getElementById('totalTag');
  const buttons = document.querySelectorAll('.nav-btn');

  function renderStep(step) {
    buttons.forEach((btn, idx) => {
      btn.classList.toggle('active', idx === step);
    });

    if (step === 0) {
      // Step 1: Focus Bills
      billsGroup.classList.remove('dim');
      billsGroup.classList.add('highlight');
      coinsGroup.classList.add('dim');
      coinsGroup.classList.remove('highlight');

      dollarsTag.classList.remove('dim');
      dollarsTag.classList.add('highlight');
      coinsTag.classList.add('dim');
      coinsTag.classList.remove('highlight');
      totalTag.classList.add('dim');
    } else if (step === 1) {
      // Step 2: Focus Coins
      billsGroup.classList.add('dim');
      billsGroup.classList.remove('highlight');
      coinsGroup.classList.remove('dim');
      coinsGroup.classList.add('highlight');

      dollarsTag.classList.add('dim');
      dollarsTag.classList.remove('highlight');
      coinsTag.classList.remove('dim');
      coinsTag.classList.add('highlight');
      totalTag.classList.add('dim');
    } else {
      // Step 3: Focus Combined Total
      billsGroup.classList.remove('dim', 'highlight');
      coinsGroup.classList.remove('dim', 'highlight');

      dollarsTag.classList.remove('dim', 'highlight');
      coinsTag.classList.remove('dim', 'highlight');
      totalTag.classList.remove('dim');
      totalTag.classList.add('highlight');
    }
  }

  function setStep(step) {
    currentStep = step;
    renderStep(currentStep);
    restartAutoPlay();
  }

  function nextStep() {
    currentStep = (currentStep + 1) % 3;
    renderStep(currentStep);
  }

  function restartAutoPlay() {
    clearInterval(autoTimer);
    autoTimer = setInterval(nextStep, 3500);
  }

  // Initialize
  renderStep(0);
  restartAutoPlay();
</script>

</body>
</html>

What is one mistake you should watch out for when writing prices?

When you use a dollar sign and a dot, you do not write a cent sign at the end. Write **\$3.25**, never \$3.25¢!

math

Combining Dollar Bills and Coins. Count and record total money amounts combining whole dollar bills and cents.

Counting Dollars and US Coins: Money and Time

Count Money - Dollar Bills and Coins up to $5

Learn to Count Money: Combining Bills and Coins

For Early Level / Primary 1 learners, anchor instruction in the Concrete-Pictorial-Abstract (CPA) framework. Begin with tactile play money and grocery role-play corners where children physically separate notes and coins into distinct containers. Scaffold skip-counting skills ($5\text{s}$, $10\text{s}$, $25\text{s}$) prior to combined counting. Emphasize that the decimal point acts as a visual 'fence' separating whole dollar bills from cents.

Combining Dollar Bills and Coins

Writing Dollars and Cents

Step-by-Step Counting

Buying at the Store