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 mixing a yummy fruit punch using **2 cups of orange juice** for every **1 cup of berry juice**.

How can we write down this tasty recipe rule in quick math language?

A **ratio** is a way to compare two amounts to show how they fit together.

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

    .main-view {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    /* Ratio Display Card */
    .notation-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 12px 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      font-size: 28px;
      font-weight: 700;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    .num-orange { color: #f97316; }
    .num-berry { color: #8b5cf6; }
    .colon { color: #94a3b8; font-weight: 900; }

    /* Visual Groups Display */
    .visual-board {
      width: 100%;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 18px 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    .batch-row {
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 8px;
      background: #f8fafc;
      border: 1px solid #edf2f7;
      border-radius: 10px;
      transition: all 0.3s ease;
    }

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

    .item {
      font-size: 32px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      animation: popIn 0.3s ease;
    }

    .divider-tag {
      font-size: 14px;
      font-weight: 700;
      color: #94a3b8;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      padding: 2px 8px;
      border-radius: 6px;
    }

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

    .btn-step {
      flex: 1;
      max-width: 120px;
      padding: 10px 0;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.02);
      transition: all 0.2s ease;
      text-align: center;
    }

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

    @keyframes popIn {
      0% { transform: scale(0.6); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }
  </style>
</head>
<body>

  <div class="main-view">
    
    <div class="notation-card">
      <span class="num-orange" id="orangeCount">2</span>
      <span class="colon">:</span>
      <span class="num-berry" id="berryCount">1</span>
    </div>

    
    <div class="visual-board" id="board">
      
    </div>

    
    <div class="controls">
      <button class="btn-step active" data-batches="1">1 Batch</button>
      <button class="btn-step" data-batches="2">2 Batches</button>
      <button class="btn-step" data-batches="3">3 Batches</button>
    </div>
  </div>

  <script>
    const board = document.getElementById('board');
    const orangeCount = document.getElementById('orangeCount');
    const berryCount = document.getElementById('berryCount');
    const buttons = document.querySelectorAll('.btn-step');

    function render(batches) {
      // Update Ratio counts
      orangeCount.textContent = 2 * batches;
      berryCount.textContent = 1 * batches;

      // Update Visual batches
      board.innerHTML = '';
      for (let i = 0; i < batches; i++) {
        const row = document.createElement('div');
        row.className = 'batch-row';
        row.innerHTML = `
          <div class="group">
            <span class="item">🍊</span>
            <span class="item">🍊</span>
          </div>
          <span class="divider-tag">to</span>
          <div class="group">
            <span class="item">🫐</span>
          </div>
        `;
        board.appendChild(row);
      }
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        buttons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        const batches = parseInt(btn.dataset.batches, 10);
        render(batches);
      });
    });

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

Whenever you make this punch, the rule stays the same: for every **2 orange**, you add **1 berry**.

Writing all those words takes a long time, so how do mathematicians write it in seconds?

We use two stacked dots called a **colon** ($:$) to stand for the word **to**.

<!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>Ratio Notation</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

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

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

    /* Ratio preset buttons */
    .btn-group {
      display: flex;
      gap: 8px;
      background: #eef2f6;
      padding: 4px;
      border-radius: 24px;
    }

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

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

    /* Visual items row */
    .visual-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      min-height: 72px;
    }

    .item-group {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      justify-content: center;
      min-width: 80px;
    }

    .circle {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #0284c7;
      box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25);
      transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .square {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: #f59e0b;
      box-shadow: 0 2px 4px rgba(245, 158, 11, 0.25);
      transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .divider-space {
      width: 24px;
    }

    /* Notation Box */
    .notation-display {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 16px 28px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    }

    .term {
      font-size: 38px;
      font-weight: 800;
      line-height: 1;
    }

    .term-left {
      color: #0284c7;
    }

    .term-right {
      color: #f59e0b;
    }

    .colon-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      padding: 0 4px;
    }

    .colon-symbol {
      font-size: 38px;
      font-weight: 900;
      color: #1e2945;
      line-height: 1;
    }

    .spoken-tag {
      position: absolute;
      bottom: -22px;
      background: #f1f5f9;
      color: #0f172a;
      font-size: 13px;
      font-weight: 800;
      padding: 2px 8px;
      border-radius: 6px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border: 1px solid #cbd5e1;
      white-space: nowrap;
    }

    /* Spoken translation line */
    .spoken-banner {
      font-size: 20px;
      font-weight: 700;
      color: #475569;
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 4px;
    }

    .spoken-word {
      font-weight: 800;
    }

    .w-left {
      color: #0284c7;
    }

    .w-mid {
      color: #0f172a;
      background: #e2e8f0;
      padding: 2px 8px;
      border-radius: 6px;
    }

    .w-right {
      color: #f59e0b;
    }
  </style>
</head>
<body>

  <div class="main-stage">
    
    <div class="btn-group">
      <button class="ratio-btn active" onclick="setRatio(2, 1, this)">2 : 1</button>
      <button class="ratio-btn" onclick="setRatio(3, 2, this)">3 : 2</button>
      <button class="ratio-btn" onclick="setRatio(1, 4, this)">1 : 4</button>
    </div>

    
    <div class="visual-row">
      <div class="item-group" id="left-items"></div>
      <div class="divider-space"></div>
      <div class="item-group" id="right-items"></div>
    </div>

    
    <div class="notation-display">
      <span class="term term-left" id="num-left">2</span>
      <div class="colon-container">
        <span class="colon-symbol">:</span>
        <span class="spoken-tag">to</span>
      </div>
      <span class="term term-right" id="num-right">1</span>
    </div>

    
    <div class="spoken-banner">
      <span class="spoken-word w-left" id="word-left">two</span>
      <span class="spoken-word w-mid">to</span>
      <span class="spoken-word w-right" id="word-right">one</span>
    </div>
  </div>

  <script>
    const WORDS = {
      1: 'one',
      2: 'two',
      3: 'three',
      4: 'four'
    };

    function setRatio(a, b, btn) {
      document.querySelectorAll('.ratio-btn').forEach(b => b.classList.remove('active'));
      if (btn) btn.classList.add('active');

      // Update numbers & words
      document.getElementById('num-left').textContent = a;
      document.getElementById('num-right').textContent = b;
      document.getElementById('word-left').textContent = WORDS[a];
      document.getElementById('word-right').textContent = WORDS[b];

      // Render shapes
      const leftContainer = document.getElementById('left-items');
      const rightContainer = document.getElementById('right-items');
      
      leftContainer.innerHTML = '';
      rightContainer.innerHTML = '';

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

      for (let i = 0; i < b; i++) {
        const sq = document.createElement('div');
        sq.className = 'square';
        rightContainer.appendChild(sq);
      }
    }

    // Initial render
    setRatio(2, 1);
  </script>
</body>
</html>

When you see $2:1$, you read it out loud as **two to one**.

Does it matter which number you write down first?

The first number in your ratio must match the **first item** mentioned in your comparison.

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

    .diagram {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Item display panels */
    .items-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .item-group {
      background: #ffffff;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .item-group.yellow-group {
      border-color: #fde68a;
    }
    .item-group.blue-group {
      border-color: #bfdbfe;
    }

    .group-label {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .yellow-group .group-label { color: #d97706; }
    .blue-group .group-label { color: #2563eb; }

    .stars-flex {
      display: flex;
      gap: 6px;
      min-height: 36px;
      align-items: center;
      justify-content: center;
    }

    .star-icon {
      font-size: 26px;
      line-height: 1;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
    }
    .star-blue {
      color: #3b82f6;
    }

    .count-badge {
      font-size: 14px;
      font-weight: 700;
      padding: 2px 10px;
      border-radius: 20px;
    }
    .yellow-group .count-badge {
      background: #fef3c7;
      color: #b45309;
    }
    .blue-group .count-badge {
      background: #dbeafe;
      color: #1d4ed8;
    }

    /* Mode Selector Buttons */
    .controls {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      background: #e5e7eb;
      padding: 4px;
      border-radius: 10px;
    }

    .btn-toggle {
      border: none;
      background: transparent;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #4b5563;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.25s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

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

    /* Matching & Result Card */
    .result-card {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }

    .order-flow {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0 8px;
    }

    .flow-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      flex: 1;
    }

    .flow-pos {
      font-size: 11px;
      font-weight: 700;
      color: #9ca3af;
      text-transform: uppercase;
    }

    .flow-tag {
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 6px;
      transition: all 0.3s ease;
    }

    .tag-yellow {
      background: #fef3c7;
      color: #b45309;
      border: 1px solid #fde68a;
    }
    .tag-blue {
      background: #dbeafe;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }

    .flow-arrow {
      font-size: 16px;
      color: #9ca3af;
      padding: 0 4px;
    }

    /* Big Ratio Notation Display */
    .ratio-box {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 10px 20px;
      background: #f8f9fa;
      border-radius: 10px;
      border: 1px dashed #d1d5db;
      width: 100%;
    }

    .ratio-num {
      font-size: 32px;
      font-weight: 800;
      line-height: 1;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      transition: all 0.3s ease;
    }

    .num-yellow {
      background: #fef3c7;
      color: #b45309;
      border: 2px solid #f59e0b;
    }

    .num-blue {
      background: #dbeafe;
      color: #1d4ed8;
      border: 2px solid #3b82f6;
    }

    .ratio-colon {
      font-size: 30px;
      font-weight: 900;
      color: #6b7280;
    }
  </style>
</head>
<body>

  <div class="diagram">
    
    <div class="items-row">
      <div class="item-group yellow-group">
        <span class="group-label">Yellow Stars</span>
        <div class="stars-flex">
          <span class="star-icon">⭐</span>
          <span class="star-icon">⭐</span>
        </div>
        <span class="count-badge">2</span>
      </div>

      <div class="item-group blue-group">
        <span class="group-label">Blue Stars</span>
        <div class="stars-flex">
          <span class="star-icon star-blue">★</span>
          <span class="star-icon star-blue">★</span>
          <span class="star-icon star-blue">★</span>
        </div>
        <span class="count-badge">3</span>
      </div>
    </div>

    
    <div class="controls">
      <button class="btn-toggle active" id="btnYtoB">
        <span>⭐ to ★</span>
      </button>
      <button class="btn-toggle" id="btnBtoY">
        <span>★ to ⭐</span>
      </button>
    </div>

    
    <div class="result-card">
      <div class="order-flow">
        <div class="flow-item">
          <span class="flow-pos">1st Item</span>
          <span class="flow-tag tag-yellow" id="labelFirst">Yellow</span>
        </div>
        <span class="flow-arrow">:</span>
        <div class="flow-item">
          <span class="flow-pos">2nd Item</span>
          <span class="flow-tag tag-blue" id="labelSecond">Blue</span>
        </div>
      </div>

      <div class="ratio-box">
        <div class="ratio-num num-yellow" id="numFirst">2</div>
        <span class="ratio-colon">:</span>
        <div class="ratio-num num-blue" id="numSecond">3</div>
      </div>
    </div>
  </div>

  <script>
    const btnYtoB = document.getElementById('btnYtoB');
    const btnBtoY = document.getElementById('btnBtoY');
    const labelFirst = document.getElementById('labelFirst');
    const labelSecond = document.getElementById('labelSecond');
    const numFirst = document.getElementById('numFirst');
    const numSecond = document.getElementById('numSecond');

    function setOrder(mode) {
      if (mode === 'YtoB') {
        btnYtoB.classList.add('active');
        btnBtoY.classList.remove('active');

        labelFirst.textContent = 'Yellow';
        labelFirst.className = 'flow-tag tag-yellow';

        labelSecond.textContent = 'Blue';
        labelSecond.className = 'flow-tag tag-blue';

        numFirst.textContent = '2';
        numFirst.className = 'ratio-num num-yellow';

        numSecond.textContent = '3';
        numSecond.className = 'ratio-num num-blue';
      } else {
        btnBtoY.classList.add('active');
        btnYtoB.classList.remove('active');

        labelFirst.textContent = 'Blue';
        labelFirst.className = 'flow-tag tag-blue';

        labelSecond.textContent = 'Yellow';
        labelSecond.className = 'flow-tag tag-yellow';

        numFirst.textContent = '3';
        numFirst.className = 'ratio-num num-blue';

        numSecond.textContent = '2';
        numSecond.className = 'ratio-num num-yellow';
      }
    }

    btnYtoB.addEventListener('click', () => setOrder('YtoB'));
    btnBtoY.addEventListener('click', () => setOrder('BtoY'));
  </script>
</body>
</html>

If a puzzle asks for the ratio of **yellow stars to blue stars**, writing $3:2$ is incorrect because yellow must come first as $2:3$.

Next time you share snacks with a friend, look at your piles and see what fun ratio you can write down with a colon!

math

Understanding Ratio Notation and Language. Describe comparisons between quantities using ratio language and colon notation (a:b).

Ratio Language and Notation (Key Stage 3 / CfE Third Level)

Understanding Ratio and Proportion - CfE Third Level & KS3 Maths

Introduction to Ratios and Ratio Language

Although foundational comparison begins early in intuitive play, formal mastery of ratio notation ($a:b$) and proportional reasoning aligns with Curriculum for Excellence (CfE) Third Level (MNU 3-08a). High-impact pedagogical strategies require transitioning learners from concrete manipulatives (e.g., grouping physical beads or cubes) to representational models (bar models and double number lines), with explicit emphasis on reading colon notation verbally ('$a$ to $b$') to cement order-dependent meaning before advancing to proportional division and scaling.

Understanding Ratio Notation and Language

Comparing with Ratios

The Colon Sign

Order Matters