JSAV: The JavaScript Algorithm Visualization Library

ITiCSE 2013, July 2 Ville Karavirta, Clifford A. Shaffer

ville@villekaravirta.com

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

THANK YOU! QUESTIONS?""

ville@villekaravirta.com"

http://github.com/vkaravir/jsav/"