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. . 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”. 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. ‘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