For-Loop Stepper¶
Run the For-Loop Stepper MicroSim Fullscreen
Edit in the p5.js Editor
About This MicroSim¶
The static "loop trip table" becomes a machine you can crank by hand. Each
Next Step click advances one statement, so students see the execution arrow
jump back to the for line at the start of every trip — the exact moment
i takes its next value. In the Draw Square preset a mini turtle draws one
side per trip, tying loop mechanics directly to the chapter's square program.
Learning objective: The student will be able to trace a for loop, stating the value of the loop variable on each trip and predicting the total number of repetitions.
- Bloom's Taxonomy (2001): Understand — trace, explain, predict (the Running Total preset stretches toward Apply)
- Interaction pattern: statement-level step-through; optional slow auto-play that starts paused
How to Use¶
- Predict: what will
ibe on the first trip? How many trips will happen? - Click Next Step repeatedly. Watch the
ibadge and the trip counter, and notice the arrow jumping back to the top. - Use Auto-play to watch a full run at reading speed; click Pause any time.
- Try Countdown (why does it never print 3?) and Running Total
(watch the accumulator box grow by
ieach trip).
Iframe Embed Code¶
You can add this MicroSim to any web page by adding this to your HTML:
1 2 3 4 | |
Lesson Plan¶
Grade Level¶
Upper elementary and middle school (ages 10-14), Chapter 7 (For Loops and Drawing Shapes)
Duration¶
10-15 minutes
Prerequisites¶
- Basic turtle commands (Chapter 5)
- Variables (Chapter 3)
Activities¶
- Predict (3 min): "What is
ion the first trip? On the last? How many sides get drawn?" - Crank the machine (5 min): Step through Draw Square. Each time the
arrow lands on the
forline, students call out the new value ofi. - Transfer (5 min): Switch to Countdown. Ask: "range(3) — why does 3 never print?" Then Running Total: "Why does total grow by a different amount each trip?"
Assessment¶
- Student states the values
itakes forrange(4)without running it - Student can point to the exact step where the loop decides to stop
- Student predicts the final total for
range(5)accumulation (10)
References¶
- Python Tutorial — for Statements — official documentation
- p5.js — the JavaScript library used to build this MicroSim