Skip to content

5. Use a Loop to Add Shapes to Every Slide

Playback speed:

In the previous video, you created a loop that stacked five 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, two plus signs, the letter J, a closed parenthesis, and another open 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 five slides: the first loop runs one time.

Then, the second loop runs five times.

The first loop runs a second time, and the second loop runs five more times, so in a presentation with five 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 in the next video.

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 five 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 ten 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 one, 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.

Now it’s your turn: program a second for loop, save and run your program, and troubleshoot any errors.


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