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

Have you ever forgotten to water a houseplant until its leaves turned brown and droopy?

Everyday mix-ups like this happen all the time, but many of them are easy to fix once we turn them into clear, orderly steps.

In computer science, a **problem** is any task or challenge that has clear rules and can be solved step by step.

Computers are great at following instructions, doing math, and checking simple facts, but they cannot feel emotions or make up your opinions for you.

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

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

    /* Nav tabs */
    .tabs {
      display: flex;
      gap: 8px;
      width: 100%;
    }

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

    .tab-btn.active {
      border-color: #10b981;
      color: #065f46;
      background: #ecfdf5;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.15);
    }

    /* Stage Area */
    .stage {
      position: relative;
      height: 250px;
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e2e8f0;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .scene-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, transform 0.35s ease;
      transform: translateY(6px);
    }

    .scene-view.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    /* Visual graphics */
    .plant-box {
      position: relative;
      width: 130px;
      height: 140px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
    }

    .plant-emoji {
      font-size: 64px;
      line-height: 1;
      margin-bottom: -10px;
      z-index: 2;
      transition: transform 0.4s ease;
    }

    .pot {
      width: 80px;
      height: 54px;
      background: #d97706;
      clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%);
      border-radius: 0 0 6px 6px;
      position: relative;
      z-index: 1;
    }

    .pot-rim {
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 90px;
      height: 8px;
      background: #b45309;
      border-radius: 4px;
      z-index: 3;
    }

    /* Status Badges */
    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 700;
      margin-top: 14px;
    }

    .badge-problem {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fecaca;
    }

    .badge-tech {
      background: #eff6ff;
      color: #2563eb;
      border: 1px solid #bfdbfe;
    }

    .badge-solution {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    /* Tech overlays */
    .sensor-probe {
      position: absolute;
      right: 18px;
      top: 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 4;
      animation: pulse 2s infinite ease-in-out;
    }

    .sensor-head {
      width: 22px;
      height: 22px;
      background: #2563eb;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      color: #fff;
    }

    .sensor-rod {
      width: 4px;
      height: 38px;
      background: #64748b;
      border-radius: 2px;
    }

    .water-drops {
      position: absolute;
      top: 20px;
      font-size: 20px;
      animation: drip 1.5s infinite linear;
      z-index: 5;
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.08); }
    }

    @keyframes drip {
      0% { opacity: 0; transform: translateY(-8px); }
      50% { opacity: 1; }
      100% { opacity: 0; transform: translateY(16px); }
    }

    /* Controls bar */
    .controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #ffffff;
      padding: 8px 14px;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
    }

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

    .ctrl-btn:active {
      background: #e2e8f0;
    }
  </style>
</head>
<body>

  <div class="container">
    
    <div class="tabs">
      <button class="tab-btn active" onclick="setStep(0)">
        <span>1.</span> Problem
      </button>
      <button class="tab-btn" onclick="setStep(1)">
        <span>2.</span> Tech
      </button>
      <button class="tab-btn" onclick="setStep(2)">
        <span>3.</span> Solution
      </button>
    </div>

    
    <div class="stage">
      
      <div class="scene-view active" id="scene-0">
        <div class="plant-box">
          <div class="plant-emoji">🥀</div>
          <div class="pot-rim"></div>
          <div class="pot"></div>
        </div>
        <div class="status-badge badge-problem">
          <span>⚠️</span> Dry Soil
        </div>
      </div>

      
      <div class="scene-view" id="scene-1">
        <div class="plant-box">
          <div class="sensor-probe">
            <div class="sensor-head">⚡</div>
            <div class="sensor-rod"></div>
          </div>
          <div class="plant-emoji">🌱</div>
          <div class="pot-rim"></div>
          <div class="pot"></div>
        </div>
        <div class="status-badge badge-tech">
          <span>📟</span> Moisture Sensor
        </div>
      </div>

      
      <div class="scene-view" id="scene-2">
        <div class="water-drops">💧</div>
        <div class="plant-box">
          <div class="plant-emoji">🌿</div>
          <div class="pot-rim"></div>
          <div class="pot"></div>
        </div>
        <div class="status-badge badge-solution">
          <span>✓</span> Auto-Watered
        </div>
      </div>
    </div>

    
    <div class="controls">
      <button class="ctrl-btn" onclick="prevStep()">◀ Prev</button>
      <button class="ctrl-btn" onclick="togglePlay()" id="play-btn">⏸ Pause</button>
      <button class="ctrl-btn" onclick="nextStep()">Next ▶</button>
    </div>
  </div>

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

    function updateView() {
      const tabs = document.querySelectorAll('.tab-btn');
      const scenes = document.querySelectorAll('.scene-view');

      tabs.forEach((tab, i) => {
        tab.classList.toggle('active', i === currentStep);
      });

      scenes.forEach((scene, i) => {
        scene.classList.toggle('active', i === currentStep);
      });
    }

    function setStep(index) {
      currentStep = index;
      updateView();
      resetTimer();
    }

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

    function prevStep() {
      currentStep = (currentStep - 1 + 3) % 3;
      updateView();
      resetTimer();
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      document.getElementById('play-btn').textContent = isPlaying ? '⏸ Pause' : '▶ Play';
      if (isPlaying) {
        startTimer();
      } else {
        clearInterval(timer);
      }
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        if (isPlaying) {
          currentStep = (currentStep + 1) % 3;
          updateView();
        }
      }, 3000);
    }

    function resetTimer() {
      if (isPlaying) {
        startTimer();
      }
    }

    // Initialize auto-play
    startTimer();
  </script>
</body>
</html>

How do we take an everyday headache and turn it into a plan a computer can understand?

Let's look at our thirsty plant. The main problem is: *we do not know when the soil gets too dry.*

To solve this, we can write an **algorithm**, which is just a list of step-by-step instructions to get a job done.

<!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 to Technology Solution</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background-color: #f8fafc;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px;
      user-select: none;
    }
    .stepper-nav {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 420px;
    }
    .step-btn {
      flex: 1;
      padding: 8px 4px;
      font-size: 14px;
      font-weight: 600;
      border: 2px solid transparent;
      border-radius: 8px;
      background: #ffffff;
      color: #6b7280;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      transition: all 0.2s ease;
      text-align: center;
    }
    .step-btn.active {
      color: #0284c7;
      border-color: #22b7ff;
      background: #e0f2fe;
    }
    .stage {
      position: relative;
      width: 100%;
      max-width: 420px;
      height: 240px;
      background: #ffffff;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      overflow: hidden;
    }
    .scene-box {
      position: absolute;
      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;
    }
    .scene-box.active {
      opacity: 1;
      pointer-events: auto;
    }
    .plant-icon {
      font-size: 76px;
      line-height: 1;
      margin-bottom: 8px;
      transition: transform 0.3s ease;
    }
    .tech-layer {
      position: absolute;
      top: 36px;
      right: 28%;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .signal {
      font-size: 20px;
      animation: pulse 1.5s infinite;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 700;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    .badge-dry {
      background: #fee2e2;
      color: #dc2626;
    }
    .badge-sensor {
      background: #e0f2fe;
      color: #0284c7;
    }
    .badge-wet {
      background: #dcfce7;
      color: #16a34a;
    }
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 4px;
    }
    .ctrl-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #1e2945;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    .ctrl-btn:active {
      background: #f1f5f9;
    }
    @keyframes pulse {
      0%, 100% { opacity: 0.3; }
      50% { opacity: 1; }
    }
  </style>
</head>
<body>

  
  <div class="stepper-nav">
    <button class="step-btn active" onclick="setStep(0)">1. Problem</button>
    <button class="step-btn" onclick="setStep(1)">2. Tech</button>
    <button class="step-btn" onclick="setStep(2)">3. Solution</button>
  </div>

  
  <div class="stage">
    
    <div class="scene-box active" id="scene-0">
      <div class="plant-icon">🥀</div>
      <div class="badge badge-dry">⚠️ Dry Soil</div>
    </div>

    
    <div class="scene-box" id="scene-1">
      <div class="tech-layer">
        <span class="signal">📡</span>
        <span style="font-size: 26px;">📟</span>
      </div>
      <div class="plant-icon">🥀</div>
      <div class="badge badge-sensor">💧 Sensor Sensing</div>
    </div>

    
    <div class="scene-box" id="scene-2">
      <div class="plant-icon">🪴✨</div>
      <div class="badge badge-wet">✓ Auto Watered</div>
    </div>
  </div>

  
  <div class="controls">
    <button class="ctrl-btn" onclick="prevStep()" aria-label="Previous">◀</button>
    <button class="ctrl-btn" id="playBtn" onclick="togglePlay()" aria-label="Play/Pause">⏸</button>
    <button class="ctrl-btn" onclick="nextStep()" aria-label="Next">▶</button>
  </div>

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

    const buttons = document.querySelectorAll('.step-btn');
    const scenes = [
      document.getElementById('scene-0'),
      document.getElementById('scene-1'),
      document.getElementById('scene-2')
    ];
    const playBtn = document.getElementById('playBtn');

    function update() {
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === currentStep);
      });
      scenes.forEach((scene, i) => {
        scene.classList.toggle('active', i === currentStep);
      });
    }

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

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

    function prevStep() {
      currentStep = (currentStep + 2) % 3;
      update();
    }

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

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

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

Once our steps are simple enough, how do they look as real computer code?

Programmers turn step-by-step plans into code using simple rules like `if` and `else` to make decisions.

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

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

  /* Selector toggle */
  .toggle-group {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 10px;
    gap: 6px;
  }

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

  .toggle-btn.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  /* Flow Diagram */
  .diagram-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 10px;
    align-items: center;
  }

  .flow-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 120px;
    position: relative;
    transition: all 0.3s ease;
  }

  .flow-card.highlight {
    border-color: #38bdf8;
    box-shadow: 0 0 0 2px #bae6fd;
  }

  .icon {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 6px;
  }

  .label {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
  }

  .value {
    font-size: 15px;
    font-weight: 700;
    margin-top: 2px;
  }

  /* Code condition node */
  .decision-node {
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 12px;
    padding: 10px;
    text-align: center;
  }

  .code-tag {
    font-family: ui-monospace, monospace;
    font-size: 13px;
    font-weight: 600;
    background: #0284c7;
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 6px;
  }

  .condition-eval {
    font-size: 13px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
  }

  .eval-true {
    background: #dcfce7;
    color: #15803d;
  }

  .eval-false {
    background: #f1f5f9;
    color: #64748b;
  }

  /* Connecting arrow indicator */
  .arrow {
    position: absolute;
    font-size: 14px;
    color: #94a3b8;
    font-weight: bold;
  }

  /* Action visual */
  .water-anim {
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .water-anim.active {
    animation: drip 1s infinite ease-in-out;
  }

  @keyframes drip {
    0%, 100% { transform: translateY(0); opacity: 0.9; }
    50% { transform: translateY(4px); opacity: 0.4; }
  }

  @media (max-width: 400px) {
    .diagram-grid {
      grid-template-columns: 1fr;
      gap: 8px;
    }
    .flow-card {
      min-height: 80px;
      flex-direction: row;
      gap: 12px;
      padding: 8px 14px;
    }
    .icon {
      margin-bottom: 0;
    }
  }
</style>
</head>
<body>

<div class="app">
  
  <div class="toggle-group">
    <button class="toggle-btn active" id="btnDry" onclick="setState('dry')">
      🥀 Dry (15%)
    </button>
    <button class="toggle-btn" id="btnWet" onclick="setState('wet')">
      🌿 Moist (60%)
    </button>
  </div>

  
  <div class="diagram-grid">
    
    <div class="flow-card" id="sensorCard">
      <div class="icon" id="sensorIcon">🥀</div>
      <div class="label">Sensor</div>
      <div class="value" id="sensorVal" style="color: #ea580c;">15%</div>
    </div>

    
    <div class="flow-card decision-node highlight" id="ruleCard">
      <div class="code-tag">if &lt; 30%</div>
      <div class="condition-eval eval-true" id="evalTag">TRUE → RUN</div>
    </div>

    
    <div class="flow-card highlight" id="actionCard">
      <div class="icon water-anim active" id="actionIcon">💧</div>
      <div class="label" id="actionLabel">Pump</div>
      <div class="value" id="actionVal" style="color: #0284c7;">ON</div>
    </div>
  </div>
</div>

<script>
  function setState(state) {
    const isDry = state === 'dry';
    
    // Buttons
    document.getElementById('btnDry').classList.toggle('active', isDry);
    document.getElementById('btnWet').classList.toggle('active', !isDry);

    // Sensor
    document.getElementById('sensorIcon').textContent = isDry ? '🥀' : '🌿';
    document.getElementById('sensorVal').textContent = isDry ? '15%' : '60%';
    document.getElementById('sensorVal').style.color = isDry ? '#ea580c' : '#16a34a';

    // Decision
    const evalTag = document.getElementById('evalTag');
    if (isDry) {
      evalTag.textContent = 'TRUE → RUN';
      evalTag.className = 'condition-eval eval-true';
    } else {
      evalTag.textContent = 'FALSE → WAIT';
      evalTag.className = 'condition-eval eval-false';
    }

    // Action
    const actionIcon = document.getElementById('actionIcon');
    const actionVal = document.getElementById('actionVal');
    const actionCard = document.getElementById('actionCard');

    if (isDry) {
      actionIcon.textContent = '💧';
      actionIcon.classList.add('active');
      actionVal.textContent = 'ON';
      actionVal.style.color = '#0284c7';
      actionCard.classList.add('highlight');
    } else {
      actionIcon.textContent = '⏸️';
      actionIcon.classList.remove('active');
      actionVal.textContent = 'OFF';
      actionVal.style.color = '#64748b';
      actionCard.classList.remove('highlight');
    }
  }
</script>

</body>
</html>

Remember: technology cannot fix something on its own until you clearly spot the problem and break it down into tiny, ordered actions.

technology

Identifying Problems We Can Solve With Technology. Learners will look at everyday situations and identify a problem or task that could be solved step by step.

Real-Life Algorithms: Plant a Seed & Sequencing Unplugged

Decomposition Unplugged: Breaking Down Everyday Activities

What are Algorithms and Decomposition in Everyday Life?

Pedagogical strategy for Grade 2: Begin with concrete, 'unplugged' classroom experiences (such as acting like a robot or sequencing picture cards for everyday routines like brushing teeth or washing hands) before moving to digital and technology-based problems. Use explicit think-aloud modeling to show how large tasks become manageable when decomposed into numbered 1-2-3 actions. Emphasize that multiple sequential pathways can achieve the same goal, fostering flexible problem-solving and foundational computational thinking aligned with TEKS 126.3(b)(1)(A).

Identifying Problems We Can Solve With Technology

What Makes a Tech Problem?

The Thirsty Plant Problem

From Steps to Code