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

Look around your room right now: what color are your shoes, what is the weather outside, and what did you eat for breakfast?

Whenever you observe and write down these facts to learn something or share it with others, you are working with **data**.

So what does this big word actually mean?

**Data** is simply a collection of facts, details, or clues gathered about people, things, or places.

Think of data like puzzle pieces that help you answer questions and make smart decisions.

<!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>What Is Data?</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, sans-serif;
    background: #f8f9fa;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 12px;
  }
  .app-container {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .selector-row {
    display: flex;
    gap: 8px;
    justify-content: center;
  }
  .tab-btn {
    flex: 1;
    padding: 8px 4px;
    border: 2px solid #e2e8f0;
    background: #ffffff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
  }
  .tab-btn.active {
    border-color: #22b7ff;
    color: #1e2945;
    background: #f0f9ff;
    box-shadow: 0 2px 8px rgba(34, 183, 255, 0.15);
  }
  .flow-stage {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border-radius: 12px;
    padding: 16px 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
  .pane {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 100px;
    text-align: center;
  }
  .pane-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
  }
  .world-emoji {
    font-size: 44px;
    line-height: 1;
    transition: transform 0.3s ease;
  }
  .arrow-icon {
    font-size: 20px;
    color: #22b7ff;
    font-weight: bold;
  }
  .data-badge {
    background: #f0f9ff;
    border: 2px solid #22b7ff;
    border-radius: 8px;
    padding: 6px 12px;
    font-family: ui-monospace, monospace;
    font-size: 15px;
    font-weight: 700;
    color: #0284c7;
  }
  .data-type {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
  }
  .table-box {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
  }
  .table-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #f1f5f9;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .table-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 10px 16px;
    font-size: 14px;
    border-top: 1px solid #f1f5f9;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
  }
  .table-row.active {
    background: #e0f2fe;
    font-weight: 600;
  }
  .controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  .ctrl-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    color: #475569;
    font-weight: 600;
  }
  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: background 0.2s;
  }
  .dot.active {
    background: #22b7ff;
  }
</style>
</head>
<body>

<div class="app-container">
  <div class="selector-row">
    <button class="tab-btn active" onclick="selectItem(0)">👟 Shoes</button>
    <button class="tab-btn" onclick="selectItem(1)">⛅ Weather</button>
    <button class="tab-btn" onclick="selectItem(2)">🥞 Breakfast</button>
  </div>

  <div class="flow-stage">
    <div class="pane">
      <div class="pane-title">Real World</div>
      <div class="world-emoji" id="worldEmoji">👟</div>
    </div>
    
    <div class="arrow-icon">➔</div>
    
    <div class="pane">
      <div class="pane-title">Recorded Data</div>
      <div class="data-badge" id="dataVal">"Blue"</div>
      <div class="data-type" id="dataType">Text</div>
    </div>
  </div>

  <div class="table-box">
    <div class="table-header">
      <div>Observation</div>
      <div>Data Value</div>
    </div>
    <div class="table-row active" id="row-0" onclick="selectItem(0)">
      <div>👟 Shoes</div>
      <div>"Blue"</div>
    </div>
    <div class="table-row" id="row-1" onclick="selectItem(1)">
      <div>⛅ Weather</div>
      <div>72°F</div>
    </div>
    <div class="table-row" id="row-2" onclick="selectItem(2)">
      <div>🥞 Breakfast</div>
      <div>"Pancakes"</div>
    </div>
  </div>

  <div class="controls">
    <button class="ctrl-btn" id="playBtn" onclick="togglePlay()">⏸</button>
    <div class="dot active" onclick="selectItem(0)"></div>
    <div class="dot" onclick="selectItem(1)"></div>
    <div class="dot" onclick="selectItem(2)"></div>
  </div>
</div>

<script>
  const items = [
    { emoji: '👟', val: '"Blue"', type: 'Text' },
    { emoji: '⛅', val: '72°F', type: 'Number' },
    { emoji: '🥞', val: '"Pancakes"', type: 'Text' }
  ];

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

  function updateUI() {
    const data = items[current];
    document.getElementById('worldEmoji').textContent = data.emoji;
    document.getElementById('dataVal').textContent = data.val;
    document.getElementById('dataType').textContent = data.type;

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

  function selectItem(idx) {
    current = idx;
    updateUI();
  }

  function nextItem() {
    current = (current + 1) % items.length;
    updateUI();
  }

  function startLoop() {
    if (timer) clearInterval(timer);
    timer = setInterval(nextItem, 3500);
  }

  function togglePlay() {
    playing = !playing;
    document.getElementById('playBtn').textContent = playing ? '⏸' : '▶';
    if (playing) {
      startLoop();
    } else {
      clearInterval(timer);
    }
  }

  startLoop();
</script>
</body>
</html>

Does data only come from math tests and tricky number problems?

A common mistake is thinking data is only numbers — but data can be words, sounds, and colors too!

Your age (8) is number data, while your favorite ice cream flavor (chocolate) is **word data**.

Everyday examples of non-numerical data are all around you, like recording **daily weather conditions** such as sunny, rainy, snowy, or cloudy.

Other examples include people's **preferred reading genres** (fairy tales, mystery, non-fiction) or **favorite holidays** like Halloween, Thanksgiving, and New Year's Day!

Everyday examples of **non-numerical data** are all around you, like tracking daily weather conditions such as sunny, rainy, snowy, or cloudy.

It also includes preferred reading genres (like fairy tales, mystery, or non-fiction) and favorite holidays, such as Halloween, Thanksgiving, or **New Year's Day**.

<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f8f9fa;
    color: #1e2945;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    user-select: none;
    -webkit-user-select: none;
  }

  .vote-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .vote-btn {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px 4px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  }
  .vote-btn:active {
    background: #e0f2fe;
    border-color: #22b7ff;
    box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.25);
  }
  .vote-btn .icon { font-size: 24px; display: block; }
  .vote-btn .label { font-size: 12px; font-weight: 600; color: #475569; margin-top: 2px; }
  .vote-btn .add { font-size: 11px; font-weight: 700; color: #22b7ff; }

  .data-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 10px;
    flex: 1;
  }

  @media (max-width: 400px) {
    .data-grid {
      grid-template-columns: 1fr;
    }
  }

  .panel {
    background: #ffffff;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
  }

  .panel-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin-bottom: 8px;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  th {
    text-align: left;
    color: #94a3b8;
    font-weight: 600;
    font-size: 11px;
    padding: 4px;
    border-bottom: 1px solid #f1f5f9;
  }
  td {
    padding: 6px 4px;
    border-bottom: 1px solid #f8fafc;
  }
  .tally {
    font-family: monospace;
    font-size: 14px;
    color: #3b82f6;
    letter-spacing: 2px;
  }

  .chart-area {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    flex: 1;
    min-height: 110px;
    padding-top: 10px;
    border-bottom: 2px solid #e2e8f0;
  }

  .bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 28%;
    height: 100%;
    justify-content: flex-end;
  }

  .bar-val {
    font-size: 12px;
    font-weight: 700;
    color: #1e2945;
    margin-bottom: 4px;
  }

  .bar {
    width: 100%;
    border-radius: 6px 6px 0 0;
    background: #22b7ff;
    transition: height 0.3s ease;
    min-height: 4px;
  }
  .bar.c1 { background: #38bdf8; }
  .bar.c2 { background: #818cf8; }
  .bar.c3 { background: #34d399; }

  .bar-lbl {
    font-size: 13px;
    margin-top: 4px;
  }
</style>
</head>
<body>

  <div class="vote-row">
    <div class="vote-btn" onclick="addVote(0)">
      <span class="icon">🧚</span>
      <div class="label">Fairy Tale</div>
      <div class="add">+1</div>
    </div>
    <div class="vote-btn" onclick="addVote(1)">
      <span class="icon">🔍</span>
      <div class="label">Mystery</div>
      <div class="add">+1</div>
    </div>
    <div class="vote-btn" onclick="addVote(2)">
      <span class="icon">📖</span>
      <div class="label">Non-Fiction</div>
      <div class="add">+1</div>
    </div>
  </div>

  <div class="data-grid">
    <div class="panel">
      <div class="panel-title">Data Table</div>
      <table>
        <thead>
          <tr>
            <th>Genre</th>
            <th>Tally</th>
            <th style="text-align:right">Total</th>
          </tr>
        </thead>
        <tbody id="table-body">
          
        </tbody>
      </table>
    </div>

    <div class="panel">
      <div class="panel-title">Visual Graph</div>
      <div class="chart-area">
        <div class="bar-col">
          <div class="bar-val" id="val-0">4</div>
          <div class="bar c1" id="bar-0" style="height: 50%;"></div>
          <div class="bar-lbl">🧚</div>
        </div>
        <div class="bar-col">
          <div class="bar-val" id="val-1">6</div>
          <div class="bar c2" id="bar-1" style="height: 75%;"></div>
          <div class="bar-lbl">🔍</div>
        </div>
        <div class="bar-col">
          <div class="bar-val" id="val-2">2</div>
          <div class="bar c3" id="bar-2" style="height: 25%;"></div>
          <div class="bar-lbl">📖</div>
        </div>
      </div>
    </div>
  </div>

<script>
  const genres = [
    { name: '🧚 Fairy Tale', count: 4 },
    { name: '🔍 Mystery', count: 6 },
    { name: '📖 Non-Fiction', count: 2 }
  ];

  function formatTally(n) {
    let str = '';
    for (let i = 1; i <= n; i++) {
      str += (i % 5 === 0) ? '卌 ' : '|';
    }
    return str || '-';
  }

  function render() {
    const tbody = document.getElementById('table-body');
    tbody.innerHTML = '';
    
    const maxVal = Math.max(...genres.map(g => g.count), 8);

    genres.forEach((g, i) => {
      const row = document.createElement('tr');
      row.innerHTML = `
        <td style="font-weight:600">${g.name}</td>
        <td class="tally">${formatTally(g.count)}</td>
        <td style="text-align:right; font-weight:700">${g.count}</td>
      `;
      tbody.appendChild(row);

      const bar = document.getElementById(`bar-${i}`);
      const val = document.getElementById(`val-${i}`);
      const pct = Math.round((g.count / maxVal) * 100);
      bar.style.height = `${Math.max(pct, 5)}%`;
      val.textContent = g.count;
    });
  }

  function addVote(index) {
    if (genres[index].count < 15) {
      genres[index].count++;
      render();
    }
  }

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

How can you use data in your daily life to solve a real mystery?

Imagine your class is ordering pizza for lunch, and you need to pick the best toppings.

When you ask your friends and tally up who wants cheese, pepperoni, or veggie, you are collecting data to make the right choice.

<!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>What Is Data?</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    body {
      background: #f8f9fa;
      color: #1e2945;
      padding: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 14px;
      width: 100%;
      max-width: 480px;
    }
    .tab-btn {
      flex: 1;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 4px;
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: border-color 0.2s, color 0.2s, background 0.2s;
    }
    .tab-btn.active {
      border-color: #22b7ff;
      color: #0284c7;
      background: #f0f9ff;
    }
    .stage {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 480px;
      gap: 8px;
    }
    .obs-card {
      flex: 1;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px 8px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 140px;
    }
    .obs-emoji {
      font-size: 44px;
      line-height: 1.1;
      margin-bottom: 6px;
    }
    .obs-label {
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .arrow {
      font-size: 22px;
      color: #22b7ff;
      font-weight: bold;
      user-select: none;
    }
    .table-card {
      flex: 1.3;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px;
      min-height: 140px;
      display: flex;
      flex-direction: column;
    }
    .table-title {
      font-size: 12px;
      font-weight: 700;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
      padding-bottom: 4px;
      border-bottom: 1px solid #e2e8f0;
      display: flex;
      justify-content: space-between;
    }
    .row-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 8px;
      border-radius: 6px;
      font-size: 14px;
      margin-bottom: 4px;
      transition: background 0.3s;
    }
    .row-item.active-row {
      background: #e0f2fe;
      font-weight: 700;
      color: #0369a1;
    }
    .tag {
      background: #f1f5f9;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 13px;
      font-family: monospace;
      color: #334155;
    }
    .row-item.active-row .tag {
      background: #bae6fd;
      color: #0c4a6e;
    }
  </style>
</head>
<body>

  <div class="tabs">
    <button class="tab-btn active" onclick="setStep(0)">👟 Shoes</button>
    <button class="tab-btn" onclick="setStep(1)">☀️ Weather</button>
    <button class="tab-btn" onclick="setStep(2)">🥞 Breakfast</button>
  </div>

  <div class="stage">
    <div class="obs-card">
      <div class="obs-emoji" id="obsEmoji">👟</div>
      <div class="obs-label" id="obsLabel">Blue</div>
    </div>

    <div class="arrow">➔</div>

    <div class="table-card">
      <div class="table-title">
        <span>Data</span>
        <span>Value</span>
      </div>
      <div class="row-item active-row" id="row-0">
        <span>👟 Color</span>
        <span class="tag">"Blue"</span>
      </div>
      <div class="row-item" id="row-1">
        <span>☀️ Temp</span>
        <span class="tag">72°</span>
      </div>
      <div class="row-item" id="row-2">
        <span>🥞 Meal</span>
        <span class="tag">"Pancakes"</span>
      </div>
    </div>
  </div>

  <script>
    const data = [
      { emoji: '👟', label: 'Blue' },
      { emoji: '☀️', label: '72° Sunny' },
      { emoji: '🥞', label: 'Pancakes' }
    ];

    let currentStep = 0;
    let timer = null;

    function setStep(index) {
      currentStep = index;
      document.getElementById('obsEmoji').textContent = data[index].emoji;
      document.getElementById('obsLabel').textContent = data[index].label;

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

      for (let i = 0; i < 3; i++) {
        const row = document.getElementById('row-' + i);
        row.classList.toggle('active-row', i === index);
      }
    }

    function autoPlay() {
      timer = setInterval(() => {
        currentStep = (currentStep + 1) % 3;
        setStep(currentStep);
      }, 3500);
    }

    document.querySelectorAll('.tab-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        clearInterval(timer);
        autoPlay();
      });
    });

    setStep(0);
    autoPlay();
  </script>
</body>
</html>

Next time you look at a weather app, count birds in a tree, or vote on a game to play, look closely — you are exploring data!

technology

What Is Data?. Define data as collected information and identify everyday examples of data around us.

TEKS Guide: Grade 2 Technology Applications - Non-Numerical Data (TA.2.5.A)

What is Data? - Primary Computing & Mathematics

Collecting and Organizing Data Around Us (Elementary Technology Applications)

When introducing non-numerical data to 2nd-grade learners, begin with concrete, sensory-based classroom experiences (e.g., observing the sky out the window or raising hands for favorite book types) before moving to abstract definitions. Emphasize that 'data' is simply a formal word for collected information that helps us answer real questions. Use physical sorting bins or drag-and-drop digital activities to reinforce how qualitative attributes (words, labels, images) form distinct data sets without requiring mathematical computation.

What Is Data?

What Is Data?

Words, Colors, and Numbers