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 difﬁculty in engineering studies. Stu-

dents have always difﬁculties 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 difﬁculties 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 difﬁculties (Table 1).

Although there is no single deﬁnition and classiﬁ-

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 speciﬁc

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

 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

reﬂexive 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 ﬁve panels or work

areas (see ﬁgure 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 ﬁlls 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 sufﬁciently

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 especiﬁed 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 reﬂec-

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. Identiﬁcaci

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