🌱 Building a Plant Water Absorption Virtual Lab Using Claude 4
Creating interactive science simulations once required deep coding knowledge, but with tools like Claude 4, even complex virtual labs are now more accessible than ever. In this blog post, I’ll walk you through how I designed and built a Plant Water Absorption Virtual Lab — a fully interactive HTML5-based biology simulation — using the powerful AI assistant Claude 4.
|
| p5plantTranspiration2.zip p5plantTranspiration2/ |
 |
| p5plantTranspiration2.zip p5plantTranspiration2/ |
💡 Why This Lab?
This virtual lab was designed to help students explore how different factors affect water absorption in plants. It supports inquiry-based learning and scientific investigations — allowing learners to manipulate variables like:
-
Plant type (small, medium, large)
-
Temperature (10°C to 30°C)
-
Light level (low to high)
-
Initial water volume
-
Experiment duration
All this takes place in a beautiful visual interface, complete with animated water levels, bubbling effects, and a live data chart.
⚙️ How Claude 4 Helped Build This
Using Claude 4, I could focus on the logic and pedagogy of the simulation without worrying about writing every line from scratch. Here’s how Claude 4 accelerated the development:
1. Responsive Layout with HTML/CSS Grid
Claude generated a dual-pane layout: one for the experiment setup and one for the controls. The CSS is clean, responsive, and aesthetically engaging — perfect for students across devices.
2. JavaScript Interactivity and Physics Simulation
Claude wrote modular JavaScript functions to:
-
Animate water absorption over time
-
Simulate varying absorption rates depending on the chosen variables
-
Generate bubbles in the beaker to simulate transpiration
-
Render a live line chart showing water absorbed over time
3. Data Table and Graph Auto-Updates
Each "hour" of simulation logs:
-
The water level
-
The amount of water absorbed
These values are plotted onto a live-updating canvas chart. Claude handled the logic for scaling, axes rendering, and plotting points with precision.
4. Dynamic Conclusion Generation
Claude also helped craft a function that generates a real-time conclusion for each experiment, based on user input and results. This supports critical thinking and reflection — key components of scientific learning.
🎮 Try the Simulation
You can access the simulation here:
🔗 https://sg.iwant2study.org/ospsg/index.php/interactive-resources/biology
Or embed it directly into your LMS like SLS (Singapore’s Student Learning Space) to complement your biology lesson packages.
🧠 What Students Learn
By conducting this virtual experiment, students will:
-
Plan a scientific investigation
-
Control variables and observe effects
-
Collect and interpret data
-
Derive meaningful conclusions using evidence
🛠️ Built With
This simulation was powered by:
-
Claude 4 AI Assistant – for intelligent code generation
-
HTML5 + CSS3 – for structure and style
-
Vanilla JavaScript – for dynamic functionality
-
Canvas API – for drawing real-time charts
-
Responsive Web Design – mobile- and desktop-friendly
🙌 Final Thoughts
Claude 4 didn't just speed up development — it enabled creativity. By guiding the code generation process and adapting Claude’s output iteratively, I could design a rich learning experience that feels alive and intuitive for students.
If you’re an educator, EdTech developer, or just an enthusiast, I encourage you to explore what AI like Claude can do for simulation-based learning. The future of interactive education is already here — and it’s powered by AI.
🔖 Credits
Made by Lookang, using Claude 4
Interactive Biology Resources: iwant2study.org/ospsg
About
[SIMU_DESC]
Sample Learning Goals
[text]
For Teachers
[SIMU_TEACHER]
Software Requirements
[SIMU_SWREQ]
Translation
[text]
Research
[text]
Video
[text]
Credits
[SIMU_CREDITS]
Version:
https://weelookang.blogspot.com/2025/05/building-plant-water-absorption-virtual.html
Other Resources
[text]