research-article

Seamless Merging of Hypertext and Algorithm Animation

Author:

Ville KaravirtaAuthors Info & Claims

ACM Transactions on Computing Education (TOCE), Volume 9, Issue 2

Article No.: 10, Pages 1 - 18

https://doi.org/10.1145/1538234.1538237

Published: 01 June 2009 Publication History

Abstract

Online learning material that students use by themselves is one of the typical usages of algorithm animation (AA). Thus, the integration of algorithm animations into hypertext is seen as an important topic today to promote the usage of algorithm animation in teaching. This article presents an algorithm animation viewer implemented purely using HTML and JavaScript. The viewer is capable of viewing animations in Xaal (eXtensible Algorithm Animation Language), a language designed to allow easy transformation of AAs between various formats. This solution is extremely suited for use in hypertext learning material due to the advanced interaction possibilities between learning material (HTML) and the animation.

References

[1]

Akingbade, A., Finley, T., Jackson, D., Patel, P., and Rodger, S. H. 2003. JAWAA: Easy Web-based animation from CS0 to advanced CS courses. In Proceedings of the 34th SIGCSE Technical Symposium on Computer Science Education (SIGCSE’03). 162--166.

Digital Library

[2]

Baecker, R. M. 1981. Sorting out sorting. Narrated colour videotape, 30 minutes.

[3]

Bonifaci, V., Demetrescu, C., Finocchi, I., Italiano, G. F., and Laura, L. 2005. Portraying algorithms with Leonardo Web. In Proceedings of the Web Information Systems Engineering Workshops (WISE’05), M. Dean et al., Eds. Lecture Notes in Computer Science 3807, 73--83.

Digital Library

[4]

Brown, M. H. 1988. Algorithm Animation. MIT Press, Cambridge, MA.

[5]

Brown, M. H. and Sedgewick, R. 1984. A system for algorithm animation. In Proceedings of the 11th Annual Conference on Computer Graphics and Interactive Techniques (SIGGRAPH’84). 177--186.

Digital Library

[6]

Diehl, S. 2007. Software visualization: Visualizing the Structure, Behavior, and Evolution of Software. Springer: Berlin, Germany.

Digital Library

[7]

Furcy, D., Naps, T., and Wentworth, J. 2008. Sorting out sorting: The sequel. In Proceedings of the 13th Annual Conference on Innovation and Technology in Computer Science Education (ITiCSE’08). 174--78.

Digital Library

[8]

Grissom, S., McNally, M. F., and Naps, T. 2003. Algorithm visualization in CS education: Comparing levels of student engagement. In Proceedings of the ACM Symposium on Software Visualization (SOFTVIS’03). 87--94.

Digital Library

[9]

Hundhausen, C. D. and Douglas, S. A. 2002. Low-fidelity algorithm visualization. J. Vis. Lang. Comput. 13, 5, 449--470.

[10]

Hundhausen, C. D., Douglas, S. A., and Stasko, J. T. 2002. A meta-study of algorithm visualization effectiveness. J. Vis. Lang. Comput. 13, 3, 259--290.

[11]

Jarc, D. J., Feldman, M. B., and Heller, R. S. 2000. Assessing the benefits of interactive prediction using Web-based algorithm animation courseware. In Proceedings of the 31st Technical Symposium on Computer Science Education (SIGCSE’00). 377--381.

Digital Library

[12]

Karavirta, V. 2007. Licentiate’s thesis, Helsinki University of Technology. Retrieved from http://www.cs.hut.fi/Research/SVG/publications/karavirta-lis.pdf.

[13]

Karavirta, V. 2009. Towards seamless merging of hypertext and algorithm animation. In Proceedings of the 5th Program Visualization Workshop (PVW’08). Electronic Notes in Theoretical Computer Science 224, 105--114.

Digital Library

[14]

Karavirta, V., Korhonen, A., Malmi, L., and Stålnacke, K. 2004. MatrixPro -- A tool for on-the-fly demonstration of data structures and algorithms. In Proceedings of the 3rd Program Visualization Workshop (PVW’04). 26--33.

[15]

Laakso, M.-J., Myller, N., and Korhonen, A. 2008. Analyzing the extended engagement taxonomy in collaborative algorithm visualization. J. Educ. Technol. Soc. To appear.

[16]

Lauer, T. 2006. Learner interaction with algorithm visualizations: Viewing vs. changing vs. constructing. In Proceedings of the 11th Annual SIGCSE Conference on Innovation and Technology in Computer Science Education (ITiCSE’06). 202--206.

Digital Library

[17]

Malmi, L., Karavirta, V., Korhonen, A., Nikander, J., Seppälä, O., and Silvasti, P. 2004. Visual algorithm simulation exercise system with automatic assessment: TRAKLA2. Informatics Educ. 3, 2, 267--288.

[18]

Moreno, A., Myller, N., Sutinen, E., and Ben-Ari, M. 2004. Visualizing programs with Jeliot 3. In Proceedings of the International Working Conference on Advanced Visual Interfaces (AVI’04). 373--376.

Digital Library

[19]

Morris, J. 2005. Algorithm animation: Using algorithm code to drive an animation. In Proceedings of the 7th Australasian Conference on Computing Education (ACE’05). 15--20.

Digital Library

[20]

Naharro-Berrocal, F., Pareja-Flores, C., Velázquez-Iturbide, J. A., and Martínez-Santamarta, M. 2001. Automatic Web publishing of algorithm animation. Upgrade II, 2, 41--45.

[21]

Naps, T., McNally, M., and Grissom, S. 2007. Realizing XML-driven algorithm visualization. In Proceedings of the 4th Program Visualization Workshop (PVW’06). Electron. Notes Theor. Comput. Sci. 178, 129--135.

Digital Library

[22]

Naps, T. L. 2005. JHAVÉ: Supporting algorithm visualization. IEEE Comput. Graph. Appl. 25, 5, 49--55.

Digital Library

[23]

Naps, T. L., Rössling, G., Almstrum, V., Dann, W., Fleischer, R., Hundhausen, C., Korhonen, A., Malmi, L., McNally, M., Rodger, S., and Velázquez-Iturbide, J. A. 2003. Exploring the role of visualization and engagement in computer science education. SIGCSE Bull. 35, 2, 131--152.

Digital Library

[24]

Naps, T. L., Rössling, G., Anderson, J., Cooper, S., Dann, W., Fleischer, R., Koldehofe, B., Korhonen, A., Kuittinen, M., Leska, C., Malmi, L., McNally, M., Rantakokko, J., and Ross, R. J. 2003. Evaluating the educational impact of visualization. SIGCSE Bull. 35, 4, 124--136.

Digital Library

[25]

Naps, T. L., Rössling, G., Brusilovsky, P., English, J., Jarc, D., Karavirta, V., Leska, C., McNally, M., Moreno, A., Ross, R. J., and Urquiza-Fuentes, J. 2005. Development of XML-based tools to support user interaction with algorithm visualization. SIGCSE Bull. 37, 4, 123--138.

Digital Library

[26]

Rajala, T., Laakso, M.-J., Kaila, E., and Salakoski, T. 2008. Effectiveness of program visualization: A case study with the ViLLE tool. J. Inf. Technol. Educ. Innov. Pract. 7, 15--32.

[27]

Ross, R. J. and Grinder, M. T. 2002. Hypertextbooks: Animated, active learning, comprehensive teaching and learning resource for the Web. In Proceedings of the International Seminar on Software Visualization, S. Diehl, Ed. Springer, 269--283.

Digital Library

[28]

Rössling, G. and Freisleben, B. 2002. ANIMAL: A system for supporting multiple roles in algorithm animation. J. Vis. Lang. Comput. 13, 3, 341--354.

[29]

Rössling, G., Naps, T., Hall, M. S., Karavirta, V., Kerren, A., Leska, C., Moreno, A., Oechsle, R., Rodger, S. H., Urquiza-Fuentes, J., and Velázquez-Iturbide, J. A. 2006. Merging interactive visualizations with hypertextbooks and course management. SIGCSE Bull. 38, 4, 166--181.

Digital Library

[30]

Rössling, G. and Naps, T. L. 2002a. A testbed for pedagogical requirements in algorithm visualizations. In Proceedings of the 7th Annual SIGCSE Conference on Innovation and Technology in Computer Science Education (ITiCSE’02). 96--100.

Digital Library

[31]

Rössling, G. and Naps, T. L. 2002b. Towards intelligent tutoring in algorithm visualization. In Proceedings of the 2nd International Program Visualization Workshop (PVW’02). 125--130.

[32]

Shaffer, C. A., Cooper, M., and Edwards, S. H. 2007. Algorithm visualization: a report on the state of the field. In Proceedings of the 38th Technical Symposium on Computer Science Education (SIGCSE’07). 150--154.

Digital Library

[33]

Stasko, J. T. 1990. TANGO: A framework and system for algorithm animation. IEEE Comput. 23, 9, 27--39.

Digital Library

[34]

Urquiza-Fuentes, J. and Velázquez-Iturbide, J. A. 2007. An evaluation of the effortless approach to build algorithm animations with WinHIPE. In Proceedings of the 4th Program Visualization Workshop (PVW’06). 3--13.

[35]

Urquiza-Fuentes, J. and Velázquez-Iturbide, J. A. 2009. Pedagogical effectiveness of engagement levels - a survey of successful experiences. In Proceedings of the 5th Program Visualization Workshop (PVW’08). Elect. Notes Theor. Comput. Sci. 224, 169--178.

Digital Library

[36]

W3C. 1999. XSL transformations (XSLT) 1.0 specification. W3C Recommendation.

[37]

W3C. 2001. Scalable vector graphics (SVG) 1.0 specification. W3C Recommendation.

Cited By

Tilantera AMariani GKorhonen ASeppala O(2021)Towards a JSON-based Algorithm Animation Language2021 Working Conference on Software Visualization (VISSOFT)10.1109/VISSOFT52517.2021.00026(135-139)Online publication date: Sep-2021
https://doi.org/10.1109/VISSOFT52517.2021.00026
Supli AShiratuddin N(2017)Designing algorithm visualization on mobile platform: The proposed guidelines10.1063/1.5005943(020311)Online publication date: 2017
https://doi.org/10.1063/1.5005943
Karavirta VShaffer C(2016)Creating Engaging Online Learning Material with the JSAV JavaScript Algorithm Visualization LibraryIEEE Transactions on Learning Technologies10.1109/TLT.2015.24906739:2(171-183)Online publication date: 1-Apr-2016
https://doi.org/10.1109/TLT.2015.2490673
Show More Cited By

Index Terms

Seamless Merging of Hypertext and Algorithm Animation
1. Social and professional topics
  1. Professional topics
    1. Computing education
      1. Computing education programs
        Computer science education

Recommendations

Towards Seamless Merging of Hypertext and Algorithm Animation

The integration of algorithm animations into hypertext is seen as an important topic today. This paper will present a prototype algorithm animation viewer implemented purely using HTML and JavaScript. The viewer is capable of viewing animations in Xaal (...
Algorithm animation: using algorithm code to drive an animation
ACE '05: Proceedings of the 7th Australasian conference on Computing education - Volume 42

Computer algorithms commonly involve creation, reorganization or destruction of relations between objects. This means that they are generally excellent candidates for visualization for teaching purposes. For a student to comprehend all the ramifications ...
Easy Algorithm Animation on the Web

The animation environment Jeliot automates visualization of algorithms over the Internet. The user can visualize algorithms of his own, not merely the selection supplied by a service provider. Jeliot is based on self-animating data types: the user ...

Comments

Information & Contributors

Information

Published In

cover image ACM Transactions on Computing Education

ACM Transactions on Computing Education Volume 9, Issue 2

Special Issue on the 5th Program Visualization Workshop (PVW’08)

June 2009

116 pages

EISSN:1946-6226

DOI:10.1145/1538234

Issue’s Table of Contents

Copyright © 2009 ACM.

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than ACM must be honored. Abstracting with credit is permitted. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. Request permissions from [email protected]

Publisher

Association for Computing Machinery

New York, NY, United States

Publication History

Published: 01 June 2009

Accepted: 01 February 2009

Revised: 01 February 2009

Received: 01 September 2008

Published in TOCE Volume 9, Issue 2

Permissions

Request permissions for this article.

Request Permissions

Check for updates

Author Tags

Qualifiers

Research-article
Research
Refereed

Funding Sources

Suomen Akatemia

Contributors

Other Metrics

View Article Metrics

Bibliometrics & Citations

Bibliometrics

Article Metrics

5
Total Citations
View Citations
483
Total Downloads

Downloads (Last 12 months)2
Downloads (Last 6 weeks)1

Reflects downloads up to 07 Jan 2025

Other Metrics

View Author Metrics

Citations

Cited By

Tilantera AMariani GKorhonen ASeppala O(2021)Towards a JSON-based Algorithm Animation Language2021 Working Conference on Software Visualization (VISSOFT)10.1109/VISSOFT52517.2021.00026(135-139)Online publication date: Sep-2021
https://doi.org/10.1109/VISSOFT52517.2021.00026
Supli AShiratuddin N(2017)Designing algorithm visualization on mobile platform: The proposed guidelines10.1063/1.5005943(020311)Online publication date: 2017
https://doi.org/10.1063/1.5005943
Karavirta VShaffer C(2016)Creating Engaging Online Learning Material with the JSAV JavaScript Algorithm Visualization LibraryIEEE Transactions on Learning Technologies10.1109/TLT.2015.24906739:2(171-183)Online publication date: 1-Apr-2016
https://doi.org/10.1109/TLT.2015.2490673
Karavirta VShaffer CCarter JUtting IClear A(2013)JSAVProceedings of the 18th ACM conference on Innovation and technology in computer science education10.1145/2462476.2462487(159-164)Online publication date: 1-Jul-2013
https://dl.acm.org/doi/10.1145/2462476.2462487
Fragoudakis CKarampatsis M(2012)Visualizing Content for Computational Geometry CoursesCases on Inquiry through Instructional Technology in Math and Science10.4018/978-1-4666-0068-3.ch021(581-604)Online publication date: 2012
https://doi.org/10.4018/978-1-4666-0068-3.ch021

View Options

Login options

Check if you have access through your login credentials or your institution to get full access on this article.

Full Access

Get this Article

View options

PDF

View or Download as a PDF file.

eReader

View online with eReader.

Media

Figures

Other

Tables

View Issue’s Table of Contents