Build a polished interactive high-school STEM web app called “Engineering Design Challenge: Bridge Lab.”
TARGET Grade 10.
GOAL Students should experience engineering as iterative design under constraints.
The core lesson is NOT simply calculating formulas.
Students should:
1. define a design,
2. predict its performance,
3. test it,
4. analyze why it succeeded or failed,
5. revise it,
6. optimize across competing objectives.
TECHNICAL REQUIREMENTS
- Create a self-contained browser-based web application requiring no backend, login, API key, installation, or internet access.
- Prefer index.html plus CSS and JavaScript.
- No external APIs.
- It should run smoothly on common student laptops/Chromebooks.
- Make the interface polished enough to look like an engineering design tool.
- Keep the code modular and clearly commented.
- Put teacher-adjustable assumptions and parameters in an obvious configuration section.
THE DESIGN CHALLENGEDefault scenario:
“A community needs a bridge across a 40-meter span. Your engineering team must design a bridge that safely carries the required load while staying within budget.”
Students should be able to design a simplified bridge by changing variables such as:
- bridge/truss type
- number of structural sections
- material
- beam/member thickness
- amount of reinforcement
- deck material
Possible materials might include:
- wood
- steel
- aluminum
Each should have simplified educational properties such as:
- cost
- mass
- strength
- environmental impact
Do not pretend this simplified model is suitable for real-world structural engineering.
DESIGN DASHBOARDContinuously display estimated:
- total cost
- bridge mass
- estimated load capacity
- safety factor
- material usage
- environmental-impact score
Use intuitive gauges or indicators.
Include clear project constraints such as:Budget: $2,000,000Required load: [teacher configurable]Minimum safety factor: [teacher configurable]
Do not immediately tell students what the optimal design is.
PREDICTIONBefore each test, require the student to predict:
“I think my bridge will:
- fail immediately
- bend significantly
- barely pass
- comfortably pass”
and optionally:“What part of your design do you think is most vulnerable?”
TEST THE BRIDGEInclude a prominent button:
TEST THE BRIDGE
Animate a load such as a truck or series of loads crossing the bridge.
Visually represent stress in structural components.
Show members becoming more stressed as load increases.
If the design fails:
- visibly indicate where the failure began
- stop or animate the failure
- explain the likely reason in age-appropriate engineering language
If it succeeds:
- show how much reserve capacity remains
- do NOT simply say “Perfect”
- encourage optimization:
  
  “Can you meet the same requirements using less material or lower cost?”
RESULT ANALYSISAfter every test, display:
WHAT HAPPENED?WHY?WHAT COULD YOU CHANGE?
Include relevant simplified calculations where appropriate.
Allow an expandable “Show the Math” panel explaining concepts such as:
- force
- tension
- compression
- load
- safety factor
- why geometry matters
Students who are less mathematically advanced should still be able to use the simulation.
More advanced students should be able to inspect the calculations.
DESIGN HISTORYMaintain a table of student attempts:
Design 1 | Cost | Mass | Capacity | Safety Factor | Pass/FailDesign 2 | ...Design 3 | ...
Let students compare iterations.
Highlight improvement rather than simply final performance.
OPTIMIZATION CHALLENGESInclude multiple challenge modes:
1. SAFE AND AFFORDABLEMeet the safety requirement under budget.
2. MINIMUM COSTFind the least expensive design that still satisfies safety constraints.
3. LIGHTWEIGHTMinimize mass while meeting the required load.
4. SUSTAINABILITYBalance cost, safety, and environmental impact.
5. SURPRISE EVENTAfter students finish a design, reveal a new constraint such as:
- material prices increase
- required traffic load increases
- environmental regulations become stricter
- budget falls by 15%
Require redesign.
This should demonstrate that engineering involves tradeoffs and changing constraints.
SCORINGDo not score simply on “strongest bridge.”
Create a multidimensional result showing:
- safety
- cost efficiency
- material efficiency
- environmental impact
Explain that different designs can be defensible depending on the objective.
TEACHER MODEInclude a collapsible Teacher Settings panel.
Teacher should be able to customize:
- title
- scenario
- span
- available materials
- material properties
- budget
- required load
- minimum safety factor
- difficulty
- whether mathematical details are shown
- which challenge modes are active
Include three difficulty presets:
INTRODUCTORYMostly conceptual.
STANDARDIncludes calculations and tradeoffs.
ADVANCEDMore variables, tighter constraints, and more explicit mathematics.
LEARNING REFLECTIONAt the end require students to answer:
“My first design ______.”“I changed ______ because ______.”“The data showed ______.”“My final design improved because ______.”“If the constraint changed to ______, I would ______.”
DESIGN QUALITYUse a clean technical visual aesthetic:
- blueprint/engineering feel
- bridge visualization as the centerpiece
- sliders and selectors around it
- dashboard metrics
- test animation
Avoid making it look like a spreadsheet with decorations.
The bridge itself should visibly respond to design decisions whenever possible.
TESTINGBefore finishing:
- run the complete application
- test every design control
- verify no configuration causes the application to break
- make sure obvious engineering relationships behave sensibly
- verify there are multiple viable solutions
- make sure the cheapest/strongest solution is not trivial
- test all challenge modes
- improve any confusing parts of the UI
Finally, create a README containing:
1. learning objectives,
2. a suggested 40-minute lesson,
3. the simplified engineering assumptions,
4. exactly how teachers can customize the challenge,
5. ideas for adapting the same artifact architecture to other engineering problems.