Conditionals & Nested Conditionals

1. LxD Cycle Process

Define & Lesson Plan Overview

Define

• POV: CSSE students need to understand how programs make decisions when an input is true or false. This helps students create different results in games and interactive projects.
• Learning Goal: Students will be able to create nested conditionals with if, else if, and else statements.

Ideate:

• HMW Question: How might we encourage students to ask, “What needs to be true for this code to run?” when building a game or project?
• HMW Question: How might we show students that one conditional can contain another conditional?

Learning Objective: By the end of this lesson, you should be able to explain and create a nested conditional.

2. Lesson Plan

Learning Objective: Understand what nested conditionals are and how to place if, else if, and else statements correctly.

Success Criteria: You should be able to describe a nested conditional, explain how if, else if, and else differ, and create a conditional of your own.

Tech Talk (3-5 minutes)

A conditional is a decision in code. It allows a program to choose different actions depending on whether a condition is true or false. You can think of the computer reading the conditionals like reading directions it goes line by line an searches for the one which block of code it should execute next, depending on the situation.

Types: if, if...else, else if, and switch.

1. If executes a block of code when a condition is true.
2. If…else executes one block of code if the condition is true and another block if it is false.
3. Else if checks a new condition only when the previous if condition is false.
4. Switch: Use switch to specify many alternative code blocks to be executed.

Example of a simple conditionals usinf ‘if’, ‘else’ and ‘else if’

‘if’ statement

Definition of an if Statement Use if to specify a code block to be executed, if a specified condition is true.

How to write if (condition) { // code to execute if the condition is true }

**Notice that if is in lowercase letters, if it’s in uppercasee “IF” or “If”, the code will produce an error

‘else’ statement

Use else to specify a block of code to be ran if the condition is false.

How to write if (condition) { // code to execute if the condition is true } else { // code to execute if the condition is false }

‘else if’ statement

Use else if to specifify a new condition if the first condition results in false

How to write if (condition1) { // block of code to be executed if condition1 is true } else if (condition2) { // block of code to be executed if the condition1 is false and condition2 is true } else { // block of code to be executed if the condition1 is false and condition2 is false }

%%js // Code_Runner: See this code change, notice how the if and else statements are written

if (time < 10) { greeting = “Good morning”; } else if (time < 20) { greeting = “Good day”; } else { greeting = “Good evening”; }

‘if-else’ statement

The if-else statement executes one block of code if a condition is true and another block if it is false. It ensures that exactly one of the two code blocks runs.

Example let age = 25;

if (age >= 18) { console.log(“Adult”) } else { console.log(“Not an Adult”) };

Popcorn Hack (2 minutes)

Change this conditional to show something you like (ex. food, color, book) as the if conditional and something you would prefer if your 1st option is not there or available.

if (condition) { // code to execute if the condition is true } else { // code to execute if the condition is false }

Nested Conditionals

Think: Imagine your morning alarm rings and you must decide whether to get up, snooze for 5 more minutes, or go back to sleep.

First, check whether it is a school weekday or a weekend. Then, make another decision inside that first decision.

IF it is a school weekday:

• Check whether you have a test to study for.
  • IF you have a test, you get up and study.
  • ELSE, you snooze your alarm for 5 more minutes.

ELSE (if it is a weekend):

• Check whether you have homework.
  • IF you have homework, you get up and do it.
  • ELSE, you go back to sleep.

See how you are making a decision INSIDE another decision? That is a nested conditional!

Popcorn Hack (2 min)

Here is a runnable example of a nested conditional using the morning-alarm analogy. Change the values of weekday, test, or homework and run the code again. Observe how the output changes.

%%js
// CODE_RUNNER: Try changing these values and run the nested conditional again.
const weekday = true;
const test = true;
const homework = false;

if (weekday) {
  // On a school weekday, check whether you have a test to study for.
  if (test) {
    console.log("Wake up and study for the test.");
  } else {
    console.log("Snooze the alarm for 5 more minutes.");
  }
} else {
  // On a weekend, check whether you have homework.
  if (homework) {
    console.log("Wake up and do your homework.");
  } else {
    console.log("Go back to sleep.");
  }
}

Go ahead and try!

Extra info:

• Using const creates a variable whose value cannot be reassigned.
• Curly braces {} mark the beginning and end of the code block controlled by an if, else if, or else statement.
• The % operator gives the remainder after division. For example, 7 % 2 equals 1.

Challenge 1 (Simpler)

Run the nested conditional to identify whether the numbers 1-10 are odd or even and whether they are divisible by 3.

%%js

// CODE_RUNNER: Run the nested conditional to identify numbers as odd or even and check whether they are divisible by 3.

const NUMBERS = [1, 2, 3, 4, 5, 6];

for (const number of NUMBERS) {
  if (number % 2 === 0) {
    console.log(number + " is even");

    if (number % 3 === 0) {
      console.log(number + " is also divisible by 3");
    }
  } else {
    console.log(number + " is odd");

    if (number % 3 === 0) {
      console.log(number + " is also divisible by 3");
    }
  }
}

Challenge 2 (More challenging)

You are a meteorologist tracking weather patterns for one year. Use a for loop with nested conditionals to examine each month’s temperature, precipitation, and wind conditions.

For each month:

1. Decide whether the temperature is hot, cold, or mild.
2. Add a nested conditional to decide whether hot months may have thunderstorms, cold months may have winter precipitation, or the month is mostly dry.
3. For mild months, use another nested conditional to check whether the weather is windy or calm.

Run the example in the Code Runner first. Then change a temperature, precipitation amount, or wind value and run it again. Observe how the weather report changes.

%%js
// CODE_RUNNER: Use nested conditionals to help a meteorologist track weather patterns for the year.

const weatherPatterns = [
  { month: "January", temperature: 42, precipitation: 3.2, windy: true },
  { month: "February", temperature: 48, precipitation: 1.1, windy: false },
  { month: "March", temperature: 61, precipitation: 4.5, windy: true },
  { month: "April", temperature: 68, precipitation: 2.0, windy: false },
  { month: "May", temperature: 76, precipitation: 0.8, windy: false },
  { month: "June", temperature: 84, precipitation: 3.8, windy: true },
  { month: "July", temperature: 91, precipitation: 1.2, windy: false },
  { month: "August", temperature: 88, precipitation: 5.1, windy: true },
  { month: "September", temperature: 79, precipitation: 2.4, windy: false },
  { month: "October", temperature: 67, precipitation: 3.0, windy: true },
  { month: "November", temperature: 55, precipitation: 4.2, windy: true },
  { month: "December", temperature: 45, precipitation: 2.6, windy: false }
];

for (const weather of weatherPatterns) {
  console.log(weather.month + ":");

  if (weather.temperature >= 80) {
    console.log("  It is hot.");

    if (weather.precipitation >= 3) {
      console.log("  Watch for thunderstorms.");
    } else {
      console.log("  Expect mostly dry weather.");
    }
  } else if (weather.temperature <= 50) {
    console.log("  It is cold.");

    if (weather.precipitation >= 3) {
      console.log("  Watch for winter precipitation.");
    } else {
      console.log("  Expect a cold but mostly dry month.");
    }
  } else {
    console.log("  It is mild.");

    if (weather.windy) {
      console.log("  Prepare for windy conditions.");
    } else {
      console.log("  Expect calm weather.");
    }
  }
}

Homework

Make a nested conditional that does the following:

1. Contains more than one nested conditional.
2. Uses the numbers 1-100.
3. Checks whether each number is divisible by each factor of 5.

Homework starter

%%js
// CODE_RUNNER: Make a nested conditional homework.

// TODO: Use the numbers 1-100 and check divisibility by each factor of 5.