Use the simulation in your science or Physics class to illustrate specific heat capacity between water and metal.
This interactive HTML simulation visually compares how two equal-mass samples (water and a typical metal) respond when heated with the same constant power input (same energy added per second).
Key visual elements:
- Two side-by-side blocks: one representing water (blue, with subtle wave animation) and one representing a metal (grey/silver).
- Each block starts at 20°C with a bottom “heater” that shows flickering flame effect when active.
- A red heat/ temperature-rise bar fills upward from the bottom of each block.
- Large, clear temperature readouts (°C) update in real time.
- A running timer shows total heating time in seconds.
- Minimal text: material labels, “Same power”, Start/Pause/Reset buttons.
What the simulation demonstrates:
- The metal temperature rises much faster and its heat bar fills more quickly.
- Water temperature increases much more slowly (typically ~4–5 times slower under realistic specific heat values: c_water ≈ 4200 J/kg°C vs c_metal ≈ 900 J/kg°C).
- The same amount of thermal energy is added to both every second → the difference in temperature rise is purely due to specific heat capacity (c).
- Higher specific heat capacity means more energy is required to raise the temperature by 1°C.
Educational takeaway (shown silently through behaviour):
- Water has a high specific heat capacity → it absorbs a lot of heat with only a small temperature change (good thermal regulator / heat sink).
- Metals have low specific heat capacity → temperature changes rapidly with the same heat input.
Controls:
- Start/Pause heating (button changes color and text)
- Reset everything to 20°C and 0 seconds
- Fully mobile-responsive layout (blocks stack vertically on small screens)
The simulation uses pure HTML, CSS, and lightweight JavaScript — no external libraries — and clearly illustrates why specific heat capacity matters in everyday phenomena (cooking, car radiators, climate, thermal mass in buildings, etc.) without needing any explanatory text on screen.