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 your teacher hands you a shiny tablet to build a virtual city.

Before you tap the screen, your school asks you to follow a special set of rules.

An **Acceptable Use Policy** (or **AUP**) is a list of school rules that keeps everyone safe when using computers and tablets.

Just like wearing a seatbelt keeps you safe in a car, an AUP protects you, your friends, and your school's devices.

<!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>AUP Protection Shield</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

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

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

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

    .tab-btn.active {
      color: #0284c7;
      background: #e0f2fe;
      box-shadow: inset 0 0 0 2px #0284c7;
    }

    .stage {
      position: relative;
      width: 100%;
      max-width: 420px;
      height: 250px;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 16px;
    }

    .panel {
      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.3s ease;
      padding: 16px;
    }

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

    .shield-badge {
      font-size: 40px;
      line-height: 1;
      margin-bottom: 12px;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    }

    .cards-row {
      display: flex;
      gap: 12px;
      width: 100%;
      justify-content: center;
    }

    .rule-card {
      flex: 1;
      max-width: 160px;
      background: #f8f9fa;
      border-radius: 12px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .rule-icon {
      font-size: 28px;
      margin-bottom: 6px;
    }

    .rule-label {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      line-height: 1.2;
    }

    .rule-status {
      display: inline-block;
      margin-top: 4px;
      font-size: 11px;
      font-weight: 600;
      color: #16a34a;
      background: #dcfce7;
      padding: 2px 6px;
      border-radius: 4px;
    }

    .stepper-controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 14px;
    }

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

    .dot.active {
      background: #0284c7;
      width: 20px;
      border-radius: 4px;
    }
  </style>
</head>
<body>

  <div class="nav-tabs">
    <button class="tab-btn active" id="tab-0">👤 You</button>
    <button class="tab-btn" id="tab-1">👥 Friends</button>
    <button class="tab-btn" id="tab-2">💻 Devices</button>
  </div>

  <div class="stage">
    
    <div class="panel active" id="panel-0">
      <div class="shield-badge">🛡️</div>
      <div class="cards-row">
        <div class="rule-card">
          <div class="rule-icon">🔒</div>
          <div class="rule-label">Private Info</div>
          <div class="rule-status">Protected</div>
        </div>
        <div class="rule-card">
          <div class="rule-icon">🌐</div>
          <div class="rule-label">Safe Web</div>
          <div class="rule-status">Verified</div>
        </div>
      </div>
    </div>

    
    <div class="panel" id="panel-1">
      <div class="shield-badge">🤝</div>
      <div class="cards-row">
        <div class="rule-card">
          <div class="rule-icon">💬</div>
          <div class="rule-label">Kind Words</div>
          <div class="rule-status">Required</div>
        </div>
        <div class="rule-card">
          <div class="rule-icon">🚫</div>
          <div class="rule-label">No Bullying</div>
          <div class="rule-status">Enforced</div>
        </div>
      </div>
    </div>

    
    <div class="panel" id="panel-2">
      <div class="shield-badge">✨</div>
      <div class="cards-row">
        <div class="rule-card">
          <div class="rule-icon">🎒</div>
          <div class="rule-label">Safe Carry</div>
          <div class="rule-status">Handled</div>
        </div>
        <div class="rule-card">
          <div class="rule-icon">🥤❌</div>
          <div class="rule-label">No Spills</div>
          <div class="rule-status">Kept Safe</div>
        </div>
      </div>
    </div>
  </div>

  <div class="stepper-controls">
    <div class="dot active" id="dot-0"></div>
    <div class="dot" id="dot-1"></div>
    <div class="dot" id="dot-2"></div>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    let activeIndex = 0;
    const totalPanels = 3;
    let timer = null;

    function setPanel(index) {
      activeIndex = index;
      for (let i = 0; i < totalPanels; i++) {
        const tab = document.getElementById('tab-' + i);
        const panel = document.getElementById('panel-' + i);
        const dot = document.getElementById('dot-' + i);

        if (i === index) {
          tab.classList.add('active');
          panel.classList.add('active');
          dot.classList.add('active');
        } else {
          tab.classList.remove('active');
          panel.classList.remove('active');
          dot.classList.remove('active');
        }
      }
    }

    function resetTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(() => {
        setPanel((activeIndex + 1) % totalPanels);
      }, 3500);
    }

    for (let i = 0; i < totalPanels; i++) {
      const tab = document.getElementById('tab-' + i);
      const dot = document.getElementById('dot-' + i);

      const handler = () => {
        setPanel(i);
        resetTimer();
      };

      if (tab) tab.addEventListener('click', handler);
      if (dot) dot.addEventListener('click', handler);
    }

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

How do we make sure our tablets never break or get damaged?

Always hold your device with **two hands** when walking across the classroom.

Keep all snacks and water bottles far away from keyboards and screens so spills never ruin the machine.

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

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

  .mode-btn {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: #ffffff;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    text-align: center;
  }

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

  .mode-btn.risk-active {
    background: #fef2f2;
    border-color: #ef4444;
    color: #b91c1c;
  }

  .desk-surface {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 250px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Zone divider */
  .zone-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    border-left: 2px dashed #cbd5e1;
    transition: left 0.3s ease;
  }

  .zone-label {
    position: absolute;
    top: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 6px;
    transition: opacity 0.3s ease;
  }

  .label-left {
    left: 12px;
    background: #f1f5f9;
    color: #475569;
  }

  .label-right {
    right: 12px;
  }

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

  .badge-risk {
    background: #fee2e2;
    color: #991b1b;
  }

  /* Device */
  .device-box {
    position: absolute;
    left: 20%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: opacity 0.3s ease;
  }

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

  .device-tag {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
  }

  /* Item area */
  .item-box {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: left 0.4s ease, transform 0.4s ease;
  }

  .item-icon {
    font-size: 46px;
    line-height: 1;
    transition: transform 0.3s ease;
  }

  .item-tag {
    font-size: 12px;
    font-weight: 600;
  }

  /* Indicator status pill */
  .status-footer {
    width: 100%;
    max-width: 420px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.3s ease, color 0.3s ease;
  }

  .status-safe {
    background: #dcfce7;
    color: #166534;
  }

  .status-risk {
    background: #fee2e2;
    color: #991b1b;
  }

  /* Spill effect */
  .spill-mark {
    position: absolute;
    left: 42%;
    top: 60%;
    font-size: 26px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .show-spill {
    opacity: 1;
  }
</style>
</head>
<body>

  <div class="nav-bar">
    <button class="mode-btn safe-active" id="btnSafe" onclick="setMode('safe')">✓ Safe Setup</button>
    <button class="mode-btn" id="btnRisk" onclick="setMode('risk')">⚠️ Spill Risk</button>
  </div>

  <div class="desk-surface">
    <div class="zone-line" id="zoneLine" style="left: 48%;"></div>
    
    <span class="zone-label label-left">Device Zone</span>
    <span class="zone-label label-right badge-safe" id="rightLabel">Safe Distance</span>

    <div class="device-box">
      <div class="laptop-icon">💻</div>
      <div class="device-tag">Clean Desk</div>
    </div>

    <div class="spill-mark" id="spill">💦</div>

    <div class="item-box" id="itemBox" style="left: 78%;">
      <div class="item-icon" id="itemIcon">🥤🥪</div>
      <div class="item-tag" id="itemTag" style="color: #15803d;">Far Away</div>
    </div>
  </div>

  <div class="status-footer status-safe" id="statusFooter">
    <span>✓ Protected from Spills</span>
  </div>

<script>
  function setMode(mode) {
    const btnSafe = document.getElementById('btnSafe');
    const btnRisk = document.getElementById('btnRisk');
    const itemBox = document.getElementById('itemBox');
    const itemIcon = document.getElementById('itemIcon');
    const itemTag = document.getElementById('itemTag');
    const rightLabel = document.getElementById('rightLabel');
    const statusFooter = document.getElementById('statusFooter');
    const spill = document.getElementById('spill');

    if (mode === 'safe') {
      btnSafe.className = 'mode-btn safe-active';
      btnRisk.className = 'mode-btn';

      itemBox.style.left = '78%';
      itemIcon.style.transform = 'rotate(0deg)';
      itemTag.textContent = 'Far Away';
      itemTag.style.color = '#15803d';

      rightLabel.className = 'zone-label label-right badge-safe';
      rightLabel.textContent = 'Safe Distance';

      statusFooter.className = 'status-footer status-safe';
      statusFooter.innerHTML = '<span>✓ Protected from Spills</span>';

      spill.classList.remove('show-spill');
    } else {
      btnSafe.className = 'mode-btn';
      btnRisk.className = 'mode-btn risk-active';

      itemBox.style.left = '46%';
      itemIcon.style.transform = 'rotate(-25deg)';
      itemTag.textContent = 'Too Close';
      itemTag.style.color = '#b91c1c';

      rightLabel.className = 'zone-label label-right badge-risk';
      rightLabel.textContent = 'Danger Zone';

      statusFooter.className = 'status-footer status-risk';
      statusFooter.innerHTML = '<span>⚠️ Liquid Hazard Near Keyboard</span>';

      spill.classList.add('show-spill');
    }
  }
</script>

</body>
</html>

What about the websites and games we visit online?

Only open the apps and websites that your teacher asks you to use for class.

If a weird pop-up window or an unknown message appears on your screen, don't click it — **tell a teacher** right away.

<!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>Pop-Up Safety Rule</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, sans-serif;
    color: #1e2945;
    background: transparent;
    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;
    align-items: center;
    gap: 12px;
  }
  .screen-stage {
    position: relative;
    width: 100%;
    height: 240px;
    background: #f8fafc;
    border-radius: 16px;
    border: 2px solid #e2e8f0;
    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;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    padding: 16px;
  }
  .step-view.active {
    opacity: 1;
    pointer-events: auto;
  }
  
  /* Step 1: Pop-up */
  .device-mockup {
    width: 220px;
    height: 140px;
    background: #ffffff;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .popup-box {
    width: 160px;
    background: #fef2f2;
    border: 2px solid #ef4444;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(239,68,68,0.15);
  }
  .popup-title {
    font-size: 13px;
    font-weight: 700;
    color: #b91c1c;
    margin-bottom: 6px;
  }
  .fake-btn {
    display: inline-block;
    background: #ef4444;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
  }

  /* Step 2: Don't click */
  .action-circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 54px;
    position: relative;
  }
  .danger-bg {
    background: #fee2e2;
    border: 3px solid #ef4444;
  }
  .safe-bg {
    background: #dcfce7;
    border: 3px solid #22c55e;
  }
  .step-label {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .danger-text { color: #dc2626; }
  .safe-text { color: #16a34a; }

  /* Step 3: Tell Teacher */
  .duo-scene {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .avatar-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 40px;
  }
  .arrow-flow {
    font-size: 24px;
    color: #16a34a;
    font-weight: bold;
  }

  /* Controls */
  .nav-row {
    display: flex;
    gap: 8px;
    width: 100%;
    justify-content: center;
  }
  .step-btn {
    flex: 1;
    max-width: 110px;
    padding: 8px 6px;
    font-size: 13px;
    font-weight: 600;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
  }
  .step-btn.active {
    border-color: #22b7ff;
    background: #f0f9ff;
    color: #0284c7;
  }
  .play-toggle {
    background: #f1f5f9;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #475569;
  }
</style>
</head>
<body>

<div class="app-container">
  <div class="screen-stage">
    
    <div class="step-view active" id="view-0">
      <div class="device-mockup">
        <div class="popup-box">
          <div class="popup-title">⚠️ Unknown Pop-Up</div>
          <span class="fake-btn">Click Here!</span>
        </div>
      </div>
      <div class="step-label" style="color: #64748b;">1. Strange Pop-Up</div>
    </div>

    
    <div class="step-view" id="view-1">
      <div class="action-circle danger-bg">
        🚫
      </div>
      <div class="step-label danger-text">2. DO NOT CLICK</div>
    </div>

    
    <div class="step-view" id="view-2">
      <div class="duo-scene">
        <div class="avatar-card">
          <span>🙋</span>
        </div>
        <div class="arrow-flow">➔</div>
        <div class="avatar-card">
          <span>👩‍🏫</span>
        </div>
      </div>
      <div class="step-label safe-text">3. Tell Teacher ✓</div>
    </div>
  </div>

  
  <div class="nav-row">
    <button class="step-btn active" onclick="setStep(0)">1. Pop-Up</button>
    <button class="step-btn" onclick="setStep(1)">2. Don't Click</button>
    <button class="step-btn" onclick="setStep(2)">3. Tell Teacher</button>
    <button class="play-toggle" id="playBtn" onclick="togglePlay()">⏸</button>
  </div>
</div>

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

  function showStep(idx) {
    currentStep = idx;
    document.querySelectorAll('.step-view').forEach((el, i) => {
      el.classList.toggle('active', i === idx);
    });
    document.querySelectorAll('.step-btn').forEach((btn, i) => {
      btn.classList.toggle('active', i === idx);
    });
  }

  function setStep(idx) {
    showStep(idx);
    resetTimer();
  }

  function nextStep() {
    showStep((currentStep + 1) % 3);
  }

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

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

  resetTimer();
</script>

</body>
</html>

What should you do if someone else forgot to log out of their tablet?

Always sign into your own profile and keep your **password secret** from everyone except your parents and teachers.

Some kids think it is fun to draw or play inside a friend's open account, but this can erase their hard work. Always log them out and switch to yours.

<!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>Acceptable Use: Account Switch</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f8f9fa;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 12px;
  }

  .nav-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    width: 100%;
    max-width: 380px;
  }

  .tab-btn {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid transparent;
    background: #ffffff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: #6b7280;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
    text-align: center;
  }

  .tab-btn.active.correct {
    background: #eef9ff;
    border-color: #22b7ff;
    color: #0284c7;
    box-shadow: 0 2px 6px rgba(34, 183, 255, 0.2);
  }

  .tab-btn.active.wrong {
    background: #fff1f2;
    border-color: #f43f5e;
    color: #e11d48;
    box-shadow: 0 2px 6px rgba(244, 63, 94, 0.2);
  }

  /* Laptop Frame */
  .device {
    width: 100%;
    max-width: 380px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .screen {
    width: 100%;
    height: 180px;
    background: #f1f5f9;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .screen-bar {
    height: 28px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 600;
  }

  .screen-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 8px;
  }

  .file-canvas {
    width: 85%;
    height: 75%;
    background: #ffffff;
    border-radius: 6px;
    border: 1px dashed #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }

  /* Status Indicator Overlay */
  .status-badge {
    position: absolute;
    bottom: 8px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
  }

  .badge-danger {
    background: #ffe4e6;
    color: #be123c;
    border: 1px solid #fecdd3;
  }

  .badge-success {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
  }

  /* Controls */
  .step-controls {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    width: 100%;
  }

  .action-btn {
    flex: 1;
    padding: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background 0.2s ease;
  }

  .action-btn:hover {
    background: #e2e8f0;
  }

  .action-btn.active-step {
    background: #22b7ff;
    color: #ffffff;
    border-color: #22b7ff;
  }
</style>
</head>
<body>

<div class="nav-tabs">
  <button class="tab-btn active correct" id="btnRight" onclick="setMode('right')">✓ Log Out</button>
  <button class="tab-btn wrong" id="btnWrong" onclick="setMode('wrong')">✕ Draw on it</button>
</div>

<div class="device">
  <div class="screen">
    <div class="screen-bar">
      <span id="userBadge">👤 Friend</span>
      <span id="lockStatus">🔓 Open</span>
    </div>
    <div class="screen-content">
      <div class="file-canvas" id="canvasDisplay">🎨 📚</div>
      <div class="status-badge badge-success" id="statusBadge">✓ Safe</div>
    </div>
  </div>

  <div class="step-controls" id="stepControls">
    <button class="action-btn active-step" id="step1" onclick="goToStep(1)">1. 🚪 Log Out</button>
    <button class="action-btn" id="step2" onclick="goToStep(2)">2. 👤 Log In</button>
  </div>
</div>

<script>
  let mode = 'right';
  let step = 1;

  const userBadge = document.getElementById('userBadge');
  const lockStatus = document.getElementById('lockStatus');
  const canvasDisplay = document.getElementById('canvasDisplay');
  const statusBadge = document.getElementById('statusBadge');
  const btnRight = document.getElementById('btnRight');
  const btnWrong = document.getElementById('btnWrong');
  const stepControls = document.getElementById('stepControls');
  const step1 = document.getElementById('step1');
  const step2 = document.getElementById('step2');

  function setMode(newMode) {
    mode = newMode;
    if (mode === 'right') {
      btnRight.classList.add('active');
      btnWrong.classList.remove('active');
      stepControls.style.display = 'flex';
      goToStep(1);
    } else {
      btnWrong.classList.add('active');
      btnRight.classList.remove('active');
      stepControls.style.display = 'none';
      showWrongState();
    }
  }

  function goToStep(s) {
    step = s;
    step1.classList.toggle('active-step', step === 1);
    step2.classList.toggle('active-step', step === 2);

    if (step === 1) {
      userBadge.textContent = '👤 Friend';
      lockStatus.textContent = '🚪 Logged Out';
      canvasDisplay.textContent = '🔒';
      statusBadge.className = 'status-badge badge-success';
      statusBadge.textContent = '✓ Work Protected';
    } else {
      userBadge.textContent = '👤 My Account';
      lockStatus.textContent = '✨ Ready';
      canvasDisplay.textContent = '🎨 🚀';
      statusBadge.className = 'status-badge badge-success';
      statusBadge.textContent = '✓ Safe & Ready';
    }
  }

  function showWrongState() {
    userBadge.textContent = '👤 Friend';
    lockStatus.textContent = '⚠️ Overwriting';
    canvasDisplay.textContent = '❌ 💥';
    statusBadge.className = 'status-badge badge-danger';
    statusBadge.textContent = '✕ Work Lost';
  }
</script>

</body>
</html>

Next time you open a school laptop, look around your desk and check: is your space clean, safe, and ready to go?

technology

Understanding Our Acceptable Use Policy. Explain what an acceptable use policy is and demonstrate following school rules for using digital devices and resources.

Device Advice & Classroom Tech Rules (Grades K–2)

Internet Safety & Digital Etiquette for Early Learners

Arthur's Digital Citizenship: Taking Care of Technology and Staying Safe

When teaching TEKS 126.3(b)(8)(A) to second graders, anchor the concept of the 'Acceptable Use Policy' by comparing it to familiar shared community agreements (like playground safety rules or library book care). Use concrete physical demonstrations (e.g., the 'two-hand hug' carry, clean hands check, cord plugging) and routine-based role-playing scenarios where students physically hold up Green/Red paddle cards to judge whether a behavior meets acceptable use guidelines. Conclude the unit by having the class co-sign an illustrated '2nd Grade Digital Citizen Promise' poster to hang in the classroom device station.

Understanding Our Acceptable Use Policy

The Digital Promise

Rule 1: Caring for Devices

Rule 2: Safe Spaces Online