Interactive Learning Environment for Practical

Programming Language based on Web Service

Inho Jung*, Jaewoong Choi**, In-Jung Kim** and Changbeom Choi***
*Dept. of Information and Communication Engineering,
**School of Computer and Electrical Engineering,
***Global Entrepreneurship and ICT
Handong Global University
Pohang-si, Kyunbuk 37554
Email: wbqdinno@gmail.com, chj4219@gmail.com, ijkim@handong.edu, cbchoi@handong.edu

AbstractAs the needs of education of programming language
increase, the importance of the learning environment has been
emphasized. Based on the social trends, various web services for
the education of programming which improves the computational
thinking of a student. Among the web services, block-based
programming languages are well known as an effective
educational tool for a primary student though a freshman in the
university. These tools are proven to be useful tools since the tools
provide same programming environment to the students and the
teachers anytime and anywhere. However, the environments may
be insufficient for learning practical programming languages,
such as C/C++ and Java, because they are not the block-based
programming languages. This paper introduces a block-based
learning environment for C programming language using web
services. The environment fills the gap between building
computational thinking and learning the syntax of the
programming language. The programming environment provides
the equivalent environment to teachers and the students during
the programming hands-on.
Keywordsweb-based instruction, visual programming
language, problem-based learning, self-motivated learning
I. INTRODUCTION
High-quality education of programming has become one of
the most important issues in modern society as the importance
of Information and Communication Technology (ICT) increases.
Almost every domain utilizes ICT tools, and a user may add and
process valuable data in their domains by making a simple
program. As the importance of the software education increases,
several countries have adopted programming courses as a
regular curriculum to K-12[1]. Those software programming
courses focus on building a computational thinking. The
computational thinking is a way to create a logic of the program
so that the students may make their logic control the computer
and other devices[2]. Teachers have been used various
visualization methods to show the concept of the programming
to enhance the computational thinking of a student. One of the
most familiar visualization programming environment is the
Scratch[3]. In the Scratch environment, the student may use
logic blocks to compose a program logic. Also, the student may
build a simple computer game by combining several blocks.
During the combining programming blocks, the user may form
the way of computational thinking.
Although raising a computational thinking is important, the
students should put additional efforts to learn the programming
syntax to make their program using modern programming
language. Since a student experiences programming using
block-based environment, the student should accustom to the
learning environment and pedagogy of the modern
programming language.
In this paper, we propose a web-based interactive learning
environment for a practical programming language. The
environment helps users to form computational thinking and to
accustom to a practical programming language. Primarily, we
have selected C as a practical programming language, and our
environment visualizes the programming code so that the user
may understand the programming logic intuitively.
II. PROGRAMMING LEARNING ENVIRONMENT AND
PEDAGOGY
A. Programming Learning Environment
Most programming learning environment is based on the
Integrated Development Environment (IDE) which bundled
with a text editor, compiler, and linker. The learning
environments can be classified into two categories: Installation-
based learning environment and web-based learning
environment.
1) Installation Based Learning Environment
Installation based learning environment is a computer which
IDE installed. The installation based environment can be
configured as an individual computer or a laboratory which has
several computers in the space. Also, the environment can be
configured as Command Line Interface (CLI) and Graphic User
Interface (GUI) based learning environment.
In the CLI, users use terminal software to interact with the
computer, and they should type a sequence of commands
manually. That is, users can use the keyboard only, and the
response of the computer is also returned in text. The well-
known CLI based programming tools are Vim[4] and Nano[5].
These tools do not provide the integrated installer, so the user
needs to install the compiler, linker, and debugger separately to
construct the programming environment. Also, they should
manage the version of the components of the programming
environment. The problem of the CLI based environment is that
the user cannot develop a program until they are accustomed to

978-1-5090-0778-3/16/$31.00 2016 IEEE

using the programming tools. Especially, a student takes much consists of a set of the problem to be solved. Especially, visual
time to handle CLI-based programming tools, since the programming languages help students to learn about how they
programming tools only provide the command line input and build up a programming logic to solve each problem. Since the
output. Therefore, a teacher should assign enough time to the visual programming features help the students to check their
students to learn the CLI programming environment before they logic visually, the educational services, such as Scratch, MIT
proceed the learning contents. App Inventor, and LEGO NXT, have adopted the visual
programming language into their services. Following TABLE I.
The GUI is a type of user interface that allows users to
compares each learning services that utilizes the visual
interact with a computer through graphical indicators. GUI programming languages.
based programming hands-on environment is based on the
graphical IDE, such as Visual Studio[6], Eclipse[7], and TABLE I. COMPARISON AMONG EXISTING EDUCATIONAL SERVICES
normally executed on a GUI-based operating system such as
Windows and macOS. These tools utilize the mouse to point and Scratch[12] App Inventor[13] Lego NXT[14]
click the icons. Moreover, the students can easily drag and drop
the components to develop and debug a program, so the teachers
can easily carry out hands-on during the courses. However, Features User can generate User can build an User can build
2D animation by Android their robot and
students or the managers of the laboratory should install and composing the application control them by
configure the programming environments to the physical logic blocks without any using visual
computers. The physical computers may have different coding programming
computational powers so that the limitations of the computing language
power may disturb the learning.
Pros Student can begin It motivates a user Children friendly
programming to build their
easily application by
2) Web-based Programming Environment It can be used in composing logic
The web-based programming environment is the new various blocks
environment to overcome the limitation of installation based environments
environment. As the popularity of the cloud computing service
increase, many installation type programs are migrating to the
Cons User should learn Difficult to build User should have
cloud service platform using web services. The big advantage of the practical high-level some hardware
the web-based application is that the user does not need to install programming application knowledge to
or setup any prerequisites software packages. To apply the web- language control the robot
based programming environment to the programming education, afterward
a teacher may consider two options: 1) Applying web-based
development environment, 2) Developing web-based pedagogy.
As shown in TABLE I, the legacy programming learning
The web-based development environment is the improved environments are used to build a programming logic of students.
form of existing installation type environment. The user does not Then, a student should learn high-level programming language
need to install anything to their computing environments. The when they want to build practical applications. For example,
development environment is established via several mouse App Inventor can build a simple 3D graphical application;
clicks. The remote server provides virtual computers to each however, the application is too slow to use, so if a user wants to
user, and the server executes the tasks and operations of the users implement practical application the user should gain high-level
requests. As a result, a user does not have to consider upgrading programming skills. As we mentioned earlier, a visual
the computational environment and maintaining the programming language can be a good entry point for
environment. Cloud9 IDE[8] and Koding[9] are representative programming. Also, popular learning services have adopted to
services among these services. improve the understandings of a student. Although the popular
There is a web-based instruction environment, which utilizes learning services utilizes the visual programming, the students
the web as a method of programming education[10]. This should learn a practical programming language to build their
environment visualizes transition of the memory structure and programs. Also, they should know the features of the high-level
uses the visual programming language to build up program logic. programming languages to design and implement an application.
A visual programming language is a language that lets users The proposed interactive learning environment fills in the gap
create programs by manipulating program elements graphically between learning contents for enhancing the programming logic
rather than textually[11]. Because visual programming language and language contents for learning a practical programming
can create a program without learning the complicated syntax of language. Following chapters introduces the web-based
programming language, so it is more powerful at build up programming learning framework.
programming logic than existing learning environment.
III. WEB-BASED PROGRAMMING LEARNING FRAMEWORK
B. Pedagogy of Programming Education
In this chapter, we describe the design consideration and
One of the well-known pedagogy for programming system architecture to develop the web based programming
education is problem-based learning. The problem-based learning framework.
learning builds the programming logic of a student though
solving process of given problems. Each learning process 1) Design Consideration
 Proposed framework can be applied to various environment,
and requirements are derived as follows.
- Web-based learning framework
- Support program creation using visual programming
language
- Code generation of specific programming language
First, the framework should be web-based learning
framework. Compared to the installation-based programming
environment, the web-based learning environment has less
overhead and provides the more consistent user experience. The
user does not need to install anything. The environment is
established via several mouse click. Also, web-based learning
environment packed with essential functions, while local IDE is
providing enormous functions which are hard to learn.
Next, the framework should be able to create a program
using visual programming language. This feature is essential to
implement pedagogy of programming education. The visual
Fig. 2. Overall system architecture
programming language is a language that lets users create
programs by manipulating program elements graphically rather
than textually. Because visual programming language can create
a program without learning the complicated syntax of Building up programming logic via visual programming
programming language, so it is more powerful at build up language is the preparation stage before learning real
programming logic than another learning environment. Fig. 1 programming. When a student finished learning using visual
shows an example of visual programming language. programming language, then he needs start to study the real
programming language. However, there is much difference
between a visual programming language and real programming
language. A former visual programming language learner may
feel difficulty if he needs to study real programming language
without any preparation. Therefore, this paper proposes the web-
based visual programming language learning framework that
bridges the gap between a visual programming language and real
programming language. Also, the framework matches visual
Fig. 1. Example of visual programming language programming language component and real programming
language syntax in the corresponding pair that helps the student
to adapt real programming language smoothly without any
Last, the framework should able to generate the source code
hassle. Fig. 3 shows correspond C code from visual
of specific programming language, and execute the code. By
programming language code block. Such method helps the
manipulating visual programming language to generate source
student understand the syntax of real programming language and
code of real programming language, and by executing the
build up programming logic.
program from source code, the student can solve the given
problem and study syntax of real programming language deeper.
2) System Architecture
Figure 2 shows overall system architecture of proposed
framework. The framework uses customized visual
programming environment based on Blockly[15] open source
project which called Block Handler that provides visual Fig. 3. Example of source code generated from visual programming language
programming functionality. Front-end part interacts with the
user which displaying visual programming language workspace To examine if the program is working fine or not, the user
by injecting Block Handler into the web page. The detail of this should compile the program and execute it. The proposed
customized environment will be described in chapter 4. Back- environment needs a function that compile and executes source
end part provides code runner feature and code manager feature. code right on the web page. Fig. 4 shows an example of code
Code runner does two jobs: First, compiles source code into a execution right from the web page
program which generated by the visual programming language.
Second, display program output by executing the program.
Workspace manager handles the state of workspace, such as
creating a new workspace, saving current workspace to the
database, loading workspace from the database.
 object and controls the visualization and the code generation.
Figure 5 shows the interactive learning environment for C
programming language.

Fig. 4. Source code compiled and executed
IV. CASE STUDY: INTERACTIVE LEARNING ENVIRONMENT
FOR C PROGRAMMING LANGUAGE BASED ON WEB SERVICE
To show the effectiveness and the existence of the proposed
interactive learning environment, this chapter introduces the
case study of the environment. The interactive learning
environment1 contains two key components: the block and the
A. Blocks
In the interactive learning environment for C programming
language, blocks are the syntax patterns that is visualized to the
users. Also, after a user completes the block, the entire block
should be translated into a program code. To handle the two
functionalities, the block of the interactive learning environment
should model the characteristics of C programming language.
In the interactive learning environment categorizes the
blocks into 10 types. Each category contains one or more blocks
and the users can compose the blocks to visualize their
programming semantics. TABLE II. shows the list of block
categories.

Fig. 5 Interactive learning environment for C programming language

block handler. The block contains the visualization method and

code generation method. The block handler handles the block

1
The source code of the interactive environment for C programming language
can be found in the following url:
https://cra16.github.io/cake-core/
 TABLE II. LIST OF CATEGORY OF BLOCKS TABLE III. LIST OF MODULES IN BLOCK HANDLER

Category Description Module Description Contains

Name
Logic The blocks that define Logic part of C into blocks
Block Module that Block, Comment, Connection,
Loops The blocks that define Loop part of C into blocks Control manages blocks ContextMenu, Flyout, Mutator,
Module generation, deletion, Tooltip
editing unique(cant
Structure The blocks that define Structure part of C into blocks
be edited by user),
and connection
Variables The blocks that define Variable part of C into blocks
Code Module that Generator
Procedures The blocks that define Function part of C into blocks Converting classifies the blocks
Module in Workspace into
Math The blocks that define basic arithmetic operation of C Statement Code
and often used functions in Math library into blocks and Value Code
and converts into C
Stdio The blocks that define often used functions in Stdio code
library into blocks
Display Module that handles BlockSVG, Blockly, CSS,
Stdlib The blocks that define often used functions in Stdlib Control user events and Inject, Scrollbar, Toolbox,
library into blocks Module control display Utils, Warning, Widget Div,
components on the Workspace, XML
String The blocks that define often used functions in String web page
library into blocks
Field Module that control Input, Field, FieldTextInput,
Time The blocks that define often used functions in Time Control Field of block (can FieldAngle, FieldCheckbox,
library into blocks Module be edited by user) FieldColor, FieldDropdown,
FieldImage, FieldLabel,
FieldStructure,
FieldStructureMember,
Note that the blocks should manage to visualize the FieldVariable,
programming semantics and generate the program code. To FieldVariableArray,
build a program in the interactive learning environment, a user FieldVariablePointer,
FieldVariableDefine
should complete their logics by arranging the blocks or injecting
a block into another block. Then, the environment should Major Module for Names, Procedures, Structure,
visualize the composite blocks and generate the code of the Function maintenance of Variables
composite blocks. Moreover, a new block can be added to the Module variable, structure,
learning environment. Therefore, blocks of the interactive and function
learning environment design and implements the blocks using information
object oriented paradigm. Each block should implement two
features: the visualization and the code generation. A user who Error Module that checks Blocks
Checking errors in C99 syntax
wants to add a block into the environment should decide the Module and notices to user
form of the block and the size of the block. Also, the user should or corrects errors
define the conversion rules for C program code to implement
code generation feature
B. Block Handler Following 06 and 07 are workflows that show the process of
generating and editing block by a user. The Fig. 6 shows the role
In the framework, a user learns the programming method of a user and the framework. First, a user selects the menu in the
through designing blocks, editing blocks, and checks the Toolbox. Then, the framework generates XML data of the
generated code. Therefore, the framework should support an blocks and load the data. After the framework generates the
environment that user can generate and edit blocks. To fulfill the XML data, it translates XML data into blocks and visualizes
requirements, the block handler manages almost 40 objects for them though web interface. When the framework visualizes the
C programming languages. Table III shows the modules for the blocks, the user can recognize the block and may select the
Block handler. blocks to complete the program. Also, the framework generates
program code automatically. The framework converts XML to
C program code and the user can check the corresponding code
of the block on the code panel.
 Fig. 6 Generate Block Workflow
Fig. 7 Edit Block workflow
Figure 7 shows the editing workflow of a block. If a user
wants to edit the block, the framework should modify the XML
data of the corresponding block. Therefore, it will change the
visualization part of the block, and it should reflect the changes
of the block and regenerates the program code.
As shown in the Fig. 5, the interactive learning environment
for C programming language has three components, tool box,
workspace, and code panel. Also, the environment has two
modules in the back-end, which are the block generator and the
code generator. The workspace is the place that the blocks can
be generated, edited, or deleted. The toolbox provides the blocks
with a hierarchical structure based on the syntax of C
programming language according to block information. The
user can instantiate a block by selecting among the blocks in the
toolbox and drag it into the workspace.
Fig. 9 Code Generation Algorithm
The Fig. 9 represents the code generation algorithm. The
algorithm is executed when a user generates an event in the
workspace, and loads predefined block information using type
attribute from XML. Then, the algorithm checks the type of the
block. If the block is valued block, the algorithm converts the
value block into value code. If the block is statement block, it
converts the statement block into statement code and checks if
there is any other block inside the statement block. If there
exists a block, it starts the code generation algorithm for the
inner block, recursively. If there is no block, it generates the
indentation and shows the converted codes through the web.
V. CONCLUSION
In the modern society, the concept of ICT convergence have
proposed, and almost every domains utilize ICT in their
domains. As a consequence, the importance of programming
education and the educational environment has been
emphasized. There are a various educational environment for
programming, and it is known to be effective for building
computational thinking of a student. However, those
environments may be insufficient for learning practical
programming languages, such as C/C++ and Java. Also, legacy
installation based learning environment has several limitations
to learn the practical programming language. In this paper, we
have introduced the visual programming framework for
practical programming language and the web-based
programming environment for C programming language. The
environment fills the gap between building computational
thinking and learning the syntax of the programming language.
Also, the programming environment provided the equivalent
environment to teachers and the students during the
programming hands-on. Finally, a specialized programming
pedagogy of the proposed environment may be considered as a [6] Visual studio official homepage,
further research. https://www.visualstudio.com/
[7] Eclipse official homepage, https://www.eclipse.org/
REFERENCES [8] Cloud9 official homepage, https://c9.io/
[9] Koding official homepage, http://www.koding.com/
[10] Khan, Badrul Huda, ed., Web-based instruction
[1] Valerie Barr, and Chris Stephenson, Bringing Educational Technology, 1997.
computational thinking to K-12, ACM Inroads, vol. 2, no.
1, p. 48, Jan. 2011. [11] Shu, Nan C., Visual programming, New York: Van
Nostrand Reinhold, 1988.
[2] J M Wing, Computational thinking and thinking about
computing, Philosophical Transactions of the Royal [12] Scratch official homepage, https://scratch.mit.edu/
Society A: Mathematical, Physical and Engineering [13] App Inventor official homepage,
Sciences, vol. 366, no. 1881, p. 3717, Jan. 2008. http://appinventor.mit.edu/explore/
[3] David J Malan, and Henry H Leitner, Scratch for budding [14] Lego NXT official homepage, http://www.lego.com/en-
computer scientists, ACM SIGCSE Bulletin, vol. 39, no. us/mindstorms/?domainredir=mindstorms.lego.com
1, p. 223, Jan. 2007. [15] Blockly official homepage,
[4] Vim official homepage, http://www.vim.org/ https://developers.google.com/blockly/
[5] Nano official homepage, https://www.nano-editor.org/