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 built a tall block tower that suddenly crashed to the floor?

Before rushing to rebuild, great inventors pause and hit the rewind button in their minds.

To **reflect** means to think back on what happened while you built and tested something so you can learn from it.

It is like watching an instant replay of your test to find clues about your design.

<!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>What Is Reflecting?</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: 100vh;
    padding: 12px;
  }
  .stage {
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .viewport {
    position: relative;
    width: 100%;
    height: 240px;
    background: linear-gradient(180deg, #e0f2fe 0%, #f8fafc 80%);
    overflow: hidden;
  }
  
  /* Cliffs */
  .cliff {
    position: absolute;
    bottom: 0;
    width: 22%;
    height: 90px;
    background: #94a3b8;
    border-radius: 8px 8px 0 0;
  }
  .cliff.left { left: 0; }
  .cliff.right { right: 0; }
  .water {
    position: absolute;
    bottom: 0;
    left: 22%;
    right: 22%;
    height: 35px;
    background: #38bdf8;
    opacity: 0.7;
    border-radius: 4px 4px 0 0;
  }

  /* Scenes / Steps */
  .scene {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }
  .scene.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* Bridge elements */
  .deck {
    position: absolute;
    left: 20%;
    right: 20%;
    top: 146px;
    height: 8px;
    background: #64748b;
    border-radius: 4px;
    transition: all 0.4s ease;
  }
  .deck.bent {
    transform: rotate(6deg);
    top: 154px;
    background: #ef4444;
  }
  .deck.reinforced {
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
  }
  .pillar {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 86px;
    background: #22c55e;
    border-radius: 4px 4px 0 0;
  }

  /* Vehicle & Visual Indicators */
  .car {
    position: absolute;
    font-size: 28px;
    transition: all 0.4s ease;
  }
  .car-s1 { left: 45%; top: 122px; transform: rotate(12deg); }
  .car-s2 { left: 45%; top: 122px; transform: rotate(12deg); filter: drop-shadow(0 0 6px #22b7ff); }
  .car-s3 { left: 55%; top: 116px; transform: rotate(0deg); }

  /* Replay Scan Overlay */
  .replay-overlay {
    position: absolute;
    inset: 0;
    background: rgba(34, 183, 255, 0.08);
    border: 2px dashed #22b7ff;
    box-sizing: border-box;
  }
  .focus-ring {
    position: absolute;
    left: 42%;
    top: 130px;
    width: 60px;
    height: 60px;
    border: 3px solid #22b7ff;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }
  @keyframes pulse {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.8; }
  }

  /* Pill Badges */
  .tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #ffffff;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .tag.blue { color: #0284c7; }
  .tag.red { color: #dc2626; }
  .tag.green { color: #16a34a; }

  /* Controls */
  .controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px;
    background: #ffffff;
    border-top: 1px solid #f1f5f9;
  }
  .btn-step {
    border: none;
    background: #f1f5f9;
    padding: 10px 6px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
  }
  .btn-step.active {
    background: #22b7ff;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(34, 183, 255, 0.35);
  }
</style>
</head>
<body>

<div class="stage">
  <div class="viewport">
    <div class="cliff left"></div>
    <div class="cliff right"></div>
    <div class="water"></div>

    
    <div class="scene active" id="scene-0">
      <div class="deck bent"></div>
      <div class="car car-s1">🚗</div>
      <div class="tag red">⚠️ Test Fails</div>
    </div>

    
    <div class="scene" id="scene-1">
      <div class="replay-overlay"></div>
      <div class="deck bent"></div>
      <div class="car car-s2">🚗</div>
      <div class="focus-ring">🔍</div>
      <div class="tag blue">⏪ Instant Replay</div>
    </div>

    
    <div class="scene" id="scene-2">
      <div class="pillar"></div>
      <div class="deck reinforced"></div>
      <div class="car car-s3">🚗</div>
      <div class="tag green">✓ Stronger Build</div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn-step active" onclick="setStep(0)">1. Test</button>
    <button class="btn-step" onclick="setStep(1)">2. Reflect</button>
    <button class="btn-step" onclick="setStep(2)">3. Improve</button>
  </div>
</div>

<script>
  let current = 0;
  let timer = null;
  const scenes = [document.getElementById('scene-0'), document.getElementById('scene-1'), document.getElementById('scene-2')];
  const buttons = document.querySelectorAll('.btn-step');

  function setStep(index) {
    current = index;
    scenes.forEach((s, i) => s.classList.toggle('active', i === index));
    buttons.forEach((b, i) => b.classList.toggle('active', i === index));
    resetTimer();
  }

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

  function resetTimer() {
    clearInterval(timer);
    timer = setInterval(nextStep, 3500);
  }

  resetTimer();
</script>

</body>
</html>

How does looking back help you build something better? Let's check out Maya's bridge.

Maya placed a flat sheet of paper across two books and stacked pennies on top to test its strength.

The bridge held 3 pennies, but on the 4th penny, the middle bent down and dropped the coins.

Instead of guessing what to do next, Maya used two helpful **reflection questions**: *What worked well?* and *What went wrong?*

<!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: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }
    .diagram-area {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .view-card {
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }
    .bridge-svg {
      width: 100%;
      height: 180px;
      display: block;
    }
    .callout {
      position: absolute;
      top: 14px;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.3s ease;
    }
    .callout.worked {
      background: #e6f9ed;
      color: #16a34a;
      box-shadow: 0 0 0 1px #86efac;
    }
    .callout.failed {
      background: #fef2f2;
      color: #dc2626;
      box-shadow: 0 0 0 1px #fca5a5;
    }
    .callout.next {
      background: #eff6ff;
      color: #2563eb;
      box-shadow: 0 0 0 1px #93c5fd;
    }
    .btn-group {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
      width: 100%;
    }
    .nav-btn {
      appearance: none;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      padding: 10px 6px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }
    .nav-btn .icon {
      font-size: 18px;
    }
    .nav-btn.active {
      background: #ffffff;
      color: #1e2945;
      border-color: #22b7ff;
      box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.25);
    }
    /* SVG elements */
    .pillar-highlight {
      transition: opacity 0.3s ease;
      opacity: 0;
    }
    .deck-bent {
      transition: opacity 0.3s ease;
    }
    .deck-truss {
      transition: opacity 0.3s ease;
    }
    .weight-block {
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
  </style>
</head>
<body>

  <div class="diagram-area">
    <div class="view-card">
      <div id="badge" class="callout worked">
        <span>✓</span> <span id="badge-text">Pillars held</span>
      </div>

      <svg class="bridge-svg" viewBox="0 0 360 160">
        
        <rect x="10" y="115" width="70" height="35" rx="4" fill="#cbd5e1" />
        <rect x="280" y="115" width="70" height="35" rx="4" fill="#cbd5e1" />
        <line x1="0" y1="150" x2="360" y2="150" stroke="#94a3b8" stroke-width="2" stroke-dasharray="4 4" />

        
        <rect x="80" y="142" width="200" height="8" rx="4" fill="#93c5fd" opacity="0.4" />

        
        <rect x="60" y="70" width="28" height="50" rx="3" fill="#64748b" />
        <rect x="272" y="70" width="28" height="50" rx="3" fill="#64748b" />

        
        <g id="pillarHighlights" class="pillar-highlight" opacity="1">
          <rect x="56" y="66" width="36" height="58" rx="6" fill="none" stroke="#22c55e" stroke-width="3.5" />
          <rect x="268" y="66" width="36" height="58" rx="6" fill="none" stroke="#22c55e" stroke-width="3.5" />
        </g>

        
        <g id="bentGroup">
          <path d="M 60 75 Q 180 102 300 75" fill="none" stroke="#94a3b8" stroke-width="7" stroke-linecap="round" />
          <path id="sagHighlight" d="M 120 86 Q 180 105 240 86" fill="none" stroke="#ef4444" stroke-width="4" stroke-linecap="round" opacity="0" />
        </g>

        
        <g id="trussGroup" opacity="0">
          
          <line x1="60" y1="75" x2="300" y2="75" stroke="#2563eb" stroke-width="7" stroke-linecap="round" />
          
          <polyline points="60,75 90,105 120,75 150,105 180,75 210,105 240,75 270,105 300,75" fill="none" stroke="#22b7ff" stroke-width="3" stroke-linejoin="round" />
          <line x1="90" y1="105" x2="270" y2="105" stroke="#22b7ff" stroke-width="3" stroke-linecap="round" />
        </g>

        
        <g id="weightGroup" transform="translate(180, 84)">
          <rect x="-18" y="-22" width="36" height="22" rx="4" fill="#334155" />
          <text x="0" y="-7" fill="#ffffff" font-size="11" font-weight="bold" text-anchor="middle">kg</text>
        </g>

        
        <text id="statusIcon" x="180" y="44" font-size="20" text-anchor="middle">✅</text>
      </svg>
    </div>

    
    <div class="btn-group">
      <button class="nav-btn active" id="btn0" onclick="setStep(0)">
        <span class="icon">🔍</span>
        <span>Worked?</span>
      </button>
      <button class="nav-btn" id="btn1" onclick="setStep(1)">
        <span class="icon">⚠️</span>
        <span>Failed?</span>
      </button>
      <button class="nav-btn" id="btn2" onclick="setStep(2)">
        <span class="icon">💡</span>
        <span>Next Try</span>
      </button>
    </div>
  </div>

  <script>
    const data = [
      {
        badgeClass: 'worked',
        badgeSymbol: '✓',
        badgeText: 'Pillars held',
        pillars: '1',
        bentDeck: '1',
        sagAlert: '0',
        truss: '0',
        weightY: 84,
        status: '✅'
      },
      {
        badgeClass: 'failed',
        badgeSymbol: '!',
        badgeText: 'Center bent',
        pillars: '0',
        bentDeck: '1',
        sagAlert: '1',
        truss: '0',
        weightY: 84,
        status: '⚠️'
      },
      {
        badgeClass: 'next',
        badgeSymbol: '✦',
        badgeText: 'Add support',
        pillars: '0',
        bentDeck: '0',
        sagAlert: '0',
        truss: '1',
        weightY: 67,
        status: '✨'
      }
    ];

    let current = 0;
    let timer = null;

    function setStep(idx, manual = true) {
      if (manual && timer) {
        clearInterval(timer);
        timer = null;
      }
      current = idx;
      const d = data[idx];

      // Update badge
      const b = document.getElementById('badge');
      b.className = 'callout ' + d.badgeClass;
      document.getElementById('badge-text').textContent = d.badgeText;
      b.querySelector('span').textContent = d.badgeSymbol;

      // Update SVG parts
      document.getElementById('pillarHighlights').setAttribute('opacity', d.pillars);
      document.getElementById('bentGroup').setAttribute('opacity', d.bentDeck);
      document.getElementById('sagHighlight').setAttribute('opacity', d.sagAlert);
      document.getElementById('trussGroup').setAttribute('opacity', d.truss);
      document.getElementById('weightGroup').setAttribute('transform', `translate(180, ${d.weightY})`);
      document.getElementById('statusIcon').textContent = d.status;

      // Update buttons
      for (let i = 0; i < 3; i++) {
        const btn = document.getElementById('btn' + i);
        if (i === idx) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      }
    }

    // Auto cycle gently so students discover the reflection process
    timer = setInterval(() => {
      setStep((current + 1) % 3, false);
    }, 3200);
  </script>
</body>
</html>

By thinking back on her test, Maya discovered exactly why the bridge bent, which gave her a great idea for her next try.

Should you only reflect when something breaks?

Reflecting is not just for fixing mistakes. You also reflect on your successes so you remember what parts worked best.

The next time you finish testing a project, ask yourself: *What surprised me, and what did this test teach me?*

What Is Reflecting?. Learners will describe reflecting as thinking back on what happened during building and testing to learn from it.

Design Time | The Cat in the Hat Knows a Lot About That!

Engineering Design Process: Test, Reflect, and Improve

Design and Technology: Testing, Evaluating, and Learning from Inventions

For 2nd-grade learners mastering TEKS 126.3(b)(3)(B), reflection must be scaffolded as a concrete, verbal, and visual thinking routine rather than an abstract writing task. Effective instructional strategies include structured sentence frames (e.g., 'During testing I saw ___, which happened because ___. Now I know to ___'), Think-Pair-Share reflection circles immediately following hands-on trials, and establishing an engineering culture where 'failure points' are celebrated as exciting discoveries that guide better redesigns.

What Is Reflecting?

What Does Reflecting Mean?

Maya's Bridge Test