JSAV is a JavaScript library for creating algorithm visualizations that can be easily embedded in online learning materials. It supports various levels of learner interaction and engagement. Studies have found JSAV visualizations are effective learning tools, with students performing similarly to traditional methods and having positive attitudes toward the visual approach. JSAV visualizations have been widely used in courses and projects like OpenDSA to help students learn algorithms.

1. JSAV: The JavaScript Algorithm
Visualization Library
ITiCSE 2013, July 2
Ville Karavirta, Clifford A. Shaffer
ville@villekaravirta.com

2. BACKGROUND & MOTIVATION

3. Algorithm Visualization: What & Why?
• Dynamic, visual representations of the behavior
of an algorithm or data structure
• Goal to help students learn"
algorithms

4. AV Best Practices
• Learner Engagement
– Engagement taxonomy (from passive viewing to
constructing)
– Key to effectiveness of AVs
• AVs should be integrated with (hypertext)
learning material

5. Algorithm Visualization Tools
• Many wonderful"
AV systems"
have been"
developed J
• Most are based"
on Java L

6. State of Java on the Web
h"p://www.flickr.com/photos/stankuns/8738770989/

7. Rise of Mobile Devices

8. JSAV

9. What is JSAV?
• JavaScript library with support for:
– Creation of algorithm visualizations with different
levels of user interaction
– Automatic assessment of student solutions to
exercises
– Easy embedding of AVs to online material
– Collection of learner interaction data

10. Supported Data Structures

11. Animated Slideshows
Sorting a sublist in Shellsort
See an example at: http://algoviz.org/OpenDSA/Books/OpenDSA/html/Shellsort.html

12. Algorithm Visualizations
See an example at: http://algoviz.org/OpenDSA/Books/OpenDSA/html/InsertionSort.html

13. Mini-Proficiency Exercises
See an example at:
http://algoviz.org/OpenDSA/Books/OpenDSA/html/HashCImproved.html

14. Algorithm Simulation Exercises
See examples at: http://algoviz.org/OpenDSA/Books/OpenDSA/html/Mergesort.html
http://algoviz.org/OpenDSA/dev/OpenDSA/AV/Development/binaryTreeSearch.html

15. Customizable User Interface

16. Technology
• JavaScript, HTML & CSS
• Libraries used
– jQuery
– jQuery UI
– Raphaël (for SVG graphics)

17. “EVALUATIONS”

18. TRAKLA2 -> JSAV @ Aalto University

19. Student Results & Attitudes
• Student scores in line with previous years
• Same misconceptions as they had with
TRAKLA2
• “Students liked it” J
– Visual appearance got most mentions
• Positive and Negative
• Some technical issues
• 56% would like to solve the exercises on mobile
devices

20. OpenDSA @ Virginia Tech
• OpenDSA:
• Uses JSAV extensively (over 50 JSAV
visualizations)
– Many of them created by students
• OpenDSA has been used on multiple courses
• More details at: http://algoviz.org/OpenDSA/
“a collection of online, open-source tutorials which
combine textbook-quality text with randomly generated
instances of interactive examples and exercises”

21. OpenDSA @ Virginia Tech
• Research setup in Fall 2012
– Two groups, one using OpenDSA and one a
traditional textbook
– Topics Sorting and Hashing
• Results
– Group using OpenDSA had higher scores in
midterm (mean score 75 vs 70)
– Not a statistically significant difference

22. SUMMARY

23. Summary
• We have introduced an algorithm visualization
library, which:
– Is open-source (http://github.com/vkaravir/jsav/)
– Is implemented with web technologies
– Is easy to integrate into hypertext learning material
– Supports multiple levels of learner engagement
– Has been used by hundreds of students

24. THANK YOU! QUESTIONS?"
"
ville@villekaravirta.com"
http://github.com/vkaravir/jsav/"