By Dominic
Design Brief: BMI Interactive Assessment for Lower Progress Secondary 3 Students

Target Audience: Secondary 3 students who need additional scaffolding and support (Lower Progress learners)

Learning Focus:

Calculate Body Mass Index using the formula: BMI = mass (kg) / [height (m) × height (m)]
Interpret BMI results to determine if values fall within healthy ranges
Understand the relationship between mass, height, and BMI
Observe how changes in mass and height affect BMI calculations
Assessment Type: Interactive variable manipulation - students adjust mass and height using sliders and observe real-time BMI calculations and visual feedback

Core Interface Elements:

1. Input Controls:

Mass Slider: Range 30-120 kg, increments of 1 kg
Large, easy-to-manipulate slider with clear labels
Current value displayed prominently next to slider
Visual markings at regular intervals (every 10 kg)
Height Slider: Range 1.3-2.0 m, increments of 0.01 m
Large, easy-to-manipulate slider with clear labels
Current value displayed prominently next to slider
Optional: Also show height in cm for easier understanding (e.g., "1.65 m (165 cm)")
2. Output Display:

BMI Value Text Box:
Large, clearly visible output showing calculated BMI
Rounded to 1 decimal place (e.g., "BMI: 22.3")
Auto-updates immediately when sliders are adjusted
Color-coded background based on BMI category (see below)
BMI Category Indicator:
Clear text label showing interpretation:
Underweight (BMI < 18.5) - Blue
Healthy weight (BMI 18.5-24.9) - Green
Overweight (BMI 25-29.9) - Orange
Obese (BMI ≥ 30) - Red
Simple, supportive language appropriate for students
3. Visual Human Body Representation:

Anatomically Accurate Human Figure:
Displays a human boy character that updates in real-time
CRITICAL REQUIREMENT: Body must change proportionally and anatomically correctly
Body Scaling Requirements:

Height changes: Entire body scales vertically proportionally
All body segments maintain correct ratios (head:torso:legs approximately 1:3:4)
Joints (neck, shoulders, elbows, hips, knees, ankles) remain properly aligned
Limbs lengthen/shorten smoothly without distortion
Head size adjusts subtly with height (not just stretched)
Mass changes: Body width and composition change realistically
Body mass distributed naturally (torso, limbs, face all adjust together)
No "balloon effect" - body thickens proportionally, not uniformly
Limbs become thicker/thinner in proportion to torso
Face reflects body composition changes (fuller/leaner appropriately)
Natural body contours maintained (shoulders, waist, hips move together)
Combined height + mass changes:
Body maintains anatomical integrity at all combinations
Tall + light = lean, elongated but proportional figure
Short + heavy = stockier, fuller but proportional figure
All intermediate combinations appear natural and realistic
No disjointed appearance, stretched limbs, or disconnected body parts
Smooth, gradual transitions when sliders are adjusted
Technical Implementation for Body Accuracy:

Use proportional scaling algorithms, not simple image stretching
Multiple body segments that scale independently but harmoniously
Blend between pre-designed body types rather than distorting single image
Ensure all body parts connected properly at joints regardless of settings
Test extreme values (very tall/light, very short/heavy) for realism
4. Scaffolding Features for Lower Progress Learners:

Reference Guide Panel:
BMI categories chart always visible
Simple explanation: "BMI helps us understand if our body weight is healthy for our height"
Visual color-coding matching the output display
Guided Questions/Prompts:
"What happens to BMI when you increase mass but keep height the same?"
"How does height affect BMI?"
"Try to find a combination that gives a healthy BMI"
Formula Display:
BMI formula shown with current values substituted
Example: "BMI = 60 ÷ (1.65 × 1.65) = 22.0"
Helps students connect the calculation to the result
Hints/Tips Button:
Provides guidance like "Try increasing height and see what happens"
Explains: "Taller people can have higher mass and still be healthy"
Reset Button:
Returns to default values (mass: 60 kg, height: 1.65 m)
Allows students to start fresh without confusion
5. Assessment Integration:

Exploration Phase:
Students freely adjust sliders to explore relationships
No pressure or scoring during exploration
Encourages discovery learning
Challenge Tasks: (Optional, can be toggled by teacher)
"Find 3 different combinations that result in healthy BMI"
"What mass gives BMI = 25 at height 1.70 m?"
"Person A is 1.5 m tall with BMI 20. What is their mass?"
Reflection Prompts:
"What did you notice about BMI when height increases?"
"Why might two people with the same BMI look different?"
Visual Design:

Clean, uncluttered interface
Large, readable fonts (minimum 16pt)
High contrast for visibility
Sliders positioned logically (left side or top)
Human figure centered and prominent (main focus)
BMI output clearly visible (top right or bottom center)
Color-coding consistent throughout
Accessibility Features:

Keyboard navigation support for sliders
Clear labels on all interactive elements
Text-to-speech compatible
Works on tablets and computers
No time pressure
Technical Specifications:

Real-time calculation and update (no "calculate" button needed)
Smooth animations for body changes (not jarring jumps)
Responsive design that works on different screen sizes
Browser-based, no installation required
Learning Objectives Assessment: Students successfully demonstrate understanding by:

Correctly identifying when BMI values are in healthy/unhealthy ranges
Explaining that increasing mass raises BMI (when height constant)
Explaining that increasing height lowers BMI (when mass constant)
Finding multiple mass/height combinations that achieve healthy BMI
Understanding that BMI is a ratio, not just about weight alone
Success Criteria for Visual Body Representation: ✓ Body appears as a cohesive, realistic human figure at all slider settings ✓ No stretched, compressed, or distorted body parts ✓ All joints properly aligned and connected ✓ Proportional changes that reflect real human body variation ✓ Smooth transitions without jarring jumps or disconnected segments ✓ Body reflects both taller/shorter AND heavier/lighter variations accurately