Course E - Loops 2 - Nested Loops and Scoreboards

This lesson introduces a complex example of looping and iteration.

  • Computer-science
  • Looping
Print lesson
  • Ages 9+
  • 65+ mins
  • Javascript Blocks

Introduction

This lesson introduces a complex example of looping and iteration. It is recommended that the first lesson in this series on loops, 'LOOPS AND ANIMATIONS', be completed before you try this lesson. If learners struggled perhaps review that lesson first.

While 'LOOPS AND ANIMATIONS' only had one loop, this lesson has a nested loop and a simple loop.

For this lesson, we try to make a scoreboard. Our scoreboard will show the score by lighting up LEDs. Therefore, if 4 LEDs are lit, the score is 4.

Instructors may want to consider the following with this challenging lesson on nested loops:

  1. Have students track what value or iteration the outer loop is in and also what the inner loop is doing. They can use paper and pencil or buttons or whatever as the teacher walks through the code. Keep in mind that the starting value for the loops is zero so this will no doubt make things a little confusing for students at first.
  2. There are many ways to explain nested loops. One relatable idea might be the 10s place in math. The 10s place would be the outer loop and the ones place would be the inner loop if you use this math example. There will be ten ones for every iteration of the outer loop. See this example if needed:
  3. 
    basic.forever(() => {
        for (let Tens = 0; Tens <= 9; Tens++) {
            for (let Ones = 0; Ones <= 9; Ones++) {
                if (Ones + 1 < 10) {
                    basic.showNumber(Ones + 1)
                }
            }
            basic.clearScreen()
            basic.pause(500)
            basic.showNumber(Tens + 1)
            basic.showString(" Tens")
        }
    })
          
  4. Try explaining using real life examples too, like brushing your teeth. Most people brush their teeth three times a day. The outer loop would be days and the inner loop would be each time you brush your teeth in a given day. The outer loop would go through 7 times and the inner would go through 3 times.
  5. The challenges and quiz questions will guide students to find answers for only one direction. For example, a question might say show the score with the LEDs on the right side. However, if you ignore this fact there are at least two ways to come to an appropriate score for our scoreboard. The left and top areas are the most obvious directions where the score might appear. You may wish to challenge students to find other ways to get a desired score by changing the locations where the score should appear. This is what the independent practice asks them to do so it could be helpful to get them ready for that. The overall goal is to allow students to experience how these loops interact with one another. What better way to do that than by getting multiple answers to the same question?
  6. You may want to really get into the theme by showing pictures of things you will score. Make a real competition and have the students make their own scores for their competitors. Then they can invent a story to tell what happened in the contest or game they score.

Our micro:bit course lessons are tailored to apply knowledge obtained from the Code.org CS Fundamentals. Before students begin these Course Lessons, we encourage students to first complete all CS Fundamentals as a prerequisite. Students should be familiar with loops from Code.org CS Fundamentals.

Background

Students are highly encouraged to first complete the following:

The teacher is highly encouraged to first complete the following:

Teacher Guide

Open

Activity

What you'll need

  • 1 - micro:bit
  • 1 - USB cable
  • 1 - AAA battery pack (optional)
  • 2 - AAA batteries (optional)

Documentation

for (let index = 0; index <= 4; index++) {}

for

Run part of the program the number of times you say.

basic.forever(() => {})

forever

Keep running part of a program in the background.


let item = 0
item = 0
            

setItem

Use an equals sign to make a variable store the number or string you say.

led.plot(0, 0)

plot

Turn on the LED light you say on the LED screen.

4 steps

Guided Practice

We will make instructions or code online for the micro:bit. Next, go to https://makecode.microbit.org

let Column = 0
let Row = 0
Row = 1
Column = 4
basic.forever(() => {
    for (let RowCounter = 0; RowCounter <= Row; RowCounter++) {
        for (let ColumnCounter = 0; ColumnCounter <= Column; ColumnCounter++) {
            led.plot(ColumnCounter, RowCounter)
        }
    }
})

This code has two loops.

The two loops show nested loops. That means there is a loop and inside that is another loop.

The outer loop represents the row of LEDs. In its current state, the code will go through 2 times.(0-1)

Finally, there is the inner loop represents the column of LEDs. In its current state, the code will light up 5 LEDs in each row.(0-4)

Our task is to score something. You choose the theme and what we score! It could be any contest and picking a theme that your students like will most certainly make the activity more fun. Some ideas are a surf competition, baseball game, dog contest, or even a baking contest. The micro:bit will be the scoreboard. Each score will be shown by the number of LEDs that are lit up.

The finished code is available here.

Challenges

Challenge 1

Change the score to 9 points. Try to show your score as close to the left side of the micro:bit as you can.

View code

let Column = 0
let Row = 0
Row = 2
Column = 2
basic.forever(() => {
    for (let RowCounter = 0; RowCounter <= Row; RowCounter++) {
        for (let ColumnCounter = 0; ColumnCounter <= Column; ColumnCounter++) {
            led.plot(ColumnCounter, RowCounter)
        }
    }
})
          

The finished code is available here.

Challenge 2

Change the score to 15 points. Try to show your score as close to the left of the micro:bit as you can.

View code

let Column = 0
let Row = 0
Row = 4
Column = 2
basic.forever(() => {
    for (let RowCounter = 0; RowCounter <= Row; RowCounter++) {
        for (let ColumnCounter = 0; ColumnCounter <= Column; ColumnCounter++) {
            led.plot(ColumnCounter, RowCounter)
        }
    }
})
          

The finished code is available here.

Challenge 3

Change the score to 16 points.

View code

let Column = 0
let Row = 0
Row = 3
Column = 3
basic.forever(() => {
    for (let RowCounter = 0; RowCounter <= Row; RowCounter++) {
        for (let ColumnCounter = 0; ColumnCounter <= Column; ColumnCounter++) {
            led.plot(ColumnCounter, RowCounter)
        }
    }
})
          

The finished code is available here.

Challenge 4

Show a perfect score of 25! All LEDs should be lit up! Try to show your score as close to the left of the micro:bit as you can.

View code

let Column = 0
let Row = 0
Row = 4
Column = 4
basic.forever(() => {
    for (let RowCounter = 0; RowCounter <= Row; RowCounter++) {
        for (let ColumnCounter = 0; ColumnCounter <= Column; ColumnCounter++) {
            led.plot(ColumnCounter, RowCounter)
        }
    }
})
          

The finished code is available here.

Independent Practice

Choose a score and tell your teacher your goal before beginning. Try to show this number in two different ways. You might need to write down your solutions and then after you find both ways, call the teacher over to show off your work. Make it a contest between two things or people and create a story to justify the score.

Quiz

Question 1

What is a real life situation that fits a nested loop?

Show answer

Answers will vary. One example is a song. Verses are the outer loop and Chorus is the inner loop. Sing the verse then chorus... repeat.

Question 2

Is it easy to show an odd number?

Show answer

Yes. There are several ways. One might be to just show the first row or just the first column. That would be 5.

Question 3

Why are loops used?

Show answer

Loops are used to repeat code in one specific spot of your program