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 asking your friends to name their favorite fruit. Instead of writing numbers, what if you drew a little picture for each friend?

A **picture graph** uses pictures or symbols to show data, which is just information we collect. Every picture graph has a **key** that tells you what each picture means.

<!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>Reading a Picture Graph</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

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

    .graph-container {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .key-card {
      background: #ffffff;
      border: 2px solid #22b7ff;
      border-radius: 12px;
      padding: 8px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.15);
    }

    .key-title {
      font-weight: 700;
      font-size: 14px;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .key-val {
      font-size: 15px;
      font-weight: 600;
      background: #eef9ff;
      padding: 4px 10px;
      border-radius: 8px;
      color: #0284c7;
    }

    .graph-body {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .row-btn {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      transition: border-color 0.25s ease, background-color 0.25s ease;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    .row-btn.active {
      border-color: #22b7ff;
      background: #f0f9ff;
    }

    .label-col {
      width: 75px;
      font-weight: 600;
      font-size: 15px;
      text-align: left;
    }

    .symbols-col {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 8px;
      flex-wrap: wrap;
    }

    .item-unit {
      position: relative;
      font-size: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s ease;
    }

    .item-tag {
      position: absolute;
      top: -12px;
      font-size: 11px;
      font-weight: 700;
      background: #22b7ff;
      color: #ffffff;
      padding: 1px 5px;
      border-radius: 6px;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.25s ease, transform 0.25s ease;
      pointer-events: none;
    }

    .row-btn.active .item-tag {
      opacity: 1;
      transform: translateY(0);
    }

    .total-badge {
      min-width: 52px;
      text-align: right;
      font-weight: 700;
      font-size: 16px;
      color: #6b7280;
      transition: color 0.25s ease;
    }

    .row-btn.active .total-badge {
      color: #0284c7;
    }

    .calc-display {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 600;
      color: #1e2945;
      min-height: 48px;
    }

    .calc-highlight {
      color: #0284c7;
      background: #eef9ff;
      padding: 2px 8px;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <div class="graph-container">
    <div class="key-card">
      <span class="key-title">🔑 KEY</span>
      <span class="key-val">1 picture = 2 people</span>
    </div>

    <div class="graph-body">
      <div class="row-btn active" onclick="selectRow(0)" data-count="3" data-name="Apples">
        <div class="label-col">Apples</div>
        <div class="symbols-col">
          <div class="item-unit">🍎<span class="item-tag">+2</span></div>
          <div class="item-unit">🍎<span class="item-tag">+2</span></div>
          <div class="item-unit">🍎<span class="item-tag">+2</span></div>
        </div>
        <div class="total-badge">= 6</div>
      </div>

      <div class="row-btn" onclick="selectRow(1)" data-count="2" data-name="Bananas">
        <div class="label-col">Bananas</div>
        <div class="symbols-col">
          <div class="item-unit">🍌<span class="item-tag">+2</span></div>
          <div class="item-unit">🍌<span class="item-tag">+2</span></div>
        </div>
        <div class="total-badge">= 4</div>
      </div>

      <div class="row-btn" onclick="selectRow(2)" data-count="4" data-name="Oranges">
        <div class="label-col">Oranges</div>
        <div class="symbols-col">
          <div class="item-unit">🍊<span class="item-tag">+2</span></div>
          <div class="item-unit">🍊<span class="item-tag">+2</span></div>
          <div class="item-unit">🍊<span class="item-tag">+2</span></div>
          <div class="item-unit">🍊<span class="item-tag">+2</span></div>
        </div>
        <div class="total-badge">= 8</div>
      </div>
    </div>

    <div class="calc-display" id="calcBox">
      <span>3 pictures × 2</span>
      <span>=</span>
      <span class="calc-highlight">6 people</span>
    </div>
  </div>

  <script>
    const data = [
      { name: "Apples", count: 3, total: 6 },
      { name: "Bananas", count: 2, total: 4 },
      { name: "Oranges", count: 4, total: 8 }
    ];

    function selectRow(idx) {
      const rows = document.querySelectorAll('.row-btn');
      rows.forEach((r, i) => {
        r.classList.toggle('active', i === idx);
      });

      const d = data[idx];
      const calcBox = document.getElementById('calcBox');
      calcBox.innerHTML = `<span>${d.count} pictures × 2</span><span>=</span><span class="calc-highlight">${d.total} people</span>`;
    }
  </script>
</body>
</html>

How do we find out how many people picked apples? We follow two simple steps.

Always look at the **key** first! **At Early Level** (P1), each picture or symbol corresponds to exactly one object (a **1-to-1 correspondence**, where $1\text{ symbol} = 1\text{ item}$).

Now that we know each picture counts as one, how do we count the rows?

Find the row you want and count each picture from left to right: 1, 2, 3, 4. That means 4 friends chose apples!

<!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>Reading a Picture Graph</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

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

    .main {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Tabs */
    .tabs {
      display: flex;
      gap: 8px;
      justify-content: center;
    }

    .tab-btn {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .tab-btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 4px 10px rgba(34, 183, 255, 0.3);
    }

    /* Graph Board */
    .graph-card {
      background: #ffffff;
      border-radius: 16px;
      padding: 16px;
      border: 1px solid #e2e8f0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .graph-row {
      display: flex;
      align-items: center;
      border-radius: 12px;
      padding: 8px 12px;
      background: #f8fafc;
      border: 2px solid transparent;
      transition: all 0.25s ease;
      cursor: pointer;
    }

    .graph-row.active {
      background: #f0f9ff;
      border-color: #22b7ff;
    }

    .row-label {
      width: 85px;
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
      color: #1e2945;
    }

    .row-items {
      display: flex;
      flex: 1;
      gap: 8px;
      align-items: center;
    }

    .fruit-slot {
      position: relative;
      width: 44px;
      height: 44px;
      background: #ffffff;
      border: 1.5px dashed #cbd5e1;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      transition: transform 0.2s ease, border-color 0.2s ease;
    }

    .graph-row.active .fruit-slot.filled {
      border-style: solid;
      border-color: #93c5fd;
    }

    /* Number badge */
    .count-badge {
      position: absolute;
      top: -8px;
      right: -8px;
      width: 20px;
      height: 20px;
      background: #22b7ff;
      color: #ffffff;
      font-size: 12px;
      font-weight: 800;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: scale(0.5);
      transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
      box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    }

    .fruit-slot.counted .count-badge {
      opacity: 1;
      transform: scale(1);
    }

    .fruit-slot.current {
      box-shadow: 0 0 0 3px #22b7ff;
      animation: pulse 0.8s infinite alternate;
    }

    @keyframes pulse {
      0% { transform: scale(1); }
      100% { transform: scale(1.08); }
    }

    /* Hand pointer */
    .pointer-hand {
      position: absolute;
      bottom: -16px;
      font-size: 20px;
      opacity: 0;
      transform: translateY(6px);
      transition: all 0.25s ease;
      pointer-events: none;
      z-index: 2;
    }

    .fruit-slot.current .pointer-hand {
      opacity: 1;
      transform: translateY(0);
    }

    /* Footer Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 4px;
    }

    .total-pill {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      padding: 6px 14px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .total-num {
      color: #22b7ff;
      font-size: 18px;
      min-width: 14px;
      text-align: center;
    }

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

    .action-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: all 0.15s ease;
    }

    .action-btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .action-btn.primary {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
    }

    .action-btn.primary:hover {
      background: #009be5;
    }
  </style>
</head>
<body>

  <div class="main">
    
    <div class="tabs">
      <button class="tab-btn active" onclick="selectRow(0)">🍎 Apples</button>
      <button class="tab-btn" onclick="selectRow(1)">🍌 Bananas</button>
      <button class="tab-btn" onclick="selectRow(2)">🍊 Oranges</button>
    </div>

    
    <div class="graph-card">
      
      <div class="graph-row active" id="row-0" onclick="selectRow(0)">
        <div class="row-label">🍎 Apples</div>
        <div class="row-items">
          <div class="fruit-slot filled" id="slot-0-0">
            🍎
            <div class="count-badge">1</div>
            <div class="pointer-hand">👆</div>
          </div>
          <div class="fruit-slot filled" id="slot-0-1">
            🍎
            <div class="count-badge">2</div>
            <div class="pointer-hand">👆</div>
          </div>
          <div class="fruit-slot filled" id="slot-0-2">
            🍎
            <div class="count-badge">3</div>
            <div class="pointer-hand">👆</div>
          </div>
          <div class="fruit-slot filled" id="slot-0-3">
            🍎
            <div class="count-badge">4</div>
            <div class="pointer-hand">👆</div>
          </div>
        </div>
      </div>

      
      <div class="graph-row" id="row-1" onclick="selectRow(1)">
        <div class="row-label">🍌 Bananas</div>
        <div class="row-items">
          <div class="fruit-slot filled" id="slot-1-0">
            🍌
            <div class="count-badge">1</div>
            <div class="pointer-hand">👆</div>
          </div>
          <div class="fruit-slot filled" id="slot-1-1">
            🍌
            <div class="count-badge">2</div>
            <div class="pointer-hand">👆</div>
          </div>
          <div class="fruit-slot"></div>
          <div class="fruit-slot"></div>
        </div>
      </div>

      
      <div class="graph-row" id="row-2" onclick="selectRow(2)">
        <div class="row-label">🍊 Oranges</div>
        <div class="row-items">
          <div class="fruit-slot filled" id="slot-2-0">
            🍊
            <div class="count-badge">1</div>
            <div class="pointer-hand">👆</div>
          </div>
          <div class="fruit-slot filled" id="slot-2-1">
            🍊
            <div class="count-badge">2</div>
            <div class="pointer-hand">👆</div>
          </div>
          <div class="fruit-slot filled" id="slot-2-2">
            🍊
            <div class="count-badge">3</div>
            <div class="pointer-hand">👆</div>
          </div>
          <div class="fruit-slot"></div>
        </div>
      </div>
    </div>

    
    <div class="controls">
      <div class="total-pill">
        Total: <span class="total-num" id="totalDisplay">0</span>
      </div>
      <div class="btn-group">
        <button class="action-btn" onclick="resetCount()">↺ Reset</button>
        <button class="action-btn primary" id="playBtn" onclick="togglePlay()">▶ Count</button>
      </div>
    </div>
  </div>

  <script>
    const counts = [4, 2, 3];
    let activeRow = 0;
    let currentStep = 0;
    let timer = null;
    let isPlaying = false;

    function selectRow(index) {
      if (activeRow === index && isPlaying) return;
      activeRow = index;
      stopCount();
      updateUI();
      startCount();
    }

    function updateUI() {
      // Update tab buttons
      const tabs = document.querySelectorAll('.tab-btn');
      tabs.forEach((tab, i) => {
        tab.classList.toggle('active', i === activeRow);
      });

      // Update rows
      for (let r = 0; r < 3; r++) {
        const rowEl = document.getElementById(`row-${r}`);
        rowEl.classList.toggle('active', r === activeRow);

        // Clear slot states
        for (let c = 0; c < counts[r]; c++) {
          const slot = document.getElementById(`slot-${r}-${c}`);
          if (slot) {
            slot.classList.remove('counted', 'current');
          }
        }
      }

      currentStep = 0;
      document.getElementById('totalDisplay').textContent = '0';
    }

    function stepForward() {
      const max = counts[activeRow];
      
      // Clear previous current highlight
      if (currentStep > 0 && currentStep <= max) {
        const prevSlot = document.getElementById(`slot-${activeRow}-${currentStep - 1}`);
        if (prevSlot) prevSlot.classList.remove('current');
      }

      if (currentStep < max) {
        const slot = document.getElementById(`slot-${activeRow}-${currentStep}`);
        if (slot) {
          slot.classList.add('counted', 'current');
        }
        currentStep++;
        document.getElementById('totalDisplay').textContent = currentStep;
      } else {
        // Finished counting row
        stopCount();
      }
    }

    function startCount() {
      isPlaying = true;
      document.getElementById('playBtn').innerHTML = '⏸ Pause';
      stepForward();
      timer = setInterval(() => {
        if (currentStep < counts[activeRow]) {
          stepForward();
        } else {
          stopCount();
        }
      }, 900);
    }

    function stopCount() {
      isPlaying = false;
      clearInterval(timer);
      document.getElementById('playBtn').innerHTML = '▶ Count';
      // Remove current bouncing pointer
      if (currentStep > 0 && currentStep <= counts[activeRow]) {
        const slot = document.getElementById(`slot-${activeRow}-${currentStep - 1}`);
        if (slot) slot.classList.remove('current');
      }
    }

    function togglePlay() {
      if (isPlaying) {
        stopCount();
      } else {
        if (currentStep >= counts[activeRow]) {
          resetCount();
        }
        startCount();
      }
    }

    function resetCount() {
      stopCount();
      currentStep = 0;
      for (let c = 0; c < counts[activeRow]; c++) {
        const slot = document.getElementById(`slot-${activeRow}-${c}`);
        if (slot) slot.classList.remove('counted', 'current');
      }
      document.getElementById('totalDisplay').textContent = '0';
    }

    // Auto-start initial apple count on load
    window.addEventListener('load', () => {
      setTimeout(startCount, 400);
    });
  </script>
</body>
</html>

Be careful not to count too fast! Touch each picture with your finger as you say each number out loud so you do not skip any.

Look at the pet graph below to see our class pets. Can you find how many cats there are?

<!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>Reading a Picture Graph</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;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
  }

  .graph-board {
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-weight: 700;
    font-size: 15px;
  }

  .key-tag {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
  }

  .chart-area {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .row-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: #f8fafc;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  .row-item.active {
    background: #f0f9ff;
    border-color: #22b7ff;
  }

  .label-box {
    width: 60px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .icons-track {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .pet-cell {
    position: relative;
    width: 36px;
    height: 36px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }

  .count-bubble {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: #22b7ff;
    color: #ffffff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .row-item.active .count-bubble {
    opacity: 1;
    transform: scale(1);
  }

  .total-badge {
    width: 34px;
    height: 34px;
    background: #f1f5f9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    color: #64748b;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
  }

  .row-item.active .total-badge {
    background: #22b7ff;
    color: #ffffff;
    border-color: #22b7ff;
  }

  .nav-tabs {
    display: flex;
    gap: 6px;
    justify-content: center;
  }

  .tab-btn {
    flex: 1;
    padding: 8px 4px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #1e2945;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }

  .tab-btn.active {
    background: #1e2945;
    border-color: #1e2945;
    color: #ffffff;
  }
</style>
</head>
<body>

<div class="graph-board">
  <div class="header-bar">
    <span>Class Pets Graph</span>
    <span class="key-tag">Key: 1 icon = 1 pet</span>
  </div>

  <div class="chart-area" id="chart">
    <div class="row-item active" data-index="0">
      <div class="label-box">🐱 Cat</div>
      <div class="icons-track">
        <div class="pet-cell">🐱<span class="count-bubble" style="transition-delay: 0.05s">1</span></div>
        <div class="pet-cell">🐱<span class="count-bubble" style="transition-delay: 0.15s">2</span></div>
        <div class="pet-cell">🐱<span class="count-bubble" style="transition-delay: 0.25s">3</span></div>
        <div class="pet-cell">🐱<span class="count-bubble" style="transition-delay: 0.35s">4</span></div>
        <div class="pet-cell">🐱<span class="count-bubble" style="transition-delay: 0.45s">5</span></div>
      </div>
      <div class="total-badge">5</div>
    </div>

    <div class="row-item" data-index="1">
      <div class="label-box">🐶 Dog</div>
      <div class="icons-track">
        <div class="pet-cell">🐶<span class="count-bubble" style="transition-delay: 0.05s">1</span></div>
        <div class="pet-cell">🐶<span class="count-bubble" style="transition-delay: 0.15s">2</span></div>
        <div class="pet-cell">🐶<span class="count-bubble" style="transition-delay: 0.25s">3</span></div>
      </div>
      <div class="total-badge">3</div>
    </div>

    <div class="row-item" data-index="2">
      <div class="label-box">🐟 Fish</div>
      <div class="icons-track">
        <div class="pet-cell">🐟<span class="count-bubble" style="transition-delay: 0.05s">1</span></div>
        <div class="pet-cell">🐟<span class="count-bubble" style="transition-delay: 0.15s">2</span></div>
        <div class="pet-cell">🐟<span class="count-bubble" style="transition-delay: 0.25s">3</span></div>
        <div class="pet-cell">🐟<span class="count-bubble" style="transition-delay: 0.35s">4</span></div>
      </div>
      <div class="total-badge">4</div>
    </div>

    <div class="row-item" data-index="3">
      <div class="label-box">🦜 Bird</div>
      <div class="icons-track">
        <div class="pet-cell">🦜<span class="count-bubble" style="transition-delay: 0.05s">1</span></div>
        <div class="pet-cell">🦜<span class="count-bubble" style="transition-delay: 0.15s">2</span></div>
      </div>
      <div class="total-badge">2</div>
    </div>
  </div>

  <div class="nav-tabs">
    <button class="tab-btn active" data-index="0">🐱 Cat</button>
    <button class="tab-btn" data-index="1">🐶 Dog</button>
    <button class="tab-btn" data-index="2">🐟 Fish</button>
    <button class="tab-btn" data-index="3">🦜 Bird</button>
  </div>
</div>

<script>
  const rows = document.querySelectorAll('.row-item');
  const tabs = document.querySelectorAll('.tab-btn');

  function selectRow(index) {
    rows.forEach((r, i) => r.classList.toggle('active', i === index));
    tabs.forEach((t, i) => t.classList.toggle('active', i === index));
  }

  rows.forEach((row, i) => {
    row.addEventListener('click', () => selectRow(i));
  });

  tabs.forEach((tab, i) => {
    tab.addEventListener('click', () => selectRow(i));
  });
</script>

</body>
</html>

We count 1, 2, 3, 4, 5 cat pictures, so there are 5 cats. Whenever you see a picture graph, check the key and count the pictures one by one!

math

Reading and Interpreting a Picture Graph. Read symbols on a pictograph to find the count for each category.

What is a Pictogram? - Early and First Level Maths & Numeracy

Interpret Picture Graphs (1-to-1 Representation)

Reading Picture Graphs

At Early Level (Primary 1), instruction should bridge the concrete-representational-abstract (CRA) continuum. Begin with physical object graphs (e.g., real shoes, coloured blocks, or unifix cubes placed in columns) before moving to picture cards and printed pictographs. Ensure all symbols are uniformly sized and spaced on a grid to prevent visual distortions where longer rows might be mistaken for higher quantities. Explicitly model touch-counting (one-to-one correspondence) and verbalising answers using complete mathematical language (e.g., 'There are 4 apples in the apple category').

Reading and Interpreting a Picture Graph

What is a Picture Graph?

Step 1: Check the Key

Step 2: Count the Pictures