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 are playing a mystery game, and someone leaves behind a list of clues about who they are.

**Personal information** is any detail that tells people exactly who you are or where to find you.

<!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: #f8fafc;
    color: #1e293b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    min-height: 100%;
  }

  .main-wrap {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  /* Identity Target Hub */
  .id-hub {
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }

  .id-hub.unlocked {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
  }

  .id-hub.safe-mode {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
  }

  .hub-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: background 0.3s ease;
  }

  .hub-left p {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
  }

  .hub-status {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #64748b;
    transition: all 0.3s ease;
  }

  .hub-status.status-personal {
    background: #e0f2fe;
    color: #0284c7;
  }

  .hub-status.status-safe {
    background: #dcfce7;
    color: #15803d;
  }

  /* Grid of Clues */
  .grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .tile {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 8px;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .tile:hover {
    background: #f1f5f9;
  }

  .tile.active-personal {
    background: #f0f9ff;
    border-color: #38bdf8;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
    color: #0369a1;
  }

  .tile.active-safe {
    background: #f0fdf4;
    border-color: #86efac;
    box-shadow: 0 0 0 2px rgba(134, 239, 172, 0.3);
    color: #15803d;
  }

  .icon {
    font-size: 18px;
    line-height: 1;
  }

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

  .filter-btn {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .filter-btn.active {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
  }
</style>
</head>
<body>

<div class="main-wrap">
  
  <div class="id-hub" id="hub">
    <div class="hub-left">
      <div class="avatar" id="hubAvatar">👤</div>
      <div>
        <p id="hubTitle">Real Identity</p>
      </div>
    </div>
    <div class="hub-status" id="hubStatus">Tap an item</div>
  </div>

  
  <div class="nav-bar">
    <button class="filter-btn active" id="btnPersonal" onclick="setMode('personal')">🔒 Personal Info</button>
    <button class="filter-btn" id="btnSafe" onclick="setMode('safe')">💬 General Info</button>
  </div>

  
  <div class="grid">
    <button class="tile" data-type="personal" onclick="inspect(this)">
      <span class="icon">📛</span>
      <span>Full Name</span>
    </button>
    <button class="tile" data-type="personal" onclick="inspect(this)">
      <span class="icon">🏠</span>
      <span>Home Address</span>
    </button>
    <button class="tile" data-type="personal" onclick="inspect(this)">
      <span class="icon">🏫</span>
      <span>School Name</span>
    </button>
    <button class="tile" data-type="personal" onclick="inspect(this)">
      <span class="icon">📞</span>
      <span>Phone Number</span>
    </button>
    <button class="tile" data-type="safe" onclick="inspect(this)">
      <span class="icon">🎨</span>
      <span>Favorite Color</span>
    </button>
    <button class="tile" data-type="safe" onclick="inspect(this)">
      <span class="icon">🍕</span>
      <span>Favorite Food</span>
    </button>
  </div>
</div>

<script>
  let currentMode = 'personal';

  function updateHub(type, label) {
    const hub = document.getElementById('hub');
    const avatar = document.getElementById('hubAvatar');
    const status = document.getElementById('hubStatus');

    hub.className = 'id-hub';

    if (type === 'personal') {
      hub.classList.add('unlocked');
      avatar.textContent = '🔑';
      avatar.style.background = '#e0f2fe';
      status.className = 'hub-status status-personal';
      status.textContent = 'Unlocks Identity 🔓';
    } else {
      hub.classList.add('safe-mode');
      avatar.textContent = '👍';
      avatar.style.background = '#dcfce7';
      status.className = 'hub-status status-safe';
      status.textContent = 'Safe to Share ✓';
    }
  }

  function inspect(tile) {
    const type = tile.dataset.type;
    const label = tile.querySelector('span:last-child').textContent;

    document.querySelectorAll('.tile').forEach(t => {
      t.classList.remove('active-personal', 'active-safe');
    });

    if (type === 'personal') {
      tile.classList.add('active-personal');
    } else {
      tile.classList.add('active-safe');
    }

    updateHub(type, label);
  }

  function setMode(mode) {
    currentMode = mode;
    document.getElementById('btnPersonal').classList.toggle('active', mode === 'personal');
    document.getElementById('btnSafe').classList.toggle('active', mode === 'safe');

    const firstMatch = Array.from(document.querySelectorAll('.tile')).find(t => t.dataset.type === mode);
    if (firstMatch) inspect(firstMatch);
  }

  // Initial trigger
  setMode('personal');
</script>

</body>
</html>

Just like a key unlocks your front door, these clues unlock your real-world identity.

What makes a piece of information point directly to you and nobody else?

Your **full name** includes both your first name and your family's last name.

Lots of kids might be named 'Leo,' but only one person has your exact first and last name in your class.

Your **home address** tells the exact street, house number, and city where you sleep at night.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="aspect-ratio" content="4:3">
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, sans-serif;
    background: #f8fafc;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 12px;
    user-select: none;
  }

  .address-bar {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 420px;
    margin-bottom: 16px;
  }

  .part-btn {
    flex: 1;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 6px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  }

  .part-btn .val {
    font-size: 15px;
    font-weight: 700;
    display: block;
    color: #1e2945;
  }

  .part-btn .tag {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #64748b;
    margin-top: 2px;
    display: block;
  }

  .part-btn.active {
    border-color: #f97316;
    background: #fff7ed;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2);
  }

  .part-btn.active .val {
    color: #ea580c;
  }

  .map-stage {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 240px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* SVG Map layers */
  .grid-bg {
    position: absolute;
    inset: 0;
    background-image: 
      linear-gradient(#f1f5f9 1px, transparent 1px),
      linear-gradient(90deg, #f1f5f9 1px, transparent 1px);
    background-size: 24px 24px;
  }

  /* Visual Stages */
  .view-layer {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
  }

  .view-layer.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }

  /* Stage 1: City */
  .city-cluster {
    display: flex;
    gap: 16px;
    font-size: 40px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05));
  }

  /* Stage 2: Street */
  .road-view {
    width: 80%;
    height: 60px;
    background: #cbd5e1;
    border-radius: 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: 4px solid #94a3b8;
    border-bottom: 4px solid #94a3b8;
  }

  .road-view::after {
    content: '';
    position: absolute;
    left: 0; right: 0; height: 0;
    border-top: 3px dashed #ffffff;
  }

  .houses-row {
    display: flex;
    gap: 28px;
    font-size: 32px;
    margin-bottom: 8px;
  }

  /* Stage 3: Exact House */
  .target-house {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .pin-badge {
    background: #ea580c;
    color: white;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 6px;
    box-shadow: 0 4px 10px rgba(234, 88, 12, 0.3);
    animation: bounce 1.8s infinite ease-in-out;
  }

  .house-icon {
    font-size: 64px;
    line-height: 1;
  }

  .privacy-status {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
  }

  .status-public {
    background: #f1f5f9;
    color: #475569;
  }

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

  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }
</style>
</head>
<body>

  
  <div class="address-bar">
    <div class="part-btn" onclick="setStep(0)" id="btn-0">
      <span class="val">Austin</span>
      <span class="tag">City</span>
    </div>
    <div class="part-btn" onclick="setStep(1)" id="btn-1">
      <span class="val">Maple Ave</span>
      <span class="tag">Street</span>
    </div>
    <div class="part-btn active" onclick="setStep(2)" id="btn-2">
      <span class="val">742</span>
      <span class="tag">House #</span>
    </div>
  </div>

  
  <div class="map-stage">
    <div class="grid-bg"></div>

    
    <div class="view-layer" id="view-0">
      <div class="city-cluster">
        <span>🏢</span><span>🏙️</span><span>🏢</span><span>🌳</span>
      </div>
      <div class="privacy-status status-public">Public Area</div>
    </div>

    
    <div class="view-layer" id="view-1">
      <div class="houses-row">
        <span>🏠</span><span>🏡</span><span>🏠</span>
      </div>
      <div class="road-view"></div>
      <div class="privacy-status status-public">Shared Road</div>
    </div>

    
    <div class="view-layer active" id="view-2">
      <div class="target-house">
        <div class="pin-badge">YOU 📍</div>
        <div class="house-icon">🏠</div>
      </div>
      <div class="privacy-status status-private">🔒 Private Information</div>
    </div>
  </div>

  <script>
    let current = 2;
    function setStep(idx) {
      current = idx;
      for (let i = 0; i < 3; i++) {
        document.getElementById('btn-' + i).classList.toggle('active', i === idx);
        document.getElementById('view-' + i).classList.toggle('active', i === idx);
      }
    }
  </script>
</body>
</html>

Names and street signs are made of words, but what about numbers?

A **phone number** connects straight to your family's personal pocket device.

Your **age** and exact birthday tell how old you are and when you were born.

<!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 Personal Information?</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background-color: #f8fafc;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
      -webkit-user-select: none;
    }

    .main-layout {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .shield-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      font-size: 14px;
      font-weight: 600;
      color: #b45309;
    }

    .grid-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      width: 100%;
    }

    .info-card {
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
      transition: box-shadow 0.25s ease, background-color 0.25s ease;
      min-height: 88px;
    }

    .info-card:hover {
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    }

    .info-card.active {
      box-shadow: 0 0 0 2px #eab308, 0 4px 12px rgba(234, 179, 8, 0.15);
      background-color: #fefce8;
    }

    .card-icon {
      font-size: 26px;
      line-height: 1;
      margin-bottom: 6px;
    }

    .card-title {
      font-size: 15px;
      font-weight: 600;
      color: #1e2945;
      line-height: 1.2;
    }

    .status-panel {
      width: 100%;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    }

    .status-indicator {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
    }

    .lock-icon {
      width: 28px;
      height: 28px;
      background: #fef3c7;
      color: #b45309;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }

    .status-tag {
      font-size: 13px;
      font-weight: 700;
      color: #b45309;
      background: #fef3c7;
      padding: 4px 10px;
      border-radius: 6px;
      letter-spacing: 0.3px;
    }
  </style>
</head>
<body>

  <div class="main-layout">
    <div class="shield-badge">
      <span>🔒</span>
      <span>Personal Information</span>
    </div>

    <div class="grid-container" id="cardGrid">
      <div class="info-card active" data-index="0" onclick="selectCard(0)">
        <div class="card-icon">🏷️</div>
        <div class="card-title">Full Name</div>
      </div>

      <div class="info-card" data-index="1" onclick="selectCard(1)">
        <div class="card-icon">🏠</div>
        <div class="card-title">Home Address</div>
      </div>

      <div class="info-card" data-index="2" onclick="selectCard(2)">
        <div class="card-icon">📞</div>
        <div class="card-title">Phone Number</div>
      </div>

      <div class="info-card" data-index="3" onclick="selectCard(3)">
        <div class="card-icon">🎂</div>
        <div class="card-title">Age & Birthday</div>
      </div>
    </div>

    <div class="status-panel">
      <div class="status-indicator">
        <div class="lock-icon" id="lockIcon">🔒</div>
        <span id="activeLabel">Full Name</span>
      </div>
      <span class="status-tag">PRIVATE</span>
    </div>
  </div>

  <script>
    const items = [
      { name: 'Full Name', icon: '🏷️' },
      { name: 'Home Address', icon: '🏠' },
      { name: 'Phone Number', icon: '📞' },
      { name: 'Age & Birthday', icon: '🎂' }
    ];

    let currentIndex = 0;
    let autoPlayTimer = null;
    const cards = document.querySelectorAll('.info-card');
    const activeLabel = document.getElementById('activeLabel');
    const lockIcon = document.getElementById('lockIcon');

    function updateView(index) {
      currentIndex = index;
      cards.forEach((card, idx) => {
        card.classList.toggle('active', idx === index);
      });
      activeLabel.textContent = items[index].name;
      lockIcon.textContent = '🔒';
    }

    function selectCard(index) {
      clearInterval(autoPlayTimer);
      updateView(index);
      startAutoPlay();
    }

    function startAutoPlay() {
      autoPlayTimer = setInterval(() => {
        currentIndex = (currentIndex + 1) % items.length;
        updateView(currentIndex);
      }, 3000);
    }

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

When you play online games or use apps, remember that your full name, address, phone number, and age belong only to you and trusted adults.

technology

What Is Personal Information?. Learners will identify examples of personal information such as full name, address, phone number, and age.

Private and Personal Information: That's Private! (Grade 2 Digital Citizenship)

Internet Safety: Keeping Personal Info Private

How to Keep Your Personal Information Safe and Private Online (Primary Computing/PSHE)

When teaching 2nd-grade learners (ages 7-8), focus on tangible, concrete rules rather than abstract legal definitions of data privacy. Use the 'Locks & Keys' metaphor or the 'T-Shirt Rule' (if you wouldn't feel safe printing it on a t-shirt for strangers on the street to read, don't put it online). Ground instruction in interactive sorting games, role-playing digital prompts, and the core protective habit of consulting a trusted adult before filling out forms or entering usernames.

What Is Personal Information?

Names and Places

Secret Numbers