Lesson 14: Conditionals
Game Lab
Overview
Question of the Day: How can programs react to changes as they are running?
This lesson introduces booleans and conditionals, which allow a program to run differently depending on whether a condition is true. Students start by playing a short game in which they respond according to whether particular conditions are met. They then move to Code Studio, where they learn how the computer evaluates Boolean expressions, and how they can be used to structure a program.
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.
Assessment Opportunities
-
Use conditionals to react to changes in variables and sprite properties
See Level 10 in Code Studio.
Agenda
Lesson Modifications
Warm Up (5 min)
Activity (40 min)
Wrap Up (5 min)
View on Code Studio
Objectives
Students will be able to:
- Use conditionals to react to changes in variables and sprite properties
Links
Heads Up! Please make a copy of any documents you plan to share with students.
For the Teachers
- Conditionals - Slides
Vocabulary
- Boolean Expression - in programming, an expression that evaluates to True or False.
- Condition - Something a program checks to see whether it is true before deciding to take an action.
- Conditionals - Statements that only run when certain conditions are true.
Introduced Code
Teaching Guide
Lesson Modifications
Attention, teachers! If you are teaching virtually or in a socially-distanced classroom, please see these modifications for Unit 3.
Warm Up (5 min)
Teaching Tip
The last two prompts ask students to react to information that may change as they are answering the questions. In order to drive this point home, consider moving from the front of the room and back, as well as alternately tapping and not tapping a pencil, so that students realize that their answers may change according to when they are answering each question.
Introducing Conditionals
Display: Display the following questions on the board and ask students to answer them.
- If your last name has more than five letters, draw a square on your paper.
- If your last name less than seven letters, draw a circle.
- If you are wearing anything green, add 3 + 2.
- If the teacher is tapping their pencil, draw an 'X'.
- If the teacher is in the front of the room, fold your paper in half.
Discussion Goal
This discussion should prepare students to investigate programs that react to changing conditions. Students should realize that there is no "one way" that these questions will be answered, and that the answers will change according to changing conditions.
Prompt: When we program, we give the computer instructions on what to do. How are the instructions you just followed different from the instructions that we have been giving in Game Lab?
Think-Pair-Share: After students have had a chance to write down their answers, allow them to talk to a partner before sharing out as a class.
Remarks
These instructions were a little different because we first had to decide whether something was true or not before we knew what we should do. In programming, instructions that depend on whether or not something is true are called conditionals, and the thing that is checked is called the condition. Conditionals are especially useful when we want the program to react to situations that change while the program is running.
Key Vocabulary:
- Condition - Something a program checks to see whether it is true before deciding whether to take an action.
- Conditionals - Statements that only run under certain conditions.
Question of the Day: How can programs react to changes as they are running?
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)
Conditionals
Transition: Send students to Code Studio.
Wrap Up (5 min)
Discussion Goal
This discussion should get students thinking about how conditionals are used in games they have already seen, and help them connect those ideas to how they might want to use conditionals in their own programs. Student responses might include:
- If my username and password are correct, log me into Facebook
- If Pacman has collected all the balls, start the next level
- If my keyboard or mouse hasn't moved in 10 minutes, turn on the screensaver
Considering Conditions
Question of the Day: How can programs react to changes as they are running?
Key Vocabulary:
- Condition - Something a program checks to see whether it is true before deciding to take an action.
- Conditionals - Statements that only run under certain conditions.
- Boolean Expression - In programming, an expression that evaluates to True or False.
Prompt: Now that you know how conditionals work, where you do think that they are used in games or other programs and apps that you already use?
- Lesson Overview
- 1
- Prediction
- 2
Student Instructions
Boolean Expressions
Boolean expression - an expression that can only evaluate to TRUE or FALSE
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
- Video: Booleans
- 3
Teaching Tip
Discussion Goals
Key Vocabulary:
- Boolean Expression - in programming, an expression that evaluates to True or False.
Students should be able to explain that a Boolean expression is something that is either true or false, similar to a yes or no question. The more formal way to say this is that Boolean expressions evaluate to either true or false. That means that when the computer processes a Boolean expression, it checks to see whether the expression describes a situation that is true or false, and then uses the value of either true or false wherever the expression is found.
Some examples of Boolean expressions that evaluate to true are 3 > 1 and 4 <= 7, but press students to think of expressions that might be better represented by variables, such as studentAge < 70 or sizeOfClass > 2.
Some examples of Boolean expressions that evaluate to false are 4 == 7, schoolName == "Hogwarts", and currentYear < 1000.
Student Instructions
Questions to Consider
- What is a Boolean expression?
- What’s an expression that would evaluate to true?
- What’s an expression that would evaluate to false?
- Quick Check
- 4
Student Instructions
Student Instructions
Booleans
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.
Do This
- Add a
console.logstatement inside the draw loop. ( Show me where ) - Add an Boolean expression inside the
console.logthat 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?
Student Instructions
If Statement
Boolean expressions allow us to ask questions, but in order to use those questions to change the program's behavior, we need an if statement.
Do This
- Read the code for this race car program.
- What will the program do when the car reaches the finish line?
- Why is the
ifblock inside the draw loop?
- Video: Conditional Statements
- 7
Teaching Tip
Discussion Goals
The broad point of this question is that programmers use if statements when they want the program to run differently in response to different situations. Encourage students to think of particular situations in which this would be the case. For example, they might want their characters to move faster when a "bonus" is in effect, or maybe they want more enemies to appear when the player reaches a certain level. Maybe they want the program to react in some way if a user presses a key or clicks the mouse, or they want a character to change animations if it touches a particular item.
Student Instructions
Question to Consider
- When would you want to use an if statement?
- Skill Building
- 8
Assessment Opportunities
Use conditionals to control the flow of a program.
Extensive Evidence
The sprite's image changes from an apple to a pear when the sprite's scale reaches 2.
Convincing Evidence
There is a conditional in the draw loop that checks whether the sprite's scale has reached 2.
Limited Evidence
There is a conditional in the draw loop that checks the value of a Boolean statement.
No Evidence
There are no conditionals in the draw loop.
Student Instructions
Changing Fruit
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 into a pear once it happens.
Do This
Use a conditional in the draw loop to check whether fruit.scale is greater than 2. If it is, change the fruit's animation to "pear".
Student Instructions
Practice using booleans and conditionals with these activities.
Choose from the following activities:
Change the sprite properties so that all of the boolean expressions evaluate to true.
Empty the soup bowl when it turns upside down.
Make the alien dance when the spaceship takes off.
Student Instructions
Boolean Expressions
The simplest Boolean expressions are questions that the computer can answer with true or false.
Another way to say this is that Boolean expressions evaluate to true or 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
sprite1andsprite2are 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 printtrue.
Student Instructions
Dropped Soup
The soup should spill out of the bowl when it turns upside down.
Do This
- Run the program to see how it works.
- Add a conditional that detects when the bowl is upside down and sets the sprite's animation to be an empty bowl.
Student Instructions
Alien Celebration
Make the alien dance when the spaceship reaches the top of the screen.
Do This
- Run the program to see how it works.
- Add a conditional that detects when the spaceship is in the sky and sets the sprite's animation to
alien_dance.
- Assessment
- 10
Assessment Opportunities
Use conditionals to control the flow of a program.
Extensive Evidence
The sprite's image changes from an T-rex to a pterodactyl when the sprite reachers the sky.
Convincing Evidence
There is a conditional in the draw loop that checks whether the sprite has reached the sky.
Limited Evidence
There is a conditional in the draw loop that checks the value of a Boolean expression.
No Evidence
There are no conditionals in the draw loop.
Student Instructions
Magic Dinosaur
Make the dinosaur turn into a pterodactyl when it reaches the sky.
Do This
- Run the code to see how it works.
- Add a conditional that will change the dinosaur's animation to a pterodactyl when it reaches the sky.
Student Instructions
Try out these challenges with conditionals.
Choose from the following activities:
None
None
Student Instructions
Visible
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 a conditional that checks to see whether the balloon has hit the edge.
- Use a watcher on
balloon.scaleto help you out.
- Use a watcher on
- Create a pop sprite which uses the "pop" visual in the animation tab.
- Use the
visibleproperty to keep the "pop" sprite hidden at the beginning. - Inside the
ifadd two statements.
Student Instructions
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.