2014 IEEE International Conference on Computer and Information Technology
A C Programming Learning Support System and Its Subjective Assessment Yu Yan
Nakano Hiroto
The University of Aizu Department of Computer and Information Systems Hukushima, Japan 965-8580 Email:
[email protected]
The University of Aizu Department of Computer and Information Systems Hukushima, Japan 965-8580 Email:
[email protected]
Hara Kohei
Suga Shota
Aiguo He
The University of Aizu Hukushima, Japan 965-8580 Email:
[email protected]
The University of Aizu Hukushima, Japan 965-8580 Email:
[email protected]
The University of Aizu Hukushima, Japan 965-8580 Email:
[email protected]
Lack of support environment A normal computer programming course is composed of lectures and exercises. At the lecture, the instructor teaches programming language by showing slides and some sample program codes. But it is difficult for the students to understand programming language completely by only reading sample codes or watching slide images[11] [12][13][14]. At the exercise classes, the students usually use IDE(Integrated Development Environment) such as Eclipse [15], Visual Studio[16] or GCC/GDB[17]. However, those IDE are professional software system developing tools and are not fit for beginners to learn programming. For example, in author’s university, the first year students can hardly use the debug functions of GDB. They can only debug program with printf() statements. Above problems make almost beginners even lose their motivation to study. We think the best way to solve those problems is giving students a useful and effective learning support system. Program visualization is one method to aid beginners to deal with the difficulties in learning programming. The aim of program visualization is to enhance students’ understanding of program execution[18]. Based on program visualization, we have developed a C language programming education support system, PROVIT(PROgram VIsualization Tool) for students and their instructors. This paper mainly introduces the principles and functions of PROVIT and reports its application, experiment, and assessment in C program education activities. •
Abstract—Currently, learning support environment for C programming beginners is still very unsatisfactory. This paper introduces a program visualization based support system for C programming learning and instruction, PROVIT. It provides useful functions for students and instructors to use at lectures, excises or their homes. The feature of PROVIT is that it can show the execution of any program written by the students or instructors, by interesting GUI, so the internal behaviors of the running program which usually will be hidden from beginners’ eyes can be observed easily. PROVIT has been used in a special lecture for teaching high-school students and a subjective evaluation from the students was performed at an experiment. This paper also reports the result of the experiment. Index Terms—C language, programming, learning, instruction, program visualization.
I. I NTRODUCTION Computer programming has become more important and is taught as a part of general information-processing course in universities[1]. C Language Programming is the basic course for studying related courses such as data structure, object-oriented programming language [2]. In Japan, even high school students have activities for learning programming[3]. For example, in author’s university, an educational event, allJapan high-school computing contest called PC-Koshien[4], is held every year. In PC-Koshien 2013, 1132 students entered for its programming section, and more than 60% of them used C language, 31% of them used C++ but wrote C style programs. However, another fact in PC-Koshien is that 10%20% participants could not solve the simplest problem and scored 0 point. We think the reasons for this fact are: • C language is difficult to programming beginners Although the beginners are interested in C language, almost beginners take long time to learn C programming[5][6][7][8][9][10]. They often have to face to some simple problems like syntax error by careless of miss typing. And it is difficult for them to understand so many principles such as variable address and pointer. 978-1-4799-6239-6/14 $31.00 © 2014 IEEE DOI 10.1109/CIT.2014.23
II. R ELATED W ORK There are several researches on programming educational support by program visualization. • Jeliot3 [19] Jeliot 3 is a programming visualization tool of Java.Animation is used to show the execution of Java program. Jeliot 3 has edit function and can be used as 561
•
•
•
Fig. 1. PROVIT’s system architecture
•
a debugger.Supporting languages differ in Jeliot 3 and PROVIT. ETV [20] ETV is a trace player of C program which displays the value of variables at each step, and standard output. This research displays the output of the debugging option of a compiler intelligibly. So, output of the debugging option of a compiler became the interface which is easy to debug. However, ETV does not operate without compiler. In addition, Since ETV’s interface uses only characters, it is hard to understand for beginners. PROVIT can operate without compiler of C language, many PC can use PROVIT. PROVIT displays value of variable of each step by 3D graphic image. It is easy to understand for beginners.
B. PROVIT’s GUI PROVIT’s Editor provides a minimal set of functions for editing program such as file loading and saving, showing line number, etc.. PROVIT’s Controller located in the bottom side provides several buttons for its simple operation: • Edit: change PROVIT’s mode to edit a program. • Run: compile the edited program and change PROVIT’s mode to execute the program. • Next: perform a one step forward execution of the program. • Prev: perform a one step backward execution of the program. • Go: execute the program continuously to the nearest breakpoint. • Restart: restart the execution of the program. Fig.2 shows the Viewer of PROVIT. The Viewer has three components: • Code View It shows user’s program source code. The pale red under lines show the steps that have been executed and a dark red under line shows the step that will be executed by clicking next button on the controller. The red lines help users to track the processing flow of the program. Left clicking on any step of the source code can set a breakpoint on that step. A green rectangle will appear around the step to show the break point. Unlike traditional IDEs, PROVIT manage break points not only for lines or statements of the source code, it can do it for small steps. Left clicking on any break point can delete the break point. • Console The Console offers standard input and output functions for the program. It shows the cumulative output of printf() statements. It also accepts key-input of scanf() statements
III. PROVIT PROVIT has many features: • It is created by Java technology, so it is OS free. The users only need an environment where Java can be used to run it and can skip preparation of a programming environment. • Compared with traditional IDE, it has a very simple GUI and only provides necessary functions for beginners or instructors to edit or debug their C programs or run demo C programs for presentation. • To make C programs easier to understand and interesting to the beginners, It visualizes C programs by using 3D graphics and has the rich expression method. Fig.1 is the system architecture of PROVIT. It has a C virtual machine and GUI components. A. PROVIT’s Virtual Machine •
Compiler Compiler)[21], from a prepared grammar definition file which defines a subset of C language grammar necessary for the beginners and functions to translate C program to the Intermediate code. Intermediate code The Intermediate code has a tree structure of the C program. The nodes of the Intermediate code are minimum execution steps. Execution of the program is equivalent to the post-order traversal of the tree. CPU simulator The CPU simulator controls the execution of a program one by one by using the Intermediate code. It also manages a memory map, a list of function instance and a list of variables. Compile Server The Compile Server is an optional remote component for PROVIT. The C program will be checked by Compile Server before it be passed to the Parser. This component will be used until the Parser becomes perfect.
Parser The Parser performs lexical analysis which divides program source code into meaningful words, and syntax analysis which assesses whether the source code is correct order. The Parser is generated by Java CC (Java
562
Fig. 2. PROVIT’s viewer
•
too. Further, the input data is displayed in green color, and the output data is displayed in red color. Image View Image View is the core part of PROVIT viewer.It displays the inside of a running C program by 3D Image.The position of Image View’s view-point can be changed by mouse-drag or mouse-wheel operations. Image View shows following components on it:
Fig. 3. Array variables and array viewer
and two-dimensional array will be expressed by an array box as a symbol and an Array Viewer to show the detail of the array. Array Viewer can be opened by double-clicking the array box. Large array is generally used for image or shape processing. Therefore, Array Viewer expresses array as a 2D monochrome image. On the image, each array element is shown as a pixel with brightness according to the element’s value. Array Viewer also can show the value and index information of its elements by zooming in (mouse-wheel) operation. For example, Fig.3 shows a program which loads a monochrome image (a picture of flower) data from standard input to a large array. The program has been executed to the final step. Here, char s[4] is a small size array and expressed by four boxes;int a[305][437] is a large array and expressed by an array box. The details of a[305][437] is shown in an array viewer as a monochrome image or a mesh of integers. 4) Pointer variable A Pointer variable is expressed by a special shape. The value of the pointer variable is shown by hexadecimal format and if the value is a valid variable address, an arrow appears to link the pointer variable and the pointed variable and the value of the pointed variable is also shown in the pointer variable. Fig.4 shows an example where pointer p1 holds the address of variable d and pointer p2 holds variable q’s address. Clicking on the pointer variable shape can turn on or turn off the arrow. This is useful when the arrow obstructs other shapes in the image
1) Variable Each variable is expressed by a box with its data type, name and value. For char type variable specially, the value is expressed by hexadecimal style and when the value is an ASCII code, its text symbol will be shown together. For example, in Fig.3, char s[4] is expressed in the special way. The box changes its color when the variable will be accessed at next step:red color means its value will be changed; blue color means it will be referred. For example, in Fig.2, statement ”q = b + c;” is the ”next step”; variable q will be changed; and variables b and c will be referred. 2) Function Each function is expressed by a big box which encloses the box of variables. Function name and argument variables are displayed on the upper part of function box. When a function is called, its box appears and is placed under the caller’s function box. This way is very useful to show recursive function calls. In the example of Fig.2, the program is executed from function main(), the function expression statement is executed and function plus() is called. The program is stopped at a step in function plus() and the box of plus() is under the box of main(). 3) Array variable One-dimensional small size array will be expressed in multiple boxes. One-dimensional large size array
563
and computers for every student. PROVIT system and example program source codes were installed to all the computers. In the first 30 minutes of each lecture, the following basic knowledge were introduced: 1) About computer, computer program and programming language; 2) The shortest program code without variable and statement to show the basic common structure of C program. 3) Necessary step to finish a C program(Editing, compiling and execution) And in the remaining time of the lecture,the following steps were repeated: 1) Show a problem to be solved by program. 2) Run the answer C program step by step on PROVIT, show the GUI of PROVIT on the projection screen and explain the purpose, grammar and execution result of each step. 3) Ask students to run the same program repeatedly on their own PROVIT to understand the program completely. 4) Change the problem a bit and teach new knowledge necessary to solve the changed problem. 5) Ask students to modify and run their answer programs on their PROVIT to solve the changed problem. Table.I shows the grammars and basic knowledge taught in the lecture.
Fig. 4. Expression of pointer and structure
view. 5) Structure variable The shape of structure variable has two states: open and close. When the variable or its member will not be accessed at next step, it is closed, only showing a small shape with its structure name and variable name. When the variable or its member will be accessed at next step, it is open, showing all members inside a large box. Fig.4 also shows examples of structure variable expression. Here two structure variables data1 and data2 are declared and data1’s member will be changed at the ”next step” so data1 is open and data2 is closed.
TABLE I T HE COVERAGE OF THE SPECIAL LECTURE No. G01 G02 G03 G04 G05 G06 G07 G08 G09 G10 G11 G12 G13 G14 G15 G16
IV. E XPERIMENTS AND EVALUATION PROVIT has been experimentally used in several public lectures, off-campus lectures and Student Cooperative Class Project(SCCP, a special educational activity) in author’s university. To confirm PROVIT’s usefulness, an experiment was performed in a special lecture in a junior high school basic information education program. The lecture was given to three classes, each of which had 30 students, totally 90 students attended this lecture. A survey taken before the lecture shows that: (1) About 68% of the students had never heard anything about C language; (2) About 27% of them had only heard the name of C; (3) About 5% of them said they can write simple C programs; and (4) About 88% of them have their own computers. Each lecture was carried out three hours. The classroom was equipped with a teacher computer, a projection screen
Item main() Return statement int type variable declaration Variable initialization in declaration Arithmetic operations using variables Assignment statement printf() statement %d used in printf() and scanf() \n used in printf() scanf() statement &a (variable’s address. Used in scanf()) if (part of if statement) else (part of if statement) Relational operators (==, ! =, >=, and
