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 you want to bring fruit snacks for your friends. How do you know which fruit they like best without guessing?

We do not have to guess at all — we can just ask them!

When we ask a question, we collect **information**. Information is simply the facts or answers we learn from other people.

To find out what fruit to bring, we ask a clear question: **"What is your favorite fruit?"**

<!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>Asking Questions to Gather Information</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;
    }

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

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

    /* Question Banner */
    .question-banner {
      background: #ffffff;
      border: 2px solid #22b7ff;
      border-radius: 16px;
      padding: 10px 16px;
      text-align: center;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .question-tag {
      background: #22b7ff;
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .question-text {
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
    }

    /* Friends Grid */
    .friends-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

    .friend-card {
      background: #ffffff;
      border-radius: 16px;
      padding: 12px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(30, 41, 69, 0.06);
      outline: 2px solid transparent;
      transition: box-shadow 0.2s ease, background-color 0.2s ease, outline 0.2s ease;
      min-height: 96px;
      position: relative;
    }

    .friend-card:hover {
      box-shadow: 0 4px 14px rgba(34, 183, 255, 0.25);
    }

    .friend-card.asked {
      background: #f8fafc;
      cursor: default;
    }

    .friend-avatar {
      font-size: 32px;
      line-height: 1;
    }

    .speech-bubble {
      font-size: 20px;
      line-height: 1;
      height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .friend-card.asked .speech-bubble {
      opacity: 1;
      transform: translateY(0);
    }

    .tap-hint {
      position: absolute;
      bottom: 6px;
      font-size: 11px;
      font-weight: 600;
      color: #22b7ff;
      opacity: 1;
      transition: opacity 0.2s ease;
    }

    .friend-card.asked .tap-hint {
      opacity: 0;
      pointer-events: none;
    }

    /* Data Collection Table */
    .data-card {
      background: #ffffff;
      border-radius: 16px;
      padding: 12px 16px;
      box-shadow: 0 2px 8px rgba(30, 41, 69, 0.06);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .data-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 700;
      color: #6b7280;
      border-bottom: 1px solid #eef2f6;
      padding-bottom: 6px;
    }

    .data-counter {
      color: #22b7ff;
      font-weight: 700;
    }

    .fruit-rows {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .fruit-row {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 18px;
    }

    .fruit-icon {
      font-size: 22px;
      width: 30px;
      text-align: center;
      line-height: 1;
    }

    .tally-items {
      display: flex;
      gap: 6px;
      flex-grow: 1;
      min-height: 26px;
      align-items: center;
    }

    .data-token {
      width: 26px;
      height: 26px;
      background: #f0f9ff;
      border: 1px solid #bce6ff;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

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

    /* Controls */
    .controls {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 2px;
    }

    .btn {
      background: #ffffff;
      border: 1px solid #d1d5db;
      color: #1e2945;
      padding: 8px 16px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    .btn:hover {
      background: #f8fafc;
      border-color: #9ca3af;
    }

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

    .btn-primary:hover {
      background: #0ea5e9;
      border-color: #0ea5e9;
    }
  </style>
</head>
<body>

  <div class="main-layout">
    
    <div class="question-banner">
      <span class="question-tag">Ask</span>
      <span class="question-text">"Favorite fruit?"</span>
    </div>

    
    <div class="friends-grid">
      <div class="friend-card" id="friend-0" onclick="askFriend(0)">
        <div class="speech-bubble" id="bubble-0">🍎</div>
        <div class="friend-avatar">👧</div>
        <div class="tap-hint" id="hint-0">Tap</div>
      </div>
      <div class="friend-card" id="friend-1" onclick="askFriend(1)">
        <div class="speech-bubble" id="bubble-1">🍌</div>
        <div class="friend-avatar">👦</div>
        <div class="tap-hint" id="hint-1">Tap</div>
      </div>
      <div class="friend-card" id="friend-2" onclick="askFriend(2)">
        <div class="speech-bubble" id="bubble-2">🍎</div>
        <div class="friend-avatar">🧒</div>
        <div class="tap-hint" id="hint-2">Tap</div>
      </div>
      <div class="friend-card" id="friend-3" onclick="askFriend(3)">
        <div class="speech-bubble" id="bubble-3">🍓</div>
        <div class="friend-avatar">👧</div>
        <div class="tap-hint" id="hint-3">Tap</div>
      </div>
    </div>

    
    <div class="data-card">
      <div class="data-header">
        <span>Information Gathered</span>
        <span class="data-counter" id="counter">0 / 4</span>
      </div>

      <div class="fruit-rows">
        <div class="fruit-row">
          <div class="fruit-icon">🍎</div>
          <div class="tally-items" id="tally-apple"></div>
        </div>
        <div class="fruit-row">
          <div class="fruit-icon">🍌</div>
          <div class="tally-items" id="tally-banana"></div>
        </div>
        <div class="fruit-row">
          <div class="fruit-icon">🍓</div>
          <div class="tally-items" id="tally-berry"></div>
        </div>
      </div>
    </div>

    
    <div class="controls">
      <button class="btn btn-primary" id="askAllBtn" onclick="askAll()">Ask All</button>
      <button class="btn" onclick="resetAll()">Reset</button>
    </div>
  </div>

  <script>
    const friendsData = [
      { fruit: 'apple', emoji: '🍎' },
      { fruit: 'banana', emoji: '🍌' },
      { fruit: 'apple', emoji: '🍎' },
      { fruit: 'berry', emoji: '🍓' }
    ];

    const asked = [false, false, false, false];

    function askFriend(index) {
      if (asked[index]) return;
      asked[index] = true;

      const card = document.getElementById(`friend-${index}`);
      card.classList.add('asked');

      // Add fruit to tally
      const item = friendsData[index];
      const tallyContainer = document.getElementById(`tally-${item.fruit}`);
      const token = document.createElement('div');
      token.className = 'data-token';
      token.textContent = item.emoji;
      tallyContainer.appendChild(token);

      updateCount();
    }

    function updateCount() {
      const count = asked.filter(Boolean).length;
      document.getElementById('counter').textContent = `${count} / 4`;
    }

    function askAll() {
      friendsData.forEach((_, idx) => {
        setTimeout(() => {
          askFriend(idx);
        }, idx * 250);
      });
    }

    function resetAll() {
      asked.fill(false);
      for (let i = 0; i < 4; i++) {
        document.getElementById(`friend-${i}`).classList.remove('asked');
      }
      document.getElementById('tally-apple').innerHTML = '';
      document.getElementById('tally-banana').innerHTML = '';
      document.getElementById('tally-berry').innerHTML = '';
      updateCount();
    }
  </script>
</body>
</html>

Each time a friend answers, you collect one piece of information to help you plan.

What if you want to sort your friends into teams for game day?

You can ask simple questions about colors, pets, or games to **group** your friends together.

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

  .nav-tabs {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 480px;
    justify-content: center;
  }

  .tab-btn {
    flex: 1;
    padding: 8px 10px;
    border-radius: 12px;
    border: 2px solid #e6e6e6;
    background: #ffffff;
    font-size: 14px;
    font-weight: 700;
    color: #1e2945;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
  }

  .tab-btn.active {
    border-color: #5f27cd;
    background: #f3edff;
    color: #5f27cd;
    box-shadow: 0 2px 8px rgba(95, 39, 205, 0.15);
  }

  .groups-container {
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: 480px;
    flex: 1;
    margin: 10px 0;
  }

  .group-card {
    flex: 1;
    background: #ffffff;
    border-radius: 14px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px dashed #e6e6e6;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    min-height: 190px;
    transition: border-color 0.3s;
  }

  .group-card.left {
    border-color: rgba(255, 159, 67, 0.4);
  }
  .group-card.right {
    border-color: rgba(95, 39, 205, 0.4);
  }

  .group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 8px;
  }

  .group-title {
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .group-badge {
    font-size: 13px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 10px;
    background: #f1f2f6;
    color: #1e2945;
  }

  .group-card.left .group-badge {
    background: #fff0e1;
    color: #d35400;
  }

  .group-card.right .group-badge {
    background: #efe8ff;
    color: #5f27cd;
  }

  .friends-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    flex: 1;
    align-content: start;
  }

  .friend-token {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    border: 1px solid #eee;
    animation: popIn 0.3s ease;
  }

  .avatar {
    font-size: 24px;
    line-height: 1.1;
  }

  .tag {
    font-size: 13px;
    margin-top: 2px;
  }

  .question-banner {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  }

  @keyframes popIn {
    0% { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }
</style>
</head>
<body>

  <div class="nav-tabs">
    <button class="tab-btn active" onclick="setCategory(0)">
      <span>🐱 Pets</span>
    </button>
    <button class="tab-btn" onclick="setCategory(1)">
      <span>🍎 Snacks</span>
    </button>
    <button class="tab-btn" onclick="setCategory(2)">
      <span>🎨 Colors</span>
    </button>
  </div>

  <div class="groups-container">
    <div class="group-card left">
      <div class="group-header">
        <span class="group-title" id="titleA">🐶 Dog</span>
        <span class="group-badge" id="countA">3</span>
      </div>
      <div class="friends-grid" id="gridA"></div>
    </div>

    <div class="group-card right">
      <div class="group-header">
        <span class="group-title" id="titleB">🐱 Cat</span>
        <span class="group-badge" id="countB">3</span>
      </div>
      <div class="friends-grid" id="gridB"></div>
    </div>
  </div>

  <div class="question-banner">
    <span>💬</span>
    <span id="questionLabel">Question: Favorite Pet?</span>
  </div>

<script>
  const data = [
    {
      question: "Question: Favorite Pet?",
      groupA: { name: "Dog", emoji: "🐶" },
      groupB: { name: "Cat", emoji: "🐱" },
      members: [
        { avatar: "👧", choice: "A" },
        { avatar: "👦", choice: "B" },
        { avatar: "🧒", choice: "A" },
        { avatar: "👱‍♀️", choice: "B" },
        { avatar: "👦🏽", choice: "A" },
        { avatar: "👧🏾", choice: "B" }
      ]
    },
    {
      question: "Question: Favorite Snack?",
      groupA: { name: "Apple", emoji: "🍎" },
      groupB: { name: "Banana", emoji: "🍌" },
      members: [
        { avatar: "👧", choice: "A" },
        { avatar: "👦", choice: "A" },
        { avatar: "🧒", choice: "B" },
        { avatar: "👱‍♀️", choice: "A" },
        { avatar: "👦🏽", choice: "B" },
        { avatar: "👧🏾", choice: "A" }
      ]
    },
    {
      question: "Question: Favorite Color?",
      groupA: { name: "Red", emoji: "🔴" },
      groupB: { name: "Blue", emoji: "🔵" },
      members: [
        { avatar: "👧", choice: "B" },
        { avatar: "👦", choice: "A" },
        { avatar: "🧒", choice: "B" },
        { avatar: "👱‍♀️", choice: "B" },
        { avatar: "👦🏽", choice: "A" },
        { avatar: "👧🏾", choice: "B" }
      ]
    }
  ];

  let currentIndex = 0;

  function render() {
    const cur = data[currentIndex];
    
    // Update tabs
    const tabs = document.querySelectorAll('.tab-btn');
    tabs.forEach((tab, idx) => {
      tab.classList.toggle('active', idx === currentIndex);
    });

    // Update banner
    document.getElementById('questionLabel').textContent = cur.question;

    // Filter members
    const listA = cur.members.filter(m => m.choice === 'A');
    const listB = cur.members.filter(m => m.choice === 'B');

    // Update Group A
    document.getElementById('titleA').textContent = `${cur.groupA.emoji} ${cur.groupA.name}`;
    document.getElementById('countA').textContent = listA.length;
    const gridA = document.getElementById('gridA');
    gridA.innerHTML = '';
    listA.forEach(m => {
      const el = document.createElement('div');
      el.className = 'friend-token';
      el.innerHTML = `<span class="avatar">${m.avatar}</span><span class="tag">${cur.groupA.emoji}</span>`;
      gridA.appendChild(el);
    });

    // Update Group B
    document.getElementById('titleB').textContent = `${cur.groupB.emoji} ${cur.groupB.name}`;
    document.getElementById('countB').textContent = listB.length;
    const gridB = document.getElementById('gridB');
    gridB.innerHTML = '';
    listB.forEach(m => {
      const el = document.createElement('div');
      el.className = 'friend-token';
      el.innerHTML = `<span class="avatar">${m.avatar}</span><span class="tag">${cur.groupB.emoji}</span>`;
      gridB.appendChild(el);
    });
  }

  function setCategory(idx) {
    currentIndex = idx;
    render();
  }

  render();
</script>

</body>
</html>

Try turning to a friend nearby right now and asking: **"What is your favorite color?"**

math

Asking Simple Questions to Gather Information. Formulate simple questions (e.g., What is your favorite fruit?) to collect information from peers.

Early Level & KS1 Mathematics: Collecting and Handling Data

Early Years & Primary Data Handling and Sorting Collections

Curriculum for Excellence Benchmarks: Early Level (P1) Data and Analysis

At Early Level (P1/Nursery), instruction should follow the Concrete-Pictorial-Abstract (CPA) framework. Start with physical movement (Human Bar Charts) and concrete manipulatives (cubes/tokens in cups) before moving to sticker sheets or checkmarks. Scaffold oral language using structured sentence stems ('What is your favorite ___?' and 'My favorite is ___') to ensure young learners collect distinct, single-attribute categorical data.

Asking Simple Questions to Gather Information

Asking to Learn

Asking About Favorites

Key takeaways