← ACARA Digital Technologies Years 7–8

Visual if and if-else blocks to JavaScript

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.

Part of: ACARA Digital Technologies Years 7–8 — Programming with Control Structures and Functions (JavaScript) — Module 39

Understanding Visual if and if-else blocks to JavaScript in ACARA Digital Technologies Years 7–8

What it does: Putting another if-else block inside the else slot is written in JavaScript as else if, which checks a second condition only when the first is false. The visual not block turns into ! and the or block turns into ||. The condition is true if it is not raining or you have a coat. The visual = block asks a question, so it becomes === in JavaScript. A single = would assign a value instead of comparing. Each side of || needs its own full comparison. Writing just 'Sun' on its own is always treated as true, so the check does not work.

Common mistakes: The hexagon condition must go inside brackets in JavaScript. It should be: if (score >= 50) {. A single = assigns a value. The = block in a visual condition becomes === when comparing. It should be: if (colour === "red") {.

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Visual if and if-else blocks to JavaScript to a class →

This module's key terms are also in a printable crossword (Modules 583–598) and word search (Modules 583–613).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
A visual if block has the hexagon condition 'score = 50'. Which JavaScript condition checks this?
if (score === 50) { }if (score = 50) { }
Matches
if (score = 50) {
↓
A single = assigns a value instead of comparing. The = block in a hexagon should become === in the condition.
Applying
Meanings
Term
if (score >= 50) { } else { }
Meaning
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.
Practice
let weather = "rain";
Testing
Gaps
(score >= 50) {
Check Answer
Spots
1let score = 60;
2if score >= 50 {

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Cosmic Owl' badge — Comprehension Guru, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. A visual if block has the hexagon condition 'score = 50'. Which JavaScript condition checks this?
A. if (score === 50) { } ✓
B. if (score = 50) { }
The visual = block asks a question, so it becomes === in JavaScript. A single = would assign a value instead of comparing.
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?
A. if (age >= 13) { } else { } ✓
B. if age >= 13 { } else { }
In JavaScript the condition must go inside brackets after if. The steps from each part of the block go inside curly braces.
3. In a visual if-else block, where do the steps from the 'else' part of the block go in JavaScript?
A. Inside the brackets after if
B. Inside the curly braces after else ✓
The brackets after if hold only the condition. Each part of the block becomes a pair of curly braces holding its steps.
4. A visual block has two conditions joined by an 'and' block: temp > 20 and sunny. Which JavaScript joins them correctly?
A. if (temp > 20 and sunny) { }
B. if (temp > 20 && sunny) { } ✓
The 'and' block becomes && in JavaScript. The words and, or and not are not used as operators in JavaScript.
5. A visual 'or' block joins two conditions: day === 'Sat' or day === 'Sun'. Which JavaScript is correct?
A. if (day === 'Sat' || day === 'Sun') { } ✓
B. if (day === 'Sat' || 'Sun') { }
Each side of || needs its own full comparison. Writing just 'Sun' on its own is always treated as true, so the check does not work.

Match the Pairs

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
if (a === 5 && b === 2) → An 'and' block joining two = checks becomes && with === comparisons
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 { }
A 'not' block around a condition becomes ! in front of it, and an 'or' block becomes || → if (!raining || hasCoat)
if (score = 50) { → A single = assigns a value instead of comparing. The = block in a hexagon should become === in the condition.
if score >= 50 { → The condition is missing its round brackets. The hexagon condition must be written inside ( ) after if.

Key Term

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.

Fill in the Blanks

1. if (score >= 50) { console.log("Pass"); }
Hint: Type the keyword that turns the visual if block into a typed statement.
2. if (temp > 30) { console.log("Hot"); } else { console.log("Cool"); }
Hint: Type the keyword for the lower part of an if-else block, which runs when the condition is false.
3. if (answer === 7) { console.log("Correct!"); }
Hint: Type the comparison operator that replaces the equals block and checks that two values match.
4. if (age >= 10 && age <= 12) { console.log("Allowed"); }
Hint: Type the operator that replaces the 'and' block so both conditions must be true.
5. if (score >= 80) { grade = "A"; } else if (score >= 50) { grade = "B"; } else { grade = "C"; }
Hint: Type the two-word keyword that replaces a nested if-else block and tests a second condition.

Spot the Error

Question 1
A let score = 60;
B if score >= 50 {
C console.log("Pass");
D }
Line B — The hexagon condition must go inside brackets in JavaScript. It should be: if (score >= 50) {
Question 2
A let colour = "red";
B if (colour = "red") {
C console.log("Stop");
D }
Line B — A single = assigns a value. The = block in a visual condition becomes === when comparing. It should be: if (colour === "red") {
Question 3
A let temp = 30;
B if (temp > 25) {
C console.Log("Hot");
D } else {
E console.log("Mild");
F }
Line C — JavaScript is case sensitive, so log must be written in lowercase. It should be: console.log("Hot");
Question 4
A let score = 85;
B if (score >= 90) {
C console.log("A");
D } else if score >= 80 {
E console.log("B");
F }
Line 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) {
Question 5
A let age = 14;
B let ticket = true;
C if (age >= 12 && ticket) {
D console.log("Enter";
E }
Line D — The closing bracket of console.log is missing. Every opening bracket needs a closing one. It should be: console.log("Enter");

Student with a class code? Join your class →