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 a computer with no screen, no mouse, and no wires — built entirely out of spinning metal gears and brass wheels!

Long ago, an inventor named Charles Babbage designed a giant machine called the **Analytical Engine**.

Every time you turned a crank, the brass teeth on the gears clicked and turned to add numbers together automatically.

<!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>Mechanical Gear Addition</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;
      padding: 12px;
      min-height: 100%;
      user-select: none;
    }

    .display-panel {
      display: flex;
      align-items: center;
      gap: 12px;
      background: #ffffff;
      padding: 8px 18px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      border: 1px solid #e6e6e6;
    }

    .val-box {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .val-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #6b7280;
      font-weight: 600;
      margin-bottom: 2px;
    }

    .digit-window {
      width: 44px;
      height: 48px;
      background: #f1f5f9;
      border: 2px solid #cbd5e1;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      font-weight: 700;
      color: #0f172a;
      font-variant-numeric: tabular-nums;
      transition: background-color 0.3s, border-color 0.3s;
    }

    .digit-window.highlight {
      background: #e0f2fe;
      border-color: #22b7ff;
      color: #0284c7;
    }

    .gear-stage {
      width: 100%;
      max-width: 480px;
      height: 250px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    .gear-body {
      transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
      transform-origin: center;
    }

    .gear-brass {
      fill: #fef3c7;
      stroke: #d97706;
      stroke-width: 3;
    }

    .gear-primary {
      fill: #e0f2fe;
      stroke: #0284c7;
      stroke-width: 3;
    }

    .gear-teeth {
      stroke: #94a3b8;
      stroke-width: 4;
      stroke-linecap: round;
    }

    .tooth-num {
      font-size: 11px;
      font-weight: 700;
      fill: #475569;
      text-anchor: middle;
      dominant-baseline: central;
    }

    .carry-flash {
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .carry-flash.active {
      opacity: 1;
    }

    .controls {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      width: 100%;
    }

    button {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    }

    button:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }

    button.primary {
      background: #22b7ff;
      border-color: #0ea5e9;
      color: #ffffff;
    }

    button.primary:hover {
      background: #0ea5e9;
    }

    .tag {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      background: #f1f5f9;
      padding: 4px 8px;
      border-radius: 6px;
    }
  </style>
</head>
<body>

  <div class="display-panel">
    <div class="val-box">
      <span class="val-label">Tens</span>
      <div class="digit-window" id="tensDisp">0</div>
    </div>
    <div style="font-size: 20px; font-weight: 700; color: #94a3b8; margin-top: 14px;">:</div>
    <div class="val-box">
      <span class="val-label">Units</span>
      <div class="digit-window highlight" id="unitsDisp">7</div>
    </div>
    <div class="val-box" style="margin-left: 8px;">
      <span class="val-label">Total</span>
      <div class="tag" id="sumLabel">7 clicks</div>
    </div>
  </div>

  <div class="gear-stage">
    <svg viewBox="0 0 400 220">
      <defs>
        
        <filter id="shadow" x="-10%" y="-10%" width="130%" height="130%">
          <feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.08"/>
        </filter>
      </defs>

      
      <line x1="80" y1="110" x2="320" y2="110" stroke="#cbd5e1" stroke-width="8" stroke-linecap="round" />

      
      <g transform="translate(80, 110)">
        <g id="crankGroup" class="gear-body">
          <circle r="46" class="gear-brass" filter="url(#shadow)" />
          
          <line x1="-36" y1="0" x2="36" y2="0" stroke="#d97706" stroke-width="3" />
          <line x1="0" y1="-36" x2="0" y2="36" stroke="#d97706" stroke-width="3" />
          
          <circle cx="28" cy="-28" r="7" fill="#b45309" stroke="#78350f" stroke-width="2" />
        </g>
        <text x="0" y="66" class="val-label" text-anchor="middle">Crank</text>
      </g>

      
      <path d="M 124 110 L 156 110" stroke="#94a3b8" stroke-width="2" stroke-dasharray="3 3" />
      <polygon points="158,110 152,106 152,114" fill="#94a3b8" />

      
      <g transform="translate(200, 110)">
        <g id="unitsGear" class="gear-body">
          <circle r="52" class="gear-primary" filter="url(#shadow)" />
          <circle r="22" fill="#ffffff" stroke="#0284c7" stroke-width="2" />
          
          <g id="unitsTeeth"></g>
        </g>
        <text x="0" y="74" class="val-label" text-anchor="middle">Units Wheel</text>
      </g>

      
      <g id="carryLever" class="carry-flash" transform="translate(260, 80)">
        <path d="M 0 0 L 15 20 L 0 35" fill="none" stroke="#f59e0b" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
        <circle cx="15" cy="20" r="5" fill="#f59e0b" />
        <text x="8" y="-6" font-size="10" font-weight="700" fill="#d97706" text-anchor="middle">Carry +1</text>
      </g>

      
      <g transform="translate(320, 110)">
        <g id="tensGear" class="gear-body">
          <circle r="46" class="gear-brass" filter="url(#shadow)" />
          <circle r="18" fill="#ffffff" stroke="#d97706" stroke-width="2" />
          
          <g id="tensTeeth"></g>
        </g>
        <text x="0" y="66" class="val-label" text-anchor="middle">Tens Wheel</text>
      </g>
    </svg>
  </div>

  <div class="controls">
    <button class="primary" id="turnBtn" onclick="turnCrank(1)">Turn Crank ↷</button>
    <button onclick="turnCrank(5)">+5 Fast</button>
    <button onclick="resetCrank()">Reset ↺</button>
  </div>

  <script>
    let value = 7;
    let crankAngle = 0;

    // Generate numbered teeth for gears
    function buildGearNumbers(containerId, r) {
      const container = document.getElementById(containerId);
      for (let i = 0; i < 10; i++) {
        const angle = (i * 36) * Math.PI / 180;
        const x = Math.sin(angle) * r;
        const y = -Math.cos(angle) * r;
        
        // Tooth notch
        const tx = Math.sin(angle) * (r + 10);
        const ty = -Math.cos(angle) * (r + 10);
        
        const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
        line.setAttribute("x1", x * 0.85);
        line.setAttribute("y1", y * 0.85);
        line.setAttribute("x2", tx);
        line.setAttribute("y2", ty);
        line.setAttribute("stroke", "#94a3b8");
        line.setAttribute("stroke-width", "2");
        container.appendChild(line);

        const txt = document.createElementNS("http://www.w3.org/2000/svg", "text");
        txt.setAttribute("x", x * 0.72);
        txt.setAttribute("y", y * 0.72);
        txt.setAttribute("class", "tooth-num");
        txt.textContent = i;
        container.appendChild(txt);
      }
    }

    buildGearNumbers('unitsTeeth', 44);
    buildGearNumbers('tensTeeth', 38);

    function updateView(animateCarry) {
      const tens = Math.floor(value / 10) % 10;
      const units = value % 10;

      document.getElementById('tensDisp').textContent = tens;
      document.getElementById('unitsDisp').textContent = units;
      document.getElementById('sumLabel').textContent = value + ' clicks';

      // Rotate gears: each unit click is 36 deg
      document.getElementById('crankGroup').style.transform = `rotate(${crankAngle}deg)`;
      document.getElementById('unitsGear').style.transform = `rotate(${value * 36}deg)`;
      document.getElementById('tensGear').style.transform = `rotate(${tens * 36}deg)`;

      const carryEl = document.getElementById('carryLever');
      const tensWin = document.getElementById('tensDisp');

      if (animateCarry) {
        carryEl.classList.add('active');
        tensWin.classList.add('highlight');
        setTimeout(() => {
          carryEl.classList.remove('active');
          tensWin.classList.remove('highlight');
        }, 600);
      }
    }

    function turnCrank(amount) {
      const prevTens = Math.floor(value / 10);
      value += amount;
      crankAngle += amount * 72;
      const newTens = Math.floor(value / 10);
      updateView(newTens > prevTens);
    }

    function resetCrank() {
      value = 0;
      crankAngle = 0;
      updateView(false);
    }

    // Initial render
    updateView(false);
  </script>
</body>
</html>

The machine could count numbers, but how could it know which steps to do first?

A brilliant mathematician named **Ada Lovelace** studied the machine and had an amazing new idea.

She realized the machine could follow a clear list of instructions called an **algorithm**.

<!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>Algorithm Diagram</title>
<script src="https://assets.classace.io/vendor/classace-diagram.js"></script>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1e2945;
  background: #f8f9fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 12px;
  user-select: none;
}

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

/* Nav Stepper */
.nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.step-tabs {
  display: flex;
  gap: 6px;
  flex: 1;
}

.tab-btn {
  flex: 1;
  padding: 8px 4px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

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

.ctrl-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #1e2945;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pipeline Stage */
.stage {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Punch Cards Sequence */
.cards-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.punch-card {
  flex: 1;
  max-width: 110px;
  height: 70px;
  background: #fffdf5;
  border: 2px solid #e2e8f0;
  border-radius: 6px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.3s ease;
  clip-path: polygon(12px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 12px);
}

.punch-card::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #cbd5e1;
}

.holes-row {
  display: flex;
  gap: 4px;
}

.hole {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd5e1;
}

.hole.punched {
  background: #1e2945;
}

.card-label {
  font-size: 13px;
  font-weight: 700;
  color: #475569;
}

.punch-card.active {
  border-color: #22b7ff;
  box-shadow: 0 4px 12px rgba(34, 183, 255, 0.25);
  transform: translateY(-3px);
  background: #f0f9ff;
}

.punch-card.active .card-label {
  color: #0284c7;
}

.arrow {
  font-size: 14px;
  color: #94a3b8;
}

/* Mechanical Engine Visual */
.engine-box {
  width: 100%;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.dial-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.dial {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: #1e2945;
  transition: all 0.3s ease;
}

.dial.highlight {
  border-color: #22b7ff;
  color: #0284c7;
  box-shadow: 0 0 10px rgba(34, 183, 255, 0.3);
}

.unit-tag {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.5px;
}

.gear-icon {
  font-size: 24px;
  color: #94a3b8;
  transition: transform 0.6s ease;
}

.gear-icon.spinning {
  transform: rotate(180deg);
  color: #22b7ff;
}
</style>
</head>
<body>

<div class="diagram-wrap">
  
  <div class="nav-row">
    <div class="step-tabs">
      <button class="tab-btn active" id="tab0">1. Input</button>
      <button class="tab-btn" id="tab1">2. Process</button>
      <button class="tab-btn" id="tab2">3. Output</button>
    </div>
    <button class="ctrl-btn" id="playBtn" aria-label="Play/Pause">⏸</button>
  </div>

  
  <div class="stage">
    
    <div class="cards-flow">
      <div class="punch-card step-card active" id="card0">
        <div class="holes-row">
          <div class="hole punched"></div>
          <div class="hole"></div>
          <div class="hole punched"></div>
        </div>
        <div class="card-label">4 + 3</div>
      </div>

      <div class="arrow">→</div>

      <div class="punch-card step-card" id="card1">
        <div class="holes-row">
          <div class="hole"></div>
          <div class="hole punched"></div>
          <div class="hole punched"></div>
        </div>
        <div class="card-label">Compute</div>
      </div>

      <div class="arrow">→</div>

      <div class="punch-card step-card" id="card2">
        <div class="holes-row">
          <div class="hole punched"></div>
          <div class="hole punched"></div>
          <div class="hole"></div>
        </div>
        <div class="card-label">Result</div>
      </div>
    </div>

    
    <div class="engine-box">
      <div class="dial-unit">
        <div class="dial highlight" id="dialA">4</div>
        <div class="unit-tag">In</div>
      </div>

      <div class="gear-icon" id="gear">⚙️</div>

      <div class="dial-unit">
        <div class="dial" id="dialB">+</div>
        <div class="unit-tag">Step</div>
      </div>

      <div class="gear-icon" id="gear2">⚙️</div>

      <div class="dial-unit">
        <div class="dial" id="dialC">?</div>
        <div class="unit-tag">Out</div>
      </div>
    </div>
  </div>
</div>

<script>
const states = [
  { card: 0, dialA: '4', dialB: '+ 3', dialC: '...', gear: 0, hl: 'dialA' },
  { card: 1, dialA: '4', dialB: '⚙️', dialC: '...', gear: 180, hl: 'dialB' },
  { card: 2, dialA: '4', dialB: '+ 3', dialC: '7', gear: 360, hl: 'dialC' }
];

const cards = [$('#card0'), $('#card1'), $('#card2')];
const tabs = [$('#tab0'), $('#tab1'), $('#tab2')];
const dialA = $('#dialA');
const dialB = $('#dialB');
const dialC = $('#dialC');
const gear = $('#gear');
const gear2 = $('#gear2');
const playBtn = $('#playBtn');

function applyState(idx) {
  const s = states[idx];
  
  tabs.forEach((t, i) => t.classList.toggle('active', i === idx));
  cards.forEach((c, i) => c.classList.toggle('active', i === idx));

  dialA.textContent = s.dialA;
  dialB.textContent = s.dialB;
  dialC.textContent = s.dialC;

  dialA.classList.toggle('highlight', s.hl === 'dialA');
  dialB.classList.toggle('highlight', s.hl === 'dialB');
  dialC.classList.toggle('highlight', s.hl === 'dialC');

  gear.style.transform = `rotate(${s.gear}deg)`;
  gear2.style.transform = `rotate(-${s.gear}deg)`;
  gear.classList.toggle('spinning', idx === 1);
  gear2.classList.toggle('spinning', idx === 1);
}

const player = new StepPlayer('.step-card', {
  interval: 3200,
  onChange: (idx) => applyState(idx)
});

player.start();

tabs.forEach((tab, i) => {
  onTap(tab, () => {
    player.goTo(i);
  });
});

onTap(playBtn, () => {
  player.toggle();
  playBtn.textContent = player.playing ? '⏸' : '▶';
});
</script>
</body>
</html>

Ada wrote down the very first step-by-step instructions for the engine using paper cards with holes punched in them.

Because she created these instructions, Ada became the world's very first **computer programmer**!

If you could write a 3-step algorithm for a robot right now, what fun task would you tell it to do?

math

Ada Lovelace and the Invention of Computer Programming. Learn how Ada Lovelace and Charles Babbage created the first algorithms and early mechanical computing engines.

Who was Ada Lovelace? - KS1 / Early Primary Computing and History

Ada Lovelace: The First Computer Programmer and Early Algorithms

Early Years Unplugged: Computational Thinking and Step-by-Step Instructions

Teaching historical computing and algorithms at Early Level (P1 / ages 4-6) under CfE MTH 2-12a requires translating abstract computational history into tangible, play-based kinesthetic learning. Teachers should emphasize storytelling (Ada Lovelace as the imaginative 'Enchantress of Numbers') paired with unplugged, physical movement games where children take turns being the 'programmer' and the 'machine', reinforcing that sequencing and precision are foundational mathematical concepts in modern technology.

Ada Lovelace and the Invention of Computer Programming

A Giant Math Machine

The First Code Recipe