✨U2LA1.1: Conditionals and If Statements

How can we add conditional statements to make our programs more interactive?

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 introduces booleans and conditional statements. Before students begin making conditionals to control visual parts of the canvas, they take a moment to think about the logic of coding off-canvas. Students will then create an interactive sketch that includes a visual element that changes based on a condition.

This is one of the first lessons that takes a trip off the canvas for students to practice JavaScript syntax and logic. While it may be frustrating or seem dull to not be making creative coding pieces, it is useful for long-term student understanding for them to have the practice without the stress of getting everything to look just right. If you are teaching this curriculum to students with significant coding experience, please feel free to skip or speed up these sections as needed.

At this point, students have seen mouseX and mouseY and should understand that they hold a changing value. Students may wonder why conditions are important tell them that now it is time to make our sketches interactive and “intelligent” by adding a decision-making condition.

Objectives

Students should be able to:

• Use an if-then statement

• Create conditional statements (event handlers)

Suggested Duration

~2-3 periods (90 - 135 minutes)

NYS Standards

9-12.CT.4 Implement a program using a combination of student-defined and third-party functions to organize the computation.

9-12.CT.8 Develop a program that effectively uses control structures in order to create a computer 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

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

Prereq Vocab:

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

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

Planning Notes && Materials

Planning Notes	Materials
Some of the examples might be too much for some students to copy so have some way students can have direct access to your project links. You’ll be using the p5 editor website A LOT - make sure everything linked in the lesson is unblocked and usable. You can assign the video tutorial (“Conditional Statements”) as homework or prework.	Pens/Pencils Worksheet, printed or digital Index Cards/Half Sheets for Exit Slip (optional)

Resources

• Video tutorial: Conditional Statements

• Pseudocode Conditionals Worksheet

• Pseudocode Conditionals (Youtube Video)

• Conditionals Off-Canvas (Youtube Video) | Starter Code (p5 editor | repl.it)

Assessments

Formative:

• Use of conditionals during activity

• End of Lesson Wrap Up

Summative:

• Traffic Light (Upcoming Mini Project)

• Draw App (Upcoming Unit Final)

Do Now/Warm Up (7 - 12 minutes)

Distribute the Pseudocode Conditional Worksheet to students. Ask them to fill out just the first column, and if necessary, offer suggestions for the first example to get them started. The rest they should be able to complete on their own. Ask them to, for now, ignore the second column.

After students have had time (~3-5 minutes) to work on the first column, ask for some student shares, and then explain how you complete the second column by putting the plain English conditionals they’ve written into pseudocode.

Give students another ~5 minutes to complete the second column after you’ve given an example, and then review briefly before using this to launch into the coding portion of the lesson. For example:

Action	If/Else Statement	Pseudocode
ACTION: Go to the park with your friends	If (the weather is nice), then (I go to the park with my friends), else (I watch netflix inside)	if(the weather is nice){ I go to the park with my friends } else { I watch Netflix inside. }

Give students another ~5 minutes to complete the second column after you’ve given an example, and then review briefly before using this to launch into the coding portion of the lesson.

It is important that students understand that an expression will evaluate to true or false. Then the computer will perform an action based on the given condition. Some students may ask where the words true and false words actually appear but tell them that the words are actually activation signals that the computer can only see - much like a light's on/off switch, we only see the word if we choose to print it, which we can do in some examples!

We want the computer to look at an expression and evaluate whether it is true or false, if it's true do one thing, and if it's false do another. Let's take a look at some expressions and evaluate them as true or false.

• 26>5 → 26 is greater than 5. Let's read that as a question. Is 26 greater than 5? Yes it is. This expression evaluates to "true."

  • If we wanted to test this in our editor, we could enter console.log(26>5) at the top of our program. Hit play, and we should see 'true' in the console!

• 10=14 → Since 10 is not equal to 14. This expression evaluates to "false"

  • Try entering console.log(10==14) in a program. You should get 'false' in the console!

• 4>210 → This expression is also "false"

  • Try entering console.log(4>210) in a program. You should get 'false' in the console!

• 2=2 → "true"

  • Try entering console.log(2==2) in a program. You should get 'true' in the console!

These "greater than" or "less than" signs are relational operators - they compare two numbers, which is what we're going to do in our first conditional statement.

The boolean expression inside the parentheses is the expression being evaluated. If the expression is true, then the computer will execute the code inside the curly brackets. If it evaluates to false, the code is not run and the program will continue with the code that follows the expression.

if(5<6){
    background(0)
} //background will turn black since 5 IS less than 6.

if(5<4){
    background(0)
} //background will not be black because 5 IS NOT less than 4. Code will be skipped!

Conditionals Off Canvas (20 - 30 minutes)

Share students on this starter code (p5 editor | repl.it) and direct them to make a copy so they can save it to their p5.js editor accounts. This tutorial follows the instructional Youtube video linked under resources if you would prefer to use that to help you prepare for the lesson.

Explain that this starter code will not use the canvas and will run entirely behind the scenes, in the console. There are already some variables created with values as well as prompts for what students will be doing. Complete the noted code along with students to create code that will say ‘I love your music!” if theName says Beyonce and for all others will say ‘Nice to meet you!’ The finished result should look like this:

if(theName == "Beyonce"){
 console.log("I love your music!")
}
else{
 console.log("Nice to meet you.")
}

After, review with students the meaning of the == and that there are other comparative operators they can be using. Additionally, ensure they are aware that while we put strings - what they are currently seeing as words - in quotes, we do not for numbers.

• == the same as

• != not the same as

• < greater than

• <= greater than or equal to

• < less than

• <= less than or equal to

Then, ask students to complete the remaining prompts while you circulate and assist. If you’d like, this could be an opportunity for pair programming or other collaboration.

Consider collecting this activity from students at the end so you can review before their second day of this content.

Second Half OR Day Two Launch (5-10 minutes)

Based on student work from the previous day, display code that contains a common mistake (or mistakes) on the board. It may be helpful to also say ‘This code has # of mistakes… can you identify them?’

Ask students to identify AND determine fixes for the mistakes before you continue on.

NB: We do not provide this as it should be based on specific issues you saw with your student's work!

Boolean and Conditional Lesson (30 min)

Review the common mistakes with students and address any misconceptions. Students may need repetition from the first day about boolean expressions, what it means to be true/false, and the fact that you will not always be told 'true' or 'false' - you'll just be getting the coded results! Return to the light switch example as needed.

Bring students back for the code along. In a new project, create a shape on the screen with a variable to hold its color - remind students how to declare, initialize, and use a variable, and then how to change the color variable in a conditional. Create a change so that when the mouse is on one side of the screen, the color changes, and then changes back to the original. Use console.log(mouseX) so that students can see how the condition in the if statement is satisfied. Move the mouse back and forth a few times so that the shape changes color when mouseX increases and decreases: our sketch is now interactive and responsive to the user moving the mouse! At the end of the code along, you should have created something to the effect of:

let circColor

function setup(){
  createCanvas(400,400)
  circColor = color(255, 255, 0)
}

function draw(){
  background(220)
  fill(circColor)
  ellipse(200,200,100,100)

  if(mouseX>200){
    circColor = color(255, 0, 255)
  }
  else{
    circColor = color(255, 255, 0) //reset to original color
  }
}

Once the code along is completed, ask students to do the following:

• Create a rectangle that will change height based on if the mouse is on the top or bottom of the screen

• Create a variable to hold the size of the circle. Change the size of the circle only if mouseX is at exactly 200, otherwise keep it the same.

• Create a variable to hold the color of the rectangle. Change the color of the rectangle only if mouseY is at exactly 200, otherwise keep it the same.

• Create a conditional that will change the color of the background when a specific condition is met. (You'll need a variable for background color!)

• Create a conditional that will make a new shape appear only when the mouse is in a certain position. No variables needed for this, as you'll be calling a shape function directly in your conditional statement.

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

• Commenting on their code. (Model examples for students as needed)

• Using variables in the correct scope.

• Using console.log() to debug and test

• Saving their sketches with appropriate and clear titles.

Once they are done, ask students what else they could change about this shape or other things in the sketch, such as the background. Have them create variables and use them to change values of the shape itself when the mouse is in different positions, or create different shapes and variables to change with conditionals.

Wrap Up (10 minutes)

Students can submit code via a Google Form 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.

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

Guiding 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

Adapt a previous sketch to add interactivity to it!