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 leaving your bedroom door wide open with your secret diary sitting right on the desk for anyone to read. When you use a computer or tablet, your digital account is just like your private room.

To **log in** means typing your username and secret password to open your account so only you can use it.

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

  .nav-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }

  .step-btn {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .step-btn.active {
    background: #22b7ff;
    border-color: #22b7ff;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
  }

  .play-btn {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #1e2945;
  }

  .stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
    max-width: 540px;
  }

  @media (max-width: 440px) {
    .stage {
      grid-template-columns: 1fr;
      gap: 12px;
    }
  }

  .tile {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 170px;
    transition: border-color 0.3s ease, background-color 0.3s ease;
  }

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

  .tile-icon {
    font-size: 54px;
    line-height: 1.1;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
  }

  .badge {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 12px;
    display: inline-block;
  }

  /* States */
  .state-active .tile {
    border-color: #22b7ff;
    background: #f0f9ff;
  }
  .state-active .badge {
    background: #e0f2fe;
    color: #0284c7;
  }

  .state-warning .tile {
    border-color: #f59e0b;
    background: #fffbeb;
  }
  .state-warning .badge {
    background: #fef3c7;
    color: #d97706;
  }

  .state-safe .tile {
    border-color: #10b981;
    background: #ecfdf5;
  }
  .state-safe .badge {
    background: #d1fae5;
    color: #059669;
  }
</style>
</head>
<body>

<div class="nav-bar">
  <button class="step-btn active" onclick="setStep(0)">1. Log In</button>
  <button class="step-btn" onclick="setStep(1)">2. Left Open</button>
  <button class="step-btn" onclick="setStep(2)">3. Log Out</button>
  <button class="play-btn" id="playBtn" onclick="togglePlay()" aria-label="Play/Pause">⏸</button>
</div>

<div class="stage" id="stageContainer">
  <div class="tile">
    <div class="tile-title">Bedroom Door</div>
    <div class="tile-icon" id="roomIcon">🚪🔑</div>
    <div class="badge" id="roomBadge">Open (You're Inside)</div>
  </div>

  <div class="tile">
    <div class="tile-title">Digital Account</div>
    <div class="tile-icon" id="accountIcon">💻👤</div>
    <div class="badge" id="accountBadge">In Use</div>
  </div>
</div>

<script>
  const data = [
    {
      cls: 'state-active',
      roomIcon: '🚪🔑',
      roomBadge: "Open (You're Inside)",
      accountIcon: '💻👤',
      accountBadge: 'In Use'
    },
    {
      cls: 'state-warning',
      roomIcon: '🚪👀',
      roomBadge: 'Door Wide Open',
      accountIcon: '💻⚠️',
      accountBadge: 'Exposed to Others'
    },
    {
      cls: 'state-safe',
      roomIcon: '🚪🔒',
      roomBadge: 'Locked Safe',
      accountIcon: '🔒🛡️',
      accountBadge: 'Protected'
    }
  ];

  let currentStep = 0;
  let isPlaying = true;
  let timer = null;

  const stage = document.getElementById('stageContainer');
  const roomIcon = document.getElementById('roomIcon');
  const roomBadge = document.getElementById('roomBadge');
  const accountIcon = document.getElementById('accountIcon');
  const accountBadge = document.getElementById('accountBadge');
  const buttons = document.querySelectorAll('.step-btn');
  const playBtn = document.getElementById('playBtn');

  function render() {
    const cur = data[currentStep];
    stage.className = 'stage ' + cur.cls;
    roomIcon.textContent = cur.roomIcon;
    roomBadge.textContent = cur.roomBadge;
    accountIcon.textContent = cur.accountIcon;
    accountBadge.textContent = cur.accountBadge;

    buttons.forEach((btn, idx) => {
      btn.classList.toggle('active', idx === currentStep);
    });
  }

  function setStep(idx) {
    currentStep = idx;
    render();
  }

  function nextStep() {
    currentStep = (currentStep + 1) % data.length;
    render();
  }

  function togglePlay() {
    isPlaying = !isPlaying;
    playBtn.textContent = isPlaying ? '⏸' : '▶';
    if (isPlaying) {
      startTimer();
    } else {
      clearInterval(timer);
    }
  }

  function startTimer() {
    clearInterval(timer);
    timer = setInterval(() => {
      if (isPlaying) nextStep();
    }, 3200);
  }

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

Opening your account is exciting, but how do you make sure nobody peeks while you do it?

When you type your password, make sure no one is looking over your shoulder. If a classmate is standing nearby, politely ask them to turn around for a second.

Never write your password on a sticky note attached to your screen where anyone walking by can read it.

You finished your math game and it is time for recess — what must you do before standing up from the computer?

To **log out** means closing your account so the computer forgets you are using it. It is just like locking your front door when you leave your house.

<!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>Logging In and Out Safely</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: #f8f9fa;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
    }
    .diagram-wrap {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    .nav-tabs {
      display: flex;
      width: 100%;
      gap: 6px;
      justify-content: center;
    }
    .tab-btn {
      flex: 1;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 600;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      background: #ffffff;
      color: #64748b;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .tab-btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
    }
    .stage-container {
      width: 100%;
      height: 250px;
      background: #ffffff;
      border-radius: 12px;
      border: 2px solid #e2e8f0;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .step-view {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .step-view.active {
      opacity: 1;
      pointer-events: auto;
    }
    .icon-box {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 38px;
    }
    .locked-bg { background: #e2e8f0; color: #475569; }
    .login-bg { background: #e0f2fe; color: #0284c7; }
    .active-bg { background: #dcfce7; color: #16a34a; }
    .logout-bg { background: #fee2e2; color: #dc2626; }
    .status-text {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.5px;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      background: #f1f5f9;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
    }
    .items-row {
      display: flex;
      gap: 12px;
      font-size: 24px;
      background: #f8fafc;
      padding: 6px 16px;
      border-radius: 10px;
      border: 1px dashed #cbd5e1;
    }
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .play-btn {
      padding: 6px 16px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="diagram-wrap">
    <div class="nav-tabs">
      <button class="tab-btn active" onclick="setStep(0)">1. Locked</button>
      <button class="tab-btn" onclick="setStep(1)">2. Log In</button>
      <button class="tab-btn" onclick="setStep(2)">3. Private</button>
      <button class="tab-btn" onclick="setStep(3)">4. Log Out</button>
    </div>

    <div class="stage-container">
      
      <div class="step-view active" id="step0">
        <div class="icon-box locked-bg">🔒</div>
        <div class="status-text">Door Locked</div>
        <div class="badge">Safe & Protected</div>
      </div>

      
      <div class="step-view" id="step1">
        <div class="icon-box login-bg">🔑</div>
        <div class="status-text">Password Check</div>
        <div class="badge">••••••••</div>
      </div>

      
      <div class="step-view" id="step2">
        <div class="icon-box active-bg">📂</div>
        <div class="status-text">Private Account</div>
        <div class="items-row">
          <span>📝</span>
          <span>🎨</span>
          <span>💬</span>
        </div>
      </div>

      
      <div class="step-view" id="step3">
        <div class="icon-box logout-bg">🚪</div>
        <div class="status-text">Lock Door</div>
        <div class="badge">Log Out → 🔒</div>
      </div>
    </div>

    <div class="controls">
      <button class="play-btn" id="playBtn" onclick="togglePlay()">⏸ Pause</button>
    </div>
  </div>

  <script>
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    function updateView() {
      const tabs = document.querySelectorAll('.tab-btn');
      const steps = document.querySelectorAll('.step-view');
      tabs.forEach((tab, i) => {
        tab.classList.toggle('active', i === currentStep);
      });
      steps.forEach((step, i) => {
        step.classList.toggle('active', i === currentStep);
      });
    }

    function setStep(idx) {
      currentStep = idx;
      updateView();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % 4;
      updateView();
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      const btn = document.getElementById('playBtn');
      if (isPlaying) {
        btn.textContent = '⏸ Pause';
        startTimer();
      } else {
        btn.textContent = '▶ Auto Play';
        clearInterval(timer);
      }
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        if (isPlaying) nextStep();
      }, 3000);
    }

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

If you stay logged in on a shared school tablet, the next student might accidentally erase your homework or spend your game points without meaning to.

How can you remember to stay safe every single time you use technology?

Follow this easy routine every time you use a computer at school, the library, or home:

<!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>Logging In and Out Safely</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

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

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

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

    .btn {
      flex: 1;
      max-width: 140px;
      padding: 10px 14px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 12px;
      border: 2px solid transparent;
      background: #ffffff;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

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

    .panels {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      width: 100%;
    }

    .panel {
      background: #ffffff;
      border-radius: 16px;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 210px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      position: relative;
    }

    .panel-title {
      font-size: 14px;
      font-weight: 700;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .visual-box {
      width: 100%;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    /* Room graphic */
    .door-frame {
      width: 64px;
      height: 100px;
      background: #e2e8f0;
      border-radius: 6px 6px 0 0;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 3px solid #cbd5e1;
    }

    .room-interior {
      position: absolute;
      inset: 0;
      background: #fef3c7;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }

    .door-panel {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #3b82f6;
      border-radius: 3px 3px 0 0;
      transform-origin: left center;
      transition: transform 0.4s ease, background-color 0.4s ease;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 6px;
      z-index: 2;
    }

    .doorknob {
      width: 8px;
      height: 8px;
      background: #fbbf24;
      border-radius: 50%;
      box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }

    /* Device graphic */
    .device {
      width: 96px;
      height: 74px;
      background: #1e2945;
      border-radius: 8px;
      padding: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    }

    .device-screen {
      width: 100%;
      height: 100%;
      background: #f1f5f9;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      position: relative;
      overflow: hidden;
      transition: background-color 0.3s ease;
    }

    .device-base {
      width: 32px;
      height: 4px;
      background: #94a3b8;
      border-radius: 0 0 4px 4px;
      margin-top: 2px;
    }

    .badge {
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: all 0.3s ease;
    }

    /* States */
    .state-safe .door-panel {
      transform: perspective(400px) rotateY(0deg);
      background: #2563eb;
    }
    .state-safe .device-screen {
      background: #eff6ff;
    }
    .state-safe .badge {
      background: #dcfce7;
      color: #15803d;
    }

    .state-open .door-panel {
      transform: perspective(400px) rotateY(-75deg);
      background: #3b82f6;
    }
    .state-open .device-screen {
      background: #fef9c3;
    }
    .state-open .badge {
      background: #e0f2fe;
      color: #0369a1;
    }

    .state-danger .door-panel {
      transform: perspective(400px) rotateY(-75deg);
      background: #ef4444;
    }
    .state-danger .device-screen {
      background: #fee2e2;
    }
    .state-danger .badge {
      background: #fee2e2;
      color: #b91c1c;
    }
  </style>
</head>
<body class="state-safe">

  <div class="main-stage">
    <div class="controls">
      <button class="btn active" id="btn-out" onclick="setState('safe')">
        <span>🔒</span> Log Out
      </button>
      <button class="btn" id="btn-in" onclick="setState('open')">
        <span>🔑</span> Log In
      </button>
      <button class="btn" id="btn-away" onclick="setState('danger')">
        <span>⚠️</span> Left Open
      </button>
    </div>

    <div class="panels">
      
      <div class="panel">
        <span class="panel-title">Private Room</span>
        <div class="visual-box">
          <div class="door-frame">
            <div class="room-interior">
              <span id="room-icon">📖</span>
            </div>
            <div class="door-panel">
              <div class="doorknob"></div>
            </div>
          </div>
        </div>
        <div class="badge" id="room-status">
          <span id="room-badge-icon">🔒</span>
          <span id="room-badge-text">Locked</span>
        </div>
      </div>

      
      <div class="panel">
        <span class="panel-title">Your Account</span>
        <div class="visual-box">
          <div class="device">
            <div class="device-screen" id="device-screen-content">
              <span>🔒</span>
            </div>
            <div class="device-base"></div>
          </div>
        </div>
        <div class="badge" id="account-status">
          <span id="account-badge-icon">✓</span>
          <span id="account-badge-text">Safe</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    function setState(state) {
      const body = document.body;
      const btnOut = document.getElementById('btn-out');
      const btnIn = document.getElementById('btn-in');
      const btnAway = document.getElementById('btn-away');
      
      const roomIcon = document.getElementById('room-icon');
      const roomStatus = document.getElementById('room-status');
      const roomBadgeIcon = document.getElementById('room-badge-icon');
      const roomBadgeText = document.getElementById('room-badge-text');

      const screenContent = document.getElementById('device-screen-content');
      const accountStatus = document.getElementById('account-status');
      const accountBadgeIcon = document.getElementById('account-badge-icon');
      const accountBadgeText = document.getElementById('account-badge-text');

      // Reset active buttons
      btnOut.classList.remove('active');
      btnIn.classList.remove('active');
      btnAway.classList.remove('active');

      // Reset classes
      body.className = '';

      if (state === 'safe') {
        body.classList.add('state-safe');
        btnOut.classList.add('active');

        roomIcon.textContent = '🔒';
        roomBadgeIcon.textContent = '🔒';
        roomBadgeText.textContent = 'Locked';

        screenContent.innerHTML = '<span>🔒</span>';
        accountBadgeIcon.textContent = '✓';
        accountBadgeText.textContent = 'Safe';
      } else if (state === 'open') {
        body.classList.add('state-open');
        btnIn.classList.add('active');

        roomIcon.textContent = '👤';
        roomBadgeIcon.textContent = '🔑';
        roomBadgeText.textContent = 'In Use';

        screenContent.innerHTML = '<span>💻</span>';
        accountBadgeIcon.textContent = '✦';
        accountBadgeText.textContent = 'Active';
      } else if (state === 'danger') {
        body.classList.add('state-danger');
        btnAway.classList.add('active');

        roomIcon.textContent = '👀';
        roomBadgeIcon.textContent = '⚠️';
        roomBadgeText.textContent = 'Exposed';

        screenContent.innerHTML = '<span>⚠️</span>';
        accountBadgeIcon.textContent = '✕';
        accountBadgeText.textContent = 'At Risk';
      }
    }
  </script>
</body>
</html>

Next time you hear the bell ring for lunch, take five seconds to find the **Log Out** or **Sign Out** button before you push in your chair.

technology

Logging In and Out Safely. Learners will explain why it is important to log in and log out of accounts and devices safely.

Digital Passport & Password Power-Up: Privacy & Security Lessons (Grades K-2 / 3-5)

Interland: Tower of Treasure - Secure Your Secrets & Safe Account Management

Key Stage 1 Computing: Staying Safe Online and Protecting Your Logins

Teaching 2nd graders to log in and out safely requires bridging abstract cyber concepts with physical, familiar routines. Effective instructional strategies include: (1) The 'House Key & Door Lock' concrete analogy to demonstrate why shutting the door without turning the lock leaves a room vulnerable; (2) Establishing a clear classroom '3-Step Exit Routine' (Save, Sign Out, Screen Check) reinforced with visual anchor charts next to laptop carts; (3) Guided peer-modeling where students observe the difference between an open session and a returned login prompt; and (4) Reinforcing that keeping passwords private is about safety, not secrecy from trusted guardians and educators.

Logging In and Out Safely

Logging In Safely

Why You Must Log Out