Lesson 11: Booleans and Conditionals

Overview

Students start by using booleans to compare the current value of a sprite property with a target value, using that comparison to determine when a sprite has reached a point on the screen, grown to a given size, or otherwise reached a value using the counter pattern. After using booleans directly to investigate the values or sprite properties, students add conditional if statements to write code that responds to those boolean comparisons.

Purpose

This lesson follows closely the booleans model that students first experienced in the Booleans Unplugged lesson. As before, we start with using booleans directly before using booleans to trigger if statements. In the following lesson we will introduce some boolean producing blocks, such as keyDown(), which can be used in place of simple boolean comparisons to write programs that respond to user input.

Agenda

Warm Up (5 min)

Activity (40 min)

Wrap Up (5 min)

View on Code Studio

Objectives

Students will be able to:

  • Predict the output of simple boolean statements
  • Use conditionals to react to changes in variables and sprite properties

Vocabulary

  • Boolean Expression - in programming, an expression that evaluates to True or False.
  • If-Statement - The common programming structure that implements "conditional statements".

Introduced Code

Teaching Guide

Warm Up (5 min)

Answering Boolean Questions

Goal: At the end of the Boolean Question game from the previous lesson, students began adding conditions to their boolean questions - meaning that if the answer to the question is true, something should happen. Before programming with conditionals, we want to make sure that students have a solid understanding of what booleans really are.

Prompt:

  • How many different numbers are there in the world?
  • How many different words or combination of letters and other characters are there?
  • How many different boolean values are there?

Discuss: Students should realize that the first two questions (numbers and strings), are essentially infinite, but that booleans are limited to two states.

Remarks

As you begin programming today, you'll be using booleans to make programs that change their behavior depending on the answer to those boolean questions.

Activity (40 min)

Content Corner

Though seemingly simple, understanding how a boolean statement will evaluate can be difficult given that different programming languages have differing opinions on 'truthiness' and 'falsiness'. In fact, JavaScript (the language used in this course) has two different operators to test boolean equality == and ===.

The double equals operator (==) is pretty generous in determining truthiness, for example each of the following is considered true in JavaScript when using the == operator, but would be false using the === operator:

1 == true;
"1" == true;
5 == "5";
null == undefined;
"" == false;

We use the == operator in this course because it's more forgiving, but it's important to be aware that it can sometimes report back truth when you really didn't intend it to (in which case you might want to use the more strict === operator)

Booleans Plugged

Transition: Send students to Code Studio.

Wrap Up (5 min)

Adding Conditionals

Journal: Think back to all of the programs you've written so far; how might you use conditionals to improve one of your programs from past lessons? What condition would you check, and how would you respond to it?

View on Code Studio

Overview

The class starts by using booleans to compare the current value of a sprite property with a target value, using that comparison to determine when a sprite has reached a point on the screen, grown to a given size, or otherwise reached a value using the counter pattern. After using booleans directly to investigate the values or sprite properties, the class adds conditional if statements to write code that responds to those boolean comparisons.

Vocabulary

  • Boolean Expression - in programming, an expression that evaluates to True or False.
  • If-Statement - The common programming structure that implements "conditional statements".

Introduced Code

  • Make a Prediction
  • 2
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Boolean Expressions

Decision-making on computers are based on statements called boolean expressions. A boolean expression is any expression that can only evaluate to either TRUE or FALSE. This can be particularly useful when used to compare the properties of two sprites. For example, you could figure out which one is larger or placed higher up. In the next few puzzles we'll use simple boolean expressions to compare sprite properties.

Predict

Read the code below. There are some new symbols in it which you haven't been introduced to. Take a guess at what they mean and try to answer the following question

Which result will be printed in the console by this program?

true
false
true

0
200
100

true
error
true

false
true
false

View on Code Studio

Boolean Expressions Video

  • Boolean Comparison
  • 5
  • 6
  • 7
  • 8
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Boolean Expressions

The simplest Boolean expressions are questions that the computer can answer with true or false. These expressions are made using comparison operators, as shown below.

Comparison Operator Boolean Expression Meaning
1 < 9 Is 1 less than 9?
1 > 9 Is 1 greater than 9 ?
1 == 9 Is 1 equal to 9?

Note: If you saw the statement 3 < 2 in math class, you'd think something was terribly wrong, but this is not math class. In computer science, the comparison operators ask a question that the computer will answer with true or false. So you can read 3 < 2 as "Is 3 less than 2?" The answer in this case is no, or false.

Another way to say this is that the Boolean expression 3 < 2 evaluates to false.

Do This

Can you modify the values of the sprite properties so that each of the Boolean expressions evaluates to true?

  • Read through the entire program to see how sprite1 and sprite2 are being created and which properties are compared.
  • For each of the Boolean expressions, identify the sprite properties being compared.
  • Change the code in the first 11 lines only so that each of the console.log() statements print true.
View on Code Studio

Student Instructions

View on Code Studio

Student Instructions

Booleans

In the past few levels, we have been comparing values of sprites to find out whether something is true or false. Let's start putting that in the context of an animation.

Do This

The program draws a race car and a finish line. We are going to figure out when the race car crosses the finish line. The sprites have all been set up for you.

  • Add a console.log statement inside the draw loop. ( Show me where )
  • Add an Boolean expression inside the console.log that asks "Is the x position of the race car less than the x position of the finish line?"
  • Look at the output of the program as the car moves. When does the output change? Why?
View on Code Studio

Student Instructions

More Practice With Booleans

Let's use one more Boolean expression to check the condition of a sprite.

Do This

There is a growing apple sprite created for you. It starts as green and should turn red when it gets to a scale of 2. We won't worry about making it red yet, let's just use a console.log command to check whether it's scale is 2 yet.

  • Add a console.log statement.
  • Add a Boolean expression inside the console.log that checks whether the apple.scale is greater than 2.
  • Basic Conditionals
  • 10
  • 11
  • 12
  • (click tabs to see student view)
View on Code Studio

Student Instructions

If Statement

The Boolean expressions you used earlier allow us to ask questions, but in order to respond to those questions, we need to use an if statement.

if statements usually go inside your draw loop because we want to check them each time the loop runs.

Do This

The race car program you wrote earlier is loaded here for you.

  • Add an if statement after you update the position of the race car.
  • Move the Boolean expression from the console.log statement to the condition of the if statement.
  • Inside the if statement add a statement to draw text on the screen to say "Winner".
View on Code Studio

Student Instructions

Turning Red

Now that we know how to use if statements, you can do more than just check if the apple has reached a scale of 2, you turn it red once it happens.

Do This

Use a conditional in the draw loop to check whether apple.scale is greater than 2 - if it is, set the apples new animation to "apple_red".

Challenge: Can you also make the apple stop growing once it turns red?

View on Code Studio

Student Instructions

Visible

Now that you have conditionals and images, sometimes it's useful to hide the image for a while and then show it again. You can do this using the visible property. The visible property is a little different from other properties you have seen in the past: It is a Boolean value, either true (the sprite is visible) or false (the sprite is not visible). By default, visible is set to true.

Do This

Make the balloon pop when it hits the edge of the game area!

  • Add an if statement that checks to see if the balloon has hit the edge.
    • Use a watcher on balloon.scale to help you out.
  • Create a pop sprite which uses the "pop" visual in the animation tab.
  • Set the pop's visible property to false to start.
  • Inside the if add two statements.
    • One that sets the visible property to hide the balloon sprite.
    • One that sets the visible property to show the pop sprite.
View on Code Studio

Free Play

Use what you've learned to create whatever you like. When you're finished, you can click to send your creation to a friend, or to send it to your Projects Gallery.

Standards Alignment

View full course alignment

CSTA K-12 Computer Science Standards (2017)

AP - Algorithms & Programming
  • 2-AP-12 - Design and iteratively develop programs that combine control structures, including nested loops and compound conditionals.
  • 2-AP-13 - Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.
  • 2-AP-17 - Systematically test and refine programs using a range of test cases.
  • 2-AP-19 - Document programs in order to make them easier to follow, test, and debug.