September 22, 2026

Lab Mitigasi Bencana — Disaster Mitigation Lab.

Frontend
HTML CSS JavaScript Canvas SVG

A virtual lab where students choose buildings and terrain, set an earthquake's magnitude, watch the impact in real time, then apply mitigation measures and compare the results.

#education #simulation #disastermitigation #earthquake #virtuallab #festivalbiruputih
Lab Mitigasi Bencana — Disaster Mitigation Lab

Description

Lab Mitigasi Bencana is a virtual laboratory for disaster simulation. Students choose a building type and region, set an earthquake’s magnitude, observe the damage in real time, then switch on mitigation measures and run the scenario again to compare the before-and-after outcome — all tied to Indonesia’s position on the Pacific Ring of Fire.

Background

This was built as an entry in the Virtual Lab (Lab Maya) category of Festival Biru Putih 2026 , organized by the Directorate of Junior High Schools, Ministry of Primary and Secondary Education (Kemendikdasmen). It targets IPS (Social Studies – Geography), Grade VIII, Phase D, with the learning objective explaining the potential for natural disasters and reflecting on mitigation efforts that support the SDGs.

Goal

After experimenting, students should be able to explain why Indonesia is earthquake-prone, predict the impact of an earthquake on buildings and communities, and evaluate how effective different mitigation measures are.

Features

  • Cover page, step-by-step guide, and a “Step x of 4” progress indicator where every stage can be revisited without restarting.
  • Set variables: building type (wood, brick, reinforced concrete), soil/region type, and a magnitude slider.
  • Run the simulation: real-time shaking, damage level, and casualty/loss indicators with visual and text feedback.
  • Apply mitigation: earthquake-resistant structures, evacuation routes, and emergency bags, then re-run and compare scenarios side by side.
  • Multiple disaster scenes (earthquake, tsunami, volcano, flood, fire) with illustrated backgrounds.
  • Application questions and reflection (e.g. “recommend mitigation for your school”), with a summary linked to SDG 11 – Sustainable Cities and Communities.

Technologies

  • Vanilla JavaScript, HTML5, and CSS in a single-page index.html.
  • Canvas and inline SVG for buildings, seismic waves, and the magnitude meter.
  • Local SVG/JPG assets and a separate question bank (soal.js).

Technical Decisions

The simulation follows simplified but physically sound rules — higher magnitude means more energy and damage, reinforced concrete and earthquake-resistant design reduce damage, and soft soil amplifies shaking — simplifying without misleading. The competition rules also required a single offline SPA with no external assets, a 16:9 responsive layout, and responses under two seconds for every interaction.

What I Learned

Building a science simulation for students meant balancing accuracy against clarity: the model had to be simple enough to explore freely, yet honest enough that the conclusions students draw are correct.

Notes

This is a competition entry, so the source and a live demo are not published yet. The submission package also includes a user guide with a technical explanation of the simulation and a demo video.

Hey! I’m Fanny, the software engineer tending to this digital garden. You can read more about me, or subscribe by email.

Comments