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

What if you had no paper, no pencils, and no number symbols to count your toys?

Thousands of years ago in ancient China, people solved this by using small wooden sticks called **counting rods**.

To show a number, you simply place that many sticks on a counting board. One stick means 1, two sticks mean 2, and three sticks mean 3.

<!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>Counting Rod Numerals</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, sans-serif;
    background: #fef9ee;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }

  .main-layout {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  /* Counting Board Surface */
  .board {
    width: 100%;
    height: 180px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(30, 41, 69, 0.06);
    border: 2px solid #ede3d2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }

  .board-grid {
    position: absolute;
    inset: 0;
    background-image: 
      linear-gradient(to right, rgba(237, 227, 210, 0.5) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(237, 227, 210, 0.5) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
  }

  .digit-display {
    position: absolute;
    top: 10px;
    left: 14px;
    font-size: 20px;
    font-weight: 700;
    color: #a09580;
  }

  .rod-container {
    position: relative;
    width: 140px;
    height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }

  /* Top 5-value horizontal rod */
  .top-rod-slot {
    height: 24px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .horizontal-rod {
    width: 80px;
    height: 8px;
    background: #e76f51;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(231, 111, 81, 0.25);
    transition: opacity 0.25s ease, transform 0.25s ease;
    opacity: 0;
    transform: scaleX(0.7);
  }

  .horizontal-rod.visible {
    opacity: 1;
    transform: scaleX(1);
  }

  /* Bottom 1-value vertical rods */
  .bottom-rods-slot {
    height: 70px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    padding-top: 4px;
  }

  .vertical-rod {
    width: 8px;
    height: 60px;
    background: #e76f51;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(231, 111, 81, 0.25);
    transition: opacity 0.25s ease, transform 0.25s ease;
    opacity: 0;
    transform: scaleY(0.6);
  }

  .vertical-rod.visible {
    opacity: 1;
    transform: scaleY(1);
  }

  /* Number Selector Buttons */
  .btn-row {
    display: flex;
    justify-content: center;
    gap: 6px;
    width: 100%;
  }

  .num-btn {
    flex: 1;
    max-width: 40px;
    height: 40px;
    border-radius: 10px;
    border: none;
    background: #ffffff;
    color: #1e2945;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(30, 41, 69, 0.06);
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .num-btn.active {
    background: #e76f51;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(231, 111, 81, 0.35);
  }

  /* Controls */
  .controls {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .ctrl-btn {
    background: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #1e2945;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(30, 41, 69, 0.06);
    display: flex;
    align-items: center;
    gap: 6px;
  }
</style>
</head>
<body>

<div class="main-layout">
  <div class="board">
    <div class="board-grid"></div>
    <div class="digit-display" id="digitLabel">1</div>
    <div class="rod-container">
      <div class="top-rod-slot">
        <div class="horizontal-rod" id="hRod"></div>
      </div>
      <div class="bottom-rods-slot" id="vRodsContainer">
        <div class="vertical-rod" id="v1"></div>
        <div class="vertical-rod" id="v2"></div>
        <div class="vertical-rod" id="v3"></div>
        <div class="vertical-rod" id="v4"></div>
        <div class="vertical-rod" id="v5"></div>
      </div>
    </div>
  </div>

  <div class="btn-row">
    <button class="num-btn active" data-num="1">1</button>
    <button class="num-btn" data-num="2">2</button>
    <button class="num-btn" data-num="3">3</button>
    <button class="num-btn" data-num="4">4</button>
    <button class="num-btn" data-num="5">5</button>
    <button class="num-btn" data-num="6">6</button>
    <button class="num-btn" data-num="7">7</button>
    <button class="num-btn" data-num="8">8</button>
    <button class="num-btn" data-num="9">9</button>
  </div>

  <div class="controls">
    <button class="ctrl-btn" id="playToggle">⏸ Pause</button>
  </div>
</div>

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

  const hRod = document.getElementById('hRod');
  const vRods = [
    document.getElementById('v1'),
    document.getElementById('v2'),
    document.getElementById('v3'),
    document.getElementById('v4'),
    document.getElementById('v5')
  ];
  const digitLabel = document.getElementById('digitLabel');
  const buttons = Array.from(document.querySelectorAll('.num-btn'));
  const playToggle = document.getElementById('playToggle');

  function render(num) {
    current = num;
    digitLabel.textContent = num;

    buttons.forEach(btn => {
      btn.classList.toggle('active', parseInt(btn.dataset.num, 10) === num);
    });

    const hasTop = num >= 6;
    const bottomCount = hasTop ? num - 5 : num;

    hRod.classList.toggle('visible', hasTop);

    vRods.forEach((rod, idx) => {
      rod.classList.toggle('visible', idx < bottomCount);
    });
  }

  function next() {
    let nextNum = current + 1;
    if (nextNum > 9) nextNum = 1;
    render(nextNum);
  }

  function startAuto() {
    stopAuto();
    timer = setInterval(next, 3000);
    isPlaying = true;
    playToggle.textContent = '⏸ Pause';
  }

  function stopAuto() {
    if (timer) clearInterval(timer);
    timer = null;
    isPlaying = false;
    playToggle.textContent = '▶ Play';
  }

  buttons.forEach(btn => {
    btn.addEventListener('click', () => {
      stopAuto();
      render(parseInt(btn.dataset.num, 10));
    });
  });

  playToggle.addEventListener('click', () => {
    if (isPlaying) {
      stopAuto();
    } else {
      next();
      startAuto();
    }
  });

  render(1);
  startAuto();
</script>

</body>
</html>

Using sticks is great for counting on a table, but how did people write these numbers down in books?

**Traditional Chinese** character numerals for the first three numbers directly mirror counting sticks laid horizontally.

Because of this, **一** uses one stroke for $1$, **二** uses two strokes for $2$, and **三** uses three strokes for $3$.

<!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>Ancient Chinese Numerals: 1 to 4</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #fdfbf7;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
    }

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

    .nav-btn {
      flex: 1;
      padding: 8px 4px;
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
    }

    .nav-btn .sub {
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
    }

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

    .nav-btn.active .sub {
      color: #0284c7;
    }

    .display-area {
      width: 100%;
      max-width: 420px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 12px;
    }

    .panel {
      background: #ffffff;
      border: 1px solid #e8e5df;
      border-radius: 16px;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 170px;
      box-shadow: 0 4px 12px rgba(30, 41, 69, 0.04);
      position: relative;
    }

    .panel-tag {
      position: absolute;
      top: 10px;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #94a3b8;
    }

    .hanzi-display {
      font-size: 64px;
      line-height: 1;
      font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", serif;
      font-weight: 700;
      color: #1e2945;
      margin-top: 14px;
      transition: opacity 0.2s;
    }

    .rods-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      height: 70px;
      margin-top: 14px;
      width: 100%;
    }

    .rod {
      height: 10px;
      width: 80px;
      background: linear-gradient(180deg, #d97706 0%, #b45309 100%);
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(180, 83, 9, 0.25);
      transition: opacity 0.3s, transform 0.3s;
    }

    .rod.curtain-rod {
      background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
      box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25);
    }

    .bottom-bar {
      width: 100%;
      max-width: 420px;
      background: #ffffff;
      border: 1px solid #e8e5df;
      border-radius: 12px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .dots-group {
      display: flex;
      gap: 8px;
    }

    .dot-btn {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #cbd5e1;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: background-color 0.2s;
    }

    .dot-btn.active {
      background: #22b7ff;
    }

    .status-text {
      font-size: 14px;
      font-weight: 700;
      color: #475569;
    }

    .play-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 4px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <div class="nav-bar">
    <button class="nav-btn active" data-index="0">
      <span>1</span>
      <span class="sub">一</span>
    </button>
    <button class="nav-btn" data-index="1">
      <span>2</span>
      <span class="sub">二</span>
    </button>
    <button class="nav-btn" data-index="2">
      <span>3</span>
      <span class="sub">三</span>
    </button>
    <button class="nav-btn" data-index="3">
      <span>4</span>
      <span class="sub">四</span>
    </button>
  </div>

  <div class="display-area">
    <div class="panel">
      <span class="panel-tag">Counting Rods</span>
      <div class="rods-container" id="rodsBox"></div>
    </div>

    <div class="panel">
      <span class="panel-tag">Numeral</span>
      <div class="hanzi-display" id="charDisplay">一</div>
    </div>
  </div>

  <div class="bottom-bar">
    <div class="dots-group">
      <button class="dot-btn active" data-index="0" aria-label="1"></button>
      <button class="dot-btn" data-index="1" aria-label="2"></button>
      <button class="dot-btn" data-index="2" aria-label="3"></button>
      <button class="dot-btn" data-index="3" aria-label="4"></button>
    </div>
    <span class="status-text" id="statusText">1 Stroke</span>
    <button class="play-btn" id="autoBtn">⏸ Auto</button>
  </div>

  <script>
    const data = [
      { num: 1, char: '一', rods: 1, label: '1 Stroke' },
      { num: 2, char: '二', rods: 2, label: '2 Strokes' },
      { num: 3, char: '三', rods: 3, label: '3 Strokes' },
      { num: 4, char: '四', rods: 4, label: 'New Symbol' }
    ];

    let current = 0;
    let timer = null;
    let playing = true;

    const navBtns = document.querySelectorAll('.nav-btn');
    const dotBtns = document.querySelectorAll('.dot-btn');
    const charDisplay = document.getElementById('charDisplay');
    const rodsBox = document.getElementById('rodsBox');
    const statusText = document.getElementById('statusText');
    const autoBtn = document.getElementById('autoBtn');

    function renderRods(count, isSpecial) {
      rodsBox.innerHTML = '';
      if (isSpecial) {
        // Visual indicator of window/curtain frame
        const frame = document.createElement('div');
        frame.style.width = '52px';
        frame.style.height = '52px';
        frame.style.border = '4px solid #0284c7';
        frame.style.borderRadius = '8px';
        frame.style.display = 'flex';
        frame.style.alignItems = 'center';
        frame.style.justifyContent = 'space-around';
        frame.style.padding = '4px';

        const inside1 = document.createElement('div');
        inside1.style.width = '4px';
        inside1.style.height = '32px';
        inside1.style.background = '#0284c7';
        inside1.style.borderRadius = '2px';

        const inside2 = document.createElement('div');
        inside2.style.width = '4px';
        inside2.style.height = '32px';
        inside2.style.background = '#0284c7';
        inside2.style.borderRadius = '2px';

        frame.appendChild(inside1);
        frame.appendChild(inside2);
        rodsBox.appendChild(frame);
      } else {
        for (let i = 0; i < count; i++) {
          const rod = document.createElement('div');
          rod.className = 'rod';
          rodsBox.appendChild(rod);
        }
      }
    }

    function setStep(idx) {
      current = idx;
      navBtns.forEach((btn, i) => btn.classList.toggle('active', i === current));
      dotBtns.forEach((btn, i) => btn.classList.toggle('active', i === current));
      
      const item = data[current];
      charDisplay.textContent = item.char;
      statusText.textContent = item.label;
      renderRods(item.rods, item.num === 4);
    }

    function nextStep() {
      setStep((current + 1) % data.length);
    }

    function startAuto() {
      stopAuto();
      timer = setInterval(nextStep, 3200);
      playing = true;
      autoBtn.textContent = '⏸ Auto';
    }

    function stopAuto() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
      playing = false;
      autoBtn.textContent = '▶ Play';
    }

    navBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        const idx = parseInt(btn.getAttribute('data-index'), 10);
        setStep(idx);
        stopAuto();
      });
    });

    dotBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        const idx = parseInt(btn.getAttribute('data-index'), 10);
        setStep(idx);
        stopAuto();
      });
    });

    autoBtn.addEventListener('click', () => {
      if (playing) {
        stopAuto();
      } else {
        nextStep();
        startAuto();
      }
    });

    // Initial render
    setStep(0);
    startAuto();
  </script>
</body>
</html>

When you get to the number 4, writing four lines across became too messy to read quickly. So people drew **四**, which looks like a cozy window frame with curtains hanging inside!

Can you use your fingers to trace **一**, **二**, and **三** in the air right now?

math

Exploring Ancient Chinese Rod and Character Numerals. Explore how counting rods and traditional Chinese characters (一, 二, 三, 四, 五...) represent quantities.

Chinese Numerals and Counting Rods History Archive

Early Years Number Sense and Mark Making Collections

Early Level Numeracy and World History of Numbers (CfE)

Pedagogical Strategy for Early Level (P1): Implement a concrete-pictorial-abstract (CPA) approach using craft sticks/bamboo skewers in a multi-sensory sandbox or playdough mat. Begin with subitizing and 1-to-1 correspondence with physical counters ($1\text{--}5$), transition to laying physical rods, and guide learners to notice how the characters 一, 二, and 三 look just like their sticks before introducing 四 and 五 as special character symbols.

Exploring Ancient Chinese Rod and Character Numerals

Counting with Rods

Writing Chinese Numbers

Key takeaways