Blockly and visual programming

Blockly is a visual programming tool created to help beginners understand the concepts of programming. By using a number of block types, Blockly allows a user to create a program without entering any lines of code. This is shown in Figure 1.


Figure 1

Blockly implements visual programming by assigning different programming structures to colored blocks. The blocks also contain slots and spaces to allow programmers to enter values required by the structure. Programmers can connect programming structures together by dragging and attaching the appropriate blocks. Programming structures such as conditionals, loops, and variables are all available for use.

Creating a new variable in Blockly is a simple matter of dragging the variable block onto the work space and filling in the value slot. It is also possible to change the contents of a variable as the program is being executed.

Blockly also supports functions. Similar to the variables, Blockly has specific blocks to represent functions. Also similar to variables, programmers simply select and drag function blocks to the work space and fill in the required slots.

Notice in Figures 1  that the variable block and the print on screen block both have a bevel tab on the bottom and a slot on the top. This means that the two blocks can be snapped together to create a program sequence. Blockly will execute the block on the top first, then move on to the block below it.

Other blocks are available such as an IF THEN block, a WHILE block and a FOR block. There are also blocks specifically for sensors and actuators.

Blockly can be used to translate the block-based code into Python or JavaScript. This is very useful to beginner programmers.

Variables and Basic Statements

Blockly is a visual programming tool created to help beginners understand the concepts of programming. By using a number of block types, Blockly allows a user to create a program without entering any lines of code.

Blockly implements visual programming by assigning different programming structures to colored blocks. The blocks also contain slots and spaces to allow programmers to enter values required by the structure. Programmers can connect programming structures together by dragging and attaching the appropriate blocks. Programming structures such as conditionals, loops, and variables are all available for use.

A variable is a programming entity used to store data. Essentially, a variable is a piece of memory that can be assigned a human-readable name for data storage and retrieval. It is also possible to change the contents of a variable as the program is being executed.

Creating a new variable in Blockly is a simple matter of dragging the variable block onto the working space area and filling in the value slot. The figure shows a Blockly variable.

Blockly also supports functions. Similar to the variables, Blockly has specific blocks to represent functions. Also similar to variables, programmers simply select and drag function blocks to the workspace area and fill in the required slots.

Notice that the variable block and the print on screen block both have a bevel tab on the bottom and a slot on the top. This means that the two blocks can be snapped together to create a program sequence. Blockly will execute the block on the top first, then move onto the block on the bottom.

Other blocks are available such as IF THEN block, WHILE block and FOR block. There are also blocks specifically for sensors and actuators.

Lastly, Blockly can be used to translate the block-based code into Python or JavaScript. This is very useful to beginner programmers.

The figure displays a blockly variable with the description of “VAR1, a Blocky variable created and assigned the value of 5” The blockly code is “set VAR1 to 5”


Figure 2


IF-THEN Conditional

The IF-THEN conditional structure is used to allow the code to make decisions. Upon testing the veracity of an expression, the program will skip to the next statement if the expression evaluates as false. If the expression is true, the THEN action is executed before moving on to the next statement in the code.

The Blockly program shown in Figure 1 represents a program that determines who the oldest person of two people is. The program asks the user to enter the age of the first person and stores it in a variable called PERSON1. Then the program asks for age of the second person and stores it in another variable called PERSON2. Lastly, the program compares the two ages and prints who is the older of the two people.

Figure 2 shows the equivalent Python code.


Figure 3


FOR Loops

FOR loops are used to repeat the execution of a specific block of code for a specific number of times. It is common to use FOR loops when the number of iterations is known beforehand.

The Blockly program shown in the figure uses a FOR loop to determine all the prime numbers between 1 and 100. Prime numbers are numbers that are divisible only by 1 or by the number itself, and are printed on the screen, while non-primes are ignored.

The program uses two FOR loops to calculate the remainder of the division between the number being tested and the numbers between 2 and itself. If the remainder of that division is zero, the number is not a prime. If no division yields a remainder equal to zero, then that is a prime number. The program prints the prime on the screen and moves on to test the next number, only stopping when it hits 100.

The blockly code in the figure is: count with j from 1 to 100 by 1do if j > 1do count with i from 2 to j by 1do et remainder to remainder of j + iif remainder = 0do break out of loopelse Write on screen jPrint on screen "is a prime"


Figure 4


WHILE Loops

WHILE loops are used to execute a block of code while a condition is true. The code within the WHILE loop often modifies variables and entities to eventually make the expression false. If the expression tested by the WHILE never becomes false, the loop runs forever and is called an infinite loop. Infinite loops are usually undesirable in programming.

The Blockly program shown in the figure uses a WHILE loop to create a guessing game. The program picks a random number between 1 and 10 and asks the user to guess it. The program will keep asking for a guess until the user guesses the correct number.


Figure 5

Beginners can use Blockly to easily create a language-independent program, export it as Python code and use this newly created code to learn about Python syntax, structure and semantics.

The following figures show the Guessing Game program in both Blockly and Python formats:


Figure 6

Figure 5 is a screenshot of the guessing game in blockly. Figure 6 is the exported python code from the guessing game in blockly.


Last modified: Tuesday, 13 July 2021, 2:30 PM