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 hiding a gold coin on a giant checkered game board. How could you tell your best friend the exact square to find it?

We use a **grid**, which is a flat surface made of lines that cross to make square spaces.

Every spot on the grid has a special address called an **ordered pair**, written inside curved brackets like **$(x, y)$**.

<!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="1:1">
  <title>Ordered Pairs (x, y)</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      min-height: 100%;
    }
    .display-box {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 26px;
      font-weight: 800;
      padding: 6px 18px;
      border-radius: 999px;
      background: #f1f5f9;
    }
    .val-x {
      color: #0284c7;
      transition: transform 0.2s ease;
    }
    .val-y {
      color: #ea580c;
      transition: transform 0.2s ease;
    }
    .grid-container {
      width: 100%;
      max-width: 320px;
      aspect-ratio: 1;
      position: relative;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .axis-line {
      stroke: #1e2945;
      stroke-width: 2.5;
      stroke-linecap: round;
    }
    .grid-line {
      stroke: #e2e8f0;
      stroke-width: 1.5;
    }
    .axis-label {
      font-size: 13px;
      font-weight: 700;
      fill: #64748b;
      text-anchor: middle;
      dominant-baseline: central;
    }
    .title-axis-x {
      font-size: 14px;
      font-weight: 800;
      fill: #0284c7;
    }
    .title-axis-y {
      font-size: 14px;
      font-weight: 800;
      fill: #ea580c;
    }
    .path-x {
      stroke: #0284c7;
      stroke-width: 4;
      stroke-linecap: round;
      transition: x2 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .path-y {
      stroke: #ea580c;
      stroke-width: 4;
      stroke-linecap: round;
      stroke-dasharray: 4 4;
      transition: x1 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                  x2 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                  y2 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .target-point {
      fill: #1e2945;
      stroke: #ffffff;
      stroke-width: 3;
      transition: cx 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                  cy 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .click-target {
      fill: transparent;
      cursor: pointer;
    }
    .click-target:hover + .hover-dot {
      opacity: 0.4;
    }
    .hover-dot {
      fill: #94a3b8;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s;
    }
    .btn-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      max-width: 340px;
    }
    .btn-coord {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 14px;
      font-weight: 700;
      color: #334155;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 2px;
      transition: background 0.15s, border-color 0.15s;
    }
    .btn-coord.active {
      background: #f8fafc;
      border-color: #1e2945;
      box-shadow: 0 0 0 1px #1e2945;
    }
  </style>
</head>
<body>

  
  <div class="display-box">
    <span>(</span>
    <span id="labelX" class="val-x">3</span>
    <span>,</span>
    <span id="labelY" class="val-y">2</span>
    <span>)</span>
  </div>

  
  <div class="grid-container">
    <svg viewBox="-30 -15 310 295" id="gridSvg">
      
      <g id="gridLines"></g>

      
      <line id="lineX" class="path-x" x1="0" y1="240" x2="144" y2="240" />
      <line id="lineY" class="path-y" x1="144" y1="240" x2="144" y2="144" />

      
      <line class="axis-line" x1="0" y1="240" x2="255" y2="240" />
      <line class="axis-line" x1="0" y1="240" x2="0" y2="-5" />

      
      <polygon points="255,236 263,240 255,244" fill="#1e2945" />
      <polygon points="-4,-5 0,-13 4,-5" fill="#1e2945" />

      
      <text class="title-axis-x" x="268" y="244">x</text>
      <text class="title-axis-y" x="0" y="-20" text-anchor="middle">y</text>

      
      <g id="axisTicks"></g>

      
      <g id="clickPoints"></g>

      
      <circle id="point" class="target-point" cx="144" cy="144" r="7" />
    </svg>
  </div>

  
  <div class="btn-row" id="btnGroup">
    <button class="btn-coord active" onclick="setCoords(3, 2)">
      (<span style="color:#0284c7">3</span>, <span style="color:#ea580c">2</span>)
    </button>
    <button class="btn-coord" onclick="setCoords(1, 4)">
      (<span style="color:#0284c7">1</span>, <span style="color:#ea580c">4</span>)
    </button>
    <button class="btn-coord" onclick="setCoords(4, 1)">
      (<span style="color:#0284c7">4</span>, <span style="color:#ea580c">1</span>)
    </button>
    <button class="btn-coord" onclick="setCoords(5, 5)">
      (<span style="color:#0284c7">5</span>, <span style="color:#ea580c">5</span>)
    </button>
  </div>

  <script>
    const STEP = 48;
    const ORIGIN_X = 0;
    const ORIGIN_Y = 240;
    const MAX_GRID = 5;

    const gridLines = document.getElementById('gridLines');
    const axisTicks = document.getElementById('axisTicks');
    const clickPoints = document.getElementById('clickPoints');

    // Build static 5x5 grid elements
    for (let i = 0; i <= MAX_GRID; i++) {
      const pos = i * STEP;

      // Grid lines
      if (i > 0) {
        gridLines.innerHTML += `
          <line class="grid-line" x1="${pos}" y1="0" x2="${pos}" y2="240" />
          <line class="grid-line" x1="0" y1="${ORIGIN_Y - pos}" x2="240" y2="${ORIGIN_Y - pos}" />
        `;
      }

      // Tick numbers
      axisTicks.innerHTML += `
        <text class="axis-label" x="${pos}" y="258">${i}</text>
        ${i > 0 ? `<text class="axis-label" x="-14" y="${ORIGIN_Y - pos}">${i}</text>` : ''}
      `;

      // Clickable nodes
      for (let j = 0; j <= MAX_GRID; j++) {
        const cx = i * STEP;
        const cy = ORIGIN_Y - (j * STEP);
        clickPoints.innerHTML += `
          <circle class="hover-dot" cx="${cx}" cy="${cy}" r="4" />
          <circle class="click-target" cx="${cx}" cy="${cy}" r="18" onclick="setCoords(${i}, ${j})" />
        `;
      }
    }

    function setCoords(x, y) {
      const targetPxX = x * STEP;
      const targetPxY = ORIGIN_Y - (y * STEP);

      // Animate lines and point
      const lineX = document.getElementById('lineX');
      const lineY = document.getElementById('lineY');
      const point = document.getElementById('point');

      lineX.setAttribute('x2', targetPxX);
      lineY.setAttribute('x1', targetPxX);
      lineY.setAttribute('x2', targetPxX);
      lineY.setAttribute('y2', targetPxY);

      point.setAttribute('cx', targetPxX);
      point.setAttribute('cy', targetPxY);

      // Update text
      document.getElementById('labelX').textContent = x;
      document.getElementById('labelY').textContent = y;

      // Update pill active states
      const buttons = document.querySelectorAll('.btn-coord');
      buttons.forEach(btn => {
        const matches = btn.textContent.includes(`(${x}`) && btn.textContent.includes(`${y})`);
        btn.classList.toggle('active', matches);
      });
    }
  </script>
</body>
</html>

Why do the two numbers always have to be in this exact order?

Long ago, a thinker named René Descartes watched a fly crawl on his ceiling tiles and realized he could pinpoint its spot with just two numbers.

We always follow one golden rule: **$x$ comes first** (walk across), and **$y$ comes second** (jump up), just like the letters in the alphabet!

<!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="1:1">
  <title>Grid Coordinates (x, y)</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: 100vh;
      padding: 12px;
      user-select: none;
    }

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

    /* Coordinate Formula Display */
    .coord-banner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 20px;
      font-weight: 700;
      background: #ffffff;
      padding: 6px 16px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    .val-x { color: #ff9f1c; transition: all 0.3s ease; }
    .val-y { color: #22b7ff; transition: all 0.3s ease; }
    .val-x.active { text-decoration: underline 3px #ff9f1c; transform: scale(1.1); display: inline-block; }
    .val-y.active { text-decoration: underline 3px #22b7ff; transform: scale(1.1); display: inline-block; }

    /* SVG Grid Area */
    .grid-wrapper {
      position: relative;
      width: 100%;
      background: #ffffff;
      border-radius: 16px;
      padding: 12px;
      box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    .grid-line { stroke: #e9ecef; stroke-width: 1.5; }
    .axis-line { stroke: #1e2945; stroke-width: 2.5; stroke-linecap: round; }
    .axis-label { font-size: 13px; fill: #6b7280; font-weight: 600; text-anchor: middle; dominant-baseline: middle; }
    .axis-title { font-size: 14px; font-weight: 800; }
    
    /* Dynamic Paths & Markers */
    .path-x {
      stroke: #ff9f1c;
      stroke-width: 4;
      stroke-linecap: round;
      stroke-dasharray: 200;
      stroke-dashoffset: 200;
      transition: stroke-dashoffset 0.6s ease;
    }
    .path-y {
      stroke: #22b7ff;
      stroke-width: 4;
      stroke-linecap: round;
      stroke-dasharray: 200;
      stroke-dashoffset: 200;
      transition: stroke-dashoffset 0.6s ease;
    }

    .point-dot {
      fill: #1e2945;
      transition: cx 0.5s ease, cy 0.5s ease, fill 0.3s ease, r 0.3s ease;
    }

    .target-box {
      opacity: 0;
      transition: opacity 0.4s ease, transform 0.4s ease;
      transform-origin: center;
    }
    .target-box.visible {
      opacity: 1;
    }

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

    .step-btn {
      flex: 1;
      padding: 8px 6px;
      border: 2px solid #e5e7eb;
      background: #ffffff;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 700;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.25s ease;
    }

    .step-btn.active {
      border-color: #1e2945;
      background: #1e2945;
      color: #ffffff;
    }
    .step-btn.step-x.active {
      border-color: #ff9f1c;
      background: #ff9f1c;
      color: #ffffff;
    }
    .step-btn.step-y.active {
      border-color: #22b7ff;
      background: #22b7ff;
      color: #ffffff;
    }
    .step-btn.step-end.active {
      border-color: #10b981;
      background: #10b981;
      color: #ffffff;
    }

    .play-btn {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      border: 2px solid #e5e7eb;
      background: #ffffff;
      color: #1e2945;
      font-size: 14px;
      font-weight: bold;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }
    .play-btn:hover { background: #f3f4f6; }
  </style>
</head>
<body>

<div class="container">
  
  <div class="coord-banner">
    <span>(</span>
    <span id="labelX" class="val-x">4</span>
    <span>,</span>
    <span id="labelY" class="val-y">3</span>
    <span>)</span>
  </div>

  
  <div class="grid-wrapper">
    <svg viewBox="-35 -15 320 315" id="gridSvg">
      <defs>
        
        <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#1e2945" />
        </marker>
        <marker id="arrow-x" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
          <path d="M 0 2 L 6 5 L 0 8 z" fill="#ff9f1c" />
        </marker>
        <marker id="arrow-y" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
          <path d="M 0 2 L 6 5 L 0 8 z" fill="#22b7ff" />
        </marker>
      </defs>

      
      
      <g id="gridLines">
        
        <line x1="50" y1="0" x2="50" y2="250" class="grid-line" />
        <line x1="100" y1="0" x2="100" y2="250" class="grid-line" />
        <line x1="150" y1="0" x2="150" y2="250" class="grid-line" />
        <line x1="200" y1="0" x2="200" y2="250" class="grid-line" />
        <line x1="250" y1="0" x2="250" y2="250" class="grid-line" />
        
        
        <line x1="0" y1="200" x2="250" y2="200" class="grid-line" />
        <line x1="0" y1="150" x2="250" y2="150" class="grid-line" />
        <line x1="0" y1="100" x2="250" y2="100" class="grid-line" />
        <line x1="0" y1="50" x2="250" y2="50" class="grid-line" />
        <line x1="0" y1="0" x2="250" y2="0" class="grid-line" />
      </g>

      
      <line x1="0" y1="250" x2="265" y2="250" class="axis-line" marker-end="url(#arrow)" />
      <line x1="0" y1="250" x2="0" y2="-10" class="axis-line" marker-end="url(#arrow)" />

      
      <text x="272" y="250" class="axis-title" fill="#ff9f1c" text-anchor="start" dominant-baseline="middle">x</text>
      <text x="0" y="-14" class="axis-title" fill="#22b7ff" text-anchor="middle">y</text>

      
      
      <text x="-10" y="262" class="axis-label">0</text>

      
      <text x="50" y="265" class="axis-label">1</text>
      <text x="100" y="265" class="axis-label">2</text>
      <text x="150" y="265" class="axis-label">3</text>
      <text x="200" y="265" class="axis-label" font-weight="800" fill="#ff9f1c">4</text>
      <text x="250" y="265" class="axis-label">5</text>

      
      <text x="-12" y="200" class="axis-label">1</text>
      <text x="-12" y="150" class="axis-label">2</text>
      <text x="-12" y="100" class="axis-label" font-weight="800" fill="#22b7ff">3</text>
      <text x="-12" y="50" class="axis-label">4</text>
      <text x="-12" y="0" class="axis-label">5</text>

      
      <line id="pathX" x1="0" y1="250" x2="200" y2="250" class="path-x" marker-end="url(#arrow-x)" />
      <line id="pathY" x1="200" y1="250" x2="200" y2="100" class="path-y" marker-end="url(#arrow-y)" />

      
      <g id="targetGroup" class="target-box">
        <circle cx="200" cy="100" r="16" fill="#10b981" fill-opacity="0.2" />
        <circle cx="200" cy="100" r="6" fill="#10b981" />
        <text x="200" y="80" text-anchor="middle" font-size="13" font-weight="800" fill="#10b981">(4, 3) 💎</text>
      </g>

      
      <circle id="point" class="point-dot" cx="0" cy="250" r="7" />
    </svg>
  </div>

  
  <div class="controls">
    <button class="play-btn" id="playBtn" title="Play/Pause">▶</button>
    <button class="step-btn active" id="btn0" onclick="setStep(0)">1. (0,0)</button>
    <button class="step-btn step-x" id="btn1" onclick="setStep(1)">2. Across 4 →</button>
    <button class="step-btn step-y" id="btn2" onclick="setStep(2)">3. Up 3 ↑</button>
    <button class="step-btn step-end" id="btn3" onclick="setStep(3)">4. (4,3) ✦</button>
  </div>
</div>

<script>
  let currentStep = 0;
  let timer = null;
  let isPlaying = false;

  const point = document.getElementById('point');
  const pathX = document.getElementById('pathX');
  const pathY = document.getElementById('pathY');
  const targetGroup = document.getElementById('targetGroup');
  const labelX = document.getElementById('labelX');
  const labelY = document.getElementById('labelY');
  const playBtn = document.getElementById('playBtn');
  const buttons = [
    document.getElementById('btn0'),
    document.getElementById('btn1'),
    document.getElementById('btn2'),
    document.getElementById('btn3')
  ];

  function setStep(step) {
    currentStep = step;

    // Reset button states
    buttons.forEach((btn, idx) => {
      btn.classList.toggle('active', idx === step);
    });

    // Reset banner active states
    labelX.classList.remove('active');
    labelY.classList.remove('active');

    if (step === 0) {
      // Start: Origin (0,0)
      pathX.style.strokeDashoffset = '200';
      pathY.style.strokeDashoffset = '200';
      targetGroup.classList.remove('visible');
      point.setAttribute('cx', 0);
      point.setAttribute('cy', 250);
      point.setAttribute('fill', '#1e2945');
      point.setAttribute('r', 7);
    } else if (step === 1) {
      // Step 1: Walk across X (4)
      labelX.classList.add('active');
      pathX.style.strokeDashoffset = '0';
      pathY.style.strokeDashoffset = '200';
      targetGroup.classList.remove('visible');
      point.setAttribute('cx', 200);
      point.setAttribute('cy', 250);
      point.setAttribute('fill', '#ff9f1c');
      point.setAttribute('r', 8);
    } else if (step === 2) {
      // Step 2: Jump up Y (3)
      labelX.classList.remove('active');
      labelY.classList.add('active');
      pathX.style.strokeDashoffset = '0';
      pathY.style.strokeDashoffset = '0';
      targetGroup.classList.remove('visible');
      point.setAttribute('cx', 200);
      point.setAttribute('cy', 100);
      point.setAttribute('fill', '#22b7ff');
      point.setAttribute('r', 8);
    } else if (step === 3) {
      // Step 3: Arrived at target (4,3)
      labelX.classList.add('active');
      labelY.classList.add('active');
      pathX.style.strokeDashoffset = '0';
      pathY.style.strokeDashoffset = '0';
      targetGroup.classList.add('visible');
      point.setAttribute('cx', 200);
      point.setAttribute('cy', 100);
      point.setAttribute('fill', '#10b981');
      point.setAttribute('r', 7);
    }
  }

  function togglePlay() {
    isPlaying = !isPlaying;
    playBtn.textContent = isPlaying ? '⏸' : '▶';
    if (isPlaying) {
      nextStepLoop();
    } else {
      clearTimeout(timer);
    }
  }

  function nextStepLoop() {
    if (!isPlaying) return;
    currentStep = (currentStep + 1) % 4;
    setStep(currentStep);
    timer = setTimeout(nextStepLoop, 3000);
  }

  playBtn.addEventListener('click', togglePlay);

  // Initialize
  setStep(0);
</script>

</body>
</html>

How do we use this rule to find a hidden treasure at $(4, 3)$?

Start with your finger at zero. The first number in **$(4, 3)$** tells you to slide right 4 spaces along the ground.

From that exact spot on 4, the second number tells you to climb straight up 3 spaces.

<!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="1:1">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 8px;
    }
    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
      z-index: 2;
    }
    button {
      padding: 6px 14px;
      font-size: 15px;
      font-weight: 600;
      border-radius: 8px;
      border: 1.5px solid #e2e8f0;
      background: #ffffff;
      color: #1e2945;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    button.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.3);
    }
    .stage {
      width: 100%;
      max-width: 380px;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
    }
    .grid-line { stroke: #e5e7eb; stroke-width: 1.5; }
    .axis { stroke: #1e2945; stroke-width: 2.5; stroke-linecap: round; }
    .axis-label { font-size: 14px; font-weight: 700; fill: #1e2945; text-anchor: middle; dominant-baseline: middle; }
    .num-label { font-size: 13px; font-weight: 600; fill: #6b7280; text-anchor: middle; dominant-baseline: middle; }
    
    .path-x {
      stroke: #22b7ff;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-dasharray: 300;
      stroke-dashoffset: 300;
      transition: stroke-dashoffset 0.6s ease;
    }
    .path-y {
      stroke: #ff9f1c;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-dasharray: 300;
      stroke-dashoffset: 300;
      transition: stroke-dashoffset 0.6s ease 0.5s;
    }
    .point-dot {
      fill: #1e2945;
      stroke: #ffffff;
      stroke-width: 2.5;
      opacity: 0;
      transform: scale(0);
      transform-origin: center;
      transition: all 0.3s ease 1s;
    }
    .target-label {
      font-size: 14px;
      font-weight: 700;
      opacity: 0;
      transition: opacity 0.3s ease 1.1s;
    }
    .revealed .path-x { stroke-dashoffset: 0; }
    .revealed .path-y { stroke-dashoffset: 0; }
    .revealed .point-dot { opacity: 1; transform: scale(1); }
    .revealed .target-label { opacity: 1; }
  </style>
</head>
<body>
  <div class="controls">
    <button id="btn43" class="active" onclick="showPoint(4, 3)">(4, 3)</button>
    <button id="btn34" onclick="showPoint(3, 4)">(3, 4)</button>
  </div>

  <div class="stage">
    <svg viewBox="0 0 320 320" id="gridSvg">
      
      <g>
        
        <line class="grid-line" x1="95" y1="25" x2="95" y2="275" />
        <line class="grid-line" x1="145" y1="25" x2="145" y2="275" />
        <line class="grid-line" x1="195" y1="25" x2="195" y2="275" />
        <line class="grid-line" x1="245" y1="25" x2="245" y2="275" />
        <line class="grid-line" x1="295" y1="25" x2="295" y2="275" />
        
        <line class="grid-line" x1="45" y1="225" x2="295" y2="225" />
        <line class="grid-line" x1="45" y1="175" x2="295" y2="175" />
        <line class="grid-line" x1="45" y1="125" x2="295" y2="125" />
        <line class="grid-line" x1="45" y1="75" x2="295" y2="75" />
        <line class="grid-line" x1="45" y1="25" x2="295" y2="25" />
      </g>

      
      <line class="axis" x1="45" y1="275" x2="305" y2="275" />
      <line class="axis" x1="45" y1="275" x2="45" y2="15" />

      
      <text class="axis-label" x="312" y="275">x</text>
      <text class="axis-label" x="45" y="8">y</text>

      
      
      <text class="num-label" x="33" y="287">0</text>
      
      <text class="num-label" x="95" y="292">1</text>
      <text class="num-label" x="145" y="292">2</text>
      <text class="num-label" x="195" y="292">3</text>
      <text class="num-label" x="245" y="292">4</text>
      <text class="num-label" x="295" y="292">5</text>
      
      <text class="num-label" x="30" y="225">1</text>
      <text class="num-label" x="30" y="175">2</text>
      <text class="num-label" x="30" y="125">3</text>
      <text class="num-label" x="30" y="75">4</text>
      <text class="num-label" x="30" y="25">5</text>

      
      <g id="plotGroup" class="revealed">
        <line id="pathX" class="path-x" x1="45" y1="275" x2="245" y2="275" />
        <line id="pathY" class="path-y" x1="245" y1="275" x2="245" y2="125" />
        <circle id="pointDot" class="point-dot" cx="245" cy="125" r="6" />
        <text id="targetLabel" class="target-label" x="245" y="105" text-anchor="middle" fill="#1e2945">(4, 3)</text>
      </g>
    </svg>
  </div>

  <script>
    const X0 = 45;
    const Y0 = 275;
    const STEP = 50;

    function getCoords(x, y) {
      return {
        px: X0 + x * STEP,
        py: Y0 - y * STEP
      };
    }

    function showPoint(x, y) {
      document.getElementById('btn43').classList.toggle('active', x === 4 && y === 3);
      document.getElementById('btn34').classList.toggle('active', x === 3 && y === 4);

      const group = document.getElementById('plotGroup');
      const pathX = document.getElementById('pathX');
      const pathY = document.getElementById('pathY');
      const dot = document.getElementById('pointDot');
      const label = document.getElementById('targetLabel');

      group.classList.remove('revealed');

      const target = getCoords(x, y);

      pathX.setAttribute('x1', X0);
      pathX.setAttribute('y1', Y0);
      pathX.setAttribute('x2', target.px);
      pathX.setAttribute('y2', Y0);

      pathY.setAttribute('x1', target.px);
      pathY.setAttribute('y1', Y0);
      pathY.setAttribute('x2', target.px);
      pathY.setAttribute('y2', target.py);

      dot.setAttribute('cx', target.px);
      dot.setAttribute('cy', target.py);

      label.setAttribute('x', target.px);
      label.setAttribute('y', target.py - 16);
      label.textContent = `(${x}, ${y})`;

      // Trigger reflow to restart CSS transitions cleanly
      void group.offsetWidth;
      group.classList.add('revealed');
    }
  </script>
</body>
</html>

Be careful not to swap the numbers! Going across 3 and up 4 lands you at $(3, 4)$, which is a totally different spot.

<!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="1:1">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      gap: 8px;
    }
    .controls {
      display: flex;
      gap: 10px;
      justify-content: center;
      width: 100%;
      max-width: 360px;
    }
    .btn {
      flex: 1;
      padding: 8px 12px;
      font-size: 15px;
      font-weight: 700;
      border-radius: 10px;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.25s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .btn.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      color: #0284c7;
      box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.2);
    }
    .grid-container {
      width: 100%;
      max-width: 360px;
      aspect-ratio: 1 / 1;
      position: relative;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      padding: 8px;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .grid-line {
      stroke: #e2e8f0;
      stroke-width: 1.5;
    }
    .axis {
      stroke: #94a3b8;
      stroke-width: 2.5;
      stroke-linecap: round;
    }
    .tick-label {
      font-size: 13px;
      font-weight: 600;
      fill: #64748b;
      text-anchor: middle;
      dominant-baseline: middle;
    }
    .axis-label {
      font-size: 14px;
      font-weight: 800;
    }
    .x-label { fill: #22b7ff; }
    .y-label { fill: #ff9f1c; }

    /* Animated paths */
    .path-x {
      stroke: #22b7ff;
      stroke-width: 3.5;
      stroke-linecap: round;
      transition: stroke-dashoffset 0.4s ease, d 0.4s ease;
    }
    .path-y {
      stroke: #ff9f1c;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-dasharray: 6 4;
      transition: stroke-dashoffset 0.4s ease, d 0.4s ease;
    }
    .target-dot {
      fill: #1e2945;
      stroke: #ffffff;
      stroke-width: 3;
      transition: cx 0.4s ease, cy 0.4s ease;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
    }
    .ghost-dot {
      fill: #cbd5e1;
      cursor: pointer;
      transition: fill 0.2s ease, r 0.2s ease;
    }
    .ghost-dot:hover {
      fill: #94a3b8;
    }
    .readout {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 16px;
      font-weight: 700;
      background: #ffffff;
      padding: 6px 16px;
      border-radius: 20px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .val-x { color: #22b7ff; }
    .val-y { color: #ff9f1c; }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn active" id="btnA" onclick="setCoords(3, 4, this)">
      <span>(3, 4)</span>
    </button>
    <button class="btn" id="btnB" onclick="setCoords(4, 3, this)">
      <span>(4, 3)</span>
    </button>
  </div>

  <div class="grid-container">
    <svg id="svgGrid" viewBox="-30 -10 320 320">
      
      <g id="gridLines"></g>
      
      
      <line x1="10" y1="270" x2="280" y2="270" class="axis" />
      <line x1="10" y1="270" x2="10" y2="0" class="axis" />
      <polygon points="282,270 274,266 274,274" fill="#94a3b8" />
      <polygon points="10,-2 6,6 14,6" fill="#94a3b8" />
      
      
      <text x="282" y="286" class="axis-label x-label" text-anchor="end">x →</text>
      <text x="-4" y="6" class="axis-label y-label" text-anchor="end">y ↑</text>

      
      <g id="gridPoints"></g>

      
      <path id="pathX" class="path-x" d="" />
      <path id="pathY" class="path-y" d="" />

      
      <circle id="targetPoint" class="target-dot" cx="166" cy="74" r="7" />
    </svg>
  </div>

  <div class="readout">
    <span>(</span>
    <span class="val-x" id="readX">3</span>
    <span>,</span>
    <span class="val-y" id="readY">4</span>
    <span>)</span>
  </div>

  <script>
    const originX = 10;
    const originY = 270;
    const step = 52; // 5 grid steps: 0..5 (52 * 5 = 260px)
    const maxVal = 5;

    const gridLines = document.getElementById('gridLines');
    const gridPoints = document.getElementById('gridPoints');
    const pathX = document.getElementById('pathX');
    const pathY = document.getElementById('pathY');
    const targetPoint = document.getElementById('targetPoint');
    const readX = document.getElementById('readX');
    const readY = document.getElementById('readY');
    const btnA = document.getElementById('btnA');
    const btnB = document.getElementById('btnB');

    // Build static grid lines & tick marks
    for (let i = 0; i <= maxVal; i++) {
      const pos = originX + i * step;
      const yPos = originY - i * step;

      // Vertical line & X tick
      if (i > 0) {
        const vLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        vLine.setAttribute('x1', pos);
        vLine.setAttribute('y1', originY);
        vLine.setAttribute('x2', pos);
        vLine.setAttribute('y2', originY - maxVal * step);
        vLine.setAttribute('class', 'grid-line');
        gridLines.appendChild(vLine);
      }
      const xText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      xText.setAttribute('x', pos);
      xText.setAttribute('y', originY + 16);
      xText.setAttribute('class', 'tick-label');
      xText.textContent = i;
      gridLines.appendChild(xText);

      // Horizontal line & Y tick
      if (i > 0) {
        const hLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        hLine.setAttribute('x1', originX);
        hLine.setAttribute('y1', yPos);
        hLine.setAttribute('x2', originX + maxVal * step);
        hLine.setAttribute('y2', yPos);
        hLine.setAttribute('class', 'grid-line');
        gridLines.appendChild(hLine);

        const yText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        yText.setAttribute('x', originX - 14);
        yText.setAttribute('y', yPos);
        yText.setAttribute('class', 'tick-label');
        yText.textContent = i;
        gridLines.appendChild(yText);
      }
    }

    // Create interactive ghost points for all (x,y) intersections
    for (let x = 0; x <= maxVal; x++) {
      for (let y = 0; y <= maxVal; y++) {
        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        circle.setAttribute('cx', originX + x * step);
        circle.setAttribute('cy', originY - y * step);
        circle.setAttribute('r', '4');
        circle.setAttribute('class', 'ghost-dot');
        circle.onclick = () => setCoords(x, y);
        gridPoints.appendChild(circle);
      }
    }

    function setCoords(x, y, btnElement) {
      const px = originX + x * step;
      const py = originY - y * step;

      // Update paths
      pathX.setAttribute('d', `M ${originX} ${originY} L ${px} ${originY}`);
      pathY.setAttribute('d', `M ${px} ${originY} L ${px} ${py}`);

      // Update dot
      targetPoint.setAttribute('cx', px);
      targetPoint.setAttribute('cy', py);

      // Update numbers
      readX.textContent = x;
      readY.textContent = y;

      // Update buttons active state
      btnA.classList.toggle('active', x === 3 && y === 4);
      btnB.classList.toggle('active', x === 4 && y === 3);
    }

    // Initial state: (3, 4)
    setCoords(3, 4);
  </script>
</body>
</html>

Whenever you see an ordered pair, just think: crawl along the floor first, then fly up into the sky!

math

Understanding Grid Coordinates: (x, y) Ordered Pairs. Explain the convention of reading the horizontal x-coordinate before the vertical y-coordinate.

What are coordinates? (Curriculum for Excellence / KS2 Maths)

Introduction to the Coordinate Plane and Graphing Ordered Pairs

Coordinate Challenges and Grid Position Games

When introducing the formal Curriculum for Excellence standard MTH 2-18a to early learners or bridging early spatial navigation to formal grid coordinates, start with concrete, full-body kinesthetic activities (walking taped floor lines) before moving to pictorial grids. Reinforce the alphabetical memory anchor ('x comes before y in the alphabet, so horizontal x comes before vertical y') alongside the narrative mnemonic 'along the corridor, then up the stairs' to establish robust spatial sequencing.

Understanding Grid Coordinates: (x, y) Ordered Pairs

Walk Along, Then Jump Up

Finding a Point