jsav: the javascript algorithm visualization library
TRANSCRIPT
JSAV: The JavaScript Algorithm Visualization Library
ITiCSE 2013, July 2 Ville Karavirta, Clifford A. Shaffer
BACKGROUND & MOTIVATION
Algorithm Visualization: What & Why?
• Dynamic, visual representations of the behavior of an algorithm or data structure
• Goal to help students learn"algorithms
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
Algorithm Visualization Tools
• Many wonderful"AV systems"have been"developed J
• Most are based"on Java L
State of Java on the Web
h"p://www.flickr.com/photos/stankuns/8738770989/
Rise of Mobile Devices
JSAV
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
Supported Data Structures
Animated Slideshows
Sorting a sublist in Shellsort
See an example at: http://algoviz.org/OpenDSA/Books/OpenDSA/html/Shellsort.html
Algorithm Visualizations
See an example at: http://algoviz.org/OpenDSA/Books/OpenDSA/html/InsertionSort.html
Mini-Proficiency Exercises
See an example at: http://algoviz.org/OpenDSA/Books/OpenDSA/html/HashCImproved.html
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
Customizable User Interface
Technology
• JavaScript, HTML & CSS • Libraries used
– jQuery – jQuery UI – Raphaël (for SVG graphics)
“EVALUATIONS”
TRAKLA2 -> JSAV @ Aalto University
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
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”
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
SUMMARY
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