Overview

Students begin the lesson by discussing the purpose of loops before completing the unplugged activity. This activity involves moving a "robot" around a game board while practicing tracing blocks of code by hand. To conclude, the lesson is wrapped up with a vocabulary discussion and a video.

Goals

Students will be able to:

Purpose

Students are introduced to the concept of loops through a robot maze activity. This unplugged lessons provides students a physical mental model they will be able to use when they start programming with loops in the subsequent lessons.

Resources

Preparation


Teaching Tip: Supplies Substitutions


Getting Started (5 mins)

Distribute: The activity today involves a lot of moving pieces. Take this time at the beginning of class to pass out supplies and pair students.

Per pair of students:

Group: Put students in groups of two.

Activity (30 mins)

Guided Activity: Today's activity introduces students to the concept of loops. As a visual aid, you can use Code.org's presentation slides for Unit 5, Lesson 5: Loops Explore. These slides include animations. The notes below describe when to move to the next slide or click through an animation -- if you aren't using the slides, you can ignore these prompts.

Guided Activity

Slide: Do this: You have one command

Say: Today we are going to explore Loops. You will move a robot around a game board following commands. Here's the first one: MoveForward()

Do This: Place the robot in the center of the bottom row, facing the top row. Use the MoveForward() command to write a program to move the robot to the top row.

Click through animation to reveal the answer.


Slide: This code is repetitive.

Say: This code is repetitive. How can we simplify it? By using a While Loop.


Slide: Here's how it works:

Say: Here's how a While Loop works. While something is true, the code in the while loop runs, over and over until that thing is no longer true. Let's try it together!


Slide: var steps = 0;

Say: Let's run this program together. Set up your board with the robot in the center of the bottom row, facing the top. We are going to run each step of the loop together. First you will try it on your board, and then we will look at the answers together.

integer steps = 0

repeat while steps < 4
    MoveForward()
    steps = steps + 1
end

Slide: Round 1

Say: Read the code with your partner and complete the first round of the loop. You may want to keep track of the value in the variable using a note or scrap of paper.

Click through for animation to view the answer after students have had a chance to follow the code on their own board. Discuss each part of the code as it is running.


Slide: Round 2

Say: Let's continue on with the second round. You do it first.

Click through for animation to view the answer after students have had a chance to follow the code on their own board. Discuss each part of the code as it is running.


Slide: Round 3

Say: Now on to the third round. You do it first.

Click through for animation to view the answer after students have had a chance to follow the code on their own board. Discuss each part of the code as it is running.


Slide: Round 4

Say: Time for the fourth round. You do it first.

Click through for animation to view the answer after students have had a chance to follow the code on their own board. Discuss each part of the code as it is running.


Slide: Round 5

Say: What happens here? Discuss with your partner.

Click through for animation to view the answer after students have had a chance to follow the code on their own board. Discuss each part of the code as it is running. The main thing to point out here is that the loop ends because the Boolean expression evaluates to false.


Slide: var steps = 0;

Do This: Put the robot on the bottom row in the center column, facing upwards. With your partner, run this program on your board. What happens?

integer steps = 0

repeat while steps < 4
    MoveForward()
end

Click for animation.

Discuss: Why does the robot run off the board?

This is an example of an infinite loop. The program never ends because steps will always be less than 4.


Slide: Do This: You have a new command.

Say: You have a new command, TurnRight()

Do This: Put the robot on the bottom row in the second column, facing upwards. Run this program on your board. Where will the robot end up?

integer steps = 0
repeat while steps < 4
    MoveForward()
    TurnRight()
    steps = steps + 1
end

Click through animation to see the answer. The robot returns to its original position.


Slide: While Loop: 3 Parts

Say: A While Loop has three distinct parts.

Click for animation: Read each step as the animation highlights the program code.


Slide: A for loop combines these three parts into one statement

Say: A For Loop combines all three of these parts into one statement.

Click for animation: Read each step as the animation highlights the Javascript code, or look at the Quorum code below.

repeat 4 times
    MoveForward()
end

Note: The "repeat times" loop in Quorum is slightly different than the traditional "for" loop in Javascript. Both loops make it possible to iterate a specific number of times, but in Quorum, you don't make a variable as part of the loop declaration.

Say: A loop is an example of iteration: a repetitive portion of an algorithm which repeats a specified number of times or until a given condition is met.


Slide: Do this: You have another new command

Say: You have another new command: TurnLeft()

Click to reveal the program code, or share the Quorum code below. Have students place the robot in the bottom left corner of their grid, facing forward again.

repeat 3 times
    MoveForward()
    TurnRight()
    MoveForward()
    TurnLeft()
end

Do This: With your partner, follow the code with your robot.

Click through the animation to see the answer.


Slide: Do this: click to see a new program.

Click to reveal the program code, or share the Quorum code below.

integer steps = 0

repeat while steps <= 2
    MoveForward()
    MoveForward()
    TurnRight()
    MoveForward()
    steps = steps + 1
end

Do This: Place the robot on the second row from the bottom, in the left-most column, facing towards the top. Run the program on your board. Where will the robot end up?

Click through the animation to see the answer.


Slide: Do this: Click to see a new program.

Click to reveal the program code, or share the Quorum code below.

repeat 2 times
    MoveForward()
    TurnLeft()
    TurnLeft()
    MoveForward()
    MoveForward()
end

Do This: Place the robot on the center of your board, then run the program. Where will the robot end up?

Click through the animation to see the answer


Slide: Let's make it a little more challenging.

Say: We're going to add some new commands to make things more challenging: CanMoveLeft(), CanMoveRight(), CanMoveForward(), and CanMoveBackward(). These evaluate to true or false and are dependent on the direction that the robot is facing. If a barrier or a wall (the edge of the board) is in the way, the Boolean expression evaluates to False.


Slide: canMove(forward);

Click through the animation to see the answer.

Say: In this example, we have our robot in the center of our grid, facing upwards. There is a barrier in the space immediately to its left. CanMoveLeft() returns false, and the other commands return true.


Slide: canMove(forward);

Click through the animation to see the answer.

Say: In this example, our robot is in the top row, in the center column, and facing to the right. There is a barrier immediately behind it, so CanMoveBackward() returns false. CanMoveLeft() also returns false, because the robot's left side is up against a wall (the edge of the board).


Slide: Do This: Run the following program.

Click to reveal the program code, or share the Quorum code below.

repeat 3 times
    if CanMoveRight()
        TurnRight()
        MoveForward()
    end
    TurnLeft()
    if CanMoveForward()
        MoveForward()
    end
end

Do This: Place the robot in the center of the grid facing upwards. Then place a barrier one space below the robot, and another barrier one space above and to the right of the robot. Then run the program on your board. Where will the robot end up?

Click through the animation to see the answer.


Slide: Do this: Run the following program.

Click to reveal the program code, or share the Quorum code below.

repeat 4 times
    if CanMoveForward()
        MoveForward()
    end
    TurnLeft()
    if CanMoveForward()
        MoveForward()
    end
    Turn Right()
end

Do This: Place the robot in the fourth column and the bottom row, facing upwards. Then, place a barrier one space to the left of the robot, and another barrier three spaces to the left of the robot. Finally, place a barrier in the second column in the top row and another in the second column in the center row. Then run the program on your board. Where will the robot end up?

Click through the animation to see the answer.


Slide: Challenge!

Say: Now it's your turn to write your own programs!

Do This: With a partner, set up a game board and add as many barriers as you'd like. Write a program using a for loop to navigate the board. Figure out the starting and ending points of the robot. Share your board and code with another group. See if you agree on the ending point of the robot!


Slide: Key Takeaways

Do This: Review the key takeaways with students.

Note: The key takeaways are slightly different between Javascript and Quorum because the "for" and "repeat times" loops are not identical. One important takeaway for both languages though is that the "while" loop can do anything the other loops can. The other loop styles are just for convenience.


Teaching Tip: Running the Activity

This activity asks students to follow along as a number of core concepts for programming are introduced. The model is typically that a term or concept is introduced and modeled and then afterwards students are encouraged to try it out on their own. Trying it out typically means they are writing information on a note and sharing it with another group before discussing the results with the whole class.

Slides with animations have an icon in the bottom left corner to let you know you need to click to reveal more of the slide's content.

To help you more easily prepare the activity and keep track of your instructions, detailed instructions have been included as speaker notes in the presentation. Here are some tips to help you throughout the presentation.


Wrap Up (10 mins)

Video: As a class, watch the CS Principles: Using Loops video from Code.org. The video discusses the use of loops in Javascript, but most of the concepts are still useful in Quorum as well.

Journal: Have students add the following terms to their journals:

Assessment: Check for Understanding

Question: When breaking a problem down, you often encounter elements that you want to use repeatedly in your code. Sometimes it's appropriate to write a new function; at other times it's appropriate to write a loop.

There is no hard-and-fast rule as to which is better, but what do you think? What kinds of circumstances would lead you to writing a function versus using a loop?

Standards Alignment