Build a polished, interactive educational web app called “Build-a-Habitat” for elementary students in 4th grade.
GOAL The app should help students understand that organisms depend on environmental conditions and on one another, and that changing one part of an ecosystem can have consequences elsewhere.
This should feel like a small interactive science simulation, not a worksheet or quiz.
TECHNICAL REQUIREMENTS
- Create a self-contained browser-based app that runs locally with no installation, login, API key, backend, or internet connection.
- Prefer a simple structure such as index.html plus CSS and JavaScript.
- Do not use external APIs.
- Make it responsive and attractive on both a classroom projector and student laptop/tablet.
- Use large readable text, strong visual hierarchy, accessible controls, and age-appropriate design.
- Avoid excessive text.
- Include a prominent “Reset Habitat” button.
- Keep code organized and easy for another teacher or developer to modify.
CORE EXPERIENCECreate an illustrated ecosystem scene in which the student can build and change a habitat.
Start with a wetland ecosystem, but design the app so the teacher can easily substitute another ecosystem later.
Include adjustable environmental variables such as:
- rainfall
- temperature
- sunlight
- available water
Include selectable organisms from different roles such as:
- plants/producers
- herbivores
- predators
- decomposers
Students should be able to add or remove organisms and adjust environmental conditions.
After making choices, the student clicks a button labeled:“Run the Habitat”
Simulate several years of ecosystem change.
Show visible changes in:
- plant abundance
- herbivore population
- predator population
- overall ecosystem stability
Use simple, educationally sensible relationships rather than pretending to model ecology precisely.
For example:
- too little water should reduce plant growth
- fewer plants should eventually reduce herbivores
- fewer herbivores should affect predators
- adding too many predators should affect prey
- changing rainfall or temperature should sometimes produce cascading effects
PREDICT → TEST → EXPLAINBefore the simulation runs, ask:“What do you predict will happen?”
Allow the student to select or type a short prediction.
After the simulation:
1. Show what changed visually.
2. Give a concise explanation of WHY the changes occurred.
3. Compare the result with the student’s prediction.
4. Ask one short reflection question such as:
   
   “What would you change next?”
VISUALIZATIONInclude:
- an attractive habitat illustration
- simple animated or visually changing populations
- small population indicators or bars
- a timeline showing Years 1–5
- a clear “Habitat Health” indicator
Do not overwhelm elementary students with numerical precision.
DISCOVERYInclude several optional challenge cards such as:
- “A drought lasts two years.”
- “A new predator arrives.”
- “One plant species disappears.”
- “Rainfall increases.”
- “What happens if there are no decomposers?”
Let students predict before applying the challenge.
TEACHER MODEInclude a small “Teacher Settings” panel that can be opened or collapsed.
Allow the teacher to customize:
- title of the activity
- ecosystem name
- organisms available
- starting environmental conditions
- whether challenge cards are enabled
- difficulty level
- number of simulated years
Put the easily editable classroom content in a clearly labeled configuration section in the code.
PEDAGOGICAL PRINCIPLESDesign the app around:Prediction → experimentation → observation → explanation → revision.
Do not reward random clicking.Do not simply tell students whether they are “right” or “wrong.”Encourage causal reasoning:“When X changed, Y changed because…”
Add a “Explain My Habitat” section at the end where students complete:“I changed ______.”“This caused ______.”“I think this happened because ______.”
POLISHMake this feel like something an excellent elementary science teacher would be excited to put in front of students tomorrow.
Use playful but not childish visuals.Add subtle animation where useful.Include a very short onboarding instruction when the app first opens.
Before finishing:
- run the app
- test all controls
- check for broken states
- verify that the simulation produces understandable cause-and-effect behavior
- make improvements to the interface if anything feels confusing
Finally, create a short README explaining:
1. what students learn,
2. how a teacher can use it in a 20–30 minute lesson,
3. exactly where a teacher can customize the content.