<!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;
      -webkit-tap-highlight-color: transparent;
    }

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

    .title {
      font-size: 15px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #475569;
      margin-bottom: 12px;
      text-align: center;
    }

    /* Formula 3-Box Grid */
    .formula-row {
      display: flex;
      flex-direction: row;
      gap: 8px;
      width: 100%;
      max-width: 620px;
      align-items: stretch;
      justify-content: center;
    }

    .formula-card {
      flex: 1;
      min-width: 0;
      border-radius: 12px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      border: 2px solid transparent;
      transition: box-shadow 0.25s ease, opacity 0.25s ease, border-color 0.25s ease;
      user-select: none;
    }

    .card-user {
      background: #e3f2fd;
      border-color: #90caf9;
    }

    .card-goal {
      background: #fff8e1;
      border-color: #ffe082;
    }

    .card-why {
      background: #f3e5f5;
      border-color: #ce93d8;
    }

    .formula-card.dimmed {
      opacity: 0.45;
    }

    .formula-card.active {
      box-shadow: 0 0 0 2px #1e2945;
      opacity: 1;
    }

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

    .card-tag {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 2px 6px;
      border-radius: 6px;
      margin-bottom: 4px;
      background: rgba(255, 255, 255, 0.7);
    }

    .card-text {
      font-size: 13px;
      font-weight: 700;
      line-height: 1.25;
      color: #1e2945;
    }

    /* Plus divider */
    .plus-divider {
      display: flex;
      align-items: center;
      font-weight: 800;
      font-size: 18px;
      color: #94a3b8;
    }

    /* Down arrow */
    .flow-arrow {
      font-size: 18px;
      color: #64748b;
      margin: 10px 0 6px;
      text-align: center;
      line-height: 1;
    }

    /* Example Banner */
    .example-container {
      width: 100%;
      max-width: 620px;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .example-header {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #64748b;
    }

    .sentence-box {
      font-size: 14px;
      line-height: 1.55;
      color: #1e2945;
      font-weight: 500;
    }

    .chip {
      display: inline;
      padding: 2px 6px;
      border-radius: 6px;
      font-weight: 700;
      transition: background-color 0.25s ease, box-shadow 0.25s ease;
      cursor: pointer;
    }

    .chip-user {
      background: #e3f2fd;
      border-bottom: 2px solid #64b5f6;
    }

    .chip-goal {
      background: #fff8e1;
      border-bottom: 2px solid #ffd54f;
    }

    .chip-why {
      background: #f3e5f5;
      border-bottom: 2px solid #ba68c8;
    }

    .chip.highlighted {
      box-shadow: 0 0 0 2px #1e2945;
    }

    /* Interactive hint */
    .hint-bar {
      margin-top: 8px;
      font-size: 12px;
      color: #64748b;
      text-align: center;
      font-weight: 600;
    }

    @media (max-width: 480px) {
      .formula-row {
        flex-direction: column;
      }
      .plus-divider {
        display: none;
      }
      .formula-card {
        padding: 8px 10px;
        flex-direction: row;
        gap: 10px;
        text-align: left;
      }
      .card-icon {
        margin-bottom: 0;
        font-size: 22px;
      }
      .sentence-box {
        font-size: 13px;
      }
    }
  </style>
</head>
<body>

  <div class="title">User Need Formula</div>

  
  <div class="formula-row">
    <div class="formula-card card-user" id="card-user" onclick="selectPart('user')">
      <div class="card-icon">🧑‍🎓</div>
      <div>
        <div class="card-tag">Part 1</div>
        <div class="card-text">[Specific User]</div>
      </div>
    </div>

    <div class="plus-divider">+</div>

    <div class="formula-card card-goal" id="card-goal" onclick="selectPart('goal')">
      <div class="card-icon">🎯</div>
      <div>
        <div class="card-tag">Part 2</div>
        <div class="card-text">needs a way to<br>[Goal]</div>
      </div>
    </div>

    <div class="plus-divider">+</div>

    <div class="formula-card card-why" id="card-why" onclick="selectPart('why')">
      <div class="card-icon">💡</div>
      <div>
        <div class="card-tag">Part 3</div>
        <div class="card-text">because<br>[Root Cause]</div>
      </div>
    </div>
  </div>

  <div class="flow-arrow">▼</div>

  
  <div class="example-container">
    <div class="example-header">Example Statement</div>
    <div class="sentence-box">
      <span class="chip chip-user" id="chip-user" onclick="selectPart('user')">Elementary students</span>
      <span> need a way to </span>
      <span class="chip chip-goal" id="chip-goal" onclick="selectPart('goal')">keep lunch apples cold</span>
      <span> because </span>
      <span class="chip chip-why" id="chip-why" onclick="selectPart('why')">warm fruit turns brown before recess</span>.
    </div>
  </div>

  <div class="hint-bar" id="hint-text">Tap any part to highlight its role</div>

  <script>
    let activePart = null;

    const descriptions = {
      user: "Part 1: Who is experiencing the problem?",
      goal: "Part 2: What must they be able to accomplish?",
      why: "Part 3: Why does this problem occur?",
      all: "Tap any part to highlight its role"
    };

    function selectPart(part) {
      if (activePart === part) {
        activePart = null;
      } else {
        activePart = part;
      }
      updateUI();
    }

    function updateUI() {
      const parts = ['user', 'goal', 'why'];
      const hint = document.getElementById('hint-text');

      parts.forEach(p => {
        const card = document.getElementById('card-' + p);
        const chip = document.getElementById('chip-' + p);

        if (!activePart) {
          card.classList.remove('active', 'dimmed');
          chip.classList.remove('highlighted');
        } else if (activePart === p) {
          card.classList.add('active');
          card.classList.remove('dimmed');
          chip.classList.add('highlighted');
        } else {
          card.classList.remove('active');
          card.classList.add('dimmed');
          chip.classList.remove('highlighted');
        }
      });

      hint.textContent = activePart ? descriptions[activePart] : descriptions.all;
    }
  </script>

</body>
</html>

Identifying Everyday Problems and User Needs

<!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>Everyday Complaint to Engineering Problem</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    body {
      background: transparent;
      color: #0f172a;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 100%;
      justify-content: space-between;
    }

    /* Scenario Tabs */
    .nav-pills {
      display: flex;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .pill-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .pill-btn:hover {
      background: #e2e8f0;
      color: #0f172a;
    }

    .pill-btn.active {
      background: #0f172a;
      border-color: #0f172a;
      color: #ffffff;
    }

    /* Main Comparison Flow */
    .flow-container {
      display: grid;
      grid-template-columns: 1fr auto 1.25fr;
      align-items: center;
      gap: 8px;
      position: relative;
    }

    @media (max-width: 580px) {
      .flow-container {
        grid-template-columns: 1fr;
        gap: 6px;
      }
    }

    /* Complaint Panel */
    .panel {
      border-radius: 12px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 140px;
      justify-content: space-between;
      transition: opacity 0.25s ease;
    }

    .complaint-panel {
      background: #fef2f2;
      border: 1px solid #fecaca;
    }

    .panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .complaint-header {
      color: #b91c1c;
    }

    .quote-box {
      font-size: 14px;
      font-weight: 600;
      color: #991b1b;
      line-height: 1.35;
      font-style: italic;
    }

    .tag-complaint {
      align-self: flex-start;
      font-size: 10px;
      font-weight: 600;
      color: #ef4444;
      background: #fee2e2;
      border-radius: 6px;
      padding: 3px 8px;
    }

    /* Center Transition Arrow */
    .transition-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      padding: 4px;
    }

    .lens-badge {
      background: #3b82f6;
      color: #ffffff;
      font-size: 10px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 12px;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .arrow-icon {
      font-size: 18px;
      color: #3b82f6;
      font-weight: bold;
    }

    @media (max-width: 580px) {
      .transition-node {
        flex-direction: row;
        gap: 6px;
        padding: 0;
      }
      .arrow-icon {
        transform: rotate(90deg);
      }
    }

    /* Engineering Problem Panel */
    .engineering-panel {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
    }

    .engineering-header {
      color: #15803d;
    }

    .breakdown-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .part-row {
      display: flex;
      align-items: baseline;
      gap: 6px;
      font-size: 12px;
      line-height: 1.25;
    }

    .chip {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 2px 6px;
      border-radius: 4px;
      flex-shrink: 0;
      letter-spacing: 0.3px;
    }

    .chip-user {
      background: #e0f2fe;
      color: #0284c7;
      border: 1px solid #bae6fd;
    }

    .chip-need {
      background: #fef3c7;
      color: #b45309;
      border: 1px solid #fde68a;
    }

    .chip-goal {
      background: #dcfce7;
      color: #15803d;
      border: 1px solid #bbf7d0;
    }

    .part-text {
      color: #0f172a;
      font-weight: 500;
    }

    /* Formula Strip */
    .formula-strip {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
    }

    .formula-badge {
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 11px;
    }

    .f-user { background: #e0f2fe; color: #0369a1; }
    .f-need { background: #fef3c7; color: #92400e; }
    .f-goal { background: #dcfce7; color: #166534; }
    .f-result { background: #0f172a; color: #ffffff; }

    .op {
      color: #94a3b8;
      font-weight: 800;
    }
  </style>
</head>
<body>

  
  <div class="nav-pills" role="tablist">
    <button class="pill-btn active" onclick="setScenario(0)" id="tab-0" role="tab">🌧️ Wet Hallway</button>
    <button class="pill-btn" onclick="setScenario(1)" id="tab-1" role="tab">🎒 Heavy Backpack</button>
    <button class="pill-btn" onclick="setScenario(2)" id="tab-2" role="tab">🍦 Melting Ice Pop</button>
  </div>

  
  <div class="flow-container">
    
    <div class="panel complaint-panel">
      <div class="panel-header complaint-header">
        <span>Everyday Complaint</span>
        <span>😠</span>
      </div>
      <div class="quote-box" id="complaintText">
        "The floor is so wet and slippery whenever it rains!"
      </div>
      <div class="tag-complaint">
        Focus: Annoyance & Frustration
      </div>
    </div>

    
    <div class="transition-node">
      <div class="lens-badge">🔍 Lens</div>
      <div class="arrow-icon">➔</div>
    </div>

    
    <div class="panel engineering-panel">
      <div class="panel-header engineering-header">
        <span>Actionable Problem</span>
        <span>⚙️</span>
      </div>
      <div class="breakdown-list">
        <div class="part-row">
          <span class="chip chip-user">User</span>
          <span class="part-text" id="userText">Students & staff</span>
        </div>
        <div class="part-row">
          <span class="chip chip-need">Need</span>
          <span class="part-text" id="needText">store dripping umbrellas at entrance</span>
        </div>
        <div class="part-row">
          <span class="chip chip-goal">Goal</span>
          <span class="part-text" id="goalText">tiles stay dry to prevent slips</span>
        </div>
      </div>
    </div>
  </div>

  
  <div class="formula-strip">
    <span class="formula-badge f-user">User</span>
    <span class="op">+</span>
    <span class="formula-badge f-need">Need</span>
    <span class="op">+</span>
    <span class="formula-badge f-goal">Goal</span>
    <span class="op">=</span>
    <span class="formula-badge f-result">Solvable Problem</span>
  </div>

  <script>
    const scenarios = [
      {
        complaint: '"The hallway floor is so wet and slippery whenever it rains!"',
        user: 'Students & school staff',
        need: 'store dripping umbrellas at the entrance',
        goal: 'keep walkways dry to prevent slips'
      },
      {
        complaint: '"My backpack straps dig into my shoulders walking home!"',
        user: 'Commuters & students',
        need: 'distribute heavy book weight across body',
        goal: 'eliminate shoulder strain during travel'
      },
      {
        complaint: '"My ice pop melts and drips all over my sticky fingers!"',
        user: 'Children eating outside',
        need: 'catch melting juice before it reaches hands',
        goal: 'keep fingers clean on hot days'
      }
    ];

    function setScenario(index) {
      for (let i = 0; i < scenarios.length; i++) {
        document.getElementById(`tab-${i}`).classList.toggle('active', i === index);
      }
      
      const data = scenarios[index];
      document.getElementById('complaintText').textContent = data.complaint;
      document.getElementById('userText').textContent = data.user;
      document.getElementById('needText').textContent = data.need;
      document.getElementById('goalText').textContent = data.goal;
    }
  </script>
</body>
</html>

Using Celsius Thermometers for Temperature Measurement

Using Digital Scales to Measure Mass

Comparing Temperatures of Different Objects

Comparing Mass of Different Objects

Comparing Relative Density of Objects

Sink or Float: Testing Objects in Water

Predicting Sink or Float Based on Material

Using Tree Maps to Classify Data

Identifying Mystery Objects from Property Clues

science

Measuring and Classifying Matter by Mass, Temperature, and Density

Collecting Data from Force Investigations

Using Spring Scales to Measure Force

Using Timing Devices: Stopwatches and Timers

Investigating Energy Transfer During Collisions

Recording and Graphing Motion Data

Finding Patterns in Force and Motion Data

Building Models to Explain Motion and Energy

Forces, Motion, and Energy Transfer

Comparing Thermal Conductors and Insulators

Comparing Electrical Conductors and Insulators

Materials That Conduct Both Heat and Electricity

Identifying Physical State: Solid, Liquid, or Gas

Investigating Magnetic Properties of Everyday Objects

Investigating Conductors, Insulators, States, and Magnetism

El proceso de diseño en ingeniería: identificar el problema

Selección de materiales reciclables para prototipos

Construcción de una balanza de palanca casera

Diseño de un sistema de rampas para transporte escolar

Construcción de un polipasto y polea de rescate

Elaboración de un vehículo con rueda y eje propulsado

Creación de un brazo mecánico o pinza recolectora

Diseño de un puente levadizo con mecanismos articulados

Pruebas de resistencia y eficiencia del prototipo

Ajuste y rediseño para mejorar la eficiencia mecánica

Comunicación de resultados y manual de uso del artefacto

Diseño, construcción e ingeniería con máquinas simples

Recognizing Mixtures and Their Components

Observing Solids Mixed in Liquids

Observing Liquids Mixed in Liquids

Comparing How Different Solids Dissolve in Water

Comparing Properties Before and After Mixing

Separating Mixtures Using Screens and Filters

Identifying Solutions Among Different Mixtures

Using Venn Diagrams to Compare in Science

Identifying the Best Features From Multiple Solutions

Explaining What Happens When Materials Are Combined

Investigating Mixtures and Solutions

Using Safety Equipment During Investigations

Exploring How Heat Moves Between Objects

Testing Thermal Conductors and Insulators

Graphing Temperature Changes Over Time

Designing a Thermal Insulation Solution

Thermal Energy and Heat Transfer

Factores bióticos y abióticos del ecosistema

Tipos de ecosistemas: Terrestres y acuáticos

Productores, consumidores y descomponedores

Cadenas y redes alimentarias

Pirámides de energía y flujo energético

Relaciones entre especies: Simbiosis, competencia y depredación

Equilibrio ecológico y cambios en las poblaciones

Impacto humano en los ecosistemas

Estrategias de conservación y protección de la biodiversidad

Ecosistemas, cadenas tróficas y flujo de energía

Exploring Circuit Components and How They Work

Sorting Materials by Electrical Conductivity

Representing Circuits with Scientific Diagrams

Investigating Switches in Circuits

Evaluating Circuit Designs with Criteria

Communicating Circuit Design Solutions

Electricity and Circuits

Identifying Pushes and Pulls as Forces

How Forces Change the Motion of Objects

Exploring Gravity as a Pulling Force

Testing How Friction Affects Rolling Objects

Magnetic Forces at a Distance

Exploring Magnetic Attraction and Repulsion

Using Magnets in Scientific Investigations

Comparing Contact and Noncontact Forces

Investigating Forces, Friction, and Magnets

Using Input-Output Tables for Cause and Effect

Designing a Force Investigation with Ramps

Evaluating Model Size, Scale, Properties, and Materials

Communicating Findings from Force Investigations

Designing and Communicating Force Investigations

Identifying Design Constraints That Limit Solutions

Establishing Measurable Design Success Criteria

Building Prototypes of Simple Machines to Reduce Effort

Designing and Building Practical Electric Circuits

Testing and Scoring Prototypes Against Criteria and Constraints

Comparing Solutions Against Criteria and Constraints

Iterating and Optimizing Engineering Designs

Engineering Design, Prototyping, and Evaluating Solutions

¿Qué es la materia?: Masa y volumen

Propiedades físicas de la materia: Textura, dureza y elasticidad

Densidad y flotabilidad

Los estados de la materia: Sólido, líquido y gas

Cambios de estado por efecto de la temperatura

Cambios físicos versus cambios químicos

Evidencias de reacciones químicas

La conservación de la materia

Mezclas homogéneas y heterogéneas

Métodos de separación de mezclas

La materia: Propiedades, estados y transformaciones

Testing How Flexible Materials Are

Which Materials Conduct Heat?

Transparent, Translucent, and Opaque Materials

Waterproof and Absorbent Materials

Strong and Weak Materials

Choosing the Right Material for the Job

How Scientists Test Materials for New Products

Testing and Applying Material Properties

Investigating Water Waves and Sound Waves

Using Hand Lenses for Close Observation

Exploring How Light Bounces Off Surfaces

Modeling How Light Travels and Interacts

Designing an Experiment with Light or Sound

Waves and Light

Observing How Rocks Break Down Over Time

Investigating Erosion with a Stream Model

Exploring How Soil Forms and Supports Life

Analyzing Soil Samples from Different Locations

Identifying Earth's Natural Resources

Evaluating Human Impact on Land and Water

Designing Solutions to Reduce Erosion

Earth's Surface: Weathering, Erosion, and Resources

Recognizing Forms of Energy Around Us

Tracing Energy Through Everyday Systems

How Heat Moves from Warm to Cool Objects

Observing Temperature Changes During Heat Transfer

Exploring Sound Waves and Vibration

How Pitch and Volume Relate to Sound Energy

Exploring How Light Travels and Bounces

Using Mirrors to Explore Light Reflection

Sound Traveling Through Solids and Liquids

Designing an Investigation with Light or Sound

Energy, Heat, and Waves

What Are Forces? Contact and Non-Contact Forces

How Forces Act Between Two Objects

How Forces Make Things Move

Gravity: The Force That Pulls Down

Investigating Gravity on Different Objects

What Is Friction?

Testing Friction on Different Surfaces

Using Friction to Help Us in Everyday Life

Forces, Gravity, and Friction

¿Qué es una fuerza?: Empujar y jalar

Fuerzas de contacto y fuerzas a distancia

La fuerza de gravedad y el peso

La fricción y el rozamiento

Posición, dirección y rapidez del movimiento

Fuerzas equilibradas y no equilibradas

Máquinas simples: La palanca y el plano inclinado

Máquinas simples: Poleas, ruedas y ejes

Máquinas compuestas en la vida diaria

Fuerzas, movimiento y máquinas simples

Identifying Rocks and Minerals by Properties

How Weathering Breaks Down Rocks

How Erosion Moves Sediment

Creating a Stream Model to Test Erosion

Fossils as Evidence of Past Life

Earth's Surface: Rocks, Weathering, and Fossils

Formas de energía: Cinética, potencial y térmica

Transformación y conservación de la energía

Calor, temperatura y transferencia térmica

La luz: Fuentes naturales y artificiales

Reflexión y refracción de la luz

El sonido: Vibraciones y propagación en ondas

Tono, volumen y eco del sonido

Magnetismo: Polos y campos magnéticos

Electricidad estática y corriente eléctrica

Circuitos eléctricos simples: Componentes y conductores

Energía, luz, sonido y electricidad

Observing Organisms in Terrariums and Aquariums

Identifying Traits Organisms Inherit vs. Learn

Investigating How Adaptations Help Animals Survive

Building Models of Organism Life Cycles

Analyzing How Environment Influences Adaptations

Communicating Findings About Organism Trait Investigations

Organisms: Traits, Adaptations, and Life Cycles

Recognizing Patterns in Moon Phases

Building a Model of Day and Night

How Seasons Change Throughout the Year

Collecting Temperature Data Throughout the Year

Collecting Daylight Data Throughout the Year

How Water Cycles Through Earth's Systems

Sudden Changes to Earth's Surface

Patterns in Space and Earth's Changing Systems

Identifying Living and Nonliving Parts of Ecosystems

Tracing Energy from Sun to Producers to Consumers

Connecting Food Chains into Food Webs

Ecosystems and Energy Flow

How Organisms Adapt to Their Environment

Structure and Function in Animals

Observing Life Cycles of Organisms

How Traits Are Passed from Parent to Offspring

How Organisms Interact in Ecosystems

Using Collecting Nets for Field Sampling

Adaptations, Heredity, and Organism Interactions

OGS.5.SEP.5

Aligned learning resources

Related diagrams