BMI Interactive Assessment: Health Education Tool

Print

From Workshop Prototype to Pedagogical Tool: Iterating the BMI Interactive Assessment with Claude

by lookang | March 2026

https://youtu.be/jkxynGEFjHE 

It Started at an SLS Cookout

A few weeks ago, I was at an SLS Cookout Workshop — one of those energetic, slightly chaotic sessions where teachers and edtech folk sit together and just build things. The brief was simple: use Claude 4 to create something useful for learning. A group of us put together a single-page HTML BMI simulator in under an hour. Sliders for mass and height, a live calculation, a colour-coded BMI category label, a basic SVG stick figure, and a reference table on the right. Functional. Clean. Done.
 

 

And then I took it home.

The Itch I Could Not Leave Alone

The prototype worked, but when I imagined a student sitting with it, I kept seeing the same problem: it answers the question without teaching the thinking. A student drags the sliders, sees a number, reads a label. But do they understand why height has a bigger effect on BMI than mass? Do they know what to aim for? Do they feel anything when they get it right?

Over the following sessions — with Claude Sonnet 4.6 as my co-editor — I made fourteen distinct improvements. Each one addressed a specific pedagogical gap. Here is how that journey unfolded.

Making the Purpose Visible Before the First Interaction

The first thing I added was a dismissible Learning Goals banner at the top: "Understand the BMI formula · Discover why height has a bigger effect than mass · Identify healthy weight ranges."
 


It sounds trivial, but it is not. Research on cognitive load consistently shows that students engage more deeply when they know the purpose of an activity before they start. The banner gives them a lens. It was three lines of HTML and a CSS gradient, and it changed the character of the tool immediately.

The Formula Should Show Its Work

The original formula display read: BMI = mass ÷ (height × height) = result. All on one line. Perfectly correct, pedagogically inert.

I split it into two colour-coded lines:

This single change makes the intermediate step visible. Students can now see that height gets squared before division happens. That is the insight the whole tool is supposed to build — that a small increase in height reduces BMI more than a comparable increase in mass raises it, because h² grows faster. If the formula does not show that step, the formula is not teaching anything it could not do on a worksheet.

The Slider Green Zone: "Aim for Green"

One of my favourite additions was the dynamic healthy-range overlay on both sliders
 


. Using CSS linear-gradient, a green zone appears on the mass slider showing the healthy mass range at the current height, and on the height slider showing the range at the current mass. Both zones update live as the other slider moves.

Before this, a student had no visual anchor. Now there is a clear affordance: aim for the green. No calculation needed to know you are heading in the right direction. This is especially useful for students who struggle with the formula but can reason spatially. Differentiation without extra cognitive load.

The Figure Scene: Wall, Floor, and Ruler

The original SVG figure was a stick figure. It scaled, roughly, with slider values. I wanted something better — not for aesthetics, but for one specific reason: I wanted students to see height and mass as independent variables.

After a realism pass (oval head, torso, arms, legs, clothing), I rebuilt the entire scene.
 


The figure now stands against a beige wall with a wooden floor line. A ruler on the right wall shows tick marks at 1.3 m, 1.5 m, 1.7 m, and 1.9 m. A red dashed indicator moves to the exact current height with a label.

Critically: the figure grows upward only when height changes, anchored at the floor. It widens only when mass changes. Students who drag the height slider and watch the figure rise against the ruler — while the width stays constant — are building an intuition that no paragraph of text could deliver. That is the pedagogical payoff. The ruler is not decoration. It is the lesson.

Closing the Loop: Hints, Feedback, and Q&A Reveals

Several additions were about closing the learning loop — the gap between interaction and understanding.

The "Show Hints" button became contextual.
 


If your BMI is in the underweight range, hints tell you what minimum mass you need at your current height. If you are healthy, hints challenge you to find the tipping point. If overweight, hints explain the squared effect and give you a target range. These are not generic tips — they are calculated from the live values.

The three Explore Questions gained answer reveal toggles.
 


Students attempt the question, then tap "▶ Answer" for a concise explanation. This is the simplest possible version of formative self-assessment, and it works because it respects student autonomy — they choose when to look.

When a student transitions into the healthy BMI range, a small badge appears: "🎉 Healthy BMI! Great combination." It fades after 2.5 seconds. Positive reinforcement does not need to be elaborate. It just needs to be present.

The Picture Quiz Tab and the Teacher Dashboard

The reference panel was split into two tabs. The Guide tab kept the existing content. The Quiz tab added three questions with inline SVG illustrations:

That third question is the one I am most proud of. It turns the whole tool into the answer mechanism. The student cannot fake it.

The Teacher Analytics Dashboard was the final addition — a modal triggered by a small 📊 button.
 


It reads from localStorage and shows: quiz score, slider interaction count, preset button uses, BMI categories explored, time on task, and sessions. No backend. No login. No privacy concerns. Just a teacher leaning over a student's laptop during a lesson and seeing, in ten seconds, whether that student has been exploring or just sitting on one value.

What I Learned About Iterative AI-Assisted Design

Working with Claude 4 at the workshop, and then Claude Sonnet 4.6 for the refinements, reinforced something I have come to believe strongly: the AI does not know your pedagogy — you do. What Claude provided was speed and fluency in implementation. What I provided was the sequence of decisions about what mattered and why.

Machine Learning & Artificial Intelligence

Every one of the fourteen changes was grounded in a specific question: What does a student need to understand that they cannot get right now? The green slider zones came from watching students drift aimlessly. The two-line formula came from realising the original one-liner hid the most important step. The ruler scene came from wanting to make "independent variable" a thing you see, not just a phrase you copy from a slide.

The tool that came out of the SLS Cookout was already good. The tool after fourteen iterations is something I would actually deploy in a lesson.

Call to Action

If you are building interactive simulations — with AI or without — I encourage you to try this: after your first working version, sit down and ask "what does this still not teach?" Then fix that one thing. Then ask again.

The SLS Cookout format is a great start. The iteration after the workshop is where the real learning design happens — for the teacher, and eventually for the student.

The full HTML file is available at the link in the footer of the simulation. If you remix it, I would love to hear what you changed and why. 

lookang is an educational technologist and physics teacher based in Singapore. He blogs about open-source simulations, AI-assisted lesson design, and making physics intuitive.

 


BMI Interactive Assessment

BMI Interactive Assessment is an engaging health education tool that helps students understand Body Mass Index (BMI) and how it relates to healthy body weight. Through interactive sliders and immediate visual feedback, students explore how changes in height and mass affect BMI values and weight categories.

🎯 Learning Experience

Students actively manipulate height and mass to observe real-time changes in BMI. This hands-on exploration builds intuition about mathematical relationships while connecting calculations to meaningful health contexts.

🧩 Key Features

Interactive Sliders

Real-Time BMI Calculation

Colour-Coded BMI Categories

BMI results are clearly classified using colour cues:

This visual feedback helps students quickly interpret outcomes.

Visual Body Representation

BMI Guide Panel

Exploration Prompts

Built-in inquiry questions guide deeper thinking:

Support & Reset Features

🎓 Educational Value

This interactive supports learning in Health Education, Physical Education, and Science by helping students understand that:

Students also develop:

The interactive design encourages curiosity, experimentation, and reflection.

▶️ Try It

🛠️ Credits

Created by participants of the SLS Cookout Workshop, using Claude 4.
For more AI-generated educational simulations, visit:
https://sg.iwant2study.org/ospsg/index.php/ai-prompt-library/1366-prompt-library-for-educational-simulations

1 1 1 1 1 1 1 1 1 1 Rating 0.00 (0 Votes)
Details
Parent Category: Interactive Resources
Category: Sciences
Hits: 483