EDAPPLETS: A WEB TOOL FOR TEACHING DATA STRUCTURES
AND ALGORITHMIC TECHNIQUES
F. Almeida, V. Blanco
Dept. Statistics and Computer Science, La Laguna University, La Laguna, Spain
J. Regalado, A. Santos
Galotecnia Networwks, Systems and Services, La Laguna, Tenerife, Spain
Keywords:
Java Applets, Simulation, Data structures, Algorithmics techniques.
Abstract:
We present in this work the EDApplets tool, a Web–based application oriented to the teaching / learning of
programming and algorithmics in engineering. Based on Java Applets technology, it provides the animation
and visualization by traces of algorithms and data structures. The tool covers various aspects in teaching
which may be directed to different kinds of learning styles: Active / thoughtful, methodical / intuitive, visual /
oral, etc. Also, we present the methodological aspects that should be considered to put in place the tool in the
classroom as a supplement to learning.
1 INTRODUCTION
The learning of topics related to the programming
skills and algorithms presents perhaps one of the
highest levels of difficulty in engineering studies. Stu-
dents have always difficulties to assimilate abstract
mathematical concepts, particularly when these in-
clude the dynamics of how the algorithms manipulate
the data. Montgomery (Montgomery, 1998) states
that these difficulties are maintained throughout each
academic year. In his experience explores the dimen-
sions of learning styles proposed by Soloman (Felder
and Soloman) (processing, perception, understanding
and representation) in the context of engineeringi, and
concludes that the huge gap between learning styles
of students and teaching styles, contributes to consol-
idate learning difficulties (Table 1).
Although there is no single definition and classifi-
cation of learning styles (Felder and Soloman), all au-
thors agree that there is no correct and incorrect styles
and that it is customary for people to use the styles in
a complementary manner (del Valle et. al). Thus, one
of the greatest challenges in education in general and
the teaching of programming in engineering in par-
ticular, is to be able to meet the particular needs of
individuals. One way of approaching the individual
students is through multimedia software on specific
subjects (Alejandrino Gallego Rodr
´
ıguez).
It is an objective of this work to present and dis-
close the tool EDApplets (EDApplets, 2003), an in-
teractive tool orinted to the topics of data structures
and algorithms. We designed this tool to reduce the
gap created by the dichotomy between the styles of
teaching and the styles of learning.
The idea of introducing such tools in the teach-
ing materials is not new and are usually supported by
the use of animations to illustrate the dynamic per-
formance of the algorithms. Hundreds of animations
have been developed and are scattered throughout the
internet, in many cases as free software. Most of them
have been designed under the assumption that the an-
imation will work as an effective tool in the learn-
ing process. However, although the animations are
always enthusiastically received, there is no empir-
ical evidence demonstrating the effectiveness of the
animations by themselves. Animations of algorithms
should be thoroughly revised to take chances for fur-
ther learning.
In our proposal, we start from a wider concept:
the visualization of the algorithms by which they and
its animations are introduced at different levels of ab-
straction in an integrated hypermedia environment. In
EDApplets, each applet provides an step-by-step im-
plementation of algorithms for inputs given by the
students. It also shows the presentation of the traced
code and it most representative elements (variables,
309
Almeida F., Blanco V., Regalado J. and Santos A. (2009).
EDAPPLETS: A WEB TOOL FOR TEACHING DATA STRUCTURES AND ALGORITHMIC TECHNIQUES.
In Proceedings of the First International Conference on Computer Supported Education, pages 309-312
DOI: 10.5220/0001980203090312
Copyright
c
SciTePress
Table 1: Results observed by Montgomery on learning styles.
Dimension Learning Education
Processing 67% of students learn better in an
active way
Most lessons are taught in a typically passive and
reflexive way
Perception 57% of students learn in an orderly
way
Usually they are taught intuitively
Representation 69% of students learn in a visual way The lessons are usually oral
Understanding 28% students learn in a holistic way Rarely the teaching emphasizes an overview of the
whole system
data structures, etc ...), as well as the behavior of
the algorithm using graphical animations. EDApplets
has been conceived as a web application based on
Java Applet technology and is publicly available at
www.pcg.ull.es/edapplets.
Several level integration are supported:
Integration of algorithms into a single environ-
ment versus to the huge dispersion of examples
that had been developed in the last decade.
Integration of interfaces in a way that minimizes
the learning curve.
Integration of various instructional elements
(graphics and text) on a single piece of soft-
ware, each component contains: executed code,
input/output and an animation of the algorithm.
In recent years we have observed a rapid and
widespread acceptance of the Web as a global
medium to present and process information. This in-
formation is accessible in multiple formats (multime-
dia) and at acceptable speeds (hypermedia). The evo-
lution of this environment has been due, among other
factors, to the Java programming language developed
by Sun Microsystems. In particular, Java Applets can
be executed inside any web browser. The use of this
technology to develop programs on the Web presents
some advantages (Kamthan). These are the reasons
that have motivated us to select this technology to de-
velop our tool:
Interoperability allows you to operate with a va-
riety of formats (text, graphics, animations and
sounds), with different languages (JavaScript,
VRML, Flash), with other programs on server
side and HTML/XML documents at client side.
User interaction: applets with graphical user in-
terfaces enhance the user interaction provided by
plain HTML pages.
Platforms independence and portability: Multi–
platform versions of educational software are
quite rare and often presents a huge dependence
on the platform. Applets can be run on different
architectures with just a compatible browser.
The work has been structured as: section 2 de-
scribes the interface and the overall design of the tool,
and some metholodological approaches for its use.
The website where the applets are published is pre-
sented in this section. Conclusions and future lines
are presented in section 3.
Figure 1: Applet example.
2 APPLETS DESIGN
In EDApplets all applets have a similar design of the
interface. Each applet simulates the execution of an
algorithm. The applet presents the code of the al-
gorithm and the student introduces the input data for
a simulation. The student interacts with the applet
through the buttons that controls the speed of the ex-
ecution. In every applet, there are five panels or work
areas (see figure 2): the input data panel, the execu-
tion speed control panel, the code display, the anima-
tion and the output panel where variables are traced.
Next we describe the function of each panel:
Input Data Panel: from this panel the student in-
troduces the input values for the algorithm. The
simulation begins after clicking at button ’Start’.
CSEDU 2009 - International Conference on Computer Supported Education
310
Figure 2: Applet illustrating a FOR iterative control sentence.
Speed Control Panel: There are two buttons,
’Continue’ button and ’Step by step’ button.
These buttons allow you to toggle between a con-
tinuous execution of the code and a step by step
execution. In the step by step execution mode is
necessary to press the button ’Step by step’ every
time you want to simulate a new sentence of the
algorithm. For continuous execution mode, when
the algorithm requires it, a scroll bar was intro-
duced in the applet that can increase or decrease
the simulation speed (Figure 1).
Display Code Panel: This panel presents the
code of the algorithm to be simulated. All codes
in EDApplets appear in the form of pseudocode
and follow C programming style. Every line of
code is tagged with numbers for easy referencing.
During the simulation process the running line of
code is shaded. For each sentence, the animation
panel shows the animation corresponding to the
shaded line. At the same time, the new data val-
ues assigned to variables are shown on the output
panel.
Animation Panel: Presents the graphical display
of the algorithm simulation . When needed, the
applet splits the panel in as many panels as nec-
essary to obtain a suitable display (Figure 1), thus
increasing the capacity of animation.
Output Panel: It shows the values of variables
being traced on the algorithm. The value shown
represents the content of these variables before it
is executed on the shaded line of code.
Figure 2 shows a sample of execution for the Ap-
plet For (III). The applet simulates the fills of values to
an upper triangular matrix. The code uses two nested
loops with upper limits N and M. The input values
are the limits of the loops, and the animation shows
the data accessed in every moment and their values.
With this design, we try to provide support for
active and intuitive students which can be teached
through animation and graphical elements. On the
other hand, we can not neglect the skills of the me-
thodical and thoughtful students through the use of
reasoning about the code or on the trace for its imple-
mentation. The king of integration allows for a global
view of objectives when necessary.
The design followed in EDApplets is sufficiently
simple to allow students to begin to make use of ap-
plets without too much effort. However, just as an
animation on its own could not contribute effectively
in the learning process, step by step execution of an
algorithm and the visualization of its trace might not
be instructive if used in isolation. We propose that
each applet should be accompanied by a text descrip-
tion that could be included within the applet, or in a
separte report. This textual information can be given
in the form of a tutorial, putting the student in the
context of the problem to be solved. In addition to
this introduction, another medium, not so obvious but
very important, is an “applet question paper”, which
must be completed by the student. The question paper
can be simply answered using the applet, or reasoning
EDAPPLETS: A WEB TOOL FOR TEACHING DATA STRUCTURES AND ALGORITHMIC TECHNIQUES
311
from it. The question paper could assist instructors in
integrating the resources of the applet in the lessons,
asking the student to answer it as part of the lab work.
Once the design and overall structure of applets
have been completed, we implemented various algo-
rithmic techniques and examples of use for data struc-
tures using this design. Special emphasis is placed to
achieve that the student can follow the technique in
a visual way. At the same time, the student can also
follow the pseudocode of the technique implemented.
Applets are developed and grouped with the al-
gorithmic techniques and data structure implemented.
We have designed a simple Web portal in which these
Applets are available for use by students. We sep-
arate applets for Control Structures, Data Structures
and Algorithmics techniques.
As an example for these techniques, Figure 1
presents the execution for a typical Divide and Con-
quer algorithm: the Hanoi towers problem. This ap-
plet shows the recursive call tree and the function pa-
rameters especified in each function execution. Stu-
dent get all the information in a visual way which
eases the understanding for this recursive technique.
3 CONCLUSIONS AND FUTURE
We have developed a multimedia tool which acts a
supplement in the teaching/learning tasks for pro-
gramming skills and algorithm understanding in en-
gineering. It is a web application that was developed
using Java Applets technology. We start from an inte-
grated and coherent design that enriches classical an-
imation of algorithms with the possibility of carrying
out executions and step by step traces on the code.
The design provides a teaching / learning active, vi-
sual, methodological and sequenced, without releas-
ing elements that contribute to an instruction reflec-
tive, verbal, intuitive and comprehensive as needed.
With this approximation we try to narrow the gap that
usually exists between teaching styles and learning
styles generally shown by the students.
The tool has been used successfully for three
academic years, in cooperation with virtual teach-
ing projects in Computer Science. We carried out a
study of the tool usage in the last academic year and
we found that we also have accesses from students
of other universities, mostly from Spanish-speaking
countries. Now we are in the process of internation-
alization of the tool, to extend it to other communi-
ties. The experience gained in developing these tools
in teaching encourages us to continue working on this
line. We have the need to add new examples of the use
of the structures and algorithmic techniques, which
would help the student a better understanding of these
mechanisms. Many of these techniques are better
treated as far as more examples are proposed. We are
considering the open implementation of the applets,
and also to integrate the tool in an open educational
content management system, so that users/developers
can, dynamically, provide new applets.
REFERENCES
Alejandrino Gallego Rodr
´
ıguez, E. M. C. Estilos de Apren-
dizaje y E-learning. Hacia un Mayor Rendimiento
Acad
´
emico. Departamento de Econom
´
ıa de la
Empresa. Universidad Polit
´
ecnica de Cartagena.
www.upct.es.
Bulnov
´
a, A. (2003). Java applets in education. In
The Mathematics Education into the 21st Cen-
tury project. International Conference The Decid-
able and the Undecidable in Mathematics Education,
Brno, Czech Republic. http://math.unipa.it/grim/-
21 project/21 brno03 Bulnova.pdf.
del Valle y otros, M. G. Identificaci
´
on de los Es-
tilos de Aprendizaje Predominantes en Estudiantes
de Magisterio de la Facultad de Ciencias de la
Educaci
´
on de la Universidad de C
´
adiz. Revista
Electr
´
onica Interuniversitaria de Formaci
´
on del Pro-
fesorado. www.aufop.org.
EDApplets (2003). Herramientas para la Visualizaci
´
on de
Estructuras de Datos y T
´
ecnicas Algor
´
ıtmicas en la
Web. www.pcg.ull.es/edapplets.
Felder, R. M. and Soloman, B. A. Learning
Styles and Strategies. www.ncsu.edu/felder-
public/ILSdir/styles.htm.
Fendt, W. (2004). Java applets on physics.
http://www.walter-fendt.de/ph14s.
Golton, P. (2002). Using java applets to
produce interactive learning materials.
http://ferl.becta.org.uk/display.cfm.
Kamthan, P. Java Applets in Educa-
tion. Internet Related Technologies.
http://parallel.ru/docs/Internet/IRT/articles/js151/index.htm.
Montgomery, S. (1998). Addressing Diverse Learn-
ing Style Through the Use of Multimedia.
www.vpaa.uillinois.edu/tid/resources/mont-
gomery.html.
CSEDU 2009 - International Conference on Computer Supported Education
312