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 your friend places toys into two mystery boxes and challenges you to guess their secret rule!

To find the **sorting rule**, you become a math detective and look for what every single item in a group shares in common.

<!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, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: transparent;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    height: 100%;
    min-height: 340px;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Navigation Tabs */
  .case-nav {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 360px;
  }
  .case-btn {
    flex: 1;
    padding: 6px 0;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    background: #f1f5f9;
    border: 2px solid transparent;
    border-radius: 8px;
    color: #64748b;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }
  .case-btn.active {
    background: #ffffff;
    border-color: #22b7ff;
    color: #0284c7;
    box-shadow: 0 2px 6px rgba(34, 183, 255, 0.2);
  }

  /* Detective Mystery Stage */
  .stage {
    position: relative;
    width: 100%;
    max-width: 360px;
    height: 170px;
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 10px 16px;
  }

  .badge-clue {
    position: absolute;
    top: -12px;
    left: 16px;
    background: #0284c7;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 12px;
  }

  .item-card {
    width: 64px;
    height: 64px;
    background: #ffffff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .item-card svg {
    width: 44px;
    height: 44px;
    transition: filter 0.3s ease;
  }
  .item-card.highlight {
    box-shadow: 0 0 0 3px #22b7ff, 0 4px 12px rgba(34, 183, 255, 0.3);
  }

  /* Clue Guess Options */
  .rule-prompt {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
  }
  .options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 360px;
  }
  .opt-btn {
    padding: 10px 4px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    color: #334155;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
  }
  .opt-btn.correct {
    background: #f0fdf4;
    border-color: #22c55e;
    color: #15803d;
  }
  .opt-btn.wrong {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #b91c1c;
    opacity: 0.6;
  }

  /* Result text banner */
  .status-text {
    font-size: 13px;
    font-weight: 700;
    height: 18px;
    line-height: 18px;
    text-align: center;
    color: #64748b;
  }
  .status-text.solved {
    color: #15803d;
  }
</style>
</head>
<body>

  
  <div class="case-nav">
    <button class="case-btn active" data-case="0">Mystery 1</button>
    <button class="case-btn" data-case="1">Mystery 2</button>
    <button class="case-btn" data-case="2">Mystery 3</button>
  </div>

  
  <div class="stage">
    <span class="badge-clue">🔍 Clue Group</span>
    <div class="item-card" id="card0"></div>
    <div class="item-card" id="card1"></div>
    <div class="item-card" id="card2"></div>
    <div class="item-card" id="card3"></div>
  </div>

  <div class="rule-prompt">Find the sorting rule:</div>

  
  <div class="options-grid" id="optionsBox"></div>

  
  <div class="status-text" id="statusMsg">Tap a rule to test</div>

  <script>
    const cases = [
      {
        items: [
          '<svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="16" fill="#22b7ff"/></svg>',
          '<svg viewBox="0 0 40 40"><rect x="6" y="6" width="28" height="28" rx="4" fill="#22b7ff"/></svg>',
          '<svg viewBox="0 0 40 40"><polygon points="20,4 36,36 4,36" fill="#22b7ff"/></svg>',
          '<svg viewBox="0 0 40 40"><polygon points="20,4 25,15 37,16 28,25 31,37 20,30 9,37 12,25 3,16 15,15" fill="#22b7ff"/></svg>'
        ],
        options: ["🔵 Color: Blue", "🔺 3 Sides", "⭕ Round"],
        answerIndex: 0,
        ruleName: "Rule: All Blue"
      },
      {
        items: [
          '<svg viewBox="0 0 40 40"><rect x="6" y="6" width="28" height="28" rx="4" fill="#ef4444"/></svg>',
          '<svg viewBox="0 0 40 40"><rect x="6" y="6" width="28" height="28" rx="4" fill="#22c55e"/></svg>',
          '<svg viewBox="0 0 40 40"><rect x="6" y="6" width="28" height="28" rx="4" fill="#eab308"/></svg>',
          '<svg viewBox="0 0 40 40"><rect x="6" y="6" width="28" height="28" rx="4" fill="#a855f7"/></svg>'
        ],
        options: ["🔴 Color: Red", "🟩 4 Sides", "⭐ Stars"],
        answerIndex: 1,
        ruleName: "Rule: 4 Sides"
      },
      {
        items: [
          '<svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="16" fill="#ef4444"/></svg>',
          '<svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="16" fill="#22c55e"/></svg>',
          '<svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="16" fill="#3b82f6"/></svg>',
          '<svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="16" fill="#eab308"/></svg>'
        ],
        options: ["🟢 Color: Green", "⬛ Squares", "⭕ Round"],
        answerIndex: 2,
        ruleName: "Rule: Round Shapes"
      }
    ];

    let currentCase = 0;

    function renderCase(idx) {
      currentCase = idx;
      const c = cases[idx];

      // Update mystery stage items
      for (let i = 0; i < 4; i++) {
        const card = document.getElementById('card' + i);
        card.innerHTML = c.items[i];
        card.classList.remove('highlight');
      }

      // Update options
      const optBox = document.getElementById('optionsBox');
      optBox.innerHTML = '';
      c.options.forEach((optText, i) => {
        const btn = document.createElement('button');
        btn.className = 'opt-btn';
        btn.textContent = optText;
        btn.onclick = () => selectOption(i, btn);
        optBox.appendChild(btn);
      });

      // Update status
      const status = document.getElementById('statusMsg');
      status.textContent = 'Tap a rule to test';
      status.classList.remove('solved');
    }

    function selectOption(chosenIdx, btn) {
      const c = cases[currentCase];
      const allBtns = document.querySelectorAll('.opt-btn');

      if (chosenIdx === c.answerIndex) {
        allBtns.forEach(b => b.classList.remove('wrong', 'correct'));
        btn.classList.add('correct');
        for (let i = 0; i < 4; i++) {
          document.getElementById('card' + i).classList.add('highlight');
        }
        const status = document.getElementById('statusMsg');
        status.textContent = '✓ ' + c.ruleName;
        status.classList.add('solved');
      } else {
        btn.classList.add('wrong');
        for (let i = 0; i < 4; i++) {
          document.getElementById('card' + i).classList.remove('highlight');
        }
        const status = document.getElementById('statusMsg');
        status.textContent = '✗ Not shared by all';
        status.classList.remove('solved');
      }
    }

    // Tabs setup
    document.querySelectorAll('.case-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        document.querySelectorAll('.case-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        renderCase(parseInt(btn.dataset.case, 10));
      });
    });

    // Initialize
    renderCase(0);
  </script>
</body>
</html>

What clues should a detective look for first when solving a sorting mystery?

First, check the easiest clues: look to see if the objects share the same **color**, **shape**, or **size**.

A **sorting rule** is the special reason why items belong together in a set.

<!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>Sorting Rule</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: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    /* Tabs */
    .tabs {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 420px;
      justify-content: center;
    }

    .tab-btn {
      flex: 1;
      padding: 8px 12px;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      font-size: 13px;
      font-weight: 700;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
    }

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

    /* Main Board */
    .board {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      margin: 8px 0;
    }

    /* Sorting Set Area */
    .set-container {
      width: 100%;
      background: #ffffff;
      border: 2px dashed #94a3b8;
      border-radius: 16px;
      padding: 12px 16px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 130px;
      transition: border-color 0.3s ease;
    }

    .set-container.solved {
      border: 2px solid #10b981;
      background: #f0fdf4;
    }

    .badge {
      position: absolute;
      top: -12px;
      background: #1e2945;
      color: #ffffff;
      font-size: 12px;
      font-weight: 700;
      padding: 3px 12px;
      border-radius: 12px;
      letter-spacing: 0.3px;
      transition: background 0.3s ease;
    }

    .set-container.solved .badge {
      background: #10b981;
    }

    .items-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      width: 100%;
      margin-top: 10px;
      min-height: 70px;
      flex-wrap: wrap;
    }

    /* Shape Elements */
    .shape-card {
      width: 56px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .shape-card.placed {
      animation: popIn 0.4s ease forwards;
    }

    @keyframes popIn {
      0% { transform: scale(0.6); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }

    .shape-card svg {
      width: 36px;
      height: 36px;
    }

    /* Interactive Candidates */
    .picker-section {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .prompt-label {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }

    .choices {
      display: flex;
      gap: 16px;
      justify-content: center;
    }

    .choice-btn {
      width: 68px;
      height: 68px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      position: relative;
    }

    .choice-btn:active {
      transform: scale(0.96);
    }

    .choice-btn.correct {
      border-color: #10b981;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    }

    .choice-btn.wrong {
      border-color: #ef4444;
      animation: shake 0.4s ease;
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      20%, 60% { transform: translateX(-4px); }
      40%, 80% { transform: translateX(4px); }
    }

    .choice-btn svg {
      width: 40px;
      height: 40px;
    }

    .feedback-icon {
      position: absolute;
      bottom: -6px;
      right: -6px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      color: white;
      font-size: 11px;
      font-weight: bold;
      display: none;
      align-items: center;
      justify-content: center;
    }

    .choice-btn.correct .feedback-icon {
      display: flex;
      background: #10b981;
    }

    .choice-btn.wrong .feedback-icon {
      display: flex;
      background: #ef4444;
    }
  </style>
</head>
<body>

  
  <div class="tabs">
    <button class="tab-btn active" onclick="loadPuzzle(0)">Rule 1</button>
    <button class="tab-btn" onclick="loadPuzzle(1)">Rule 2</button>
    <button class="tab-btn" onclick="loadPuzzle(2)">Rule 3</button>
  </div>

  
  <div class="board">
    <div class="set-container" id="setContainer">
      <div class="badge" id="ruleBadge">? Mystery Rule</div>
      <div class="items-row" id="inSetRow"></div>
    </div>

    
    <div class="picker-section">
      <div class="prompt-label" id="promptText">Which belongs inside?</div>
      <div class="choices" id="choicesRow"></div>
    </div>
  </div>

  <script>
    const puzzles = [
      {
        ruleText: "Rule: Blue",
        inItems: [
          `<rect width="32" height="32" x="2" y="2" rx="4" fill="#22b7ff"/>`,
          `<circle cx="18" cy="18" r="16" fill="#22b7ff"/>`,
          `<polygon points="18,2 34,34 2,34" fill="#22b7ff"/>`
        ],
        target: {
          svg: `<polygon points="18,2 22,14 34,14 24,22 28,34 18,26 8,34 12,22 2,14 14,14" fill="#22b7ff"/>`,
          correct: true
        },
        decoy: {
          svg: `<polygon points="18,2 22,14 34,14 24,22 28,34 18,26 8,34 12,22 2,14 14,14" fill="#ef4444"/>`,
          correct: false
        }
      },
      {
        ruleText: "Rule: 3 Sides",
        inItems: [
          `<polygon points="18,2 34,34 2,34" fill="#ef4444"/>`,
          `<polygon points="18,2 34,34 2,34" fill="#22b7ff"/>`,
          `<polygon points="18,2 34,34 2,34" fill="#10b981"/>`
        ],
        target: {
          svg: `<polygon points="18,2 34,34 2,34" fill="#eab308"/>`,
          correct: true
        },
        decoy: {
          svg: `<rect width="32" height="32" x="2" y="2" rx="4" fill="#eab308"/>`,
          correct: false
        }
      },
      {
        ruleText: "Rule: Round",
        inItems: [
          `<circle cx="18" cy="18" r="16" fill="#ef4444"/>`,
          `<circle cx="18" cy="18" r="16" fill="#eab308"/>`,
          `<circle cx="18" cy="18" r="16" fill="#10b981"/>`
        ],
        target: {
          svg: `<circle cx="18" cy="18" r="16" fill="#a855f7"/>`,
          correct: true
        },
        decoy: {
          svg: `<polygon points="18,2 34,34 2,34" fill="#a855f7"/>`,
          correct: false
        }
      }
    ];

    let currentIndex = 0;
    let solved = false;

    function createSvg(inner) {
      return `<svg viewBox="0 0 36 36">${inner}</svg>`;
    }

    function loadPuzzle(index) {
      currentIndex = index;
      solved = false;

      // Update tabs
      document.querySelectorAll('.tab-btn').forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });

      const p = puzzles[index];
      const container = document.getElementById('setContainer');
      const badge = document.getElementById('ruleBadge');
      const row = document.getElementById('inSetRow');
      const choices = document.getElementById('choicesRow');

      container.classList.remove('solved');
      badge.textContent = "? Mystery Rule";

      // Render set items
      row.innerHTML = p.inItems.map(item => `
        <div class="shape-card">${createSvg(item)}</div>
      `).join('');

      // Render choices (random order)
      const options = Math.random() > 0.5 ? [p.target, p.decoy] : [p.decoy, p.target];
      choices.innerHTML = options.map(opt => `
        <button class="choice-btn" data-correct="${opt.correct}" onclick="testChoice(this)">
          ${createSvg(opt.svg)}
          <span class="feedback-icon">${opt.correct ? '✓' : '✗'}</span>
        </button>
      `).join('');
    }

    function testChoice(btn) {
      if (solved) return;
      const isCorrect = btn.getAttribute('data-correct') === 'true';

      if (isCorrect) {
        solved = true;
        btn.classList.add('correct');
        const container = document.getElementById('setContainer');
        const badge = document.getElementById('ruleBadge');
        const row = document.getElementById('inSetRow');

        container.classList.add('solved');
        badge.textContent = puzzles[currentIndex].ruleText;

        // Add to group with animation
        const newCard = document.createElement('div');
        newCard.className = 'shape-card placed';
        newCard.innerHTML = btn.querySelector('svg').outerHTML;
        row.appendChild(newCard);

        if (window.answerCorrect) {
          window.answerCorrect({ answer: puzzles[currentIndex].ruleText });
        }
      } else {
        btn.classList.add('wrong');
        setTimeout(() => btn.classList.remove('wrong'), 500);

        if (window.answerIncorrect) {
          window.answerIncorrect({ feedback: "Look closely at what all items share!" });
        }
      }
    }

    loadPuzzle(0);
  </script>
</body>
</html>

Can you use these clues to solve a shape puzzle right now?

Look at Group 1: it has a red circle, a blue circle, and a yellow circle. Group 2 has a green square, a red triangle, and an orange star.

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

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

  .groups-container {
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: 520px;
    justify-content: center;
  }

  .group-box {
    flex: 1;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  }

  .group-box.highlight {
    border-color: #22b7ff;
    box-shadow: 0 4px 12px rgba(34, 183, 255, 0.15);
  }

  .group-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #475569;
  }

  .shapes-grid {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    min-height: 60px;
  }

  .shape {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  /* Shape definitions */
  .circle {
    border-radius: 50%;
  }

  .square {
    border-radius: 6px;
  }

  .c-red { background: #ef4444; }
  .c-blue { background: #3b82f6; }
  .c-yellow { background: #facc15; }
  .c-green { background: #10b981; }

  .rule-badge {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    opacity: 0;
    transform: translateY(4px);
    transition: all 0.3s ease;
  }

  .rule-badge.show {
    opacity: 1;
    transform: translateY(0);
  }

  .badge-success {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
  }

  .badge-neutral {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
  }

  .badge-fail {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
  }

  .controls {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 520px;
    margin-top: 16px;
    justify-content: center;
  }

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

  .btn:active {
    transform: translateY(1px);
  }

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

  svg.shape-svg {
    width: 44px;
    height: 44px;
    display: block;
  }
</style>
</head>
<body>

  <div class="groups-container">
    
    <div class="group-box" id="box1">
      <div class="group-title">Group 1</div>
      <div class="shapes-grid">
        <div class="shape circle c-red" id="s1"></div>
        <div class="shape circle c-blue" id="s2"></div>
        <div class="shape circle c-yellow" id="s3"></div>
      </div>
      <div class="rule-badge" id="badge1">All Circles ✓</div>
    </div>

    
    <div class="group-box" id="box2">
      <div class="group-title">Group 2</div>
      <div class="shapes-grid">
        <div class="shape square c-green" id="s4"></div>
        <div class="shape" id="s5">
          <svg class="shape-svg" viewBox="0 0 100 100">
            <polygon points="50,8 94,88 6,88" fill="#ef4444" rx="4"/>
          </svg>
        </div>
        <div class="shape" id="s6">
          <svg class="shape-svg" viewBox="0 0 100 100">
            <polygon points="50,5 64,36 98,38 72,60 81,94 50,75 19,94 28,60 2,38 36,36" fill="#f97316"/>
          </svg>
        </div>
      </div>
      <div class="rule-badge" id="badge2">Not Circles</div>
    </div>
  </div>

  <div class="controls">
    <button class="btn" id="btnColor" onclick="setMode('color')">
      Color Rule?
    </button>
    <button class="btn active" id="btnShape" onclick="setMode('shape')">
      Shape Rule ✓
    </button>
  </div>

<script>
  function setMode(mode) {
    const btnColor = document.getElementById('btnColor');
    const btnShape = document.getElementById('btnShape');
    const box1 = document.getElementById('box1');
    const box2 = document.getElementById('box2');
    const badge1 = document.getElementById('badge1');
    const badge2 = document.getElementById('badge2');

    if (mode === 'color') {
      btnColor.classList.add('active');
      btnShape.classList.remove('active');
      
      box1.classList.remove('highlight');
      box2.classList.remove('highlight');

      badge1.textContent = 'Mixed Colors ✕';
      badge1.className = 'rule-badge show badge-fail';

      badge2.textContent = 'Mixed Colors ✕';
      badge2.className = 'rule-badge show badge-fail';
    } else {
      btnShape.classList.add('active');
      btnColor.classList.remove('active');

      box1.classList.add('highlight');
      box2.classList.remove('highlight');

      badge1.textContent = 'All Circles ✓';
      badge1.className = 'rule-badge show badge-success';

      badge2.textContent = 'Not Circles';
      badge2.className = 'rule-badge show badge-neutral';
    }
  }

  // Initialize on load
  setMode('shape');
</script>

</body>
</html>

Even though the colors in Group 1 are different, every single item is a round circle! The secret rule is **circles** in one group and **not circles** in the other.

How can you prove your guess is right when a new object appears?

To test your rule, take a brand new item and see if your rule tells you exactly which group it belongs in.

<!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;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px 8px;
      gap: 10px;
    }

    .nav-tabs {
      display: flex;
      gap: 6px;
      background: #e9ecef;
      padding: 4px;
      border-radius: 20px;
    }

    .tab-btn {
      border: none;
      background: transparent;
      padding: 5px 12px;
      border-radius: 16px;
      font-size: 13px;
      font-weight: 600;
      color: #6c757d;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
    }

    .tab-btn.active {
      background: #ffffff;
      color: #1e2945;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .groups-container {
      display: flex;
      width: 100%;
      max-width: 500px;
      gap: 12px;
      justify-content: center;
    }

    .group-box {
      flex: 1;
      background: #ffffff;
      border-radius: 12px;
      border: 2px dashed #cbd5e1;
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      min-height: 140px;
      cursor: pointer;
      transition: border-color 0.2s ease, background 0.2s ease;
      box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    }

    .group-box.correct-target {
      border-color: #22b7ff;
      background: #f0f9ff;
    }

    .group-box.success {
      border-color: #10b981;
      border-style: solid;
      background: #ecfdf5;
    }

    .group-box.error {
      border-color: #f43f5e;
      background: #fff1f2;
    }

    .group-label {
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .items-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      align-items: center;
      min-height: 70px;
    }

    .shape-item {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      transition: transform 0.3s ease;
    }

    .shape-item.placed {
      animation: popIn 0.3s ease;
    }

    @keyframes popIn {
      0% { transform: scale(0); opacity: 0; }
      70% { transform: scale(1.15); }
      100% { transform: scale(1); opacity: 1; }
    }

    .test-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .test-label {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }

    .test-card {
      background: #ffffff;
      border: 2px solid #22b7ff;
      border-radius: 12px;
      padding: 8px 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 4px 6px -1px rgba(34, 183, 255, 0.15);
      cursor: pointer;
    }

    .test-item-display {
      font-size: 32px;
      line-height: 1;
    }

    .feedback-text {
      font-size: 14px;
      font-weight: 700;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .feedback-text.ok {
      color: #10b981;
    }

    .feedback-text.no {
      color: #f43f5e;
    }
  </style>
</head>
<body>

  <div class="nav-tabs">
    <button class="tab-btn active" onclick="loadRule(0)">Rule 1</button>
    <button class="tab-btn" onclick="loadRule(1)">Rule 2</button>
  </div>

  <div class="groups-container">
    <div class="group-box" id="boxA" onclick="chooseGroup('A')">
      <span class="group-label">Group A</span>
      <div class="items-grid" id="itemsA"></div>
    </div>
    <div class="group-box" id="boxB" onclick="chooseGroup('B')">
      <span class="group-label">Group B</span>
      <div class="items-grid" id="itemsB"></div>
    </div>
  </div>

  <div class="test-area">
    <span class="test-label">Tap group to test:</span>
    <div class="test-card" id="testCard">
      <span class="test-item-display" id="testIcon">🔺</span>
    </div>
    <div class="feedback-text" id="feedback"></div>
  </div>

  <script>
    const rules = [
      {
        groupA: ['🔺', '🔺', '🔺'],
        groupB: ['🟦', '🟦', '🟦'],
        testItem: '🔺',
        target: 'A'
      },
      {
        groupA: ['🔵', '🔷', '🟦'],
        groupB: ['🟡', '⭐', '🟨'],
        testItem: '🔵',
        target: 'A'
      }
    ];

    let currentRuleIdx = 0;
    let placed = false;

    function loadRule(idx) {
      currentRuleIdx = idx;
      placed = false;

      document.querySelectorAll('.tab-btn').forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });

      const r = rules[idx];
      const boxA = document.getElementById('boxA');
      const boxB = document.getElementById('boxB');
      const itemsA = document.getElementById('itemsA');
      const itemsB = document.getElementById('itemsB');
      const testIcon = document.getElementById('testIcon');
      const feedback = document.getElementById('feedback');

      boxA.className = 'group-box';
      boxB.className = 'group-box';
      feedback.textContent = '';
      feedback.className = 'feedback-text';

      testIcon.textContent = r.testItem;
      testIcon.style.opacity = '1';

      itemsA.innerHTML = r.groupA.map(item => `<div class="shape-item">${item}</div>`).join('');
      itemsB.innerHTML = r.groupB.map(item => `<div class="shape-item">${item}</div>`).join('');
    }

    function chooseGroup(choice) {
      if (placed) return;

      const r = rules[currentRuleIdx];
      const boxA = document.getElementById('boxA');
      const boxB = document.getElementById('boxB');
      const feedback = document.getElementById('feedback');
      const testIcon = document.getElementById('testIcon');

      if (choice === r.target) {
        placed = true;
        const targetBox = choice === 'A' ? boxA : boxB;
        const targetGrid = choice === 'A' ? document.getElementById('itemsA') : document.getElementById('itemsB');
        
        targetBox.classList.add('success');
        feedback.textContent = '✓ Matches rule!';
        feedback.className = 'feedback-text ok';
        testIcon.style.opacity = '0.3';

        const newItem = document.createElement('div');
        newItem.className = 'shape-item placed';
        newItem.textContent = r.testItem;
        targetGrid.appendChild(newItem);
      } else {
        const errorBox = choice === 'A' ? boxA : boxB;
        errorBox.classList.add('error');
        feedback.textContent = '✗ Check all items';
        feedback.className = 'feedback-text no';

        setTimeout(() => {
          errorBox.classList.remove('error');
          feedback.textContent = '';
        }, 1000);
      }
    }

    loadRule(0);
  </script>
</body>
</html>

A common mistake is looking at only one item and guessing 'red' because the first circle is red. Always check **every item** in the whole group before you decide!

Next time you play with blocks or cards, try making a secret group and see if your partner can guess your rule!

math

Guessing and Following a Classmate's Sorting Rule. Look at pre-sorted groups and deduce the rule that was used to classify them.

Sorting Logic Blocks & Guess My Rule

Guess My Rule: Early Childhood Attribute Classification

Guess My Rule: Deductive Sorting with Loops and Attribute Blocks

At Early Level (P1 / Curriculum for Excellence MNU 1-20b), students move from sorting by their own visible criteria to inferring rules chosen by others. Effective pedagogical practice uses concrete manipulatives (attribute blocks, buttons, natural loose parts) and playful 'Silent Sorting' or 'Detective' games. Teachers should scaffold rule deduction using structured questioning ('What is the same about everything in this circle? What is different about the other circle?'). Encourage expressive mathematical talk through Think-Pair-Share before learners verbalize their deductions to the whole class.

Guessing and Following a Classmate's Sorting Rule

Detective Clues

Cracking the Shape Code