Web-Based Algorithm and Program Visualization for Education

Web-Based Algorithm and Program Visualization for Education

Cristóbal Pareja-Flores (Universidad Complutense de Madrid, Spain), Jaime Urquiza-Fuentes (Universidad Rey Juan Carlos, Spain) and J. Ángel Velázquez Iturbide (Universidad Rey Juan Carlos, Spain)
DOI: 10.4018/978-1-60566-026-4.ch654


Probably, the most common use of the Web for programming courses is as a communication medium, facilitating submission and administration of assignments and grades (Burd, 2000). Another common use of the Web for programming education is as a public repository of high quality problems, such as the Lab Repository (Knox, 2006) and the ACM International Collegiate Programming Contest (Skiena & Revilla, 2003). Web sites may also host other resources, such as slides and audio lectures (Skiena & Revilla, 2003), algorithm animations (Brummond, 2001), or programming tools (English, 2001). These collections have no structure or, at best, are lineally or hierarchically structured, but more advanced repositories are possible. In this case, a management system must be delivered that, using (semi)structured mark-up languages, allows retrieving, maintaining, and publishing. A good representative is the eXercita system (Gregorio-Rodríguez et al., 2000, 2002). Finally, programming tools have been ported to be executed on the Web (Pareja-Flores & Velázquez-Iturbide, 2002). This article describes a different class of Web-based tools for programming education, namely tools for algorithm and program visualization. After the Background section, we describe the evolution of these systems, educational uses, and lessons learned. Finally, we outline future trends in the use of the Web for programming education and our personal conclusions.
Chapter Preview


Algorithm animation is a research field that is now 20 years old and still evolving. There is a consensus with respect to the videotape Sorting out Sorting presented in 1981 by Baecker (1998), which is considered a landmark on animation. It included animations of nine sorting algorithms. Afterward, some works established the main techniques for specifying and implementing algorithm animation: BALSA (Brown, 1988), Tango (Stasko, 1990), and Pavane (Roman, Cox, Wilcox, & Plun, 1992). Systematic categorizations of software visualizations have been proposed since then (Price, Baecker, & Small, 1998).

In a general setting, software visualization studies the visual representation of software entities (Stasko, Domingue, Brown, & Price, 1998). Visualization requires an effort to abstract the target entity to visualize and to make a good graphical design that may yield many different representations: text versus graphics, level of abstraction, displaying control versus data structures, static versus dynamic visualizations, one or multiple views, behavior versus performance, and so forth. This general aim can be achieved in different ways. Program visualization is aimed at the visualization of a piece of software so that the representation has a close relationship to the source code. Algorithm animation is aimed at the dynamic visualization of a piece of software illustrating the main ideas or steps (i.e., its algorithmic behavior), but without a close relationship to the source code. The graphical nature of software visualization in general and algorithm animation in particular makes them very conductive to the hypermedia features of the Web.

Key Terms in this Chapter

Information Visualization: Visualization of phenomena by means of appropriate representations. It is a field different from scientific visualization since information visualization emphasizes delivering visualizations that improve comprehension, whereas scientific visualization emphasizes delivering realistic visualizations.

Visualization: To make something visible by means of some representation. Visualization consists of two elements: a mental process and a graphical language. Note that “to visualize” is different from “to see.”

Algorithm Animation: Visualization of a piece of software illustrating the main ideas or steps (i.e., its algorithmic behavior), but without a close relationship to the source code.

Engagement Levels: Taxonomy that communicates the degree of involvement of the learners in an educational situation that includes visualization.

Effortlessness: Feature of an algorithm or program visualization system that refers to its support to create or use visualizations in a course without much effort from the instructor’s perspective.

Complete Chapter List

Search this Book: