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 a giant playground filled with thousands of fun games, videos, and stories to explore. That is what the internet is!

Just like a real playground, having a few simple safety rules makes playing online fun and worry-free.

Who should you always check in with before you start exploring?

A **trusted adult** is a grown-up who takes care of you, like a parent, grandparent, or teacher.

Always ask your trusted adult before you open a **new app** or download a new game.

<!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>Ask Before Downloading</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    .stepper-nav {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      width: 100%;
      max-width: 440px;
    }

    .step-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 8px 4px;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      background: #ffffff;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
    }

    .step-btn.active {
      border-color: #3b82f6;
      color: #1d4ed8;
      background: #eff6ff;
    }

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

    .scene-step {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
      padding: 16px;
      text-align: center;
    }

    .scene-step.active {
      opacity: 1;
      pointer-events: auto;
    }

    /* Screen graphics */
    .tablet {
      width: 130px;
      height: 160px;
      background: #f8fafc;
      border: 5px solid #334155;
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(0,0,0,0.06);
      position: relative;
    }

    .app-icon {
      font-size: 40px;
      margin-bottom: 8px;
    }

    .btn-download {
      font-size: 12px;
      font-weight: 700;
      background: #3b82f6;
      color: #ffffff;
      padding: 6px 12px;
      border-radius: 6px;
      box-shadow: 0 2px 6px rgba(59,130,246,0.3);
    }

    /* People in Step 2 */
    .people-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      width: 100%;
    }

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

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

    .bubble {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      position: relative;
      white-space: nowrap;
    }

    .bubble-ask {
      background: #eff6ff;
      border-color: #93c5fd;
      color: #1d4ed8;
    }

    .arrow-icon {
      font-size: 24px;
      color: #94a3b8;
    }

    /* Success in Step 3 */
    .safe-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #ecfdf5;
      border: 1.5px solid #10b981;
      color: #065f46;
      font-size: 14px;
      font-weight: 700;
      padding: 6px 16px;
      border-radius: 20px;
      margin-bottom: 12px;
    }

    .step-caption {
      margin-top: 8px;
      font-size: 15px;
      font-weight: 600;
      color: #1e2945;
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 14px;
    }

    .ctrl-btn {
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .ctrl-btn:active {
      background: #f1f5f9;
    }

    .dots-nav {
      display: flex;
      gap: 6px;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background-color 0.25s ease;
    }

    .dot.active {
      background: #3b82f6;
      width: 18px;
      border-radius: 4px;
    }
  </style>
</head>
<body>

  
  <div class="stepper-nav">
    <button class="step-btn active" id="tab-0" onclick="goToStep(0)">
      <span>1</span>
      <span>New App</span>
    </button>
    <button class="step-btn" id="tab-1" onclick="goToStep(1)">
      <span>2</span>
      <span>Ask Adult</span>
    </button>
    <button class="step-btn" id="tab-2" onclick="goToStep(2)">
      <span>3</span>
      <span>Safe to Play</span>
    </button>
  </div>

  
  <div class="stage-card">
    
    <div class="scene-step active" id="scene-0">
      <div class="tablet">
        <div class="app-icon">🎮</div>
        <div class="btn-download">Get Game</div>
      </div>
      <div class="step-caption">1. See a new game</div>
    </div>

    
    <div class="scene-step" id="scene-1">
      <div class="people-wrap">
        <div class="person-col">
          <div class="bubble bubble-ask">Can I play? ❓</div>
          <div class="avatar">👧</div>
        </div>
        <div class="arrow-icon">➔</div>
        <div class="person-col">
          <div class="bubble">Let me check! 🔍</div>
          <div class="avatar">🧑</div>
        </div>
      </div>
      <div class="step-caption">2. Always ask first</div>
    </div>

    
    <div class="scene-step" id="scene-2">
      <div class="safe-badge">✓ Approved</div>
      <div class="people-wrap">
        <div class="person-col">
          <div class="avatar">😊</div>
        </div>
        <div class="tablet" style="height: 120px; width: 110px;">
          <div class="app-icon" style="font-size: 32px; margin-bottom: 2px;">🌟</div>
          <span style="font-size: 11px; font-weight: 700; color: #10b981;">SAFE</span>
        </div>
      </div>
      <div class="step-caption">3. Play safely together</div>
    </div>
  </div>

  
  <div class="controls">
    <button class="ctrl-btn" onclick="prevStep()">◀ Prev</button>
    <div class="dots-nav">
      <div class="dot active" id="dot-0" onclick="goToStep(0)"></div>
      <div class="dot" id="dot-1" onclick="goToStep(1)"></div>
      <div class="dot" id="dot-2" onclick="goToStep(2)"></div>
    </div>
    <button class="ctrl-btn" onclick="nextStep()">Next ▶</button>
  </div>

  <script>
    let currentStep = 0;
    const totalSteps = 3;
    let autoPlayTimer = null;

    function render() {
      for (let i = 0; i < totalSteps; i++) {
        document.getElementById(`scene-${i}`).classList.toggle('active', i === currentStep);
        document.getElementById(`tab-${i}`).classList.toggle('active', i === currentStep);
        document.getElementById(`dot-${i}`).classList.toggle('active', i === currentStep);
      }
    }

    function goToStep(idx) {
      currentStep = idx;
      render();
      resetTimer();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % totalSteps;
      render();
      resetTimer();
    }

    function prevStep() {
      currentStep = (currentStep - 1 + totalSteps) % totalSteps;
      render();
      resetTimer();
    }

    function resetTimer() {
      if (autoPlayTimer) clearInterval(autoPlayTimer);
      autoPlayTimer = setInterval(() => {
        currentStep = (currentStep + 1) % totalSteps;
        render();
      }, 3600);
    }

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

What should you do if a surprise button suddenly flashes on your screen while playing?

A **link** is a clickable button, word, or picture that takes you to a different place online.

An **unknown link** is a mystery button or pop-up you did not expect, like a flashing box that says 'Click to win a toy!'

<!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;
    }

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

    .container {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Screen display simulator */
    .screen-mock {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 170px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    }

    .popup-box {
      border-radius: 10px;
      padding: 12px 18px;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .popup-mystery {
      background: #fffbeb;
      border: 2px dashed #f59e0b;
    }

    .popup-safe {
      background: #f0fdf4;
      border: 2px solid #22c55e;
    }

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

    .popup-title {
      font-size: 16px;
      font-weight: 700;
    }

    .arrow-down {
      font-size: 20px;
      color: #94a3b8;
      margin: 2px 0;
    }

    /* Response / Action Box */
    .action-display {
      width: 100%;
      border-radius: 10px;
      padding: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-weight: 700;
      font-size: 15px;
      transition: all 0.3s ease;
    }

    .action-stop {
      background: #fef2f2;
      border: 2px solid #ef4444;
      color: #b91c1c;
    }

    .action-ok {
      background: #f0fdf4;
      border: 2px solid #22c55e;
      color: #15803d;
    }

    /* Selector tabs */
    .selector-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
    }

    .tab-btn {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 8px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      transition: background 0.2s ease, border-color 0.2s ease;
    }

    .tab-btn.active-mystery {
      border-color: #f59e0b;
      background: #fffbeb;
      color: #b45309;
    }

    .tab-btn.active-safe {
      border-color: #22c55e;
      background: #f0fdf4;
      color: #15803d;
    }

    .symbol {
      font-size: 22px;
    }
  </style>
</head>
<body>

  <div class="container">
    
    <div class="selector-grid">
      <button class="tab-btn active-mystery" id="btnMystery" onclick="showState('mystery')">
        <span class="symbol">🎁 ❓</span>
        <span>Mystery Pop-up</span>
      </button>
      <button class="tab-btn" id="btnSafe" onclick="showState('safe')">
        <span class="symbol">📚 🎮</span>
        <span>Known Safe App</span>
      </button>
    </div>

    
    <div class="screen-mock">
      
      <div id="popBox" class="popup-box popup-mystery">
        <span id="popIcon" class="icon-large">🎁</span>
        <div>
          <div id="popText" class="popup-title">Win Free Toy!</div>
        </div>
      </div>

      <div class="arrow-down">⬇️</div>

      
      <div id="actionBox" class="action-display action-stop">
        <span id="actionIcon" style="font-size: 22px;">✋ 🧑‍🏫</span>
        <span id="actionText">Stop &amp; Ask Adult</span>
      </div>
    </div>
  </div>

  <script>
    function showState(type) {
      const btnMystery = document.getElementById('btnMystery');
      const btnSafe = document.getElementById('btnSafe');
      const popBox = document.getElementById('popBox');
      const popIcon = document.getElementById('popIcon');
      const popText = document.getElementById('popText');
      const actionBox = document.getElementById('actionBox');
      const actionIcon = document.getElementById('actionIcon');
      const actionText = document.getElementById('actionText');

      if (type === 'mystery') {
        btnMystery.className = 'tab-btn active-mystery';
        btnSafe.className = 'tab-btn';

        popBox.className = 'popup-box popup-mystery';
        popIcon.textContent = '🎁';
        popText.textContent = 'Win Free Toy!';

        actionBox.className = 'action-display action-stop';
        actionIcon.textContent = '✋ 🧑‍🏫';
        actionText.textContent = 'Stop & Ask Adult';
      } else {
        btnSafe.className = 'tab-btn active-safe';
        btnMystery.className = 'tab-btn';

        popBox.className = 'popup-box popup-safe';
        popIcon.textContent = '📚';
        popText.textContent = 'Class Math Game';

        actionBox.className = 'action-display action-ok';
        actionIcon.textContent = '✅ 👍';
        actionText.textContent = 'Safe to Play';
      }
    }
  </script>
</body>
</html>

What happens if a mystery button or strange screen pops up anyway?

If you see an unknown link or something that feels strange, **stop** and put your device down.

Tell your trusted adult right away so they can close the screen and keep your game safe!

technology

Playing and Learning Safely Online. Learners will identify safe habits such as asking an adult before using a new app and not clicking on unknown links.

The Adventures of Smartie the Penguin (Early Years / P1 Online Safety Story)

Jessie & Friends: Episode 1 – Watching Videos & Staying Safe Online (Ages 4–5)

How Can You Use the Internet Safely? (Early Level / KS1 Digital Literacy)

At Early Level (P1 / ages 4-5), online safety pedagogy is most effective when grounded in memorable, repetitive routines and concrete narratives (e.g., stories with songs like Smartie the Penguin's 'Before you tap and click... stop and think and tell someone'). Emphasise open communication over fear: reinforce that children will never be in trouble for asking for help or when an unexpected link pops up on screen.

Work through this lesson with your tutor.

Playing and Learning Safely Online

Rule 1: Ask a Grown-Up

Rule 2: Do Not Click Mystery Links