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 trying to build a giant Lego spaceship with one thousand pieces all at once. If you dump all the bricks out and try to snap them together in one second, it feels impossible!

In computer science, **decomposition** means breaking a big problem down into smaller, easier pieces called **sub-problems**.

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

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

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 440px;
      margin-bottom: 8px;
    }

    .step-btn {
      flex: 1;
      padding: 6px 4px;
      font-size: 13px;
      font-weight: 600;
      background: #ffffff;
      color: #6b7280;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
    }

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

    .play-btn {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #1e2945;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s;
    }

    /* Display Canvas */
    .stage-container {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 280px;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .stage {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
      padding: 16px;
    }

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

    /* Visual Components */
    .big-box {
      width: 130px;
      height: 130px;
      background: #e0f2fe;
      border: 2px dashed #0284c7;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .big-icon {
      font-size: 42px;
      line-height: 1;
    }

    .split-grid {
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: center;
      width: 100%;
    }

    .sub-part {
      flex: 1;
      max-width: 96px;
      height: 104px;
      background: #f1f5f9;
      border: 1.5px solid #cbd5e1;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: border-color 0.3s, background-color 0.3s;
    }

    .sub-part.done {
      background: #ecfdf5;
      border-color: #10b981;
    }

    .sub-icon {
      font-size: 28px;
    }

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

    .badge {
      font-size: 13px;
      font-weight: 700;
      color: #0369a1;
      background: #e0f2fe;
      padding: 4px 10px;
      border-radius: 999px;
      margin-top: 12px;
    }

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

    .status-check {
      font-size: 18px;
      color: #10b981;
      font-weight: bold;
    }

    .arrow-flow {
      font-size: 20px;
      color: #94a3b8;
      margin-bottom: 8px;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="play-btn" id="playBtn" onclick="togglePlay()" aria-label="Play/Pause">⏸</button>
    <button class="step-btn active" onclick="setStep(0)">1. Whole</button>
    <button class="step-btn" onclick="setStep(1)">2. Break</button>
    <button class="step-btn" onclick="setStep(2)">3. Solve</button>
    <button class="step-btn" onclick="setStep(3)">4. Done</button>
  </div>

  
  <div class="stage-container">
    
    
    <div class="stage active" id="stage-0">
      <div class="big-box">
        <span class="big-icon">🚀</span>
      </div>
      <div class="badge">Big Problem</div>
    </div>

    
    <div class="stage" id="stage-1">
      <div class="arrow-flow">⇣ Split ⇣</div>
      <div class="split-grid">
        <div class="sub-part">
          <span class="sub-icon">🧱</span>
          <span class="part-label">Part 1</span>
        </div>
        <div class="sub-part">
          <span class="sub-icon">⚙️</span>
          <span class="part-label">Part 2</span>
        </div>
        <div class="sub-part">
          <span class="sub-icon">🪽</span>
          <span class="part-label">Part 3</span>
        </div>
      </div>
      <div class="badge">Smaller Parts</div>
    </div>

    
    <div class="stage" id="stage-2">
      <div class="split-grid">
        <div class="sub-part done">
          <span class="sub-icon">🧱</span>
          <span class="status-check">✓</span>
        </div>
        <div class="sub-part done">
          <span class="sub-icon">⚙️</span>
          <span class="status-check">✓</span>
        </div>
        <div class="sub-part done">
          <span class="sub-icon">🪽</span>
          <span class="status-check">✓</span>
        </div>
      </div>
      <div class="badge">Solve Step-by-Step</div>
    </div>

    
    <div class="stage" id="stage-3">
      <div class="big-box" style="border: 2px solid #10b981; background: #ecfdf5;">
        <span class="big-icon">🚀</span>
        <span class="status-check">✓</span>
      </div>
      <div class="badge success">Goal Complete</div>
    </div>

  </div>

  <script>
    let currentStep = 0;
    const totalSteps = 4;
    let playing = true;
    let timer = null;

    function setStep(idx) {
      currentStep = idx;
      
      const buttons = document.querySelectorAll('.step-btn');
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });

      for (let i = 0; i < totalSteps; i++) {
        const stage = document.getElementById('stage-' + i);
        if (stage) {
          stage.classList.toggle('active', i === idx);
        }
      }
    }

    function nextStep() {
      const next = (currentStep + 1) % totalSteps;
      setStep(next);
    }

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

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

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

How do we use this decomposition superpower to solve tricky story problems?

Read this puzzle: "Leo has 12 apples. He picks 8 more in the garden, and then gives 5 apples to Maya. How many apples does Leo have now?"

Instead of guessing the final number right away, we split the story into two smaller steps.

<!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>Breaking Problems into Parts</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -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;
      min-height: 100vh;
      padding: 16px;
      user-select: none;
    }

    /* Navigation Bar */
    .nav-bar {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 420px;
      justify-content: center;
    }

    .step-btn {
      flex: 1;
      padding: 8px 6px;
      font-size: 13px;
      font-weight: 600;
      border: 2px solid transparent;
      border-radius: 8px;
      background: #e2e8f0;
      color: #64748b;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }

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

    /* Stage Display Area */
    .stage {
      position: relative;
      width: 100%;
      max-width: 420px;
      height: 240px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .view {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
    }

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

    /* Stage 1: Big Task */
    .big-box {
      width: 130px;
      height: 150px;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .big-icon {
      font-size: 52px;
    }

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

    /* Stage 2 & 3: Modular Pieces */
    .pieces-row {
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: center;
      width: 100%;
    }

    .piece-card {
      width: 96px;
      height: 120px;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      position: relative;
      transition: box-shadow 0.3s ease, background 0.3s ease;
    }

    .piece-card.done {
      box-shadow: 0 0 0 2px #10b981, 0 4px 12px rgba(16, 185, 129, 0.15);
      background: #f0fdf4;
    }

    .piece-icon {
      font-size: 34px;
    }

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

    .check-badge {
      position: absolute;
      top: -6px;
      right: -6px;
      width: 22px;
      height: 22px;
      background: #10b981;
      color: #ffffff;
      border-radius: 50%;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: scale(0.6);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .piece-card.done .check-badge {
      opacity: 1;
      transform: scale(1);
    }

    .arrow {
      font-size: 18px;
      color: #94a3b8;
      font-weight: bold;
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .play-btn {
      padding: 8px 18px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 20px;
      border: none;
      background: #1e2945;
      color: #ffffff;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: opacity 0.2s ease;
    }

    .play-btn:active {
      opacity: 0.8;
    }
  </style>
</head>
<body>

  
  <div class="nav-bar">
    <button class="step-btn active" onclick="setStep(0)">1. Whole</button>
    <button class="step-btn" onclick="setStep(1)">2. Split</button>
    <button class="step-btn" onclick="setStep(2)">3. Solve</button>
  </div>

  
  <div class="stage">

    
    <div class="view active" id="view-0">
      <div class="big-box">
        <span class="big-icon">🚀</span>
        <span class="label">Big Task</span>
      </div>
    </div>

    
    <div class="view" id="view-1">
      <div class="pieces-row">
        <div class="piece-card">
          <span class="piece-icon">🔺</span>
          <span class="piece-label">Top</span>
        </div>
        <div class="piece-card">
          <span class="piece-icon">🛸</span>
          <span class="piece-label">Cabin</span>
        </div>
        <div class="piece-card">
          <span class="piece-icon">🔋</span>
          <span class="piece-label">Engine</span>
        </div>
      </div>
    </div>

    
    <div class="view" id="view-2">
      <div class="pieces-row">
        <div class="piece-card done">
          <div class="check-badge">✓</div>
          <span class="piece-icon">🔺</span>
          <span class="piece-label">Top</span>
        </div>
        <span class="arrow">→</span>
        <div class="piece-card done">
          <div class="check-badge">✓</div>
          <span class="piece-icon">🛸</span>
          <span class="piece-label">Cabin</span>
        </div>
        <span class="arrow">→</span>
        <div class="piece-card done">
          <div class="check-badge">✓</div>
          <span class="piece-icon">🔋</span>
          <span class="piece-label">Engine</span>
        </div>
      </div>
    </div>

  </div>

  
  <div class="controls">
    <button class="play-btn" id="playToggle" onclick="togglePlay()">
      <span id="playIcon">⏸</span>
      <span id="playText">Pause</span>
    </button>
  </div>

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

    const views = [
      document.getElementById('view-0'),
      document.getElementById('view-1'),
      document.getElementById('view-2')
    ];
    const buttons = document.querySelectorAll('.step-btn');
    const playIcon = document.getElementById('playIcon');
    const playText = document.getElementById('playText');

    function updateView() {
      views.forEach((v, idx) => {
        if (idx === currentStep) {
          v.classList.add('active');
        } else {
          v.classList.remove('active');
        }
      });

      buttons.forEach((b, idx) => {
        if (idx === currentStep) {
          b.classList.add('active');
        } else {
          b.classList.remove('active');
        }
      });
    }

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

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

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

    function togglePlay() {
      isPlaying = !isPlaying;
      if (isPlaying) {
        playIcon.textContent = '⏸';
        playText.textContent = 'Pause';
        resetInterval();
      } else {
        playIcon.textContent = '▶';
        playText.textContent = 'Play';
        if (timer) clearInterval(timer);
      }
    }

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

By solving Step 1 first, we found Leo had 20 apples. Then Step 2 was simple: 20 minus 5 gives our final answer of 15.

What does this look like when we want a computer to solve the steps for us?

Programmers write each sub-problem as a single instruction using a **variable**, which is a labeled container that stores a value.

<!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>Decomposition</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background-color: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 16px;
      user-select: none;
    }

    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 24px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      transition: all 0.2s ease;
    }

    .btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
    }

    .stage {
      width: 100%;
      max-width: 440px;
      height: 260px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Big Block Container */
    .big-block {
      position: absolute;
      width: 220px;
      height: 190px;
      background: #ffffff;
      border: 2px dashed #94a3b8;
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 0.4s ease;
      opacity: 1;
      transform: scale(1);
    }

    .big-label {
      font-size: 15px;
      font-weight: 700;
      color: #475569;
    }

    .big-icon {
      font-size: 42px;
      line-height: 1;
    }

    /* Split Parts Container */
    .parts-container {
      position: absolute;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      gap: 12px;
      transition: all 0.4s ease;
      opacity: 0;
      pointer-events: none;
      transform: scale(0.92);
    }

    .part-card {
      flex: 1;
      max-width: 125px;
      height: 170px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
      transition: all 0.3s ease;
      position: relative;
    }

    .part-card .icon {
      font-size: 32px;
      line-height: 1;
    }

    .part-card .label {
      font-size: 14px;
      font-weight: 700;
      color: #334155;
    }

    .part-card .badge {
      width: 24px;
      height: 24px;
      border-radius: 12px;
      background: #f1f5f9;
      color: #64748b;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
    }

    .arrow {
      font-size: 18px;
      color: #94a3b8;
      font-weight: bold;
    }

    /* Active Highlight States */
    .highlight-1 #card1 {
      border-color: #0284c7;
      box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2);
    }
    .highlight-1 #card1 .badge {
      background: #0284c7;
      color: #ffffff;
    }

    .highlight-2 #card2 {
      border-color: #0284c7;
      box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2);
    }
    .highlight-2 #card2 .badge {
      background: #0284c7;
      color: #ffffff;
    }

    .highlight-3 #card3 {
      border-color: #0284c7;
      box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2);
    }
    .highlight-3 #card3 .badge {
      background: #0284c7;
      color: #ffffff;
    }

    /* State Views */
    body[data-mode="big"] .big-block {
      opacity: 1;
      transform: scale(1);
    }
    body[data-mode="big"] .parts-container {
      opacity: 0;
      pointer-events: none;
      transform: scale(0.85);
    }

    body[data-mode="parts"] .big-block {
      opacity: 0;
      transform: scale(1.15);
      pointer-events: none;
    }
    body[data-mode="parts"] .parts-container {
      opacity: 1;
      pointer-events: auto;
      transform: scale(1);
    }
  </style>
</head>
<body data-mode="big">

  <div class="controls">
    <button class="btn active" id="btnBig" onclick="setMode('big')">Big Problem</button>
    <button class="btn" id="btnParts" onclick="setMode('parts')">Break Down</button>
    <button class="btn" id="btnStep1" onclick="highlightStep(1)">1</button>
    <button class="btn" id="btnStep2" onclick="highlightStep(2)">2</button>
    <button class="btn" id="btnStep3" onclick="highlightStep(3)">3</button>
  </div>

  <div class="stage" id="stage">
    
    <div class="big-block">
      <div class="big-icon">🚀</div>
      <div class="big-label">Big Problem</div>
    </div>

    
    <div class="parts-container" id="partsContainer">
      <div class="part-card" id="card1">
        <div class="badge">1</div>
        <div class="icon">⛽</div>
        <div class="label">Part 1</div>
      </div>

      <div class="arrow">→</div>

      <div class="part-card" id="card2">
        <div class="badge">2</div>
        <div class="icon">🧭</div>
        <div class="label">Part 2</div>
      </div>

      <div class="arrow">→</div>

      <div class="part-card" id="card3">
        <div class="badge">3</div>
        <div class="icon">🎯</div>
        <div class="label">Part 3</div>
      </div>
    </div>
  </div>

  <script>
    function clearButtons() {
      document.querySelectorAll('.btn').forEach(btn => btn.classList.remove('active'));
      document.body.classList.remove('highlight-1', 'highlight-2', 'highlight-3');
    }

    function setMode(mode) {
      clearButtons();
      document.body.setAttribute('data-mode', mode);
      if (mode === 'big') {
        document.getElementById('btnBig').classList.add('active');
      } else {
        document.getElementById('btnParts').classList.add('active');
      }
    }

    function highlightStep(stepNum) {
      clearButtons();
      document.body.setAttribute('data-mode', 'parts');
      document.getElementById('btnStep' + stepNum).classList.add('active');
      document.body.classList.add('highlight-' + stepNum);
    }
  </script>
</body>
</html>

A common mistake is trying to do everything out of order, like subtracting 5 before finding out how many apples Leo picked!

Whenever a big problem looks hard, just pause and ask: what is the very first small step I can solve?

technology

Breaking Story Problems into Smaller Parts. Decompose a story problem into smaller, manageable sub-problems and describe a solution.

Barefoot Computing: Decomposition Unplugged Activity & Story Tasks

BBC Bitesize KS2 Computing: What is Decomposition?

Code.org CS Fundamentals: Computational Thinking and Decomposition

Effective instruction for TEKS 126.8(b)(1)(A) in Grade 3 uses the 'Read, Decompose, Plan, Code' (RDPC) scaffolding framework. Begin with unplugged, physical story scenarios (such as following recipes or acting out robot missions) before applying the strategy to on-screen block coding. Explicitly teach students to use highlighters with two colors: one for narrative context (non-essential) and one for action verbs/quantities (sub-problems). Using visual goal trees ensures students do not experience working memory overload when transitioning from multi-step word problems to coded algorithms.

Breaking Story Problems into Smaller Parts

Step-by-Step Story Problems

Writing Steps in Code