ISSN 2278-3091

Volume 10, No.3, May - June 2021

Ashfaq Ahmad et al., International Journal of Advanced Trends in Computer Science and Engineering, 10(3), May - June 2021, 2524 – 2532
International Journal of Advanced Trends in Computer Science and Engineering
Available Online at http://www.warse.org/IJATCSE/static/pdf/file/ijatcse1431032021.pdf
https://doi.org/10.30534/ijatcse/2021/1441032021

BBVPL: A Block-Based Visual Programming Language

Built on Google’s Blockly
Ashfaq Ahmad1, Muhammad Idrees2, Muhammad Arif Butt2, Hafiz Muhammad Danish3
1
Department of Computer Science, College of CS & IT, Jazan University, Saudi Arabia
2
Department of Data Science, University of the Punjab, Lahore, Pakistan
3
Department of Computer Science, University of Lahore, Pakistan

ABSTRACT fields. Java, Php, Python, etc. are a few examples of TPLs [1].
On the other side, VPLs provide a visual interface that
The paper presents a Block-based Visual Programming facilitates the users by manipulating program elements
Language (BBVPL) built on an open-source Google’s Blockly graphically [2]. VPLs use visual syntax that represents
Framework. BBVPL inherits Blockly’s alive features as well terminals in the form of pictures [3]. Software developers
as provides new functionalities. Although, the existing Visual solely need to drag-drop visual elements [4] on a canvas to
Programming Languages (VPLs) such as Flowgorithm, create, modify, and design pictorial program structure. A lot of
Raptor, Flint, Larp, Snap, Scratch, Kodu, Blockly, and many VPLs are accessible to educational and professional
more, provide a graphical computer programming interface for programming purposes. Flowgorithm, Raptor, Visual Logic,
learning and educational purposes. Some of them are used for Scratch, Blockly, Kodu, Microsoft VPL, EToys,
kid’s games and robotic applications development and others TouchDevelop, GameSalad, Open Roberta and Lego
for general- purpose programming. But they lack fundamental Mindstorms are a few examples of Visual Programming
programming capabilities mostly being used to teach basic Languages [5]. A programming language, either a VPL or a
programming concepts. Therefore, the feature enhancement TPL should provide competence to create arrays, custom
approach has used, and new iconic vocabulary and grammar modules, the user’s defined data types and file handling [6]. It
created by Blockly’s Block-factory module to develop a new should provide an interactive input-output (I/O) interface,
language (BBVPL). In this paper, BBVPLs programming exception handling, multithreading, and debugging
features have introduced to teach computer programming skills, capabilities. The surviving VPLs lack fundamental
especially for beginners in computer science. The BBVPL programming features discussed earlier [7]. So, the time is to
provides an intuitive visual drag-drop program development propose an all-in-one VPL that can provide an interactive user
interface and a user-friendly console for input-output (I/O). It I/O with proper file handling. A VPL that can manage object
offers essential programming features, including Object orientation, lists of data, customized modules, exceptions and
Orientation, Modular Support, Conditions (If-Else), Loops debugging capability to grip bugs and errors.
(For, While), Exceptions (Throw, catch, Finally), and File
Handling. However, the BBVPL can translate Visual Program Google’s Blockly [8], [9], an open-source framework, is
into Textual Program that will execute, and results will be provided with visual block-based icons and a drag-drop
shown on the console screen. To accomplish this, some programming environment. A computer programmer selects
experimental visual programs and their translated textual codes desired visual blocks and connects them at the pro- vided
are also part of our paper, indicating the smooth working of our platform according to the Blockly’s syntax and program’s
tool. The integration of user’s roles and rights management that logic. Blockly also permits the transformation of visual
will provide proper user access to save their programs on the programs into corresponding textual codes, e.g., JavaScript,
server, debugging, and multithreading features will be the parts Php, Python, Dart, and Lua [10]. It executes visual programs
of BBVPL in the future. and empowers to design a new Visual Programming Language
(VPLs). Existing Blockly pro- vides various features including
Keywords: Textual Programming Languages (TPLs), Visual arrays creation, conditions, loops, custom modules, and input-
Programming Languages (VPLs), Open Source, Web-based, output (I/O). Still, some critical programming concepts are
Interactive input-output (I/O), Exceptions, Debugging, missing, just as users defined data types, exception handling,
Multithreading, Block-based Programming, Visual file handling competency [11], debugging, and multithreading
Programming and user interface support.

1 INTRODUCTION In this paper, the work has been done on a Block-based

Visual Programming Language (BBVPL), a VPL to teach
The computer programs can be developed either using fundamental computer programming skills, that is stemming
Textual Programming Languages (TPLs) or Visual from Google’s Blockly framework. The Blockly’s block
Programming Languages (VPLs). In TPLs, a computer factory [12] module assists in developing BBVPL’s iconic
program is a sequence of textual directives that might be vocabulary and grammar. BBVPL provides Blockly’s
operation fields, operand fields, name fields, and comment contemporary features as well as newly created functionalities.
It includes object orientation and exception handling power

2524
Ashfaq Ahmad et al., International Journal of Advanced Trends in Computer Science and Engineering, 10(3), May - June 2021, 2524 – 2532

with proper availability of try-catch blocks. It has all-inclusive used to teach programming concepts and provided sequential,
functionalities related to files, including open file, close file, selection, and repetitive structures for computer programming.
read line, read char, write line, seekp, seekg, tellp, and tellg Hooshyar and et. al., in their paper [18], emphasize that Raptor
along with others. Although input-output (I/O) feature is and similar visual programming tools enhance the
available in Blockly, shown in Figure 1, it is a discomfort to understanding of novice programmers. Raptor as a CS0 [19]
watch a lot of pop-ups and alerts on screen for I/O. BBVPL course, provides arrays, object orientation, modular support,
also enables an interactive console-based I/O facility as well. file input/output, and debugging services but lack of exception
handling features and threads creation. The primary purpose
of Raptor was to enhance solving skills of student’s problems.
Its stable release of 2015 is freely available [20].

Larp, a software which was officially released in 2004,

to teach structured programming and algorithms, is using
pseudo-code and flowcharts [21]. Rapid prototyping of
algorithms is the principal purpose of Larp programming
language [22]. It has the potential to transform textual
algorithms (pseudo code) into flowcharts to make them more
understandable [23]. Object orientation, arrays creation
variables, if-conditions, structures, modular support,
debugging, and data storage features, with a simple user-
friendly working environment, makes it more practical
Figure 1: Blockly’s sample program especially for teaching purposes. Latest stable version of the
application released in 2008, is freely available.
2 RELATED WORK
Scratch, a free scholastic programming language
Ivan Sutherland’s groundbreaking Sketchpad system developed by Lifelong Kindergarten Group at Massachusetts
designed in 1963 at MIT, was the first application to create 2D Institute of Technology (MIT) in 2005, is based on the idea of
graphics and led to the invention of VPLs [13]. A pioneered blocks. In that, the user has to drag and drop programming
human-computer interactive software awarded with Turing blocks from a block palate and connect them like a jigsaw
Award in 1988, provided the medium of line, mechanical puzzle [24]. Scratch is also using as an Integrated Development
shapes, electric circuits drawing and the like. The domain of Environment (IDE) for children of aged between 9 to 11. Its
man-machine communication was built, where a developer block programming technique makes it easy to write program
used a light pen and push buttons to draw, move and more of code and to learn problem-solving skills for schoolchildren
the same. Sketchpad eliminated typed written statement [25]. It has different tools to create interactive stories, kid’s
method used in the past, to converse computer. In 1965, Ivan games, simulations, animations arts and many more using
Sutherland’s Brother William contributed by creating a Visual block-based programming [26]. Built-in paint and sound
Dataflow Language (VDL) [14]. He used Sketchpad on the editor are the parts of it, but unable to provide object
TX-2 computer at MIT, the first graphics application, to orientation, file I/O, and exception handling amenities. Its
develop VDL that provided the services of creation, stable version was released in 2013 [27].
debugging, and execution of data flow diagrams. David
Canfield Smith’s published his Ph.D. work in 1975. Microsoft VPL [28], a robotic application development
“Pygmalion: A Creative Programming Environment” is an tool was initially released in 2006, in which a program is a
application that provided us icon-based programming sequence of activities and each of them is connected to
interface. A programmer could use visual icons and perform a single task. A Microsoft VPL data flow is
connections to create and link small visual objects [15]. represented as adjacent activity blocks of inputs and outputs
that can be connected with other activity blocks. It has the
Flowchart Interpreter System (FLINT) was developed to competency of creating arrays, lists, if-else conditions,
avoid syntax problems and helped to enhance the solving skills variables, customized activities, debugging, and multitasking
of student’s issues as an introductory programming course [16]. support, but lack of object orientation, file I/O, and exceptions.
It provides students, a top-down environment to design Students, enthusiasts, web developers, and professional
algorithms as flowcharts and iconic interface in which buttons programmers are the audience of Microsoft VPL [29].
enable to add and remove child nodes in flowchart structure
instead of drag-drop visual elements. A student begins by Michael Agustin, Dan Treiman and Tan Tran in 2007
developing a structure chart and then creates many significant founded GameSalad, a visual drag and drop development tool
steps in it that can be implemented separately. It facilitates based on games. The software enables professional
with input, output, if-conditions, loops, variables, and programmers as well as non-programmers to create two-
modules. Step by step program execution (debugging) by dimensional (2D) games for social networks like Facebook,
highlighting the current statement is the key feature that makes Android, and IOS devices (iPhone/iPad) [30]. It allows
variables and programs logic observable [17]. consumers to design and develop their distinctive games and
offers the ability to collaborate with other users. GameSalad
In 2004, the first release of Raptor published, in which used innovative technology and provided a professional-level
Martin Carlisle designed a flowchart-based application for of artificial intelligence using complex algorithms. It is an
students to visualize algorithm graphically. It was not only open-source platform, and freely available to download [31].
used for writing and execution of a computer program but also

2525
Ashfaq Ahmad et al., International Journal of Advanced Trends in Computer Science and Engineering, 10(3), May - June 2021, 2524 – 2532

Stencyl was published in 2011 for kid’s game Perl, Java, etc. The existing features of the Flowgorithm are
development [32]. It can manage to create 2D games for the array creation, modular support, graphical variable window
web and mobile devices. Aside from icon palate contains watch, multilingual support, loop, flexible expressions,
resources and logic to create an actor and sets its behavior. A recursion, and understandable interactive output [40].
user may define backgrounds, tiles, and sounds, to plan more
attractive games [33]. It provides intuitive tool-set and best 3 BLOCKLY’S EXISTING FEATURES
drag-drop interface to accelerate workflow. Stencyl supports
comprehensive deployment platforms including IOS Google’s Blockly Library based on JavaScript is an open-
(iPhone/iPad), Android, Windows, Mac, and Linux. Still, source framework that activates the development of new
there are some deficiencies in the above-defined Visual Programming Languages (VPLs). Blockly also
characteristics, essential for the completeness of a VPL [34]. provides a drag-drop platform to develop a visual computer
program by using its built-in visual icons. It can generate
In 2012, Google developed Blockly, an open-source textual code in different languages including JavaScript, Php,
VPL similar to scratch. A user may create a program using Python, Lua, and Dart. It can be used to create custom
Blockly provided web-interface and he is capable of executing generators of other TPLs as well [11]. It provides a toolbar,
as well as translating it into JavaScript, Php, Dart, XML, and including the “Logic” group, which holds conditional blocks,
Python [10]. A drag-drop environment with a connection point e.g., If-do, If-Else, Else-If, etc. Blockly implemented transitive
attached to each block enables to chain together on screen. connections [41], in which block makes connections according
Blockly is neither a full application nor a language that is ready to the designed language grammar or syntax and a sound
to use for end-users. It is a platform where users can work with produces that indicates the creation of a correct block couple.
an already built-in set of vocabulary (visual icons or blocks) The “C” shaped block in Blockly enables loops, e.g., “For
as well as can create their visual blocks and can associate code Loop”, “While Loop”, and “For Each Loop”. It allows putting
with each of them accordingly. Blockly provides arrays, loops, repetition statement blocks inside the “C” shaped block.
modular support, conditions, and others. Still, it surpluses to
enable interactive user I/O interface. It shows Java Script’s “Math” group contains mathematical visual blocks to
alert pop-ups to represent output of the program instead of a calculate random numbers, square root and to perform
proper black screen console. Moreover, exception handling, addition, subtraction, division, and similar operations.
multithreading, debugging, structures, object orientation, and Trigonometric functions, e.g., sine, cosine, and tangent are also
file I/O services are missing segments, that are necessary for part of this collection. It has the proficiency to create variables,
the completeness of a language [11]. arrays, and lists. Blockly provides the user’s input-output (I/O)
capability using windows alerts and prompts. In Blockly’s
Lego produced a hardware-software platform Lego toolbar, the “Text” group contains a “print” block connects
Mindstorms EV3 in 2013, for the development of a robotic with a “variable” or a “string” block to display values, while
application for Lego building blocks. Robot development is the “prompt” block prompts a message and stores inputted
the primary step using Lego bricks, motors, wheels, sensors, value of a variable shown in Figure 1.
etc. Then a user has to download EV3 [35] application for
PC/MAC or Tablet to write a program. The software facilitates Blockly’s “Functions” group provides modular
with a toolbar, full of functional blocks and drag-drop functionality. Again the “C” shaped visual “do something”
capability that enables a developer to join different activates. block allows us to create functions and return values. It does
A programmer can bring life into a robot by controlling motors also permit the user to put related visual statements in- side.
and sensors programmatically [36]. Blockly provides a drag-drop platform as well as a textual
language generator framework that translates the visual code
Visual Logic, another intuitive graphical flowchart- to TPL’s, e.g., JavaScript, Lua, Dart, Php, Python, and XML.
based VPL, developed to teach students diagrammatically. A It can also execute translated JavaScript code [42] by clicking
graphical interface that provides essential programming the rightmost “Run” button as well. Blockly also provides pop-
concepts including variables, arrays, pre-and-post test loops, up-based input-output (I/O) facilities. Its imperative visual
if-else conditions, procedures, debugging, and enhanced I/O icons are shown in Appendix A.
facilities from console and text files as well. It uses minimal
syntax and clarifies the program logic and concepts rather than
4 METHODOLOGY
focusing on program syntax. But its major drawback is
operating system dependency, it is functional only for
It’s all starts with an open-source Google’s Blockly
windows OS [37]. It has the proficiency in executing
framework that is not only a visual programming platform but
flowcharts but object orientation, exception handling, and
also a library that allows developers to create their visual
multitasking features are not developed in it. The latest version
languages [8]. Block-based Visual Programming Language
was launched in 2014 [38].
(BBVPL) is implemented by using the Blockly framework, so
it presents interface similar to Blockly but with more
Flowgorithm, designed by Devin Cook was a free
programming features including structures, exceptions, files,
application, first appeared in 2014. It is a graphical tool that
and interactive console integration. Blockly’s block factory
allows developers to write and execute a program with the help
module [12] was used that enabled us to create an iconic
of flowcharts [39]. Classical flowchart symbols appear in a
vocabulary and language syntax for BBVPL. Then the newly
toolbox; a user solely needs to drag and drop them instead of
created connectable visual icons became part of BBVPL. The
writing the bulk of instructions. It provides an easy way to
three-step program execution life cycle shown in Figure 2, in
write a computer program that can execute directly as well as
which the first step is to connect visual blocks to create a visual
can translate into other source languages like C #, C++, Python,

2526
Ashfaq Ahmad et al., International Journal of Advanced Trends in Computer Science and Engineering, 10(3), May - June 2021, 2524 – 2532

program. Secondly, the visual program translates into program’s output and to deal with the desired input. The
JavaScript textual code, and in the third step, translated code console application is the HTML web page based on
executes, which is further communicating with the console JavaScript. Figure 3 is presenting a sample BBVPL’s program
application for input-output (I/O) purpose. that requests the user to input two numbers, takes the sum of
them, and prints a message on the console if the sum is greater
BBVPL comes up with a console gadget for interactive than 10. Figure 4, presents the console’s output and preferred
user input-output (I/O). It is an open-source console template input as per the program’s logic.
that is modified according to BBVPL’s requirement. The
visual block program, translated into JavaScript executes and
communicates with black console screen to print outputs and
to deal with inputs. Figure 2 is screening the complete
BBVPL’s program execution life cycle. Then the software-
testing phase started, in which complex program scenarios
tried to execute and corrected reported bugs. Finally, the
complete web application BBVPL deployed on a server to
provide user access.

Figure 3: Input Output (I/O) console’s related BBVPL

sample program

Figure 2: BBVPL’s program execution life cycle

5 BLOCK-BASED VISUAL
PROGRAMMING LANGUAGE
(BBVPL) FEATURES

BBVPL provides the same Blockly’s programming

atmosphere with its existing programming proficiency’s such
as arrays creation, conditions, loops, modular support, etc. as Figure 4: BBVPL’s integrated console sample output
well as presents newly created features that are necessary to
teach fundamental programming skills. BBVPL provides 5.2 Structures
console application to communicate with users. It comes up
with users defined data types, exception handling facilities to A structure is a composite data type that can contain a list
catch and throw exceptions. It offers file handling simulation of variables in an association using a continuous block of
to deal with permanent data storage. BBVPL’s freshly memory [44]. It is a technology that can aid software
developed features are discussed below in detail. engineering and can provide object models better fit with
actual problems [45]. Using structures, a developer can create
5.1 Console Application a composite type as a collection of data items, e.g., an object
of a student with the variable name, age, contact, and blood
A console application [43] is a text-only computer group. From this perspective, many programming languages
interface that provides a more straightforward way to facilitate object-orientation support that is necessary to learn
communicate with users either to display outputs or to take basic programming concepts. So, the structure or user-defined
inputs, similar to the modern Textual Programming Languages data type construction capability belongs to the BBVPL, invites
(TPLs) such as C#, Java, Python, etc. Block-based Visual software developers to define their desired objects. Figure 5
Programming Language (BBVPL) implemented an integrated presents selected “Structures” choice, which is further
console application. Although Blockly enables the user’s screening drag-able visual blocks. Table 1 is describing
input-output (I/O) using alerts and pop-ups as shown in Figure structures related to visual blocks, their names, and symbol
1, but continuous alerts and prompts on the screen present an images. A visual block named as “Create structure”, creates a
irritating atmosphere for Blockly. So BBVPL offers an new user-defined data type, and provides an input field to write
interactive console, a black color screen to view the computer structures name and a clickable button to include the

2527
Ashfaq Ahmad et al., International Journal of Advanced Trends in Computer Science and Engineering, 10(3), May - June 2021, 2524 – 2532

structure’s elements. When a developer clicks on a blue

button, a new pop-up opens to a drag-drop “var” block that
connects with the “struct” block to comprise new structure
fields, shown in Figure 5.

Figure 7: Structures related visual program’s textual code

Figure 5: Selected “Structures” group
5.3 Exceptions
The “Create structure variable” block creates an object;
a program developer needs to put an object name and structure A program module must be reliable and fault-tolerant
type. “Set variable value” and “Get variable value” blocks that can manage different failures in a wide verity of
work the same as setter and getter, select an object name, and circumstances instead of crashing the application, and it is only
looked-for filed name to set or get object values. A “Student” possible using the exception-handling capability of a
data type is created with required fields, e.g., student name, programming language [46]. The exception-handling was
roll number, and degree information. Then a “Student” type developed in Lisp in the 1960s and 1970s. It included both
object “student1” created and assigned values of its attributes resumption semantics and termination semantics, which
using set blocks. After that, print the object’s values using get provides a mechanism that not only supports error detection
blocks according to the sample program’s logic in Figure 6. but also redirects towards error handling service routines [47].
The BBVPL’s sample program translated into textual code The anomalous situations require special processing, and
shown in Figure 7. developers need to handle it. For this purpose, the block-based
Visual Programming Language (BBVPL) accelerates the
Table 1: List of “Structures” related blocks exception-handling aptitude that plays a vital role dealing with
irregular processing and to execute the program in a flow.
Sr. Block name Image BBVPL has introduced a new option in its toolbar,
named as “Exceptions”. It provides a “Try” block and a
1 Create structure “Throw” block. The blue color button on the “Try” block
enables us to include the “Catch” and the “Finally” blocks as
2 Create structure variable much as a programmer need using the drag-drop environment,
shown in Figure 8. The “Try” block holds the actual block
3 Set variable value instructions chosen to execute, while the “Catch” block
catches exceptions and accomplishes further alternative
4 Get variable value instructions. Table 2 is showing exceptions related to visual
blocks. “Try” and “Catch” block discussed earlier, while the
“Throw” block throws exceptions of various types. “Try
Catch”, “Try Finally” and “Try Catch Finally” blocks are also
available for software developers.

Figure 6: Structures related BBVPL’s sample program

Figure 8: Selected “Exceptions” group

2528
Ashfaq Ahmad et al., International Journal of Advanced Trends in Computer Science and Engineering, 10(3), May - June 2021, 2524 – 2532

Table 2: List of “Exceptions” related blocks

Sr. Block name Image

1 Try

2 Throw

3 Try Catch

4 Try Finally

Try Catch Finally

Figure 10: Exceptions related visual program’s textual code
5
5.4 Files
A file is a collection of bytes, that keeps data stored
permanently on the secondary storage disk. Text files contain
alphabet and symbols, while binary files consist of 0’s and 1’s
[48]. The four basic operations related to files are opening,
closing, reading and writing a file. The programming
languages provide different built-in functions in this regard,
e.g., fopen(), fclose(), fgets(), fprint() etc. File handling is the
distinctive facility of Block-based Visual Programming
Language (BBVPL) that empowers a software developer to
read and write contents on file. A simulation-based file system
has implemented due to the limitation of JavaScript
(unavailability of client-side file handling). Once a developer
finishes his work, the complete data collected from the file
object, stores on a server location permanently.

Figure 9: Exceptions related BBVPL’s sample program

A BBVPL’s sample program has presented in Figure 9, in

which “try” block executes two iterations of “for loop” and
asks a number. If an inputted number is greater than 10, then
it prints, otherwise throws an exception message. “Catch”
block catches exceptions and prints it. In the end, “finally”
block prints “Finally Completed” message. Figure 10 is
showing the translated textual code.

Figure 11: Selected “Files” group

BBVPL allows clicking “Files” option of drag-drop

2529
Ashfaq Ahmad et al., International Journal of Advanced Trends in Computer Science and Engineering, 10(3), May - June 2021, 2524 – 2532

related visual blocks shown in Figure 11. Table 3 presents all index consequently. On the other side, “Tell Put Pointer” and
file’s related visual blocks, and the first one in the serial is an “Tell Get Pointer” blocks return “Get “and “Put” pointer
“Open File” block made of two inputs and one drop-down indexes. BBVPL also competence to deal with special
field. The placeholder “1” is representing the file descriptor, characters, for instance, backspaces, new line, tab, and end of
and its value should be unique, while the placeholder “File the line. Table 3 is screening “Files” related blocks discussed
Name” represents the file name. The right drop-down field earlier.
represents file mode, which is already filled with different file
creation modes like r, r +, w, w+, a, a+, etc.

Table 3: List of “Files” related blocks

Sr. Block name Image

1 Open File
2 Close File

3 Write Line

4 Read Char

5 Read Line
Figure 13: File’s related visual program’s textual code
6 Seek Put Pointer
Figure 12 is viewing a sample visual program in which
7 Seek Get Pointer the “File Open” block opens a file named as “file1” in “w+”
mode. The “Seek Put Pointer” is setting the “Put” pointer to 0th
8 Tell Put Pointer index and a loop iterates three times, takes an input string and
\
writes inputted contents into “file1”. The next block
9 Tell Get Pointer
instructions print “Put” and “Get” pointing indexes. “Read-
10 Back Space Line” block is reading the file’s character until the end of the
line (\n) character. The textual executable JavaScript code is
11 New Line representing in Figure 13. Finally, the file closed using the
“Close File” icon.
12 Tab
13 End of File 6 CONCLUSION AND FUTURE WORK
A lot of Visual Programming Languages (VPLs) have
been developed for learning and educational purposes and the
rest for games and robotic applications development. The
existing VPLs lack many fundamental programming
capabilities. Teaching programming fundamentals, requires to
use a language either a VPL or TPL that can manage arrays or
lists creation, modular support, exceptions, file handling,
conditions, loops, multithreading, object-orientation, and
debugging support. In this paper, a Block-based Visual
Programming Language (BBVPL) has been proposed and
implemented, based on Google’s Blockly Library that
provides a visual drag-drop programming environment to
teach basic programming concepts. BBVPL helps to learn
vital programming skills, which were discussed earlier. In the
future, it will also provide single-step program execution
(debugging) and multithreading facilities as well. The user’s
Figure 12: File’s related BBVPL’s sample program roles and rights management will be part of BBVPL in the
future.
The second block in Table 3 is “Close File” closes related
file by putting file descriptor number in the provided APPENDIX
placeholder. “Write Line” block to write characters, variables
and string values to the desired file. For file reading purposes, Appendix A tabulates the Visual Icons/Features already
BBVPL provides a single character reader and line by line available in Blockly.
file’s content reading ability using its “Read Char” and “Read
Line” blocks accordingly. “Seek Put Pointer” and “Seek Get
Pointer” blocks to demand an integer value to set the pointing

2530
Ashfaq Ahmad et al., International Journal of Advanced Trends in Computer Science and Engineering, 10(3), May - June 2021, 2524 – 2532

A. Blockly’s Existing Visual Icons 4. K. N. Whitley, “Visual programming languages and

the empirical evidence for and against,” J. Vis. Lang.
Table 4: List of “Blockly’s” related blocks Comput., vol. 8, no. 1, pp. 109–142, 1997.
5. M. K. Kourouma, “Capabilities and Features of
Raptor, Visual Logic, and Flowgorithm for Program
Sr. Block name Image
Logic and Design,” 2016.
1 If do 6. P. B. Hansen, “Distributed processes: A concurrent
programming concept,” Communications of the ACM,
vol. 21, no. 11, pp. 934–941, 1978.
7. T. R. G. Green, M. Petre, and others, “Usability
Analysis of Visual Programming Environments: A
2 If Else if Else
‘Cognitive Dimensions’ Framework,” Journal of
visual languages and computing, vol. 7, no. 2, pp. 131–
174, 1996.
8. E. Tilley and J. Gray, “Dronely: A Visual Block
3 Counter Loop Programming Language for the Control of Drones,”
in Proceedings of the SouthEast Conference, 2017, pp.
4 For each Loop 208–211.
9. N. Fraser and others, “Blockly: A visual programming
editor,” URL: https://code.google.com/p/blockly, 2013.
5 While Loop 10. “Google’s Blockly visual programming
environment.” Accessed: Jul. 28, 2021. [Online].
6 Is Empty Available: https://www.csee.umbc.edu/
2012/06/googles-blockly-visual-programming-
7 String Length
environment
8 Change Case 11. E. Pasternak, R. Fenichel, and A. N. Marshall, “Tips for
9 Prompt For creating a block language with blockly,” in Blocks and
Beyond Workshop (B&B), 2017 IEEE, 2017, pp. 21–24.
10 Print 12. “Custom Blocks Blockly Google Developer.”
11 Function Accessed: Aug. 05, 2018. [Online]. Available:
https://developers.google.com/blockly/guides/create-
12 Variable custom-blocks/overview
13. I. E. Sutherland, “Sketch pad a man-machine
13 Set Variable Value graphical communication system,” in Proceedings of
14 Change Variable the SHARE design automation workshop, 1964, pp. 6–
329.
15 Trigonometric Functions 14. C. BurdeaGrigore and P. Coiffet, Virtual reality
16 Square Root technology. London: Wiley-Interscience, 1994.
15. M. Boshernitsan and M. S. Downes, Visual
17 Return Remainder programming languages: A survey. Citeseer, 2004.
16. T. Crews and U. Ziegler, “The flowchart interpreter
18 Random Integer for introductory programming courses,” in Frontiers
19 Sort in Education Conference, 1998. FIE’98. 28th Annual,
1998, vol. 1, pp. 307–312.
20 Search in List 17. G. Atanasova and P. Hristova, “Flowchart interpreter:
An environment for software animation
representation,” in Proceedings of the 4th International
REFERENCES Conference on Computer Systems and Technologies,
2003, pp. 453–458.
1. M. Erwig and B. Meyer, “Heterogeneous visual 18. D. Hooshyar et al., “A Flowchart-based Multi-Agent
languages - integrating visual and textual System for Assisting Novice Programmers with
programming,” IEEE Symposium on Visual Problem Solving Activities,” Malaysian Journal of
Languages, Proceedings, pp. 318–325, 1995, doi: Computer Science, vol. 28, no. 2, pp. 132–151, Jun.
10.1109/VL.1995.520825. 2015, Accessed: Jul. 28, 2021. [Online]. Available:
2. wikipedia.org, “Visual Programming Language.” https://ejournal.um.edu.my/index.php/MJCS/article/vie
Accessed: Jul. 28, 2021. [Online]. Available: w/6859
https://en.wikipedia.org/wiki/Visual_programming_lan 19. Hooshyar D., Ahmad R.B., Yousefi M., Yusop F.D., and
guage Horng S.-J., “A flowchart-based intelligent tutoring
3. R. Ahmad, “Visual Languages: A New Way of system for improving problem-solving skills of novice
Programming,” Malaysian Journal of Computer programmers,” Journal of Computer Assisted
Science, vol. 12, no. 1, pp. 76–81, Jun. 1999, Accessed: Learning, vol. 31, no. 4, pp. 345–361, Aug. 2015, doi:
Jul. 28, 2021. [Online]. Available: 10.1111/JCAL.12099.
https://ejournal.um.edu.my/index.php/MJCS/article/vie 20. M. Thompson, “Evaluating the Use of Flowchart-
w/5775 based RAPTOR Programming in CS0,” 2012.

2531
Ashfaq Ahmad et al., International Journal of Advanced Trends in Computer Science and Engineering, 10(3), May - June 2021, 2524 – 2532

21. E. Perrin, S. Linck, and F. Danesi, “Algopath: A new 37. G. Cooper, “Using Visual Logic with Pseudocode to
way of learning algorithmic,” 2012. Teach an Introductory Programming Course,”
22. W. Q. Burke, Coding & composition: Youth storytelling proceedings of WorldComp 2014, 2014.
with Scratch programming. University of Pennsylvania, 38. “Visual Logic.” Accessed: Jul. 28, 2021. [Online].
2012. Available: https://www.visuallogic.org/
23. “Microsoft Word - LarpEnV3x.doc”, Accessed: Aug. 39. G. Shobaki, “Computer Science Colloquium Series
06, 2018. [Online]. Available: since 1997 Topics, Speakers, and Abstracts during
http://www.marcolavoie.ca/larp/en/default.html 2010-2015,” 2015.
24. J. Maloney, M. Resnick, N. Rusk, B. Silverman, and E. 40. “Flowgorithm Flowchart Programming Language.”
Eastmond, “The scratch programming language and http://www.flowgorithm.org/ (accessed Jul. 28, 2021).
environment,” ACM Transactions on Computing 41. N. Fraser, “Ten things we’ve learned from Blockly,”
Education (TOCE), vol. 10, no. 4, p. 16, 2010. in Blocks and Beyond Workshop (Blocks and Beyond),
25. N. Zamin, H. Ab Rahim, K. S. Savita, E. Bhattacharyya, 2015 IEEE, 2015, pp. 49–50.
M. Zaffar, and S. N. KatijahMohd Jamil, “Learning 42. “Introduction to Blockly.”
Block Programming using Scratch among School https://developers.google.com/blockly/guides/overview
Children in Malaysia and Australia: An Exploratory (accessed Jul. 28, 2021).
Study,” 2018 4th International Conference on 43. wikipedia.org, “Console Apllication.” Accessed: Jul.
Computer and Information Sciences: Revolutionising 28, 2021. [Online]. Available:
Digital Landscape for Sustainable Smart Society, https://en.wikipedia.org/wiki/Console_application
ICCOINS 2018 - Proceedings, Oct. 2018, doi: 44. Wikipedia.org, “Struct (C programming language).”
10.1109/ICCOINS.2018.8510586. Accessed: Jul. 27, 2021. [Online]. Available:
26. A. Repenning, “Agentsheets: a tool for building https://en.wikipedia.org/wiki/Struct_(C_programming_
domain-oriented visual programming language)
environments,” in Proceedings of the INTERACT’93 45. G. Kiczaleset al., “Aspect-oriented programming,” in
and CHI’93 conference on Human factors in computing European conference on object-oriented programming,
systems, 1993, pp. 142–143. 1997, pp. 220–242.
27. Scratch Wiki, “Scratch.” https://en.scratch- 46. B. H. Liskov and A. Snyder, “Exception handling in
wiki.info/wiki/Scratch (accessed Sep. 06, 2018). CLU,” IEEE transactions on software engineering, no.
28. Y. Chen, Z. Du, and M. Garc\’\ia-Acosta, “Robot as a 6, pp. 546–558, 1979.
service in cloud computing,” in Service Oriented 47. Wikipedia.org, “Exception handling.” Accessed: Jul.
System Engineering (SOSE), 2010 Fifth IEEE 27, 2021. [Online]. Available:
International Symposium on, 2010, pp. 151–158. https://en.wikipedia.org/wiki/Exception_handling
29. “VPL Introduction Microsoft Docs.” Accessed: Sep. 48. “File Handling in C language with inbuilt functions.”
22, 2018. [Online]. Available: https://fresh2refresh.com/cprogramming/ c-file-
https://docs.microsoft.com/en-us/previousversions/ handling/ (accessed Jul. 27, 2021).
microsoft-robotics/bb483088(v=msdn.10)
30. S. Dekhane and X. Xu, “Engaging students in
computing using GameSalad: a pilot study,” Journal
of Computing Sciences in Colleges, vol. 28, no. 2, pp.
117–123, 2012.
31. “Gamesalad gears up for iphone publishing system.”
Accessed: Aug. 22, 2018. [Online]. Available:
http://www.austinstartup.com/2009/09/gamesalad-
gears-up-for-iphone-publishing-system/
32. J. Liu et al., “Making games a snap with Stencyl: a
summer computing workshop for K-12 teachers,” in
Proceedings of the 45th ACM technical symposium on
Computer science education, 2014, pp. 169–174.
33. wikipedia.org, “Stencyl.” Accessed: Jul. 28, 2021.
[Online]. Available:
https://en.wikipedia.org/wiki/Stencyl
34. “Stencyl: Make iPhone, iPad, Andoid, Windows,
Mac, Flash and Html5 games without code.”
Accessed: Jul. 15, 2018. [Online]. Available:
http://www.stencyl.com/features/
35. “About EV3- Mindstsrms LEGO.com.” Accessed:
Jul. 15, 2018. [Online]. Available:
https://www.lego.com/en-us/mindstorms
36. J. G. P. Francisco, A. M. Rees, J. Hughes, J. Vermeersch,
I. Jormanainen, and T. Toivonen, “A survey of
resources for introducing coding into schools,” ACM
International Conference Proceeding Series, vol. 02-04-
November-2016, pp. 19–26, Nov. 2016, doi:
10.1145/3012430.3012491.

2532