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

What happens if one friend asks for $\frac{1}{2}$ of a chocolate bar, and another friend asks for $0.5$ of a chocolate bar?

They both asked for the exact same amount because fractions and decimals are just **twin numbers** wearing different clothes.

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

    .nav-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .tab-btn {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 15px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.25s ease;
    }

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

    .stage {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 440px;
    }

    .twin-card {
      flex: 1;
      background: #ffffff;
      border-radius: 12px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      border: 1px solid #eef2f6;
    }

    .math-symbol {
      font-size: 26px;
      font-weight: 700;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0f172a;
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      line-height: 1.1;
    }

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

    .fraction .den {
      padding-top: 2px;
    }

    .visual-box {
      width: 100%;
      height: 130px;
      background: #f1f5f9;
      border-radius: 8px;
      margin-top: 10px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border: 1px solid #cbd5e1;
    }

    .grid-container {
      width: 100%;
      height: 100%;
      display: grid;
      gap: 1.5px;
      background: #cbd5e1;
      padding: 1.5px;
    }

    .cell {
      background: #ffffff;
      transition: background-color 0.3s ease;
    }

    .cell.filled {
      background: #22b7ff;
    }

    .cell.filled-alt {
      background: #0284c7;
    }

    .equals-sign {
      font-size: 32px;
      font-weight: 800;
      color: #0284c7;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    .scale-bar-container {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border-radius: 12px;
      padding: 12px;
      margin-top: 14px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      border: 1px solid #eef2f6;
    }

    .bar-track {
      width: 100%;
      height: 18px;
      background: #e2e8f0;
      border-radius: 999px;
      overflow: hidden;
      position: relative;
    }

    .bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #22b7ff, #0284c7);
      border-radius: 999px;
      transition: width 0.4s ease;
    }

    .bar-labels {
      display: flex;
      justify-content: space-between;
      margin-top: 4px;
      font-size: 11px;
      font-weight: 700;
      color: #94a3b8;
    }
  </style>
</head>
<body>

  <div class="nav-tabs">
    <button class="tab-btn active" onclick="setPair(0)">½ = 0.5</button>
    <button class="tab-btn" onclick="setPair(1)">¼ = 0.25</button>
    <button class="tab-btn" onclick="setPair(2)">¾ = 0.75</button>
    <button class="tab-btn" onclick="setPair(3)">¹⁄₁₀ = 0.1</button>
  </div>

  <div class="stage">
    
    <div class="twin-card">
      <div class="math-symbol" id="fractionDisplay">
        <span class="fraction"><span class="num">1</span><span class="den">2</span></span>
      </div>
      <div class="visual-box">
        <div class="grid-container" id="fracGrid"></div>
      </div>
    </div>

    
    <div class="equals-sign">=</div>

    
    <div class="twin-card">
      <div class="math-symbol" id="decimalDisplay">0.5</div>
      <div class="visual-box">
        <div class="grid-container" id="decGrid"></div>
      </div>
    </div>
  </div>

  
  <div class="scale-bar-container">
    <div class="bar-track">
      <div class="bar-fill" id="fillBar" style="width: 50%;"></div>
    </div>
    <div class="bar-labels">
      <span>0</span>
      <span>1</span>
    </div>
  </div>

  <script>
    const pairs = [
      { num: 1, den: 2, dec: '0.5', fracCols: 1, fracRows: 2, fracFill: 1, decFill: 50 },
      { num: 1, den: 4, dec: '0.25', fracCols: 2, fracRows: 2, fracFill: 1, decFill: 25 },
      { num: 3, den: 4, dec: '0.75', fracCols: 2, fracRows: 2, fracFill: 3, decFill: 75 },
      { num: 1, den: 10, dec: '0.1', fracCols: 1, fracRows: 10, fracFill: 1, decFill: 10 }
    ];

    let currentIdx = 0;

    function renderDecimalGrid(fillPercent) {
      const grid = document.getElementById('decGrid');
      grid.style.gridTemplateColumns = 'repeat(10, 1fr)';
      grid.style.gridTemplateRows = 'repeat(10, 1fr)';
      grid.innerHTML = '';
      for (let i = 0; i < 100; i++) {
        const cell = document.createElement('div');
        cell.className = 'cell' + (i < fillPercent ? ' filled-alt' : '');
        grid.appendChild(cell);
      }
    }

    function renderFractionGrid(rows, cols, fillCount) {
      const grid = document.getElementById('fracGrid');
      grid.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
      grid.style.gridTemplateRows = `repeat(${rows}, 1fr)`;
      grid.innerHTML = '';
      const total = rows * cols;
      for (let i = 0; i < total; i++) {
        const cell = document.createElement('div');
        cell.className = 'cell' + (i < fillCount ? ' filled' : '');
        grid.appendChild(cell);
      }
    }

    function setPair(idx) {
      currentIdx = idx;
      const data = pairs[idx];

      // Update buttons
      const buttons = document.querySelectorAll('.tab-btn');
      buttons.forEach((b, i) => b.classList.toggle('active', i === idx));

      // Update texts
      document.getElementById('fractionDisplay').innerHTML = `
        <span class="fraction"><span class="num">${data.num}</span><span class="den">${data.den}</span></span>
      `;
      document.getElementById('decimalDisplay').textContent = data.dec;

      // Update grids
      renderFractionGrid(data.fracRows, data.fracCols, data.fracFill);
      renderDecimalGrid(data.decFill);

      // Update continuous bar
      document.getElementById('fillBar').style.width = data.decFill + '%';
    }

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

How can we add or subtract these twin numbers when they show up in the same problem together?

To solve a problem with fractions and decimals, we **convert** them so they all look like fractions or all look like decimals.

Here are the most common twin pairs that help us switch teams quickly.

<!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>Common Fraction and Decimal Twin Pairs</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

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

    .twin-selector {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      margin-bottom: 14px;
      width: 100%;
      max-width: 460px;
    }

    .twin-btn {
      flex: 1 1 calc(20% - 6px);
      min-width: 68px;
      padding: 8px 4px;
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 10px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
    }

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

    .twin-btn .fraction-preview {
      font-size: 13px;
      line-height: 1.1;
    }

    .twin-btn .decimal-preview {
      font-size: 12px;
      color: #6b7280;
    }

    .twin-btn.active .decimal-preview {
      color: #0284c7;
      font-weight: 700;
    }

    .stage {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 460px;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 14px;
      padding: 16px 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    .side-panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .math-label {
      font-size: 22px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #1e2945;
    }

    .visual-frame {
      width: 110px;
      height: 110px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Fraction Circle */
    .pie-svg {
      width: 100%;
      height: 100%;
      transform: rotate(-90deg);
      border-radius: 50%;
    }

    /* Decimal 100-Grid */
    .grid-100 {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      grid-template-rows: repeat(10, 1fr);
      width: 110px;
      height: 110px;
      border: 1.5px solid #1e2945;
      border-radius: 4px;
      overflow: hidden;
      background: #f8f9fa;
    }

    .grid-cell {
      border: 0.5px solid rgba(0, 0, 0, 0.08);
      background-color: #ffffff;
      transition: background-color 0.25s ease;
    }

    .grid-cell.filled {
      background-color: #22b7ff;
    }

    .equals-divider {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #22b7ff;
      font-size: 28px;
      font-weight: bold;
      padding: 0 4px;
    }

    .badge-bar {
      margin-top: 12px;
      display: flex;
      justify-content: center;
      gap: 16px;
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
    }

    .badge-bar span {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .color-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #22b7ff;
      display: inline-block;
    }
  </style>
</head>
<body>

  <div class="twin-selector" id="btnGroup">
    <button class="twin-btn active" onclick="selectTwin(0)">
      <span class="fraction-preview" id="tab-frac-0"></span>
      <span class="decimal-preview">0.5</span>
    </button>
    <button class="twin-btn" onclick="selectTwin(1)">
      <span class="fraction-preview" id="tab-frac-1"></span>
      <span class="decimal-preview">0.25</span>
    </button>
    <button class="twin-btn" onclick="selectTwin(2)">
      <span class="fraction-preview" id="tab-frac-2"></span>
      <span class="decimal-preview">0.75</span>
    </button>
    <button class="twin-btn" onclick="selectTwin(3)">
      <span class="fraction-preview" id="tab-frac-3"></span>
      <span class="decimal-preview">0.2</span>
    </button>
    <button class="twin-btn" onclick="selectTwin(4)">
      <span class="fraction-preview" id="tab-frac-4"></span>
      <span class="decimal-preview">0.1</span>
    </button>
  </div>

  <div class="stage">
    
    <div class="side-panel">
      <div class="math-label" id="fractionDisplay"></div>
      <div class="visual-frame">
        <svg class="pie-svg" viewBox="0 0 100 100" id="pieSvg"></svg>
      </div>
    </div>

    <div class="equals-divider">
      <span>=</span>
    </div>

    
    <div class="side-panel">
      <div class="math-label" id="decimalDisplay"></div>
      <div class="visual-frame">
        <div class="grid-100" id="decimalGrid"></div>
      </div>
    </div>
  </div>

  <div class="badge-bar">
    <span><i class="color-dot"></i> Same Value</span>
  </div>

  <script>
    const twins = [
      { num: 1, den: 2, dec: "0.5", percent: 50, fracLatex: "\\frac{1}{2}" },
      { num: 1, den: 4, dec: "0.25", percent: 25, fracLatex: "\\frac{1}{4}" },
      { num: 3, den: 4, dec: "0.75", percent: 75, fracLatex: "\\frac{3}{4}" },
      { num: 1, den: 5, dec: "0.2", percent: 20, fracLatex: "\\frac{1}{5}" },
      { num: 1, den: 10, dec: "0.1", percent: 10, fracLatex: "\\frac{1}{10}" }
    ];

    let currentIndex = 0;
    const gridContainer = document.getElementById('decimalGrid');
    const pieSvg = document.getElementById('pieSvg');

    // Create 100 grid cells once
    for (let i = 0; i < 100; i++) {
      const cell = document.createElement('div');
      cell.className = 'grid-cell';
      gridContainer.appendChild(cell);
    }

    // Render tab fraction labels
    twins.forEach((t, i) => {
      const el = document.getElementById(`tab-frac-${i}`);
      if (window.katex && el) {
        katex.render(t.fracLatex, el, { throwOnError: false });
      } else if (el) {
        el.textContent = `${t.num}/${t.den}`;
      }
    });

    function drawPie(num, den) {
      pieSvg.innerHTML = '';
      const cx = 50, cy = 50, r = 48;
      const angleStep = (2 * Math.PI) / den;

      for (let i = 0; i < den; i++) {
        const startAngle = i * angleStep;
        const endAngle = (i + 1) * angleStep;
        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 largeArc = (endAngle - startAngle) > Math.PI ? 1 : 0;

        const pathData = `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${largeArc} 1 ${x2} ${y2} Z`;
        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('d', pathData);
        path.setAttribute('fill', i < num ? '#22b7ff' : '#ffffff');
        path.setAttribute('stroke', '#1e2945');
        path.setAttribute('stroke-width', '2');
        pieSvg.appendChild(path);
      }
    }

    function updateGrid(percent) {
      const cells = gridContainer.children;
      for (let i = 0; i < 100; i++) {
        if (i < percent) {
          cells[i].classList.add('filled');
        } else {
          cells[i].classList.remove('filled');
        }
      }
    }

    function selectTwin(index) {
      currentIndex = index;
      const data = twins[index];

      // Update active button
      const buttons = document.querySelectorAll('.twin-btn');
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });

      // Render math labels
      const fracEl = document.getElementById('fractionDisplay');
      const decEl = document.getElementById('decimalDisplay');
      if (window.katex) {
        katex.render(data.fracLatex, fracEl, { throwOnError: false });
        katex.render(data.dec, decEl, { throwOnError: false });
      } else {
        fracEl.textContent = `${data.num}/${data.den}`;
        decEl.textContent = data.dec;
      }

      // Render visuals
      drawPie(data.num, data.den);
      updateGrid(data.percent);
    }

    // Init first view
    selectTwin(0);
  </script>
</body>
</html>

What does this look like in a real puzzle with more than one step?

Imagine you have $2.5$ cups of juice. You pour in $\frac{1}{4}$ cup more, and then your friend drinks $1.0$ cup.

First, change the fraction $\frac{1}{4}$ into its decimal twin, which is $0.25$.

Next, add the juice you started with to the new juice: $2.5 + 0.25 = 2.75$ cups.

Finally, subtract the $1.0$ cup your friend drank: $2.75 - 1.0 = 1.75$ cups left.

<!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>Mixed Fraction & Decimal Calculation</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; }
    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;
    }
    .wrapper {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .problem-box {
      background: #ffffff;
      padding: 12px 16px;
      border-radius: 12px;
      border: 1px solid #e6e6e6;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 22px;
      font-weight: 600;
    }
    .tabs {
      display: flex;
      gap: 8px;
      background: #eef2f6;
      padding: 4px;
      border-radius: 10px;
    }
    .tab-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 8px 12px;
      border-radius: 8px;
      font-weight: 600;
      font-size: 14px;
      color: #6b7280;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .tab-btn.active {
      background: #ffffff;
      color: #1e2945;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }
    .card-calc {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 16px;
      min-height: 130px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 12px;
    }
    .step-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 12px;
      background: #f8fafc;
      border-radius: 8px;
      font-size: 16px;
    }
    .step-arrow {
      color: #22b7ff;
      font-weight: bold;
    }
    .highlight {
      background: #e0f2fe;
      border: 1px solid #bae6fd;
      font-weight: 600;
      color: #0369a1;
    }
    /* Visual Cup / Bar representation */
    .bar-container {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .bar-labels {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      color: #6b7280;
      font-weight: 500;
    }
    .bar-track {
      height: 28px;
      background: #f1f5f9;
      border-radius: 6px;
      overflow: hidden;
      display: flex;
      position: relative;
      border: 1px solid #cbd5e1;
    }
    .bar-fill {
      height: 100%;
      background: #22b7ff;
      transition: width 0.4s ease;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 8px;
      color: #ffffff;
      font-size: 12px;
      font-weight: 700;
    }
    .bar-removed {
      height: 100%;
      background: #fca5a5;
      border-left: 2px dashed #ef4444;
      opacity: 0.7;
      transition: width 0.4s ease;
    }
    .grid-lines {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      display: flex;
      pointer-events: none;
    }
    .grid-seg {
      flex: 1;
      border-right: 1px dashed rgba(0,0,0,0.15);
    }
    .grid-seg:last-child {
      border-right: none;
    }
    .result-badge {
      text-align: center;
      font-weight: 700;
      font-size: 16px;
      color: #0284c7;
    }
  </style>
</head>
<body>

<div class="wrapper">
  
  <div class="problem-box">
    <span id="math-problem"></span>
  </div>

  
  <div class="tabs">
    <button class="tab-btn active" id="btn-decimal" onclick="setMode('decimal')">Decimals</button>
    <button class="tab-btn" id="btn-fraction" onclick="setMode('fraction')">Fractions</button>
  </div>

  
  <div class="card-calc" id="calc-content">
    
  </div>

  
  <div class="bar-container">
    <div class="bar-labels">
      <span>0</span>
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </div>
    <div class="bar-track">
      <div class="bar-fill" id="bar-fill" style="width: 58.33%;">1.75</div>
      <div class="bar-removed" id="bar-removed" style="width: 33.33%;"></div>
      <div class="grid-lines">
        <div class="grid-seg"></div>
        <div class="grid-seg"></div>
        <div class="grid-seg"></div>
      </div>
    </div>
    <div class="result-badge" id="result-text"></div>
  </div>
</div>

<script>
  let mode = 'decimal';

  function renderMath() {
    if (typeof katex === 'undefined') return;

    katex.render("2\\frac{3}{4} - 1.0 = \\,?", document.getElementById('math-problem'), { displayMode: false });

    const content = document.getElementById('calc-content');
    const resultBadge = document.getElementById('result-text');
    const barFill = document.getElementById('bar-fill');

    if (mode === 'decimal') {
      content.innerHTML = `
        <div class="step-row">
          <span>Convert fraction</span>
          <span class="step-arrow">→</span>
          <span id="k-s1"></span>
        </div>
        <div class="step-row highlight">
          <span>Subtract</span>
          <span class="step-arrow">→</span>
          <span id="k-s2"></span>
        </div>
      `;
      katex.render("2\\frac{3}{4} = 2.75", document.getElementById('k-s1'));
      katex.render("2.75 - 1.00 = 1.75", document.getElementById('k-s2'));
      katex.render("\\text{Remaining: } 1.75", resultBadge);
      barFill.textContent = "1.75";
    } else {
      content.innerHTML = `
        <div class="step-row">
          <span>Convert decimal</span>
          <span class="step-arrow">→</span>
          <span id="k-s1"></span>
        </div>
        <div class="step-row highlight">
          <span>Subtract</span>
          <span class="step-arrow">→</span>
          <span id="k-s2"></span>
        </div>
      `;
      katex.render("1.0 = 1", document.getElementById('k-s1'));
      katex.render("2\\frac{3}{4} - 1 = 1\\frac{3}{4}", document.getElementById('k-s2'));
      katex.render("\\text{Remaining: } 1\\frac{3}{4}", resultBadge);
      barFill.textContent = "1 ¾";
    }
  }

  function setMode(newMode) {
    mode = newMode;
    document.getElementById('btn-decimal').classList.toggle('active', mode === 'decimal');
    document.getElementById('btn-fraction').classList.toggle('active', mode === 'fraction');
    renderMath();
  }

  window.addEventListener('DOMContentLoaded', () => {
    const checkKaTeX = setInterval(() => {
      if (typeof katex !== 'undefined') {
        clearInterval(checkKaTeX);
        renderMath();
      }
    }, 50);
  });
</script>

</body>
</html>

What is the biggest trap to avoid when numbers look different?

## Common Mistake: Mixing Before Matching

Never add the top or bottom of a fraction straight into a decimal number like $0.5 + \frac{1}{2} = 0.6$.

Always change $\frac{1}{2}$ into $0.5$ first, so $0.5 + 0.5 = 1.0$ whole.

Next time you see fractions and decimals together, choose your favorite team first and line them up.

math

Calculations With Both Common and Decimal Fractions. Perform mixed operations combining fractions and decimal fractions in a single multi-step problem.

Third Level Maths and Numeracy: Fractions, Decimals and Percentages (CfE MNU 3-07a)

Adding and Subtracting Mixed Rational Numbers (Fractions and Decimals)

Perform Mixed Multi-Step Operations with Fractions and Decimals

Although the prompt header mentions Early Level (P1), the curriculum benchmark MNU 3-07a and standard mathematical objective 'Calculations With Both Common and Decimal Fractions' belong to Curriculum for Excellence (CfE) Third Level (Secondary S1–S3, ages 11–14). The pedagogical progression requires ensuring mastery in converting between terminating decimals and fractions, recognizing recurring decimals to preserve fractional forms for precision, and strictly enforcing the hierarchy of operations (BODMAS) when manipulating mixed representations.

Calculations With Both Common and Decimal Fractions

Pick One Team

Step-by-Step Snack Problem