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 having a magical helper that can paint pictures, play songs, and solve puzzles with you!

A computer does all of that by using different parts that work together like a team.

<!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>Computer Parts Team</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: space-between;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }
    .scene {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 250px;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    /* Desk surface */
    .desk-line {
      position: absolute;
      bottom: 22px;
      left: 10%;
      width: 80%;
      height: 4px;
      background: #e2e8f0;
      border-radius: 2px;
      z-index: 1;
    }

    /* Connection wires (SVG) */
    .wires-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      pointer-events: none;
    }

    .wire-path {
      stroke: #cbd5e1;
      stroke-width: 2.5;
      fill: none;
      stroke-dasharray: 4 3;
      transition: stroke 0.3s ease, stroke-width 0.3s ease;
    }

    .wire-path.active {
      stroke: #22b7ff;
      stroke-width: 3.5;
    }

    /* Computer parts container */
    .part {
      position: absolute;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      transition: transform 0.25s ease;
    }

    .part-box {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
    }

    .part.active .part-box {
      border-color: #22b7ff;
      box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.25);
      background: #f0f9ff;
    }

    .part-label {
      margin-top: 4px;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      transition: color 0.25s ease;
      white-space: nowrap;
    }

    .part.active .part-label {
      color: #0284c7;
    }

    /* Specific Part Layouts */
    /* 1. Monitor */
    .part-monitor {
      top: 24px;
      left: 50%;
      transform: translateX(-50%);
    }
    .part-monitor .part-box {
      width: 120px;
      height: 86px;
      font-size: 40px;
    }

    /* 2. System Unit (Tower) */
    .part-tower {
      top: 30px;
      right: 18px;
    }
    .part-tower .part-box {
      width: 58px;
      height: 100px;
      font-size: 32px;
      flex-direction: column;
      gap: 6px;
    }
    .tower-slot {
      width: 32px;
      height: 4px;
      background: #cbd5e1;
      border-radius: 2px;
    }
    .tower-btn {
      width: 10px;
      height: 10px;
      background: #38bdf8;
      border-radius: 50%;
      box-shadow: 0 0 4px #38bdf8;
    }

    /* 3. Keyboard */
    .part-keyboard {
      bottom: 28px;
      left: 45px;
    }
    .part-keyboard .part-box {
      width: 130px;
      height: 44px;
      font-size: 26px;
    }

    /* 4. Mouse */
    .part-mouse {
      bottom: 28px;
      left: 200px;
    }
    .part-mouse .part-box {
      width: 44px;
      height: 44px;
      font-size: 22px;
    }

    /* Navigation / Tabs */
    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      margin-top: 10px;
      width: 100%;
      max-width: 440px;
    }

    .tab-btn {
      flex: 1 1 calc(25% - 6px);
      min-width: 76px;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    }

    .tab-btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
    }
  </style>
</head>
<body>

  <div class="scene" id="scene">
    
    <div class="desk-line"></div>

    
    <svg class="wires-svg" viewBox="0 0 440 250">
      
      <path id="wire-0" class="wire-path active" d="M 380 90 C 330 90, 300 70, 280 70" />
      
      <path id="wire-2" class="wire-path" d="M 380 120 C 350 160, 200 190, 175 190" />
      
      <path id="wire-3" class="wire-path" d="M 380 120 C 340 180, 260 190, 244 190" />
    </svg>

    
    <div class="part part-monitor active" id="part-0" onclick="selectPart(0)">
      <div class="part-box">🖥️</div>
      <span class="part-label">Monitor</span>
    </div>

    
    <div class="part part-tower" id="part-1" onclick="selectPart(1)">
      <div class="part-box">
        <div class="tower-btn"></div>
        <div class="tower-slot"></div>
        <div class="tower-slot"></div>
      </div>
      <span class="part-label">Computer</span>
    </div>

    
    <div class="part part-keyboard" id="part-2" onclick="selectPart(2)">
      <div class="part-box">⌨️</div>
      <span class="part-label">Keyboard</span>
    </div>

    
    <div class="part part-mouse" id="part-3" onclick="selectPart(3)">
      <div class="part-box">🖱️</div>
      <span class="part-label">Mouse</span>
    </div>
  </div>

  
  <div class="controls">
    <button class="tab-btn active" id="btn-0" onclick="selectPart(0)">Monitor</button>
    <button class="tab-btn" id="btn-1" onclick="selectPart(1)">Computer</button>
    <button class="tab-btn" id="btn-2" onclick="selectPart(2)">Keyboard</button>
    <button class="tab-btn" id="btn-3" onclick="selectPart(3)">Mouse</button>
  </div>

  <script>
    let activeIdx = 0;
    let autoTimer = null;

    function selectPart(idx) {
      activeIdx = idx;
      
      // Update parts
      for (let i = 0; i < 4; i++) {
        const p = document.getElementById('part-' + i);
        const b = document.getElementById('btn-' + i);
        if (p) p.classList.toggle('active', i === idx);
        if (b) b.classList.toggle('active', i === idx);
      }

      // Update wires
      const wires = [
        document.getElementById('wire-0'),
        null, // Tower is hub
        document.getElementById('wire-2'),
        document.getElementById('wire-3')
      ];

      wires.forEach((wire, i) => {
        if (wire) {
          if (idx === 1) {
            // Tower highlights all
            wire.classList.add('active');
          } else {
            wire.classList.toggle('active', i === idx);
          }
        }
      });

      resetAutoPlay();
    }

    function resetAutoPlay() {
      clearInterval(autoTimer);
      autoTimer = setInterval(() => {
        selectPart((activeIdx + 1) % 4);
      }, 3500);
    }

    // Start pedagogical auto-cycle
    resetAutoPlay();
  </script>
</body>
</html>

Which part helps us see all the fun pictures and videos?

The **screen** is the bright glass window that lights up to show pictures, words, and games.

It works like a television, using millions of tiny colored dots of light to make every picture you see.

<!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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100vh;
      padding: 16px;
      color: #1e2945;
      user-select: none;
    }

    /* Controls */
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 380px;
      justify-content: center;
      z-index: 10;
    }
    .btn-step {
      flex: 1;
      padding: 8px 12px;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      background: #ffffff;
      color: #64748b;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.25s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .btn-step.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
    }

    /* Viewport Area */
    .stage {
      position: relative;
      width: 100%;
      max-width: 380px;
      height: 320px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .view-card {
      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, transform 0.35s ease;
      transform: scale(0.96);
    }
    .view-card.active {
      opacity: 1;
      pointer-events: auto;
      transform: scale(1);
    }

    /* Step 1: Monitor */
    .monitor-bezel {
      width: 240px;
      height: 170px;
      background: #1e2945;
      border-radius: 12px;
      padding: 10px;
      box-shadow: 0 10px 25px rgba(30,41,69,0.15);
      position: relative;
    }
    .monitor-screen {
      width: 100%;
      height: 100%;
      background: #0f172a;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .monitor-stand {
      width: 48px;
      height: 28px;
      background: #cbd5e1;
      margin: 0 auto;
    }
    .monitor-base {
      width: 110px;
      height: 10px;
      background: #94a3b8;
      border-radius: 6px;
      margin: 0 auto;
    }
    .screen-img {
      font-size: 72px;
      filter: drop-shadow(0 0 12px rgba(255, 200, 0, 0.6));
    }
    .target-ring {
      position: absolute;
      width: 40px;
      height: 40px;
      border: 2px dashed #22b7ff;
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: pulse 2s infinite ease-in-out;
    }
    @keyframes pulse {
      0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
      50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.3; }
    }

    /* Step 2: Pixel Grid */
    .pixel-grid {
      display: grid;
      grid-template-columns: repeat(7, 28px);
      grid-template-rows: repeat(7, 28px);
      gap: 3px;
      background: #1e2945;
      padding: 10px;
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    }
    .px {
      border-radius: 4px;
      background: #334155;
    }
    .px.y { background: #fbbf24; }
    .px.e { background: #0f172a; }
    .px.m { background: #f87171; }
    .zoom-target {
      outline: 2px solid #22b7ff;
      outline-offset: 2px;
      position: relative;
    }

    /* Step 3: RGB Subpixels */
    .dot-matrix {
      display: flex;
      gap: 12px;
      background: #090d16;
      padding: 24px 28px;
      border-radius: 20px;
      box-shadow: 0 12px 30px rgba(0,0,0,0.25);
    }
    .subpixel-unit {
      display: flex;
      gap: 4px;
      background: #151d2f;
      padding: 8px;
      border-radius: 10px;
      border: 1px solid #334155;
    }
    .subpixel {
      width: 18px;
      height: 70px;
      border-radius: 4px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 6px;
      font-size: 11px;
      font-weight: 800;
      color: rgba(255,255,255,0.9);
    }
    .sub-r {
      background: linear-gradient(to bottom, #ef4444, #dc2626);
      box-shadow: 0 0 14px rgba(239, 68, 68, 0.7);
    }
    .sub-g {
      background: linear-gradient(to bottom, #22c55e, #16a34a);
      box-shadow: 0 0 14px rgba(34, 197, 94, 0.7);
    }
    .sub-b {
      background: linear-gradient(to bottom, #3b82f6, #2563eb);
      box-shadow: 0 0 14px rgba(59, 130, 246, 0.7);
    }

    .badge-label {
      margin-top: 14px;
      font-size: 14px;
      font-weight: 700;
      color: #475569;
      background: #e2e8f0;
      padding: 4px 12px;
      border-radius: 12px;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn-step active" onclick="setStep(0)">1. Screen</button>
    <button class="btn-step" onclick="setStep(1)">2. Pixels</button>
    <button class="btn-step" onclick="setStep(2)">3. Light Dots</button>
  </div>

  
  <div class="stage">
    
    <div class="view-card active" id="view-0">
      <div class="monitor-bezel">
        <div class="monitor-screen">
          <div class="screen-img">⭐️</div>
          <div class="target-ring"></div>
        </div>
      </div>
      <div class="monitor-stand"></div>
      <div class="monitor-base"></div>
      <div class="badge-label">Monitor Screen</div>
    </div>

    
    <div class="view-card" id="view-1">
      <div class="pixel-grid">
        <div class="px"></div><div class="px"></div><div class="px y"></div><div class="px y"></div><div class="px y"></div><div class="px"></div><div class="px"></div>
        <div class="px"></div><div class="px y"></div><div class="px y"></div><div class="px y"></div><div class="px y"></div><div class="px y"></div><div class="px"></div>
        <div class="px y"></div><div class="px e"></div><div class="px y"></div><div class="px y"></div><div class="px y"></div><div class="px e"></div><div class="px y"></div>
        <div class="px y"></div><div class="px y"></div><div class="px y"></div><div class="px y zoom-target"></div><div class="px y"></div><div class="px y"></div><div class="px y"></div>
        <div class="px y"></div><div class="px y"></div><div class="px m"></div><div class="px m"></div><div class="px m"></div><div class="px y"></div><div class="px y"></div>
        <div class="px"></div><div class="px y"></div><div class="px y"></div><div class="px y"></div><div class="px y"></div><div class="px y"></div><div class="px"></div>
        <div class="px"></div><div class="px"></div><div class="px y"></div><div class="px y"></div><div class="px y"></div><div class="px"></div><div class="px"></div>
      </div>
      <div class="badge-label">Pixel Grid</div>
    </div>

    
    <div class="view-card" id="view-2">
      <div class="dot-matrix">
        <div class="subpixel-unit">
          <div class="subpixel sub-r">R</div>
          <div class="subpixel sub-g">G</div>
          <div class="subpixel sub-b">B</div>
        </div>
        <div class="subpixel-unit">
          <div class="subpixel sub-r">R</div>
          <div class="subpixel sub-g">G</div>
          <div class="subpixel sub-b">B</div>
        </div>
      </div>
      <div class="badge-label">Red, Green, Blue Dots</div>
    </div>
  </div>

  <script>
    let current = 0;
    let timer = null;

    function setStep(idx) {
      current = idx;
      document.querySelectorAll('.btn-step').forEach((b, i) => {
        b.classList.toggle('active', i === idx);
      });
      document.querySelectorAll('.view-card').forEach((v, i) => {
        v.classList.toggle('active', i === idx);
      });
      resetTimer();
    }

    function autoAdvance() {
      current = (current + 1) % 3;
      setStep(current);
    }

    function resetTimer() {
      clearInterval(timer);
      timer = setInterval(autoAdvance, 3600);
    }

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

Once you see something on the screen, how do you point to it?

A **mouse** is a small palm-sized tool that you slide across your desk.

Moving the mouse moves an arrow on the screen, and pressing the button makes a *click* to pick things.

<!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>Mouse and Screen</title>
  <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: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
      -webkit-user-select: none;
    }

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

    /* Screen / Monitor */
    .monitor-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }

    .screen-label {
      font-size: 14px;
      font-weight: 700;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 4px;
    }

    .monitor-frame {
      width: 100%;
      height: 170px;
      background: #ffffff;
      border: 3px solid #cbd5e1;
      border-radius: 14px;
      padding: 8px;
      position: relative;
      overflow: hidden;
    }

    .screen-glass {
      width: 100%;
      height: 100%;
      background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
      border-radius: 8px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 0 16px;
    }

    .stand-neck {
      width: 24px;
      height: 12px;
      background: #94a3b8;
    }

    .stand-base {
      width: 70px;
      height: 6px;
      background: #64748b;
      border-radius: 3px;
    }

    /* Target Items on Screen */
    .target-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      font-size: 28px;
      cursor: pointer;
      position: relative;
      transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
    }

    .target-item.selected {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.25);
    }

    /* Arrow Pointer */
    .cursor-arrow {
      position: absolute;
      width: 28px;
      height: 28px;
      top: 50%;
      left: 50%;
      transform: translate(-4px, -4px);
      pointer-events: none;
      transition: top 0.4s cubic-bezier(0.25, 1, 0.5, 1), left 0.4s cubic-bezier(0.25, 1, 0.5, 1);
      z-index: 10;
    }

    .click-burst {
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      background: #22b7ff;
      color: #ffffff;
      font-size: 13px;
      font-weight: 800;
      padding: 2px 10px;
      border-radius: 12px;
      opacity: 0;
      transition: opacity 0.2s, transform 0.2s;
      pointer-events: none;
    }

    .click-burst.show {
      opacity: 1;
      transform: translateX(-50%) translateY(-2px);
    }

    /* Mouse Unit */
    .mouse-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .mouse-device {
      width: 60px;
      height: 90px;
      background: #ffffff;
      border: 3px solid #94a3b8;
      border-radius: 30px 30px 24px 24px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }

    .mouse-split {
      position: absolute;
      top: 0;
      left: 50%;
      width: 2px;
      height: 38px;
      background: #cbd5e1;
      transform: translateX(-50%);
    }

    .mouse-btn-left {
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 38px;
      border-top-left-radius: 26px;
      transition: background 0.15s;
    }

    .mouse-btn-left.clicking {
      background: #22b7ff;
    }

    .mouse-wheel {
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 6px;
      height: 14px;
      background: #cbd5e1;
      border-radius: 3px;
      z-index: 2;
    }

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

    .item-label {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      margin-top: 2px;
    }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div class="monitor-wrap">
      <div class="screen-label">Screen</div>
      <div class="monitor-frame">
        <div class="screen-glass" id="screenGlass">
          <div class="click-burst" id="clickBurst">Click!</div>
          
          <button class="target-item selected" id="item0" onclick="pickItem(0)">
            <span>⭐️</span>
            <span class="item-label">Star</span>
          </button>

          <button class="target-item" id="item1" onclick="pickItem(1)">
            <span>🎈</span>
            <span class="item-label">Balloon</span>
          </button>

          <button class="target-item" id="item2" onclick="pickItem(2)">
            <span>🎁</span>
            <span class="item-label">Gift</span>
          </button>

          
          <svg class="cursor-arrow" id="cursor" viewBox="0 0 24 24" fill="none">
            <path d="M4 2L20 10L12 13L9 21L4 2Z" fill="#1e2945" stroke="#ffffff" stroke-width="2" stroke-linejoin="round"/>
          </svg>
        </div>
      </div>
      <div class="stand-neck"></div>
      <div class="stand-base"></div>
    </div>

    
    <div class="mouse-section">
      <div class="mouse-device" id="mouseDevice">
        <div class="mouse-btn-left" id="mouseLeft"></div>
        <div class="mouse-split"></div>
        <div class="mouse-wheel"></div>
      </div>
      <div class="mouse-label">Mouse</div>
    </div>
  </div>

  <script>
    const items = [
      document.getElementById('item0'),
      document.getElementById('item1'),
      document.getElementById('item2')
    ];
    const cursor = document.getElementById('cursor');
    const mouseLeft = document.getElementById('mouseLeft');
    const clickBurst = document.getElementById('clickBurst');
    const screenGlass = document.getElementById('screenGlass');

    let currentIndex = 0;
    let autoTimer = null;

    function updateCursorPosition(index) {
      const target = items[index];
      const glassRect = screenGlass.getBoundingClientRect();
      const targetRect = target.getBoundingClientRect();

      const targetX = targetRect.left - glassRect.left + (targetRect.width / 2) - 6;
      const targetY = targetRect.top - glassRect.top + (targetRect.height / 2) - 6;

      cursor.style.left = targetX + 'px';
      cursor.style.top = targetY + 'px';
    }

    function pickItem(index) {
      currentIndex = index;

      items.forEach((item, i) => {
        item.classList.toggle('selected', i === index);
      });

      updateCursorPosition(index);

      // Mouse click feedback
      mouseLeft.classList.add('clicking');
      clickBurst.classList.add('show');

      setTimeout(() => {
        mouseLeft.classList.remove('clicking');
        clickBurst.classList.remove('show');
      }, 400);

      resetAutoPlay();
    }

    function nextStep() {
      const nextIndex = (currentIndex + 1) % items.length;
      pickItem(nextIndex);
    }

    function resetAutoPlay() {
      clearInterval(autoTimer);
      autoTimer = setInterval(nextStep, 3200);
    }

    // Initial positioning after layout
    window.addEventListener('load', () => {
      updateCursorPosition(0);
      resetAutoPlay();
    });

    window.addEventListener('resize', () => {
      updateCursorPosition(currentIndex);
    });
  </script>
</body>
</html>

What if you want to write your name or count numbers on the screen?

A **keyboard** is a flat board covered in buttons called keys.

Every key has a letter, number, or symbol printed on it that pops up on the screen when you press 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;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px 12px;
      user-select: none;
      -webkit-user-select: none;
    }

    /* Device Tabs */
    .tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      max-width: 480px;
      margin-bottom: 8px;
    }
    .tab-btn {
      background: #ffffff;
      border: 2px solid transparent;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .tab-btn.active {
      border-color: #22b7ff;
      background: #e8f7ff;
      color: #0088cc;
      box-shadow: 0 0 0 1px #22b7ff;
    }

    /* Computer Scene Workspace */
    .workspace {
      position: relative;
      width: 100%;
      max-width: 420px;
      height: 280px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
    }

    /* Monitor */
    .monitor-wrap {
      position: absolute;
      top: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      transition: filter 0.2s ease;
    }
    .screen-bezel {
      width: 210px;
      height: 135px;
      background: #2c3444;
      border-radius: 10px;
      padding: 8px;
      box-shadow: 0 6px 16px rgba(0,0,0,0.12);
      border: 3px solid transparent;
      transition: border-color 0.2s ease;
    }
    .monitor-wrap.highlight .screen-bezel {
      border-color: #22b7ff;
    }
    .screen-display {
      width: 100%;
      height: 100%;
      background: #ffffff;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .screen-text {
      font-size: 26px;
      font-weight: 700;
      color: #1e2945;
      letter-spacing: 2px;
      min-height: 32px;
    }
    .cursor-pointer {
      position: absolute;
      font-size: 20px;
      transition: transform 0.4s ease, opacity 0.3s ease;
      transform: translate(30px, 15px);
      pointer-events: none;
    }
    .sound-waves {
      position: absolute;
      font-size: 24px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .stand-neck {
      width: 24px;
      height: 20px;
      background: #94a3b8;
    }
    .stand-base {
      width: 80px;
      height: 8px;
      background: #64748b;
      border-radius: 4px;
    }

    /* Desk Surface Items */
    .desk-items {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 16px;
      width: 100%;
      padding-bottom: 8px;
      z-index: 2;
    }

    /* Headphones */
    .item-headphones {
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 6px;
      border-radius: 10px;
      border: 2px solid transparent;
      background: #ffffff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      transition: border-color 0.2s ease, background 0.2s ease;
    }
    .item-headphones.highlight {
      border-color: #22b7ff;
      background: #e8f7ff;
    }
    .item-headphones .icon {
      font-size: 34px;
      line-height: 1;
    }

    /* Keyboard */
    .keyboard {
      background: #ffffff;
      border-radius: 8px;
      padding: 6px 8px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.08);
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 4px;
      width: 170px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: border-color 0.2s ease, background 0.2s ease;
    }
    .keyboard.highlight {
      border-color: #22b7ff;
      background: #e8f7ff;
    }
    .key {
      background: #f1f5f9;
      border-radius: 4px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: #475569;
      border-bottom: 2px solid #cbd5e1;
      transition: transform 0.1s ease, background 0.1s ease;
    }
    .key.space {
      grid-column: span 3;
    }
    .key.pressed {
      transform: translateY(2px);
      background: #22b7ff;
      color: #ffffff;
      border-bottom-color: #0284c7;
    }

    /* Mouse */
    .mouse {
      width: 42px;
      height: 64px;
      background: #ffffff;
      border-radius: 20px;
      box-shadow: 0 3px 8px rgba(0,0,0,0.08);
      position: relative;
      cursor: pointer;
      border: 2px solid transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 6px;
      transition: border-color 0.2s ease, background 0.2s ease;
    }
    .mouse.highlight {
      border-color: #22b7ff;
      background: #e8f7ff;
    }
    .mouse-line {
      width: 1px;
      height: 16px;
      background: #cbd5e1;
    }
    .mouse-wheel {
      width: 6px;
      height: 10px;
      background: #94a3b8;
      border-radius: 3px;
      margin-top: -12px;
      transition: background 0.2s ease;
    }
    .mouse.clicked .mouse-wheel {
      background: #22b7ff;
    }

    /* Desk Line */
    .desk-bar {
      width: 95%;
      height: 6px;
      background: #cbd5e1;
      border-radius: 3px;
      margin-top: -3px;
    }

    /* Part Action Tag */
    .action-badge {
      min-height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 600;
      color: #0284c7;
      background: #e0f2fe;
      padding: 4px 16px;
      border-radius: 20px;
      margin-top: 4px;
    }
  </style>
</head>
<body>

  
  <div class="tabs">
    <button class="tab-btn active" id="tab-screen">🖥️ Screen</button>
    <button class="tab-btn" id="tab-keyboard">⌨️ Keyboard</button>
    <button class="tab-btn" id="tab-mouse">🖱️ Mouse</button>
    <button class="tab-btn" id="tab-headphones">🎧 Headphones</button>
  </div>

  
  <div class="workspace">
    
    <div class="monitor-wrap highlight" id="dev-screen">
      <div class="screen-bezel">
        <div class="screen-display">
          <div class="screen-text" id="screen-output">A B C</div>
          <div class="cursor-pointer" id="screen-cursor">👆</div>
          <div class="sound-waves" id="screen-audio">🎵 🎶</div>
        </div>
      </div>
      <div class="stand-neck"></div>
      <div class="stand-base"></div>
    </div>

    
    <div class="desk-items">
      
      <div class="item-headphones" id="dev-headphones" title="Headphones">
        <div class="icon">🎧</div>
      </div>

      
      <div class="keyboard" id="dev-keyboard" title="Keyboard">
        <div class="key" id="k-a">A</div>
        <div class="key" id="k-b">B</div>
        <div class="key" id="k-c">C</div>
        <div class="key">1</div>
        <div class="key">2</div>
        <div class="key space" id="k-sp">Space</div>
        <div class="key">↵</div>
        <div class="key">★</div>
      </div>

      
      <div class="mouse" id="dev-mouse" title="Mouse">
        <div class="mouse-line"></div>
        <div class="mouse-wheel"></div>
      </div>
    </div>
    <div class="desk-bar"></div>
  </div>

  
  <div class="action-badge" id="badge-text">Screen: Shows pictures & words</div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const screenWrap = $('#dev-screen');
    const keyboardWrap = $('#dev-keyboard');
    const mouseWrap = $('#dev-mouse');
    const headphonesWrap = $('#dev-headphones');

    const screenOutput = $('#screen-output');
    const screenCursor = $('#screen-cursor');
    const screenAudio = $('#screen-audio');
    const badgeText = $('#badge-text');

    const tabs = {
      screen: $('#tab-screen'),
      keyboard: $('#tab-keyboard'),
      mouse: $('#tab-mouse'),
      headphones: $('#tab-headphones')
    };

    let timer = null;

    function resetHighlights() {
      screenWrap.classList.remove('highlight');
      keyboardWrap.classList.remove('highlight');
      mouseWrap.classList.remove('highlight');
      headphonesWrap.classList.remove('highlight');
      Object.values(tabs).forEach(t => t.classList.remove('active'));
      if (timer) clearInterval(timer);
    }

    function showScreen() {
      resetHighlights();
      tabs.screen.classList.add('active');
      screenWrap.classList.add('highlight');
      badgeText.textContent = 'Screen: Shows pictures & words';
      screenCursor.style.opacity = '0';
      screenAudio.style.opacity = '0';
      screenOutput.style.opacity = '1';
      screenOutput.textContent = 'HELLO ★';
    }

    function showKeyboard() {
      resetHighlights();
      tabs.keyboard.classList.add('active');
      keyboardWrap.classList.add('highlight');
      badgeText.textContent = 'Keyboard: Types letters & numbers';
      screenCursor.style.opacity = '0';
      screenAudio.style.opacity = '0';
      screenOutput.style.opacity = '1';

      const letters = ['A', 'B', 'C', '!'];
      let idx = 0;
      screenOutput.textContent = '';
      
      const keys = [$('#k-a'), $('#k-b'), $('#k-c')];

      timer = setInterval(() => {
        if (idx < letters.length) {
          screenOutput.textContent += letters[idx];
          if (keys[idx]) {
            keys[idx].classList.add('pressed');
            setTimeout(() => keys[idx] && keys[idx].classList.remove('pressed'), 250);
          }
          idx++;
        } else {
          idx = 0;
          screenOutput.textContent = '';
        }
      }, 700);
    }

    function showMouse() {
      resetHighlights();
      tabs.mouse.classList.add('active');
      mouseWrap.classList.add('highlight');
      badgeText.textContent = 'Mouse: Points & clicks';
      screenAudio.style.opacity = '0';
      screenOutput.textContent = '🎯 CLICK';
      screenCursor.style.opacity = '1';

      let right = true;
      timer = setInterval(() => {
        right = !right;
        screenCursor.style.transform = right ? 'translate(30px, 15px)' : 'translate(-35px, -10px)';
        mouseWrap.classList.add('clicked');
        setTimeout(() => mouseWrap.classList.remove('clicked'), 200);
      }, 800);
    }

    function showHeadphones() {
      resetHighlights();
      tabs.headphones.classList.add('active');
      headphonesWrap.classList.add('highlight');
      badgeText.textContent = 'Headphones: Listen quietly';
      screenCursor.style.opacity = '0';
      screenOutput.style.opacity = '0';
      screenAudio.style.opacity = '1';
    }

    // Attach Click Events
    onTap(tabs.screen, showScreen);
    onTap(screenWrap, showScreen);

    onTap(tabs.keyboard, showKeyboard);
    onTap(keyboardWrap, showKeyboard);

    onTap(tabs.mouse, showMouse);
    onTap(mouseWrap, showMouse);

    onTap(tabs.headphones, showHeadphones);
    onTap(headphonesWrap, showHeadphones);

    // Initial state
    showScreen();
  </script>
</body>
</html>

How can you hear a story or song without bothering anyone sitting near you?

**Headphones** sit gently over your ears with soft cushions so only you can hear the sounds and music.

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

    /* Scene / Computer Setup Container */
    .setup-area {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 220px;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }

    /* Desk surface line */
    .desk-surface {
      position: absolute;
      bottom: 24px;
      left: 16px;
      right: 16px;
      height: 4px;
      background: #e2e8f0;
      border-radius: 2px;
    }

    /* Computer Components in Scene */
    .comp-item {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 12px;
      padding: 6px;
      transition: background 0.25s ease, box-shadow 0.25s ease;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    .comp-item .icon {
      font-size: 32px;
      line-height: 1;
      transition: transform 0.2s ease;
    }

    .comp-item .pin {
      margin-top: 4px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 2px 8px;
      border-radius: 12px;
      background: #f1f5f9;
      color: #64748b;
      transition: background 0.2s, color 0.2s;
    }

    /* Active Highlight in Scene */
    .comp-item.active {
      background: rgba(34, 183, 255, 0.12);
      box-shadow: 0 0 0 2px #22b7ff;
    }

    .comp-item.active .pin {
      background: #22b7ff;
      color: #ffffff;
    }

    /* Coordinate placement inside scene */
    .pos-screen {
      top: 18px;
      left: 50%;
      transform: translateX(-50%);
    }
    .pos-screen .icon { font-size: 64px; }

    .pos-headphones {
      top: 24px;
      left: 20px;
    }
    .pos-headphones .icon { font-size: 42px; }

    .pos-keyboard {
      bottom: 30px;
      left: 50%;
      transform: translateX(-65%);
    }
    .pos-keyboard .icon { font-size: 38px; }

    .pos-mouse {
      bottom: 30px;
      right: 42px;
    }
    .pos-mouse .icon { font-size: 34px; }

    /* Part Selector Grid */
    .part-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 440px;
    }

    .part-btn {
      background: #ffffff;
      border: 2px solid transparent;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      border-radius: 12px;
      padding: 10px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      color: #1e2945;
      font-size: 13px;
      font-weight: 600;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    .part-btn .btn-icon {
      font-size: 24px;
      margin-bottom: 4px;
    }

    .part-btn.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      color: #0284c7;
      box-shadow: 0 0 0 1px #22b7ff;
    }

    @media (max-width: 360px) {
      .setup-area { height: 190px; }
      .pos-screen .icon { font-size: 52px; }
      .pos-headphones .icon { font-size: 34px; }
      .pos-keyboard .icon { font-size: 30px; }
      .pos-mouse .icon { font-size: 28px; }
      .part-btn { font-size: 11px; padding: 8px 2px; }
      .part-btn .btn-icon { font-size: 20px; }
    }
  </style>
</head>
<body>

  
  <div class="setup-area">
    <div class="desk-surface"></div>

    <div class="comp-item pos-screen active" data-part="0">
      <span class="icon">🖥️</span>
      <span class="pin">Screen</span>
    </div>

    <div class="comp-item pos-headphones" data-part="3">
      <span class="icon">🎧</span>
      <span class="pin">Headphones</span>
    </div>

    <div class="comp-item pos-keyboard" data-part="1">
      <span class="icon">⌨️</span>
      <span class="pin">Keyboard</span>
    </div>

    <div class="comp-item pos-mouse" data-part="2">
      <span class="icon">🖱️</span>
      <span class="pin">Mouse</span>
    </div>
  </div>

  
  <div class="part-grid">
    <button class="part-btn active" data-part="0">
      <span class="btn-icon">🖥️</span>
      <span>Screen</span>
    </button>
    <button class="part-btn" data-part="1">
      <span class="btn-icon">⌨️</span>
      <span>Keyboard</span>
    </button>
    <button class="part-btn" data-part="2">
      <span class="btn-icon">🖱️</span>
      <span>Mouse</span>
    </button>
    <button class="part-btn" data-part="3">
      <span class="btn-icon">🎧</span>
      <span>Headphones</span>
    </button>
  </div>

  <script>
    const compItems = document.querySelectorAll('.comp-item');
    const partBtns = document.querySelectorAll('.part-btn');
    let currentIndex = 0;
    let autoTimer = null;

    function selectPart(idx) {
      currentIndex = idx;
      compItems.forEach(item => {
        item.classList.toggle('active', parseInt(item.dataset.part) === idx);
      });
      partBtns.forEach(btn => {
        btn.classList.toggle('active', parseInt(btn.dataset.part) === idx);
      });
    }

    function resetTimer() {
      if (autoTimer) clearInterval(autoTimer);
      autoTimer = setInterval(() => {
        selectPart((currentIndex + 1) % 4);
      }, 3500);
    }

    [...compItems, ...partBtns].forEach(el => {
      el.addEventListener('click', () => {
        const idx = parseInt(el.dataset.part);
        selectPart(idx);
        resetTimer();
      });
    });

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

Next time you use a computer, see if you can spot all four teammates: the screen, the mouse, the keyboard, and your headphones!

technology

Naming Computer Parts and Devices. Learners will identify and name common parts of a computer such as the screen, keyboard, mouse, and headphones.

Computing Systems and Networks: Technology Around Us (Unit 1.1)

Dance Mat Typing & Introduction to Keyboards and Screens

Barefoot Early Years: Exploring Digital Devices and Technology

At Early Level (P1 / ages 4–5), instruction should be multimodal, kinesthetic, and play-based. Teachers should use real, non-working or tactile hardware during circle time ('show and tell') to let children feel keys, hold a mouse, and put on headphones. Combine physical exploration with songs, call-and-response naming games, and visual label-matching cards before moving onto device-based practice to ground abstract digital concepts in tangible physical experiences.

Naming Computer Parts and Devices

The Screen

The Mouse