Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Imagine you have a big toy box with robots, teddy bears, and toy cars. How can we see which toy you have the most of in just one quick look?

A **bar graph** uses colorful bars to show amounts. The taller a bar grows, the bigger the number it shows.

Along the side, you see numbers called the **scale**. To find how many toys there are, look straight across from the top of the bar to the number line.

<!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>Reading a Bar Chart Scale</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e2945;
    background: transparent;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    user-select: none;
    -webkit-user-select: none;
  }
  .controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 8px;
    width: 100%;
    max-width: 480px;
  }
  .tab-btn {
    appearance: none;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #4b5563;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }
  .tab-btn.active {
    background: #22b7ff;
    color: #ffffff;
    border-color: #22b7ff;
    box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
  }
  .chart-container {
    width: 100%;
    max-width: 480px;
    height: 270px;
    position: relative;
  }
  svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .grid-line {
    stroke: #e5e7eb;
    stroke-width: 1;
    stroke-dasharray: 4 4;
  }
  .axis-line {
    stroke: #9ca3af;
    stroke-width: 2;
  }
  .scale-label {
    font-size: 13px;
    font-weight: 600;
    fill: #6b7280;
    text-anchor: end;
    dominant-baseline: central;
    transition: fill 0.2s ease, font-weight 0.2s ease;
  }
  .scale-label.highlight {
    fill: #0284c7;
    font-weight: 800;
  }
  .bar {
    cursor: pointer;
    rx: 6;
    ry: 6;
    transition: opacity 0.25s ease;
  }
  .bar-active {
    filter: drop-shadow(0 4px 8px rgba(34, 183, 255, 0.3));
  }
  .bar-dim {
    opacity: 0.35;
  }
  .category-icon {
    font-size: 20px;
    text-anchor: middle;
    cursor: pointer;
  }
  .tracker-line {
    stroke: #0284c7;
    stroke-width: 2;
    stroke-dasharray: 5 4;
    transition: all 0.35s ease;
  }
  .tracker-dot {
    fill: #0284c7;
    stroke: #ffffff;
    stroke-width: 2;
    transition: all 0.35s ease;
  }
  .value-badge {
    fill: #0284c7;
    rx: 6;
    transition: all 0.35s ease;
  }
  .value-text {
    fill: #ffffff;
    font-size: 13px;
    font-weight: bold;
    text-anchor: middle;
    dominant-baseline: central;
    transition: all 0.35s ease;
  }
  .axis-title {
    font-size: 12px;
    font-weight: 700;
    fill: #9ca3af;
    letter-spacing: 0.5px;
    text-anchor: middle;
  }
</style>
</head>
<body>

<div class="controls" id="btnGroup">
  <button class="tab-btn active" data-index="0">🤖 8</button>
  <button class="tab-btn" data-index="1">🚗 5</button>
  <button class="tab-btn" data-index="2">🧱 10</button>
  <button class="tab-btn" data-index="3">🧸 3</button>
</div>

<div class="chart-container">
  <svg viewBox="0 0 400 240" id="chartSvg">
    
    <text class="axis-title" x="22" y="16">SCALE</text>

    
    
    <line class="grid-line" x1="45" y1="30" x2="380" y2="30" />
    <text class="scale-label" id="lbl-10" x="38" y="30">10</text>

    <line class="grid-line" x1="45" y1="62" x2="380" y2="62" />
    <text class="scale-label" id="lbl-8" x="38" y="62">8</text>

    <line class="grid-line" x1="45" y1="94" x2="380" y2="94" />
    <text class="scale-label" id="lbl-6" x="38" y="62">6</text>

    <line class="grid-line" x1="45" y1="126" x2="380" y2="126" />
    <text class="scale-label" id="lbl-4" x="38" y="126">4</text>

    <line class="grid-line" x1="45" y1="158" x2="380" y2="158" />
    <text class="scale-label" id="lbl-2" x="38" y="158">2</text>

    <line class="grid-line" x1="45" y1="190" x2="380" y2="190" />
    <text class="scale-label" id="lbl-0" x="38" y="190">0</text>

    
    <line class="axis-line" x1="45" y1="24" x2="45" y2="190" />
    <line class="axis-line" x1="45" y1="190" x2="385" y2="190" />

    
    <line class="tracker-line" id="guideLine" x1="45" y1="62" x2="105" y2="62" />
    <circle class="tracker-dot" id="guideDotBar" cx="105" cy="62" r="5" />
    <circle class="tracker-dot" id="guideDotScale" cx="45" cy="62" r="5" />
    
    
    <rect class="value-badge" id="valBadge" x="14" y="51" width="26" height="22" />
    <text class="value-text" id="valText" x="27" y="62">8</text>

    
    
    <g class="bar-group" data-index="0">
      <rect class="bar bar-active" id="bar-0" x="80" y="62" width="50" height="128" fill="#38bdf8" />
      <text class="category-icon" x="105" y="218">🤖</text>
    </g>

    
    <g class="bar-group" data-index="1">
      <rect class="bar bar-dim" id="bar-1" x="160" y="110" width="50" height="80" fill="#fb7185" />
      <text class="category-icon" x="185" y="218">🚗</text>
    </g>

    
    <g class="bar-group" data-index="2">
      <rect class="bar bar-dim" id="bar-2" x="240" y="30" width="50" height="160" fill="#fbbf24" />
      <text class="category-icon" x="265" y="218">🧱</text>
    </g>

    
    <g class="bar-group" data-index="3">
      <rect class="bar bar-dim" id="bar-3" x="320" y="142" width="50" height="48" fill="#a78bfa" />
      <text class="category-icon" x="345" y="218">🧸</text>
    </g>
  </svg>
</div>

<script>
  const data = [
    { name: 'Robots', val: 8, y: 62, cx: 105 },
    { name: 'Cars', val: 5, y: 110, cx: 185 },
    { name: 'Blocks', val: 10, y: 30, cx: 265 },
    { name: 'Bears', val: 3, y: 142, cx: 345 }
  ];

  let currentIndex = 0;
  const buttons = document.querySelectorAll('.tab-btn');
  const guideLine = document.getElementById('guideLine');
  const guideDotBar = document.getElementById('guideDotBar');
  const guideDotScale = document.getElementById('guideDotScale');
  const valBadge = document.getElementById('valBadge');
  const valText = document.getElementById('valText');

  function setBar(index) {
    currentIndex = index;
    const item = data[index];

    // Update buttons
    buttons.forEach((btn, i) => {
      btn.classList.toggle('active', i === index);
    });

    // Update bars style
    data.forEach((_, i) => {
      const bar = document.getElementById(`bar-${i}`);
      if (i === index) {
        bar.setAttribute('class', 'bar bar-active');
      } else {
        bar.setAttribute('class', 'bar bar-dim');
      }
    });

    // Update scale guide elements
    guideLine.setAttribute('y1', item.y);
    guideLine.setAttribute('y2', item.y);
    guideLine.setAttribute('x2', item.cx);

    guideDotBar.setAttribute('cx', item.cx);
    guideDotBar.setAttribute('cy', item.y);

    guideDotScale.setAttribute('cy', item.y);

    valBadge.setAttribute('y', item.y - 11);
    valText.setAttribute('y', item.y);
    valText.textContent = item.val;
  }

  // Button clicks
  buttons.forEach(btn => {
    btn.addEventListener('click', () => {
      setBar(parseInt(btn.getAttribute('data-index'), 10));
    });
  });

  // Chart bar clicks
  document.querySelectorAll('.bar-group').forEach(group => {
    group.addEventListener('click', () => {
      setBar(parseInt(group.getAttribute('data-index'), 10));
    });
  });
</script>
</body>
</html>

What happens when you want to know how many more robots you have than toy cars?

To find the **difference**, we compare the two bars and subtract the smaller number from the bigger number.

There are $8$ robots and $4$ cars, so we take away $4$ from $8$: $$8 - 4 = 4$$ You have $4$ more robots than cars!

<!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 Bar Charts</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: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    .chart-container {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

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

    .step-btn {
      flex: 1;
      max-width: 120px;
      padding: 6px 4px;
      font-size: 13px;
      font-weight: 600;
      text-align: center;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      color: #64748b;
      cursor: pointer;
      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);
    }

    /* Chart SVG area */
    .svg-wrap {
      width: 100%;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      padding: 8px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    svg {
      display: block;
      width: 100%;
      height: auto;
    }

    /* SVG elements styling */
    .grid-line {
      stroke: #e2e8f0;
      stroke-width: 1;
      stroke-dasharray: 2, 2;
    }

    .axis-line {
      stroke: #cbd5e1;
      stroke-width: 1.5;
    }

    .axis-label {
      font-size: 11px;
      fill: #64748b;
      font-weight: 500;
      text-anchor: end;
      dominant-baseline: middle;
    }

    .bar-emoji {
      font-size: 18px;
      text-anchor: middle;
    }

    .bar-val {
      font-size: 13px;
      font-weight: 700;
      fill: #1e2945;
      text-anchor: middle;
      transition: opacity 0.3s ease;
    }

    /* Bars */
    .bar-bg {
      fill: #e2e8f0;
      rx: 6;
    }

    .bar-robot-base {
      fill: #93c5fd;
      transition: fill 0.3s ease;
      rx: 6;
    }

    .bar-robot-diff {
      fill: #22b7ff;
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .bar-car {
      fill: #93c5fd;
      transition: fill 0.3s ease;
      rx: 6;
    }

    .bar-bear {
      fill: #cbd5e1;
      opacity: 0.5;
      rx: 6;
    }

    /* Match level line */
    .match-line {
      stroke: #f59e0b;
      stroke-width: 2;
      stroke-dasharray: 4, 3;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .guide-line {
      stroke: #3b82f6;
      stroke-width: 1.5;
      stroke-dasharray: 3, 3;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    /* Difference Bracket & Badge */
    .diff-callout {
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    /* Equation / Message bar */
    .eq-bar {
      width: 100%;
      min-height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
    }

    .highlight-diff {
      color: #0284c7;
      background: #e0f2fe;
      padding: 2px 6px;
      border-radius: 4px;
      margin-left: 4px;
    }
  </style>
</head>
<body>

  <div class="chart-container">
    
    <div class="controls">
      <button class="step-btn active" onclick="setStep(0)">1. Read</button>
      <button class="step-btn" onclick="setStep(1)">2. Match</button>
      <button class="step-btn" onclick="setStep(2)">3. Difference</button>
    </div>

    
    <div class="svg-wrap">
      <svg viewBox="0 0 340 220">
        
        
        <g>
          <line x1="38" y1="20" x2="320" y2="20" class="grid-line" />
          <text x="30" y="20" class="axis-label">10</text>

          <line x1="38" y1="52" x2="320" y2="52" class="grid-line" />
          <text x="30" y="52" class="axis-label">8</text>

          <line x1="38" y1="84" x2="320" y2="84" class="grid-line" />
          <text x="30" y="84" class="axis-label">6</text>

          <line x1="38" y1="116" x2="320" y2="116" class="grid-line" />
          <text x="30" y="116" class="axis-label">4</text>

          <line x1="38" y1="148" x2="320" y2="148" class="grid-line" />
          <text x="30" y="148" class="axis-label">2</text>

          <line x1="38" y1="180" x2="320" y2="180" class="axis-line" />
          <text x="30" y="180" class="axis-label">0</text>

          <line x1="38" y1="16" x2="38" y2="180" class="axis-line" />
        </g>

        
        <g id="guideLines">
          
          <line x1="38" y1="52" x2="108" y2="52" class="guide-line" id="guide8" />
          
          <line x1="38" y1="116" x2="188" y2="116" class="guide-line" id="guide4" />
        </g>

        
        <line x1="60" y1="116" x2="225" y2="116" class="match-line" id="matchLine" />

        
        
        <g>
          
          <rect x="60" y="52" width="48" height="128" class="bar-robot-base" id="robotBase" />
          
          <rect x="60" y="52" width="48" height="64" rx="6" class="bar-robot-diff" id="robotDiff" />
          <text x="84" y="44" class="bar-val" id="valRobot">8</text>
          <text x="84" y="202" class="bar-emoji">🤖</text>
        </g>

        
        <g>
          <rect x="140" y="116" width="48" height="64" class="bar-car" id="barCar" />
          <text x="164" y="108" class="bar-val">4</text>
          <text x="164" y="202" class="bar-emoji">🚗</text>
        </g>

        
        <g>
          <rect x="220" y="84" width="48" height="96" class="bar-bear" />
          <text x="244" y="76" class="bar-val" style="fill:#94a3b8;">6</text>
          <text x="244" y="202" class="bar-emoji" style="opacity:0.6;">🧸</text>
        </g>

        
        <g class="diff-callout" id="diffCallout">
          
          <path d="M 52,54 L 46,54 L 46,84 L 40,84 L 46,84 L 46,114 L 52,114" fill="none" stroke="#0284c7" stroke-width="2" stroke-linecap="round" />
          <rect x="3" y="73" width="34" height="22" rx="4" fill="#0284c7" />
          <text x="20" y="88" font-size="12" font-weight="700" fill="#ffffff" text-anchor="middle">+4</text>
        </g>
      </svg>
    </div>

    
    <div class="eq-bar" id="eqBar">
      🤖 8 &nbsp;vs&nbsp; 🚗 4
    </div>
  </div>

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

    const stepBtns = document.querySelectorAll('.step-btn');
    const guide8 = document.getElementById('guide8');
    const guide4 = document.getElementById('guide4');
    const matchLine = document.getElementById('matchLine');
    const robotDiff = document.getElementById('robotDiff');
    const diffCallout = document.getElementById('diffCallout');
    const eqBar = document.getElementById('eqBar');

    const stepData = [
      {
        eq: '🤖 8 &nbsp;and&nbsp; 🚗 4',
        apply: () => {
          guide8.style.opacity = '1';
          guide4.style.opacity = '1';
          matchLine.style.opacity = '0';
          robotDiff.style.opacity = '0';
          diffCallout.style.opacity = '0';
        }
      },
      {
        eq: 'Same height at 4',
        apply: () => {
          guide8.style.opacity = '0';
          guide4.style.opacity = '0';
          matchLine.style.opacity = '1';
          robotDiff.style.opacity = '0';
          diffCallout.style.opacity = '0';
        }
      },
      {
        eq: '8 − 4 = <span class="highlight-diff">4 more</span>',
        apply: () => {
          guide8.style.opacity = '0';
          guide4.style.opacity = '0';
          matchLine.style.opacity = '1';
          robotDiff.style.opacity = '1';
          diffCallout.style.opacity = '1';
        }
      }
    ];

    function setStep(index) {
      currentStep = index;
      stepBtns.forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });
      eqBar.innerHTML = stepData[index].eq;
      stepData[index].apply();
      resetTimer();
    }

    function resetTimer() {
      if (autoTimer) clearInterval(autoTimer);
      autoTimer = setInterval(() => {
        setStep((currentStep + 1) % 3);
      }, 3600);
    }

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

What if a bar stops right in the middle between two numbers on the side?

When a bar lands halfway between two numbers on the scale, it means the number is right in the middle. Halfway between $4$ and $6$ is the number $5$.

<!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>Reading Halfway Values</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, sans-serif;
    background: #f8f9fa;
    color: #1e2945;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    min-height: 100vh;
  }
  .app-container {
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .selector-row {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .btn-choice {
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .btn-choice.active {
    border-color: #22b7ff;
    background: #e0f4ff;
    color: #0284c7;
  }
  .chart-box {
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 16px 12px 12px 8px;
  }
  svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
  }
  .grid-line {
    stroke: #e5e7eb;
    stroke-width: 1;
  }
  .grid-line.mid {
    stroke: #e2e8f0;
    stroke-dasharray: 4,4;
    stroke-width: 1;
  }
  .axis-label {
    font-size: 13px;
    fill: #6b7280;
    font-weight: 600;
    text-anchor: end;
    dominant-baseline: central;
  }
  .bar-group {
    cursor: pointer;
  }
  .bar-rect {
    transition: transform 0.25s ease, filter 0.25s ease, opacity 0.25s ease;
    transform-origin: bottom;
  }
  .bar-group:hover .bar-rect {
    filter: brightness(1.05);
  }
  .bar-group.active .bar-rect {
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
  }
  .bar-label {
    font-size: 18px;
    text-anchor: middle;
  }
  .pointer-line {
    stroke: #0284c7;
    stroke-width: 2;
    stroke-dasharray: 5,4;
    transition: all 0.3s ease;
  }
  .highlight-bracket {
    fill: rgba(34, 183, 255, 0.15);
    stroke: #22b7ff;
    stroke-width: 1.5;
    transition: all 0.3s ease;
  }
  .value-badge {
    font-size: 14px;
    font-weight: 700;
    fill: #0284c7;
    text-anchor: start;
    dominant-baseline: central;
  }
</style>
</head>
<body>

<div class="app-container">
  <div class="selector-row" id="btnGroup">
    <button class="btn-choice" data-idx="0">🍎 4</button>
    <button class="btn-choice active" data-idx="1">🍌 5 (Halfway)</button>
    <button class="btn-choice" data-idx="2">🍊 7 (Halfway)</button>
    <button class="btn-choice" data-idx="3">🍇 8</button>
  </div>

  <div class="chart-box">
    <svg viewBox="0 0 400 240" id="chartSvg">
      
      
      
      
      <rect id="highlightBand" x="35" y="92" width="355" height="36" rx="4" class="highlight-bracket" opacity="1"></rect>

      
      <line x1="45" y1="200" x2="390" y2="200" class="grid-line" />
      <text x="35" y="200" class="axis-label">0</text>

      <line x1="45" y1="164" x2="390" y2="164" class="grid-line" />
      <text x="35" y="164" class="axis-label">2</text>

      <line x1="45" y1="128" x2="390" y2="128" class="grid-line" />
      <text x="35" y="128" class="axis-label">4</text>

      <line x1="45" y1="92" x2="390" y2="92" class="grid-line" />
      <text x="35" y="92" class="axis-label">6</text>

      <line x1="45" y1="56" x2="390" y2="56" class="grid-line" />
      <text x="35" y="56" class="axis-label">8</text>

      <line x1="45" y1="20" x2="390" y2="20" class="grid-line" />
      <text x="35" y="20" class="axis-label">10</text>

      
      <line x1="41" y1="182" x2="45" y2="182" stroke="#9ca3af" stroke-width="1.5" />
      <line x1="41" y1="146" x2="45" y2="146" stroke="#9ca3af" stroke-width="1.5" />
      <line x1="41" y1="110" x2="45" y2="110" stroke="#0284c7" stroke-width="2.5" id="tickMid" />
      <line x1="41" y1="74" x2="45" y2="74" stroke="#9ca3af" stroke-width="1.5" />
      <line x1="41" y1="38" x2="45" y2="38" stroke="#9ca3af" stroke-width="1.5" />

      
      <line id="projLine" x1="45" y1="110" x2="162" y2="110" class="pointer-line" />

      
      <g id="indicatorGroup" transform="translate(0, 110)">
        <rect x="2" y="-12" width="40" height="24" rx="6" fill="#0284c7" />
        <text x="22" y="0" fill="#ffffff" font-size="13" font-weight="700" text-anchor="middle" dominant-baseline="central" id="axisBadgeText">5</text>
      </g>

      
      
      <g class="bar-group" data-idx="0" transform="translate(75,0)">
        <rect class="bar-rect" x="0" y="128" width="44" height="72" rx="6" fill="#ff5c5c" />
        <text x="22" y="222" class="bar-label">🍎</text>
      </g>

      
      <g class="bar-group active" data-idx="1" transform="translate(145,0)">
        <rect class="bar-rect" x="0" y="110" width="44" height="90" rx="6" fill="#fbbf24" />
        <text x="22" y="222" class="bar-label">🍌</text>
      </g>

      
      <g class="bar-group" data-idx="2" transform="translate(215,0)">
        <rect class="bar-rect" x="0" y="74" width="44" height="126" rx="6" fill="#fb923c" />
        <text x="22" y="222" class="bar-label">🍊</text>
      </g>

      
      <g class="bar-group" data-idx="3" transform="translate(285,0)">
        <rect class="bar-rect" x="0" y="56" width="44" height="144" rx="6" fill="#a855f7" />
        <text x="22" y="222" class="bar-label">🍇</text>
      </g>
    </svg>
  </div>
</div>

<script>
  const data = [
    { name: 'Apples', val: 4, y: 128, barX: 75 + 22, isHalf: false },
    { name: 'Bananas', val: 5, y: 110, barX: 145 + 22, isHalf: true, lowY: 128, highY: 92 },
    { name: 'Oranges', val: 7, y: 74, barX: 215 + 22, isHalf: true, lowY: 92, highY: 56 },
    { name: 'Grapes', val: 8, y: 56, barX: 285 + 22, isHalf: false }
  ];

  const buttons = document.querySelectorAll('.btn-choice');
  const barGroups = document.querySelectorAll('.bar-group');
  const projLine = document.getElementById('projLine');
  const indicator = document.getElementById('indicatorGroup');
  const badgeText = document.getElementById('axisBadgeText');
  const highlightBand = document.getElementById('highlightBand');
  const tickMid = document.getElementById('tickMid');

  function selectIndex(idx) {
    buttons.forEach((b, i) => b.classList.toggle('active', i === idx));
    barGroups.forEach((g, i) => {
      g.classList.toggle('active', i === idx);
      const rect = g.querySelector('.bar-rect');
      rect.style.opacity = (i === idx) ? '1' : '0.45';
    });

    const item = data[idx];
    projLine.setAttribute('y1', item.y);
    projLine.setAttribute('y2', item.y);
    projLine.setAttribute('x2', item.barX);

    indicator.setAttribute('transform', `translate(0, ${item.y})`);
    badgeText.textContent = item.val;

    if (item.isHalf) {
      highlightBand.setAttribute('y', item.highY);
      highlightBand.setAttribute('height', item.lowY - item.highY);
      highlightBand.setAttribute('opacity', '1');
      tickMid.setAttribute('y1', item.y);
      tickMid.setAttribute('y2', item.y);
      tickMid.style.display = 'block';
    } else {
      highlightBand.setAttribute('opacity', '0');
      tickMid.style.display = 'none';
    }
  }

  buttons.forEach((btn, i) => {
    btn.addEventListener('click', () => selectIndex(i));
  });

  barGroups.forEach((group, i) => {
    group.addEventListener('click', () => selectIndex(i));
  });

  // Init with halfway example (Bananas = 5)
  selectIndex(1);
</script>

</body>
</html>

A great trick is to always check what the side numbers are counting by—like ones, twos, or fives—before you start counting!

math

Reading and Interpreting Complex Bar and Column Charts. Extract exact values, compare categories, and calculate differences between bars from scaled graphs.

Interpreting Bar Charts and Scaled Graphs (CfE Second Level / KS2)

Reading and Interpreting Scaled Bar Graphs and Solving Multi-Step Problems

Interpret Bar Graphs: Exact Values, Comparisons, and Multi-Category Word Problems

Pedagogical Implementation Strategy: While this standard (MNU 2-20a) represents Second Level analytical rigor in the Scottish Curriculum for Excellence, early progression must bridge concrete multi-link cube towers and 1:1 representations to multi-unit interval scales ($2\text{s}$, $5\text{s}$, $10\text{s}$). Master teachers use physical alignment tools (clear plastic rulers, tracking pointers) to teach learners how to trace bar heights to the axis scale accurately. When teaching graph critique, contrasting a standard zero-baseline chart with a truncated axis chart empowers learners to critically evaluate data representation in real-world media.

Reading and Interpreting Complex Bar and Column Charts

Reading a Bar Graph

Finding the Difference

Reading In-Between Numbers