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 walking along a straight sidewalk from your front door at 0 to your friend's house at 1. If you stop to rest right in the exact middle, where are you?

You are at **one half**! That means you completed one of two equal parts of the trip.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <link rel="stylesheet" href="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;
      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: space-between;
      min-height: 100%;
      padding: 16px 12px 20px;
    }

    .nav-steps {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
      margin-bottom: 8px;
    }

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

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

    .svg-container {
      width: 100%;
      max-width: 540px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: auto;
      overflow: visible;
    }

    /* Transition states */
    .part-arc {
      fill: none;
      stroke-width: 4;
      stroke-linecap: round;
      stroke-dasharray: 6 6;
      opacity: 0;
      transition: opacity 0.4s ease, stroke-dashoffset 0.6s ease;
    }

    .part-fill {
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .split-tick, .half-dot, .half-label, .equal-label {
      opacity: 0;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* State 1: Split visible */
    [data-state="1"] .part-arc,
    [data-state="2"] .part-arc {
      opacity: 1;
    }

    [data-state="1"] .split-tick,
    [data-state="2"] .split-tick {
      opacity: 1;
    }

    [data-state="1"] .equal-label {
      opacity: 1;
    }

    /* State 2: Half highlighted */
    [data-state="2"] .part1-fill {
      opacity: 0.15;
    }

    [data-state="2"] .part-arc-1 {
      stroke-dasharray: none;
      stroke: #22b7ff;
      stroke-width: 5;
    }

    [data-state="2"] .half-dot {
      opacity: 1;
      transform: scale(1);
    }

    [data-state="2"] .half-label {
      opacity: 1;
    }

    .katex-label {
      font-size: 20px;
      font-weight: bold;
    }
  </style>
</head>
<body data-state="0">

  <div class="nav-steps">
    <button class="step-btn active" onclick="setStep(0)">1. Whole</button>
    <button class="step-btn" onclick="setStep(1)">2. Split</button>
    <button class="step-btn" onclick="setStep(2)">3. One Half</button>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 540 260">
      <defs>
        <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#22b7ff" flood-opacity="0.4"/>
        </filter>
        <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#94a3b8"/>
        </marker>
      </defs>

      
      <rect class="part-fill part1-fill" x="70" y="110" width="200" height="40" rx="6" fill="#22b7ff" />

      
      <path class="part-arc part-arc-1" d="M 70,120 Q 170,50 270,120" stroke="#38bdf8" />
      <path class="part-arc part-arc-2" d="M 270,120 Q 370,50 470,120" stroke="#94a3b8" />

      
      <g class="equal-label">
        <rect x="135" y="46" width="70" height="24" rx="12" fill="#e0f2fe"/>
        <text x="170" y="62" text-anchor="middle" font-size="12" font-weight="700" fill="#0284c7">Part 1</text>

        <rect x="335" y="46" width="70" height="24" rx="12" fill="#f1f5f9"/>
        <text x="370" y="62" text-anchor="middle" font-size="12" font-weight="700" fill="#64748b">Part 2</text>
      </g>

      
      <line x1="50" y1="130" x2="490" y2="130" stroke="#cbd5e1" stroke-width="4" stroke-linecap="round"/>
      <line x1="70" y1="130" x2="470" y2="130" stroke="#1e2945" stroke-width="4" stroke-linecap="round"/>

      
      
      <line x1="70" y1="114" x2="70" y2="146" stroke="#1e2945" stroke-width="4" stroke-linecap="round"/>
      <text x="70" y="176" text-anchor="middle" font-size="20" font-weight="700" fill="#1e2945">0</text>

      
      <line x1="470" y1="114" x2="470" y2="146" stroke="#1e2945" stroke-width="4" stroke-linecap="round"/>
      <text x="470" y="176" text-anchor="middle" font-size="20" font-weight="700" fill="#1e2945">1</text>

      
      <line class="split-tick" x1="270" y1="116" x2="270" y2="144" stroke="#0284c7" stroke-width="3" stroke-linecap="round"/>

      
      <circle class="half-dot" cx="270" cy="130" r="9" fill="#22b7ff" stroke="#ffffff" stroke-width="3" filter="url(#glow)"/>

      
      <foreignObject class="half-label" x="220" y="152" width="100" height="60">
        <div xmlns="http://www.w3.org/1999/xhtml" style="display:flex; justify-content:center; align-items:center; color:#0284c7;" id="fraction-container"></div>
      </foreignObject>
    </svg>
  </div>

  <script>
    let currentStep = 0;
    let autoTimer = null;

    function renderMath() {
      if (window.katex) {
        katex.render("\\frac{1}{2}", document.getElementById('fraction-container'), {
          throwOnError: false
        });
      } else {
        setTimeout(renderMath, 100);
      }
    }

    function setStep(index) {
      currentStep = index;
      document.body.setAttribute('data-state', index);

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

      resetAutoLoop();
    }

    function resetAutoLoop() {
      clearInterval(autoTimer);
      autoTimer = setInterval(() => {
        currentStep = (currentStep + 1) % 3;
        setStep(currentStep);
      }, 3500);
    }

    window.addEventListener('DOMContentLoaded', () => {
      renderMath();
      resetAutoLoop();
    });
  </script>
</body>
</html>

How do we find this exact spot on a math line every single time?

A **number line** is a straight line that shows numbers in order like a ruler.

To place the fraction **1/2**, we split the whole space between 0 and 1 into **two equal parts**.

<!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>Locating One Half on a Number Line</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px 12px;
      user-select: none;
    }

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

    .tab-btn {
      flex: 1;
      padding: 8px 10px;
      font-size: 14px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }

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

    .stage {
      position: relative;
      width: 100%;
      max-width: 500px;
      height: 260px;
      background: #ffffff;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Jump Arcs */
    .jump-arc {
      fill: none;
      stroke: #22b7ff;
      stroke-width: 3.5;
      stroke-dasharray: 200;
      stroke-dashoffset: 200;
      transition: stroke-dashoffset 0.6s ease, opacity 0.4s ease;
      opacity: 0;
    }

    .jump-arc.second {
      stroke: #94a3b8;
      stroke-dasharray: 4 4;
      stroke-width: 2.5;
    }

    .jump-arc.visible {
      stroke-dashoffset: 0;
      opacity: 1;
    }

    /* Equal parts brackets/bars */
    .part-bar {
      transition: opacity 0.4s ease, transform 0.4s ease;
      opacity: 0;
      transform-origin: center;
    }

    .part-bar.visible {
      opacity: 1;
    }

    /* Fraction Marker */
    .fraction-marker {
      transition: transform 0.4s ease, opacity 0.4s ease;
      transform: scale(0.6);
      opacity: 0;
      transform-origin: 250px 175px;
    }

    .fraction-marker.visible {
      transform: scale(1);
      opacity: 1;
    }

    .point-dot {
      transition: r 0.3s ease, fill 0.3s ease;
    }

    .point-dot.active {
      fill: #22b7ff;
      r: 8;
    }

    .tick-label {
      font-size: 20px;
      font-weight: 700;
      fill: #1e2945;
      text-anchor: middle;
      dominant-baseline: central;
    }

    .sub-label {
      font-size: 13px;
      font-weight: 600;
      fill: #64748b;
      text-anchor: middle;
    }
  </style>
</head>
<body>

  <div class="nav-tabs">
    <button class="tab-btn active" id="btn-0" onclick="setStep(0)">1. Whole (0–1)</button>
    <button class="tab-btn" id="btn-1" onclick="setStep(1)">2. Halve</button>
    <button class="tab-btn" id="btn-2" onclick="setStep(2)">3. Jump to ½</button>
  </div>

  <div class="stage">
    <svg viewBox="0 0 500 240">
      <defs>
        
        <marker id="arrow1" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1 L 8 5 L 0 9 z" fill="#22b7ff" />
        </marker>
        
        <marker id="arrow2" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1 L 8 5 L 0 9 z" fill="#94a3b8" />
        </marker>
      </defs>

      
      <g id="equal-parts" class="part-bar">
        
        <rect x="70" y="110" width="180" height="24" fill="#e0f2fe" rx="4" />
        <text x="160" y="126" class="sub-label" fill="#0284c7">Equal part 1</text>
        
        
        <rect x="250" y="110" width="180" height="24" fill="#f1f5f9" rx="4" />
        <text x="340" y="126" class="sub-label" fill="#64748b">Equal part 2</text>
      </g>

      
      <path id="jump-1" class="jump-arc" d="M 70 145 C 110 50, 210 50, 248 143" marker-end="url(#arrow1)" />
      <path id="jump-2" class="jump-arc second" d="M 252 145 C 292 65, 390 65, 428 143" marker-end="url(#arrow2)" />

      
      <line x1="40" y1="145" x2="460" y2="145" stroke="#cbd5e1" stroke-width="4" stroke-linecap="round" />
      <line x1="70" y1="145" x2="430" y2="145" stroke="#1e2945" stroke-width="4" />

      
      <line x1="70" y1="130" x2="70" y2="160" stroke="#1e2945" stroke-width="4" stroke-linecap="round" />
      <circle cx="70" cy="145" r="5" fill="#1e2945" />
      <text x="70" y="180" class="tick-label">0</text>

      
      <line x1="430" y1="130" x2="430" y2="160" stroke="#1e2945" stroke-width="4" stroke-linecap="round" />
      <circle cx="430" cy="145" r="5" fill="#1e2945" />
      <text x="430" y="180" class="tick-label">1</text>

      
      <line x1="250" y1="132" x2="250" y2="158" stroke="#22b7ff" stroke-width="3" stroke-linecap="round" />
      <circle id="mid-dot" class="point-dot" cx="250" cy="145" r="5" fill="#94a3b8" />

      
      <g id="fraction-label" class="fraction-marker">
        
        <rect x="228" y="172" width="44" height="52" rx="8" fill="#e0f2fe" stroke="#22b7ff" stroke-width="2" />
        
        <text x="250" y="189" font-size="16" font-weight="800" fill="#0284c7" text-anchor="middle">1</text>
        
        <line x1="237" y1="198" x2="263" y2="198" stroke="#0284c7" stroke-width="2" stroke-linecap="round" />
        
        <text x="250" y="215" font-size="16" font-weight="800" fill="#0284c7" text-anchor="middle">2</text>
      </g>
    </svg>
  </div>

  <script>
    let currentStep = 0;
    let autoTimer = null;

    function setStep(step, userTriggered = true) {
      currentStep = step;
      if (userTriggered && autoTimer) {
        clearInterval(autoTimer);
      }

      // Update buttons
      for (let i = 0; i < 3; i++) {
        document.getElementById(`btn-${i}`).classList.toggle('active', i === step);
      }

      const parts = document.getElementById('equal-parts');
      const jump1 = document.getElementById('jump-1');
      const jump2 = document.getElementById('jump-2');
      const dot = document.getElementById('mid-dot');
      const fraction = document.getElementById('fraction-label');

      if (step === 0) {
        parts.classList.remove('visible');
        jump1.classList.remove('visible');
        jump2.classList.remove('visible');
        dot.classList.remove('active');
        fraction.classList.remove('visible');
      } else if (step === 1) {
        parts.classList.add('visible');
        jump1.classList.remove('visible');
        jump2.classList.remove('visible');
        dot.classList.remove('active');
        fraction.classList.remove('visible');
      } else if (step === 2) {
        parts.classList.add('visible');
        jump1.classList.add('visible');
        jump2.classList.add('visible');
        dot.classList.add('active');
        fraction.classList.add('visible');
      }
    }

    // Auto-advance gently through the 3 steps
    autoTimer = setInterval(() => {
      currentStep = (currentStep + 1) % 3;
      setStep(currentStep, false);
    }, 3200);
  </script>
</body>
</html>

In the fraction $\frac{1}{2}$, the bottom number 2 means two equal jumps in total, and the top number 1 means you take one jump from 0.

What happens if our jumps are not the same size?

If one piece is short and the other piece is long, that mark is **not** one half. Both sides must be the exact same length.

<!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;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .wrapper {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    .status-badge {
      font-size: 16px;
      font-weight: 700;
      padding: 8px 18px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.25s ease, color 0.25s ease;
    }
    .status-badge.equal {
      background: #e6f7ff;
      color: #0077cc;
      box-shadow: 0 2px 8px rgba(0, 119, 204, 0.15);
    }
    .status-badge.unequal {
      background: #fef2f2;
      color: #dc2626;
    }

    /* Number Line Canvas Container */
    .line-container {
      width: 100%;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 24px 20px 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
      position: relative;
    }

    /* Segment Bars Above Line */
    .segments-track {
      position: relative;
      height: 14px;
      border-radius: 7px;
      background: #eef2f6;
      overflow: hidden;
      display: flex;
      margin-bottom: 24px;
    }
    .seg-left {
      height: 100%;
      background: #22b7ff;
      transition: width 0.05s linear;
    }
    .seg-right {
      height: 100%;
      background: #94d82d;
      transition: width 0.05s linear;
    }

    /* The Main Number Line */
    .axis-area {
      position: relative;
      height: 60px;
      margin: 0 16px;
    }
    .axis-line {
      position: absolute;
      top: 20px;
      left: 0;
      right: 0;
      height: 4px;
      background: #1e2945;
      border-radius: 2px;
    }
    .tick {
      position: absolute;
      top: 10px;
      width: 4px;
      height: 24px;
      background: #1e2945;
      border-radius: 2px;
      transform: translateX(-50%);
    }
    .tick-0 { left: 0%; }
    .tick-1 { left: 100%; }

    .tick-label {
      position: absolute;
      top: 38px;
      transform: translateX(-50%);
      font-size: 18px;
      font-weight: 700;
      color: #1e2945;
    }
    .label-0 { left: 0%; }
    .label-1 { left: 100%; }

    /* Interactive Marker Handle */
    .handle {
      position: absolute;
      top: -2px;
      width: 44px;
      height: 48px;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: grab;
      touch-action: none;
      z-index: 10;
    }
    .handle:active {
      cursor: grabbing;
    }
    .handle-pin {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #ffffff;
      border: 4px solid #0077cc;
      box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    }
    .handle-stem {
      width: 4px;
      height: 22px;
      background: #0077cc;
      border-radius: 2px;
    }
    .handle-label {
      position: absolute;
      top: -22px;
      font-size: 14px;
      font-weight: 800;
      color: #0077cc;
      background: #ffffff;
      padding: 1px 6px;
      border-radius: 4px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
      white-space: nowrap;
    }

    /* Comparison Bars Card */
    .compare-box {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 8px;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 12px 16px;
    }
    .compare-row {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      font-weight: 700;
    }
    .compare-bar-wrap {
      flex: 1;
      height: 12px;
      background: #f1f5f9;
      border-radius: 6px;
      overflow: hidden;
    }
    .compare-fill-left {
      height: 100%;
      background: #22b7ff;
      border-radius: 6px;
      transition: width 0.05s linear;
    }
    .compare-fill-right {
      height: 100%;
      background: #94d82d;
      border-radius: 6px;
      transition: width 0.05s linear;
    }

    /* Presets */
    .presets {
      display: flex;
      gap: 8px;
      width: 100%;
    }
    .btn {
      flex: 1;
      border: 1px solid #d1d5db;
      background: #ffffff;
      color: #1e2945;
      font-size: 13px;
      font-weight: 600;
      padding: 8px 4px;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: background 0.15s, border-color 0.15s;
    }
    .btn:active {
      background: #f1f5f9;
    }
    .btn.active-preset {
      background: #0077cc;
      border-color: #0077cc;
      color: #ffffff;
    }
  </style>
</head>
<body>

<div class="wrapper">
  
  <div id="statusBadge" class="status-badge equal">
    Equal = 1/2 ✓
  </div>

  
  <div class="line-container">
    
    <div class="segments-track">
      <div id="segLeft" class="seg-left" style="width: 50%;"></div>
      <div id="segRight" class="seg-right" style="width: 50%;"></div>
    </div>

    
    <div class="axis-area" id="axisArea">
      <div class="axis-line"></div>
      <div class="tick tick-0"></div>
      <div class="tick tick-1"></div>
      <div class="tick-label label-0">0</div>
      <div class="tick-label label-1">1</div>

      
      <div class="handle" id="handle" style="left: 50%;">
        <div class="handle-label" id="markerLabel">1/2</div>
        <div class="handle-pin"></div>
        <div class="handle-stem"></div>
      </div>
    </div>
  </div>

  
  <div class="compare-box">
    <div class="compare-row">
      <span style="color:#0284c7; width: 42px;">Left</span>
      <div class="compare-bar-wrap">
        <div id="compLeft" class="compare-fill-left" style="width: 50%;"></div>
      </div>
    </div>
    <div class="compare-row">
      <span style="color:#65a30d; width: 42px;">Right</span>
      <div class="compare-bar-wrap">
        <div id="compRight" class="compare-fill-right" style="width: 50%;"></div>
      </div>
    </div>
  </div>

  
  <div class="presets">
    <button class="btn" id="btnLeft">Short / Long</button>
    <button class="btn active-preset" id="btnMid">Equal (1/2)</button>
    <button class="btn" id="btnRight">Long / Short</button>
  </div>
</div>

<script>
  const axisArea = document.getElementById('axisArea');
  const handle = document.getElementById('handle');
  const segLeft = document.getElementById('segLeft');
  const segRight = document.getElementById('segRight');
  const compLeft = document.getElementById('compLeft');
  const compRight = document.getElementById('compRight');
  const statusBadge = document.getElementById('statusBadge');
  const markerLabel = document.getElementById('markerLabel');
  const btnLeft = document.getElementById('btnLeft');
  const btnMid = document.getElementById('btnMid');
  const btnRight = document.getElementById('btnRight');

  let currentPercent = 50;
  let isDragging = false;

  function updateVisuals(pct) {
    currentPercent = Math.max(5, Math.min(95, pct));

    handle.style.left = currentPercent + '%';
    segLeft.style.width = currentPercent + '%';
    segRight.style.width = (100 - currentPercent) + '%';
    compLeft.style.width = currentPercent + '%';
    compRight.style.width = (100 - currentPercent) + '%';

    const isEqual = Math.abs(currentPercent - 50) <= 2;

    btnLeft.classList.toggle('active-preset', Math.abs(currentPercent - 25) <= 2);
    btnMid.classList.toggle('active-preset', isEqual);
    btnRight.classList.toggle('active-preset', Math.abs(currentPercent - 75) <= 2);

    if (isEqual) {
      statusBadge.className = 'status-badge equal';
      statusBadge.textContent = 'Equal = 1/2 ✓';
      markerLabel.textContent = '1/2';
      markerLabel.style.color = '#0077cc';
    } else {
      statusBadge.className = 'status-badge unequal';
      statusBadge.textContent = 'Not Equal ✗';
      markerLabel.textContent = '✗';
      markerLabel.style.color = '#dc2626';
    }
  }

  function getPercentFromEvent(e) {
    const rect = axisArea.getBoundingClientRect();
    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
    const x = clientX - rect.left;
    return (x / rect.width) * 100;
  }

  // Pointer / Touch Events
  handle.addEventListener('pointerdown', (e) => {
    isDragging = true;
    handle.setPointerCapture(e.pointerId);
  });

  window.addEventListener('pointermove', (e) => {
    if (!isDragging) return;
    updateVisuals(getPercentFromEvent(e));
  });

  window.addEventListener('pointerup', () => {
    if (!isDragging) return;
    isDragging = false;
    // Snap close to 50% for great UX
    if (Math.abs(currentPercent - 50) < 4) {
      updateVisuals(50);
    }
  });

  axisArea.addEventListener('click', (e) => {
    updateVisuals(getPercentFromEvent(e));
  });

  btnLeft.addEventListener('click', () => updateVisuals(25));
  btnMid.addEventListener('click', () => updateVisuals(50));
  btnRight.addEventListener('click', () => updateVisuals(75));

  // Initial render
  updateVisuals(50);
</script>

</body>
</html>

Start at 0 and make one jump forward to land squarely on $\frac{1}{2}$.

Make one more jump of the exact same size, and you will land right on 1!

math

Locating One Half on a Number Line. Place 1/2 at the exact halfway point on a 0 to 1 number line.

Fractions and Sharing - First Level Maths (MNU 1-07a)

Fractions on a Number Line: Halves and Wholes

Identify and Graph Fractions on Number Lines: Halves

For Scottish Curriculum for Excellence Early/First Level (P1/P2 transition), use the Concrete-Pictorial-Abstract (CPA) approach. Begin with physical folding of paper strips and walking along a physical rope/tape number line on the floor. Transition to drawing hops/intervals on visual lines to bridge equal-sharing concepts to linear measurement before introducing formal fraction notation $\frac{1}{2}$.

Locating One Half on a Number Line

Finding the Middle

Watch Out for Unequal Parts