✨U2LA1.2: Conditionals and if, else if, and else statements

How can we write multiple conditions to our code?

Teacher Notes && Overview

NB: This lesson technically covers NYS Standard 7-8.CT.8 Develop or remix a program that effectively combines one or more control structures for creative expression or to solve a problem. However, we know not all schools can guarantee a middle school sequence prior to this course. This lesson can be significantly abbreviated or skipped entirely based on the knowledge your students come in with!

This learning activity builds on the students’ knowledge of conditional statements. They will use conditional statements to create a sketch of a traffic light in future lessons that changes colors based on the mouse position, and this prepares them for that activity

Students should have a solid understanding of conditionals and how it is satisfied through a boolean. This lesson will focus heavily on creating more complex algorithms through the use of conditionals. Therefore it is important that students add comments to keep track of the sketches control flow. Students will also benefit greatly from peer programming because they can model their thinking behind their code.

Objectives

Students will be able to:

• Use an if-then statement

• Use else if and else statements

• Create conditions statements (event handlers)

• Elaborate on how to satisfy a condition.

Suggested Duration

~1-2 Periods (~45-90 minutes)

NYS Standards

7-8.CT.8 Develop or remix a program that reffectively combiens or or more control structures for creative expression or to solve a problem.

9-12.CT.8 Develop a program that effectively uses control structures in order to create ac omputer program for practical intent, personal expression, or to address a societal issue.

9-12.DL.1 Type proficiently on a keyboard.

9-12.DL.2 Communicate and work collaboratively with others using digital tools to support individual learning and contribute to the learning of others.

Vocabulary

• Conditional statements - is a set of rules performed if a certain condition is met

• Else - the second half of a conditional statement covers every outcome not specified in “if”

• Boolean expressions - is a logical statement that is either TRUE or FALSE

• Expression - is a group of terms (the terms are separated by + or − signs)

• Relational operators - < , > , >=, <=, && (and), || (or)

Planning Notes && Materials

Planning Notes	Materials
Some of the examples might be too much from some students to copy so have some way students can access the links to your projects.	Pens/Pencils Index Cards/Half Sheets for Exit Slip (optional)

Resources

• Video tutorial: Else, and else if, AND and OR
• Else If Off the Canvas (Youtube Video) | Starter Code (p5 editor | repl.it)
• Conditionals On the Canvas (Youtube Video) | Starter Code (p5 editor | repl.it)
• Do now Code (p5 editor | repl.it)

Assessments

Formative:

• Do Now

• End of lesson code collection and reflectionr esponses

Summative:

• Traffic Light (Upcoming Mini Project)

• Drawing App (Upcoming Unit Final)

Do Now/Warm Up (5 - 10 minutes)

Find the bug and add comments explaining the solution in the following Do now Code (p5 editor | repl.it).

Ask students to debug the sketch in order to change the color of the rectangle. There are 2 bugs 1) if statement is missing a curly bracket { 2) rect() must be written after the if statement.

Note: Bug number 2 is an error that will come up often for students who have difficulty with the control flow of a program. Control flow is an essential Computer science concept that students will need to master to create algorithms.

Ask Students to share out their solutions and explanations.

• Why does the rect() function have to come after the if statement?

• How can we check for syntax errors?

Else If Off the Canvas (15 - 25 minutes)

This section follows the code-along youtube video linked under resources. Ask students to open and duplicate this starter code so they can save it into their p5.js accounts. Explain to students the existence of the ‘else if’ statement and its purpose in a program. We can use "else if" to add more possible outcomes to our sketches. Since there are often more than two possible conditions that we want to work with, we can instruct the program to perform different tasks based on a range of conditions.

I might want to tell someone that if it's cold they should wear a coat, but I also may want to say:

• "if it's freezing, wear a coat,

• if it's cold, wear a jacket,

• otherwise just wear a sweater."

We can do this by adding "else if" to our conditionals between "if" and "else."

The program will test each condition in order. As soon as one condition evaluates to true, the code inside those brackets is executed and the program continues after the statement.

Then code along with them a conditional to check the variable movie. If movie is ‘Ratatouille’, say ‘that movie is about a rat.’ Else if the movie is ‘Tangled’, say ‘That movie is about some hair.’ Otherwise, say ‘I don’t know that movie.’

The finished result of the code along should look like this:

if(movie=="Ratatouille"){
 console.log("That movie is about a rat.")
}
else if(movie=="Tangled"){
 console.log("That movie is about some hair.")
}
else{
  console.log("I don't know that movie.")
}

Once students have completed this, test by changing the value of the variable to get different outcomes. Then, explain that you can have many else if conditions. Then, ask students to complete one large conditional that will tell the user when their birthday is based on their sign. (They should plan for EVERY sign!)

Control flow is very important here because else if will check for multiple conditions but will only execute the first condition that is satisfied and stop then stop checking unless a new if statement is written. Using console.log() to debug and test the conditionals. Commenting is vital for this part. The traffic light problem will help reinforce this idea.

Else if Lesson (15 - 30 minutes)

Next, students will move to working with conditionals on the canvas. This should be an easy extension to what they were doing before, except now the variables they make will change values to adjust what is happening on the canvas. Ask students to duplicate this starter code. (This will also follow the associated Youtube video tutorial!)

Walk students through how to create a variable to control the fill of their circle, and then write a conditional that will change the value of that variable based on mouse position. Once you are done, the conditional for this section should look like the following:

if(mouseX > 200){
  circleColor=color(255, 255,0)
  console.log("mouse on right")
}
else if(mouseX < 200){
  circleColor=color(255,0,255)
  console.log("mouse on left")
}
else{
  circleColor=color(0,255,255)
  console.log("exact middle")
}

Once students are done, ask them to repeat this process for the rectangle using mouseY. Circulate to help solve problems as students work, and if time permits, ask students to share their solutions at the end.

As you code along through the other conditional examples ensure that students are:

• Commenting their code.

• Using variables in the correct scope.

• Using console.log() to debug and test

• Saving their sketches with appropriate and clear titles.

Wrap-Up (~5 minutes)

1. Students can submit code via a Google Form or by placing their link in a Google Doc if you would like to collect it. If not, have students come back together for a discussion on what struggles they encountered in this activity.

2. Students can also lead code alongs or walk through their code with the class.

Guiding Assessment Questions:

• What is a boolean statement?

• What are the two responses I can get from a boolean statement?

• What is a conditional statement and how can I use it in programming?

• What was challenging about creating an interactive sketch with boolean and conditional statements? Why? How did you solve the challenge? What was easy?

Extensions

Have students duplicate and modify their emojis sketches to do the following.

• Change the size of the eyes by moving the mouse to the right side of the canvas else

• The color should change if a second condition is met.

• Add comments explaining the purpose of the conditions.