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 opening your sock drawer in the morning and seeing a giant messy pile of colorful socks!

To get ready for school, you need to find two socks that go together as a pair.

When two things look completely alike in every way, we call them **identical**.

**Identical** objects share the exact same shape, color, pattern, and size.

<!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>Matching Identical and Similar Objects</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }
    .nav-bar {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }
    .tab-btn {
      flex: 1 1 45%;
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 8px;
      padding: 8px 6px;
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }
    .tab-btn.active {
      border-color: #22b7ff;
      background: #eef9ff;
      color: #0284c7;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.2);
    }
    .stage {
      display: flex;
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border-radius: 12px;
      padding: 16px 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      align-items: center;
      justify-content: space-around;
      gap: 8px;
      min-height: 180px;
    }
    .object-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 140px;
    }
    .item-preview {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100px;
      width: 100px;
    }
    .target-shape {
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .attributes-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: #f8f9fa;
      padding: 8px 12px;
      border-radius: 8px;
      min-width: 110px;
    }
    .attr-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
    }
    .status-icon {
      font-size: 15px;
      font-weight: bold;
    }
    .status-icon.yes {
      color: #10b981;
    }
    .status-icon.no {
      color: #ef4444;
    }
    .result-banner {
      margin-top: 10px;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 15px;
      font-weight: 700;
      text-align: center;
      width: 100%;
      max-width: 480px;
      transition: all 0.2s ease;
    }
    .result-identical {
      background: #ecfdf5;
      color: #065f46;
      border: 1.5px solid #a7f3d0;
    }
    .result-not {
      background: #fef2f2;
      color: #991b1b;
      border: 1.5px solid #fecaca;
    }
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 8px;
    }
    .ctrl-btn {
      background: #ffffff;
      border: 1.5px solid #e6e6e6;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #1e2945;
    }
    .dot-group {
      display: flex;
      gap: 6px;
    }
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #d1d5db;
      cursor: pointer;
      transition: background 0.2s ease;
    }
    .dot.active {
      background: #22b7ff;
      width: 18px;
      border-radius: 4px;
    }
  </style>
</head>
<body>

  <div class="nav-bar">
    <button class="tab-btn active" id="tab0">1. Identical</button>
    <button class="tab-btn" id="tab1">2. Color Differs</button>
    <button class="tab-btn" id="tab2">3. Size Differs</button>
    <button class="tab-btn" id="tab3">4. Shape Differs</button>
  </div>

  <div class="stage">
    
    <div class="object-box">
      <div class="item-preview">
        <svg width="70" height="70" viewBox="0 0 70 70">
          <polygon points="35,5 44,25 66,26 49,40 55,62 35,49 15,62 21,40 4,26 26,25" fill="#f59e0b" stroke="#d97706" stroke-width="2"/>
        </svg>
      </div>
    </div>

    
    <div class="attributes-list">
      <div class="attr-row">
        <span>Shape</span>
        <span class="status-icon yes" id="iconShape">✓</span>
      </div>
      <div class="attr-row">
        <span>Color</span>
        <span class="status-icon yes" id="iconColor">✓</span>
      </div>
      <div class="attr-row">
        <span>Size</span>
        <span class="status-icon yes" id="iconSize">✓</span>
      </div>
    </div>

    
    <div class="object-box">
      <div class="item-preview" id="targetPreview">
        <svg width="70" height="70" viewBox="0 0 70 70">
          <polygon points="35,5 44,25 66,26 49,40 55,62 35,49 15,62 21,40 4,26 26,25" fill="#f59e0b" stroke="#d97706" stroke-width="2"/>
        </svg>
      </div>
    </div>
  </div>

  <div class="result-banner result-identical" id="resultBanner">
    ✓ Identical (Exact Match)
  </div>

  <div class="controls">
    <button class="ctrl-btn" id="playBtn" aria-label="Play/Pause">⏸</button>
    <div class="dot-group">
      <div class="dot active" id="dot0"></div>
      <div class="dot" id="dot1"></div>
      <div class="dot" id="dot2"></div>
      <div class="dot" id="dot3"></div>
    </div>
  </div>

  <script>
    const data = [
      {
        shape: true,
        color: true,
        size: true,
        bannerClass: 'result-identical',
        bannerText: '✓ Identical (Exact Match)',
        svg: `<svg width="70" height="70" viewBox="0 0 70 70">
                <polygon points="35,5 44,25 66,26 49,40 55,62 35,49 15,62 21,40 4,26 26,25" fill="#f59e0b" stroke="#d97706" stroke-width="2"/>
              </svg>`
      },
      {
        shape: true,
        color: false,
        size: true,
        bannerClass: 'result-not',
        bannerText: '✗ Not Identical (Different Color)',
        svg: `<svg width="70" height="70" viewBox="0 0 70 70">
                <polygon points="35,5 44,25 66,26 49,40 55,62 35,49 15,62 21,40 4,26 26,25" fill="#3b82f6" stroke="#1d4ed8" stroke-width="2"/>
              </svg>`
      },
      {
        shape: true,
        color: true,
        size: false,
        bannerClass: 'result-not',
        bannerText: '✗ Not Identical (Different Size)',
        svg: `<svg width="40" height="40" viewBox="0 0 70 70">
                <polygon points="35,5 44,25 66,26 49,40 55,62 35,49 15,62 21,40 4,26 26,25" fill="#f59e0b" stroke="#d97706" stroke-width="2"/>
              </svg>`
      },
      {
        shape: false,
        color: true,
        size: true,
        bannerClass: 'result-not',
        bannerText: '✗ Not Identical (Different Shape)',
        svg: `<svg width="70" height="70" viewBox="0 0 70 70">
                <circle cx="35" cy="35" r="28" fill="#f59e0b" stroke="#d97706" stroke-width="2"/>
              </svg>`
      }
    ];

    let current = 0;
    let playing = true;
    let timer = null;

    function render(idx) {
      current = idx;
      const d = data[idx];

      for (let i = 0; i < 4; i++) {
        document.getElementById(`tab${i}`).classList.toggle('active', i === idx);
        document.getElementById(`dot${i}`).classList.toggle('active', i === idx);
      }

      const iconShape = document.getElementById('iconShape');
      const iconColor = document.getElementById('iconColor');
      const iconSize = document.getElementById('iconSize');

      iconShape.textContent = d.shape ? '✓' : '✗';
      iconShape.className = `status-icon ${d.shape ? 'yes' : 'no'}`;

      iconColor.textContent = d.color ? '✓' : '✗';
      iconColor.className = `status-icon ${d.color ? 'yes' : 'no'}`;

      iconSize.textContent = d.size ? '✓' : '✗';
      iconSize.className = `status-icon ${d.size ? 'yes' : 'no'}`;

      document.getElementById('targetPreview').innerHTML = d.svg;

      const banner = document.getElementById('resultBanner');
      banner.textContent = d.bannerText;
      banner.className = `result-banner ${d.bannerClass}`;
    }

    function next() {
      render((current + 1) % data.length);
    }

    function startAuto() {
      stopAuto();
      timer = setInterval(next, 3200);
      playing = true;
      document.getElementById('playBtn').textContent = '⏸';
    }

    function stopAuto() {
      if (timer) clearInterval(timer);
      playing = false;
      document.getElementById('playBtn').textContent = '▶';
    }

    for (let i = 0; i < 4; i++) {
      document.getElementById(`tab${i}`).addEventListener('click', () => {
        stopAuto();
        render(i);
      });
      document.getElementById(`dot${i}`).addEventListener('click', () => {
        stopAuto();
        render(i);
      });
    }

    document.getElementById('playBtn').addEventListener('click', () => {
      if (playing) {
        stopAuto();
      } else {
        startAuto();
      }
    });

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

What happens if two objects are not exact twins, but still have something in common?

Objects can be **similar** when they share one special feature, even if other parts are different.

You can pair items that share the same **color**, like a red apple and a red ball, or the same **shape**, like a round clock and a round plate.

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

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

    /* Tabs */
    .tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 20px;
      width: 100%;
      max-width: 440px;
    }

    .tab-btn {
      flex: 1;
      padding: 10px 8px;
      font-size: 14px;
      font-weight: 600;
      background: #ffffff;
      color: #6b7280;
      border: 2px solid transparent;
      border-radius: 12px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
      transition: all 0.25s ease;
      text-align: center;
    }

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

    /* Match Display Stage */
    .stage {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 440px;
      position: relative;
    }

    .item-card {
      flex: 1;
      background: #ffffff;
      border-radius: 16px;
      padding: 16px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      border: 2px solid #eef2f6;
      min-height: 150px;
      transition: border-color 0.3s ease;
    }

    .emoji {
      font-size: 54px;
      line-height: 1.1;
      margin-bottom: 8px;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    }

    .property-pill {
      font-size: 12px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      background: #f1f5f9;
      color: #64748b;
      margin-top: 4px;
      transition: all 0.3s ease;
    }

    .property-pill.matched {
      background: #e0f2fe;
      color: #0284c7;
    }

    /* Bridge / Match Indicator */
    .connector {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      z-index: 2;
    }

    .match-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #22b7ff;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 800;
      box-shadow: 0 4px 10px rgba(34, 183, 255, 0.35);
    }

    .match-label {
      font-size: 12px;
      font-weight: 700;
      color: #0284c7;
      background: #e0f2fe;
      padding: 3px 8px;
      border-radius: 10px;
      white-space: nowrap;
    }

    /* Navigation cycle button */
    .cycle-btn {
      margin-top: 20px;
      padding: 10px 20px;
      font-size: 14px;
      font-weight: 600;
      background: #ffffff;
      color: #1e2945;
      border: 1px solid #e2e8f0;
      border-radius: 24px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
      transition: background 0.2s ease;
    }

    .cycle-btn:active {
      background: #f1f5f9;
    }
  </style>
</head>
<body>

  
  <div class="tabs">
    <button class="tab-btn active" onclick="setMode(0)">Identical</button>
    <button class="tab-btn" onclick="setMode(1)">Same Color</button>
    <button class="tab-btn" onclick="setMode(2)">Same Shape</button>
  </div>

  
  <div class="stage">
    
    <div class="item-card">
      <div id="emoji1" class="emoji">🍏</div>
      <div id="prop1" class="property-pill matched">Color + Shape</div>
    </div>

    
    <div class="connector">
      <div class="match-icon">✓</div>
      <div id="matchTag" class="match-label">Identical</div>
    </div>

    
    <div class="item-card">
      <div id="emoji2" class="emoji">🍏</div>
      <div id="prop2" class="property-pill matched">Color + Shape</div>
    </div>
  </div>

  
  <button class="cycle-btn" onclick="nextExample()">
    <span>Next Example</span> →
  </button>

  <script>
    const data = [
      // Identical
      {
        tag: "Identical",
        examples: [
          { e1: "🍏", e2: "🍏", p1: "Color + Shape", p2: "Color + Shape" },
          { e1: "⭐", e2: "⭐", p1: "Color + Shape", p2: "Color + Shape" },
          { e1: "🚗", e2: "🚗", p1: "Color + Shape", p2: "Color + Shape" }
        ]
      },
      // Same Color
      {
        tag: "Same Color",
        examples: [
          { e1: "🍎", e2: "🎈", p1: "Red", p2: "Red" },
          { e1: "🍌", e2: "🐥", p1: "Yellow", p2: "Yellow" },
          { e1: "🐸", e2: "🥦", p1: "Green", p2: "Green" }
        ]
      },
      // Same Shape
      {
        tag: "Same Shape",
        examples: [
          { e1: "⏰", e2: "⚽", p1: "Round", p2: "Round" },
          { e1: "🎲", e2: "📦", p1: "Square", p2: "Square" },
          { e1: "📐", e2: "🍕", p1: "Triangle", p2: "Triangle" }
        ]
      }
    ];

    let currentMode = 0;
    let exampleIndex = 0;

    function render() {
      const modeData = data[currentMode];
      const ex = modeData.examples[exampleIndex % modeData.examples.length];

      document.getElementById("emoji1").textContent = ex.e1;
      document.getElementById("emoji2").textContent = ex.e2;
      document.getElementById("prop1").textContent = ex.p1;
      document.getElementById("prop2").textContent = ex.p2;
      document.getElementById("matchTag").textContent = modeData.tag;

      const buttons = document.querySelectorAll(".tab-btn");
      buttons.forEach((btn, idx) => {
        btn.classList.toggle("active", idx === currentMode);
      });
    }

    function setMode(index) {
      currentMode = index;
      exampleIndex = 0;
      render();
    }

    function nextExample() {
      exampleIndex++;
      render();
    }
  </script>
</body>
</html>

Are you ready to test your detective eyes on a full matching challenge?

Look closely at the items below and decide whether they are **identical** twins or just share a **feature** like color or shape.

<!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: 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: 12px;
    user-select: none;
  }
  .app-container {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  .nav-tabs {
    display: flex;
    gap: 6px;
    width: 100%;
    justify-content: center;
  }
  .tab-btn {
    flex: 1;
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 600;
    border: 2px solid transparent;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
  }
  .tab-btn.active {
    background: #ffffff;
    color: #0284c7;
    border-color: #22b7ff;
    box-shadow: 0 2px 6px rgba(34, 183, 255, 0.15);
  }
  .stage {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }
  .items-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    height: 90px;
    width: 100%;
  }
  .item-box {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .shape {
    transition: all 0.3s ease;
  }
  .shape-circle {
    border-radius: 50%;
  }
  .shape-square {
    border-radius: 8px;
  }
  .shape-triangle {
    width: 0;
    height: 0;
    background: transparent !important;
  }
  .vs-badge {
    font-size: 14px;
    font-weight: 700;
    color: #94a3b8;
  }
  .match-tags {
    display: flex;
    gap: 8px;
    width: 100%;
    justify-content: center;
  }
  .tag {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    transition: all 0.2s ease;
  }
  .tag.match {
    background: #f0fdf4;
    border-color: #86efac;
    color: #16a34a;
  }
  .tag.diff {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
    opacity: 0.6;
  }
  .result-banner {
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    transition: all 0.2s ease;
  }
  .result-identical {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
  }
  .result-similar {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
  }
</style>
</head>
<body>

<div class="app-container">
  <div class="nav-tabs">
    <button class="tab-btn active" onclick="setMode(0)">Identical</button>
    <button class="tab-btn" onclick="setMode(1)">Same Shape</button>
    <button class="tab-btn" onclick="setMode(2)">Same Color</button>
  </div>

  <div class="stage">
    <div class="items-display">
      <div class="item-box" id="itemLeft"></div>
      <div class="vs-badge">&</div>
      <div class="item-box" id="itemRight"></div>
    </div>

    <div class="match-tags">
      <div class="tag" id="tagShape">Shape <span>✓</span></div>
      <div class="tag" id="tagColor">Color <span>✓</span></div>
      <div class="tag" id="tagSize">Size <span>✓</span></div>
    </div>

    <div class="result-banner" id="resultBanner">Identical</div>
  </div>
</div>

<script>
  const modes = [
    {
      left:  { type: 'circle', color: '#22b7ff', size: 64 },
      right: { type: 'circle', color: '#22b7ff', size: 64 },
      shape: true, color: true, size: true,
      label: 'Identical',
      style: 'result-identical'
    },
    {
      left:  { type: 'square', color: '#ff5c5c', size: 64 },
      right: { type: 'square', color: '#22c55e', size: 64 },
      shape: true, color: false, size: true,
      label: 'Similar: Shape',
      style: 'result-similar'
    },
    {
      left:  { type: 'circle', color: '#a855f7', size: 64 },
      right: { type: 'square', color: '#a855f7', size: 64 },
      shape: false, color: true, size: true,
      label: 'Similar: Color',
      style: 'result-similar'
    }
  ];

  let currentIdx = 0;

  function renderItem(data) {
    const el = document.createElement('div');
    el.className = 'shape shape-' + data.type;
    
    if (data.type === 'triangle') {
      el.style.borderLeft = (data.size / 2) + 'px solid transparent';
      el.style.borderRight = (data.size / 2) + 'px solid transparent';
      el.style.borderBottom = data.size + 'px solid ' + data.color;
    } else {
      el.style.width = data.size + 'px';
      el.style.height = data.size + 'px';
      el.style.backgroundColor = data.color;
    }
    return el;
  }

  function setMode(idx) {
    currentIdx = idx;
    const mode = modes[idx];

    // Update buttons
    const btns = document.querySelectorAll('.tab-btn');
    btns.forEach((b, i) => b.classList.toggle('active', i === idx));

    // Render items
    const leftContainer = document.getElementById('itemLeft');
    const rightContainer = document.getElementById('itemRight');
    leftContainer.innerHTML = '';
    rightContainer.innerHTML = '';
    leftContainer.appendChild(renderItem(mode.left));
    rightContainer.appendChild(renderItem(mode.right));

    // Update tags
    updateTag('tagShape', 'Shape', mode.shape);
    updateTag('tagColor', 'Color', mode.color);
    updateTag('tagSize', 'Size', mode.size);

    // Update result
    const banner = document.getElementById('resultBanner');
    banner.textContent = mode.label;
    banner.className = 'result-banner ' + mode.style;
  }

  function updateTag(id, label, isMatch) {
    const el = document.getElementById(id);
    el.className = 'tag ' + (isMatch ? 'match' : 'diff');
    el.innerHTML = label + ' <span>' + (isMatch ? '✓' : '✗') + '</span>';
  }

  setMode(0);
</script>

</body>
</html>

Whenever you sort toys, shoes, or drawings, always look at the shape, color, and size to find the best match.

math

Matching Identical and Similar Objects. Find and pair identical objects or items that share identical visual properties.

Early Level Numeracy and Mathematics: Matching and Sorting Objects

Identify Same and Different Objects (Kindergarten / Early Level Practice)

Early Years Foundation & Primary: Pairing and Matching Collections

To achieve mastery at Early Level (P1) under Curriculum for Excellence (MNU 0-20b), instruction should follow the Concrete-Pictorial-Abstract (CPA) approach. Begin with tactile classroom objects (matching real socks, identical natural items like pinecones or leaves, and coloured counters) before moving to 2D card games and digital representations. Emphasise mathematical talk: prompt learners with questions like 'How do you know they are the same?' and 'What makes them different?' to ensure children develop criteria-based classification and metacognitive awareness.

Matching Identical and Similar Objects

Exactly the Same

Matching by Color and Shape

Spot the Pairs