Welcome to Visual (Block-Based) Programming!
Have you ever played a video game, used an app, or watched an animated movie and wondered how it was made? Behind all of them is programming (or coding) — the art of giving instructions to a computer so it knows what to do.
In this chapter, we explore visual block-based programming (using environments like Scratch). Instead of typing lines of text where a single typo could break everything, visual programming lets you snap colourful code blocks together like jigsaw pieces. It gives you the power to create games, solve computational problems, and build a solid foundation before moving on to text-based languages like Python.
Don't worry if this seems a bit tricky at first! Once you understand a few golden building blocks, you will be able to create almost anything you can imagine.
---1. The Visual Coding Environment
Before we start giving commands, let's look at the basic elements of a block-based interface:
• Sprites: These are the characters or objects in your project (like a cat, a spaceship, or a bouncing ball) that perform actions, move, and react.
• The Stage: The background area or screen where your sprites come to life and where you see the visual output of your program.
• Events: Special trigger blocks that tell the computer when to start running a script. For example: "When Green Flag Clicked" or "When [Space] Key Pressed".
• Sensing Blocks: Blocks that allow your program to detect user input or sprite interactions, such as "touching [Sprite1]?" or "key [space] pressed?".
Key Takeaway: An Event starts your script, Sensing detects what is happening around the sprite, and the Sprite acts out the instructions on the Stage.
---2. The Big Three: Core Programming Constructs
Every single computer program in the world — from a simple Scratch maze game to the software running a space rocket — is built using three fundamental control structures: Sequence, Selection, and Iteration.
A. Sequence
Sequence means running instructions in a strict, step-by-step order from top to bottom.
• Real-world Analogy: Think of baking a cake or following a recipe. You must mix the ingredients before putting the cake in the oven. If you mix up the order, the cake will not turn out right!
• In visual programming, sequence is shown by snapping blocks together vertically. The computer reads and executes the top block first, then moves down one block at a time.
B. Selection
Selection is where your program makes a decision and chooses which path to take based on a condition (a question that evaluates to True or False).
• IF Block: Runs an action only if the condition is true.
Example: IF \( \text{score} = 10 \), play a cheering sound.
• IF-THEN-ELSE Block: Gives two distinct pathways. If the condition is true, it does one thing; otherwise (else), it does something completely different.
Example: IF \( \text{lives} > 0 \), keep playing, ELSE show "Game Over".
• Real-world Analogy: IF it is raining, take an umbrella, ELSE wear sunglasses.
C. Iteration (Looping)
Iteration means repeating a set of instructions multiple times without having to duplicate blocks.
There are two main types of iteration you must know:
1. Count-Controlled Iteration: Repeats code a fixed, predetermined number of times (e.g., "Repeat 10").
Analogy: Doing exactly \(10\) star jumps in PE class.
2. Condition-Controlled Iteration: Repeats code until a specific event or condition becomes true (e.g., "Repeat until <touching edge>").
Analogy: Running around the track until you hear the teacher blow the whistle.
Key Takeaway: Sequence is the order of steps; Selection makes decisions (IF/ELSE); Iteration repeats instructions (Loops).
---3. Data, Variables, and Lists
Variables and Assignment
A variable is a named storage space in the computer's memory used to hold data that can change while the program is running.
• Analogy: Picture a labelled storage box. If you label the box score, you can place a number inside it, look inside to see what it is, or replace the number with a new one as you gain points.
• Assignment: This is the action of putting a value into a variable (e.g., "Set [score] to \(0\)" or "Change [score] by \(1\)").
Data Types
Even though visual block languages make handling data easy, you need to understand the main data types:
• Integer: A whole number, positive or negative (e.g., \(5\), \(-3\), \(100\)). Used for scores, health points, or lap counters.
• String: Text, letters, or a combination of characters (e.g., "Game Over", "Player 1").
• Boolean: A value that can only ever be True or False.
Lists (Arrays)
A list is an ordered collection of data items stored together under a single variable name.
• Instead of creating separate variables like item1, item2, and item3, you can create one list called inventory that holds all items (e.g., "Key", "Shield", "Potion").
Key Takeaway: A variable stores a single changing piece of data, while a list stores a collection of items under one name.
---4. Operators and Logic
Operators allow your programs to perform calculations, compare values, and make smart decisions.
Arithmetic Operators
Computers use arithmetic blocks to do mathematics:
• Addition: \( + \)
• Subtraction: \( - \)
• Multiplication: \( * \)
• Division: \( / \)
• Modulo (mod): Finds the remainder after division. For example, \( 7 \text{ mod } 2 = 1 \) because \(2\) goes into \(7\) three times with a remainder of \(1\). This is super handy for checking if a number is even or odd!
Comparison Operators
These compare two values and result in either True or False:
• Equal to: \( = \)
• Greater than: \( > \)
• Less than: \( < \)
• Greater than or equal to / Less than or equal to: \( \ge \) and \( \le \)
Logical (Boolean) Operators
These blocks allow you to combine or invert conditions:
• AND: Both conditions must be true (e.g., \( \text{keys} = 3 \text{ AND } \text{at door} = \text{True} \)).
• OR: At least one condition must be true (e.g., \( \text{health} = 0 \text{ OR } \text{timer} = 0 \)).
• NOT: Reverses the condition (e.g., \( \text{NOT } (\text{touching edge}) \)).
Key Takeaway: Arithmetic calculates values, Comparison tests values, and Logical operators combine multiple conditions.
---5. Modular Programming and Procedures
As your programs grow larger, keeping all your blocks in one long stack can become messy and confusing. To keep code clean and organised, programmers use modular programming.
Decomposition
Decomposition is the computational thinking skill of breaking down a large, complex problem into smaller, manageable sub-problems.
Procedures ("My Blocks")
In visual languages like Scratch, a procedure is created using "My Blocks".
• A procedure is a reusable block of code that carries out a specific task.
• You define the block once (e.g., "define Jump" containing the movement blocks) and then simply call the "Jump" block whenever you need your sprite to jump.
• Why use procedures? It reduces repeated code, makes your scripts easier to read, and allows you to fix bugs in one single place!
Key Takeaway: Decomposition breaks down big tasks, and Procedures ("My Blocks") turn those tasks into neat, reusable chunks of code.
---6. Pitfalls to Avoid (Common Misconceptions)
Even expert coders make mistakes! Here are common traps to watch out for:
• The "If" vs. "Forever If" Trap: An IF block only checks its condition once at the exact millisecond the computer reaches it in the sequence. It does not sit and wait for the condition to happen. If you want your game to constantly check if a sprite is touching something, place your IF block inside a continuous loop (like a forever loop)!
• Adding Conditions to "ELSE": The ELSE part of an IF-THEN-ELSE block is a "catch-all" basket for whenever the condition is False. You do not attach a condition directly to ELSE.
• Mixing up AND vs. OR: If you want to check if a score is between \(10\) and \(20\), you must write:
\( \text{score} > 10 \text{ AND } \text{score} < 20 \).
If you use OR, any number in the world would make it True!
• Variable Scope Confusion: In Scratch, pay attention to whether a variable is created "For all sprites" (Global) or "For this sprite only" (Local). A sprite cannot change another sprite's local variable directly.
• Off-by-One Loop Errors: Be careful when setting up loops with counters. Starting your counter at \(0\) versus starting at \(1\) will change how many times the loop needs to run to reach your target!
---Quick Review Summary
• Sequence: Blocks run one after another from top to bottom.
• Selection: Making decisions using IF and IF-THEN-ELSE.
• Iteration: Repeating code using count-controlled (fixed number) or condition-controlled (repeat until) loops.
• Variables: Named memory boxes that store data (Integers, Strings, Booleans).
• Lists: Named collections that hold multiple items.
• Modular Code: Using My Blocks (procedures) to make code reusable and easier to debug.