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 two worms having a race, but one worm starts way ahead of the other! How can we tell which worm is truly the longest?

To find out which object is **longer** or **shorter**, we have to compare them fairly.

To make a fair test, line up one end of each object flat against a straight line called a **baseline**.

<!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; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
    }

    .btn {
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 600;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      background: #ffffff;
      color: #4b5563;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    .btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
    }

    .stage {
      position: relative;
      width: 100%;
      max-width: 480px;
      height: 220px;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 24px 16px 24px 80px;
    }

    .baseline-wrap {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 80px;
      width: 2px;
      background: #ef4444;
      z-index: 10;
      transition: opacity 0.3s;
    }

    .baseline-label {
      position: absolute;
      top: 8px;
      left: -38px;
      background: #ef4444;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .pencil-track {
      position: relative;
      height: 56px;
      display: flex;
      align-items: center;
    }

    .pencil {
      position: absolute;
      left: 0;
      height: 38px;
      display: flex;
      align-items: center;
      transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .eraser {
      width: 14px;
      height: 38px;
      border-radius: 4px 0 0 4px;
      border: 1.5px solid rgba(0,0,0,0.15);
      border-right: none;
    }

    .metal {
      width: 8px;
      height: 38px;
      background: #9ca3af;
      border-top: 1.5px solid rgba(0,0,0,0.15);
      border-bottom: 1.5px solid rgba(0,0,0,0.15);
    }

    .body {
      height: 38px;
      border-top: 1.5px solid rgba(0,0,0,0.15);
      border-bottom: 1.5px solid rgba(0,0,0,0.15);
    }

    .wood {
      width: 0;
      height: 0;
      border-top: 19px solid transparent;
      border-bottom: 19px solid transparent;
      border-left: 24px solid #fde047;
    }

    .lead {
      position: absolute;
      right: 0;
      width: 0;
      height: 0;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-left: 8px solid #1e2945;
    }

    /* Blue Pencil */
    .pencil-blue .eraser { background: #f472b6; }
    .pencil-blue .body { width: 180px; background: #0284c7; }

    /* Yellow Pencil */
    .pencil-yellow .eraser { background: #f472b6; }
    .pencil-yellow .body { width: 110px; background: #eab308; }

    .tag {
      position: absolute;
      right: -72px;
      font-size: 13px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
      opacity: 0;
      transform: translateX(-6px);
      transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
      white-space: nowrap;
    }

    .tag-blue { background: #e0f2fe; color: #0369a1; }
    .tag-yellow { background: #fef9c3; color: #854d0e; }

    .aligned .tag {
      opacity: 1;
      transform: translateX(0);
    }

    /* Unaligned Offsets */
    .unaligned .pencil-blue {
      transform: translateX(35px);
    }
    .unaligned .pencil-yellow {
      transform: translateX(110px);
    }
    .unaligned .baseline-wrap {
      opacity: 0.35;
    }

    /* Aligned (at Baseline) */
    .aligned .pencil-blue {
      transform: translateX(0);
    }
    .aligned .pencil-yellow {
      transform: translateX(0);
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn" id="btnUnfair" onclick="setMode(false)">Not Aligned</button>
    <button class="btn active" id="btnFair" onclick="setMode(true)">Lined Up</button>
  </div>

  <div class="stage aligned" id="stage">
    <div class="baseline-wrap">
      <span class="baseline-label">Baseline</span>
    </div>

    
    <div class="pencil-track">
      <div class="pencil pencil-blue">
        <div class="eraser"></div>
        <div class="metal"></div>
        <div class="body"></div>
        <div class="wood"></div>
        <div class="lead"></div>
        <span class="tag tag-blue">Longer</span>
      </div>
    </div>

    
    <div class="pencil-track">
      <div class="pencil pencil-yellow">
        <div class="eraser"></div>
        <div class="metal"></div>
        <div class="body"></div>
        <div class="wood"></div>
        <div class="lead"></div>
        <span class="tag tag-yellow">Shorter</span>
      </div>
    </div>
  </div>

  <script>
    function setMode(isAligned) {
      const stage = document.getElementById('stage');
      const btnFair = document.getElementById('btnFair');
      const btnUnfair = document.getElementById('btnUnfair');

      if (isAligned) {
        stage.classList.remove('unaligned');
        stage.classList.add('aligned');
        btnFair.classList.add('active');
        btnUnfair.classList.remove('active');
      } else {
        stage.classList.remove('aligned');
        stage.classList.add('unaligned');
        btnUnfair.classList.add('active');
        btnFair.classList.remove('active');
      }
    }
  </script>
</body>
</html>

The blue pencil reaches further out from the baseline, so it is longer. The yellow pencil does not reach as far, so it is shorter.

What happens if you don't start at the baseline? Can a short pencil look like the winner?

If the ends do not match up at the start, your eyes can easily get tricked.

<!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>Comparing Lengths Directly</title>
  <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: #f8f9fa;
      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;
      gap: 16px;
    }

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

    .step-btn {
      flex: 1;
      max-width: 160px;
      padding: 10px 14px;
      font-size: 14px;
      font-weight: 600;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      border-radius: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.25s ease;
    }

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

    /* Comparison Track Area */
    .track-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 24px 16px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    /* Start baseline */
    .baseline-guide {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 70px;
      width: 2px;
      background: #22b7ff;
      z-index: 5;
    }

    .baseline-label {
      position: absolute;
      top: 8px;
      left: 76px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #0284c7;
      background: #e0f2fe;
      padding: 2px 6px;
      border-radius: 4px;
      white-space: nowrap;
      z-index: 6;
    }

    /* Pencil Row */
    .pencil-row {
      position: relative;
      height: 48px;
      display: flex;
      align-items: center;
    }

    .pencil-container {
      position: absolute;
      left: 70px;
      display: flex;
      align-items: center;
      transition: transform 0.6s cubic-bezier(0.34, 1.2, 0.64, 1);
    }

    /* Pencil Graphic */
    .pencil {
      display: flex;
      align-items: center;
      height: 32px;
      filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.08));
    }

    .eraser {
      width: 14px;
      height: 28px;
      background: #fb7185;
      border-radius: 4px 0 0 4px;
      border: 1px solid rgba(0,0,0,0.1);
      border-right: none;
    }

    .ferrule {
      width: 10px;
      height: 30px;
      background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 50%, #94a3b8 100%);
      border: 1px solid rgba(0,0,0,0.15);
      border-left: none;
      border-right: none;
    }

    .body {
      height: 32px;
      position: relative;
      border-top: 1px solid rgba(0,0,0,0.08);
      border-bottom: 1px solid rgba(0,0,0,0.12);
    }

    /* Yellow pencil body */
    .yellow-body {
      width: 140px;
      background: linear-gradient(180deg, #fde047 0%, #eab308 50%, #ca8a04 100%);
    }

    /* Blue pencil body */
    .blue-body {
      width: 195px;
      background: linear-gradient(180deg, #38bdf8 0%, #0284c7 50%, #0369a1 100%);
    }

    .wood {
      width: 0;
      height: 0;
      border-top: 16px solid transparent;
      border-bottom: 16px solid transparent;
      border-left: 24px solid #fed7aa;
    }

    .lead {
      width: 0;
      height: 0;
      margin-left: -24px;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 8px solid #334155;
    }

    /* Tags / Badges */
    .result-badge {
      position: absolute;
      right: 4px;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      transition: all 0.3s ease;
      opacity: 0;
      transform: translateX(10px);
    }

    .result-badge.visible {
      opacity: 1;
      transform: translateX(0);
    }

    .badge-shorter {
      background: #f1f5f9;
      color: #64748b;
      border: 1px solid #cbd5e1;
    }

    .badge-longer {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    /* State modifier */
    .state-misaligned #yellowPencil {
      transform: translateX(95px);
    }

    .state-aligned #yellowPencil {
      transform: translateX(0px);
    }
  </style>
</head>
<body>

  <div class="main-stage" id="stage">
    
    <div class="controls">
      <button class="step-btn active" id="btnMisaligned">
        <span>1.</span> Misaligned
      </button>
      <button class="step-btn" id="btnAligned">
        <span>2.</span> Lined Up
      </button>
    </div>

    
    <div class="track-card state-misaligned" id="trackCard">
      
      <div class="baseline-guide"></div>
      <div class="baseline-label">Start Line</div>

      
      <div class="pencil-row">
        <div class="pencil-container" id="yellowPencil">
          <div class="pencil">
            <div class="eraser"></div>
            <div class="ferrule"></div>
            <div class="body yellow-body"></div>
            <div class="wood"></div>
            <div class="lead"></div>
          </div>
        </div>
        <div class="result-badge badge-shorter" id="badgeYellow">Shorter</div>
      </div>

      
      <div class="pencil-row">
        <div class="pencil-container" id="bluePencil">
          <div class="pencil">
            <div class="eraser"></div>
            <div class="ferrule"></div>
            <div class="body blue-body"></div>
            <div class="wood"></div>
            <div class="lead"></div>
          </div>
        </div>
        <div class="result-badge badge-longer" id="badgeBlue">Longer ✓</div>
      </div>
    </div>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const trackCard = $('#trackCard');
    const btnMisaligned = $('#btnMisaligned');
    const btnAligned = $('#btnAligned');
    const badgeYellow = $('#badgeYellow');
    const badgeBlue = $('#badgeBlue');

    let currentStep = 0;
    let autoTimer = null;

    function setStep(stepIndex) {
      currentStep = stepIndex;

      if (currentStep === 0) {
        // Step 1: Misaligned
        trackCard.classList.remove('state-aligned');
        trackCard.classList.add('state-misaligned');
        btnMisaligned.classList.add('active');
        btnAligned.classList.remove('active');
        badgeYellow.classList.remove('visible');
        badgeBlue.classList.remove('visible');
      } else {
        // Step 2: Lined up
        trackCard.classList.remove('state-misaligned');
        trackCard.classList.add('state-aligned');
        btnMisaligned.classList.remove('active');
        btnAligned.classList.add('active');
        setTimeout(() => {
          if (currentStep === 1) {
            badgeYellow.classList.add('visible');
            badgeBlue.classList.add('visible');
          }
        }, 400);
      }
    }

    function resetTimer() {
      if (autoTimer) clearInterval(autoTimer);
      autoTimer = setInterval(() => {
        setStep(currentStep === 0 ? 1 : 0);
      }, 3500);
    }

    onTap(btnMisaligned, () => {
      setStep(0);
      resetTimer();
    });

    onTap(btnAligned, () => {
      setStep(1);
      resetTimer();
    });

    // Start pedagogical auto-cycling
    resetTimer();
  </script>
</body>
</html>

The yellow pencil only looked longer because it had an unfair head start! When lined up correctly, the blue pencil always wins.

Can you try comparing two pieces of ribbon to see which one stretches further?

Place a red ribbon and a green ribbon flat side-by-side with their left edges touching the baseline.

<!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; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f8f9fa;
    color: #1e2945;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    user-select: none;
    -webkit-user-select: none;
  }
  .controls {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
  }
  .btn {
    border: none;
    background: #ffffff;
    color: #1e2945;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .btn.active {
    background: #22b7ff;
    color: #ffffff;
  }
  .stage {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 240px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .baseline-track {
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: 70px;
    width: 3px;
    background: #22b7ff;
    border-radius: 2px;
    z-index: 5;
  }
  .baseline-tag {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #22b7ff;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .ribbon-row {
    position: relative;
    height: 64px;
    display: flex;
    align-items: center;
    width: 100%;
  }
  .ribbon {
    position: absolute;
    left: 70px;
    height: 44px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px;
    transition: transform 0.4s ease, width 0.4s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  }
  .ribbon-red {
    background: linear-gradient(90deg, #ff5b5b, #e02424);
    width: calc(100% - 100px);
  }
  .ribbon-green {
    background: linear-gradient(90deg, #31c48d, #057a55);
    width: calc(60% - 70px);
  }
  .badge {
    position: absolute;
    right: 12px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    background: rgba(0,0,0,0.25);
    padding: 3px 8px;
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  .aligned .badge {
    opacity: 1;
  }
  .shifted .ribbon-green {
    transform: translateX(110px);
  }
  .shifted .baseline-track {
    opacity: 0.3;
    background: #9ca3af;
  }
  .shifted .baseline-tag {
    background: #9ca3af;
  }
  .legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
  }
  .status-text {
    height: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
    margin-top: 12px;
    text-align: center;
  }
</style>
</head>
<body>

<div class="controls">
  <button class="btn active" id="btnAlign" onclick="setMode('aligned')">Aligned (Fair)</button>
  <button class="btn" id="btnShift" onclick="setMode('shifted')">Not Aligned</button>
</div>

<div class="stage aligned" id="stage">
  <div class="baseline-track">
    <div class="baseline-tag">Baseline</div>
  </div>

  <div class="ribbon-row">
    <div class="ribbon ribbon-red">
      <span class="badge">Longer ✦</span>
    </div>
  </div>

  <div class="ribbon-row">
    <div class="ribbon ribbon-green">
      <span class="badge">Shorter</span>
    </div>
  </div>
</div>

<div class="status-text" id="status">Start at the baseline to compare.</div>

<script>
  function setMode(mode) {
    const stage = document.getElementById('stage');
    const btnAlign = document.getElementById('btnAlign');
    const btnShift = document.getElementById('btnShift');
    const status = document.getElementById('status');

    if (mode === 'aligned') {
      stage.classList.remove('shifted');
      stage.classList.add('aligned');
      btnAlign.classList.add('active');
      btnShift.classList.remove('active');
      status.textContent = 'Left edges match: red is longer!';
    } else {
      stage.classList.remove('aligned');
      stage.classList.add('shifted');
      btnShift.classList.add('active');
      btnAlign.classList.remove('active');
      status.textContent = 'Without a baseline, length is unclear.';
    }
  }
</script>

</body>
</html>

Look at any two objects around you right now, like a crayon and a book. Line them up against the edge of your desk to see which one is longer!

math

Comparing Lengths Directly: Longer and Shorter. Align two objects side by side with a common baseline to determine which is longer or shorter.

Comparing Length and Height - Early Level & KS1 Maths

Directly Compare Lengths: Early Math

Making Caterpillars & Long Creatures: Comparing Length

Teaching direct comparison at Early Level (P1) requires a Concrete-Pictorial-Abstract (CPA) pedagogical sequence rooted in play and practical exploration. Begin with tactile classroom objects (unfix cubes, ribbons, pencils) placed against physical ledges or table edges to establish the concrete understanding of a 'fair start' (baseline). Prioritise oral language development by having children repeat full comparison sentences ('$A$ is longer than $B$', '$B$ is shorter than $A$') to master the relational reciprocity of length before moving to indirect comparison or non-standard measurement units.

Comparing Lengths Directly: Longer and Shorter

Starting at the Same Line

The Baseline Rule

Comparing Ribbons