A COMPUTER-BASED PROGRAMMI�G PEDAGOGY:
stepwise instructed implementation of explained example code
*Roger Gajraj
[email protected] Lenandlar Singh
[email protected] Malcolm Williams
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.
Top Related