5. Use a Loop to Add Shapes to Every Slide

Playback Speed:

In the previous video, you created a loop that stacked 5 shapes on your first slide.

In this video, you will create a second loop that draws the shapes on each slide -- not just the first one -- to build a working progress bar.

To begin, press enter to start a new line after the beginning of your first for loop.

Type the word “for.”

Then, add an open parenthesis.

Next, type: “v-a-r,” “J,” an equals sign, a zero, and a semicolon.

It’s important to use a different variable name in the second loop.

Programmers often use “i” for their first loop and “J” for their second loop.

Now, type “J,” “is less than,” “slides.”

Add a period, and choose length from the menu.

Then, add a semicolon, 2 plus signs, the letter "J", and another open curly brace.

Delete the closing curly brace.

Place your cursor at the end of the line that draws the shape, and close your loop with a closed curly brace.

Remember to match the code you see on screen exactly.

Here’s how the two loops work together in a presentation with 5 slides: The first loop runs 1 time.

Then, the second loop runs 5 times.

The first loop runs a second time.

And the second loop runs 5 more times.

So, in a presentation with 5 slides, you will create twenty-five shapes.

If your presentation had one-hundred slides, you would create one-hundred times one-hundred shapes.

That’s ten thousand shapes!

At a certain point, your computer might time out or even crash before it could draw all of the shapes.

Try out your loops.

Save and run your program.

Then, return to your presentation and see how many shapes you have.

Click and drag to move them around.

Then, remove all of the shapes so you start with an empty slide.

Select all of the shapes.

Then, press delete.

Finally, place the shapes in the correct location for a progress bar.

Replace the zero after slides with an “i.”

Save and run your program.

The program draws 5 shapes on every slide.

However, they are still stacked on top of each other.

To change the left position of the shape, move it from zero to “10 times J.”

An asterisk indicates multiplication.

Save and run your program.

Nice job!

When the loop runs first, "i" is zero, so it places a shape on the first slide.

Then, "J" is zero, so it places a shape at zero position.

Then, "J" is 1, so it places a shape ten pixels away from zero position.

And so on.

Remember, if your code doesn’t work or you get an error message, spend a few minutes troubleshooting.

In the next video, you will add color to the shapes to indicate progress as you move through your presentation.


  1. Program a second “for” loop.
  2. Save and run your program.
  3. Troubleshoot any errors.