Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Imagine you have 20 pet fish in different tanks, and every single one needs food at exactly 8:00 AM.

How could you feed them all on time if you are still fast asleep in bed?

A **problem** is a challenge or task that needs a solution to make life easier, safer, or more fun.

We face problems every day, like forgetting our homework, losing track of time, or needing to send a quick message to grandma.

<!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>Manual vs Automated</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, sans-serif;
    background: #f8f9fa;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    min-height: 100%;
  }

  .nav {
    display: flex;
    gap: 8px;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 24px;
  }

  .btn {
    border: none;
    background: transparent;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: #64748b;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  }

  .btn.active {
    background: #ffffff;
    color: #1e2945;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }

  .status-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 8px 0 4px;
    font-size: 14px;
    font-weight: 600;
  }

  .clock-badge {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 4px 10px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 440px;
    margin: auto;
  }

  .tank {
    background: #ffffff;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    height: 90px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 8px;
    transition: border-color 0.3s;
  }

  .tank.active-tank {
    border-color: #22b7ff;
  }

  .tank.fed {
    border-color: #10b981;
    background: #f0fdf4;
  }

  .feeder {
    position: absolute;
    top: 4px;
    font-size: 14px;
    opacity: 0.4;
    transition: opacity 0.3s;
  }

  .tank.fed .feeder, .tank.active-tank .feeder {
    opacity: 1;
  }

  .signal {
    position: absolute;
    top: 20px;
    font-size: 11px;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .tank.fed .signal {
    opacity: 1;
  }

  .water {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65%;
    background: #e0f2fe;
    z-index: 1;
  }

  .fish {
    font-size: 24px;
    position: relative;
    z-index: 2;
    transition: transform 0.3s;
  }

  .tank.fed .fish {
    transform: translateY(-4px);
  }

  .food-drop {
    position: absolute;
    top: 24px;
    width: 5px;
    height: 5px;
    background: #f59e0b;
    border-radius: 50%;
    opacity: 0;
    z-index: 3;
  }

  .tank.feeding .food-drop {
    opacity: 1;
    animation: drop 0.6s ease-in forwards;
  }

  @keyframes drop {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(35px); opacity: 0; }
  }

  .person {
    position: absolute;
    top: 2px;
    right: 6px;
    font-size: 16px;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.2s;
  }

  .tank.has-person .person {
    opacity: 1;
  }

  .label-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
  }
</style>
</head>
<body>

  <div class="nav">
    <button class="btn active" id="btnManual" onclick="setMode('manual')">🏃 Manual</button>
    <button class="btn" id="btnAuto" onclick="setMode('auto')">⚡ Automated</button>
  </div>

  <div class="status-bar">
    <span class="clock-badge">⏰ <span id="clockText">8:00 AM</span></span>
    <span class="label-tag" id="modeLabel">1 by 1</span>
  </div>

  <div class="grid" id="tankGrid">
    <div class="tank" id="t0"><span class="person">🏃</span><span class="feeder">🥫</span><span class="food-drop"></span><div class="water"></div><span class="fish">🐠</span></div>
    <div class="tank" id="t1"><span class="person">🏃</span><span class="feeder">🥫</span><span class="food-drop"></span><div class="water"></div><span class="fish">🐟</span></div>
    <div class="tank" id="t2"><span class="person">🏃</span><span class="feeder">🥫</span><span class="food-drop"></span><div class="water"></div><span class="fish">🐠</span></div>
    <div class="tank" id="t3"><span class="person">🏃</span><span class="feeder">🥫</span><span class="food-drop"></span><div class="water"></div><span class="fish">🐡</span></div>
    <div class="tank" id="t4"><span class="person">🏃</span><span class="feeder">🥫</span><span class="food-drop"></span><div class="water"></div><span class="fish">🐠</span></div>
    <div class="tank" id="t5"><span class="person">🏃</span><span class="feeder">🥫</span><span class="food-drop"></span><div class="water"></div><span class="fish">🐟</span></div>
  </div>

<script>
  let currentMode = 'manual';
  let timer = null;
  let step = 0;

  function resetTanks() {
    for (let i = 0; i < 6; i++) {
      const t = document.getElementById('t' + i);
      t.className = 'tank';
    }
  }

  function runManualStep() {
    resetTanks();
    for (let i = 0; i < step; i++) {
      document.getElementById('t' + i).classList.add('fed');
    }
    if (step < 6) {
      const activeTank = document.getElementById('t' + step);
      activeTank.classList.add('active-tank', 'has-person', 'feeding');
      const mins = step * 5;
      document.getElementById('clockText').textContent = '8:' + (mins < 10 ? '0' + mins : mins) + ' AM';
      step++;
    } else {
      document.getElementById('clockText').textContent = '8:30 AM';
      step = 0;
    }
  }

  function runAutoStep() {
    resetTanks();
    document.getElementById('clockText').textContent = '8:00 AM';
    setTimeout(() => {
      for (let i = 0; i < 6; i++) {
        const t = document.getElementById('t' + i);
        t.classList.add('active-tank', 'feeding');
        setTimeout(() => t.classList.add('fed'), 300);
      }
    }, 400);
  }

  function setMode(mode) {
    currentMode = mode;
    clearInterval(timer);
    step = 0;
    
    document.getElementById('btnManual').className = 'btn' + (mode === 'manual' ? ' active' : '');
    document.getElementById('btnAuto').className = 'btn' + (mode === 'auto' ? ' active' : '');
    document.getElementById('modeLabel').textContent = mode === 'manual' ? '1 by 1' : 'All at once';

    if (mode === 'manual') {
      runManualStep();
      timer = setInterval(runManualStep, 1000);
    } else {
      runAutoStep();
      timer = setInterval(runAutoStep, 2400);
    }
  }

  setMode('manual');
</script>
</body>
</html>

Can a machine or computer help us solve these kinds of challenges?

**Technology** means tools, machines, and computers that people build to solve tasks.

Computers are especially great at four superpowers: doing things over and over, keeping precise time, storing lots of information, and sending messages far 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>Problem vs Technology Solution</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      user-select: none;
    }
    body {
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px;
    }
    .toggle-bar {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 24px;
    }
    .btn {
      border: none;
      background: transparent;
      padding: 8px 18px;
      font-size: 15px;
      font-weight: 600;
      color: #64748b;
      border-radius: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }
    .btn.active {
      background: #ffffff;
      color: #0f172a;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }
    .scene {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    .status-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #ffffff;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 700;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    .status-manual {
      color: #e11d48;
    }
    .status-tech {
      color: #059669;
    }
    .tanks-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
    }
    .tank-wrapper {
      position: relative;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px;
      height: 105px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
    }
    .tank-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 600;
      color: #94a3b8;
      z-index: 2;
    }
    .tank-water {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 65%;
      background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%);
      z-index: 1;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
    }
    .fish {
      position: absolute;
      font-size: 22px;
      bottom: 12px;
      z-index: 3;
      transition: left 0.4s ease, transform 0.4s ease;
    }
    .food {
      position: absolute;
      width: 8px;
      height: 8px;
      background: #f59e0b;
      border-radius: 50%;
      z-index: 2;
      opacity: 0;
      transition: top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
    }
    .feeder-unit {
      width: 22px;
      height: 14px;
      background: #64748b;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 10px;
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .feeder-unit.active {
      opacity: 1;
      transform: translateY(0);
      background: #0284c7;
    }
    .feeder-unit::after {
      content: '⚙';
      font-size: 9px;
    }
    .person-runner {
      position: absolute;
      font-size: 26px;
      z-index: 10;
      pointer-events: none;
      transition: top 0.4s ease, left 0.4s ease, opacity 0.3s ease;
    }
  </style>
</head>
<body>

  <div class="toggle-bar">
    <button class="btn active" id="btnManual" onclick="setMode('manual')">
      🏃 Manual
    </button>
    <button class="btn" id="btnTech" onclick="setMode('tech')">
      ⚙️ Technology
    </button>
  </div>

  <div class="scene">
    <div class="status-badge" id="statusBadge">
      ⏰ 8:00 AM &nbsp;|&nbsp; <span id="statusText" class="status-manual">Too slow</span>
    </div>

    <div class="tanks-grid" id="grid">
      
      <div class="tank-wrapper" id="tank1">
        <div class="tank-top">
          <span>Tank 1</span>
          <div class="feeder-unit" id="feed1"></div>
        </div>
        <div class="tank-water"></div>
        <div class="food" id="food1" style="top: 35px; left: 50%;"></div>
        <div class="fish" id="fish1" style="left: 20%;">🐠</div>
      </div>

      
      <div class="tank-wrapper" id="tank2">
        <div class="tank-top">
          <span>Tank 2</span>
          <div class="feeder-unit" id="feed2"></div>
        </div>
        <div class="tank-water"></div>
        <div class="food" id="food2" style="top: 35px; left: 50%;"></div>
        <div class="fish" id="fish2" style="left: 60%;">🐠</div>
      </div>

      
      <div class="tank-wrapper" id="tank3">
        <div class="tank-top">
          <span>Tank 3</span>
          <div class="feeder-unit" id="feed3"></div>
        </div>
        <div class="tank-water"></div>
        <div class="food" id="food3" style="top: 35px; left: 50%;"></div>
        <div class="fish" id="fish3" style="left: 25%;">🐠</div>
      </div>

      
      <div class="tank-wrapper" id="tank4">
        <div class="tank-top">
          <span>Tank 4</span>
          <div class="feeder-unit" id="feed4"></div>
        </div>
        <div class="tank-water"></div>
        <div class="food" id="food4" style="top: 35px; left: 50%;"></div>
        <div class="fish" id="fish4" style="left: 65%;">🐠</div>
      </div>
    </div>
  </div>

  <div class="person-runner" id="runner">🏃‍♂️</div>

  <script>
    let currentMode = 'manual';
    let stepTimer = null;
    let manualStep = 0;

    function setMode(mode) {
      currentMode = mode;
      document.getElementById('btnManual').classList.toggle('active', mode === 'manual');
      document.getElementById('btnTech').classList.toggle('active', mode === 'tech');
      
      const statusText = document.getElementById('statusText');
      const runner = document.getElementById('runner');

      if (stepTimer) clearInterval(stepTimer);

      if (mode === 'manual') {
        statusText.textContent = 'Too slow';
        statusText.className = 'status-manual';
        runner.style.opacity = '1';
        
        // Disable auto-feeders
        for (let i = 1; i <= 4; i++) {
          document.getElementById('feed' + i).classList.remove('active');
        }
        
        runManualLoop();
        stepTimer = setInterval(runManualLoop, 1200);
      } else {
        statusText.textContent = 'All at once';
        statusText.className = 'status-tech';
        runner.style.opacity = '0';

        // Activate all feeders simultaneously
        for (let i = 1; i <= 4; i++) {
          document.getElementById('feed' + i).classList.add('active');
        }
        runTechLoop();
        stepTimer = setInterval(runTechLoop, 2000);
      }
    }

    function runManualLoop() {
      manualStep = (manualStep % 4) + 1;
      
      // Reset all foods and fish
      for (let i = 1; i <= 4; i++) {
        const food = document.getElementById('food' + i);
        food.style.opacity = '0';
        food.style.top = '35px';
        const fish = document.getElementById('fish' + i);
        fish.textContent = (i === manualStep) ? '😋' : '⌛';
      }

      // Position runner at current tank
      const targetTank = document.getElementById('tank' + manualStep);
      const rect = targetTank.getBoundingClientRect();
      const runner = document.getElementById('runner');
      runner.style.left = (rect.left + rect.width / 2 - 14) + 'px';
      runner.style.top = (rect.top - 18) + 'px';

      // Drop food in current tank
      const activeFood = document.getElementById('food' + manualStep);
      activeFood.style.opacity = '1';
      activeFood.style.top = '70px';
    }

    function runTechLoop() {
      // All tanks drop food together
      for (let i = 1; i <= 4; i++) {
        const food = document.getElementById('food' + i);
        const fish = document.getElementById('fish' + i);
        
        food.style.opacity = '0';
        food.style.top = '35px';
        fish.textContent = '🐠';

        setTimeout(() => {
          food.style.opacity = '1';
          food.style.top = '70px';
          fish.textContent = '😋';
        }, 300);
      }
    }

    // Initialize
    window.addEventListener('load', () => {
      setMode('manual');
    });
  </script>
</body>
</html>

What does this look like when we connect a real problem to a tech tool?

When you spot a problem, ask yourself: *Does this need exact timing, a reminder, or a step-by-step tool?*

For example, if you keep forgetting to brush your teeth for a full two minutes, a **smart timer** with lights and music solves that problem completely.

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

  .toggle-bar {
    display: flex;
    gap: 8px;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 24px;
    margin-bottom: 8px;
  }

  .tab-btn {
    border: none;
    background: transparent;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 20px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s ease;
  }

  .tab-btn.active {
    background: #ffffff;
    color: #1e2945;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }

  .display-stage {
    width: 100%;
    max-width: 480px;
    height: 280px;
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e8f0;
  }

  .status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    font-size: 14px;
    font-weight: 700;
  }

  .clock-badge {
    background: #1e2945;
    color: #22b7ff;
    padding: 2px 8px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 13px;
  }

  .grid-container {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 6px;
    padding: 10px;
    position: relative;
  }

  .tank {
    background: #e0f2fe;
    border: 1.5px solid #7dd3fc;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 16px;
  }

  .tank .food {
    position: absolute;
    top: 2px;
    font-size: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .tank.fed {
    background: #bae6fd;
    border-color: #0284c7;
  }

  .tank.fed .food {
    opacity: 1;
  }

  .feeder-bot {
    position: absolute;
    width: 24px;
    height: 24px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease-out;
    pointer-events: none;
    z-index: 10;
  }

  .timer-chip {
    display: none;
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 11px;
    background: #0284c7;
    color: #ffffff;
    padding: 2px 6px;
    border-radius: 4px;
  }

  .footer-caption {
    font-size: 13px;
    color: #64748b;
    text-align: center;
    margin-top: 8px;
    font-weight: 500;
  }
</style>
</head>
<body>

  <div class="toggle-bar">
    <button class="tab-btn active" id="btnManual" onclick="setMode('manual')">1 Person</button>
    <button class="tab-btn" id="btnAuto" onclick="setMode('auto')">Auto Timers</button>
  </div>

  <div class="display-stage">
    <div class="status-header">
      <span id="modeTitle">🏃 Manual Feeding</span>
      <span class="clock-badge" id="clockDisplay">8:00 AM</span>
    </div>

    <div class="grid-container" id="grid">
      
      <div id="runner" class="feeder-bot">🏃</div>
    </div>
  </div>

  <div class="footer-caption" id="captionText">
    One person: impossible to feed 20 tanks at once.
  </div>

<script>
  const grid = document.getElementById('grid');
  const runner = document.getElementById('runner');
  const btnManual = document.getElementById('btnManual');
  const btnAuto = document.getElementById('btnAuto');
  const modeTitle = document.getElementById('modeTitle');
  const captionText = document.getElementById('captionText');

  let mode = 'manual';
  let manualIndex = 0;
  let animTimer = null;

  // Build 20 tanks
  for (let i = 0; i < 20; i++) {
    const tank = document.createElement('div');
    tank.className = 'tank';
    tank.id = 'tank-' + i;
    tank.innerHTML = '<span class="food">🟡</span><span>🐟</span>';
    grid.appendChild(tank);
  }

  function resetTanks() {
    for (let i = 0; i < 20; i++) {
      document.getElementById('tank-' + i).classList.remove('fed');
    }
  }

  function positionRunner(idx) {
    const tank = document.getElementById('tank-' + idx);
    if (!tank) return;
    const rect = tank.getBoundingClientRect();
    const gridRect = grid.getBoundingClientRect();
    runner.style.left = (rect.left - gridRect.left + (rect.width - 24) / 2) + 'px';
    runner.style.top = (rect.top - gridRect.top + (rect.height - 24) / 2) + 'px';
  }

  function stepManual() {
    if (manualIndex < 20) {
      document.getElementById('tank-' + manualIndex).classList.add('fed');
      positionRunner(manualIndex);
      manualIndex++;
    } else {
      setTimeout(() => {
        resetTanks();
        manualIndex = 0;
        positionRunner(0);
      }, 1500);
    }
  }

  function runAuto() {
    resetTanks();
    runner.style.display = 'none';
    setTimeout(() => {
      for (let i = 0; i < 20; i++) {
        document.getElementById('tank-' + i).classList.add('fed');
      }
    }, 400);

    setTimeout(() => {
      if (mode === 'auto') runAuto();
    }, 2500);
  }

  function setMode(newMode) {
    mode = newMode;
    clearInterval(animTimer);

    if (mode === 'manual') {
      btnManual.classList.add('active');
      btnAuto.classList.remove('active');
      modeTitle.textContent = '🏃 Manual Feeding';
      captionText.textContent = 'One person: impossible to feed 20 tanks at once.';
      runner.style.display = 'flex';
      manualIndex = 0;
      resetTanks();
      positionRunner(0);
      animTimer = setInterval(stepManual, 300);
    } else {
      btnAuto.classList.add('active');
      btnManual.classList.remove('active');
      modeTitle.textContent = '⚡ 20 Auto Feeders';
      captionText.textContent = 'Technology: all 20 tanks fed simultaneously at 8:00 AM.';
      runAuto();
    }
  }

  // Initial setup
  window.onload = () => {
    positionRunner(0);
    setMode('manual');
  };
</script>
</body>
</html>

Can technology solve *every* single problem in the world, or are there some things it cannot do?

Technology cannot replace real human feelings, like giving your friend a comforting hug when they feel sad.

A good rule of thumb is: technology helps with **tasks and data**, but humans provide **care and kindness**.

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

    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 10px;
      width: 100%;
      max-width: 420px;
    }

    .btn {
      flex: 1;
      padding: 8px 12px;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 4px 10px rgba(34, 183, 255, 0.25);
    }

    .header-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 420px;
      margin-bottom: 10px;
      padding: 6px 12px;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      font-size: 13px;
      font-weight: 600;
    }

    .clock {
      display: flex;
      align-items: center;
      gap: 4px;
      color: #0f172a;
    }

    .status-badge {
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 12px;
      background: #f1f5f9;
      color: #64748b;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 420px;
      margin-bottom: 10px;
    }

    .tank {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      min-height: 80px;
      transition: border-color 0.3s ease, background-color 0.3s ease;
    }

    .tank.fed {
      border-color: #22b7ff;
      background: #f0f9ff;
    }

    .tank.waiting {
      border-color: #fed7aa;
      background: #fffbeb;
    }

    .fish {
      font-size: 26px;
      line-height: 1;
      margin-top: 4px;
    }

    .food {
      position: absolute;
      top: 6px;
      font-size: 14px;
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .food.drop {
      opacity: 1;
      transform: translateY(2px);
    }

    .time-tag {
      font-size: 11px;
      font-weight: 700;
      margin-top: 6px;
      color: #94a3b8;
    }

    .tank.fed .time-tag {
      color: #0284c7;
    }

    .tank.waiting .time-tag {
      color: #d97706;
    }

    .action-btn {
      width: 100%;
      max-width: 420px;
      padding: 10px;
      background: #0f172a;
      color: #ffffff;
      border: none;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .action-btn:active {
      opacity: 0.9;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn active" id="btnTech" onclick="setMode('tech')">
      ⚙️ Auto
    </button>
    <button class="btn" id="btnManual" onclick="setMode('manual')">
      👤 Hand
    </button>
  </div>

  <div class="header-bar">
    <div class="clock">⏰ <span id="clockText">8:00 AM</span></div>
    <div class="status-badge" id="statusBadge">Ready</div>
  </div>

  <div class="grid" id="tankGrid">
    <div class="tank" id="t0"><span class="food">🟤</span><span class="fish">🐠</span><span class="time-tag">--:--</span></div>
    <div class="tank" id="t1"><span class="food">🟤</span><span class="fish">🐟</span><span class="time-tag">--:--</span></div>
    <div class="tank" id="t2"><span class="food">🟤</span><span class="fish">🐡</span><span class="time-tag">--:--</span></div>
    <div class="tank" id="t3"><span class="food">🟤</span><span class="fish">🐠</span><span class="time-tag">--:--</span></div>
    <div class="tank" id="t4"><span class="food">🟤</span><span class="fish">🐟</span><span class="time-tag">--:--</span></div>
    <div class="tank" id="t5"><span class="food">🟤</span><span class="fish">🐡</span><span class="time-tag">--:--</span></div>
  </div>

  <button class="action-btn" id="runBtn" onclick="runSimulation()">
    ▶ Feed at 8:00 AM
  </button>

  <script>
    let mode = 'tech';
    let isRunning = false;
    let timer = null;

    function resetGrid() {
      clearTimeout(timer);
      isRunning = false;
      document.getElementById('clockText').textContent = '8:00 AM';
      document.getElementById('statusBadge').textContent = 'Ready';
      document.getElementById('statusBadge').style.color = '#64748b';
      document.getElementById('statusBadge').style.background = '#f1f5f9';

      for (let i = 0; i < 6; i++) {
        const tank = document.getElementById('t' + i);
        tank.className = 'tank';
        tank.querySelector('.food').className = 'food';
        tank.querySelector('.time-tag').textContent = '--:--';
      }
    }

    function setMode(newMode) {
      mode = newMode;
      document.getElementById('btnTech').className = mode === 'tech' ? 'btn active' : 'btn';
      document.getElementById('btnManual').className = mode === 'manual' ? 'btn active' : 'btn';
      resetGrid();
    }

    function runSimulation() {
      if (isRunning) return;
      isRunning = true;
      resetGrid();

      if (mode === 'tech') {
        document.getElementById('statusBadge').textContent = 'All at once';
        document.getElementById('statusBadge').style.color = '#0284c7';
        document.getElementById('statusBadge').style.background = '#e0f2fe';

        setTimeout(() => {
          for (let i = 0; i < 6; i++) {
            const tank = document.getElementById('t' + i);
            tank.className = 'tank fed';
            tank.querySelector('.food').className = 'food drop';
            tank.querySelector('.time-tag').textContent = '8:00 AM';
          }
          isRunning = false;
        }, 400);
      } else {
        document.getElementById('statusBadge').textContent = 'Too slow';
        document.getElementById('statusBadge').style.color = '#d97706';
        document.getElementById('statusBadge').style.background = '#fef3c7';

        for (let i = 0; i < 6; i++) {
          document.getElementById('t' + i).className = 'tank waiting';
          document.getElementById('t' + i).querySelector('.time-tag').textContent = '⏳';
        }

        let step = 0;
        function feedNext() {
          if (step < 6) {
            const mins = step * 4;
            const timeStr = mins === 0 ? '8:00 AM' : `8:${mins < 10 ? '0' + mins : mins} AM`;
            document.getElementById('clockText').textContent = timeStr;

            const tank = document.getElementById('t' + step);
            tank.className = 'tank fed';
            tank.querySelector('.food').className = 'food drop';
            tank.querySelector('.time-tag').textContent = timeStr;

            step++;
            timer = setTimeout(feedNext, 500);
          } else {
            isRunning = false;
          }
        }
        feedNext();
      }
    }
  </script>
</body>
</html>

How do we write down the instructions so a computer can actually solve the problem?

First, we describe the rule in plain words: *If the time is 8:00 AM, then sound the alarm.*

In real computer code like JavaScript, programmers write that exact same check using an **if-statement**:

<!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>Identifying Tech Problems</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;
      user-select: none;
    }

    .toolbar {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      width: 100%;
      max-width: 380px;
      justify-content: center;
    }

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

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

    .display-area {
      width: 100%;
      max-width: 380px;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 14px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .header-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0 6px;
    }

    .time-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      background: #f1f5f9;
      padding: 4px 10px;
      border-radius: 14px;
    }

    .status-badge {
      font-size: 13px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .status-badge.manual {
      background: #fef3c7;
      color: #b45309;
    }

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

    .tanks-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
    }

    .tank {
      background: #f0f9ff;
      border: 2px solid #bae6fd;
      border-radius: 8px;
      aspect-ratio: 1 / 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      transition: all 0.3s ease;
    }

    .tank.fed {
      border-color: #22b7ff;
      background: #e0f2fe;
    }

    .tank .fish {
      font-size: 20px;
      transition: transform 0.3s ease;
    }

    .tank .food {
      position: absolute;
      top: 4px;
      font-size: 10px;
      opacity: 0;
      transform: translateY(-4px);
      transition: all 0.3s ease;
    }

    .tank.fed .food {
      opacity: 1;
      transform: translateY(0);
    }

    .tank.waiting .fish {
      filter: grayscale(0.6);
      opacity: 0.6;
    }

    .tank .state-icon {
      position: absolute;
      bottom: 2px;
      font-size: 10px;
    }

    .actor-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 24px;
      height: 36px;
    }

    .pulse {
      animation: pulseAnim 1.2s infinite ease-in-out;
    }

    @keyframes pulseAnim {
      0%, 100% { opacity: 0.4; }
      50% { opacity: 1; }
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <button id="manualBtn" class="mode-btn active" onclick="setMode('manual')">
      <span>🏃‍♂️</span> Manual
    </button>
    <button id="techBtn" class="mode-btn" onclick="setMode('tech')">
      <span>🤖</span> Tech
    </button>
  </div>

  <div class="display-area">
    <div class="header-info">
      <div id="timeDisplay" class="time-badge">
        <span>⏰</span> <span id="timeText">8:00 AM</span>
      </div>
      <div id="statusBadge" class="status-badge manual">
        <span id="statusText">1 by 1</span>
      </div>
    </div>

    <div class="tanks-grid" id="tanksGrid">
      
    </div>

    <div class="actor-row" id="actorRow">
      
    </div>
  </div>

  <script>
    const TOTAL_TANKS = 8;
    let currentMode = 'manual';
    let manualStep = 0;
    let timer = null;

    const tanksGrid = document.getElementById('tanksGrid');
    const timeText = document.getElementById('timeText');
    const statusBadge = document.getElementById('statusBadge');
    const statusText = document.getElementById('statusText');
    const actorRow = document.getElementById('actorRow');
    const manualBtn = document.getElementById('manualBtn');
    const techBtn = document.getElementById('techBtn');

    // Create tanks
    for (let i = 0; i < TOTAL_TANKS; i++) {
      const tank = document.createElement('div');
      tank.className = 'tank';
      tank.id = `tank-${i}`;
      tank.innerHTML = `
        <span class="food">🥗</span>
        <span class="fish">🐟</span>
        <span class="state-icon" id="icon-${i}">⏳</span>
      `;
      tanksGrid.appendChild(tank);
    }

    function setMode(mode) {
      currentMode = mode;
      clearInterval(timer);

      if (mode === 'manual') {
        manualBtn.classList.add('active');
        techBtn.classList.remove('active');
        statusBadge.className = 'status-badge manual';
        statusText.textContent = '1 by 1';
        actorRow.innerHTML = '🏃‍♂️ ➜ 🐟';
        manualStep = 0;
        runManualLoop();
        timer = setInterval(runManualLoop, 700);
      } else {
        techBtn.classList.add('active');
        manualBtn.classList.remove('active');
        statusBadge.className = 'status-badge tech';
        statusText.textContent = 'Simultaneous';
        timeText.textContent = '8:00 AM';
        actorRow.innerHTML = '⏱️ ➜ ⚡ ➜ [ All 🐟 ]';
        applyTechState();
      }
    }

    function runManualLoop() {
      for (let i = 0; i < TOTAL_TANKS; i++) {
        const tank = document.getElementById(`tank-${i}`);
        const icon = document.getElementById(`icon-${i}`);
        if (i < manualStep) {
          tank.className = 'tank fed';
          icon.textContent = '✓';
        } else if (i === manualStep) {
          tank.className = 'tank waiting pulse';
          icon.textContent = '🏃';
        } else {
          tank.className = 'tank waiting';
          icon.textContent = '⏳';
        }
      }

      const mins = Math.min(manualStep * 5, 35);
      timeText.textContent = `8:${mins < 10 ? '0' + mins : mins} AM`;

      manualStep++;
      if (manualStep > TOTAL_TANKS) {
        manualStep = 0;
      }
    }

    function applyTechState() {
      for (let i = 0; i < TOTAL_TANKS; i++) {
        const tank = document.getElementById(`tank-${i}`);
        const icon = document.getElementById(`icon-${i}`);
        tank.className = 'tank fed';
        icon.textContent = '✓';
      }
    }

    // Initialize
    setMode('manual');
  </script>
</body>
</html>

Look around your classroom or bedroom today — what is one tricky little task that you could build a tech helper for?

technology

Identifying Problems We Can Solve With Technology. Identify a problem or task in everyday life that could be solved using technology.

CS Fundamentals Course B: Real-Life Algorithms and Problem Solving

Key Stage 1 Computing: What is Computational Thinking and Decomposition?

Everyday Problem Solving: How Technology Helps Us

For 2nd-grade TEKS 126.3(b)(1)(A) mastery, combine 'Unplugged' real-world problem scenarios with tangible classroom items before moving to computers. Have students practice communicating problems using structured sentence stems (e.g., 'The problem is ___. We can use ___ to solve it by: Step 1..., Step 2..., Step 3...'). Use role-play or picture-sequencing cards to solidify decomposition and algorithmic order.

Identifying Problems We Can Solve With Technology

What Is an Everyday Problem?

When Can Technology Help?

Matching Problems to Tech Solutions