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 your papers fly off your desk every single time the classroom fan turns on!

If you only think of one quick fix, you might miss out on an idea that is much easier, cheaper, or more fun.

What special tool do engineers and inventors use before they start building?

**Brainstorming** means letting your mind create a giant storm of different ideas to solve a problem.

In the 1940s, an inventor named Alex Osborn noticed that teams invent much better things when they write down lots of ideas before choosing one.

<!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>Brainstorming Many Solutions</title>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

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

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

    .step-btn {
      flex: 1;
      padding: 8px 6px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      font-size: 13px;
      font-weight: 600;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: all 0.25s ease;
    }

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

    .play-btn {
      width: 36px;
      height: 36px;
      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 0.2s ease;
      flex-shrink: 0;
    }

    .play-btn:active {
      background: #f1f5f9;
    }

    /* Stage Canvas */
    .stage {
      position: relative;
      width: 100%;
      max-width: 520px;
      flex: 1;
      min-height: 280px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
    }

    /* SVG Connectors */
    .connector-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    .connector-line {
      stroke: #cbd5e1;
      stroke-width: 2.5;
      stroke-dasharray: 6 6;
      fill: none;
      transition: stroke 0.4s ease, stroke-dashoffset 0.4s ease;
    }

    .connector-line.active {
      stroke: #22b7ff;
      stroke-dasharray: none;
    }

    .connector-line.winner {
      stroke: #10b981;
      stroke-width: 3.5;
    }

    /* Nodes Layout */
    .problem-box {
      z-index: 2;
      background: #ffffff;
      border: 2px solid #94a3b8;
      border-radius: 12px;
      padding: 10px 18px;
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
    }

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

    .ideas-row {
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      width: 100%;
    }

    .idea-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      text-align: center;
      opacity: 0.25;
      transform: translateY(6px);
      transition: all 0.35s ease;
      cursor: pointer;
      position: relative;
    }

    .idea-card.visible {
      opacity: 1;
      transform: translateY(0);
      border-color: #22b7ff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.15);
    }

    .idea-card.selected {
      border-color: #10b981;
      background: #ecfdf5;
      box-shadow: 0 6px 18px rgba(16, 185, 129, 0.25);
      transform: scale(1.04);
    }

    .idea-card.dimmed {
      opacity: 0.35;
      border-color: #e2e8f0;
      transform: scale(0.96);
    }

    .idea-icon {
      font-size: 26px;
      line-height: 1;
    }

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

    .status-badge {
      position: absolute;
      top: -10px;
      right: -6px;
      background: #10b981;
      color: #ffffff;
      font-size: 10px;
      font-weight: 800;
      padding: 2px 7px;
      border-radius: 20px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      opacity: 0;
      transform: scale(0.6);
      transition: all 0.3s ease;
    }

    .idea-card.selected .status-badge {
      opacity: 1;
      transform: scale(1);
    }

    /* Target Indicator */
    .indicator-footer {
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      background: #ffffff;
      padding: 6px 16px;
      border-radius: 20px;
      border: 1px solid #e2e8f0;
      transition: all 0.3s ease;
    }

    .indicator-footer.active {
      color: #059669;
      border-color: #10b981;
      background: #f0fdf4;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="step-btn active" id="btn-0">1. Problem</button>
    <button class="step-btn" id="btn-1">2. Brainstorm 3+</button>
    <button class="step-btn" id="btn-2">3. Pick Best</button>
    <button class="play-btn" id="playBtn" aria-label="Play/Pause">⏸</button>
  </div>

  
  <div class="stage" id="stage">
    
    <svg class="connector-svg" id="svgCanvas">
      <path id="line1" class="connector-line" d="M 260 55 L 85 160" />
      <path id="line2" class="connector-line" d="M 260 55 L 260 160" />
      <path id="line3" class="connector-line" d="M 260 55 L 435 160" />
    </svg>

    
    <div class="problem-box active" id="problemNode">
      <span>🎯</span> Problem
    </div>

    
    <div class="ideas-row">
      <div class="idea-card" id="idea0">
        <span class="status-badge">BEST</span>
        <span class="idea-icon">💡</span>
        <span class="idea-label">Idea A</span>
      </div>

      <div class="idea-card" id="idea1">
        <span class="status-badge">BEST</span>
        <span class="idea-icon">💡</span>
        <span class="idea-label">Idea B</span>
      </div>

      <div class="idea-card" id="idea2">
        <span class="status-badge">BEST</span>
        <span class="idea-icon">💡</span>
        <span class="idea-label">Idea C</span>
      </div>
    </div>

    
    <div class="indicator-footer" id="footerBadge">
      <span id="footerIcon">📋</span>
      <span id="footerText">Define Problem</span>
    </div>
  </div>

  <script>
    const stepBtns = [document.getElementById('btn-0'), document.getElementById('btn-1'), document.getElementById('btn-2')];
    const problemNode = document.getElementById('problemNode');
    const ideas = [document.getElementById('idea0'), document.getElementById('idea1'), document.getElementById('idea2')];
    const lines = [document.getElementById('line1'), document.getElementById('line2'), document.getElementById('line3')];
    const footerBadge = document.getElementById('footerBadge');
    const footerText = document.getElementById('footerText');
    const footerIcon = document.getElementById('footerIcon');
    const playBtn = document.getElementById('playBtn');

    let currentStep = 0;
    let chosenWinner = 1; // Default winner: Idea B
    let isPlaying = true;
    let timer = null;

    function updatePaths() {
      const stageRect = document.getElementById('stage').getBoundingClientRect();
      const probRect = problemNode.getBoundingClientRect();

      const startX = (probRect.left + probRect.width / 2) - stageRect.left;
      const startY = (probRect.bottom) - stageRect.top;

      ideas.forEach((idea, i) => {
        const cardRect = idea.getBoundingClientRect();
        const endX = (cardRect.left + cardRect.width / 2) - stageRect.left;
        const endY = cardRect.top - stageRect.top;
        lines[i].setAttribute('d', `M ${startX} ${startY} Q ${startX + (endX - startX) * 0.2} ${startY + (endY - startY) * 0.5}, ${endX} ${endY}`);
      });
    }

    function renderStep(step) {
      currentStep = step;

      // Update button active state
      stepBtns.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === step);
      });

      // Clear connector line states
      lines.forEach(line => {
        line.classList.remove('active', 'winner');
      });

      // Clear card states
      ideas.forEach(idea => {
        idea.classList.remove('visible', 'selected', 'dimmed');
      });

      if (step === 0) {
        // Step 1: Problem only
        problemNode.classList.add('active');
        footerBadge.classList.remove('active');
        footerIcon.textContent = '🎯';
        footerText.textContent = '1. Start with Goal';
      } else if (step === 1) {
        // Step 2: Generate 3 Ideas
        problemNode.classList.add('active');
        lines.forEach(line => line.classList.add('active'));
        ideas.forEach(idea => idea.classList.add('visible'));
        footerBadge.classList.remove('active');
        footerIcon.textContent = '✨';
        footerText.textContent = '2. Generate 3+ Ideas';
      } else if (step === 2) {
        // Step 3: Select Winner
        problemNode.classList.add('active');
        ideas.forEach((idea, idx) => {
          if (idx === chosenWinner) {
            idea.classList.add('selected');
            lines[idx].classList.add('winner');
          } else {
            idea.classList.add('dimmed');
          }
        });
        footerBadge.classList.add('active');
        footerIcon.textContent = '⭐';
        footerText.textContent = '3. Choose Best Idea';
      }

      updatePaths();
    }

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

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3500);
      isPlaying = true;
      playBtn.textContent = '⏸';
    }

    function pauseAutoPlay() {
      if (timer) clearInterval(timer);
      isPlaying = false;
      playBtn.textContent = '▶';
    }

    // Step button clicks
    stepBtns.forEach((btn, idx) => {
      btn.addEventListener('click', () => {
        pauseAutoPlay();
        renderStep(idx);
      });
    });

    // Play/Pause button
    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        pauseAutoPlay();
      } else {
        startAutoPlay();
      }
    });

    // Tap individual ideas to pick custom winner
    ideas.forEach((idea, idx) => {
      idea.addEventListener('click', () => {
        chosenWinner = idx;
        pauseAutoPlay();
        renderStep(2);
      });
    });

    // Resize handling
    window.addEventListener('resize', updatePaths);

    // Initial layout & start
    window.addEventListener('load', () => {
      updatePaths();
      renderStep(0);
      startAutoPlay();
    });
  </script>
</body>
</html>

When you brainstorm, your goal is to generate at least **three different solutions** before you start making anything.

How do we make sure our three ideas are truly different from each other?

Let's solve a real problem: our classroom door keeps slamming shut loudly whenever the window is open.

To get three truly different ideas, think about changing different parts of the door or using different materials.

<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e2945;
    background: #f8f9fa;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    user-select: none;
  }

  .nav-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    width: 100%;
    max-width: 480px;
  }

  .tab-btn {
    flex: 1;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 4px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;
  }

  .tab-btn.active {
    border-color: #22b7ff;
    color: #0284c7;
    background: #f0f9ff;
    box-shadow: 0 2px 8px rgba(34, 183, 255, 0.2);
  }

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

  /* Door frame and door */
  .frame {
    position: relative;
    width: 170px;
    height: 230px;
    border: 8px solid #cbd5e1;
    border-bottom: none;
    background: #f1f5f9;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

  .floor-line {
    position: absolute;
    bottom: 25px;
    width: 320px;
    height: 4px;
    background: #94a3b8;
    border-radius: 2px;
  }

  .door {
    position: absolute;
    left: 4px;
    top: 4px;
    width: 146px;
    height: 218px;
    background: #e2e8f0;
    border-radius: 2px;
    border: 1px solid #cbd5e1;
    transform-origin: left center;
    transition: transform 0.4s ease;
  }

  /* Panels for realistic door look */
  .door-panel {
    position: absolute;
    left: 14px;
    width: 116px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
  }
  .door-panel.top { top: 16px; height: 75px; }
  .door-panel.bottom { top: 105px; height: 95px; }

  /* Handle */
  .handle {
    position: absolute;
    right: 12px;
    top: 110px;
    width: 10px;
    height: 10px;
    background: #64748b;
    border-radius: 50%;
    z-index: 3;
  }
  .lever {
    position: absolute;
    right: -10px;
    top: 3px;
    width: 14px;
    height: 4px;
    background: #64748b;
    border-radius: 2px;
  }

  /* Solutions */
  .solution {
    position: absolute;
    opacity: 0;
    transform: scale(0.85);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
  }
  .solution.visible {
    opacity: 1;
    transform: scale(1);
  }

  /* Idea 1: Wedge at floor */
  .sol-wedge {
    bottom: -2px;
    right: -18px;
    z-index: 5;
  }
  .wedge-shape {
    width: 0;
    height: 0;
    border-left: 28px solid #22b7ff;
    border-top: 14px solid transparent;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
  }

  /* Idea 2: Edge bumper */
  .sol-bumper {
    top: 55px;
    right: -12px;
    z-index: 5;
  }
  .bumper-shape {
    width: 16px;
    height: 42px;
    background: #22b7ff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(34, 183, 255, 0.4);
  }

  /* Idea 3: Handle strap */
  .sol-strap {
    top: 102px;
    right: -24px;
    z-index: 5;
  }
  .strap-anchor {
    position: absolute;
    right: -16px;
    top: 5px;
    width: 12px;
    height: 16px;
    background: #0284c7;
    border-radius: 3px;
  }
  .strap-band {
    width: 32px;
    height: 24px;
    border: 3px solid #22b7ff;
    border-radius: 12px;
    background: rgba(34, 183, 255, 0.1);
  }

  /* Target Focus Ring */
  .focus-ring {
    position: absolute;
    border: 2px dashed #0284c7;
    border-radius: 50%;
    animation: pulse 1.8s infinite;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .focus-ring.visible { opacity: 0.8; }

  @keyframes pulse {
    0% { transform: scale(0.95); opacity: 0.4; }
    50% { transform: scale(1.15); opacity: 0.9; }
    100% { transform: scale(0.95); opacity: 0.4; }
  }

  /* Focus locations */
  .focus-wedge { width: 50px; height: 50px; bottom: -18px; right: -28px; }
  .focus-bumper { width: 50px; height: 60px; top: 46px; right: -28px; border-radius: 12px; }
  .focus-strap { width: 56px; height: 46px; top: 92px; right: -32px; }

  /* Bottom Label Tag */
  .label-pill {
    margin-top: 10px;
    padding: 6px 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #1e2945;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22b7ff;
  }
</style>
</head>
<body>

<div class="nav-tabs">
  <button class="tab-btn active" onclick="setIdea(0)">1. Floor</button>
  <button class="tab-btn" onclick="setIdea(1)">2. Edge</button>
  <button class="tab-btn" onclick="setIdea(2)">3. Handle</button>
</div>

<div class="stage">
  <div class="floor-line"></div>
  
  <div class="frame">
    <div class="door">
      <div class="door-panel top"></div>
      <div class="door-panel bottom"></div>
      
      <div class="handle">
        <div class="lever"></div>
      </div>

      
      <div class="solution sol-wedge visible" id="sol-0">
        <div class="wedge-shape"></div>
      </div>
      <div class="focus-ring focus-wedge visible" id="ring-0"></div>

      
      <div class="solution sol-bumper" id="sol-1">
        <div class="bumper-shape"></div>
      </div>
      <div class="focus-ring focus-bumper" id="ring-1"></div>

      
      <div class="solution sol-strap" id="sol-2">
        <div class="strap-band"></div>
        <div class="strap-anchor"></div>
      </div>
      <div class="focus-ring focus-strap" id="ring-2"></div>
    </div>
  </div>
</div>

<div class="label-pill">
  <span class="pill-dot"></span>
  <span id="action-label">Blocks the floor</span>
</div>

<script>
  const labels = [
    "Blocks the floor",
    "Cushions the edge",
    "Holds the handle"
  ];

  let currentIdx = 0;

  function setIdea(index) {
    currentIdx = index;
    
    // Update tabs
    const tabs = document.querySelectorAll('.tab-btn');
    tabs.forEach((tab, i) => {
      tab.classList.toggle('active', i === index);
    });

    // Update solutions & focus rings
    for (let i = 0; i < 3; i++) {
      const sol = document.getElementById(`sol-${i}`);
      const ring = document.getElementById(`ring-${i}`);
      if (sol) sol.classList.toggle('visible', i === index);
      if (ring) ring.classList.toggle('visible', i === index);
    }

    // Update label
    document.getElementById('action-label').textContent = labels[index];
  }
</script>

</body>
</html>

Notice how all three solutions work differently: one blocks the floor, one cushions the edge, and one holds the handle.

What is the biggest trap that stops people from finding great solutions?

A common mistake is saying "that's silly" or "that will never work" while someone is sharing an idea.

During brainstorming, **no judging allowed**—even wacky ideas can spark a fantastic invention that nobody else thought of!

How can you try this out on your own right now?

Here is a challenge: your round crayons keep rolling off your tilted art desk and breaking on the floor.

Grab a pencil and see if you can sketch **three different ideas** to keep those crayons safe and within reach!

Brainstorming Many Solutions. Learners will generate at least three different possible solutions to a single problem.

Engineering Design Process: Brainstorming Multiple Solutions

Brainstorming and Ideation in the Engineering Design Process

Elementary Engineering Design: Generating Multiple Solutions

To master TEKS 126.3(b)(3)(A) & (B) in Grade 2, structure brainstorming sessions with explicit 'No-Judgment' norms. Use cooperative learning structures like 'Round-Robin Brainstorming' or 'Pass-the-Problem' to build mental agility. Scaffold divergent thinking by prompting students with varied angles (e.g., 'What if we changed the material?', 'What if we changed the size?', 'What if we attached it to something else?'). Ensure students sketch and label three distinct functional mechanisms before moving into testing or building.

Brainstorming Many Solutions

What Is Brainstorming?

Brainstorming in Action