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 down at your two hands — they are perfect matching twins!

What happens when both hands show the exact same number of fingers at the same time?

A **double** is what you get when you add a number to itself.

It is just like looking in a mirror: whatever one hand shows, the other hand copies.

<!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>Exploring Doubles Patterns</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -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: 100vh;
      padding: 16px 12px;
      overflow-x: hidden;
    }

    /* Step Selector Buttons */
    .stepper {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      width: 100%;
      max-width: 480px;
    }

    .step-btn {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 20px;
      padding: 6px 12px;
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      transition: all 0.2s ease;
    }

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

    /* Main Hands Stage */
    .stage {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      max-width: 520px;
      margin: 12px 0;
      position: relative;
    }

    .hand-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 16px;
      padding: 14px 10px 10px;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      min-width: 130px;
    }

    .hand-title {
      font-size: 13px;
      font-weight: 700;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
    }

    /* Hand and Fingers Graphic */
    .hand-visual {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 5px;
      height: 110px;
      width: 100%;
      padding-bottom: 6px;
    }

    .finger-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      height: 100%;
      width: 18px;
    }

    .finger {
      width: 100%;
      border-radius: 10px;
      background: #e2e8f0;
      transition: height 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .finger.f1 { height: 50px; }
    .finger.f2 { height: 75px; }
    .finger.f3 { height: 95px; }
    .finger.f4 { height: 85px; }
    .finger.f5 { height: 60px; }

    .finger.active-left {
      background: #22b7ff;
      box-shadow: 0 0 10px rgba(34, 183, 255, 0.5);
    }

    .finger.active-right {
      background: #6366f1;
      box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
    }

    .palm {
      width: 110px;
      height: 28px;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 8px 8px 14px 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
    }

    .palm.left { color: #0284c7; }
    .palm.right { color: #4f46e5; }

    /* Mirror Line */
    .mirror-divider {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      height: 140px;
    }

    .mirror-line {
      width: 2px;
      height: 100%;
      background: repeating-linear-gradient(to bottom, #94a3b8 0, #94a3b8 6px, transparent 6px, transparent 12px);
    }

    .mirror-icon {
      font-size: 18px;
      background: #f8f9fa;
      padding: 2px 0;
    }

    /* Equation Display */
    .equation-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 16px;
      padding: 10px 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 26px;
      font-weight: 800;
      box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    }

    .num-left { color: #0284c7; }
    .num-right { color: #4f46e5; }
    .num-total {
      color: #0f172a;
      background: #e0f2fe;
      padding: 2px 14px;
      border-radius: 12px;
    }

    /* Playback bar */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 4px;
    }

    .play-btn {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #1e2945;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
  </style>
</head>
<body>

  
  <div class="stepper" id="stepper">
    <button class="step-btn active" data-n="1">1 + 1</button>
    <button class="step-btn" data-n="2">2 + 2</button>
    <button class="step-btn" data-n="3">3 + 3</button>
    <button class="step-btn" data-n="4">4 + 4</button>
    <button class="step-btn" data-n="5">5 + 5</button>
  </div>

  
  <div class="stage">
    
    <div class="hand-card">
      <div class="hand-title">Left Hand</div>
      <div class="hand-visual">
        <div class="finger-col"><div class="finger f1" id="lf-1"></div></div>
        <div class="finger-col"><div class="finger f2" id="lf-2"></div></div>
        <div class="finger-col"><div class="finger f3" id="lf-3"></div></div>
        <div class="finger-col"><div class="finger f4" id="lf-4"></div></div>
        <div class="finger-col"><div class="finger f5" id="lf-5"></div></div>
      </div>
      <div class="palm left" id="count-l">1</div>
    </div>

    
    <div class="mirror-divider">
      <span class="mirror-icon">🪞</span>
      <div class="mirror-line"></div>
    </div>

    
    <div class="hand-card">
      <div class="hand-title">Right Hand</div>
      <div class="hand-visual">
        <div class="finger-col"><div class="finger f5" id="rf-5"></div></div>
        <div class="finger-col"><div class="finger f4" id="rf-4"></div></div>
        <div class="finger-col"><div class="finger f3" id="rf-3"></div></div>
        <div class="finger-col"><div class="finger f2" id="rf-2"></div></div>
        <div class="finger-col"><div class="finger f1" id="rf-1"></div></div>
      </div>
      <div class="palm right" id="count-r">1</div>
    </div>
  </div>

  
  <div class="equation-card">
    <span class="num-left" id="eq-l">1</span>
    <span>+</span>
    <span class="num-right" id="eq-r">1</span>
    <span>=</span>
    <span class="num-total" id="eq-tot">2</span>
  </div>

  
  <div class="controls">
    <button class="play-btn" id="playBtn" aria-label="Play/Pause">⏸</button>
  </div>

  <script>
    let current = 1;
    let isPlaying = true;
    let timer = null;

    const buttons = document.querySelectorAll('.step-btn');
    const playBtn = document.getElementById('playBtn');

    const eqL = document.getElementById('eq-l');
    const eqR = document.getElementById('eq-r');
    const eqTot = document.getElementById('eq-tot');
    const countL = document.getElementById('count-l');
    const countR = document.getElementById('count-r');

    function updateView(n) {
      current = n;

      // Update buttons
      buttons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx + 1 === n);
      });

      // Update fingers (Left raises 1..n, Right mirrors 1..n)
      for (let i = 1; i <= 5; i++) {
        const lf = document.getElementById(`lf-${i}`);
        const rf = document.getElementById(`rf-${i}`);
        if (i <= n) {
          lf.classList.add('active-left');
          rf.classList.add('active-right');
        } else {
          lf.classList.remove('active-left');
          rf.classList.remove('active-right');
        }
      }

      // Update counters & equation
      countL.textContent = n;
      countR.textContent = n;
      eqL.textContent = n;
      eqR.textContent = n;
      eqTot.textContent = n + n;
    }

    function nextStep() {
      let next = current + 1;
      if (next > 5) next = 1;
      updateView(next);
    }

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3200);
      isPlaying = true;
      playBtn.textContent = '⏸';
    }

    function pauseTimer() {
      if (timer) clearInterval(timer);
      isPlaying = false;
      playBtn.textContent = '▶';
    }

    buttons.forEach((btn, idx) => {
      btn.addEventListener('click', () => {
        updateView(idx + 1);
        pauseTimer();
      });
    });

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        pauseTimer();
      } else {
        startTimer();
      }
    });

    // Initialize
    updateView(1);
    startTimer();
  </script>
</body>
</html>

Let's build these double facts step-by-step starting with our smallest fingers.

Hold up 1 pointer finger on your left hand and 1 on your right hand: $1 + 1 = 2$.

Now show 2 peace signs: $2 + 2 = 4$. If you add 3 on each side, $3 + 3 = 6$.

<!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="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      margin: 0;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
      box-sizing: border-box;
    }

    .nav-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
    }

    .btn-step {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-step.active {
      background: #eaf7ff;
      border-color: #22b7ff;
      color: #0077b6;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.25);
    }

    .btn-play {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 14px;
      cursor: pointer;
      color: #1e2945;
    }

    .stage {
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      width: 100%;
      max-width: 440px;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      margin: 8px 0;
    }

    .pairs-grid {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 160px;
      justify-content: center;
      align-items: center;
      width: 100%;
    }

    .pair-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      position: relative;
    }

    .pair-line {
      position: absolute;
      width: 32px;
      height: 3px;
      background: #d0ebff;
      border-radius: 2px;
      z-index: 1;
    }

    .dot {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 13px;
      color: #ffffff;
      z-index: 2;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      transition: transform 0.2s ease;
    }

    .dot-left {
      background: #22b7ff;
    }

    .dot-right {
      background: #6366f1;
    }

    .equation-box {
      font-size: 22px;
      min-height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .partner-tag {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      color: #166534;
      font-size: 13px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
  </style>
</head>
<body>

  <div class="nav-bar">
    <button class="btn-play" id="playBtn" aria-label="Play/Pause">⏸</button>
    <button class="btn-step active" data-n="1">1 + 1</button>
    <button class="btn-step" data-n="2">2 + 2</button>
    <button class="btn-step" data-n="3">3 + 3</button>
    <button class="btn-step" data-n="4">4 + 4</button>
    <button class="btn-step" data-n="5">5 + 5</button>
  </div>

  <div class="stage">
    <div class="pairs-grid" id="grid"></div>
    <div class="equation-box" id="eq"></div>
    <div class="partner-tag" id="tag">✦ 1 pair</div>
  </div>

  <script>
    let currentN = 1;
    let timer = null;
    let isPlaying = true;

    function render(n) {
      currentN = n;
      const grid = document.getElementById('grid');
      grid.innerHTML = '';

      for (let i = 1; i <= n; i++) {
        const row = document.createElement('div');
        row.className = 'pair-row';

        const line = document.createElement('div');
        line.className = 'pair-line';

        const leftDot = document.createElement('div');
        leftDot.className = 'dot dot-left';
        leftDot.textContent = i;

        const rightDot = document.createElement('div');
        rightDot.className = 'dot dot-right';
        rightDot.textContent = n + i;

        row.appendChild(line);
        row.appendChild(leftDot);
        row.appendChild(rightDot);
        grid.appendChild(row);
      }

      // Render math
      const total = n * 2;
      const eqEl = document.getElementById('eq');
      katex.render(`${n} + ${n} = ${total}`, eqEl);

      // Render label
      const tagEl = document.getElementById('tag');
      tagEl.textContent = `✦ ${n} ${n === 1 ? 'pair' : 'pairs'} = ${total} (even)`;

      // Update button highlights
      document.querySelectorAll('.btn-step').forEach(btn => {
        btn.classList.toggle('active', parseInt(btn.dataset.n, 10) === n);
      });
    }

    function nextStep() {
      const next = currentN >= 5 ? 1 : currentN + 1;
      render(next);
    }

    function startAuto() {
      stopAuto();
      isPlaying = true;
      document.getElementById('playBtn').textContent = '⏸';
      timer = setInterval(nextStep, 3200);
    }

    function stopAuto() {
      isPlaying = false;
      document.getElementById('playBtn').textContent = '▶';
      if (timer) clearInterval(timer);
    }

    // Step button click handlers
    document.querySelectorAll('.btn-step').forEach(btn => {
      btn.addEventListener('click', () => {
        const n = parseInt(btn.dataset.n, 10);
        render(n);
        stopAuto();
      });
    });

    // Play/Pause button
    document.getElementById('playBtn').addEventListener('click', () => {
      if (isPlaying) {
        stopAuto();
      } else {
        startAuto();
      }
    });

    // Initial render & start timer
    render(1);
    startAuto();
  </script>
</body>
</html>

Every double answer is an **even number**, which means every finger always has a partner!

What happens when we use almost all the fingers on our hands?

Show 4 fingers on each hand like spider legs: $4 + 4 = 8$.

Finally, flash high-fives with all 5 fingers on both hands: $5 + 5 = 10$.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

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

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

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

    .display-area {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      margin: 8px 0;
    }

    .equation-box {
      font-size: 26px;
      font-weight: 800;
      color: #1e2945;
      background: #ffffff;
      padding: 6px 20px;
      border-radius: 20px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      letter-spacing: 1px;
    }

    .equation-box .accent {
      color: #22b7ff;
    }

    .equation-box .total {
      color: #10b981;
    }

    .hands-stage {
      position: relative;
      width: 100%;
      height: 180px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
    }

    .hand {
      display: flex;
      align-items: flex-end;
      gap: 5px;
      height: 140px;
      padding: 10px 8px 0 8px;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }

    .finger {
      width: 18px;
      border-radius: 10px 10px 4px 4px;
      background: #e2e8f0;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      position: relative;
      transform-origin: bottom center;
    }

    .f1 { height: 50px; }
    .f2 { height: 80px; }
    .f3 { height: 95px; }
    .f4 { height: 85px; }
    .f5 { height: 60px; }

    .finger.active {
      background: #22b7ff;
      box-shadow: 0 0 10px rgba(34, 183, 255, 0.4);
    }

    .finger.active::after {
      content: '';
      position: absolute;
      top: 4px;
      left: 4px;
      right: 4px;
      height: 6px;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 4px;
    }

    .links-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .twin-line {
      stroke: #22b7ff;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-dasharray: 4 4;
      opacity: 0.8;
      animation: dash 1s linear infinite;
    }

    @keyframes dash {
      to { stroke-dashoffset: -8; }
    }

    .bottom-bar {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 440px;
    }

    .ctrl-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
    }
  </style>
</head>
<body>

  
  <div class="nav-tabs">
    <button class="tab-btn active" data-n="1">1 + 1</button>
    <button class="tab-btn" data-n="2">2 + 2</button>
    <button class="tab-btn" data-n="3">3 + 3</button>
    <button class="tab-btn" data-n="4">4 + 4</button>
    <button class="tab-btn" data-n="5">5 + 5</button>
  </div>

  
  <div class="display-area">
    <div class="equation-box">
      <span class="accent" id="eq-left">1</span> + <span class="accent" id="eq-right">1</span> = <span class="total" id="eq-total">2</span>
    </div>

    <div class="hands-stage" id="stage">
      <svg class="links-layer" id="links-svg"></svg>

      
      <div class="hand" id="left-hand">
        <div class="finger f1" id="l1"></div>
        <div class="finger f2" id="l2"></div>
        <div class="finger f3" id="l3"></div>
        <div class="finger f4" id="l4"></div>
        <div class="finger f5" id="l5"></div>
      </div>

      
      <div class="hand" id="right-hand">
        <div class="finger f5" id="r5"></div>
        <div class="finger f4" id="r4"></div>
        <div class="finger f3" id="r3"></div>
        <div class="finger f2" id="r2"></div>
        <div class="finger f1" id="r1"></div>
      </div>
    </div>
  </div>

  
  <div class="bottom-bar">
    <button class="ctrl-btn" id="prev-btn">◀ Previous</button>
    <button class="ctrl-btn" id="play-btn">⏸ Pause</button>
    <button class="ctrl-btn" id="next-btn">Next ▶</button>
  </div>

  <script>
    let currentN = 1;
    let isPlaying = true;
    let timer = null;

    const leftFingers = ['l1', 'l2', 'l3', 'l4', 'l5'];
    const rightFingers = ['r1', 'r2', 'r3', 'r4', 'r5'];

    function updateDiagram(n) {
      currentN = n;

      // Update tabs
      document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.classList.toggle('active', parseInt(btn.getAttribute('data-n')) === n);
      });

      // Update equation text
      document.getElementById('eq-left').textContent = n;
      document.getElementById('eq-right').textContent = n;
      document.getElementById('eq-total').textContent = n * 2;

      // Update fingers active state
      for (let i = 0; i < 5; i++) {
        const isActive = i < n;
        document.getElementById(leftFingers[i]).classList.toggle('active', isActive);
        document.getElementById(rightFingers[i]).classList.toggle('active', isActive);
      }

      // Redraw link lines
      drawTwinBridges(n);
    }

    function drawTwinBridges(n) {
      const svg = document.getElementById('links-svg');
      svg.innerHTML = '';
      const stageRect = document.getElementById('stage').getBoundingClientRect();

      for (let i = 0; i < n; i++) {
        const leftEl = document.getElementById(leftFingers[i]);
        const rightEl = document.getElementById(rightFingers[i]);

        const lRect = leftEl.getBoundingClientRect();
        const rRect = rightEl.getBoundingClientRect();

        const x1 = lRect.left + lRect.width / 2 - stageRect.left;
        const y1 = lRect.top + 8 - stageRect.top;
        const x2 = rRect.left + rRect.width / 2 - stageRect.left;
        const y2 = rRect.top + 8 - stageRect.top;

        const cy = Math.min(y1, y2) - 15 - (i * 4);

        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('d', `M ${x1} ${y1} Q ${(x1 + x2) / 2} ${cy} ${x2} ${y2}`);
        path.setAttribute('class', 'twin-line');
        path.setAttribute('fill', 'none');
        svg.appendChild(path);
      }
    }

    function nextStep() {
      const next = currentN >= 5 ? 1 : currentN + 1;
      updateDiagram(next);
    }

    function prevStep() {
      const prev = currentN <= 1 ? 5 : currentN - 1;
      updateDiagram(prev);
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3200);
      document.getElementById('play-btn').textContent = '⏸ Pause';
      isPlaying = true;
    }

    function stopAutoPlay() {
      if (timer) clearInterval(timer);
      timer = null;
      document.getElementById('play-btn').textContent = '▶ Play';
      isPlaying = false;
    }

    // Attach Tab Clicks
    document.querySelectorAll('.tab-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        stopAutoPlay();
        updateDiagram(parseInt(btn.getAttribute('data-n')));
      });
    });

    // Control buttons
    document.getElementById('prev-btn').addEventListener('click', () => {
      stopAutoPlay();
      prevStep();
    });

    document.getElementById('next-btn').addEventListener('click', () => {
      stopAutoPlay();
      nextStep();
    });

    document.getElementById('play-btn').addEventListener('click', () => {
      if (isPlaying) stopAutoPlay();
      else startAutoPlay();
    });

    window.addEventListener('resize', () => drawTwinBridges(currentN));

    // Initial render
    updateDiagram(1);
    startAutoPlay();
  </script>
</body>
</html>

A common trap is saying $4 + 4 = 7$ by missing a finger — remember every finger on one side must have a twin on the other side.

Try snapping up your fingers to show each double as fast as a flash!

math

Exploring Doubles Patterns up to Five Plus Five. Recognize and recall double facts from 1+1 to 5+5 using fingers and mirror patterns.

Early Level & KS1 Maths: Doubles to 10

NRICH Early Years: Finger Patterns and Number Doubles

IXL Early Maths: Add Doubles with Models up to 10

At Early Level (P1), doubles instruction should progress through the Concrete-Pictorial-Abstract (CPA) approach. Begin with tactile and physical explorations (such as placing objects against acrylic mirrors, clapping games, and finger displays) before introducing pairwise arrangements on five/ten-frames. Consistent oral rhymes (e.g., 'Double 1 is 2, double 2 is 4...') and visual anchors solidify mental recall without requiring formal written notation immediately.

Exploring Doubles Patterns up to Five Plus Five

What is a Double?

Small Doubles: 1+1, 2+2, and 3+3