Skip to content

How a for Loop Iterates Over a List

Run the How a for Loop Iterates Over a List MicroSim Fullscreen

About This MicroSim

A p5.js MicroSim showing a list of three colored boxes labeled (255,0,0), (0,255,0), (0,0,255). A "loop cursor" arrow moves from box to box as the user clicks a Next Step button.

Learning objective: Remembering - the student can recall that a for loop assigns each list item to the loop variable in order.

How to Use

Use the on-screen controls - buttons, sliders, dropdowns, and clickable regions - to explore the idea. Every change updates the canvas immediately, so you can predict an outcome and then check it.

Iframe Embed Code

You can place this MicroSim on any web page by adding the following HTML:

<iframe src="https://dmccreary.github.io/moving-rainbow/sims/for-loop-list-iteration/main.html"
        height="282px"
        width="100%"
        scrolling="no"></iframe>

Lesson Plan

Grade Level

Grades 6-12

Duration

10-15 minutes

Learning Objective

Remembering - the student can recall that a for loop assigns each list item to the loop variable in order.

Activities

  1. Explore (5 min): Open the MicroSim and try every control. Notice what changes on screen.
  2. Predict (5 min): Before each change, predict what will happen, then test your prediction.
  3. Discuss (5 min): Explain the idea in your own words and connect it to the LED code in Chapter 4.

Assessment

Ask students to describe, in one or two sentences, the relationship the MicroSim demonstrates and how it shows up when programming the LED strip.

References

  1. Chapter 4: Python Control Flow, Loops, and Error Handling - the chapter where this MicroSim is used.
  2. Moving Rainbow Intelligent Textbook - the full course this MicroSim belongs to.
  3. MicroSims Reference - the standards behind these interactive simulations.

Original Specification

Full specification used to generate this MicroSim 
Type: interactive-infographic
**sim-id:** for-loop-list-iteration
**Library:** p5.js
**Status:** Specified

A p5.js MicroSim showing a list of three colored boxes labeled `(255,0,0)`, `(0,255,0)`, `(0,0,255)`. A "loop cursor" arrow moves from box to box as the user clicks a **Next Step** button. Each step highlights the current item, shows the value of the loop variable `color`, and displays the iteration number (Iteration 1 of 3, etc.). A **Reset** button returns the arrow to the start. A label below reads: "The for loop gives `color` a new value each time." Canvas: 600 × 280 px. Responds to window resize.

Learning objective: Remembering — the student can recall that a for loop assigns each list item to the loop variable in order.