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 one yummy cookie to share fairly with your best friend. If you snap it into two equal pieces, each piece is a **fraction** of the cookie!

A **fraction** is just a number that shows a part of something, written with one number sitting right on top of another.

What do those two special numbers actually tell us? Let's take a look.

The bottom number is the **denominator**, which tells us how many equal pieces there are in total.

The top number is the **numerator**, which tells us how many of those pieces we are counting or eating.

<!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>Fraction Fundamentals</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
    }

    .main-stage {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 24px;
      width: 100%;
      max-width: 520px;
    }

    .fraction-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      padding: 16px 20px;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      min-width: 140px;
    }

    .term {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    .term-badge {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 6px;
      margin-bottom: 2px;
    }

    .num-badge {
      background: rgba(34, 183, 255, 0.15);
      color: #0088cc;
    }

    .den-badge {
      background: rgba(255, 140, 0, 0.15);
      color: #d97706;
      margin-top: 2px;
      margin-bottom: 0;
    }

    .fraction-num, .fraction-den {
      font-size: 44px;
      font-weight: 800;
      line-height: 1.1;
    }

    .fraction-num {
      color: #0088cc;
    }

    .fraction-den {
      color: #d97706;
    }

    .fraction-bar {
      width: 100%;
      min-width: 70px;
      height: 4px;
      background: #1e2945;
      border-radius: 2px;
      margin: 4px 0;
    }

    .visual-card {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border-radius: 16px;
      padding: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    svg {
      width: 180px;
      height: 180px;
      display: block;
      touch-action: manipulation;
    }

    .slice {
      cursor: pointer;
      transition: fill 0.25s ease, opacity 0.2s ease;
      stroke: #ffffff;
      stroke-width: 2.5px;
      stroke-linejoin: round;
    }

    .slice:hover {
      opacity: 0.85;
    }

    .slice-active {
      fill: #22b7ff;
    }

    .slice-inactive {
      fill: #e2e8f0;
    }

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

    .btn-den {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      color: #64748b;
      font-size: 14px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      touch-action: manipulation;
    }

    .btn-den.active {
      border-color: #ff8c00;
      background: #fff7ed;
      color: #d97706;
      box-shadow: 0 2px 6px rgba(255, 140, 0, 0.2);
    }

    @media (max-width: 400px) {
      .main-stage {
        gap: 12px;
      }
      .fraction-card {
        padding: 12px 14px;
        min-width: 110px;
      }
      .fraction-num, .fraction-den {
        font-size: 36px;
      }
      svg {
        width: 150px;
        height: 150px;
      }
    }
  </style>
</head>
<body>

  <div class="main-stage">
    
    <div class="fraction-card">
      <div class="term">
        <span class="term-badge num-badge">Numerator</span>
        <span class="fraction-num" id="numVal">3</span>
      </div>
      <div class="fraction-bar"></div>
      <div class="term">
        <span class="fraction-den" id="denVal">4</span>
        <span class="term-badge den-badge">Denominator</span>
      </div>
    </div>

    
    <div class="visual-card">
      <svg id="pieSvg" viewBox="0 0 200 200"></svg>
    </div>
  </div>

  
  <div class="controls-row">
    <button class="btn-den" data-den="2">2</button>
    <button class="btn-den" data-den="3">3</button>
    <button class="btn-den active" data-den="4">4</button>
    <button class="btn-den" data-den="6">6</button>
    <button class="btn-den" data-den="8">8</button>
  </div>

  <script>
    let denominator = 4;
    let numerator = 3;
    let slicesState = [true, true, true, false];

    const numValEl = document.getElementById('numVal');
    const denValEl = document.getElementById('denVal');
    const svgEl = document.getElementById('pieSvg');
    const buttons = document.querySelectorAll('.btn-den');

    function updateFractionText() {
      numerator = slicesState.filter(Boolean).length;
      numValEl.textContent = numerator;
      denValEl.textContent = denominator;
    }

    function toggleSlice(index) {
      slicesState[index] = !slicesState[index];
      renderPie();
      updateFractionText();
    }

    function setDenominator(newDen) {
      if (newDen === denominator) return;
      denominator = newDen;
      
      // Default to roughly half or up to previous ratio
      const prevActiveCount = slicesState.filter(Boolean).length;
      const newActiveCount = Math.min(newDen, Math.max(1, Math.round((prevActiveCount / slicesState.length) * newDen)));
      
      slicesState = Array.from({ length: denominator }, (_, i) => i < newActiveCount);
      
      buttons.forEach(btn => {
        btn.classList.toggle('active', parseInt(btn.dataset.den) === denominator);
      });

      renderPie();
      updateFractionText();
    }

    function renderPie() {
      svgEl.innerHTML = '';
      const cx = 100;
      const cy = 100;
      const r = 88;
      const total = denominator;

      for (let i = 0; i < total; i++) {
        const startAngle = -Math.PI / 2 + (i * 2 * Math.PI) / total;
        const endAngle = -Math.PI / 2 + ((i + 1) * 2 * Math.PI) / total;

        const x1 = cx + r * Math.cos(startAngle);
        const y1 = cy + r * Math.sin(startAngle);
        const x2 = cx + r * Math.cos(endAngle);
        const y2 = cy + r * Math.sin(endAngle);

        const pathData = [
          `M ${cx} ${cy}`,
          `L ${x1} ${y1}`,
          `A ${r} ${r} 0 0 1 ${x2} ${y2}`,
          'Z'
        ].join(' ');

        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('d', pathData);
        path.setAttribute('class', `slice ${slicesState[i] ? 'slice-active' : 'slice-inactive'}`);
        path.addEventListener('click', () => toggleSlice(i));

        svgEl.appendChild(path);
      }
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        setDenominator(parseInt(btn.dataset.den));
      });
    });

    // Initial render
    renderPie();
    updateFractionText();
  </script>
</body>
</html>

A fun way to remember: **D**enominator starts with **D**, just like the word **Down**!

What happens when we cut a single big shape into pieces? Let's explore.

When we divide one single object into equal pieces, we call that finding parts of a **whole**.

If a chocolate bar is cut into 4 equal blocks and you eat 1 block, you ate **$\frac{1}{4}$** of the whole bar.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

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

    /* Parts Selector */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 10px;
    }

    .btn-part {
      border: none;
      background: transparent;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #475569;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
    }

    .btn-part.active {
      background: #ffffff;
      color: #0f172a;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    /* Chocolate Bar Area */
    .bar-container {
      width: 100%;
      max-width: 440px;
      background: #4a2c11;
      padding: 8px;
      border-radius: 14px;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), 0 4px 12px rgba(74,44,17,0.15);
      display: flex;
      gap: 6px;
      height: 90px;
    }

    .block {
      flex: 1;
      background: #78471f;
      border-radius: 8px;
      cursor: pointer;
      position: relative;
      transition: background 0.25s ease, opacity 0.25s ease;
      box-shadow: inset 2px 2px 0 rgba(255,255,255,0.15), inset -2px -2px 0 rgba(0,0,0,0.35);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .block::after {
      content: '';
      width: 60%;
      height: 55%;
      border-radius: 4px;
      border: 2px solid rgba(0,0,0,0.25);
      box-shadow: inset 1px 1px 2px rgba(255,255,255,0.1);
    }

    .block.eaten {
      background: #10b981;
      box-shadow: inset 2px 2px 0 rgba(255,255,255,0.3), inset -2px -2px 0 rgba(0,0,0,0.2);
    }

    .block.eaten::after {
      border-color: rgba(255,255,255,0.4);
    }

    /* Fraction Display */
    .fraction-card {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      background: #ffffff;
      padding: 12px 24px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      width: 100%;
      max-width: 440px;
    }

    .fraction-math {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      font-size: 32px;
      font-weight: 700;
      line-height: 1;
    }

    .num-val {
      color: #10b981;
      padding-bottom: 4px;
      transition: color 0.2s ease;
    }

    .frac-line {
      width: 100%;
      min-width: 40px;
      height: 3px;
      background: #1e2945;
      border-radius: 2px;
    }

    .den-val {
      color: #3b82f6;
      padding-top: 4px;
    }

    .labels-col {
      display: flex;
      flex-direction: column;
      gap: 12px;
      font-size: 13px;
      font-weight: 600;
    }

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

    .badge-num {
      background: #d1fae5;
      color: #065f46;
      padding: 3px 8px;
      border-radius: 6px;
    }

    .badge-den {
      background: #dbeafe;
      color: #1e40af;
      padding: 3px 8px;
      border-radius: 6px;
    }

    .hint {
      font-size: 12px;
      color: #64748b;
      font-weight: 500;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn-part" onclick="setTotal(2)">2 parts</button>
    <button class="btn-part" onclick="setTotal(3)">3 parts</button>
    <button class="btn-part active" onclick="setTotal(4)">4 parts</button>
    <button class="btn-part" onclick="setTotal(6)">6 parts</button>
  </div>

  <div class="bar-container" id="bar"></div>

  <div class="fraction-card">
    <div class="fraction-math">
      <span class="num-val" id="numText">1</span>
      <span class="frac-line"></span>
      <span class="den-val" id="denText">4</span>
    </div>

    <div class="labels-col">
      <div class="label-row">
        <span class="badge-num">Numerator</span>
        <span style="color: #64748b;">Selected</span>
      </div>
      <div class="label-row">
        <span class="badge-den">Denominator</span>
        <span style="color: #64748b;">Total equal parts</span>
      </div>
    </div>
  </div>

  <div class="hint">Tap blocks to select or unselect</div>

  <script>
    let totalParts = 4;
    let eaten = [true, false, false, false];

    const bar = document.getElementById('bar');
    const numText = document.getElementById('numText');
    const denText = document.getElementById('denText');

    function render() {
      bar.innerHTML = '';
      eaten.forEach((isEaten, idx) => {
        const blk = document.createElement('div');
        blk.className = 'block' + (isEaten ? ' eaten' : '');
        blk.onclick = () => toggleBlock(idx);
        bar.appendChild(blk);
      });

      const selectedCount = eaten.filter(Boolean).length;
      numText.textContent = selectedCount;
      denText.textContent = totalParts;
    }

    function toggleBlock(idx) {
      eaten[idx] = !eaten[idx];
      render();
    }

    function setTotal(n) {
      totalParts = n;
      eaten = Array.from({ length: n }, (_, i) => i === 0);
      document.querySelectorAll('.btn-part').forEach(btn => {
        btn.classList.toggle('active', btn.textContent.startsWith(n.toString()));
      });
      render();
    }

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

Remember: the pieces must always be the exact same size to make fair fraction parts.

Can we use fractions if we have a pile of different toys instead of just one shape? Yes, we can!

A **set** is a collection of separate items, like a group of stars, balls, or friendly animals.

Here, the **denominator** is the total number of items in the whole group, and the **numerator** is the number of items that match what we are looking for.

<!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;
      user-select: none;
      -webkit-user-select: none;
    }
    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: center;
      min-height: 100%;
      padding: 16px;
      gap: 16px;
    }

    /* Tab switcher */
    .tabs {
      display: flex;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 999px;
      gap: 4px;
    }
    .tab-btn {
      border: none;
      background: transparent;
      padding: 8px 18px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: all 0.25s ease;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .tab-btn.active-blue {
      background: #2563eb;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
    }
    .tab-btn.active-yellow {
      background: #f59e0b;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
    }

    /* Stars container */
    .stars-row {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      max-width: 100%;
    }
    .star-card {
      width: 58px;
      height: 58px;
      border-radius: 12px;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      border: 2px solid transparent;
      transition: all 0.3s ease;
    }
    .star-card.blue {
      color: #2563eb;
    }
    .star-card.yellow {
      color: #f59e0b;
    }
    .star-card.dimmed {
      opacity: 0.3;
      filter: grayscale(0.8);
      background: #f1f5f9;
    }
    .star-card.highlight-blue {
      border-color: #2563eb;
      background: #eff6ff;
      transform: translateY(-2px);
    }
    .star-card.highlight-yellow {
      border-color: #f59e0b;
      background: #fffbeb;
      transform: translateY(-2px);
    }

    /* Fraction display panel */
    .display-panel {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      background: #ffffff;
      padding: 16px 24px;
      border-radius: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      width: 100%;
      max-width: 380px;
    }

    /* Big Fraction */
    .fraction-block {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      font-size: 34px;
      font-weight: 700;
      line-height: 1;
    }
    .num {
      padding-bottom: 4px;
      transition: color 0.25s ease;
    }
    .bar {
      width: 100%;
      min-width: 32px;
      height: 3px;
      background: #1e2945;
      border-radius: 2px;
      margin: 2px 0;
    }
    .den {
      padding-top: 4px;
      color: #475569;
    }

    /* Explanatory labels */
    .labels-block {
      display: flex;
      flex-direction: column;
      gap: 12px;
      font-size: 13px;
    }
    .label-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .pill {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 3px 8px;
      border-radius: 6px;
      width: 95px;
      text-align: center;
    }
    .pill-num {
      background: #eff6ff;
      color: #2563eb;
      transition: all 0.25s ease;
    }
    .pill-den {
      background: #f1f5f9;
      color: #475569;
    }
    .label-text {
      color: #334155;
      font-weight: 500;
    }

    @media (max-width: 380px) {
      .star-card {
        width: 48px;
        height: 48px;
        font-size: 24px;
        gap: 6px;
      }
      .display-panel {
        padding: 12px 16px;
        gap: 14px;
      }
      .fraction-block {
        font-size: 28px;
      }
    }
  </style>
</head>
<body>

  <div class="tabs">
    <button class="tab-btn active-blue" id="btn-blue" onclick="setMode('blue')">
      <span>●</span> Blue (2)
    </button>
    <button class="tab-btn" id="btn-yellow" onclick="setMode('yellow')">
      <span>●</span> Yellow (3)
    </button>
  </div>

  <div class="stars-row">
    <div class="star-card blue highlight-blue">★</div>
    <div class="star-card blue highlight-blue">★</div>
    <div class="star-card yellow dimmed">★</div>
    <div class="star-card yellow dimmed">★</div>
    <div class="star-card yellow dimmed">★</div>
  </div>

  <div class="display-panel">
    <div class="fraction-block">
      <div class="num" id="num-val" style="color: #2563eb;">2</div>
      <div class="bar"></div>
      <div class="den">5</div>
    </div>

    <div class="labels-block">
      <div class="label-row">
        <span class="pill pill-num" id="num-pill">Numerator</span>
        <span class="label-text" id="num-desc">2 Blue</span>
      </div>
      <div class="label-row">
        <span class="pill pill-den">Denominator</span>
        <span class="label-text">5 Total</span>
      </div>
    </div>
  </div>

  <script>
    function setMode(mode) {
      const btnBlue = document.getElementById('btn-blue');
      const btnYellow = document.getElementById('btn-yellow');
      const numVal = document.getElementById('num-val');
      const numPill = document.getElementById('num-pill');
      const numDesc = document.getElementById('num-desc');
      const starCards = document.querySelectorAll('.star-card');

      if (mode === 'blue') {
        btnBlue.className = 'tab-btn active-blue';
        btnYellow.className = 'tab-btn';

        numVal.textContent = '2';
        numVal.style.color = '#2563eb';

        numPill.style.background = '#eff6ff';
        numPill.style.color = '#2563eb';
        numDesc.textContent = '2 Blue';

        starCards.forEach((card, idx) => {
          if (idx < 2) {
            card.className = 'star-card blue highlight-blue';
          } else {
            card.className = 'star-card yellow dimmed';
          }
        });
      } else {
        btnYellow.className = 'tab-btn active-yellow';
        btnBlue.className = 'tab-btn';

        numVal.textContent = '3';
        numVal.style.color = '#f59e0b';

        numPill.style.background = '#fffbeb';
        numPill.style.color = '#f59e0b';
        numDesc.textContent = '3 Yellow';

        starCards.forEach((card, idx) => {
          if (idx < 2) {
            card.className = 'star-card blue dimmed';
          } else {
            card.className = 'star-card yellow highlight-yellow';
          }
        });
      }
    }
  </script>
</body>
</html>

If 2 out of 5 stars are blue, then **$\frac{2}{5}$** of the group is blue, while **$\frac{3}{5}$** is yellow.

Look around your room right now: if you have 3 crayons and 1 is red, what fraction of your crayons is red?

math

Fraction Fundamentals: Numerators and Denominators Revisited. Explain the roles of numerators and denominators in representing parts of a whole and parts of a set.

Introduction to Fractions: Parts of a Whole and Parts of a Set

Understanding Numerators, Denominators, and Fractions of Amounts (CfE Second Level)

Teaching Fractions with Understanding: The Part-Whole Concept and Discrete Sets

To ensure mastery, employ the Concrete-Pictorial-Abstract (CPA) approach. Begin with hands-on manipulatives (e.g., folding paper strips for continuous models and sorting two-color counters for discrete set models). Emphasize precise mathematical language early, avoiding reductive phrases like 'top number' and 'bottom number' without defining their respective functions as 'count of parts' (numerator) and 'unit of partition' (denominator).

Fraction Fundamentals: Numerators and Denominators Revisited

The Top and Bottom Numbers

Parts of a Whole