224 W C. Chang and Y M. Chou
(3) Example – explore the fundamental programming paradigms through the
demonstration of the Bomberman game.
(4) Exercise – structured lab works for students to practice the fundamental program-
ming concept while playing the Bomberman game.
(5) Test – evaluate the learning result of students through problems solving while they
are playing the Bomberman game.
(6) Progress Evaluation – report the achievement of students by comparing the
benchmarks of participants’ progress to point out personal learning developments.
2.1 Road Map
In order to give our students an overview of the programming course, we provide a
road map as shown in Fig. 2. The “Road Map” component of the C programming
teaching plan.
Each castle contains the course materials of a chapter to learn, examples to explore,
exercises to practice and tests to pass. When the cursor falls at the castle, a window
will be pop up to show the brief description of that chapter. When the student click
the “Start” button, the sprite “Bomberman” starts to go forward to the next castle and
experience the scenario of the next level if the student has already won the game in
the previous chapter. Otherwise, it stays on the same place. If the “Bomberman” reach
the exit, it means the student has gone through all chapters.
2.2 Presentation
We provide a function to let the instructor present the course materials in slideshow.
The slideshow program was rewritten from the open source Jxpose [1818]. It is a
presentation making software, a "Microsoft PowerPoint" like software written in Java.
We have integrated the Jxpose software into our tool. If the student have entered the
first castle in the aforementioned Road Map and then hit the left side “Presentation”
button, then the slideshow of the first chapter course materials will be presented on
the screen. It also provides a full screen show capability. Fig. 3. The “Presentation”
component” provides the slideshow functionality to demonstrate the C programming
teaching material shows the slides of the chapter 1 prepared from our textbook [17].
2.3 Example

Examples can enrich the teaching contents and engage the learners. Since learning
happens when learners work with the materials, we provide a platform to let students
learn through example by reading (in this section) and writing new code (in the next
two sections). The code is presented in the context of the game as a small piece of
code that controls the movement of the sprite, “Bomberman”. The success of the
change is directly determined by the behavior of the sprite in the game world. More-
over, the examples and the exercise can ignite students in the habit of learner-to-
learner interaction, collaboration and mutual assistance.
We supply a component ‘Example’ which involves two sub components: “Code
Reading” and “Run” in our tool. Students can switch to another subcomponent by

Introductory C Programming Language Learning with Game-Based Digital Learning 225

Fig. 2. The “Road Map” component of the C programming teaching plan

Fig. 3. The “Presentation” component” provides the slideshow functionality to demonstrate the
C programming teaching material
selecting the tab of the sub component’s frame. In the ‘Code Reading’ sub component
as shown in Fig. 4. We demonstrate the description of the example and the sample
function written in C language that works for that example.
In the ‘Run’ sub component as shown in Fig.5, a “Bomberman” locates in the top
left corner of a maze which consists of a grid of floors, blocks and trees. The walker
“Bomberman” in the maze can only move into floor but not blocks and trees. The

226 W C. Chang and Y M. Chou

Fig. 4. The “Code Reading” sub-component of the component “Example”

Fig. 5. The “Run” sub-component of the component “Example”
bottom left corner is designated as the goal to be reached to finish the example. Once

the student click the “start” button, the bomber will start to walk according to the di-
rection of the “moveit()” sample function. Apparently, the walker can reach the goal
by continuously going down or going right if it can move forward. When the walker
reaches the left corner, a popup window presents to notify the achievement. Then the
walker stops at the bottom left location.
Introductory C Programming Language Learning with Game-Based Digital Learning 227
2.4 Exercise
The games-based approach enables students to tie in the design with coding. The game
environment lets students practice skills in virtual scenarios. The drill-and-practice in
computer games context may facilitate students to enhance learning and sustain interest
for given topics over time. Running their “Bomberman” under control of their written
code may enlighten their exercise desires. There are also two sub components of the
“Exercise” component. Due to the restriction of paper length, we only show the “Run”
sub component as shown in Fig. 6. In the “Edit/Compile” sub component, we provide
the same layout as the “Code Reading” sub component of the “Exercise” component
with four additional buttons. They are “Clear”, “Load”, “Save” and “Compile”. “Clear”
button clears the central scrollable text area that is used for coding. The “Load” button
let students load any file with “.c” extension while the “Save” button let students save
their written codes. The “Compile” button compiles the written codes in the central text
area by Java C compiler (JavaCC) [19]. Once the student finishes the compilation, they
can press the tab of “Run” sub component and give a trial. The “Run” sub component of
the “Exercise” component is same as that of the “Example” component except that it
has one more button to show the points that the student has gained. If we examine the
two scenarios of Fig. 6. and Fig. 6., the difference is that there are some fruits located in
the maze of Fig. 6 The exercise requires students to write a “moveit()” function that
not only can reach the bottom right corner but also can eat the fruits as many as possi-
ble. The exercises train students with the problem solving capability to further pass the
evaluation in the “Test” Component.
2.5 Test
The “Test” component provides an excellent test bed for students. During testing,

students construct their own knowledge by testing ideas and concepts based on prior


Fig. 6. The “Run” sub-component of the component “Exercise”
228 W C. Chang and Y M. Chou

Fig. 7. The “Run” sub-component of the component “Test”
knowledge and experience in the “Presentation”, “Example” and “Exercise” compo-
nent. By asking them to apply to a new situation, they need to integrate the new
knowledge with their pre-existing intellectual constructs to solve different prob-
lems of the topics in the chapter. However, students can test their programs simply
by clicking a button. The “Test” component is the same as the “Exercise” compo-
nent except that it has a timer to log the elapse time for each testing question. Cer-
tainly, the testing questions are different from the exercise. They are more difficult
and more exciting. Due to the restriction of paper length, we only show the “Run”
sub component as shown in Fig.6 and Fig.7. The test requires students to write a
“moveit()” function that not only can reach the bottom right corner but also can eat
the fruits as many as possible. However, the “Bomberman” cannot touch any
bombs. Otherwise, the bomb gets blown up with a great sound and the game is
over. Students are then required to revise their written programs in the
“Edit/Compile” sub component.
2.6 Progress Evaluation
Progress Evaluation collects information to determine what the impacts of the tests
are on students at various stages of the intervention. By measuring the correctness and
the time spent for each test question of each student, we can show a ranking report by
using JFreeChart [20] package to encourage or to warn the student about their ranks.
Students with poor ranks are required for extensive practice. A sample progress report
of a student is shown in Fig.8. The report shows the number of trials ranking of the
tester. The red bar means that the tester got a failure in that problem. Learners can
view the report with internet browser.