Visual if and if-else blocks to JavaScript
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. A visual if block has the hexagon condition 'score = 50'. Which JavaScript condition checks this?
2. Which code matches an if-else block that does one thing when age is 13 or more and another thing when it is not?
3. In a visual if-else block, where do the steps from the 'else' part of the block go in JavaScript?
4. A visual block has two conditions joined by an 'and' block: temp > 20 and sunny. Which JavaScript joins them correctly?
5. A visual 'or' block joins two conditions: day === 'Sat' or day === 'Sun'. Which JavaScript is correct?
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1if (score >= 50) { } else { } | Aif (age < 13) { } else if (age < 18) { } else { } | |
| 2if (a === 5 && b === 2) | BA single = assigns a value instead of comparing. The = block in a hexagon should become === in the condition. | |
| 3A nested if-else block (an if-else placed in the else part) becomes an else if chain | CAn 'and' block joining two = checks becomes && with === comparisons | |
| 4A 'not' block around a condition becomes ! in front of it, and an 'or' block becomes || | DThe condition is missing its round brackets. The hexagon condition must be written inside ( ) after if. | |
| 5if (score = 50) { | EThe visual if-else block as JavaScript: the hexagon condition goes in brackets and each branch's steps go inside curly braces | |
| 6if score >= 50 { | Fif (!raining || hasCoat) |
C
Definitions
if (score >= 50) { } else { }
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
__ (score >= 50) {
console.log("Pass");
}
2.
if (temp > 30) { console.log("Hot"); }
____ { console.log("Cool"); }
3.
if (answer ___ 7) {
console.log("Correct!");
}
4.
if (age >= 10 __ age <= 12) {
console.log("Allowed");
}
5.
if (score >= 80) { grade = "A"; }
_______ (score >= 50) { grade = "B"; }
else { grade = "C"; }
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
let score = 60;
B
if score >= 50 {
C
console.log("Pass");
D
}
Question 2
A
let colour = "red";
B
if (colour = "red") {
C
console.log("Stop");
D
}
Question 3
A
let temp = 30;
B
if (temp > 25) {
C
console.Log("Hot");
D
} else {
E
console.log("Mild");
F
}
Question 4
A
let score = 85;
B
if (score >= 90) {
C
console.log("A");
D
} else if score >= 80 {
E
console.log("B");
F
}
Question 5
A
let age = 14;
B
let ticket = true;
C
if (age >= 12 && ticket) {
D
console.log("Enter";
E
}
Answer Key
Visual if and if-else blocks to JavaScript
Section A: Quick Questions
Q1
A — if (score === 50) { }
Q2
A — if (age >= 13) { } else { }
Q3
B — Inside the curly braces after else
Q4
B — if (temp > 20 && sunny) { }
Q5
A — if (day === 'Sat' || day === 'Sun') { }
Section B: Match the Pairs
Q1
if (score >= 50) { } else { } → The visual if-else block as JavaScript: the hexagon condition goes in brackets and each branch's steps go inside curly braces
Q2
if (a === 5 && b === 2) → An 'and' block joining two = checks becomes && with === comparisons
Q3
A nested if-else block (an if-else placed in the else part) becomes an else if chain → if (age < 13) {
} else if (age < 18) {
} else {
}
Q4
A 'not' block around a condition becomes ! in front of it, and an 'or' block becomes || → if (!raining || hasCoat)
Q5
if (score = 50) { → A single = assigns a value instead of comparing. The = block in a hexagon should become === in the condition.
Q6
if score >= 50 { → The condition is missing its round brackets. The hexagon condition must be written inside ( ) after if.
Section C: Definitions
Q1
if (score >= 50) { } else { } — A visual if-else block becomes if/else code. The hexagon condition goes in brackets as a comparison, and the steps from each part of the block go inside curly braces.Section D: Fill in the Blanks
Q1
if (score >= 50) {
console.log("Pass");
}Q2
if (temp > 30) { console.log("Hot"); }
else { console.log("Cool"); }Q3
if (answer === 7) {
console.log("Correct!");
}Q4
if (age >= 10 && age <= 12) {
console.log("Allowed");
}Q5
if (score >= 80) { grade = "A"; }
else if (score >= 50) { grade = "B"; }
else { grade = "C"; }Section E: Spot the Error
Q1
B — The hexagon condition must go inside brackets in JavaScript. It should be: if (score >= 50) {
Q2
B — A single = assigns a value. The = block in a visual condition becomes === when comparing. It should be: if (colour === "red") {
Q3
C — JavaScript is case sensitive, so log must be written in lowercase. It should be: console.log("Hot");
Q4
D — The condition in a nested if-else block becomes an else if with the comparison inside brackets. It should be: } else if (score >= 80) {
Q5
D — The closing bracket of console.log is missing. Every opening bracket needs a closing one. It should be: console.log("Enter");