1. Reference Guide

Key Vocabulary

Term Definition Example
Iteration One pass through the body of a loop i goes 1, 2, 3…
Initialization Sets the counter once, before the loop starts let i = 0
Condition Checked before each pass. false ends the loop i < 5
Increment Updates the counter after each pass i++ or i += 2
Infinite loop A loop whose condition never becomes false while (true) { }
Key The name of a property in an object name in {name: "Casey"}

Loop Structure

Every loop is built from the same three parts.

Part What it is Counting example
Start Where the counter begins let i = 1
Condition Checked before every pass i <= 5
Change Moves the counter toward the end i++
Body The code that repeats console.log(i)

Loop Grammar

Loop What it does
for (let i = 0; i < 5; i++) Repeats a set number of times. Start, condition, and change sit on one line
for (let i = 0; i < arr.length; i++) Visits every item in an array by index
for (let key in obj) Visits every key of an object
while (condition) Repeats while the condition is true. The start goes before it and the change goes inside
i += 2 Counts by 2s
i-- Counts down

Picking a Loop

  • Repeat a set number of times -> for
  • Go through every item in an array -> for with i < array.length
  • Go through every key of an object -> for...in
  • Repeat until something changes -> while

Try using some of these

Use the runners in the Code Examples section. Try these one at a time, running the cell after each:

  1. Change i <= 5 to i <= 10.
  2. Change i++ to i += 2.
  3. Make the loop count down with i--.
  4. Add two more video games to the array.
  5. Change the object values to your own info.

2. LxD Cycle Process

Empathize: Students copy and paste the same line five times instead of writing a loop. When they do write one, they get stuck when it runs one time too many or too few, or never stops. Many cannot say why a loop prints 0 to 4 instead of 1 to 5, so they guess at the condition until the output looks right. This is not new: a classic study of beginners learning BASIC found that even students who passed mastery tests on writing programs still held a wide range of wrong mental models for how loop statements actually execute (Bayman & Mayer, 1983).

Define:

  • POV: JavaScript students need to see a loop as “start, check, change” because every loop, for or while, is built from those three parts, and a missing part causes the bug.
  • Learning Goal: Students will write for, for...in, and while loops, loop over arrays and objects, and control where a loop starts, where it stops, and how it counts.

Ideate:

  • HMW Question: How might we get students to ask “when does this stop?” before they run a loop?
  • HMW Question: How might we show that a for loop and a while loop are the same idea written two ways?
  • Activity: Fix a broken loop, loop over video games and personal info, grow a vine with a while loop, then finish a sum loop that checks itself.

Prototype:

  • A reference guide, five live code runners, two in-class popcorn hacks, an MCQ knowledge check, and a homework hack that checks itself with PASS/FIX lines.
  • Students revise their loop after reading the check output instead of after a grade comes back.
  • Excellence means explaining why a loop stops, not only getting the right number.

Test:

  • Ask peers to finish the popcorn hacks without extra explanation.
  • Watch whether they set the condition on purpose or guess until the output looks right.
  • Compare this lesson with another posted lesson on the same site.
  • Revise any step or rubric line that did not guide students clearly.
  • On submission, collect evidence from the check output, the MCQ score line, and the published homework page.
  • After teaching and grading, come back and revise the lesson to close the teaching cycle.

3. CSSE Course Requirements

CSSE (Computer Science and Software Engineering) is our school’s own course, not a College Board exam course, so there is no course and exam description to quote from. Instead, this lesson lines up with the course’s own Sprint 2 goals, which list “control structures” among the core JavaScript fundamentals every student teaches and is taught (Open Coding Society, 2026, _data/csse.yml, Sprint2).

How this lesson matches: iteration, the for loop, the while loop, and for...in, is a control structure. Each loop in this lesson repeats a block of code a set number of times or until a condition is met, which is the fundamental this sprint asks every student to both learn and teach. Changing the start, condition, or change and running the cell again is a small pass of testing and refinement, matching Sprint 2’s “Adjust Plans” and “Peer Feedback” goals.

4. Lesson Plan

Learning Objective: Use iteration to repeat code, and choose between a for loop and a while loop.

Success Criteria: You meet this goal when you can do all four of these. Each one is practiced in a task on this page and is worth points in the grading plan.

You can… Where you practice it Where it is graded
Name the start, condition, and change of a loop and predict how many times it runs Tech Talk, Example A MCQ
Change a loop to count by 2s or count down Example D, Popcorn Hack 1 and 2 Popcorn 1, Popcorn 2
Loop through an array or an object Examples B and C MCQ
Write a loop with n in the condition and no function Homework Hack Homework loop, Homework sum

Tech Talk (5 minutes)

An iteration repeats a block of code. Instead of writing console.log five times, you write it once inside a loop.

  • The Rule: Every loop needs a start, a condition, and a change.
  • Do this: for (let i = 1; i <= 5; i++) { console.log(i); }
  • Don’t do this: console.log(1); console.log(2); console.log(3); console.log(4); console.log(5);

Why? One loop handles 5 lines or 5,000, and you change one number to change how many times it runs.

Code Runner Challenge

Run the loop, then fix the syntax error

View IPYNB Source 
for (let i = 1; i <= 5; i++) {   // start; condition; change
    console.log(i);
}

let count = 1;                   // start
while (count <= 5) {             // condition
    console.log(count);
    count++;                     // change
}
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Both loops print 1 to 5. Use for when you know how many times to repeat, and while when you only know the rule for stopping.

Remember: if the change is missing, the condition never becomes false and you get an infinite loop.

5. Code Examples

A. Simple: The Three Parts of a for Loop

Code Runner Challenge

Run the loop, then add two of your own video games to the array and run it again

View IPYNB Source 
for (initialization; condition; increment) {
    // Code to execute
}
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...
  • Initialization: sets up a counter variable and runs once at the beginning.
  • Condition: checked before each iteration. If true the loop continues; if false it ends.
  • Increment: updates the counter after each iteration.

Try it: this loop has a syntax error. Find it, fix it, and press Run.

Code Runner Challenge

Run the loop, then change the values to your personal info

View IPYNB Source 
%%js
// CODE_RUNNER: Run the loop, then fix the syntax error

for (let i = 1, i <= 5; i++) {
    console.log(i);
}
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

B. Intermediate: Arrays

A for loop visits every element of an array using the index i. The condition i < videoGames.length stops the loop after the last item.

Try it: add two of your own video games to the array and run it again.

Code Runner Challenge

Run the loop, then change the starting value, the condition, and the increment

View IPYNB Source 
%%js
// CODE_RUNNER: Run the loop, then add two of your own video games to the array and run it again

let videoGames = ["Minecraft", "Roblox", "Fortnite"];

for (let i = 0; i < videoGames.length; i++) {
    console.log(videoGames[i]);
}
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

C. Intermediate: Objects

for...in goes over each key of an object, and personInfo[key] gets its value.

Try it: change the values to your personal info and run it again.

Code Runner Challenge

Run the loop to see the growing vine, then make it shrink for a challenge

View IPYNB Source 
%%js
// CODE_RUNNER: Run the loop, then change the values to your personal info

const personInfo = { // Define an object
    name: "Casey",
    age: 14,
    city: "San Diego",
    occupation: "Del Norte High School Student"
};

for (let key in personInfo) { // Notice we are using for... in... instead of for... of...
    console.log(key + ": " + personInfo[key]);
}
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

D. Simple: while Loops

A while loop repeats a block of code as long as a condition is true. It is best when you don’t know how many times something should run, only the rule for when to stop.

A while loop always includes:

  • A starting value
  • A condition checked before each pass
  • A change inside the loop that eventually makes the condition false

If the condition never becomes false, the loop runs forever.

Try it: change the starting value, the condition, and the increment (e.g., counter += 2), then make it count down.

Code Runner Challenge

Finish the countdown loop, then run it

View IPYNB Source 
%%js
// CODE_RUNNER: Run the loop, then change the starting value, the condition, and the increment

let counter = 0;

while (counter < 5) {
  console.log("The counter is:", counter);
  counter += 1;
}
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

E. Complex: Growing Vine

Each pass makes the vine one 🌿 longer, so the loop variable controls how much is printed.

Try it: change the maximum length, replace the emoji, grow by 2, then make the vine shrink instead of grow.

Code Runner Challenge

Finish the for loop so it prints 2, 4, 6, ... 20

View IPYNB Source 
%%js
// CODE_RUNNER: Run the loop to see the growing vine, then make it shrink for a challenge

let length = 1;

while (length <= 10) {
  console.log("🌿".repeat(length));
  length += 1;
}
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

6. Hacks & Practice Tasks

Submit Details

  1. Create a notebook in your portfolio homework area: _notebooks/homework.
  2. Add a raw cell at the top with the frontmatter below.
  3. Add code cells for the Popcorn Hacks and the Homework Hack.
  4. Keep %%js and the CODE_RUNNER comment in each code cell.
  5. Run each cell and verify the output is showing before submitting.

Code Runner Challenge

Finish the loop to add up 1 to n, then run it. Keep going until every check says PASS

View IPYNB Source 
---
layout: post
codemirror: true
title: Iterations HW
categories: [JavaScript]
lesson_language: JavaScript
lesson_topic: Iterations HW
lesson_part: interactive
lesson_type: lesson
permalink: /js/iterations-hw
author: githubID
---
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

How to Submit

This lesson is submitted as a link to your own published portfolio/blog page.

  • Commit and push the notebook so the page builds.
  • Open the published page in your browser and confirm every cell shows its output.
  • Copy the full published URL, not the GitHub editor or repository URL.
  • Paste that URL into the built-in Link Submission form directly below this lesson.
  • In the description box, paste this:
Lesson: JavaScript Iterations
MCQ Iterations: <paste the copied result line, such as 4/4 | answers: B,B,C,C>
Popcorn 1: countdown from 10 to 1 then Liftoff (yes/no)
Popcorn 2: even numbers 2 to 20 with a for loop (yes/no)
Homework: every check shows PASS (yes/no)

Submission Safety Rules (Read First)

  • No functions in the homework. Use a loop with n in the condition.
  • Use your own values, not the sample answer.
  • Keep %%js and the CODE_RUNNER comment line in each notebook submission cell.
  • Include your MCQ score line.
  • Use ## headings or smaller on your page.

Popcorn Hack 1 (In-Class): Countdown

2-minute challenge: write a loop that counts down from 10 to 1, then prints “Liftoff!” once.

Goal: show that you can start high, stop on purpose, and change the counter in the right direction.

Hint: start at 10, keep going while the counter is at least 1, and subtract 1 each pass.

Show answer while (countdown >= 1) { console.log(countdown); countdown--; } 
%%js
// CODE_RUNNER: Finish the countdown loop, then run it

let countdown = 10;

// Write your while loop here


console.log("Liftoff!");

Popcorn Hack 2 (In-Class): Count by 2s

Task: Print the even numbers from 2 to 20 with a for loop.

Goal: show that you can pick the start, condition, and change on purpose.

Hint: the change is not i++. It adds 2 each pass.

Show answer for (let i = 2; i <= 20; i += 2) { console.log(i); } 
%%js
// CODE_RUNNER: Finish the for loop so it prints 2, 4, 6, ... 20

for (let i = 0; i < 0; i++) {
    console.log(i);
}

MCQ Check

Goal: check that you can read a loop before you write one. 4 questions, one at a time. Answer, check, then go to the next one. At the end, copy the score line into your submission notes.

Homework Hack: Challenge Iteration

Task: Use a loop to calculate the sum of all the numbers from 1 to n. Test it with n = 5, then change n to a value of your choice and run it again.

Do not use a function. Set n as a variable and use a loop to add each number to sum.

Goal: this is the whole lesson in one task. You pick the loop, set the start, put n in the condition, and change the counter so the loop stops.

Hint: use n in your condition. For n = 5 the answer is 1 + 2 + 3 + 4 + 5 = 15.

Edit the code and press Run. The check lines at the bottom mark each rule PASS or FIX. Keep going until every line says PASS.

%%js
// CODE_RUNNER: Finish the loop to add up 1 to n, then run it. Keep going until every check says PASS

let n = 5;
let sum = 0;

// Write your loop here


// ---- You do not need to change anything below this line ----
console.log("The sum of 1 to " + n + " is " + sum);
console.log((sum === n * (n + 1) / 2 ? "PASS" : "FIX") + "  sum matches the formula n * (n + 1) / 2 = " + n * (n + 1) / 2);
console.log((n !== 5 ? "PASS" : "FIX") + "  n changed from 5 to a value of your choice");

Grading Plan (1 Point Total)

Part Points What earns the points
Popcorn 1 0.1 The countdown prints 10 to 1, then “Liftoff!” once.
Popcorn 2 0.1 A for loop prints the even numbers 2 to 20.
MCQ 0.2 4 correct. 0.15 for 3, 0.1 if every question was answered.
Homework: loop 0.3 Uses a for or while loop with n in the condition, and no function.
Homework: sum 0.3 The check lines all show PASS, for n = 5 and for your own n.
Total 1.0  

Quick Validation Checklist

  • No functions in the homework.
  • The loop changes its counter so it stops.
  • The Homework runner shows PASS on every line.
  • Every cell runs and shows output.
  • MCQ score line is in your submission notes.

7. Lesson Revisions

Revision Made: The first draft of this lesson did not follow the LxD lesson format at all. It was just a frontmatter cell and a stack of loop examples with no Reference Guide, no LxD Cycle Process, no College Board or CSSE requirements section, and no grading plan. After seeing how a properly formatted lesson was laid out, we rebuilt it section by section: added the Reference Guide and moved it to the top, wrote out the LxD Cycle Process with real Empathize and Define notes, added a CSSE Course Requirements section, and split the closing section into separate Lesson Revisions and Feedback Evidence sections.

We also refined the examples themselves. The array example originally used a plain fruits list, which did not connect to anything students actually cared about, so we swapped it for a video games array (Minecraft, Roblox, Fortnite) to make the loop feel more relevant. We rewrote the homework challenge so it no longer used a function, since the lesson is supposed to be entirely about iteration, and a function call was pulling focus away from the loop itself. We also added a self-checking PASS/FIX output to the homework so students get immediate feedback instead of waiting for a grade, and added a second popcorn hack so there is an in-class check for both counting up and counting down.

8. Feedback Evidence

Feedback Received: During our practice run, one peer said the lesson did not look like the other posted lessons on the site and was hard to follow without the usual sections, so it was not clear what to read first or where the homework actually started. A second peer said the fruits example felt disconnected from anything they would actually use loops for, and suggested picking something students would recognize right away, like video games. A third peer pointed out that the original challenge used a function to sum the numbers, which made it feel like a functions lesson wearing an iterations title, and asked whether the loop could stand on its own without it. A fourth peer said they could not tell how many points each part of the homework was worth until they scrolled all the way to the bottom, and asked for the grading plan to be easier to find while working through the hacks.

9. References

Open Coding Society. (2026). CSSE course metadata [_data/csse.yml]. github.com/Open-Coding-Society/pages

Mozilla. (2026). for statement. MDN Web Docs. developer.mozilla.org

Mozilla. (2026). while statement. MDN Web Docs. developer.mozilla.org

Mozilla. (2026). for…in statement. MDN Web Docs. developer.mozilla.org

Bayman, P., & Mayer, R. E. (1983). A diagnosis of beginning programmers’ misconceptions of BASIC programming statements. Communications of the ACM, 26(9), 677–679. doi.org/10.1145/358172.358408

Submit Assignment

Self-Assessment

Rate your work on this assignment, then add a short reflection. All 5 fields are required before you can submit.

Technical Excellence

Rate the technical quality of your work on this assignment — your use of tools, problem-solving, and technical growth.

1 Explore · 2 Understand · 3 Apply · 4 Analyze/Evaluate · 5 Create/Extend
Communication

Rate how clearly you communicated your work and process — explanations, documentation, and collaboration or help-seeking.

1 Beginning · 2 Developing · 3 Consistent · 4 Strong · 5 Model
Work Habits

Rate your work habits on this assignment — time management, persistence, responsibility, and follow-through.

1 Beginning · 2 Developing · 3 Consistent · 4 Strong · 5 Model
AI Orchestration

Rate how effectively you used AI tools to support your work — prompting, verifying, extending, or accelerating your development process.

1 Explore · 2 Understand · 3 Apply · 4 Analyze/Evaluate · 5 Create/Extend

Need to update a submission later? Open the submissions dashboard.