Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Imagine you have **8 yummy cookies** and want to share half of them with your best friend. How many cookies does your friend get?

A **fraction** tells us about equal parts, where the **bottom number** tells us how many equal groups to make.

<!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>Finding a Fraction of a Quantity</title>
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px;
      gap: 12px;
      user-select: none;
    }

    .math-header {
      font-size: 22px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
      height: 36px;
    }

    .highlight-denom {
      color: #0284c7;
      transition: color 0.3s ease;
    }

    .highlight-num {
      color: #d97706;
      transition: color 0.3s ease;
    }

    .stage {
      width: 100%;
      max-width: 440px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      padding: 6px;
    }

    .group-box {
      background: #ffffff;
      border: 2px dashed #cbd5e1;
      border-radius: 14px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      transition: all 0.35s ease;
      min-height: 140px;
      position: relative;
    }

    .group-box.merged {
      border-color: #e2e8f0;
      background: #ffffff;
    }

    .group-box.divided {
      border: 2px solid #38bdf8;
      background: #f0f9ff;
    }

    .group-box.selected {
      border: 2px solid #0284c7;
      background: #e0f2fe;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15);
    }

    .group-box.dimmed {
      opacity: 0.45;
      border-color: #cbd5e1;
      background: #ffffff;
    }

    .cookie-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      place-items: center;
    }

    .cookie {
      font-size: 28px;
      line-height: 1;
      transition: transform 0.3s ease;
    }

    .badge {
      font-size: 13px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 20px;
      background: #e2e8f0;
      color: #475569;
      transition: all 0.3s ease;
    }

    .badge.active {
      background: #0284c7;
      color: #ffffff;
    }

    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }

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

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

    .play-btn {
      width: 32px;
      height: 32px;
      padding: 0;
      justify-content: center;
      border-radius: 50%;
    }
  </style>
</head>
<body>

  <div class="math-header" id="mathDisplay"></div>

  <div class="stage">
    <div class="group-box merged" id="box1">
      <span class="badge" id="badge1">4</span>
      <div class="cookie-grid">
        <span class="cookie">🍪</span>
        <span class="cookie">🍪</span>
        <span class="cookie">🍪</span>
        <span class="cookie">🍪</span>
      </div>
    </div>
    <div class="group-box merged" id="box2">
      <span class="badge" id="badge2">4</span>
      <div class="cookie-grid">
        <span class="cookie">🍪</span>
        <span class="cookie">🍪</span>
        <span class="cookie">🍪</span>
        <span class="cookie">🍪</span>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="btn play-btn" id="playBtn" aria-label="Play/Pause">⏸</button>
    <button class="btn active" id="step0">1. Total 8</button>
    <button class="btn" id="step1">2. Share in 2</button>
    <button class="btn" id="step2">3. Take 1 = 4</button>
  </div>

  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const mathDisplay = $('#mathDisplay');
    const box1 = $('#box1');
    const box2 = $('#box2');
    const badge1 = $('#badge1');
    const badge2 = $('#badge2');
    const playBtn = $('#playBtn');
    const stepBtns = [$('#step0'), $('#step1'), $('#step2')];

    const mathStates = [
      "\\text{Total} = 8",
      "8 \\div {\\color{#0284c7}2} = 4",
      "{\\color{#d97706}\\frac{1}{\\color{#0284c7}2}} \\text{ of } 8 = {\\bf 4}"
    ];

    function renderMath(index) {
      if (window.katex) {
        katex.render(mathStates[index], mathDisplay, { throwOnError: false });
      } else {
        const fallbacks = ["Total = 8", "8 ÷ 2 = 4", "1/2 of 8 = 4"];
        mathDisplay.textContent = fallbacks[index];
      }
    }

    function applyStep(index) {
      stepBtns.forEach((b, i) => b.classList.toggle('active', i === index));
      renderMath(index);

      if (index === 0) {
        box1.className = 'group-box merged';
        box2.className = 'group-box merged';
        badge1.className = 'badge';
        badge2.className = 'badge';
        badge1.textContent = '4';
        badge2.textContent = '4';
      } else if (index === 1) {
        box1.className = 'group-box divided';
        box2.className = 'group-box divided';
        badge1.className = 'badge active';
        badge2.className = 'badge active';
        badge1.textContent = 'Group 1';
        badge2.textContent = 'Group 2';
      } else if (index === 2) {
        box1.className = 'group-box selected';
        box2.className = 'group-box dimmed';
        badge1.className = 'badge active';
        badge2.className = 'badge';
        badge1.textContent = '4 cookies';
        badge2.textContent = '4 cookies';
      }
    }

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

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

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

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

    stepBtns.forEach((btn, i) => {
      onTap(btn, () => {
        stopAuto();
        currentStep = i;
        applyStep(i);
      });
    });

    onTap(playBtn, () => {
      if (isPlaying) {
        stopAuto();
      } else {
        nextStep();
        startAuto();
      }
    });

    applyStep(0);
    startAuto();
  </script>
</body>
</html>

To find $\frac{1}{2}$ of 8, we share 8 cookies into 2 equal groups, giving **4 cookies** in each group.

What if we want to share 12 toy cars into 4 equal boxes instead?

To find $\frac{1}{4}$ of 12, divide 12 into **4 equal groups**.

<!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">
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px;
      user-select: none;
    }
    .header-formula {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      font-size: 20px;
      font-weight: 600;
      color: #1e2945;
    }
    .highlight-text {
      color: #10b981;
      font-weight: 700;
    }
    .grid-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      width: 100%;
      max-width: 440px;
      margin: 8px 0;
    }
    @media (min-width: 480px) {
      .grid-container {
        grid-template-columns: repeat(4, 1fr);
      }
    }
    .group-card {
      background: #ffffff;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      padding: 12px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 0.3s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .items-row {
      display: flex;
      gap: 4px;
      font-size: 22px;
      line-height: 1;
    }
    .group-label {
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      transition: color 0.3s ease;
    }
    /* Step-specific states */
    .step-1 .group-card {
      border-color: #cbd5e1;
      background: #ffffff;
    }
    .step-2 .group-card {
      border-color: #94a3b8;
      background: #ffffff;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }
    .step-2 .group-label {
      color: #334155;
    }
    .step-3 .group-card.selected {
      border-color: #10b981;
      background: #ecfdf5;
      box-shadow: 0 0 0 2px #10b981;
    }
    .step-3 .group-card.selected .group-label {
      color: #047857;
    }
    .step-3 .group-card:not(.selected) {
      opacity: 0.5;
      border-color: #e5e7eb;
    }
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 440px;
      justify-content: center;
    }
    .step-btn {
      flex: 1;
      padding: 8px 12px;
      background: #ffffff;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #4b5563;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.2s ease;
    }
    .step-btn.active {
      background: #10b981;
      border-color: #10b981;
      color: #ffffff;
      box-shadow: 0 2px 4px rgba(16, 185, 129, 0.25);
    }
    .step-btn:hover:not(.active) {
      background: #f3f4f6;
    }
  </style>
</head>
<body>

  <div class="header-formula" id="formula"></div>

  <div class="grid-container" id="grid">
    <div class="group-card selected" id="grp1">
      <div class="items-row">🚗🚗🚗</div>
      <div class="group-label">3 cars</div>
    </div>
    <div class="group-card" id="grp2">
      <div class="items-row">🚗🚗🚗</div>
      <div class="group-label">3 cars</div>
    </div>
    <div class="group-card" id="grp3">
      <div class="items-row">🚗🚗🚗</div>
      <div class="group-label">3 cars</div>
    </div>
    <div class="group-card" id="grp4">
      <div class="items-row">🚗🚗🚗</div>
      <div class="group-label">3 cars</div>
    </div>
  </div>

  <div class="controls">
    <button class="step-btn active" id="btn1" onclick="setStep(1)">1. Total (12)</button>
    <button class="step-btn" id="btn2" onclick="setStep(2)">2. Divide by 4</button>
    <button class="step-btn" id="btn3" onclick="setStep(3)">3. 1 Part (3)</button>
  </div>

  <script>
    let currentStep = 1;
    const formulaEl = document.getElementById('formula');
    const gridEl = document.getElementById('grid');
    const btns = [
      document.getElementById('btn1'),
      document.getElementById('btn2'),
      document.getElementById('btn3')
    ];

    function renderFormula(step) {
      let tex = '';
      if (step === 1) {
        tex = '\\text{Total: } 12 \\text{ cars}';
      } else if (step === 2) {
        tex = '12 \\div 4 = 3 \\text{ in each group}';
      } else if (step === 3) {
        tex = '\\frac{1}{4} \\text{ of } 12 = 3';
      }

      if (window.katex) {
        katex.render(tex, formulaEl, { throwOnError: false });
      } else {
        formulaEl.textContent = step === 1 ? 'Total: 12 cars' : step === 2 ? '12 ÷ 4 = 3 in each' : '1/4 of 12 = 3';
      }
    }

    function setStep(step) {
      currentStep = step;
      gridEl.className = 'grid-container step-' + step;
      btns.forEach((b, i) => {
        if (i + 1 === step) {
          b.classList.add('active');
        } else {
          b.classList.remove('active');
        }
      });
      renderFormula(step);
    }

    // Initialize
    setStep(1);

    // Auto-advance sequence gently
    let timer = setInterval(() => {
      const next = currentStep >= 3 ? 1 : currentStep + 1;
      setStep(next);
    }, 4000);

    // Pause auto-advance on direct click
    btns.forEach(b => {
      b.addEventListener('click', () => {
        clearInterval(timer);
      });
    });
  </script>
</body>
</html>

Each box holds **3 cars**, so $\frac{1}{4}$ of 12 is 3.

Now, what happens if you get to keep 3 of those boxes instead of just 1?

When the top number is bigger than 1, like in $\frac{3}{4}$, we **multiply** the size of one group by the top 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>Finding a Fraction of a Quantity</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css">
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
    body {
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 16px;
      user-select: none;
    }
    .main-stage {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    .math-header {
      font-size: 22px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 600;
      color: #1e2945;
    }
    .fraction-highlight {
      color: #8b5cf6;
    }
    .groups-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      width: 100%;
    }
    .group-box {
      background: #ffffff;
      border-radius: 12px;
      padding: 12px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      border: 2px solid transparent;
      transition: all 0.3s ease;
      position: relative;
    }
    .group-box.active-group {
      border-color: #8b5cf6;
      background: #f5f3ff;
      box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
    }
    .group-box.dimmed {
      opacity: 0.35;
    }
    .dots-grid {
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: center;
    }
    .dot {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #cbd5e1;
      transition: background 0.3s ease, transform 0.3s ease;
    }
    .active-group .dot {
      background: #8b5cf6;
      transform: scale(1.05);
    }
    .group-label {
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      transition: color 0.3s ease;
    }
    .active-group .group-label {
      color: #7c3aed;
    }
    .formula-bar {
      height: 48px;
      background: #ffffff;
      border-radius: 10px;
      padding: 8px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 600;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      width: 100%;
      text-align: center;
    }
    .step-nav {
      display: flex;
      gap: 8px;
      width: 100%;
    }
    .step-btn {
      flex: 1;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      color: #64748b;
      padding: 10px 8px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      transition: all 0.2s ease;
    }
    .step-btn.active {
      background: #8b5cf6;
      color: #ffffff;
      border-color: #8b5cf6;
      box-shadow: 0 2px 6px rgba(139, 92, 246, 0.3);
    }
    .step-btn span.num {
      font-size: 11px;
      opacity: 0.85;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    @media (max-width: 380px) {
      .dot { width: 18px; height: 18px; }
      .formula-bar { font-size: 14px; }
      .step-btn { font-size: 12px; padding: 8px 4px; }
    }
  </style>
</head>
<body>
  <div class="main-stage">
    <div class="math-header" id="mathTitle"></div>

    <div class="groups-container">
      <div class="group-box" id="grp0">
        <div class="dots-grid">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
        <div class="group-label">3</div>
      </div>
      <div class="group-box" id="grp1">
        <div class="dots-grid">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
        <div class="group-label">3</div>
      </div>
      <div class="group-box" id="grp2">
        <div class="dots-grid">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
        <div class="group-label">3</div>
      </div>
      <div class="group-box" id="grp3">
        <div class="dots-grid">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
        <div class="group-label">3</div>
      </div>
    </div>

    <div class="formula-bar" id="formulaBar"></div>

    <div class="step-nav">
      <button class="step-btn active" id="btn0" onclick="setStep(0)">
        <span class="num">Step 1</span>
        <span>Total: 12</span>
      </button>
      <button class="step-btn" id="btn1" onclick="setStep(1)">
        <span class="num">Step 2</span>
        <span>÷ 4 (Groups)</span>
      </button>
      <button class="step-btn" id="btn2" onclick="setStep(2)">
        <span class="num">Step 3</span>
        <span>× 3 (Select)</span>
      </button>
    </div>
  </div>

  <script>
    let currentStep = 0;
    const groups = [
      document.getElementById('grp0'),
      document.getElementById('grp1'),
      document.getElementById('grp2'),
      document.getElementById('grp3')
    ];
    const buttons = [
      document.getElementById('btn0'),
      document.getElementById('btn1'),
      document.getElementById('btn2')
    ];

    function renderMath() {
      if (window.katex) {
        katex.render("\\frac{3}{4} \\text{ of } 12", document.getElementById('mathTitle'), { throwOnError: false });
        updateFormula();
      } else {
        setTimeout(renderMath, 50);
      }
    }

    function updateFormula() {
      const fb = document.getElementById('formulaBar');
      if (!window.katex) return;
      if (currentStep === 0) {
        katex.render("\\text{Total quantity} = 12", fb, { throwOnError: false });
      } else if (currentStep === 1) {
        katex.render("12 \\div 4 = 3 \\text{ (1 group)}", fb, { throwOnError: false });
      } else {
        katex.render("3 \\times 3 = 9", fb, { throwOnError: false });
      }
    }

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

      groups.forEach((g, i) => {
        g.classList.remove('active-group', 'dimmed');
        if (currentStep === 0) {
          // All neutral
        } else if (currentStep === 1) {
          // Highlight 1 group to show 12 ÷ 4 = 3
          if (i === 0) {
            g.classList.add('active-group');
          } else {
            g.classList.add('dimmed');
          }
        } else if (currentStep === 2) {
          // Highlight 3 groups to show 3 × 3 = 9
          if (i < 3) {
            g.classList.add('active-group');
          } else {
            g.classList.add('dimmed');
          }
        }
      });

      updateFormula();
    }

    window.addEventListener('DOMContentLoaded', () => {
      renderMath();
      setStep(0);
    });
  </script>
</body>
</html>

First divide by the bottom number: $12 \div 4 = 3$. Then multiply by the top number: $3 \times 3 = 9$.

Watch out: always remember to **divide by the bottom** number first to find one group, before you multiply by the top!

Next time you have a box of 10 crayons, try finding $\frac{1}{2}$ by sharing them into two equal piles.

math

Finding a Fraction of a Quantity. Calculate unit and non-unit fractions of whole number quantities using division and multiplication.

How to Find a Fraction of an Amount (CfE Mathematics)

Multiplying Unit and Non-Unit Fractions by Whole Numbers

Fractions of Quantities: Reasoning and Bar Modelling Tasks

When teaching this objective within the Scottish Curriculum for Excellence (CfE), apply a Concrete-Pictorial-Abstract (CPA) pedagogical framework. Begin with practical equal sharing and grouping using concrete materials (arrays, counters), transition to pictorial bar models to illustrate the relationship between the denominator (division) and numerator (multiplication), and finally consolidate the abstract procedural algorithm: $(Q \div b) \times a$. Scaffold multi-step word problems by prompting learners to first write out the unit fraction value before calculating non-unit amounts.

Finding a Fraction of a Quantity

Finding One Fourth

Taking More Groups