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

If you ask your friends what their favorite holiday is, their answers will be words like "Halloween" or "Thanksgiving" — not numbers!

Information made of words, descriptions, or categories is called **non-numerical data**.

<!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, sans-serif;
      user-select: none;
    }

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

    .source-panel {
      width: 100%;
      background: #ffffff;
      border-radius: 12px;
      padding: 10px 14px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .section-label {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #6b7280;
    }

    .token-pool {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      min-height: 42px;
    }

    .token {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 6px 12px;
      background: #f1f5f9;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
    }

    .token.sorted {
      opacity: 0.25;
      transform: scale(0.9);
      pointer-events: none;
    }

    .categories-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
    }

    .category-col {
      background: #ffffff;
      border-radius: 12px;
      padding: 10px 8px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      min-height: 180px;
    }

    .col-header {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .col-items {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
      align-items: center;
      flex: 1;
    }

    .collected-chip {
      width: 100%;
      max-width: 90px;
      padding: 4px 6px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      text-align: center;
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .chip-dog { background: #e0f2fe; color: #0284c7; }
    .chip-cat { background: #fef3c7; color: #d97706; }
    .chip-bird { background: #dcfce7; color: #16a34a; }

    .collected-chip.show {
      opacity: 1;
      transform: translateY(0);
    }

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

    .btn {
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 600;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      background: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 4px rgba(34,183,255,0.25);
      transition: opacity 0.2s ease;
    }

    .btn-secondary {
      background: #f1f5f9;
      color: #6b7280;
      box-shadow: none;
    }

    .btn:active {
      opacity: 0.8;
    }
  </style>
</head>
<body>

  <div class="source-panel">
    <div class="section-label">Observed Data</div>
    <div class="token-pool" id="pool">
      <div class="token" data-type="dog" data-id="0">🐶 Dog</div>
      <div class="token" data-type="cat" data-id="1">🐱 Cat</div>
      <div class="token" data-type="bird" data-id="2">🐦 Bird</div>
      <div class="token" data-type="dog" data-id="3">🐶 Dog</div>
      <div class="token" data-type="cat" data-id="4">🐱 Cat</div>
      <div class="token" data-type="dog" data-id="5">🐶 Dog</div>
    </div>
  </div>

  <div class="categories-grid">
    <div class="category-col">
      <div class="col-header">🐶 Dog</div>
      <div class="col-items" id="dog-col">
        <div class="collected-chip chip-dog" id="chip-0">Dog</div>
        <div class="collected-chip chip-dog" id="chip-3">Dog</div>
        <div class="collected-chip chip-dog" id="chip-5">Dog</div>
      </div>
    </div>

    <div class="category-col">
      <div class="col-header">🐱 Cat</div>
      <div class="col-items" id="cat-col">
        <div class="collected-chip chip-cat" id="chip-1">Cat</div>
        <div class="collected-chip chip-cat" id="chip-4">Cat</div>
      </div>
    </div>

    <div class="category-col">
      <div class="col-header">🐦 Bird</div>
      <div class="col-items" id="bird-col">
        <div class="collected-chip chip-bird" id="chip-2">Bird</div>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="btn" id="collectBtn">Collect Next →</button>
    <button class="btn btn-secondary" id="resetBtn">↺</button>
  </div>

  <script>
    const tokens = document.querySelectorAll('.token');
    const collectBtn = document.getElementById('collectBtn');
    const resetBtn = document.getElementById('resetBtn');
    let currentIndex = 0;

    function sortItem(index) {
      if (index >= tokens.length) return;
      const token = tokens[index];
      const chip = document.getElementById('chip-' + index);
      token.classList.add('sorted');
      if (chip) chip.classList.add('show');
      currentIndex = index + 1;
      if (currentIndex >= tokens.length) {
        collectBtn.style.opacity = '0.5';
        collectBtn.style.pointerEvents = 'none';
      }
    }

    function resetAll() {
      tokens.forEach(t => t.classList.remove('sorted'));
      document.querySelectorAll('.collected-chip').forEach(c => c.classList.remove('show'));
      currentIndex = 0;
      collectBtn.style.opacity = '1';
      collectBtn.style.pointerEvents = 'auto';
    }

    collectBtn.addEventListener('click', () => {
      sortItem(currentIndex);
    });

    tokens.forEach((t, i) => {
      t.addEventListener('click', () => {
        if (!t.classList.contains('sorted')) {
          sortItem(i);
        }
      });
    });

    resetBtn.addEventListener('click', resetAll);
  </script>
</body>
</html>

How can you collect and organize this kind of word information all by yourself?

You can collect data by looking out the window every morning and writing down the **weather pattern**.

A **tally chart** is a simple chart where you place a mark next to the word that matches what you see.

<!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>Tally Chart</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    body {
      background: transparent;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      user-select: none;
    }

    .toolbar {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 520px;
    }

    .add-btn {
      appearance: none;
      border: 1px solid #e6e6e6;
      background: #ffffff;
      color: #1e2945;
      padding: 8px 14px;
      border-radius: 12px;
      font-size: 15px;
      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 0.2s, box-shadow 0.2s;
    }

    .add-btn:active {
      background: #f1f5f9;
      box-shadow: 0 0 0 2px #22b7ff;
    }

    .reset-btn {
      appearance: none;
      border: 1px solid #e6e6e6;
      background: #f8fafc;
      color: #64748b;
      padding: 8px 12px;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s;
    }

    .reset-btn:active {
      background: #e2e8f0;
    }

    .chart-container {
      width: 100%;
      max-width: 520px;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      overflow: hidden;
    }

    .chart-header {
      display: grid;
      grid-template-columns: 110px 1fr 60px;
      background: #f8fafc;
      border-bottom: 1px solid #e6e6e6;
      padding: 10px 14px;
      font-size: 14px;
      font-weight: 700;
      color: #64748b;
    }

    .chart-row {
      display: grid;
      grid-template-columns: 110px 1fr 60px;
      align-items: center;
      padding: 12px 14px;
      border-bottom: 1px solid #f1f5f9;
      min-height: 56px;
    }

    .chart-row:last-child {
      border-bottom: none;
    }

    .category-label {
      font-size: 15px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .tallies-area {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      min-height: 28px;
    }

    .tally-group {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      height: 28px;
      padding: 0 2px;
    }

    .tally-stick {
      width: 3.5px;
      height: 24px;
      background: #1e2945;
      border-radius: 2px;
      opacity: 0;
      animation: popIn 0.25s ease forwards;
    }

    .tally-slash {
      position: absolute;
      left: -2px;
      top: 12px;
      width: 32px;
      height: 3.5px;
      background: #3b82f6;
      border-radius: 2px;
      transform-origin: center;
      transform: rotate(-30deg);
      opacity: 0;
      animation: popIn 0.25s ease forwards;
    }

    .count-badge {
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
      text-align: right;
    }

    @keyframes popIn {
      from {
        opacity: 0;
        transform: scale(0.6);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .tally-slash {
      animation: slashIn 0.25s ease forwards;
    }

    @keyframes slashIn {
      from {
        opacity: 0;
        transform: rotate(-30deg) scaleX(0.4);
      }
      to {
        opacity: 1;
        transform: rotate(-30deg) scaleX(1);
      }
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <button class="add-btn" onclick="addMark('sunny')">☀️ Sunny</button>
    <button class="add-btn" onclick="addMark('rainy')">🌧️ Rainy</button>
    <button class="add-btn" onclick="addMark('cloudy')">☁️ Cloudy</button>
    <button class="reset-btn" onclick="resetTallies()" title="Reset">↺</button>
  </div>

  <div class="chart-container">
    <div class="chart-header">
      <div>Data</div>
      <div>Tally Marks</div>
      <div style="text-align: right;">Total</div>
    </div>

    <div class="chart-row">
      <div class="category-label">☀️ Sunny</div>
      <div class="tallies-area" id="tallies-sunny"></div>
      <div class="count-badge" id="count-sunny">0</div>
    </div>

    <div class="chart-row">
      <div class="category-label">🌧️ Rainy</div>
      <div class="tallies-area" id="tallies-rainy"></div>
      <div class="count-badge" id="count-rainy">0</div>
    </div>

    <div class="chart-row">
      <div class="category-label">☁️ Cloudy</div>
      <div class="tallies-area" id="tallies-cloudy"></div>
      <div class="count-badge" id="count-cloudy">0</div>
    </div>
  </div>

  <script>
    const data = {
      sunny: 4,
      rainy: 2,
      cloudy: 5
    };

    function renderTallyCategory(cat) {
      const container = document.getElementById('tallies-' + cat);
      const countEl = document.getElementById('count-' + cat);
      const n = data[cat];

      countEl.textContent = n;
      container.innerHTML = '';

      const fullGroups = Math.floor(n / 5);
      const remainder = n % 5;

      for (let g = 0; g < fullGroups; g++) {
        const grp = document.createElement('div');
        grp.className = 'tally-group';
        for (let i = 0; i < 4; i++) {
          const stick = document.createElement('div');
          stick.className = 'tally-stick';
          grp.appendChild(stick);
        }
        const slash = document.createElement('div');
        slash.className = 'tally-slash';
        grp.appendChild(slash);
        container.appendChild(grp);
      }

      if (remainder > 0) {
        const grp = document.createElement('div');
        grp.className = 'tally-group';
        for (let i = 0; i < remainder; i++) {
          const stick = document.createElement('div');
          stick.className = 'tally-stick';
          grp.appendChild(stick);
        }
        container.appendChild(grp);
      }
    }

    function addMark(cat) {
      if (data[cat] < 15) {
        data[cat]++;
        renderTallyCategory(cat);
      }
    }

    function resetTallies() {
      data.sunny = 0;
      data.rainy = 0;
      data.cloudy = 0;
      renderAll();
    }

    function renderAll() {
      renderTallyCategory('sunny');
      renderTallyCategory('rainy');
      renderTallyCategory('cloudy');
    }

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

Weather is just one type of word data — what happens when you want to learn about what your classmates like?

A **genre** is a specific category of story, such as mystery, graphic novel, fantasy, or adventure.

When you do a **survey**, you ask people the same question and record their category choices.

<!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;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      gap: 12px;
    }
    .question-bar {
      background: #f1f5f9;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 16px;
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
      max-width: 520px;
      flex: 1;
    }
    .col-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .col-card.dog { background: #fffaf0; border-color: #fed7aa; }
    .col-card.cat { background: #faf5ff; border-color: #e9d5ff; }
    .col-card.bird { background: #f0f9ff; border-color: #bae6fd; }

    .col-card.active-pulse {
      box-shadow: 0 0 0 3px #22b7ff;
    }

    .cat-icon {
      font-size: 32px;
      line-height: 1;
    }
    .cat-name {
      font-size: 14px;
      font-weight: 700;
    }

    .tally-area {
      flex: 1;
      width: 100%;
      min-height: 70px;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      justify-content: center;
      gap: 8px;
      padding: 4px;
      background: rgba(255, 255, 255, 0.7);
      border-radius: 8px;
    }
    .tally-group {
      position: relative;
      width: 32px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 3px;
    }
    .tally-bar {
      width: 3px;
      height: 28px;
      background: #1e2945;
      border-radius: 2px;
      opacity: 0;
      transform: scaleY(0.2);
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    .tally-bar.visible {
      opacity: 1;
      transform: scaleY(1);
    }
    .tally-slash {
      position: absolute;
      top: 50%;
      left: -2px;
      width: 36px;
      height: 3px;
      background: #ea580c;
      border-radius: 2px;
      transform: translateY(-50%) rotate(-30deg) scaleX(0);
      transform-origin: center;
      transition: transform 0.25s ease;
    }
    .tally-slash.visible {
      transform: translateY(-50%) rotate(-30deg) scaleX(1);
    }

    .actions {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 520px;
    }
    .btn-vote {
      flex: 1;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      border-radius: 10px;
      padding: 10px 4px;
      font-size: 15px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.15s, border-color 0.15s;
    }
    .btn-vote:active {
      background: #e2e8f0;
    }
    .btn-reset {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
    }
    .btn-reset:active {
      background: #e2e8f0;
    }
  </style>
</head>
<body>

  <div class="question-bar">
    <span>❓</span>
    <span>Favorite Pet?</span>
  </div>

  <div class="grid">
    <div class="col-card dog" id="card-dog">
      <div class="cat-icon">🐶</div>
      <div class="cat-name">Dog</div>
      <div class="tally-area" id="tallies-dog"></div>
    </div>

    <div class="col-card cat" id="card-cat">
      <div class="cat-icon">🐱</div>
      <div class="cat-name">Cat</div>
      <div class="tally-area" id="tallies-cat"></div>
    </div>

    <div class="col-card bird" id="card-bird">
      <div class="cat-icon">🐦</div>
      <div class="cat-name">Bird</div>
      <div class="tally-area" id="tallies-bird"></div>
    </div>
  </div>

  <div class="actions">
    <button class="btn-vote" onclick="addSurvey('dog')">🐶 +1</button>
    <button class="btn-vote" onclick="addSurvey('cat')">🐱 +1</button>
    <button class="btn-vote" onclick="addSurvey('bird')">🐦 +1</button>
    <button class="btn-reset" onclick="resetSurvey()" title="Reset">↺</button>
  </div>

  <script>
    const counts = { dog: 0, cat: 0, bird: 0 };
    const maxCount = 10;

    function renderCategory(cat) {
      const container = document.getElementById('tallies-' + cat);
      container.innerHTML = '';
      const total = counts[cat];
      const groups = Math.ceil(total / 5);

      for (let g = 0; g < groups; g++) {
        const groupEl = document.createElement('div');
        groupEl.className = 'tally-group';
        const inThisGroup = Math.min(5, total - g * 5);

        for (let b = 0; b < 4; b++) {
          const bar = document.createElement('div');
          bar.className = 'tally-bar' + (b < inThisGroup ? ' visible' : '');
          groupEl.appendChild(bar);
        }

        const slash = document.createElement('div');
        slash.className = 'tally-slash' + (inThisGroup >= 5 ? ' visible' : '');
        groupEl.appendChild(slash);

        container.appendChild(groupEl);
      }
    }

    function addSurvey(cat) {
      if (counts[cat] >= maxCount) return;
      counts[cat]++;
      renderCategory(cat);

      const card = document.getElementById('card-' + cat);
      card.classList.add('active-pulse');
      setTimeout(() => card.classList.remove('active-pulse'), 250);
    }

    function resetSurvey() {
      counts.dog = 0;
      counts.cat = 0;
      counts.bird = 0;
      renderCategory('dog');
      renderCategory('cat');
      renderCategory('bird');
    }

    // Initial initial sample data
    counts.dog = 3;
    counts.cat = 4;
    counts.bird = 2;
    renderCategory('dog');
    renderCategory('cat');
    renderCategory('bird');
  </script>
</body>
</html>

People sometimes think that counting your tallies turns the data into numerical data.

Even though you count how many people chose each group, the actual answers — like "Halloween" or "Graphic Novel" — are still **non-numerical data**.

Try creating your own three-category survey today about favorite school lunches or recess games to see what you discover!

technology

Collecting Non-Numerical Data on Your Own. Identify and collect non-numerical data such as weather patterns, reading genres, or holidays using a simple recording method.

Collecting and Organizing Categorical Data with Tally Charts

Interpret and Create Tally Charts for Categorical Data (Grade 2)

What are Tally Charts and Frequency Tables? (Primary Data Handling)

Teaching non-numerical data collection to 2nd graders under TEKS 126.3(b)(5)(A) is best grounded in tangible, daily classroom routines. Begin with hands-on physical sorting (e.g., placing actual books into genre bins or looking outside daily for morning meeting weather reports) before transitioning to symbolic representation via tally charts and digital entry forms. Emphasize the distinct nature of category names (words/descriptors) versus the counts (frequency numbers).

Work through this lesson with your tutor.

Collecting Non-Numerical Data on Your Own

Tracking Daily Weather

Surveying Genres and Holidays