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 6 yummy cookies and you want to share them fairly with your best friend!

A **unit fraction** is a fraction with a $1$ on top, like $\frac{1}{2}$ or $\frac{1}{3}$.

The bottom number tells you how many **equal groups** you need 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>Calculating Unit Fractions</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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px 12px;
      gap: 16px;
    }

    .nav-tabs {
      display: flex;
      gap: 8px;
      justify-content: center;
      width: 100%;
      max-width: 380px;
    }

    .tab-btn {
      flex: 1;
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 10px;
      padding: 8px 12px;
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.2s ease;
    }

    .tab-btn.active {
      border-color: #22b7ff;
      background: #e8f7ff;
      color: #008cd4;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.2);
    }

    .groups-area {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 440px;
      min-height: 150px;
      align-items: stretch;
    }

    .group-box {
      background: #ffffff;
      border: 2px dashed #d1d5db;
      border-radius: 12px;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex: 1 1 120px;
      max-width: 190px;
      transition: all 0.3s ease;
    }

    .group-box.highlight {
      border: 2px solid #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.15);
    }

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

    .item {
      font-size: 26px;
      line-height: 1;
      user-select: none;
      filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1));
    }

    .group-tag {
      font-size: 13px;
      font-weight: 700;
      color: #6b7280;
      text-align: center;
    }

    .group-box.highlight .group-tag {
      color: #008cd4;
    }

    .formula-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border-radius: 12px;
      padding: 10px 18px;
      border: 1px solid #e6e6e6;
      font-size: 18px;
      font-weight: 700;
      gap: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 15px;
      line-height: 1;
    }

    .fraction .num {
      border-bottom: 2px solid currentColor;
      padding-bottom: 2px;
    }

    .fraction .den {
      padding-top: 2px;
      color: #008cd4;
      font-weight: 800;
    }

    .accent {
      color: #008cd4;
      font-size: 20px;
    }
  </style>
</head>
<body>

  <div class="nav-tabs">
    <button class="tab-btn active" onclick="setMode(2)">
      <span class="fraction"><span class="num">1</span><span class="den">2</span></span>
      <span>of 6</span>
    </button>
    <button class="tab-btn" onclick="setMode(3)">
      <span class="fraction"><span class="num">1</span><span class="den">3</span></span>
      <span>of 6</span>
    </button>
    <button class="tab-btn" onclick="setMode(6)">
      <span class="fraction"><span class="num">1</span><span class="den">6</span></span>
      <span>of 6</span>
    </button>
  </div>

  <div class="groups-area" id="groupsArea"></div>

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

  <script>
    const TOTAL_ITEMS = 6;
    let currentDenom = 2;

    function render() {
      const area = document.getElementById('groupsArea');
      const formula = document.getElementById('formulaBar');
      area.innerHTML = '';

      const itemsPerGroup = TOTAL_ITEMS / currentDenom;

      for (let i = 0; i < currentDenom; i++) {
        const box = document.createElement('div');
        box.className = 'group-box' + (i === 0 ? ' highlight' : '');

        const itemsRow = document.createElement('div');
        itemsRow.className = 'items-row';
        for (let j = 0; j < itemsPerGroup; j++) {
          const item = document.createElement('span');
          item.className = 'item';
          item.textContent = '🍪';
          itemsRow.appendChild(item);
        }

        const tag = document.createElement('div');
        tag.className = 'group-tag';
        tag.textContent = i === 0 ? '1 group (' + itemsPerGroup + ')' : 'Group ' + (i + 1);

        box.appendChild(itemsRow);
        box.appendChild(tag);
        area.appendChild(box);
      }

      formula.innerHTML = `
        <span class="fraction"><span class="num">1</span><span class="den">${currentDenom}</span></span>
        <span>of 6</span>
        <span>=</span>
        <span>6 ÷ ${currentDenom}</span>
        <span>=</span>
        <span class="accent">${itemsPerGroup}</span>
      `;

      const buttons = document.querySelectorAll('.tab-btn');
      buttons.forEach((btn, idx) => {
        const dens = [2, 3, 6];
        btn.classList.toggle('active', dens[idx] === currentDenom);
      });
    }

    function setMode(denom) {
      currentDenom = denom;
      render();
    }

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

How do we split 6 cookies between 2 people so everyone gets the exact same amount?

To find **$\frac{1}{2}$** of a number, we divide the whole group by $2$.

Since $6 \div 2 = 3$, one-half of $6$ cookies is $3$ cookies.

<!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; }
    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: 16px;
      gap: 16px;
    }

    .nav-tabs {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 440px;
      justify-content: center;
    }

    .tab-btn {
      flex: 1;
      padding: 8px 12px;
      font-size: 16px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #6b7280;
      border-radius: 8px;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
    }

    .tab-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
    }

    .groups-container {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      width: 100%;
      max-width: 440px;
      justify-content: center;
      align-items: stretch;
      min-height: 160px;
    }

    .group-box {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
      position: relative;
    }

    .group-box.target {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 0 0 1px #22b7ff, 0 3px 8px rgba(34, 183, 255, 0.15);
    }

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

    .sticker {
      font-size: 22px;
      line-height: 1;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
      transition: transform 0.2s ease;
    }

    .badge {
      font-size: 11px;
      font-weight: 700;
      color: #22b7ff;
      background: #e0f2fe;
      padding: 2px 8px;
      border-radius: 999px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .group-box:not(.target) .badge {
      color: #94a3b8;
      background: #f1f5f9;
    }

    .math-bar {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 16px;
      text-align: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.03);
      font-size: 20px;
      min-height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>

  <div class="nav-tabs">
    <button class="tab-btn active" data-denom="2" id="tab-2"></button>
    <button class="tab-btn" data-denom="3" id="tab-3"></button>
    <button class="tab-btn" data-denom="4" id="tab-4"></button>
  </div>

  <div class="groups-container" id="groups-grid"></div>

  <div class="math-bar" id="math-output"></div>

  <script>
    const TOTAL = 12;
    const fractions = [2, 3, 4];
    let currentDenom = 2;

    function renderTabs() {
      fractions.forEach(d => {
        const btn = $(`tab-${d}`);
        katex.render(`\\frac{1}{${d}}`, btn, { throwOnError: false });
      });
    }

    function renderView(denom) {
      currentDenom = denom;
      const countPerGroup = TOTAL / denom;

      // Update button states
      $$('.tab-btn').forEach(b => {
        if (parseInt(b.dataset.denom) === denom) {
          b.classList.add('active');
        } else {
          b.classList.remove('active');
        }
      });

      // Render Groups
      const grid = $('groups-grid');
      grid.innerHTML = '';
      
      const widthPct = denom === 2 ? 'calc(50% - 6px)' : (denom === 3 ? 'calc(33.33% - 8px)' : 'calc(50% - 6px)');

      for (let i = 0; i < denom; i++) {
        const box = document.createElement('div');
        box.className = 'group-box' + (i === 0 ? ' target' : '');
        box.style.flex = (denom === 4) ? '0 0 calc(50% - 6px)' : (denom === 3 ? '1 1 calc(33% - 8px)' : '1 1 calc(50% - 6px)');

        const itemsWrap = document.createElement('div');
        itemsWrap.className = 'items-grid';

        for (let j = 0; j < countPerGroup; j++) {
          const item = document.createElement('span');
          item.className = 'sticker';
          item.textContent = '⭐';
          itemsWrap.appendChild(item);
        }

        const badge = document.createElement('span');
        badge.className = 'badge';
        badge.textContent = `${countPerGroup}`;

        box.appendChild(itemsWrap);
        box.appendChild(badge);
        grid.appendChild(box);
      }

      // Render KaTeX Math Output
      const mathEl = $('math-output');
      const expr = `\\frac{1}{${denom}} \\text{ of } 12 = 12 \\div ${denom} = ${countPerGroup}`;
      katex.render(expr, mathEl, { throwOnError: false });
    }

    // Attach interactions
    $$('.tab-btn').forEach(btn => {
      onTap(btn, () => {
        renderView(parseInt(btn.dataset.denom));
      });
    });

    renderTabs();
    renderView(2);
  </script>
</body>
</html>

What if $3$ or $4$ friends want to share $12$ shiny stickers equally?

## Finding $\frac{1}{3}$ and $\frac{1}{4}$

To find **$\frac{1}{3}$**, divide by $3$. To find **$\frac{1}{4}$**, divide by $4$.

For $12$ stickers, $\frac{1}{3}$ is $12 \div 3 = 4$ stickers, and $\frac{1}{4}$ is $12 \div 4 = 3$ stickers.

<!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>Calculating Unit Fractions</title>
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

    .main-container {
      width: 100%;
      max-width: 500px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .nav-tabs {
      display: flex;
      gap: 8px;
      width: 100%;
      justify-content: center;
    }

    .tab-btn {
      flex: 1;
      max-width: 90px;
      padding: 8px 4px;
      font-size: 15px;
      font-weight: 600;
      border: 1px solid #e6e6e6;
      background: #ffffff;
      color: #1e2945;
      border-radius: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    }

    .tab-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
    }

    .display-area {
      width: 100%;
      min-height: 190px;
      background: #f8f9fa;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      align-content: center;
      align-items: center;
    }

    .group-box {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 10px;
      padding: 8px 6px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.25s ease;
      position: relative;
    }

    .group-box.highlight {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 2px 10px rgba(34, 183, 255, 0.2);
    }

    .sticker {
      font-size: 20px;
      line-height: 1;
      user-select: none;
      display: inline-block;
      transition: transform 0.2s ease;
    }

    .badge-label {
      position: absolute;
      top: -9px;
      left: 50%;
      transform: translateX(-50%);
      background: #22b7ff;
      color: #ffffff;
      font-size: 10px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 6px;
      white-space: nowrap;
      letter-spacing: 0.3px;
    }

    .formula-card {
      width: 100%;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 10px;
      padding: 10px 12px;
      text-align: center;
      font-size: 17px;
      color: #1e2945;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    @media (max-width: 380px) {
      .sticker {
        font-size: 17px;
      }
      .tab-btn {
        font-size: 14px;
        padding: 6px 2px;
      }
    }
  </style>
</head>
<body>

  <div class="main-container">
    <div class="nav-tabs" role="tablist">
      <button class="tab-btn" data-denom="2" onclick="selectFraction(2)">1/2</button>
      <button class="tab-btn active" data-denom="3" onclick="selectFraction(3)">1/3</button>
      <button class="tab-btn" data-denom="4" onclick="selectFraction(4)">1/4</button>
      <button class="tab-btn" data-denom="6" onclick="selectFraction(6)">1/6</button>
    </div>

    <div class="display-area" id="groupContainer"></div>

    <div class="formula-card" id="formulaBox"></div>
  </div>

  <script>
    const TOTAL = 12;
    let currentDenom = 3;

    function renderMath(element, tex) {
      if (window.katex) {
        katex.render(tex, element, { throwOnError: false });
      } else {
        element.textContent = tex;
      }
    }

    function updateTabs() {
      document.querySelectorAll('.tab-btn').forEach(btn => {
        const d = parseInt(btn.dataset.denom, 10);
        btn.classList.toggle('active', d === currentDenom);
      });
    }

    function selectFraction(denom) {
      currentDenom = denom;
      updateTabs();
      renderDiagram();
    }

    function renderDiagram() {
      const container = document.getElementById('groupContainer');
      const formulaBox = document.getElementById('formulaBox');
      const perGroup = TOTAL / currentDenom;

      container.innerHTML = '';

      // Calculate container sizing per group
      let flexBasis = '45%';
      if (currentDenom === 2) flexBasis = '46%';
      else if (currentDenom === 3) flexBasis = '30%';
      else if (currentDenom === 4) flexBasis = '46%';
      else if (currentDenom === 6) flexBasis = '30%';

      for (let g = 0; g < currentDenom; g++) {
        const box = document.createElement('div');
        box.className = 'group-box' + (g === 0 ? ' highlight' : '');
        box.style.flex = `0 1 ${flexBasis}`;
        box.style.minHeight = currentDenom > 3 ? '60px' : '74px';

        if (g === 0) {
          const badge = document.createElement('span');
          badge.className = 'badge-label';
          badge.textContent = `1 of ${currentDenom}`;
          box.appendChild(badge);
        }

        for (let i = 0; i < perGroup; i++) {
          const s = document.createElement('span');
          s.className = 'sticker';
          s.textContent = '⭐';
          box.appendChild(s);
        }

        container.appendChild(box);
      }

      // Equation
      const tex = `\\frac{1}{${currentDenom}} \\text{ of } 12 = 12 \\div ${currentDenom} = {\\mathbf{${perGroup}}}`;
      renderMath(formulaBox, tex);
    }

    // Initialize tabs with formatted fractions
    document.querySelectorAll('.tab-btn').forEach(btn => {
      const d = btn.dataset.denom;
      renderMath(btn, `\\frac{1}{${d}}`);
    });

    renderDiagram();
  </script>
</body>
</html>

What if we have a bigger team of $5$ or even $10$ classmates?

## Finding $\frac{1}{5}$ and $\frac{1}{10}$

The rule is always the same: divide the total number by the **bottom number**.

To find **$\frac{1}{5}$** of $20$, divide by $5$ ($20 \div 5 = 4$). To find **$\frac{1}{10}$** of $20$, divide by $10$ ($20 \div 10 = 2$).

<!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>Calculating Unit Fractions</title>
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      min-height: 100%;
      user-select: none;
    }

    .main-layout {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    /* Fraction Selector Tabs */
    .selector-bar {
      display: flex;
      gap: 8px;
      width: 100%;
      justify-content: center;
    }

    .frac-btn {
      flex: 1;
      max-width: 90px;
      padding: 6px 0;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      border-radius: 10px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 700;
      color: #64748b;
      transition: all 0.2s ease;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 44px;
    }

    .frac-btn:hover {
      border-color: #22b7ff;
      color: #22b7ff;
    }

    .frac-btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.3);
    }

    /* Equation Display */
    .formula-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 20px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      min-height: 52px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }

    /* Groups Visual Area */
    .groups-container {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 12px;
      width: 100%;
      min-height: 200px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 10px;
    }

    .group-box {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
      gap: 5px;
      transition: all 0.3s ease;
      position: relative;
    }

    .group-box.highlight {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.25);
    }

    .group-tag {
      position: absolute;
      top: -9px;
      left: 50%;
      transform: translateX(-50%);
      background: #22b7ff;
      color: white;
      font-size: 11px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 8px;
      white-space: nowrap;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .group-box.highlight .group-tag {
      opacity: 1;
    }

    .dot {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: #94a3b8;
      transition: background 0.3s ease;
      flex-shrink: 0;
    }

    .group-box.highlight .dot {
      background: #22b7ff;
    }

    /* Pacing / Play Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .dot-step {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .dot-step.active {
      background: #22b7ff;
      transform: scale(1.25);
    }
  </style>
</head>
<body>
  <div class="main-layout">
    
    <div class="selector-bar" id="selectorBar">
      <button class="frac-btn active" data-denom="2" data-idx="0">½</button>
      <button class="frac-btn" data-denom="4" data-idx="1">¼</button>
      <button class="frac-btn" data-denom="5" data-idx="2">⅕</button>
      <button class="frac-btn" data-denom="10" data-idx="3">⅒</button>
    </div>

    
    <div class="formula-card" id="formulaCard"></div>

    
    <div class="groups-container" id="groupsContainer"></div>

    
    <div class="controls" id="dotsBar">
      <span class="dot-step active" data-idx="0"></span>
      <span class="dot-step" data-idx="1"></span>
      <span class="dot-step" data-idx="2"></span>
      <span class="dot-step" data-idx="3"></span>
    </div>
  </div>

  <script>
    const TOTAL = 20;
    const fractions = [2, 4, 5, 10];
    let currentIndex = 0;
    let autoTimer = null;

    const btns = document.querySelectorAll('.frac-btn');
    const stepDots = document.querySelectorAll('.dot-step');
    const formulaCard = document.getElementById('formulaCard');
    const groupsContainer = document.getElementById('groupsContainer');

    function renderState(index) {
      currentIndex = index;
      const denom = fractions[index];
      const itemsPerGroup = TOTAL / denom;

      // Update Active Buttons & Dots
      btns.forEach((btn, i) => btn.classList.toggle('active', i === index));
      stepDots.forEach((dot, i) => dot.classList.toggle('active', i === index));

      // Render KaTeX Math Expression
      const latex = `\\frac{1}{${denom}} \\text{ of } ${TOTAL} = ${TOTAL} \\div ${denom} = \\mathbf{${itemsPerGroup}}`;
      if (window.katex) {
        katex.render(latex, formulaCard, { throwOnError: false });
      } else {
        formulaCard.textContent = `1/${denom} of 20 = 20 ÷ ${denom} = ${itemsPerGroup}`;
      }

      // Render Visual Token Groups
      groupsContainer.innerHTML = '';

      // Box dimensions based on group count for clean auto-fit
      let boxWidth = '45%';
      let minHeight = '70px';
      if (denom === 4) { boxWidth = '44%'; minHeight = '65px'; }
      if (denom === 5) { boxWidth = '30%'; minHeight = '58px'; }
      if (denom === 10) { boxWidth = '18%'; minHeight = '48px'; }

      for (let g = 0; g < denom; g++) {
        const groupBox = document.createElement('div');
        groupBox.className = `group-box ${g === 0 ? 'highlight' : ''}`;
        groupBox.style.width = boxWidth;
        groupBox.style.minHeight = minHeight;

        if (g === 0) {
          const tag = document.createElement('div');
          tag.className = 'group-tag';
          tag.textContent = `1 of ${denom} = ${itemsPerGroup}`;
          groupBox.appendChild(tag);
        }

        for (let i = 0; i < itemsPerGroup; i++) {
          const dot = document.createElement('div');
          dot.className = 'dot';
          groupBox.appendChild(dot);
        }

        groupsContainer.appendChild(groupBox);
      }
    }

    function goTo(idx) {
      renderState(idx);
      resetAutoTimer();
    }

    function resetAutoTimer() {
      clearInterval(autoTimer);
      autoTimer = setInterval(() => {
        const next = (currentIndex + 1) % fractions.length;
        renderState(next);
      }, 4000);
    }

    // Attach click events
    btns.forEach((btn, idx) => {
      btn.addEventListener('click', () => goTo(idx));
    });

    stepDots.forEach((dot, idx) => {
      dot.addEventListener('click', () => goTo(idx));
    });

    // Initialize
    renderState(2); // Start on 1/5 as in lesson example
    resetAutoTimer();
  </script>
</body>
</html>

Whenever you need a unit fraction of any group, just divide by the number on the bottom!

math

Calculating Unit Fractions of a Quantity. Calculate 1/2, 1/3, 1/4, 1/5, and 1/10 of a whole number quantity using division.

Second Level Maths: Fractions, Decimals and Percentages (MNU 2-07a)

Unit Fractions of a Number and Grouping Models

Understanding Fractions as Equal Shares and Unit Fractions of Sets

Although the Curriculum for Excellence standard MNU 2-07a is categorized at Second Level, bridging from early fair sharing (Early/First Level) into formal unit fraction calculation requires the Concrete-Representational-Abstract (CRA) pedagogical continuum. Start with manipulatives (sharing counters into equal sets), transition to bar models and array representations, and conclude with the formal rule $\frac{1}{d} \text{ of } N = N \div d$ linked to multiplication and division fact families.

Calculating Unit Fractions of a Quantity

Sharing Fairly

Finding One-Half ( $\frac{1}{2}$ )

Finding $\frac{1}{3}$ and $\frac{1}{4}$

Calculating Unit Fractions of a Quantity

Sharing Fairly

Finding One-Half (12\frac{1}{2}21​)

Finding 13\frac{1}{3}31​ and 14\frac{1}{4}41​

Finding One-Half ( $\frac{1}{2}$ )

Finding $\frac{1}{3}$ and $\frac{1}{4}$