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 looked closely at an ice cube tray, a waffle, or a checkerboard?

They are all made of straight lines that cross each other to make tidy little squares called a **grid**.

A **row** is a line of boxes that goes side to side, from left to right.

Think of a row of sleepy ducks swimming straight across a calm pond!

<!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, sans-serif;
    background: #f0f9ff;
    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;
  }

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

  .toggle-btn {
    appearance: none;
    border: 2px solid transparent;
    background: #ffffff;
    color: #64748b;
    font-size: 15px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .toggle-btn.active-row {
    background: #f59e0b;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
  }

  .toggle-btn.active-col {
    background: #0284c7;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
  }

  .pond-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    max-width: 340px;
    width: 100%;
  }

  .pond-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    background: #e0f2fe;
    padding: 12px;
    border-radius: 16px;
    width: 100%;
  }

  /* Overlay highlight bands */
  .highlight-band {
    position: absolute;
    border-radius: 12px;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    z-index: 1;
  }

  .highlight-band.row-mode {
    left: 8px;
    right: 8px;
    height: calc((100% - 44px) / 3);
    background: rgba(245, 158, 11, 0.22);
    box-shadow: inset 0 0 0 2px #f59e0b;
    opacity: 1;
  }

  .highlight-band.col-mode {
    top: 8px;
    bottom: 8px;
    width: calc((100% - 44px) / 3);
    background: rgba(2, 132, 199, 0.22);
    box-shadow: inset 0 0 0 2px #0284c7;
    opacity: 1;
  }

  .duck-cell {
    position: relative;
    z-index: 2;
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
  }

  .duck-cell:hover {
    background: #ffffff;
  }

  .index-pills {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    width: 100%;
    justify-content: center;
  }

  .index-pill {
    flex: 1;
    max-width: 64px;
    appearance: none;
    border: none;
    padding: 6px 0;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    background: #f1f5f9;
    color: #64748b;
    transition: all 0.2s ease;
    text-align: center;
  }

  .index-pill.active.row-theme {
    background: #fef3c7;
    color: #b45309;
    box-shadow: inset 0 0 0 1.5px #f59e0b;
  }

  .index-pill.active.col-theme {
    background: #e0f2fe;
    color: #0369a1;
    box-shadow: inset 0 0 0 1.5px #0284c7;
  }

  .direction-guide {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #475569;
  }

  .direction-guide span.arrow {
    font-size: 16px;
    font-weight: 900;
  }
</style>
</head>
<body>

  <div class="controls">
    <button id="rowBtn" class="toggle-btn active-row" onclick="setMode('row')">
      <span>Row</span> ➔
    </button>
    <button id="colBtn" class="toggle-btn" onclick="setMode('col')">
      <span>Column</span> ⬇
    </button>
  </div>

  <div class="pond-card">
    <div class="pond-grid" id="grid">
      <div class="highlight-band" id="band"></div>

      <div class="duck-cell" onclick="selectIndex(0)">🦆</div>
      <div class="duck-cell" onclick="selectIndex(0)">🦆</div>
      <div class="duck-cell" onclick="selectIndex(0)">🦆</div>

      <div class="duck-cell" onclick="selectIndex(1)">🦆</div>
      <div class="duck-cell" onclick="selectIndex(1)">🦆</div>
      <div class="duck-cell" onclick="selectIndex(1)">🦆</div>

      <div class="duck-cell" onclick="selectIndex(2)">🦆</div>
      <div class="duck-cell" onclick="selectIndex(2)">🦆</div>
      <div class="duck-cell" onclick="selectIndex(2)">🦆</div>
    </div>

    <div class="index-pills">
      <button class="index-pill active row-theme" id="pill0" onclick="selectIndex(0)">1</button>
      <button class="index-pill row-theme" id="pill1" onclick="selectIndex(1)">2</button>
      <button class="index-pill row-theme" id="pill2" onclick="selectIndex(2)">3</button>
    </div>

    <div class="direction-guide" id="guide">
      <span id="guideText">Across</span>
      <span class="arrow" id="guideArrow">➔</span>
    </div>
  </div>

<script>
  let currentMode = 'row';
  let currentIndex = 0;

  const band = document.getElementById('band');
  const rowBtn = document.getElementById('rowBtn');
  const colBtn = document.getElementById('colBtn');
  const guideText = document.getElementById('guideText');
  const guideArrow = document.getElementById('guideArrow');
  const pills = [
    document.getElementById('pill0'),
    document.getElementById('pill1'),
    document.getElementById('pill2')
  ];

  function update() {
    // Buttons
    if (currentMode === 'row') {
      rowBtn.className = 'toggle-btn active-row';
      colBtn.className = 'toggle-btn';
      guideText.textContent = 'Across';
      guideArrow.textContent = '➔';
      guideArrow.style.color = '#f59e0b';
    } else {
      rowBtn.className = 'toggle-btn';
      colBtn.className = 'toggle-btn active-col';
      guideText.textContent = 'Down';
      guideArrow.textContent = '⬇';
      guideArrow.style.color = '#0284c7';
    }

    // Band position
    if (currentMode === 'row') {
      band.className = 'highlight-band row-mode';
      band.style.left = '8px';
      band.style.right = '8px';
      band.style.width = 'auto';
      // Calculate top offset: 8px padding + index * (height + 10px gap)
      band.style.top = `calc(8px + ${currentIndex} * ((100% - 16px - 20px) / 3 + 10px))`;
      band.style.bottom = 'auto';
    } else {
      band.className = 'highlight-band col-mode';
      band.style.top = '8px';
      band.style.bottom = '8px';
      band.style.height = 'auto';
      // Calculate left offset: 8px padding + index * (width + 10px gap)
      band.style.left = `calc(8px + ${currentIndex} * ((100% - 16px - 20px) / 3 + 10px))`;
      band.style.right = 'auto';
    }

    // Pills
    pills.forEach((pill, idx) => {
      pill.className = 'index-pill ' + (currentMode === 'row' ? 'row-theme' : 'col-theme');
      if (idx === currentIndex) {
        pill.classList.add('active');
      }
    });
  }

  function setMode(mode) {
    currentMode = mode;
    update();
  }

  function selectIndex(idx) {
    currentIndex = idx;
    update();
  }

  // Auto cycle on initial view for passive demonstration
  let timer = setInterval(() => {
    currentIndex = (currentIndex + 1) % 3;
    update();
  }, 2400);

  // Stop auto cycle on user interaction
  document.body.addEventListener('pointerdown', () => {
    if (timer) {
      clearInterval(timer);
      timer = null;
    }
  }, { once: true });

  update();
</script>
</body>
</html>

What happens when the lines stand tall from top to bottom instead?

A **column** is a line of boxes that goes straight up and down, from top to bottom.

You can remember this because tall, strong stone pillars that hold up giant roofs are called **columns**!

<!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>Rows and Columns</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      background: #fbf7ff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
      gap: 16px;
    }

    .nav-tabs {
      display: flex;
      background: #ede4f9;
      padding: 4px;
      border-radius: 12px;
      gap: 4px;
    }

    .tab-btn {
      border: none;
      background: transparent;
      padding: 8px 16px;
      font-size: 15px;
      font-weight: 600;
      color: #6b7280;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .tab-btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    .stage {
      position: relative;
      width: 100%;
      max-width: 320px;
      aspect-ratio: 1 / 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
      height: 100%;
      padding: 10px;
    }

    .cell {
      background: #ffffff;
      border-radius: 14px;
      box-shadow: 0 3px 8px rgba(30, 41, 69, 0.06);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
    }

    /* Highlighting classes */
    .cell.row-active {
      background: #ffedd5;
      box-shadow: 0 4px 12px rgba(234, 88, 12, 0.2);
    }

    .cell.col-active {
      background: #e0f2fe;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.2);
    }

    .cell.both-active {
      background: #ede9fe;
      box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
    }

    .label-banner {
      font-size: 16px;
      font-weight: 700;
      height: 24px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .color-row { color: #ea580c; }
    .color-col { color: #0284c7; }
    .color-both { color: #7c3aed; }
  </style>
</head>
<body>

  <div class="nav-tabs">
    <button class="tab-btn active" id="btn-rows">↔ Rows</button>
    <button class="tab-btn" id="btn-cols">↕ Columns</button>
    <button class="tab-btn" id="btn-grid">⊞ Grid</button>
  </div>

  <div class="stage">
    <div class="grid-container" id="grid">
      
      <div class="cell" data-r="0" data-c="0">🍎</div>
      <div class="cell" data-r="0" data-c="1">🍊</div>
      <div class="cell" data-r="0" data-c="2">🍋</div>
      
      <div class="cell" data-r="1" data-c="0">🍉</div>
      <div class="cell" data-r="1" data-c="1">🍇</div>
      <div class="cell" data-r="1" data-c="2">🍓</div>
      
      <div class="cell" data-r="2" data-c="0">🍒</div>
      <div class="cell" data-r="2" data-c="1">🍑</div>
      <div class="cell" data-r="2" data-c="2">🍍</div>
    </div>
  </div>

  <div class="label-banner" id="status-label">
    <span class="color-row">↔ Across</span>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    let mode = 'rows';
    let step = 0;
    let timer = null;

    const cells = $$('.cell');
    const label = $('#status-label');

    const modes = {
      rows: {
        text: '↔ Across',
        class: 'color-row',
        steps: 3
      },
      cols: {
        text: '↕ Up & Down',
        class: 'color-col',
        steps: 3
      },
      grid: {
        text: '⊞ Rows & Columns',
        class: 'color-both',
        steps: 1
      }
    };

    function clearHighlights() {
      cells.forEach(c => {
        c.classList.remove('row-active', 'col-active', 'both-active');
      });
    }

    function render() {
      clearHighlights();
      const info = modes[mode];
      label.className = 'label-banner ' + info.class;
      label.textContent = info.text;

      if (mode === 'rows') {
        cells.forEach(c => {
          if (parseInt(c.dataset.r) === step) {
            c.classList.add('row-active');
          }
        });
      } else if (mode === 'cols') {
        cells.forEach(c => {
          if (parseInt(c.dataset.c) === step) {
            c.classList.add('col-active');
          }
        });
      } else {
        cells.forEach(c => {
          c.classList.add('both-active');
        });
      }
    }

    function startLoop() {
      if (timer) clearInterval(timer);
      timer = setInterval(() => {
        if (mode !== 'grid') {
          step = (step + 1) % 3;
          render();
        }
      }, 1500);
    }

    function setMode(newMode) {
      mode = newMode;
      step = 0;
      $$('.tab-btn').forEach(btn => btn.classList.remove('active'));
      if (mode === 'rows') $('#btn-rows').classList.add('active');
      if (mode === 'cols') $('#btn-cols').classList.add('active');
      if (mode === 'grid') $('#btn-grid').classList.add('active');
      render();
      startLoop();
    }

    onTap($('#btn-rows'), () => setMode('rows'));
    onTap($('#btn-cols'), () => setMode('cols'));
    onTap($('#btn-grid'), () => setMode('grid'));

    cells.forEach(c => {
      onTap(c, () => {
        if (mode === 'rows') {
          step = parseInt(c.dataset.r);
        } else if (mode === 'cols') {
          step = parseInt(c.dataset.c);
        }
        render();
        startLoop();
      });
    });

    render();
    startLoop();
  </script>
</body>
</html>

What happens when a row and a column meet on your game board?

When a side-to-side row crosses an up-and-down column, they meet at one exact square.

<!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>Understanding Rows and Columns</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

    body {
      background: #f0fdf4;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
    }

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

    /* Interactive Stepper / Modes */
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      justify-content: center;
    }

    .tab-btn {
      flex: 1;
      padding: 8px 10px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.25s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .tab-btn.active {
      background: #10b981;
      border-color: #10b981;
      color: #ffffff;
      box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25);
    }

    /* Grid Area */
    .grid-board {
      display: grid;
      grid-template-columns: 28px repeat(3, 1fr);
      grid-template-rows: 28px repeat(3, 1fr);
      gap: 8px;
      width: 100%;
      aspect-ratio: 1 / 1;
      max-height: 300px;
      background: #ffffff;
      padding: 12px;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
      position: relative;
    }

    .header-col, .header-row {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
      color: #94a3b8;
      transition: color 0.25s ease;
    }

    .header-col.active {
      color: #3b82f6;
    }

    .header-row.active {
      color: #10b981;
    }

    /* Grid Cells */
    .cell {
      background: #f8fafc;
      border: 2px solid #f1f5f9;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: relative;
      transition: all 0.25s ease;
    }

    .cell-star {
      font-size: 24px;
      opacity: 0;
      transform: scale(0.4);
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      color: #059669;
    }

    /* Highlights */
    .cell.in-row {
      background: #dcfce7;
      border-color: #bbf7d0;
    }

    .cell.in-col {
      background: #dbeafe;
      border-color: #bfdbfe;
    }

    .cell.in-both {
      background: #a7f3d0;
      border-color: #10b981;
      box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
      z-index: 2;
    }

    .cell.in-both .cell-star {
      opacity: 1;
      transform: scale(1);
    }

    /* Status Label */
    .status-pill {
      background: #ffffff;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 700;
      color: #334155;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      min-height: 32px;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }
    .dot-row { background: #10b981; }
    .dot-col { background: #3b82f6; }
    .dot-meet { background: #f59e0b; }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="controls">
      <button class="tab-btn active" id="btn-row" onclick="setMode('row')">↔ Row</button>
      <button class="tab-btn" id="btn-col" onclick="setMode('col')">↕ Column</button>
      <button class="tab-btn" id="btn-meet" onclick="setMode('meet')">✦ Meet</button>
    </div>

    
    <div class="grid-board">
      <div></div>
      <div class="header-col" id="hc-1">A</div>
      <div class="header-col" id="hc-2">B</div>
      <div class="header-col" id="hc-3">C</div>

      <div class="header-row" id="hr-1">1</div>
      <div class="cell" data-r="1" data-c="1"><span class="cell-star">★</span></div>
      <div class="cell" data-r="1" data-c="2"><span class="cell-star">★</span></div>
      <div class="cell" data-r="1" data-c="3"><span class="cell-star">★</span></div>

      <div class="header-row" id="hr-2">2</div>
      <div class="cell" data-r="2" data-c="1"><span class="cell-star">★</span></div>
      <div class="cell" data-r="2" data-c="2"><span class="cell-star">★</span></div>
      <div class="cell" data-r="2" data-c="3"><span class="cell-star">★</span></div>

      <div class="header-row" id="hr-3">3</div>
      <div class="cell" data-r="3" data-c="1"><span class="cell-star">★</span></div>
      <div class="cell" data-r="3" data-c="2"><span class="cell-star">★</span></div>
      <div class="cell" data-r="3" data-c="3"><span class="cell-star">★</span></div>
    </div>

    
    <div class="status-pill" id="status-pill">
      <span class="dot dot-row"></span>
      <span id="status-text">Row: Side-to-Side</span>
    </div>
  </div>

  <script>
    let currentMode = 'row';
    let targetRow = 2;
    let targetCol = 2;

    const cells = document.querySelectorAll('.cell');
    const colHeaders = [null, document.getElementById('hc-1'), document.getElementById('hc-2'), document.getElementById('hc-3')];
    const rowHeaders = [null, document.getElementById('hr-1'), document.getElementById('hr-2'), document.getElementById('hr-3')];
    const colLabels = ['', 'A', 'B', 'C'];

    function render() {
      // Buttons
      document.getElementById('btn-row').classList.toggle('active', currentMode === 'row');
      document.getElementById('btn-col').classList.toggle('active', currentMode === 'col');
      document.getElementById('btn-meet').classList.toggle('active', currentMode === 'meet');

      // Status Pill
      const statusText = document.getElementById('status-text');
      const dot = document.querySelector('.status-pill .dot');

      if (currentMode === 'row') {
        dot.className = 'dot dot-row';
        statusText.textContent = `Row ${targetRow} (Across)`;
      } else if (currentMode === 'col') {
        dot.className = 'dot dot-col';
        statusText.textContent = `Column ${colLabels[targetCol]} (Down)`;
      } else {
        dot.className = 'dot dot-meet';
        statusText.textContent = `Row ${targetRow} × Col ${colLabels[targetCol]}`;
      }

      // Headers
      for (let i = 1; i <= 3; i++) {
        colHeaders[i].classList.toggle('active', (currentMode === 'col' || currentMode === 'meet') && i === targetCol);
        rowHeaders[i].classList.toggle('active', (currentMode === 'row' || currentMode === 'meet') && i === targetRow);
      }

      // Cells
      cells.forEach(cell => {
        const r = parseInt(cell.dataset.r);
        const c = parseInt(cell.dataset.c);

        const isRow = (currentMode === 'row' || currentMode === 'meet') && r === targetRow;
        const isCol = (currentMode === 'col' || currentMode === 'meet') && c === targetCol;

        cell.classList.remove('in-row', 'in-col', 'in-both');

        if (currentMode === 'meet') {
          if (isRow && isCol) {
            cell.classList.add('in-both');
          } else if (isRow) {
            cell.classList.add('in-row');
          } else if (isCol) {
            cell.classList.add('in-col');
          }
        } else if (currentMode === 'row' && isRow) {
          cell.classList.add('in-row');
        } else if (currentMode === 'col' && isCol) {
          cell.classList.add('in-col');
        }
      });
    }

    function setMode(mode) {
      currentMode = mode;
      render();
    }

    cells.forEach(cell => {
      cell.addEventListener('click', () => {
        targetRow = parseInt(cell.dataset.r);
        targetCol = parseInt(cell.dataset.c);
        if (currentMode !== 'meet') {
          currentMode = 'meet';
        }
        render();
      });
    });

    render();
  </script>
</body>
</html>

Try tracing your finger straight across your desk for a row, then slide it straight down for a column!

math

Understanding Rows and Columns. Identify horizontal rows and vertical columns on a grid mat or board.

Movement, Position and Direction - Early Level Maths and Numeracy

Kindergarten & Early Primary Geometry and Spatial Positions: Rows, Columns, and Tables

Position, Direction and Spatial Grids: Early Positional Language and Grid Movement

Teaching rows and columns to P1 / Early Level learners (ages 4-6) requires a Concrete-Pictorial-Abstract (CPA) pedagogical sequence rooted in bodily kinesthetics. Begin with whole-body movement on a large floor grid (e.g., marching across a row, jumping down a column) before moving to manipulatives (placing counters on a tabletop grid) and pictorial representations. Consistent use of physical gestures ('sweep across' for rows, 'slice down' for columns) and child-friendly memory anchors ('Columns hold up the roof', 'Row, row, row your boat across the stream') effectively establishes the positional framework required for future coordinate and map referencing under Curriculum for Excellence MTH 1-18a.

Understanding Rows and Columns

Rows Go Across

Columns Stand Tall

Finding the Spot