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

Look at these two towers: does Leo have way more toy cars than Maya?

<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e2945;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }

  .controls {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 360px;
    margin-bottom: 8px;
  }

  .btn {
    flex: 1;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 20px;
    border: 2px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
  }

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

  .chart-area {
    position: relative;
    width: 100%;
    max-width: 380px;
    height: 240px;
    background: #ffffff;
    border-radius: 12px;
    padding: 16px 16px 28px 44px;
    display: flex;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  .y-axis {
    position: absolute;
    left: 12px;
    top: 16px;
    bottom: 28px;
    width: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
  }

  .y-label {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .grid-lines {
    position: absolute;
    left: 44px;
    right: 16px;
    top: 16px;
    bottom: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
  }

  .grid-line {
    width: 100%;
    height: 1px;
    background: #edf2f7;
  }

  .axis-baseline {
    background: #cbd5e1;
    height: 2px;
  }

  .bars-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    z-index: 1;
  }

  .bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 42%;
    height: 100%;
    justify-content: flex-end;
  }

  .bar {
    width: 100%;
    border-radius: 8px 8px 0 0;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 6px;
    color: #ffffff;
    font-weight: 800;
    font-size: 14px;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3);
  }

  .bar-maya {
    background: linear-gradient(180deg, #ff9f43 0%, #ee5253 100%);
  }

  .bar-leo {
    background: linear-gradient(180deg, #48dbfb 0%, #22b7ff 100%);
  }

  .x-label {
    position: absolute;
    bottom: -24px;
    font-size: 13px;
    font-weight: 700;
    color: #1e2945;
  }

  .comparison-badge {
    margin-top: 6px;
    padding: 6px 14px;
    background: #f1f5f9;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .highlight {
    color: #0284c7;
    font-weight: 800;
  }

  .highlight-warn {
    color: #e11d48;
    font-weight: 800;
  }
</style>
</head>
<body>

  <div class="controls">
    <button class="btn active" id="btnTruncated" onclick="setMode(true)">Start at 8</button>
    <button class="btn" id="btnFull" onclick="setMode(false)">Start at 0</button>
  </div>

  <div class="chart-area">
    <div class="y-axis">
      <span class="y-label">10</span>
      <span class="y-label" id="yMid">9</span>
      <span class="y-label" id="yMin">8</span>
    </div>

    <div class="grid-lines">
      <div class="grid-line"></div>
      <div class="grid-line"></div>
      <div class="grid-line axis-baseline"></div>
    </div>

    <div class="bars-container">
      <div class="bar-group">
        <div class="bar bar-maya" id="barMaya" style="height: 50%;">9 🚗</div>
        <span class="x-label">Maya</span>
      </div>

      <div class="bar-group">
        <div class="bar bar-leo" id="barLeo" style="height: 100%;">10 🚗</div>
        <span class="x-label">Leo</span>
      </div>
    </div>
  </div>

  <div class="comparison-badge" id="summary">
    <span>Visual:</span>
    <span class="highlight-warn" id="summaryText">Leo looks 2× taller!</span>
  </div>

  <script>
    function setMode(isTruncated) {
      const btnT = document.getElementById('btnTruncated');
      const btnF = document.getElementById('btnFull');
      const barMaya = document.getElementById('barMaya');
      const barLeo = document.getElementById('barLeo');
      const yMid = document.getElementById('yMid');
      const yMin = document.getElementById('yMin');
      const summaryText = document.getElementById('summaryText');

      if (isTruncated) {
        btnT.classList.add('active');
        btnF.classList.remove('active');
        barMaya.style.height = '50%';
        barLeo.style.height = '100%';
        yMid.textContent = '9';
        yMin.textContent = '8';
        summaryText.className = 'highlight-warn';
        summaryText.textContent = 'Leo looks 2× taller!';
      } else {
        btnF.classList.add('active');
        btnT.classList.remove('active');
        barMaya.style.height = '90%';
        barLeo.style.height = '100%';
        yMid.textContent = '5';
        yMin.textContent = '0';
        summaryText.className = 'highlight';
        summaryText.textContent = 'Nearly equal (9 vs 10)';
      }
    }
  </script>
</body>
</html>

Leo's bar looks twice as big! But when we count, Maya has $9$ cars and Leo has $10$ cars.

Leo only has one more car than Maya. Why did his bar look so gigantic?

The tall side ruler on a graph is called the **y-axis**, and it shows the numbers you are counting.

A fair graph starts counting from **zero** at the very bottom so you can see the whole tower.

<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, 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;
  }

  .controls {
    display: flex;
    gap: 8px;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 10px;
    width: 100%;
    max-width: 380px;
  }

  .btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
  }

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

  .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    transition: all 0.25s ease;
  }
  .status-fair {
    background: #e0f2fe;
    color: #0369a1;
  }
  .status-truncated {
    background: #fef3c7;
    color: #b45309;
  }

  .chart-container {
    width: 100%;
    max-width: 380px;
    height: 250px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    padding: 18px 16px 16px 12px;
    display: flex;
    position: relative;
  }

  .y-axis {
    width: 32px;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding-right: 8px;
    border-right: 2px solid #cbd5e1;
  }

  .tick {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    line-height: 1;
    position: absolute;
    right: 8px;
    transform: translateY(50%);
    transition: all 0.3s ease;
  }

  .tick::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    width: 4px;
    height: 2px;
    background: #cbd5e1;
  }

  .break-symbol {
    position: absolute;
    left: 28px;
    bottom: 2px;
    color: #d97706;
    font-weight: bold;
    font-size: 14px;
    opacity: 0;
    transform: translateY(4px);
    transition: all 0.25s ease;
    z-index: 5;
  }
  .break-symbol.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .plot-area {
    flex: 1;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: 0 16px;
    border-bottom: 2px solid #cbd5e1;
  }

  .grid-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: #f1f5f9;
    pointer-events: none;
  }

  .bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    width: 42%;
    position: relative;
    z-index: 2;
  }

  .bar {
    width: 100%;
    border-radius: 6px 6px 0 0;
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    justify-content: center;
  }

  .bar-a {
    background: #38bdf8;
  }

  .bar-b {
    background: #22b7ff;
  }

  .bar-val {
    position: absolute;
    top: -22px;
    font-size: 13px;
    font-weight: 700;
    color: #1e2945;
  }

  .bar-label {
    position: absolute;
    bottom: -22px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
  }
</style>
</head>
<body>

  <div class="controls">
    <button id="btnFair" class="btn active" onclick="setScale('fair')">Starts at 0</button>
    <button id="btnTrunc" class="btn" onclick="setScale('trunc')">Starts at 8</button>
  </div>

  <div id="badge" class="status-badge status-fair">
    <span>✓ Fair Scale</span>
  </div>

  <div class="chart-container">
    <div class="y-axis">
      <span class="tick" style="bottom: 100%;">10</span>
      <span id="t3" class="tick" style="bottom: 66.6%;">8</span>
      <span id="t2" class="tick" style="bottom: 33.3%;">4</span>
      <span id="t1" class="tick" style="bottom: 0%;">0</span>
      <span id="breakMark" class="break-symbol">⚡</span>
    </div>

    <div class="plot-area">
      <div class="grid-line" style="bottom: 100%;"></div>
      <div class="grid-line" style="bottom: 66.6%;"></div>
      <div class="grid-line" style="bottom: 33.3%;"></div>

      <div class="bar-col">
        <div id="barA" class="bar bar-a" style="height: 90%;">
          <span class="bar-val">9</span>
        </div>
        <span class="bar-label">Item A</span>
      </div>

      <div class="bar-col">
        <div id="barB" class="bar bar-b" style="height: 100%;">
          <span class="bar-val">10</span>
        </div>
        <span class="bar-label">Item B</span>
      </div>
    </div>
  </div>

<script>
  function setScale(type) {
    const isFair = type === 'fair';
    
    document.getElementById('btnFair').classList.toggle('active', isFair);
    document.getElementById('btnTrunc').classList.toggle('active', !isFair);
    
    const badge = document.getElementById('badge');
    badge.className = 'status-badge ' + (isFair ? 'status-fair' : 'status-truncated');
    badge.innerHTML = isFair ? '<span>✓ Fair Scale</span>' : '<span>⚠ Truncated Axis</span>';

    // Ticks: Fair (0, 4, 8, 10) vs Truncated (8, 9, 9.5, 10)
    document.getElementById('t1').textContent = isFair ? '0' : '8';
    document.getElementById('t2').textContent = isFair ? '4' : '9';
    document.getElementById('t3').textContent = isFair ? '8' : '9.5';
    document.getElementById('t2').style.bottom = isFair ? '33.3%' : '50%';
    document.getElementById('t3').style.bottom = isFair ? '66.6%' : '75%';

    document.getElementById('breakMark').classList.toggle('visible', !isFair);

    // Fair: 9/10 = 90%, 10/10 = 100%
    // Truncated at 8: (9-8)/(10-8) = 50%, (10-8)/(10-8) = 100%
    document.getElementById('barA').style.height = isFair ? '90%' : '50%';
    document.getElementById('barB').style.height = '100%';
  }
</script>
</body>
</html>

When the graph starts at **zero**, $9$ and $10$ look almost identical, just like in real life.

What happens to the math when the bottom gets chopped off?

When the ruler starts at $8$, the graph hides the first $8$ cars from view.

Maya only gets to show $1$ block ($9 - 8 = 1$) and Leo shows $2$ blocks ($10 - 8 = 2$).

<!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: -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;
    width: 100%;
    max-width: 420px;
    justify-content: center;
  }

  .btn {
    flex: 1;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
  }
  .btn.active {
    border-color: #22b7ff;
    background: #e0f2fe;
    color: #0369a1;
  }

  .graph-wrapper {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 240px;
    margin: 12px 0 6px;
    display: flex;
  }

  .y-axis {
    position: relative;
    width: 44px;
    height: 200px;
    border-right: 2px solid #cbd5e1;
  }

  .tick {
    position: absolute;
    right: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    transform: translateY(50%);
    transition: bottom 0.3s ease, opacity 0.3s ease;
  }
  .tick::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    width: 6px;
    height: 2px;
    background: #cbd5e1;
  }

  .chart-area {
    position: relative;
    flex: 1;
    height: 200px;
    border-bottom: 2px solid #cbd5e1;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: 0 20px;
  }

  .grid-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: #f1f5f9;
    pointer-events: none;
  }

  .bar-col {
    position: relative;
    width: 38%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  }

  .bar {
    width: 100%;
    border-radius: 6px 6px 0 0;
    transition: height 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 6px;
  }

  .bar-val {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
  }

  .bar-maya {
    background: #8b5cf6;
  }
  .bar-leo {
    background: #22b7ff;
  }

  .bar-label {
    position: absolute;
    bottom: -32px;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    text-align: center;
    line-height: 1.2;
  }

  .status-badge {
    margin-top: 10px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    transition: all 0.3s ease;
  }
  .status-badge.accurate {
    background: #ecfdf5;
    color: #059669;
    box-shadow: 0 0 0 1px #a7f3d0;
  }
  .status-badge.misleading {
    background: #fff1f2;
    color: #e11d48;
    box-shadow: 0 0 0 1px #fecdd3;
  }

  .break-symbol {
    position: absolute;
    bottom: -10px;
    right: -6px;
    font-size: 14px;
    color: #e11d48;
    font-weight: 900;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .break-symbol.visible {
    opacity: 1;
  }
</style>
</head>
<body>

  <div class="controls">
    <button class="btn active" id="btn0" onclick="setBase(0)">Start at 0 (True)</button>
    <button class="btn" id="btn8" onclick="setBase(8)">Start at 8 (Truncated)</button>
  </div>

  <div class="graph-wrapper">
    <div class="y-axis" id="yAxis">
      <div class="break-symbol" id="breakMark">⚡</div>
    </div>
    <div class="chart-area" id="chartArea">
      <div class="bar-col">
        <div class="bar bar-maya" id="barMaya">
          <span class="bar-val">9</span>
        </div>
        <div class="bar-label">Maya<br><span style="font-size:12px;color:#8b5cf6">9</span></div>
      </div>
      <div class="bar-col">
        <div class="bar bar-leo" id="barLeo">
          <span class="bar-val">10</span>
        </div>
        <div class="bar-label">Leo<br><span style="font-size:12px;color:#0284c7">10</span></div>
      </div>
    </div>
  </div>

  <div class="status-badge accurate" id="badge">
    Accurate: Nearly Equal
  </div>

<script>
  let currentBase = 0;

  function renderAxis(base) {
    const yAxis = document.getElementById('yAxis');
    // Clear old ticks except breakMark
    const breakMark = document.getElementById('breakMark');
    yAxis.innerHTML = '';
    yAxis.appendChild(breakMark);

    const values = base === 0 ? [0, 2, 4, 6, 8, 10] : [8, 9, 10];
    values.forEach(v => {
      const tick = document.createElement('div');
      tick.className = 'tick';
      const pct = ((v - base) / (10 - base)) * 100;
      tick.style.bottom = pct + '%';
      tick.textContent = v;
      yAxis.appendChild(tick);
    });
  }

  function setBase(base) {
    currentBase = base;
    
    document.getElementById('btn0').classList.toggle('active', base === 0);
    document.getElementById('btn8').classList.toggle('active', base === 8);
    document.getElementById('breakMark').classList.toggle('visible', base > 0);

    const mayaPct = ((9 - base) / (10 - base)) * 100;
    const leoPct = ((10 - base) / (10 - base)) * 100;

    document.getElementById('barMaya').style.height = mayaPct + '%';
    document.getElementById('barLeo').style.height = leoPct + '%';

    renderAxis(base);

    const badge = document.getElementById('badge');
    if (base === 0) {
      badge.className = 'status-badge accurate';
      badge.textContent = 'Accurate: Nearly Equal';
    } else {
      badge.className = 'status-badge misleading';
      badge.textContent = 'Misleading: Leo looks 2× taller!';
    }
  }

  setBase(0);
</script>
</body>
</html>

How can you make sure a tricky graph never fools you?

Whenever you see a bar graph, look straight down at the bottom corner of the **y-axis**.

If the ruler does not start at **zero**, read the numbers with your brain instead of trusting your eyes!

Under curriculum standard **MNU 3-20a**, you can evaluate whether any graph is robust or misleading using three quick steps.

Under standard **MNU 3-20a**, you evaluate whether a graph is robust or misleading by checking three critical features.

Always check the baseline origin at zero and confirm that the axis has uniform scale intervals.

Then, compute the true mathematical comparison using **Relative Difference**:

$$\text{Relative Difference} = \frac{|y_2 - y_1|}{y_1} \times 100\%$$

For Maya ($9$) and Leo ($10$), the **Relative Difference** is $\frac{|10 - 9|}{9} \times 100\% \approx 11.1\%$—proving the visual gap was greatly exaggerated!

First, check the **baseline origin** at zero. Second, confirm that the axis ticks use **uniform scale intervals** with equal spacing.

Third, calculate the actual **Relative Difference** to see how much the values truly differ:

For Maya ($9$) and Leo ($10$), the relative difference is $\frac{|10 - 9|}{9} \times 100\% \approx 11.1\%$, confirming the true change is modest despite how the bars look!

math

Identifying Truncated Y-Axes and Exaggerated Differences. Detect how graphs with non-zero or broken baseline y-axes distort visual comparisons and exaggerate differences.

Misleading Data and Graphs - Third Level / National Maths

Misleading Line Graphs and Data Displays

Thinking Critically with Maths: Misleading Data

Curriculum for Excellence code MNU 3-20a addresses data robustness and misleading statistical presentations at Third Level (typically S1–S3, approx ages 11–14). When introducing students to this topic, emphasize collaborative discussion: have students examine media clippings, identify whether the baseline starts at zero, and reconstruct truncated graphs using spreadsheets or graph paper to see the true visual perspective.

Identifying Truncated Y-Axes and Exaggerated Differences

The Secret at the Bottom

Why the Trick Works