A C Programming Learning Support System and ItsSubjective Assessment

Yu YanThe University of Aizu

Department of Computer and Information Systems

Hukushima, Japan 965-8580

Email:m5172110@u-aizu.ac.jp

Nakano HirotoThe University of Aizu

Department of Computer and Information Systems

Hukushima, Japan 965-8580

Email:m5181110@u-aizu.ac.jp

Hara KoheiThe University of Aizu

Hukushima, Japan 965-8580

Email:s1190159@u-aizu.ac.jp

Suga ShotaThe University of Aizu

Hukushima, Japan 965-8580

Email:s1190142@u-aizu.ac.jp

Aiguo HeThe University of Aizu

Hukushima, Japan 965-8580

Email:aiguo@u-aizu.ac.jp

Abstract—Currently, learning support environment for C pro-gramming beginners is still very unsatisfactory. This paperintroduces a program visualization based support system forC programming learning and instruction, PROVIT. It providesuseful functions for students and instructors to use at lectures,excises or their homes. The feature of PROVIT is that it canshow the execution of any program written by the studentsor instructors, by interesting GUI, so the internal behaviorsof the running program which usually will be hidden frombeginners’ eyes can be observed easily. PROVIT has been usedin a special lecture for teaching high-school students and asubjective evaluation from the students was performed at anexperiment. This paper also reports the result of the experiment.

Index Terms—C language, programming, learning, instruction,program visualization.

I. INTRODUCTION

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, all-

Japan 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 beginnersAlthough the beginners are interested in C lan-

guage, 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.

• Lack of support environmentA 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 stu-

dents to understand programming language completely by

only reading sample codes or watching slide images[11]

[12][13][14]. At the exercise classes, the students usual-

ly 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.

II. RELATED WORK

There are several researches on programming educational

support by program visualization.

• Jeliot3 [19]

Jeliot 3 is a programming visualization tool of Ja-

va.Animation is used to show the execution of Java

program. Jeliot 3 has edit function and can be used as

2014 IEEE International Conference on Computer and Information Technology

978-1-4799-6239-6/14 $31.00 © 2014 IEEE

DOI 10.1109/CIT.2014.23

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.

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

• Parser

The Parser performs lexical analysis which divides pro-

gram source code into meaningful words, and syntax

analysis which assesses whether the source code is cor-

rect order. The Parser is generated by Java CC (Java

Compiler Compiler)[21], from a prepared grammar defi-

nition 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 pro-

gram. 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.

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 pro-

gram.

• 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

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:

1) VariableEach variable is expressed by a box with its da-

ta 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) FunctionEach 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 ex-

pression 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 variableOne-dimensional small size array will be expressed

in multiple boxes. One-dimensional large size array

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 pro-

cessing. 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 variableA 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

563

Fig. 4. Expression of pointer and structure

view.

5) Structure variableThe 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.

IV. EXPERIMENTS 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 uni-

versity. 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

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 state-

ment 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.

TABLE ITHE COVERAGE OF THE SPECIAL LECTURE

No. ItemG01 main()G02 Return statementG03 int type variable declarationG04 Variable initialization in declarationG05 Arithmetic operations using variablesG06 Assignment statementG07 printf() statementG08 %d used in printf() and scanf()G09 \n used in printf()G10 scanf() statementG11 &a (variable’s address. Used in scanf())G12 if (part of if statement)G13 else (part of if statement)G14 Relational operators (==, ! =, >=, and <=)G15 While statementG16 Increment

The functions of PROVIT used by the students are shown in

Table.II. Because the students were experienced in computer

operation, PROVIT was very easy to them to use. They even

cheered when they run the first sample C program on their

PROVIT and seen the 3D objects changing in its image view.

However, two issues were found during the lectures:

1) Due to the rules to guarantee the computer network

security policy in Japanese high-schools, the firewall

in the high-school blocked all communication traffic

between the school and outside except web and e-mail

traffic. This made PROVIT on the student computers

could not communicate with the compile server located

564

TABLE IIPROVIT’S FUNCTIONS USED BY STUDENTS

No. FunctionF1 Change font size of code view.F2 Red under line showing the current statement that will

be executed in next step.F3 Outputs shown by red color and inputs shown

by green color in console.F4 Show suggestions.F5 The variables and functions can be expressed in the

left box.F6 Variables that will be changed or referred in current

statement have special color.F7 Reverse executive by clicking Prev button.F8 Continuous executive by clicking Go button.F9 Re-execute by clicking Restart button.

in author’s university. Fortunately, the Parser component

in PROVIT worked well as the internal compiler during

the lectures.

2) A very few number of students were not studying

seriously at all. They were too interested in the 3D

expressions of the C program shown in PROVIT’s image

view, like playing a game with PROVIT.

At the end of the lecture, a questionnaire survey was taken

for checking students’ understanding and the usefulness of

PROVIT.

Fig.5 shows the result of the survey about students’ un-

derstanding of C language after the lecture.For each grammar

or item in Table 1, the students selected one of 3 subjective

answers below to show their understanding:

1) I understand its meaning and know how to use it.

2) I understand its meaning but don’t know how to use it.

3) I don’t understand it.

From Fig.5 the following turned out:

• Very few students said they can write C program using

what they learned in this lecture. Due to it was the

first time for the most students to learn C language

programming, the coverage of this lecture was too more

for they to understand very well within three hours even

learning support system was used.

• About half of the students said they can understand C

programs taught in this lecture:

1) The student have good understanding of main(),

return, etc. The reason for this is that those items

appeared in every sample code and caught students’

eye in the lecture.

2) Items strongly related to English words such as

printf(), scanf(), else etc. can be understood well

because of students’ good English background.

3) Items associated with students’ knowledge back-

ground such as arithmetic, etc. can be understood

well.

4) There are several items could not be well under-

stood: While statement (only appeared once at the

lecture), Assignment statement (it is like an equation

but too different from it) and Relational operators

Fig. 5. Students’understanding

(also too unfamiliar to the students).

Fig.6 is the evaluation result of the survey about PROVIT’s

functions. For each function shown in Table.II, the students

selected one of 5 subjective answers below:

1) Very satisfied. 2) Satisfied. 3) Neutral. 4) Dissatisfied. 5)

Very dissatisfied.

The result shows that most functions of PROVIT is very

useful to the students. Specially, F7, F8, F9 and F2 were highly

evaluated. However, F5 and F6 need to be improved.

V. CONCLUSION

This paper introduced a PV-based C programming educa-

tional support tool, PROVIT. The purpose of PROVIT is to

enhance beginner’s understanding of C program and to make

program interested to them by offering simple user interface

565

Fig. 6. Evaluation of PROVIT’s functions

and attractive expression of C program. PROVIT has been

experimentally used and evaluated at a special lecture to high-

school students. The future work of PROVIT will be:

• We will do more surveys about general models used

for describing C programming learning situation, then

develop more significant extension based on PROVIT.

• Based on the investigation in the future, we are going

to analyze the performance of the system more deeply

and develop more new, more interesting and easier to use

functions to enhance PROVIT’s abilities for overcome the

difficulties on C programming learning to the beginners.

REFERENCES

[1] C. M. Toyoshiro Nakashima, “Analysis of source codes created bybeginners in programming education,” in Software Engineering, Arti-ficial Intelligence, Networking, and Parallel/Distributed Computing, ser.SNPD 2007, vol. 2. Eighth ACIS International Conference on, July30-Aug. 1 2007, pp. 774–781.

[2] Y. H. Kunhua Zhu, Baojian Zhang, “The application of the gsyllogismhteaching method in the teaching of c language programming,” inEducation Technology and Computer Science, ser. ETCS ’09, vol. 2.First International Workshop on, 2009, pp. 54–57.

[3] K.Susumu., “Practice and evalution of object oriented programmingin elementary education.” in Information Processing Society of JapanJournal Papers, ser. No.SIG 13(Pro 18), vol. 44, Oct. 2003.

[4] http://web-ext.u-aizu.ac.jp/pc concours/.[5] J. K. Lynne P Baldwin, “Learning programming using program visual-

ization techniques,” in System Sciences. Proceedings of the 34th AnnualHawaii International Conference on, 3-6 Jan 2001.

[6] R. Guindon, “Designing the design process: exploiting opportunisticthoughts,” in Human Computer Interaction, vol. 5, 1990, pp. 305–344.

[7] G. R.A.Jeffries, P.Turner, “The processes involved in designing soft-ware,” in In J.R. Anderson(Ed), Cognitive Skills and their Acquisition,1981, pp. 255–283.

[8] J.Kim and F.J.Lerch, “Why is programming (sometimes) so difficult?,programming as scientific discovery in multiple problem spaces,” inInformation Systems Research, vol. 8, no. 1, 1997, pp. 25–50.

[9] S.Letovsky, “Cognitive processes in program comprehension,” in Em-pirical Studies of Programmers. Norwood, NJ, 1986, pp. 58–79.

[10] S. H.A, “The structure of ill-structured problems.” in Artificial Intelli-gence, vol. 4, 1973, pp. 181–201.

[11] C.T.Haynes, “Experience with an analytic approach to teaching pro-gramming languages,” in Proceedings of the 29th SIGCSE TechnicalSymposium on Computer Science Education, ser. ACM SIGCSE 30, 25February-1 March 1998, pp. 350–354.

[12] M. C. Linn and M. Clancy, “Can experts ‘explanations help studentsdevelop programming design skills?” in International Journal of Man-Machine Studies, 1992.

[13] R.Oliver, “Measuring hierarchical levels of programming knowledge,” inJournal of Research on Computing in Education, vol. 25, no. 4, 1998,pp. 524–533.

[14] R.Oliver and J.Malone, “The influence of instruction and activity on thedevelopment of semantic and programming knowledge,” in Journal ofResearch on Computing in Education, no. 4, 1994, pp. 154–175.

[15] https://www.eclipse.org/.[16] http://www.visualstudio.com/en us/dn469161.[17] h. http://gcc.gnu.org/.[18] E. K. Teemu Rajala, Mikko-Jussi Laakso, “Effectiveness of prgram

visualization: A case study with the ville tool,” in Journal of InformationTechnology Education: Innovations in Practice, vol. 7, 2008, pp. 16–32.

[19] E. A.Moreno, N.Myller, “Visualization pprogram with jeliot3,” inAVI’04:Proceedings of the working conference on Advanced visualinterfaces, may 2004, pp. 373–376.

[20] Y. Minoru, “Etv: a program trace player for students,” in ACM SIGCSEBulletin, vol. 37, September 2005, pp. 118–122.

[21] S. S. Kodaganallur, V., “Incorporating language processing into javaapplications: a javacc tutorial,” in Software, IEEE, vol. 21, no. 4, July-Aug 2004, pp. 70–77.

566