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

Have you ever wanted to type your age, a secret game code, or your top high score?

To do that, you need the **number keys** sitting right at the very top of your keyboard!

The numbers sit in a straight line right above the letter keys. We call this the **number row**.

They go in order from **1 through 9**, and the **0** key sits at the far right end after 9.

<!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>Number Keys on the Keyboard</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: 100vh;
      padding: 12px;
      user-select: none;
    }

    .main-wrap {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    /* Screen display */
    .screen-display {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }
    .display-value {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 28px;
      font-weight: 700;
      color: #22b7ff;
      letter-spacing: 4px;
      min-width: 32px;
    }
    .display-tag {
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      background: #f1f5f9;
      padding: 4px 10px;
      border-radius: 6px;
    }

    /* Keyboard container */
    .keyboard-panel {
      background: #e2e8f0;
      border-radius: 16px;
      padding: 12px;
      width: 100%;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.05);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* Range bracket indicators */
    .bracket-row {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 6px;
      padding: 0 2px;
    }
    .bracket-1-9 {
      grid-column: span 9;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }
    .bracket-0 {
      grid-column: span 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }
    .bracket-line {
      width: 100%;
      height: 4px;
      border-radius: 2px;
    }
    .bracket-1-9 .bracket-line {
      background: #22b7ff;
    }
    .bracket-0 .bracket-line {
      background: #f59e0b;
    }
    .bracket-label {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .bracket-1-9 .bracket-label { color: #0284c7; }
    .bracket-0 .bracket-label { color: #d97706; }

    /* Key row */
    .key-row {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 6px;
      width: 100%;
    }

    .key {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-bottom: 4px solid #94a3b8;
      border-radius: 8px;
      aspect-ratio: 1 / 1.1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 700;
      color: #1e2945;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .key:active {
      transform: translateY(2px);
      border-bottom-width: 2px;
    }

    .key.active-blue {
      background: #22b7ff;
      color: #ffffff;
      border-color: #0284c7;
      border-bottom-color: #0369a1;
      box-shadow: 0 0 12px rgba(34, 183, 255, 0.4);
    }
    .key.active-amber {
      background: #f59e0b;
      color: #ffffff;
      border-color: #d97706;
      border-bottom-color: #b45309;
      box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
    }

    /* Sub-row (ghosted QWERTY context) */
    .ghost-row {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 6px;
      opacity: 0.35;
      pointer-events: none;
    }
    .ghost-key {
      background: #cbd5e1;
      border-radius: 6px;
      aspect-ratio: 1 / 0.8;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 600;
      color: #475569;
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 8px 18px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: background 0.15s, border-color 0.15s;
    }
    .btn:active {
      background: #f1f5f9;
    }
    .btn-primary {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
    }
    .btn-primary:active {
      background: #0ea5e9;
    }

    @media (max-width: 420px) {
      .key { font-size: 16px; border-bottom-width: 3px; border-radius: 6px; }
      .ghost-key { font-size: 11px; }
      .bracket-label { font-size: 10px; }
      .display-value { font-size: 22px; }
    }
  </style>
</head>
<body>
  <div class="main-wrap">
    
    
    <div class="screen-display">
      <div class="display-value" id="displayVal">1</div>
      <div class="display-tag" id="displayTag">1 to 9: In Order</div>
    </div>

    
    <div class="keyboard-panel">
      
      <div class="bracket-row">
        <div class="bracket-1-9">
          <div class="bracket-line"></div>
          <div class="bracket-label">1 to 9 Order</div>
        </div>
        <div class="bracket-0">
          <div class="bracket-line"></div>
          <div class="bracket-label">0 End</div>
        </div>
      </div>

      
      <div class="key-row" id="keyRow">
        <button class="key" data-index="0" data-val="1">1</button>
        <button class="key" data-index="1" data-val="2">2</button>
        <button class="key" data-index="2" data-val="3">3</button>
        <button class="key" data-index="3" data-val="4">4</button>
        <button class="key" data-index="4" data-val="5">5</button>
        <button class="key" data-index="5" data-val="6">6</button>
        <button class="key" data-index="6" data-val="7">7</button>
        <button class="key" data-index="7" data-val="8">8</button>
        <button class="key" data-index="8" data-val="9">9</button>
        <button class="key" data-index="9" data-val="0">0</button>
      </div>

      
      <div class="ghost-row">
        <div class="ghost-key">Q</div>
        <div class="ghost-key">W</div>
        <div class="ghost-key">E</div>
        <div class="ghost-key">R</div>
        <div class="ghost-key">T</div>
        <div class="ghost-key">Y</div>
        <div class="ghost-key">U</div>
        <div class="ghost-key">I</div>
        <div class="ghost-key">O</div>
        <div class="ghost-key">P</div>
      </div>
    </div>

    
    <div class="controls">
      <button class="btn" id="prevBtn" aria-label="Previous Key">◀</button>
      <button class="btn btn-primary" id="playBtn">⏸ Pause</button>
      <button class="btn" id="nextBtn" aria-label="Next Key">▶</button>
    </div>

  </div>

  <script>
    const keys = Array.from(document.querySelectorAll('.key'));
    const displayVal = document.getElementById('displayVal');
    const displayTag = document.getElementById('displayTag');
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    let currentIndex = 0;
    let isPlaying = true;
    let timer = null;

    function selectKey(index) {
      currentIndex = (index + keys.length) % keys.length;
      
      keys.forEach((k, i) => {
        k.classList.remove('active-blue', 'active-amber');
        if (i === currentIndex) {
          if (i === 9) {
            k.classList.add('active-amber');
          } else {
            k.classList.add('active-blue');
          }
        }
      });

      const activeKey = keys[currentIndex];
      const val = activeKey.dataset.val;
      displayVal.textContent = val;

      if (currentIndex === 9) {
        displayTag.textContent = '0: Far Right End';
        displayTag.style.color = '#d97706';
        displayTag.style.background = '#fef3c7';
      } else {
        displayTag.textContent = '1 to 9: In Order';
        displayTag.style.color = '#0284c7';
        displayTag.style.background = '#e0f2fe';
      }
    }

    function nextStep() {
      selectKey(currentIndex + 1);
    }

    function prevStep() {
      selectKey(currentIndex - 1);
    }

    function startLoop() {
      stopLoop();
      isPlaying = true;
      playBtn.textContent = '⏸ Pause';
      playBtn.classList.add('btn-primary');
      timer = setInterval(nextStep, 3000);
    }

    function stopLoop() {
      isPlaying = false;
      playBtn.textContent = '▶ Play';
      playBtn.classList.remove('btn-primary');
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    }

    // Key click interactions
    keys.forEach((k, i) => {
      k.addEventListener('click', () => {
        stopLoop();
        selectKey(i);
      });
    });

    // Control buttons
    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopLoop();
      } else {
        nextStep();
        startLoop();
      }
    });

    prevBtn.addEventListener('click', () => {
      stopLoop();
      prevStep();
    });

    nextBtn.addEventListener('click', () => {
      stopLoop();
      nextStep();
    });

    // Initialize
    selectKey(0);
    startLoop();
  </script>
</body>
</html>

How do your fingers reach all the way up there without getting lost?

Your fingers always rest on your **home row** keys (A-S-D-F for your left hand, and J-K-L-; for your right hand).

To type a number, stretch one finger up, tap the key, and snap right back to your home key!

<!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>Number Keys on the Keyboard</title>
<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: center;
    min-height: 100%;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }

  .keyboard-guide {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  /* Status Bar */
  .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    font-size: 13px;
    font-weight: 700;
    color: #1e2945;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    min-height: 32px;
  }
  .status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22b7ff;
    transition: background 0.3s;
  }

  /* Keyboard Container */
  .keyboard {
    background: #f1f5f9;
    padding: 14px 10px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    position: relative;
  }

  .key-row {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
    width: 100%;
  }

  .key-row-home {
    grid-template-columns: repeat(8, 1fr);
    padding: 0 5%;
  }

  .key {
    background: #ffffff;
    border-radius: 8px;
    aspect-ratio: 1 / 1.05;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    color: #334155;
    box-shadow: 0 3px 0 #cbd5e1, 0 4px 6px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.15s;
    border: 2px solid transparent;
    position: relative;
  }

  .key:hover {
    border-color: #94a3b8;
  }

  .key.pressed {
    transform: translateY(3px);
    box-shadow: 0 0 0 #cbd5e1, 0 1px 2px rgba(0,0,0,0.1);
  }

  /* Finger Color Themes */
  .c-pinky-l { --accent: #f43f5e; }
  .c-ring-l  { --accent: #f59e0b; }
  .c-mid-l   { --accent: #10b981; }
  .c-idx-l   { --accent: #22b7ff; }
  .c-idx-r   { --accent: #6366f1; }
  .c-mid-r   { --accent: #10b981; }
  .c-ring-r  { --accent: #f59e0b; }
  .c-pinky-r { --accent: #f43f5e; }

  .key.active-zone {
    border-color: var(--accent);
    color: var(--accent);
    background: #ffffff;
  }

  .key.target-key {
    background: var(--accent) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.2) !important;
  }
  .key.target-key.pressed {
    transform: translateY(3px);
    box-shadow: 0 0 0 transparent !important;
  }

  .key.home-anchor {
    background: #f8fafc;
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1.5px var(--accent), 0 3px 0 #cbd5e1;
  }

  .row-label {
    position: absolute;
    right: 8px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    pointer-events: none;
  }
  .label-num { top: 3px; }
  .label-home { bottom: 3px; }

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

  .ctrl-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #1e2945;
    cursor: pointer;
    box-shadow: 0 2px 0 #cbd5e1;
    transition: background 0.15s, transform 0.1s, box-shadow 0.1s;
  }
  .ctrl-btn:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 transparent;
  }
  .ctrl-btn.primary {
    background: #22b7ff;
    border-color: #0284c7;
    color: #ffffff;
    box-shadow: 0 2px 0 #0284c7;
  }

  /* Motion Arrow Canvas Overlay */
  .motion-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
  }

  .stretch-path {
    stroke-dasharray: 4 4;
    stroke-linecap: round;
    animation: dash 1s linear infinite;
  }

  @keyframes dash {
    to { stroke-dashoffset: -8; }
  }
</style>
</head>
<body>

<div class="keyboard-guide">
  
  <div class="status-badge" id="statusBar">
    <span class="status-indicator" id="statusDot"></span>
    <span id="statusText">Select a Key</span>
  </div>

  
  <div class="keyboard" id="keyboardContainer">
    <span class="row-label label-num">Number Row</span>
    <span class="row-label label-home">Home Row</span>

    <svg class="motion-svg" id="motionSvg">
      <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1 L 8 5 L 0 9 z" fill="#22b7ff" id="arrowPath" />
        </marker>
      </defs>
      <path id="guidePath" d="" fill="none" stroke="#22b7ff" stroke-width="2.5" marker-end="url(#arrow)" class="stretch-path" />
    </svg>

    
    <div class="key-row" id="numRow">
      <button class="key c-pinky-l" data-key="1" data-home="A" data-color="#f43f5e">1</button>
      <button class="key c-ring-l"  data-key="2" data-home="S" data-color="#f59e0b">2</button>
      <button class="key c-mid-l"   data-key="3" data-home="D" data-color="#10b981">3</button>
      <button class="key c-idx-l"   data-key="4" data-home="F" data-color="#22b7ff">4</button>
      <button class="key c-idx-l"   data-key="5" data-home="F" data-color="#22b7ff">5</button>
      <button class="key c-idx-r"   data-key="6" data-home="J" data-color="#6366f1">6</button>
      <button class="key c-idx-r"   data-key="7" data-home="J" data-color="#6366f1">7</button>
      <button class="key c-mid-r"   data-key="8" data-home="K" data-color="#10b981">8</button>
      <button class="key c-ring-r"  data-key="9" data-home="L" data-color="#f59e0b">9</button>
      <button class="key c-pinky-r" data-key="0" data-home=";" data-color="#f43f5e">0</button>
    </div>

    
    <div class="key-row key-row-home" id="homeRow">
      <button class="key c-pinky-l" data-key="A" data-color="#f43f5e">A</button>
      <button class="key c-ring-l"  data-key="S" data-color="#f59e0b">S</button>
      <button class="key c-mid-l"   data-key="D" data-color="#10b981">D</button>
      <button class="key c-idx-l"   data-key="F" data-color="#22b7ff">F</button>
      <button class="key c-idx-r"   data-key="J" data-color="#6366f1">J</button>
      <button class="key c-mid-r"   data-key="K" data-color="#10b981">K</button>
      <button class="key c-ring-r"  data-key="L" data-color="#f59e0b">L</button>
      <button class="key c-pinky-r" data-key=";" data-color="#f43f5e">;</button>
    </div>
  </div>

  
  <div class="controls">
    <button class="ctrl-btn" id="prevBtn">◀</button>
    <button class="ctrl-btn primary" id="autoBtn">▶ Auto</button>
    <button class="ctrl-btn" id="nextBtn">▶</button>
  </div>
</div>

<script>
  const numKeys = Array.from(document.querySelectorAll('#numRow .key'));
  const homeKeys = Array.from(document.querySelectorAll('#homeRow .key'));
  const statusBar = document.getElementById('statusBar');
  const statusDot = document.getElementById('statusDot');
  const statusText = document.getElementById('statusText');
  const guidePath = document.getElementById('guidePath');
  const arrowPath = document.getElementById('arrowPath');
  const keyboard = document.getElementById('keyboardContainer');
  const autoBtn = document.getElementById('autoBtn');
  const prevBtn = document.getElementById('prevBtn');
  const nextBtn = document.getElementById('nextBtn');

  let currentIndex = 0;
  let animTimer = null;
  let autoPlayInterval = null;
  let isAutoPlaying = false;

  function getCenter(element, container) {
    const rEl = element.getBoundingClientRect();
    const rCon = container.getBoundingClientRect();
    return {
      x: rEl.left - rCon.left + rEl.width / 2,
      y: rEl.top - rCon.top + rEl.height / 2
    };
  }

  function updatePath(homeEl, targetEl, color, reverse = false) {
    const pHome = getCenter(homeEl, keyboard);
    const pTarget = getCenter(targetEl, keyboard);

    const from = reverse ? pTarget : pHome;
    const to = reverse ? pHome : pTarget;

    const dx = to.x - from.x;
    const dy = to.y - from.y;
    const cx = from.x + dx * 0.5 + (reverse ? 8 : -8);
    const cy = from.y + dy * 0.5;

    guidePath.setAttribute('d', `M ${from.x} ${from.y} Q ${cx} ${cy} ${to.x} ${to.y}`);
    guidePath.setAttribute('stroke', color);
    arrowPath.setAttribute('fill', color);
    guidePath.style.display = 'block';
  }

  function runStretchAnimation(index) {
    if (animTimer) clearTimeout(animTimer);

    // Reset styles
    numKeys.forEach(k => k.className = k.className.replace(/\b(target-key|active-zone|pressed)\b/g, '').trim());
    homeKeys.forEach(k => k.className = k.className.replace(/\b(home-anchor|active-zone|pressed)\b/g, '').trim());

    const numEl = numKeys[index];
    const homeKeyChar = numEl.dataset.home;
    const homeEl = homeKeys.find(k => k.dataset.key === homeKeyChar);
    const color = numEl.dataset.color;

    homeEl.classList.add('home-anchor');
    statusDot.style.background = color;

    // Stage 1: Stretch Up
    statusText.textContent = `1. Stretch ↑ (${homeKeyChar} → ${numEl.dataset.key})`;
    updatePath(homeEl, numEl, color, false);

    animTimer = setTimeout(() => {
      // Stage 2: Tap
      statusText.textContent = `2. Tap ${numEl.dataset.key}`;
      numEl.classList.add('target-key', 'pressed');

      animTimer = setTimeout(() => {
        numEl.classList.remove('pressed');
        
        // Stage 3: Snap Back
        statusText.textContent = `3. Snap Back ↓ (${homeKeyChar})`;
        updatePath(homeEl, numEl, color, true);

        animTimer = setTimeout(() => {
          homeEl.classList.add('pressed');
          animTimer = setTimeout(() => {
            homeEl.classList.remove('pressed');
            guidePath.style.display = 'none';
          }, 350);
        }, 450);

      }, 400);
    }, 450);
  }

  function selectKey(index) {
    currentIndex = (index + numKeys.length) % numKeys.length;
    runStretchAnimation(currentIndex);
  }

  // Click key handlers
  numKeys.forEach((k, idx) => {
    k.addEventListener('click', () => {
      stopAutoPlay();
      selectKey(idx);
    });
  });

  homeKeys.forEach((k) => {
    k.addEventListener('click', () => {
      stopAutoPlay();
      const matchIdx = numKeys.findIndex(n => n.dataset.home === k.dataset.key);
      if (matchIdx !== -1) selectKey(matchIdx);
    });
  });

  // Controls
  prevBtn.addEventListener('click', () => {
    stopAutoPlay();
    selectKey(currentIndex - 1);
  });

  nextBtn.addEventListener('click', () => {
    stopAutoPlay();
    selectKey(currentIndex + 1);
  });

  function startAutoPlay() {
    isAutoPlaying = true;
    autoBtn.textContent = '⏸ Pause';
    autoPlayInterval = setInterval(() => {
      selectKey(currentIndex + 1);
    }, 3200);
  }

  function stopAutoPlay() {
    isAutoPlaying = false;
    autoBtn.textContent = '▶ Auto';
    if (autoPlayInterval) clearInterval(autoPlayInterval);
  }

  autoBtn.addEventListener('click', () => {
    if (isAutoPlaying) {
      stopAutoPlay();
    } else {
      selectKey(currentIndex);
      startAutoPlay();
    }
  });

  // Window resize path recalculation
  window.addEventListener('resize', () => {
    const numEl = numKeys[currentIndex];
    const homeEl = homeKeys.find(k => k.dataset.key === numEl.dataset.home);
    updatePath(homeEl, numEl, numEl.dataset.color);
  });

  // Initial demonstration
  selectKey(3); // Start with '4' from 'F'
</script>

</body>
</html>

Which finger is in charge of each number?

Here is how your left hand divides the numbers: your **Left Pinky** types 1, your **Left Ring** finger types 2, your **Left Middle** finger types 3, and your **Left Index** finger covers both 4 and 5.

For your right hand, your **Right Index** reaches for 6 and 7, your **Right Middle** finger types 8, your **Right Ring** finger types 9, and your **Right Pinky** taps 0.

<!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: center;
      min-height: 100vh;
      padding: 12px;
      user-select: none;
      -webkit-user-select: none;
    }

    .main-container {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
    }

    /* Keyboard Reach Area */
    .keyboard-card {
      width: 100%;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 14px;
      padding: 16px 14px 14px 14px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .key-row {
      display: flex;
      justify-content: center;
      gap: 8px;
      width: 100%;
    }

    .key {
      flex: 1;
      max-width: 58px;
      height: 52px;
      background: #f1f5f9;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 18px;
      color: #475569;
      cursor: pointer;
      transition: all 0.25s ease;
      position: relative;
    }

    .key .sub {
      font-size: 10px;
      font-weight: 600;
      color: #94a3b8;
      margin-top: 1px;
    }

    /* Color Themes per Finger */
    /* Index (6, 7 -> J): #2563eb */
    .c-index { --c-main: #2563eb; --c-bg: #eff6ff; --c-border: #93c5fd; }
    /* Middle (8 -> K): #059669 */
    .c-middle { --c-main: #059669; --c-bg: #ecfdf5; --c-border: #6ee7b7; }
    /* Ring (9 -> L): #d97706 */
    .c-ring { --c-main: #d97706; --c-bg: #fffbeb; --c-border: #fcd34d; }
    /* Pinky (0 -> ;): #7c3aed */
    .c-pinky { --c-main: #7c3aed; --c-bg: #f5f3ff; --c-border: #c4b5fd; }

    .key.active {
      background: var(--c-bg);
      border-color: var(--c-main);
      color: var(--c-main);
      box-shadow: 0 0 0 2px var(--c-border);
      transform: translateY(-2px);
    }
    .key.active .sub {
      color: var(--c-main);
    }

    /* Visual SVG Reach Connectors */
    .reach-svg {
      width: 100%;
      height: 38px;
      overflow: visible;
    }

    .reach-path {
      stroke: #cbd5e1;
      stroke-width: 2.5;
      stroke-dasharray: 4 4;
      fill: none;
      transition: stroke 0.25s ease, stroke-width 0.25s ease;
    }

    .reach-path.active {
      stroke: var(--c-main);
      stroke-width: 3.5;
      stroke-dasharray: none;
    }

    /* Finger Selection Buttons */
    .fingers-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
    }

    .finger-btn {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
    }

    .finger-btn .name {
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
    }

    .finger-btn .target {
      font-size: 15px;
      font-weight: 800;
      color: #1e2945;
    }

    .finger-btn.active {
      border-color: var(--c-main);
      background: var(--c-bg);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .finger-btn.active .name,
    .finger-btn.active .target {
      color: var(--c-main);
    }

    /* Header Tag */
    .status-bar {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #2563eb;
    }
  </style>
</head>
<body>

<div class="main-container">
  <div class="status-bar">
    <span class="status-dot" id="statusDot"></span>
    <span id="statusText">Right Hand Reach</span>
  </div>

  
  <div class="keyboard-card">
    
    <div class="key-row">
      <div class="key c-index" id="k6" data-finger="0">6</div>
      <div class="key c-index" id="k7" data-finger="0">7</div>
      <div class="key c-middle" id="k8" data-finger="1">8</div>
      <div class="key c-ring" id="k9" data-finger="2">9</div>
      <div class="key c-pinky" id="k0" data-finger="3">0</div>
    </div>

    
    <svg class="reach-svg" viewBox="0 0 290 38">
      
      <path id="p6" class="reach-path c-index" d="M 28 2 Q 40 20 62 36" />
      
      <path id="p7" class="reach-path c-index" d="M 86 2 L 62 36" />
      
      <path id="p8" class="reach-path c-middle" d="M 145 2 L 145 36" />
      
      <path id="p9" class="reach-path c-ring" d="M 203 2 L 203 36" />
      
      <path id="p0" class="reach-path c-pinky" d="M 262 2 L 262 36" />
    </svg>

    
    <div class="key-row">
      <div class="key c-index" id="kJ" data-finger="0" style="max-width: 122px; flex: 2.1;">
        J <span class="sub">Home</span>
      </div>
      <div class="key c-middle" id="kK" data-finger="1">
        K <span class="sub">Home</span>
      </div>
      <div class="key c-ring" id="kL" data-finger="2">
        L <span class="sub">Home</span>
      </div>
      <div class="key c-pinky" id="kSemi" data-finger="3">
        ; <span class="sub">Home</span>
      </div>
    </div>
  </div>

  
  <div class="fingers-row">
    <button class="finger-btn c-index" data-finger="0">
      <span class="name">Index</span>
      <span class="target">6 &amp; 7</span>
    </button>
    <button class="finger-btn c-middle" data-finger="1">
      <span class="name">Middle</span>
      <span class="target">8</span>
    </button>
    <button class="finger-btn c-ring" data-finger="2">
      <span class="name">Ring</span>
      <span class="target">9</span>
    </button>
    <button class="finger-btn c-pinky" data-finger="3">
      <span class="name">Pinky</span>
      <span class="target">0</span>
    </button>
  </div>
</div>

<script>
  const fingerData = [
    { name: 'Index Finger', color: '#2563eb', keys: ['k6', 'k7', 'kJ'], paths: ['p6', 'p7'] },
    { name: 'Middle Finger', color: '#059669', keys: ['k8', 'kK'], paths: ['p8'] },
    { name: 'Ring Finger', color: '#d97706', keys: ['k9', 'kL'], paths: ['p9'] },
    { name: 'Pinky Finger', color: '#7c3aed', keys: ['k0', 'kSemi'], paths: ['p0'] }
  ];

  let currentIdx = 0;
  let timer = null;

  const allKeys = document.querySelectorAll('.key');
  const allPaths = document.querySelectorAll('.reach-path');
  const fingerBtns = document.querySelectorAll('.finger-btn');
  const statusDot = document.getElementById('statusDot');
  const statusText = document.getElementById('statusText');

  function setFinger(idx) {
    currentIdx = idx;
    const data = fingerData[idx];

    // Reset classes
    allKeys.forEach(k => k.classList.remove('active'));
    allPaths.forEach(p => p.classList.remove('active'));
    fingerBtns.forEach(b => b.classList.remove('active'));

    // Activate current
    data.keys.forEach(id => {
      const el = document.getElementById(id);
      if (el) el.classList.add('active');
    });

    data.paths.forEach(id => {
      const el = document.getElementById(id);
      if (el) el.classList.add('active');
    });

    fingerBtns[idx].classList.add('active');
    statusDot.style.background = data.color;
    statusText.textContent = data.name + ' Reach';
  }

  function startAutoCycle() {
    stopAutoCycle();
    timer = setInterval(() => {
      setFinger((currentIdx + 1) % fingerData.length);
    }, 3200);
  }

  function stopAutoCycle() {
    if (timer) clearInterval(timer);
  }

  // Interactivity
  fingerBtns.forEach((btn, idx) => {
    btn.addEventListener('click', () => {
      stopAutoCycle();
      setFinger(idx);
      startAutoCycle();
    });
  });

  allKeys.forEach(key => {
    key.addEventListener('click', () => {
      const fIdx = parseInt(key.getAttribute('data-finger'), 10);
      if (!isNaN(fIdx)) {
        stopAutoCycle();
        setFinger(fIdx);
        startAutoCycle();
      }
    });
  });

  // Initial State
  setFinger(0);
  startAutoCycle();
</script>

</body>
</html>

A common mistake is lifting your whole hand off the keyboard to hunt for a number.

Keep your other fingers anchored on the home row so your hands always know where they are!

technology

Number Keys on the Keyboard. Locate and practice pressing the number keys 0 through 9 on the top row of the keyboard.

Typing Jungle & Grade 2 Keyboarding: Introduction to the Top Number Row

Dance Mat Typing: Keyboarding Skills, Top Row Reaches & Number Basics

TEKS Practical Technology Concepts: TA.2.10.E Keyboard Exploration and Special Characters

For second-grade learners, building familiarity with the top number row requires bridging concrete math concepts (counting, digit identification) with fine motor muscle memory. Effective instruction begins with tactile exploration of the physical keyboard, using tactile dots/stickers or color cues to reinforce that $0$ sits after $9$. Emphasize the 'reach-and-return' movement pattern so students maintain their home row orientation without reverting to index-finger-only hunting and pecking.

Work through this lesson with your tutor.

Number Keys on the Keyboard

The Number Row

Reaching from Home Base

Left Hand and Right Hand