A COMPUTER-BASED PROGRAMMI�G PEDAGOGY:

stepwise instructed implementation of explained example code

*Roger Gajraj

roger.gajraj@gmail.com Lenandlar Singh

lenandlar@yahoo.com Malcolm Williams

malcolm.williams@gmail.com

Department of Computer Science

Faculty of Natural Sciences

University of Guyana

January 28th

, 2010.

Abstract

Learning by example is a natural process. �ovice programmers and even experienced

programmers tend to use this natural approach to learn new programming languages and

techniques. ‘Example-based programming’ focuses on explaining example code which aids in

the understanding of programming, and by extension, the programming language that is used.

Existing research reveals that the explanation of example code is predominantly limited to

textual or visual representations. In addition to these explanations, coded implementation of

example code is strongly advocated by teachers and often included in teaching materials.

However, this implementation process is not supported in example based learning

environments.

In our research, we investigated the use of a pedagogical combinatory concept which

incorporates learning from examples, guided learning by doing and visual learning; that is,

stepwise instructed implementation of explained example code. This pedagogical concept was

evaluated for viability as a learning alternative, through a prototypical learner-oriented

integrated development environment (LIDE). Our research involves the development of the

LIDE prototype that is based on this concept, the pilot experiment conducted to evaluate the

extent to which programmers are supported in their learning through the use of the LIDE, and

the results obtained from this experiment.

Keywords: computer science education, programming pedagogy, example based programming,

code visualization, learning from example code, c programming language.

1. Introduction

The high failure rate in introductory

programming courses at the University of

Guyana (Singh, 2005) is cause for concern.

Several untested opinions exist that attempt

to provide reason(s) for the preceding

situation. One observation in this regard is

that beginner programmers, while learning

the fundamentals of programming, are

forced to learn several different skills at the

same time; problem solving, analysis/design,

mastery of the syntax and semantics of the

programming language, and program

debugging. Students also incur a high

cognitive overhead by having to learn

abstract programming concepts without the

benefits of something concrete and material

to which they could refer. In the attempt to

address these issues, traditional chalk and

talk teaching techniques have been

augmented by ‘laboratory’ classes in which

an instructor guides students through the

implementation of simple real world or

sample problems that exercises concepts

introduced during lectures. Laboratory

sessions predominantly use pre-prepared

example code. One immediate problem

encountered in this regard is that students

have to work at the instructor’s pace;

copying example code and listening to the

explanations at the same time. In the event

that the student misses part or all of the

explanation of a concept, there exists no

possibility for the student to be guided

through the same example code, in a

consistent manner, after that laboratory

session ends. Our research has to do with a

novel approach that provides a solution to

the challenges faced by students learning

programming.

Computer Aided Learning (CAL) tools have

been developed to help learners in several

different areas of interest master subject

content. With respect to computer

programming, CAL tools have also been

developed to help new and novice

programmers learn programming. These

tools focused mainly on the use of

visualization, but are highly dependent on

prerequisite understanding of programming

concepts.

We have developed a prototypical CAL tool,

which we call ‘CSmart.’ CSmart is a tool

that embodies a novel combinatory

pedagogical concept. This concept is based

on combining code visualization, learning

from examples and learning by guided

doing. The three (3) preceding learning

techniques are synthesized using proven

instructional techniques (Clark & Mayer,

2008) and are integrated in our prototypical

tool to produce a novel combinatory

pedagogical approach within a computer-

based environment.

‘CSmart’ converts commented source code

files into tutorial-like stepwise explanations

of example source code files, augmented

with visualisations. Specifically, a learner is

guided through the implementation of each

line of code of the example source code file.

Each line (statement) is then augmented

with explanations obtained from the

comments within the source code that serves

as the basis for auto-generated visuals and

auto-selected textual explanations of a

programming construct in focus. To the

learner, tutorials are executed in the most

natural way. That is, the hands-on method of

learning is very similar to the actual practice

of programming. In addition, tutorials

developed by a human tutor are created

without any cognitive overhead for learning

neither new commands nor procedures;

tutorials are the commented – maintainable -

source code files themselves.

This paper discusses the combinatory

pedagogical concept and how it was

implemented as a CAL. User evaluation of

the implemented computer-based

pedagogical approach reveals that our

approach offers tremendous potential as a

training tool for beginner programmers

interested in learning the C programming

language.

2. Combinatory Pedagogical Concept

Learning the semantics of the C

programming language’s syntax is a

necessary prerequisite to implementing code

that provides appropriate solutions to real

problems. CSmart focuses on fostering

learning of the semantics of the C

programming language, and user evaluations

were conducted to determine its viability as

a learning alternative.

This method extends previous example

based programming approaches by

incorporating (1) learning by examples, (2)

learning by doing and (3) program

visualization in a user-friendly synthesis that

aids learning. Figure 1 illustrates these

inputs and how they are combined in this

synergy. These three learning techniques

are further explained in the following

sections, as they form the core of the

combinatory pedagogical concept.

Figure 1: Pedagogical Concept

2.1 Learning from Examples

Many novice and expert programmers use

example code to learn programming

concepts and how to use programming

constructs. Beginner programmer first

needs to learn the semantics of a

programming language’s constructs in order

to use it in the implementation of solutions

as a problem solving tool.

Clark and Mayer (2008) believe that worked

examples are one of the most powerful

methods you can use to build new cognitive

skills, and they are popular with learners.

Many programming textbooks (Foster,

1994; Deitel, 2006) attempt to concretise

abstract programming concepts with

associated code examples and explanations.

Examples with textual explanations attempt

to give the learner a clearer understanding of

the programming concepts which may,

initially, be too abstract for beginners..

In addition, Brusilovsky et al (2004) state

that both experienced and novice

programmers often reuse program examples

they created or learnt in the past to solve

new programming problems. Studies

(LeFevre & Dixon, 1986; Anderson, Farrell,

& Sauers, 1984) found that learners tend to

favour worked examples over textual and

verbal descriptions of procedures.

Johansson (1998), in a study, showed that it

was possible to write programs that worked,

more quickly, by learning from examples

alone. Clark & Mayer (2008) suggest

supplementing examples with effective

explanations because there is evidence

(Reed, Dempster, & Ettinger, 1985; Renkl,

2002) that explanation to support worked

out steps, aids in learning.

Most sources of examples (Foster, 1994;

Deitel, 2006) are accompanied by

explanations in varying degrees of detail and

usefulness. Consequently, programmers

conventionally seek example code in

resource repositories such as tutorial web-

pages, forums and books. These examples

can then be implemented – partially or

wholly in a separate integrated development

environment (IDE) – and then compiled to

run the resulting executable program. This

is done to gain deeper insight into what the

example code really does at runtime.

We have observed however, that the

aforementioned conventional methods of

transforming example code from the

resource repository to an IDE incur

cognitive overhead. Cognitive overhead

poses a threat to learning the intended

programming concepts. These conventional

Combined Pedagogical Concept

methods include typing out code by

switching focus between source of example

and the IDE and/or copying and pasting

between electronic source and IDE.

2.2 Learning by Doing

Learning by doing is believed to be a

powerful technique that aids learning to

program (Foster, 1994, pp ix). Dr Alan

Lesgold writes that his work in the past two

decades has been driven increasingly by the

belief that more learning by doing is needed

in most education and training situations

(Lesgold, 2001). Many programming

textbooks, electronic tutorials and teachers

advocate this technique by providing

examples for learners to type up in their IDE

in order to achieve an understanding of how

the coding constructs function at program

runtime (Deitel, 2006; Foster, 1994). In

specific relation to programming, a study

(Lister, Simon, & Thompson, 2006), showed

that novices tend to seek understanding of

code in a line-by-line approach as opposed

to understanding the program as a whole.

We believe that guided line-by-line coding

will remove the overhead of dealing with

syntax errors, thus freeing the learner to

focus only on learning the semantics of a

programming language’s constructs.

2.3 Visualisation

Visualisation is also used as an effective

pedagogical technique (Bergin, Brodie, &

Patiño-Martínez, 1996). As it relates to

learning computer programming,

visualisation has been found to be a helpful

tool (Mayer, 1981). Oftentimes, the abstract

nature of a programming language’s

constructs provides difficulty for beginner

learners to understand. Visual illustrations,

provided at implementation time, of what

code instructions are expected to do at

runtime, can be used to foster in beginner

programming learners a more concrete

mental model of the semantics of a

programming language that what may

otherwise be achieved. Accurate and

appropriate mental models are important for

comprehension and understanding (Moor &

Deek, 2006).

3. CSmart LIDE

The experiment to evaluate the pedagogical

concept included the development of a

prototypical Computer Aided Learning

(CAL) tool which we call ‘CSmart’. In the

design of CSmart, we found it important to

provide an intuitive graphical user interface

to drive the core pedagogical concept when

textual and graphical representations of code

are used in explanations. The development

of this tool followed an experimental

prototypical methodology. The design of

components and features that supported the

concept was engineered and informally

tested ‘feature by feature’ as these were

integrated into the whole CSmart.

CSmart is learner oriented. Hence, we

classify ‘CSmart’ as a learner’s integrated

development environment (LIDE).

The following sub-sections describe the

features of ‘CSmart’ that implement the

aforementioned combinatory pedagogical

concept.

3.1 Information Extraction

Pre-prepared example source code is used to

support the pedagogical concept in CSmart.

The source code is used as the primary input

to the mechanism in CSmart that

demonstrates how to use programming

constructs in order to achieve a task in

programming. This achievement may be (1)

the solution of a general problem by using

programming constructs or (2) learning the

semantics of one or more coding construct.

Tutorials are created dynamically by

‘CSmart’ where example source code files

are inputted, parsed, processed and

presented in a richer format that aids

learning. Example source code

demonstrates select programming concepts

which can be explored by the learner in

order to foster learning and understanding.

Exploration was made possible by parsing

each line of code. An actual line of code is

displayed in an instructional manner to be

typed out while comments belonging to that

line of code are displayed at the same time.

Figure 2 shows how a line of executable

code (highlighted in green) along with its

corresponding comment (highlighted in

yellow) are extracted and displayed to the

user, within the editor section of the

‘CSmart’ LIDE.

Figure 2: information extraction from

source code (above) into CSmart

LIDE(below).

3.2 stepwise guided implementation

In applying the step-wise guided technique,

the learner is instructed to type out each line

of code in an example. This stepwise

approach fosters learning through learning

by doing. In the ‘CSmart’ LIDE, the

example code that is to be type out, as part

of encoding the program, is placed under the

cursor – within a tooltip – in full view of the

programmer, while they type the code on the

line above the tooltip guide (see fig. 2 and

fig. 3). Similarly, the comments that explain

a line of code are placed just beneath the

line of code. This allows very little

overhead of copying code because it is very

close to the input area, specifically, where

the cursor is located within the editor area.

We posit that the strategic presentation all of

these pieces of information (i.e. cramming a

lot of information into a small space without

overloading the user) increases the

information content of the user interface,

and facilitates learning.

3.3 Explanation of code

A line by line explanatory approach was

used to explain example code. This allows

learners to focus on the semantics of the

programming language. To best explain

examples visually, textually and audibly,

Clark & Mayer (2008), provide tested

guidelines which were considered and

incorporated into design;

(1)“multimedia”(text, audio and graphics),

(2)“contiguity”(aligning words to graphics)

and (3)“segmenting”(line by line

explanation) principles (Clark & Mayer,

2008) were applied to explain lines of code

visually, textually and audibly. These

techniques are further illustrated in the

proceeding sub-sections.

#include <stdio.h>

int main() // necessary to run I/O operations

{

int x = 9; //declare a variable and initialise

3.3.1 Textual explanation

Comments from source code files are used

to provide auto-generated explanation of the

corresponding lines of code that the learner

types out in the LIDE text editor. Where no

comments exist in the example source code,

no auto-generated explanation for those

lines of code is generated. Authors of

tutorials (example code) are encouraged to

create better tutorials by including

comments in each line of code. It is the

human tutor’s responsibility to ensure

appropriateness of explanation of lines of

code.

In addition, there is an automatic display of

extended explanations of certain coding

constructs. Certain coding constructs may be

keywords or popularly used functions of the

C programming language. These extended

explanations intelligently appear next to the

editor area whenever certain coding

constructs are used in a line of code in order

to augment the learning process.

For example, a line of code within a source

code file may be:

int x = 9; //declare a variable and initialise

Figure 3 below shows how the comment –

as an explanation – is displayed just under

the instructed line of code to be typed out.

The left pane beside the editor dynamically

displays additional information on the ‘int’ -

integer - data type that is used in the line of

code.

Figure 3: textual explanation of

instructed line of code to be typed out.

3.3.2 Visual explanation of source code

Visual explanations of code constructs are

automatically generated just under

comments that explain an instructed line of

code that is being typed out. Visuals

attempt to explain coding constructs with

very little prerequisite of programming

concepts. Beginners may understand

programming concepts easier by being able

to relate to visuals. For example, variables

are portrayed as containers because a

container can hold an item like a variable

holding data (see fig. 4). Also, the popular

‘printf’ statement for output to screen is

portrayed by showing the output on a

graphic of a computer monitor.

Calculation and assignment based visuals

are dynamically generated from a trace-table

data structure that keeps track of the data in

variables. The race table is used to show

what data is moved and/or replaced within

variables during calculations and

assignments. An extension of the java

programming language called ‘Groovy’

(König, Paul, Guillaume, & Jon, 2007) was

used to evaluate loop and conditional

expressions and to provide the inputs into

the visualization module. Figure 4 below

shows a calculation where the data in

variable ‘x’ is added to the number seven (7)

to give the sum of sixteen (16) that is further

animated by moving the number sixteen (16)

into the ‘y’ container representing the ‘y’

variable. This animated path is represented

by the broken line in figure 4.

Figure 4: visual of calculation and

assignment.

3.4 Additional features

The ‘CSmart’ LIDE provides the opportunity

to compile and execute implemented source

code during a tutorial. Learners can see how

a program behaves from its implemented

example code.

Additionally, users may experiment with

example code in terms of changing literals

and variables in the original example.

Compilation of modified code with error

feedback is possible with additional support

from an incorporated ‘GCC’ compiler.

Preliminary experiments involving text-to-

speech conversion was carried out, but this

feature was not implemented in the final

prototype because initial end-user

evaluations showed that the digital voice

presented some difficulty in understanding

what was said. Consequently, this feature

was omitted from the tool’s pedagogical

approach in order to minimize learning

hindrances

4. User Evaluation

A random sample of ten (10) first year

computer science students was selected to

participate in the user evaluation. These

participants had introductory programming

experience with the JavaScript programming

language. First, the participants were

introduced to the “CSmart” application by

means of a demonstration that illustrated

how to use it. The aim of this introduction

was to help eliminate usability issues with

potential to affect the intended learning

process. It was ensured that participants

understood that they were evaluating a tool,

rather than them having their programming

abilities being tested.

Figure 5: An overview of the ‘CSmart’ learner’s integrated development environment

4.1 Evaluation of visual system

The visualization technique was tested by

exposing the participants to each of the six

(6) implemented visuals. Each visual

attempted to explain a programming

concept. These concepts – (1) printf, (2) int,

(3) calculations, (4) scanf, (5) for loop, (6) if

condition – were selected because they are

popularly introduced early by C

programming textbooks (Foster, 1994;

Deitel, 2006). Each participant was then

asked to describe each visual in no more

than three (3) sentences. Each participant’s

description of a visual was compared against

the expected description to determine

whether or not the visuals effectively

satisfied their intended purpose. Results

showing the effectiveness of the visuals’

explanation are shown in figure 6.

Figure 6: Results showing how many

participants grasped/did not grasp visuals

of programming constructs

Participants’ feedback indicated that five (5)

out of six visuals were very effective with

more than 60% of participants grasping the

intended concept.

Figure 7: Results showing how nine (9) participants rated their own understanding of each

stepped through tutorial.

4.2 Evaluation of stepwise guide through

tutorials

Six (6) separate tutorials (example code),

each highlighting beginner programming

concepts, were introduced sequentially.

These tutorials were previously reviewed by

a domain expert in the field of teaching and

the assessment of programming using the C

language. After each treatment, the

participants were asked to rate themselves

(percentage-wise) on the level of

understanding/clarity they obtained from

each tutorial. Figure 7 shows the results of

the ratings of participant understanding of

each tutorial.

Participants rated their understanding of

tutorials at a mode of eighty percent (80%).

Eighty four percent (84%) of the total self –

ratings were above the self rated

understanding of fifty percent (50%).

Finally, all participants were asked:

1. if they felt that they learnt

programming in some significant amount.

2. if the steps for a tutorial were

easy to follow or not.

All participants reported that the tool was

helpful and they felt that they learned some

programming. These results were further

supported by unsolicited comments from the

participants:

- “made concept simple”

- “it helped to make things a little

more understandable”

- “at least I learnt something by doing

the tutorials”

- “boosted my knowledge”

- “only now I understand for loops”

- “can I have a copy of the program?”

All participants agreed that the stepwise

approach was “user friendly” and “easy to

follow”. Two (2) participants even

commented positively on the ease of use

before solicitation on that matter.

All participants complained that they could

not go back to step through a previous line

in a tutorial. Most users complained that

more information about programming

concepts were needed for constructs, such as

for the ‘for loop construct.

5. Conclusion

Participants’ responses revealed that this

novel pedagogical approach delivered

through the ‘CSmart’ CAL tool is useful and

is a viable teaching alternative. Example

source code files can be used directly within

an integrated development environment to

effectively tutor novice programmers.

6. Future Work

Further experiments to show how the use of

this tool correlates with the performance of

students in an introductory C programming

course can be done to further investigate the

effects of this pedagogical approach.

An online repository of tutorials (example

code) is currently being tested. Tutorials

may be uploaded by anyone but further rated

by an online community to distinguish

quality of tutorials.

Currently, the pedagogical model does not

cater for variable learner’s abilities. An

intelligent agent can be incorporated to

model each interacting learner in order to

consistently deliver appropriate content with

relevant instructional methods.

The teaching of other programming

languages is also a definite area to explore.

7. Acknowledgements

We wish to thank all those involved,

especially the testers, in both the formal and

informal evaluations of our work. The

Computer Science Department at the

University of Guyana was very supportive.

References

Anderson, J., Farrell, R., & Sauers, R.

(1984). How subject-matter knowledge

affects recall and interest. American

Educational Research Journal , 313-337.

Bergin, J., Brodie, K., & Patiño-Martínez,

M. (1996). An overview of visualization: its

use and design: report of the working group

in visualization. SIGCUE Outlook , 192-200.

Brusilovsky, P., Yudelson, M., &

Sosnovsky, S. (2004). An Adaptive E-

Learning Service for Accessing Interactive

Examples. Proceedings of World

Conference on E-Learning in Corporate,

Government, Healthcare, and Higher

Education 2004 (pp. 2556--2561). AACE.

Clark, R. C., & Mayer, R. E. (2008). E-

learning and the science of instruction 2nd

Edition. San Francisco: Pfeiffer.

Deitel, P. (2006). C how to program.

Prentice Hall.

Foster, L. (1994). C by Discovery (2nd

Edition ed.). El Granada, CA: Scott/Jones

Inc.

Johansson, P.-G. (1998). Programming by

example (poster): an instructional approach

allowing introductory students to quickly

grasp the power and excitement of

programming. SIGCSE Bull , 30 (0097-

8418), 284.

König, D., Paul, K., Guillaume, L., & Jon,

S. (2007). Groovy in Action. Manning.

LeFevre, J., & Dixon, P. (1986). Do written

instructions need examples? Cognition and

Instruction , 1-30.

Lesgold, A. (2001). The nature and methods

of learning by doing. American Psychologist

, 56 (11), 964-973.

Lister, R., Simon, B., & Thompson, E.

(2006). Not seeing the forest for the trees:

novice programmers and the SOLO

taxonomy. ITICSE '06: Proceedings of the

11th annual SIGCSE conference on

Innovation and technology in computer

science education (pp. 118--122). ACM.

Mayer, R. (1981). The Psychology of How

Novices Learn Computer Programming.

Computer Surveys , 13 (1), 121-141.

Moor, B., & Deek, F. (2006). On the design

and development of a UML-based Visual

Environment for Novice Programmers.

Journal of Information Technology

Education .

Reed, K., Dempster, A., & Ettinger, M.

(1985). Usefulness of analogous solutions

for solving algebra word problems. Journal

of experimental psychology. Learning,

memory, and cognition , 11 (1), 106-125.

Renkl, A. (2002). Learning from worked-out

examples: Instructional explanations

supplement self-explanations. Learning and

Instruction , 12, 529– 556.

Singh, L. (2005). Investigating the

Relationship between performances in

Mathematics and Computer Programming.

Unpublished Post Graduate Diploma in

Education Thesis. University of Guyana.