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

How do pirates find a buried treasure chest on a giant island?

They use a secret map with two simple steps: first walk across the ground, then climb up!

<!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: system-ui, -apple-system, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 8px;
      user-select: none;
      -webkit-user-select: none;
    }
    .wrapper {
      width: 100%;
      max-width: 380px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .targets {
      display: flex;
      gap: 6px;
      width: 100%;
      justify-content: center;
    }
    .btn-target {
      flex: 1;
      max-width: 105px;
      padding: 6px 4px;
      font-size: 13px;
      font-weight: 700;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      background: #ffffff;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    .btn-target.active {
      border-color: #0284c7;
      background: #f0f9ff;
      box-shadow: 0 0 0 2px rgba(2,132,199,0.25);
    }
    .coords-badge {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 17px;
      font-weight: 800;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      padding: 4px 16px;
      border-radius: 20px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    .coord-x { color: #0284c7; }
    .coord-y { color: #d97706; }
    .grid-container {
      width: 100%;
      aspect-ratio: 1 / 1;
      position: relative;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .grid-line {
      stroke: #e2e8f0;
      stroke-width: 1;
    }
    .axis {
      stroke: #475569;
      stroke-width: 2.5;
      stroke-linecap: round;
    }
    .axis-arrow {
      fill: #475569;
    }
    .axis-label {
      font-size: 11px;
      font-weight: 700;
      fill: #64748b;
      text-anchor: middle;
      dominant-baseline: central;
    }
    .axis-title-x {
      font-size: 12px;
      font-weight: 800;
      fill: #0284c7;
      text-anchor: end;
      dominant-baseline: central;
    }
    .axis-title-y {
      font-size: 12px;
      font-weight: 800;
      fill: #d97706;
      text-anchor: start;
      dominant-baseline: central;
    }
    .step-path-x {
      stroke: #0284c7;
      stroke-width: 3.5;
      stroke-linecap: round;
      fill: none;
      stroke-dasharray: 400;
      stroke-dashoffset: 400;
      transition: stroke-dashoffset 0.4s ease-out;
    }
    .step-path-y {
      stroke: #d97706;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-dasharray: 400;
      stroke-dashoffset: 400;
      fill: none;
      transition: stroke-dashoffset 0.4s ease-out 0.35s;
    }
    .hit-dot {
      fill: transparent;
      cursor: pointer;
    }
    .hit-dot:hover {
      fill: rgba(2, 132, 199, 0.15);
    }
    .point-marker {
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
  </style>
</head>
<body>

<div class="wrapper">
  <div class="targets">
    <button class="btn-target active" data-x="4" data-y="3">⭐ (4, 3)</button>
    <button class="btn-target" data-x="2" data-y="5">💎 (2, 5)</button>
    <button class="btn-target" data-x="5" data-y="2">🗝️ (5, 2)</button>
  </div>

  <div class="coords-badge">
    <span>( <span class="coord-x" id="valX">4</span> , <span class="coord-y" id="valY">3</span> )</span>
  </div>

  <div class="grid-container">
    <svg viewBox="0 0 340 340" id="svgGrid">
      <defs>
        <marker id="arrow-x" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="6" markerHeight="6" orient="auto">
          <polygon points="0 0, 6 3, 0 6" fill="#0284c7" />
        </marker>
        <marker id="arrow-y" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="6" markerHeight="6" orient="auto">
          <polygon points="0 0, 6 3, 0 6" fill="#d97706" />
        </marker>
      </defs>

      
      <g id="gridLines"></g>

      
      <line x1="40" y1="300" x2="330" y2="300" class="axis" />
      <polygon points="334,300 326,296 326,304" class="axis-arrow" />

      <line x1="40" y1="300" x2="40" y2="10" class="axis" />
      <polygon points="40,6 36,14 44,14" class="axis-arrow" />

      
      <text x="330" y="318" class="axis-title-x">Across (x) →</text>
      <text x="10" y="14" class="axis-title-y">↑ Up (y)</text>

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

      
      <text x="28" y="314" class="axis-label" style="font-weight:800;">(0,0)</text>

      
      <path id="pathX" d="M 40 300 L 264 300" class="step-path-x" marker-end="url(#arrow-x)" />

      
      <path id="pathY" d="M 264 300 L 264 132" class="step-path-y" marker-end="url(#arrow-y)" />

      
      <g id="targetGroup" class="point-marker" transform="translate(264, 132)">
        <circle r="12" fill="#f59e0b" opacity="0.25" />
        <circle r="6" fill="#f59e0b" stroke="#ffffff" stroke-width="2" />
      </g>

      
      <g id="hitTargets"></g>
    </svg>
  </div>
</div>

<script>
  const ORIGIN_X = 40;
  const ORIGIN_Y = 300;
  const STEP = 56;

  function toPx(gx, gy) {
    return {
      x: ORIGIN_X + gx * STEP,
      y: ORIGIN_Y - gy * STEP
    };
  }

  // Draw Grid Lines & Ticks
  const gridLinesG = document.getElementById('gridLines');
  const ticksG = document.getElementById('axisTicks');
  const hitsG = document.getElementById('hitTargets');

  for (let i = 0; i <= 5; i++) {
    const px = ORIGIN_X + i * STEP;
    const py = ORIGIN_Y - i * STEP;

    // Vertical line
    if (i > 0) {
      const lineV = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      lineV.setAttribute('x1', px);
      lineV.setAttribute('y1', 20);
      lineV.setAttribute('x2', px);
      lineV.setAttribute('y2', 300);
      lineV.setAttribute('class', 'grid-line');
      gridLinesG.appendChild(lineV);
    }

    // Horizontal line
    if (i > 0) {
      const lineH = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      lineH.setAttribute('x1', 40);
      lineH.setAttribute('y1', py);
      lineH.setAttribute('x2', 320);
      lineH.setAttribute('y2', py);
      lineH.setAttribute('class', 'grid-line');
      gridLinesG.appendChild(lineH);
    }

    // X Tick Number
    if (i > 0) {
      const tX = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      tX.setAttribute('x', px);
      tX.setAttribute('y', 314);
      tX.setAttribute('class', 'axis-label');
      tX.textContent = i;
      ticksG.appendChild(tX);
    }

    // Y Tick Number
    if (i > 0) {
      const tY = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      tY.setAttribute('x', 26);
      tY.setAttribute('y', py);
      tY.setAttribute('class', 'axis-label');
      tY.textContent = i;
      ticksG.appendChild(tY);
    }
  }

  // Interactive Grid Points
  for (let gx = 0; gx <= 5; gx++) {
    for (let gy = 0; gy <= 5; gy++) {
      const pt = toPx(gx, gy);
      const hit = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      hit.setAttribute('cx', pt.x);
      hit.setAttribute('cy', pt.y);
      hit.setAttribute('r', 18);
      hit.setAttribute('class', 'hit-dot');
      hit.addEventListener('click', () => setCoordinate(gx, gy));
      hitsG.appendChild(hit);
    }
  }

  const pathX = document.getElementById('pathX');
  const pathY = document.getElementById('pathY');
  const targetGroup = document.getElementById('targetGroup');
  const valX = document.getElementById('valX');
  const valY = document.getElementById('valY');
  const buttons = document.querySelectorAll('.btn-target');

  function setCoordinate(gx, gy) {
    valX.textContent = gx;
    valY.textContent = gy;

    buttons.forEach(btn => {
      const bx = parseInt(btn.dataset.x, 10);
      const by = parseInt(btn.dataset.y, 10);
      btn.classList.toggle('active', bx === gx && by === gy);
    });

    const target = toPx(gx, gy);
    const corner = toPx(gx, 0);

    // Reset dashed paths to trigger animation
    pathX.style.transition = 'none';
    pathY.style.transition = 'none';
    pathX.setAttribute('d', `M ${ORIGIN_X} ${ORIGIN_Y} L ${corner.x} ${corner.y}`);
    pathY.setAttribute('d', `M ${corner.x} ${corner.y} L ${target.x} ${target.y}`);

    const lenX = Math.abs(corner.x - ORIGIN_X) || 1;
    const lenY = Math.abs(target.y - corner.y) || 1;

    pathX.style.strokeDasharray = `${lenX}`;
    pathX.style.strokeDashoffset = `${lenX}`;
    pathY.style.strokeDasharray = `${lenY}`;
    pathY.style.strokeDashoffset = `${lenY}`;

    targetGroup.style.transform = `translate(${target.x}px, ${target.y}px) scale(0)`;

    // Force reflow
    void pathX.offsetWidth;

    pathX.style.transition = 'stroke-dashoffset 0.35s ease-out';
    pathY.style.transition = 'stroke-dashoffset 0.35s ease-out 0.3s';

    pathX.style.strokeDashoffset = '0';
    pathY.style.strokeDashoffset = '0';

    setTimeout(() => {
      targetGroup.style.transform = `translate(${target.x}px, ${target.y}px) scale(1)`;
    }, 600);
  }

  buttons.forEach(btn => {
    btn.addEventListener('click', () => {
      setCoordinate(parseInt(btn.dataset.x, 10), parseInt(btn.dataset.y, 10));
    });
  });

  // Initial render
  setCoordinate(4, 3);
</script>

</body>
</html>

A **coordinate grid** is a flat map made of square boxes with numbers along the bottom and side.

The bottom-left corner is marked $(0, 0)$ and is called the **origin** — that is your starting 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">
  <title>Coordinates in the First Quadrant</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      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;
    }
    .display-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 22px;
      font-weight: 700;
      padding: 6px 16px;
      background: #f8f9fa;
      border: 1px solid #e6e6e6;
      border-radius: 20px;
      margin-bottom: 8px;
    }
    .x-val { color: #0284c7; }
    .y-val { color: #7c3aed; }
    .svg-container {
      width: 100%;
      max-width: 340px;
      aspect-ratio: 1 / 1;
      position: relative;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .axis { stroke: #1e2945; stroke-width: 2.5; stroke-linecap: round; }
    .grid-line { stroke: #e2e8f0; stroke-width: 1.2; }
    .axis-label { font-size: 13px; font-weight: 700; fill: #64748b; }
    .tick-label { font-size: 12px; font-weight: 600; fill: #1e2945; text-anchor: middle; dominant-baseline: middle; }
    .path-x { stroke: #0284c7; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 6 4; }
    .path-y { stroke: #7c3aed; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 6 4; }
    .point-target {
      fill: transparent;
      cursor: pointer;
    }
    .presets {
      display: flex;
      gap: 8px;
      margin-top: 10px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .preset-btn {
      background: #f8f9fa;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 5px 12px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
    }
    .preset-btn.active {
      background: #e0f2fe;
      border-color: #0284c7;
      color: #0369a1;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
    }
  </style>
</head>
<body>

  <div class="display-badge">
    <span>(</span>
    <span class="x-val" id="dispX">3</span>
    <span>,</span>
    <span class="y-val" id="dispY">2</span>
    <span>)</span>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 340 340" id="gridSvg">
      <defs>
        <marker id="arrow-x" 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="#1e2945" />
        </marker>
        <marker id="arrow-y" 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="#1e2945" />
        </marker>
      </defs>

      
      <g id="gridLines"></g>

      
      
      <line x1="45" y1="295" x2="45" y2="25" class="axis" marker-end="url(#arrow-y)" />
      
      <line x1="45" y1="295" x2="315" y2="295" class="axis" marker-end="url(#arrow-x)" />

      
      <text x="325" y="299" class="axis-label" fill="#0284c7" font-weight="800">x</text>
      <text x="45" y="16" class="axis-label" fill="#7c3aed" font-weight="800" text-anchor="middle">y</text>

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

      
      <line id="stepX" x1="45" y1="295" x2="45" y2="295" class="path-x" />
      <line id="stepY" x1="45" y1="295" x2="45" y2="295" class="path-y" />

      
      <circle cx="45" cy="295" r="5" fill="#ef4444" />
      <text x="32" y="312" class="tick-label" font-size="11" fill="#ef4444" font-weight="700">Origin (0,0)</text>

      
      <circle id="targetPoint" cx="195" cy="195" r="7" fill="#22b7ff" stroke="#ffffff" stroke-width="2.5" style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));" />

      
      <g id="touchTargets"></g>
    </svg>
  </div>

  <div class="presets">
    <button class="preset-btn" onclick="setCoord(0,0)">(0, 0)</button>
    <button class="preset-btn" onclick="setCoord(4, 1)">(4, 1)</button>
    <button class="preset-btn active" onclick="setCoord(3, 2)">(3, 2)</button>
    <button class="preset-btn" onclick="setCoord(1, 4)">(1, 4)</button>
    <button class="preset-btn" onclick="setCoord(5, 5)">(5, 5)</button>
  </div>

  <script>
    const ORIGIN_X = 45;
    const ORIGIN_Y = 295;
    const STEP = 50;
    const MAX_VAL = 5;

    const gridLinesG = document.getElementById('gridLines');
    const axisTicksG = document.getElementById('axisTicks');
    const touchTargetsG = document.getElementById('touchTargets');
    const stepX = document.getElementById('stepX');
    const stepY = document.getElementById('stepY');
    const targetPoint = document.getElementById('targetPoint');
    const dispX = document.getElementById('dispX');
    const dispY = document.getElementById('dispY');

    // Build grid & ticks
    for (let i = 1; i <= MAX_VAL; i++) {
      const px = ORIGIN_X + i * STEP;
      const py = ORIGIN_Y - i * STEP;

      // Vertical gridline
      const vl = document.createElementNS("http://www.w3.org/2000/svg", "line");
      vl.setAttribute("x1", px);
      vl.setAttribute("y1", ORIGIN_Y);
      vl.setAttribute("x2", px);
      vl.setAttribute("y2", ORIGIN_Y - MAX_VAL * STEP);
      vl.setAttribute("class", "grid-line");
      gridLinesG.appendChild(vl);

      // Horizontal gridline
      const hl = document.createElementNS("http://www.w3.org/2000/svg", "line");
      hl.setAttribute("x1", ORIGIN_X);
      hl.setAttribute("y1", py);
      hl.setAttribute("x2", ORIGIN_X + MAX_VAL * STEP);
      hl.setAttribute("y2", py);
      hl.setAttribute("class", "grid-line");
      gridLinesG.appendChild(hl);

      // X Tick label
      const tx = document.createElementNS("http://www.w3.org/2000/svg", "text");
      tx.setAttribute("x", px);
      tx.setAttribute("y", ORIGIN_Y + 16);
      tx.setAttribute("class", "tick-label");
      tx.textContent = i;
      axisTicksG.appendChild(tx);

      // Y Tick label
      const ty = document.createElementNS("http://www.w3.org/2000/svg", "text");
      ty.setAttribute("x", ORIGIN_X - 14);
      ty.setAttribute("y", py);
      ty.setAttribute("class", "tick-label");
      ty.textContent = i;
      axisTicksG.appendChild(ty);
    }

    // Touch targets for all coordinates (0..5, 0..5)
    for (let x = 0; x <= MAX_VAL; x++) {
      for (let y = 0; y <= MAX_VAL; y++) {
        const cx = ORIGIN_X + x * STEP;
        const cy = ORIGIN_Y - y * STEP;
        const c = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        c.setAttribute("cx", cx);
        c.setAttribute("cy", cy);
        c.setAttribute("r", 20);
        c.setAttribute("class", "point-target");
        c.onclick = () => setCoord(x, y);
        touchTargetsG.appendChild(c);
      }
    }

    let currentX = 3;
    let currentY = 2;

    function setCoord(x, y) {
      currentX = x;
      currentY = y;
      dispX.textContent = x;
      dispY.textContent = y;

      const px = ORIGIN_X + x * STEP;
      const py = ORIGIN_Y - y * STEP;

      // Update paths
      stepX.setAttribute("x1", ORIGIN_X);
      stepX.setAttribute("y1", ORIGIN_Y);
      stepX.setAttribute("x2", px);
      stepX.setAttribute("y2", ORIGIN_Y);

      stepY.setAttribute("x1", px);
      stepY.setAttribute("y1", ORIGIN_Y);
      stepY.setAttribute("x2", px);
      stepY.setAttribute("y2", py);

      targetPoint.setAttribute("cx", px);
      targetPoint.setAttribute("cy", py);

      // Update preset buttons
      document.querySelectorAll('.preset-btn').forEach(btn => {
        btn.classList.toggle('active', btn.textContent.trim() === `(${x}, ${y})`);
      });
    }

    // Initialize
    setCoord(3, 2);
  </script>
</body>
</html>

How do we write down the exact address of a spot?

Every spot on the grid gets a pair of numbers written in parentheses like $(3, 2)$, called **coordinates**.

The first number tells you how many steps to walk right, and the second number tells you how many steps to jump up.

<!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: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      min-height: 100%;
    }
    .header-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 8px;
    }
    .coord-display {
      font-size: 24px;
      font-weight: 700;
      background: #ffffff;
      padding: 6px 16px;
      border-radius: 20px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .x-val {
      color: #22b7ff;
      border-bottom: 3px solid #22b7ff;
      padding: 0 4px;
    }
    .y-val {
      color: #10b981;
      border-bottom: 3px solid #10b981;
      padding: 0 4px;
    }
    .grid-container {
      width: 100%;
      max-width: 360px;
      aspect-ratio: 1 / 1;
      position: relative;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .grid-line {
      stroke: #e2e8f0;
      stroke-width: 1.5;
    }
    .axis {
      stroke: #64748b;
      stroke-width: 2.5;
      stroke-linecap: round;
    }
    .axis-arrow {
      fill: #64748b;
    }
    .axis-label {
      font-size: 13px;
      font-weight: 600;
      fill: #64748b;
      text-anchor: middle;
      dominant-baseline: middle;
    }
    .axis-name-x {
      font-size: 13px;
      font-weight: 700;
      fill: #22b7ff;
      text-anchor: middle;
    }
    .axis-name-y {
      font-size: 13px;
      font-weight: 700;
      fill: #10b981;
      text-anchor: middle;
    }
    .step-x-path {
      stroke: #22b7ff;
      stroke-width: 4;
      stroke-linecap: round;
      stroke-dasharray: 6 4;
      fill: none;
      transition: stroke-dashoffset 0.5s ease;
    }
    .step-y-path {
      stroke: #10b981;
      stroke-width: 4;
      stroke-linecap: round;
      stroke-dasharray: 6 4;
      fill: none;
      transition: stroke-dashoffset 0.5s ease;
    }
    .point-target {
      fill: #1e2945;
      stroke: #ffffff;
      stroke-width: 3;
      cursor: pointer;
      transition: transform 0.2s ease, fill 0.2s ease;
    }
    .point-target:hover {
      opacity: 0.8;
    }
    .point-target.active {
      fill: #f59e0b;
      transform: scale(1.15);
      transform-origin: center;
    }
    .char-marker {
      transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .button-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      margin-top: 8px;
    }
    .btn-coord {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: background 0.2s, box-shadow 0.2s;
    }
    .btn-coord:hover {
      background: #f1f5f9;
    }
    .btn-coord.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }
    .legend-row {
      display: flex;
      gap: 16px;
      font-size: 13px;
      font-weight: 600;
      margin-top: 4px;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .legend-bar {
      width: 14px;
      height: 4px;
      border-radius: 2px;
    }
    .bar-x { background: #22b7ff; }
    .bar-y { background: #10b981; }
  </style>
</head>
<body>

  <div class="header-bar">
    <div class="coord-display">
      (<span class="x-val" id="dispX">4</span>, <span class="y-val" id="dispY">3</span>)
    </div>
  </div>

  <div class="grid-container">
    <svg id="gridSvg" viewBox="-40 -20 380 380">
      
      <defs>
        <marker id="arrowX" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
          <polygon points="0 0, 6 3, 0 6" fill="#22b7ff" />
        </marker>
        <marker id="arrowY" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
          <polygon points="0 0, 6 3, 0 6" fill="#10b981" />
        </marker>
      </defs>

      
      
      
      

      
      <line class="grid-line" x1="30" y1="250" x2="300" y2="250" />
      <line class="grid-line" x1="30" y1="200" x2="300" y2="200" />
      <line class="grid-line" x1="30" y1="150" x2="300" y2="150" />
      <line class="grid-line" x1="30" y1="100" x2="300" y2="100" />
      <line class="grid-line" x1="30" y1="50"  x2="300" y2="50" />

      
      <line class="grid-line" x1="80"  y1="300" x2="80"  y2="30" />
      <line class="grid-line" x1="130" y1="300" x2="130" y2="30" />
      <line class="grid-line" x1="180" y1="300" x2="180" y2="30" />
      <line class="grid-line" x1="230" y1="300" x2="230" y2="30" />
      <line class="grid-line" x1="280" y1="300" x2="280" y2="30" />

      
      
      <line class="axis" x1="20" y1="300" x2="310" y2="300" />
      <polygon class="axis-arrow" points="310,296 318,300 310,304" />
      
      <line class="axis" x1="30" y1="310" x2="30" y2="20" />
      <polygon class="axis-arrow" points="26,20 30,12 34,20" />

      
      
      <text class="axis-label" x="16" y="314">0</text>
      
      <text class="axis-label" x="80" y="318">1</text>
      <text class="axis-label" x="130" y="318">2</text>
      <text class="axis-label" x="180" y="318">3</text>
      <text class="axis-label" x="230" y="318">4</text>
      <text class="axis-label" x="280" y="318">5</text>
      <text class="axis-name-x" x="328" y="304">x</text>

      
      <text class="axis-label" x="15" y="250">1</text>
      <text class="axis-label" x="15" y="200">2</text>
      <text class="axis-label" x="15" y="150">3</text>
      <text class="axis-label" x="15" y="100">4</text>
      <text class="axis-label" x="15" y="50">5</text>
      <text class="axis-name-y" x="30" y="2">y</text>

      
      <line id="walkPath" class="step-x-path" x1="30" y1="300" x2="230" y2="300" marker-end="url(#arrowX)" />

      
      <line id="jumpPath" class="step-y-path" x1="230" y1="300" x2="230" y2="150" marker-end="url(#arrowY)" />

      
      <g id="gridDots"></g>

      
      <g id="markerGroup" class="char-marker" transform="translate(230, 150)">
        <circle r="9" fill="#1e2945" stroke="#ffffff" stroke-width="2.5" />
        <circle r="4" fill="#f59e0b" />
      </g>
    </svg>
  </div>

  <div class="legend-row">
    <div class="legend-item"><div class="legend-bar bar-x"></div> 1ˢᵗ Walk Right</div>
    <div class="legend-item"><div class="legend-bar bar-y"></div> 2ⁿᵈ Jump Up</div>
  </div>

  <div class="button-row">
    <button class="btn-coord active" onclick="plot(4, 3, this)">(4, 3)</button>
    <button class="btn-coord" onclick="plot(2, 5, this)">(2, 5)</button>
    <button class="btn-coord" onclick="plot(5, 1, this)">(5, 1)</button>
    <button class="btn-coord" onclick="plot(1, 4, this)">(1, 4)</button>
    <button class="btn-coord" onclick="plot(3, 2, this)">(3, 2)</button>
  </div>

  <script>
    const ORIGIN_X = 30;
    const ORIGIN_Y = 300;
    const STEP = 50;

    const dispX = document.getElementById('dispX');
    const dispY = document.getElementById('dispY');
    const walkPath = document.getElementById('walkPath');
    const jumpPath = document.getElementById('jumpPath');
    const markerGroup = document.getElementById('markerGroup');
    const gridDots = document.getElementById('gridDots');

    // Create clickable dots at all grid coordinates
    for (let x = 1; x <= 5; x++) {
      for (let y = 1; y <= 5; y++) {
        const cx = ORIGIN_X + x * STEP;
        const cy = ORIGIN_Y - y * STEP;
        const dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        dot.setAttribute('cx', cx);
        dot.setAttribute('cy', cy);
        dot.setAttribute('r', '6');
        dot.setAttribute('class', 'point-target');
        dot.setAttribute('id', `dot-${x}-${y}`);
        dot.addEventListener('click', () => {
          // Find matching button or clear active button states
          document.querySelectorAll('.btn-coord').forEach(b => {
            if (b.textContent === `(${x}, ${y})`) {
              b.classList.add('active');
            } else {
              b.classList.remove('active');
            }
          });
          animatePlot(x, y);
        });
        gridDots.appendChild(dot);
      }
    }

    function animatePlot(x, y) {
      dispX.textContent = x;
      dispY.textContent = y;

      const targetSvgX = ORIGIN_X + x * STEP;
      const targetSvgY = ORIGIN_Y - y * STEP;

      // Update paths
      walkPath.setAttribute('x1', ORIGIN_X);
      walkPath.setAttribute('y1', ORIGIN_Y);
      walkPath.setAttribute('x2', targetSvgX);
      walkPath.setAttribute('y2', ORIGIN_Y);

      jumpPath.setAttribute('x1', targetSvgX);
      jumpPath.setAttribute('y1', ORIGIN_Y);
      jumpPath.setAttribute('x2', targetSvgX);
      jumpPath.setAttribute('y2', targetSvgY);

      // Move marker
      markerGroup.setAttribute('transform', `translate(${targetSvgX}, ${targetSvgY})`);

      // Update dot active classes
      document.querySelectorAll('.point-target').forEach(dot => {
        dot.classList.remove('active');
      });
      const activeDot = document.getElementById(`dot-${x}-${y}`);
      if (activeDot) {
        activeDot.classList.add('active');
      }
    }

    function plot(x, y, btn) {
      document.querySelectorAll('.btn-coord').forEach(b => b.classList.remove('active'));
      if (btn) btn.classList.add('active');
      animatePlot(x, y);
    }

    // Initialize initial point (4, 3)
    animatePlot(4, 3);
  </script>
</body>
</html>

Does it matter which number you read first?

Switching the numbers leads to a completely different spot: $(3, 2)$ is not the same place as $(2, 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="1:1">
<title>Coordinate Order Comparison</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;
    padding: 12px;
    user-select: none;
  }

  .btn-group {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
  }

  .tab-btn {
    border: none;
    outline: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    background: #e2e8f0;
    color: #475569;
    transition: all 0.25s ease;
  }

  .tab-btn.active-blue {
    background: #3b82f6;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
  }

  .tab-btn.active-orange {
    background: #f97316;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35);
  }

  .tab-btn.active-both {
    background: #8b5cf6;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
  }

  .graph-box {
    width: 100%;
    max-width: 380px;
    background: #ffffff;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  }

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

  .grid-line { stroke: #e2e8f0; stroke-width: 1.5; stroke-dasharray: 2 2; }
  .axis { stroke: #64748b; stroke-width: 2.5; stroke-linecap: round; }
  .axis-num { font-size: 13px; fill: #64748b; font-weight: 600; text-anchor: middle; dominant-baseline: middle; }
  .axis-label { font-size: 14px; fill: #334155; font-weight: 700; }

  /* Paths */
  .crawl-path {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease, opacity 0.3s;
  }
  .climb-path {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease 0.5s, opacity 0.3s;
  }

  .point-group {
    transition: opacity 0.3s ease 0.9s, transform 0.3s ease;
  }

  .pt-label {
    font-size: 14px;
    font-weight: 800;
    paint-order: stroke;
    stroke: #ffffff;
    stroke-width: 3px;
    stroke-linejoin: round;
  }
</style>
</head>
<body>

<div class="btn-group">
  <button id="btnA" class="tab-btn active-blue" onclick="setMode('A')">(3, 2)</button>
  <button id="btnB" class="tab-btn" onclick="setMode('B')">(2, 3)</button>
  <button id="btnBoth" class="tab-btn" onclick="setMode('both')">Both</button>
</div>

<div class="graph-box">
  <svg viewBox="0 0 340 340" aria-label="Coordinate Graph">
    
    
    <line class="grid-line" x1="50" y1="230" x2="310" y2="230" />
    <line class="grid-line" x1="50" y1="170" x2="310" y2="170" />
    <line class="grid-line" x1="50" y1="110" x2="310" y2="110" />
    <line class="grid-line" x1="50" y1="50"  x2="310" y2="50" />
    
    
    <line class="grid-line" x1="110" y1="290" x2="110" y2="30" />
    <line class="grid-line" x1="170" y1="290" x2="170" y2="30" />
    <line class="grid-line" x1="230" y1="290" x2="230" y2="30" />
    <line class="grid-line" x1="290" y1="290" x2="290" y2="30" />

    
    <line class="axis" x1="50" y1="290" x2="320" y2="290" />
    <line class="axis" x1="50" y1="290" x2="50" y2="20" />
    
    
    <polygon points="325,290 315,285 315,295" fill="#64748b" />
    <polygon points="50,15 45,25 55,25" fill="#64748b" />

    
    <text x="325" y="308" class="axis-label" text-anchor="end">x</text>
    <text x="35" y="25" class="axis-label" text-anchor="middle">y</text>
    
    
    <text x="40" y="300" class="axis-num">0</text>
    <text x="110" y="306" class="axis-num">1</text>
    <text x="170" y="306" class="axis-num">2</text>
    <text x="230" y="306" class="axis-num">3</text>
    <text x="290" y="306" class="axis-num">4</text>

    <text x="36" y="230" class="axis-num">1</text>
    <text x="36" y="170" class="axis-num">2</text>
    <text x="36" y="110" class="axis-num">3</text>
    <text x="36" y="50"  class="axis-num">4</text>

    
    <g id="groupA">
      <path class="crawl-path" stroke="#3b82f6" d="M 50,290 L 230,290" stroke-dasharray="180" id="crawlA" />
      <path class="climb-path" stroke="#3b82f6" stroke-dasharray="4 4" d="M 230,290 L 230,170" id="climbA" />
      <g class="point-group" id="ptA">
        <circle cx="230" cy="170" r="7" fill="#3b82f6" stroke="#ffffff" stroke-width="2.5" />
        <text x="242" y="165" class="pt-label" fill="#3b82f6">(3, 2)</text>
      </g>
    </g>

    
    <g id="groupB" style="opacity: 0;">
      <path class="crawl-path" stroke="#f97316" d="M 50,290 L 170,290" stroke-dasharray="120" id="crawlB" />
      <path class="climb-path" stroke="#f97316" stroke-dasharray="4 4" d="M 170,290 L 170,110" id="climbB" />
      <g class="point-group" id="ptB">
        <circle cx="170" cy="110" r="7" fill="#f97316" stroke="#ffffff" stroke-width="2.5" />
        <text x="182" y="105" class="pt-label" fill="#f97316">(2, 3)</text>
      </g>
    </g>
  </svg>
</div>

<script>
  const btnA = document.getElementById('btnA');
  const btnB = document.getElementById('btnB');
  const btnBoth = document.getElementById('btnBoth');
  const groupA = document.getElementById('groupA');
  const groupB = document.getElementById('groupB');
  const crawlA = document.getElementById('crawlA');
  const climbA = document.getElementById('climbA');
  const ptA = document.getElementById('ptA');
  const crawlB = document.getElementById('crawlB');
  const climbB = document.getElementById('climbB');
  const ptB = document.getElementById('ptB');

  function triggerAnim(crawl, climb, pt, lenCrawl, lenClimb) {
    crawl.style.transition = 'none';
    climb.style.transition = 'none';
    pt.style.transition = 'none';
    
    crawl.style.strokeDasharray = lenCrawl;
    crawl.style.strokeDashoffset = lenCrawl;
    climb.style.strokeDasharray = '4 4';
    climb.style.opacity = '0';
    pt.style.opacity = '0';

    crawl.getBoundingClientRect(); // force reflow

    crawl.style.transition = 'stroke-dashoffset 0.4s ease';
    crawl.style.strokeDashoffset = '0';

    setTimeout(() => {
      climb.style.transition = 'opacity 0.4s ease';
      climb.style.opacity = '1';
    }, 400);

    setTimeout(() => {
      pt.style.transition = 'opacity 0.3s ease';
      pt.style.opacity = '1';
    }, 800);
  }

  function setMode(mode) {
    btnA.className = 'tab-btn' + (mode === 'A' ? ' active-blue' : '');
    btnB.className = 'tab-btn' + (mode === 'B' ? ' active-orange' : '');
    btnBoth.className = 'tab-btn' + (mode === 'both' ? ' active-both' : '');

    if (mode === 'A') {
      groupA.style.opacity = '1';
      groupB.style.opacity = '0';
      triggerAnim(crawlA, climbA, ptA, 180, 120);
    } else if (mode === 'B') {
      groupA.style.opacity = '0';
      groupB.style.opacity = '1';
      triggerAnim(crawlB, climbB, ptB, 120, 180);
    } else {
      groupA.style.opacity = '1';
      groupB.style.opacity = '1';
      triggerAnim(crawlA, climbA, ptA, 180, 120);
      triggerAnim(crawlB, climbB, ptB, 120, 180);
    }
  }

  // Initial load animation
  triggerAnim(crawlA, climbA, ptA, 180, 120);
</script>

</body>
</html>

Always remember the rule: crawl across the floor before you climb up the ladder!

What happens if one of the numbers is zero?

For the point $(4, 0)$, you walk $4$ steps to the right and climb $0$ steps, so you stay flat on the ground line.

<!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>Coordinate Grid Explorer</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, sans-serif;
    background: #f8f9fa;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }
  .header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 8px;
  }
  .coord-display {
    font-size: 26px;
    font-weight: 700;
    background: #ffffff;
    padding: 4px 18px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .x-val { color: #3b82f6; }
  .y-val { color: #8b5cf6; }
  .presets {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .preset-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
  }
  .preset-btn.active {
    background: #1e2945;
    color: #ffffff;
    border-color: #1e2945;
  }
  .grid-wrapper {
    position: relative;
    width: 100%;
    max-width: 330px;
    aspect-ratio: 1 / 1;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
    touch-action: manipulation;
  }
  svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .grid-line {
    stroke: #f1f5f9;
    stroke-width: 1.5;
  }
  .axis {
    stroke: #94a3b8;
    stroke-width: 2.5;
    stroke-linecap: round;
  }
  .axis-label {
    font-size: 12px;
    font-weight: 600;
    fill: #64748b;
    text-anchor: middle;
    dominant-baseline: central;
  }
  .path-x {
    stroke: #3b82f6;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 4 4;
    transition: all 0.35s ease;
  }
  .path-y {
    stroke: #8b5cf6;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 4 4;
    transition: all 0.35s ease;
  }
  .point-target {
    fill: #1e2945;
    stroke: #ffffff;
    stroke-width: 3;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .origin-pt {
    fill: #94a3b8;
  }
  .legend {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
  }
  .leg-item {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .leg-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
</style>
</head>
<body>

<div class="header">
  <div class="coord-display">
    (<span class="x-val" id="dispX">4</span>,&nbsp;<span class="y-val" id="dispY">0</span>)
  </div>
</div>

<div class="presets">
  <button class="preset-btn active" onclick="setPoint(4, 0)">(4, 0)</button>
  <button class="preset-btn" onclick="setPoint(0, 3)">(0, 3)</button>
  <button class="preset-btn" onclick="setPoint(3, 2)">(3, 2)</button>
  <button class="preset-btn" onclick="setPoint(1, 5)">(1, 5)</button>
  <button class="preset-btn" onclick="setPoint(5, 4)">(5, 4)</button>
</div>

<div class="grid-wrapper">
  <svg id="gridSvg" viewBox="0 0 320 320">
    <defs>
      <marker id="arrow-x" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
        <path d="M 0 0 L 6 3 L 0 6 z" fill="#3b82f6" />
      </marker>
      <marker id="arrow-y" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
        <path d="M 0 0 L 6 3 L 0 6 z" fill="#8b5cf6" />
      </marker>
    </defs>

    
    <g id="gridLines"></g>

    
    <line x1="45" y1="270" x2="295" y2="270" class="axis" />
    <line x1="45" y1="270" x2="45" y2="20" class="axis" />

    
    <g id="axisLabels"></g>

    
    <line id="lineX" class="path-x" x1="45" y1="270" x2="237" y2="270" />
    <line id="lineY" class="path-y" x1="237" y1="270" x2="237" y2="270" />

    
    <circle cx="45" cy="270" r="4" class="origin-pt" />

    
    <circle id="targetDot" cx="237" cy="270" r="8" class="point-target" />

    
    <g id="hitAreas"></g>
  </svg>
</div>

<div class="legend">
  <div class="leg-item"><span class="leg-dot" style="background:#3b82f6;"></span> Across (x)</div>
  <div class="leg-item"><span class="leg-dot" style="background:#8b5cf6;"></span> Up (y)</div>
</div>

<script>
  const ORIGIN_X = 45;
  const ORIGIN_Y = 270;
  const STEP = 48;
  const MAX_VAL = 5;

  let currentX = 4;
  let currentY = 0;

  function toSvgX(val) { return ORIGIN_X + val * STEP; }
  function toSvgY(val) { return ORIGIN_Y - val * STEP; }

  // Draw grid & labels
  const gridLinesG = document.getElementById('gridLines');
  const axisLabelsG = document.getElementById('axisLabels');
  const hitAreasG = document.getElementById('hitAreas');

  for (let i = 0; i <= MAX_VAL; i++) {
    const gx = toSvgX(i);
    const gy = toSvgY(i);

    // Vertical grid line
    if (i > 0) {
      const vLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      vLine.setAttribute('x1', gx);
      vLine.setAttribute('y1', ORIGIN_Y);
      vLine.setAttribute('x2', gx);
      vLine.setAttribute('y2', toSvgY(5));
      vLine.setAttribute('class', 'grid-line');
      gridLinesG.appendChild(vLine);
    }

    // Horizontal grid line
    if (i > 0) {
      const hLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      hLine.setAttribute('x1', ORIGIN_X);
      hLine.setAttribute('y1', gy);
      hLine.setAttribute('x2', toSvgX(5));
      hLine.setAttribute('y2', gy);
      hLine.setAttribute('class', 'grid-line');
      gridLinesG.appendChild(hLine);
    }

    // X-axis numbers
    const xText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    xText.setAttribute('x', gx);
    xText.setAttribute('y', ORIGIN_Y + 18);
    xText.setAttribute('class', 'axis-label');
    xText.textContent = i;
    axisLabelsG.appendChild(xText);

    // Y-axis numbers
    if (i > 0) {
      const yText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      yText.setAttribute('x', ORIGIN_X - 18);
      yText.setAttribute('y', gy);
      yText.setAttribute('class', 'axis-label');
      yText.textContent = i;
      axisLabelsG.appendChild(yText);
    }
  }

  // Clickable interactive nodes
  for (let x = 0; x <= MAX_VAL; x++) {
    for (let y = 0; y <= MAX_VAL; y++) {
      const hit = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      hit.setAttribute('cx', toSvgX(x));
      hit.setAttribute('cy', toSvgY(y));
      hit.setAttribute('r', 18);
      hit.setAttribute('fill', 'transparent');
      hit.setAttribute('cursor', 'pointer');
      hit.addEventListener('click', () => setPoint(x, y));
      hitAreasG.appendChild(hit);
    }
  }

  function setPoint(x, y) {
    currentX = x;
    currentY = y;

    document.getElementById('dispX').textContent = x;
    document.getElementById('dispY').textContent = y;

    const targetX = toSvgX(x);
    const targetY = toSvgY(y);

    const lineX = document.getElementById('lineX');
    const lineY = document.getElementById('lineY');
    const targetDot = document.getElementById('targetDot');

    // Update Across line (from Origin to (x, 0))
    lineX.setAttribute('x1', ORIGIN_X);
    lineX.setAttribute('y1', ORIGIN_Y);
    lineX.setAttribute('x2', targetX);
    lineX.setAttribute('y2', ORIGIN_Y);

    // Update Up line (from (x, 0) to (x, y))
    lineY.setAttribute('x1', targetX);
    lineY.setAttribute('y1', ORIGIN_Y);
    lineY.setAttribute('x2', targetX);
    lineY.setAttribute('y2', targetY);

    // Update Point
    targetDot.setAttribute('cx', targetX);
    targetDot.setAttribute('cy', targetY);

    // Update preset active styling
    const btns = document.querySelectorAll('.preset-btn');
    btns.forEach(btn => {
      if (btn.textContent === `(${x}, ${y})`) {
        btn.classList.add('active');
      } else {
        btn.classList.remove('active');
      }
    });
  }

  setPoint(4, 0);
</script>
</body>
</html>

Next time you look at a grid, pick any spot and practice saying its across-and-up address out loud!

math

Reviewing Coordinates in the First Quadrant. Plot and read positive (x, y) coordinates on a standard coordinate grid.

Coordinate plane: Plotting and reading points in the first quadrant

Graph and read points on a coordinate plane (First Quadrant)

Coordinate Challenge: Reasoning and plotting in the First Quadrant

Instruction should progress using the Concrete-Pictorial-Abstract (CPA) framework. Begin with physical floor grids or pegboards where learners physically step 'along the corridor' (horizontal $x$-movement) before moving 'up the stairs' (vertical $y$-movement). Emphasize precise vocabulary so students habitually identify the $x$-coordinate first. Reinforce zero-value coordinates through explicit non-examples and diagnostic questions comparing $(a, 0)$ with $(0, a)$.

Reviewing Coordinates in the First Quadrant

The Coordinate Grid

Reading Coordinates