CoEDApplets

Collaborating in the Development of Teaching-oriented Applets

F. Almeida, V. Blanco

Dpto. Estad

ıstica I. O. y Computaci

on, Universidad de La Laguna, Tenerife, Spain

J. Regalado, A. Santos

Galotecnia R. S. S., Tenerife, Spain

Keywords:

Java Applets, Simulation, Data structures, Algorithmics techniques.

Abstract:

In this paper we present the CoEDApplets tool, a web application intended to facilitate the teaching/learning

of programming and algorithmics in engineering. Like its predecessor, EDApplets, it is based on Java Applets

technology and is animation and display oriented through the use of data structure and algorithm traces. In

contrast to the static nature of its predecessor, CoEDApplets is presented as a cooperative portal in which

different educational professionals can dynamically incorporate Applets that pursue the same objective. The

portal also provides for the internationalization of the Applets, also dynamically. Collaborators will be able to

contribute not only with code, but also their translations into various languages, thus helping the collaborative

process to transcend beyond borders and into countries where a different language is spoken. CoEDApplets

thus introduces elements aimed at supporting diversity within the new teaching framework of the European

Higher Education Area, which is expected to create a highly mobile student body.

1 INTRODUCTION

The learning of subjects involving algorithms and

programming represents perhaps one of the most dif-

ﬁcult subjects to learn in the ﬁeld of engineering. Stu-

dents have always had problems in assimilating ab-

stract mathematical notions, in particular when these

include the dynamics of how algorithms manipulate

data. In (Almeida et al., 2004), the EDApplets tool

((EDApplets, 2003)), an interactive tool intended to

teach the topics of data structures and algorithms, was

introduced. This model aims to bridge the gap cre-

ated by the dichotomy between different teaching and

learning styles.

Montgomery (Montgomery, 1998) asserts that this

dichotomy is present throughout each academic year,

a conclusion that is supported by an analysis of the

dimensions of learning styles proposed by Soloman

(Felder and Soloman, 2009) (processing, perception,

representation and comprehension) within the context

of engineering. He concludes that the vast distance

present between the learning styles observed in stu-

dents and the teaching styles commonly used only

serves to exacerbate learning difﬁculties (see Table 1).

Clearly, one way to individually reconcile students

with different teaching/learning styles is through the

use of multimedia software for speciﬁc subjects

((no Garrido and Lecanda, 1997), (Rodr

ıguez and

Caro, 2003)), in which applet-based technology plays

a vital role (Wie, 2001), (Sosa and de Sande, 2004). In

the speciﬁc case of data structures and algorithms, it is

common to ﬁnd various animations scattered online,

often under a public use license (Borowski, 1999),

or as supplementary multimedia material associated

with textbooks ((Rowe, 1997)). This type of approach

is backed by over two decades of development. A

summary of the state of the art can be found in (Ker-

ren and Stasko, 2001).

Our proposal is rather similar to that used by

(Kucera, 2009) and his Algovision tool. Our goal is to

present the display and animation alongside the code

associated with the data structure or algorithm. At the

present time we are unaware of any initiatives in the

ﬁeld of data structures or algorithms that allow the

user to work cooperatively from the perspective pre-

sented here.

The EDApplets proposal starts with the concept

of displaying the algorithm in the broadest sense. The

458

Almeida F., Blanco V., Regalado J. and Santos A. (2010).

CoEDApplets - Collaborating in the Development of Teaching-oriented Applets.

In Proceedings of the 2nd International Conference on Computer Supported Education, pages 458-463

DOI: 10.5220/0002799804580463

 SciTePress

Table 1: Results on learning styles observed by Montgomery.

Dimension Learning Teaching

Processing 67% of students learn better by

doing

Most classes are typically taught in a passive and re-

ﬂexive way

Perception 57% of students learn

methodically

They are normally taught intuitively

Representation 69% of students learn visually Classes tend to be oral

Comprehension 28% of students learn globally Rarely is the global view of a system emphasized

algorithms and their animations are introduced using

varying levels of abstraction in an integrated hyper-

media environment. In EDApplets, as the students

provide the inputs, the display shows the execution of

the algorithm step by step, a representation of its most

representative code traces and elements (variables,

data structures, etc.) and a display of the algorithm’s

behavior through graphical animations. EDApplets

was conceived as a web application based on the tech-

nology provided by Java Applets, and is available to

the public at www.pcg.ull.es/edapplets.

In this paper we present the CoEDApplets portal,

which is an improvement on the previous version and

is shown as a cooperative-type portal in which differ-

ent education professionals can dynamically incorpo-

rate Applets that pursue the same objective: to display

data structures and algorithms in an engineering con-

text. Moreover, the dynamic/cooperative nature of the

contributions extends to the internationalization pro-

cess, since features are included to ease the interna-

tionalization, also dynamic, of the Applets. Collab-

orators can contribute not only with codes, but also

with their translation into various languages. This

will allow the cooperative project to cross borders

into countries where a different language is spoken.

The portal has been translated by the authors into

English. Several students enrolled in the Socrates

program have selﬂessly contributed to the project by

translating the portal into German and Danish.

In addition to touching on various teaching as-

pects that can be aimed at different learning styles (ac-

tive/reﬂexive, methodical/intuitive, visual/oral, etc.),

the project now includes elements intended to sup-

port diversity within the new framework of the Eu-

ropean Higher Education Area (EHEA), which is ex-

pected to provide for a highly mobile student body.

(Almeida et al., 2004) also presents those method-

ological aspects that should be considered when intro-

ducing the tool into the classroom as an instructional

supplement. The paper is structured as follows: the 2

section makes a quantitative analysis of the use of the

EDApplets tool and lays some of the groundwork for

the new CoEDApplets tool; the 3 section describes

the interface and general design used in developing

the tool and the cooperative mechanisms offered to

every type of user. In the 4 section we introduce the

technology used to develop the portal, emphasizing

the aspects involving internationalization. Finally, the

conclusions are presented in 5.

2 EDAPPLET EVALUATION

The EDApplets portal has enjoyed success over the

three academic years it has been in use, which saw the

development of virtual teaching projects for courses

in Computer Data Processing for Statistics majors

and Advanced Programming for Industrial Engineer-

ing majors specializing in Electronics, both offered at

the University of La Laguna (ULL). A study was con-

ducted on the use of the tool (Figure 1), in which we

noted that it is not only used by ULL students, but

by those in various universities within Spain and also

in Latin America, who access the portal on a regular

basis.

Our experience in recent years has revealed some

difﬁculties inherent to the classroom use of EDAp-

plets, mainly as a result of the monolithic nature of

the tool which prevents, for example, its expansion

through the use of new Applets for instructors not

involved in the project. Another particularly rigid

aspect in the design involves the internationaliza-

tion mechanisms. This option is of special interest

within the framework of the European Higher Educa-

tion Area (EHEA). These reasons led us to redesign

EDApplets so as to address these two issues. The re-

sult is the CoEDApplets presented here.

The CoEDApplets portal has only just been placed

into use. We hope to be able to evaluate its usage at

the end of this academic year.

3 PORTAL DESIGN

Figure 2 shows the main CoEDApplets por-

tal. This portal is being temporarily hosted at

http://www.pcg.ull.es/coedapplets/. Since it is a

CoEDApplets - Collaborating in the Development of Teaching-oriented Applets

459

Figure 1: Usage statistics: 2007/2008 Academic year.

teaching-oriented portal, it was decided to moderate

the types of contributions received. There are three

user types: anonymous, registered and supervisors.

Anonymous users can access and execute all of the

Applets available in the system and see the source

code if desired (see Figure 3). This will be the nor-

mal option for students and teachers. Anonymous

users will be able to register via the portal. Registered

users can also provide new Applets (Upload option)

or translations to existing Applets. The uploading of

new or translated Applets is moderated by supervi-

sory users. The object of this supervision is no other

than to try to ensure coherence in the system, to avoid

inconsistencies in the Applet model and to minimize

the presence of errors in the portal.

To upload an Applet to the system, an Applet ti-

tle and description must be provided in either of the

two basic languages (Spanish or English), along with

the corresponding Applet code (.class, .jar and source

code), as well as the necessary information for its in-

ternationalization. The user must also provide a cate-

gory in which to include the Applet. Once an Applet

is uploaded, it is queued with other Applets await-

ing moderation. An administrator will be tasked with

evaluating the various contributions, approving those

that are deemed valid and discarding the rest. The

moderator will ensure that the Applet is in keeping

with the CoEDApplets design model so that it can be

adjusted to the teaching methodology behind the Co-

EDApplets concept. This aspect requires a speciﬁc

interface design style so as to maintain consistency.

Each applet will simulate the execution of an algo-

rithm. It presents the algorithm’s code and the student

inputs the data for the simulation run. The student

interacts with the Applet through the speed buttons.

Every Applet must include the ﬁne panels or work ar-

eas (see Figure 4): the data entry panel, the execution

speed control panel, the code display panel, the ani-

mation panel and the output panel for the trace vari-

ables.

Each is described below:

• Data Entry Panel. Used to input the values to be

simulated by the algorithm. The simulation com-

mences once the ’Start’ button is pressed.

• Speed Control Panel. Features two buttons,

’Continue’ and ’Step by step’, which allow alter-

nating the simulation between a continuous and

a stepwise execution of the code. In the step by

step execution mode, it is necessary to press the

’Step by step’ button whenever a new algorithm

instruction is to be executed. For the continuous

execution model, when so required by the algo-

rithm, a scroll bar is used in the Applet that allows

the execution speed to be increased or decreased

(see Figure 4).

• Code Display Panel. This panel shows the algo-

rithm code to be simulated. All of the codes in

CoEDApplets are shown as pseudocode that fol-

lows the style of the C programming language.

Each line of code is numbered for ease of refer-

ence. During the entire simulation process the line

CSEDU 2010 - 2nd International Conference on Computer Supported Education

460

Figure 2: Main page of CoEdapplets portal.

of code being executed is highlighted. At that in-

stant, in the animation panel, the animation action

associated with the highlighted line is executed,

while the new values assumed by the variables are

simultaneously shown in the output panel.

• Animation Panel. Shows a graphical display of

the algorithm simulation. When so required by

the algorithm, the Applet unfolds the panel into

as many panels as are necessary to adequately dis-

play the simulation, thus increasing the animation

capacity. Note in the Applet in Figure 4 how pan-

els have unfolded for the input, output, speed, etc.

• Output Panel. Shows the values of the variables

that are being traced. The value shown represents

the content of these variables before the line high-

lighted in the code panel is executed.

Figure 4 shows a screen capture during the exe-

cution of the Applet For (III). This Applet simulates

the assigning of values to an upper triangular matrix.

The code used two nested loops with upper limits N

and M. The values for the loop execution limits are

input and the execution shows which piece of data is

accessed at every instant and what value it assumes.

This design is intended to provide a channel for

the instruction of active and intuitive students through

the use of animation and graphical elements, while

also adapting to the skills of methodical and reﬂexive

students through the use of reasoning about the code

or about its execution trace. The overall integration of

techniques and structure allows for a global vision of

the objectives when necessary.

In the case of the translations, the cooperative pro-

cess is similar: a registered user can decide to provide

a new translation, in which case a new view would be

provided with the translation keys on one side and an

empty space to be ﬁlled in on the other. Once the pro-

cess is complete, it is sent and, as was the case with

Applets, queued alongside other translations awaiting

moderation. Once a translation is approved, the pro-

cess of regenerating the .jar ﬁle for the Applet in ques-

tion is started.

4 TECHNOLOGIES EMPLOYED

Technically, the project consists of a web applica-

tion implemented using the Python programming lan-

guage and the Django rapid development framework

(Django, 2009). This framework includes a library

set that implements the controller view model and the

DRY principle (Don’t Repeat Yourself).

In addition to using this technology, it was nec-

essary to solve certain problems inherent to the auto-

mated handling of the applet translations. Java pro-

vides the developer community with a set of libraries

that allow internationalization features to be incorpo-

rated into those applications that use its libraries (Mi-

crosystems, 2009). These libraries require modify-

ing the code to be internationalized, replacing literal

chains with calls to a method that is charged with han-

dling its translation. By way of example, below we

show a code before and after being internationalized:

// Before internationalization

sum = new JButton("sum");

// After

sum = new

JButton(messages.getString("sum"));

In this code, the messages variable is an in-

stance of the ResourceBundle class, which repre-

sents a repository of text strings. The proviso lies

in the fact that this repository is sensitive to the lo-

cation of the setting in which the code is executed.

Therefore, in a system conﬁgured for use in Span-

ish, the chain that will output the getString method

CoEDApplets - Collaborating in the Development of Teaching-oriented Applets

461

Figure 3: Structure of Applets listing grouped by category.

Figure 4: Applet showing a FOR iterative control statement.

will be the translation into said language of the sum

key. These text repositories correspond to ﬁles lo-

cated in the ﬁle system. A master ﬁle has to be

created (ResourceBundle.properties) where the

keys and translations are deﬁned for the default lan-

guage (normally English). Similarly, for each lan-

guage that is to be supported, a ﬁle has to be cre-

ated ResourceBundle XX.properties in which the

chain XX is replaced by the ISO code of the language

in question. This ﬁle will contain the translations as-

sociated with each key deﬁned in the application.

Making use of the internationalization features in

Django, both for chains generated in the code and for

those stored in the database, enables the interface to

be adapted to the user. The mechanism for doing the

translations in the case of literal chains present in the

code is similar to that mentioned earlier for Java, and

involves the use of GNU (GNU, 2009) libraries get-

text that are based on translation ﬁles (.po ﬁle exten-

sion) and on their compiled versions (.mo ﬁle exten-

CSEDU 2010 - 2nd International Conference on Computer Supported Education

462

sion). In the case of chains present in the database,

we resorted to the Django transdb application, which

expands the database scheme to include the different

translations for each of the text ﬁelds.

5 CONCLUSIONS

In this paper we presented the CoEDApplets tool, a

web application for the teaching/learning of program-

ming and algorithmics in Engineering. The most no-

table facet versus previous versions is that CoEDAp-

plets is presented as a cooperative portal in which dif-

ferent educational professionals can dynamically in-

corporate Applets that seek the same objective. This

cooperation also encompasses the internationalization

aspect and provides an added value within the new

European Higher Education Area (EHEA). The portal

we developed can clearly be conceived as an environ-

ment that can be adapted to all types of Applets, not

just those intended for the teaching of data structures

and algorithms.

ACKNOWLEDGEMENTS

This work was supported by the Spanish Ministry

of Science and Innovation through TIN2008-06570-

C04-03 projects. Moreover, it has been developed in

the framework of the European network COST-ICT-

0805 and the Spanish network CAPAP-H.

REFERENCES

Almeida, F., Blanco, V., and Moreno, L. (2004). EDAp-

plets: Una herramienta web para la enseanza de es-

tructuras de datos y tcnicas algortmicas. In Actas

de las X Jornadas de Enseanza Universitaria de In-

formtica, Jenui 2004, pages 409 – 416, Alicante.

Borowski, B. (1999). Home page. http://sciris.shu.edu/

borowski/sciris.shu.edu/∼borowski/.

Django (2009). Django framework project.

http://www.djangoproject.com/.

EDApplets (2003). Herramientas para la Visualizacin de

Estructuras de Datos y Tcnicas Algortmicas en la

Web. http://www.pcg.ull.es/edapplets/.

Felder, R. M. and Soloman, B. A. (2009). Learning

Styles and Strategies. http://www.ncsu.edu/felder-

public/ILSdir/styles.htm.

GNU (2009). Gettext library. http://www.gnu.org/software/

gettext.

Kerren, A. and Stasko, J. T. (2001). Algorithm animation -

introduction. In Software Visualization, pages 1–15.

Kucera, L. (2009). How to visualise abstract topics in com-

puter and communication science. In Intenatioal Con-

ference on Computer Supported Education, Lisboa.

Microsystems, S. (2009). Java Internationalization Tech-

nology. http://java.sun.com/javase/technologies/core/

basic/intl/java.sun.com.

Montgomery, S. (1998). Addressing Diverse Learn-

ing Style Through the Use of Multimedia.

http://www.vpaa.uillinois.edu/tid/resources/

montgomery.html.

no Garrido, C. C. and Lecanda, R. Q. (1997). Dise

nos

de Entornos de Aprendizaje con Ordenador: Progra-

mas Hipermedia para el Autoaprendizaje. Did

actica

y Organizaci

on Escolar. Universidad del Pa

ıs Vasco.

http://www.cfp.upv.es/.

Rodr

ıguez, A. G. and Caro, E. M. (2003). Esti-

los de Aprendizaje y E-learning. Hacia un Mayor

Rendimiento Acad

emico. Departamento de Econom

ıa

de la Empresa. Universidad Polit

ecnica de Cartagena.

http://www.upct.es/.

Rowe, G. (1997). Intro to Data Structures and Algorithms

with Java. Prentice Hall PTR, Upper Saddle River,

NJ, USA.

Sosa, R. and de Sande, F. (2004). ToTALF: tutorial on-

line para teor

ıa de aut

omatas y lenguajes formales. In

Proc. de las X Jornadas de Ense

nanza Universitaria

de la Inform

atica, pages 219–226, Alicante.

Wie, C. R. (2001). The Semiconductor Applet Service.

http://jas.eng.buffalo.edu/.

CoEDApplets - Collaborating in the Development of Teaching-oriented Applets

463