jsav: the javascript algorithm visualization library
TRANSCRIPT
![Page 1: JSAV: The JavaScript Algorithm Visualization Library](https://reader034.vdocuments.us/reader034/viewer/2022052307/55a755ef1a28abc05d8b47a2/html5/thumbnails/1.jpg)
JSAV: The JavaScript Algorithm Visualization Library
ITiCSE 2013, July 2 Ville Karavirta, Clifford A. Shaffer
![Page 2: JSAV: The JavaScript Algorithm Visualization Library](https://reader034.vdocuments.us/reader034/viewer/2022052307/55a755ef1a28abc05d8b47a2/html5/thumbnails/2.jpg)
BACKGROUND & MOTIVATION
![Page 3: JSAV: The JavaScript Algorithm Visualization Library](https://reader034.vdocuments.us/reader034/viewer/2022052307/55a755ef1a28abc05d8b47a2/html5/thumbnails/3.jpg)
Algorithm Visualization: What & Why?
• Dynamic, visual representations of the behavior of an algorithm or data structure
• Goal to help students learn"algorithms
![Page 4: JSAV: The JavaScript Algorithm Visualization Library](https://reader034.vdocuments.us/reader034/viewer/2022052307/55a755ef1a28abc05d8b47a2/html5/thumbnails/4.jpg)
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
![Page 5: JSAV: The JavaScript Algorithm Visualization Library](https://reader034.vdocuments.us/reader034/viewer/2022052307/55a755ef1a28abc05d8b47a2/html5/thumbnails/5.jpg)
Algorithm Visualization Tools
• Many wonderful"AV systems"have been"developed J
• Most are based"on Java L
![Page 6: JSAV: The JavaScript Algorithm Visualization Library](https://reader034.vdocuments.us/reader034/viewer/2022052307/55a755ef1a28abc05d8b47a2/html5/thumbnails/6.jpg)
State of Java on the Web
h"p://www.flickr.com/photos/stankuns/8738770989/
![Page 7: JSAV: The JavaScript Algorithm Visualization Library](https://reader034.vdocuments.us/reader034/viewer/2022052307/55a755ef1a28abc05d8b47a2/html5/thumbnails/7.jpg)
Rise of Mobile Devices
![Page 8: JSAV: The JavaScript Algorithm Visualization Library](https://reader034.vdocuments.us/reader034/viewer/2022052307/55a755ef1a28abc05d8b47a2/html5/thumbnails/8.jpg)
JSAV
![Page 9: JSAV: The JavaScript Algorithm Visualization Library](https://reader034.vdocuments.us/reader034/viewer/2022052307/55a755ef1a28abc05d8b47a2/html5/thumbnails/9.jpg)
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
![Page 10: JSAV: The JavaScript Algorithm Visualization Library](https://reader034.vdocuments.us/reader034/viewer/2022052307/55a755ef1a28abc05d8b47a2/html5/thumbnails/10.jpg)
Supported Data Structures
![Page 11: JSAV: The JavaScript Algorithm Visualization Library](https://reader034.vdocuments.us/reader034/viewer/2022052307/55a755ef1a28abc05d8b47a2/html5/thumbnails/11.jpg)
Animated Slideshows
Sorting a sublist in Shellsort
See an example at: http://algoviz.org/OpenDSA/Books/OpenDSA/html/Shellsort.html
![Page 12: JSAV: The JavaScript Algorithm Visualization Library](https://reader034.vdocuments.us/reader034/viewer/2022052307/55a755ef1a28abc05d8b47a2/html5/thumbnails/12.jpg)
Algorithm Visualizations
See an example at: http://algoviz.org/OpenDSA/Books/OpenDSA/html/InsertionSort.html
![Page 13: JSAV: The JavaScript Algorithm Visualization Library](https://reader034.vdocuments.us/reader034/viewer/2022052307/55a755ef1a28abc05d8b47a2/html5/thumbnails/13.jpg)
Mini-Proficiency Exercises
See an example at: http://algoviz.org/OpenDSA/Books/OpenDSA/html/HashCImproved.html
![Page 14: JSAV: The JavaScript Algorithm Visualization Library](https://reader034.vdocuments.us/reader034/viewer/2022052307/55a755ef1a28abc05d8b47a2/html5/thumbnails/14.jpg)
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
![Page 15: JSAV: The JavaScript Algorithm Visualization Library](https://reader034.vdocuments.us/reader034/viewer/2022052307/55a755ef1a28abc05d8b47a2/html5/thumbnails/15.jpg)
Customizable User Interface
![Page 16: JSAV: The JavaScript Algorithm Visualization Library](https://reader034.vdocuments.us/reader034/viewer/2022052307/55a755ef1a28abc05d8b47a2/html5/thumbnails/16.jpg)
Technology
• JavaScript, HTML & CSS • Libraries used
– jQuery – jQuery UI – Raphaël (for SVG graphics)
![Page 17: JSAV: The JavaScript Algorithm Visualization Library](https://reader034.vdocuments.us/reader034/viewer/2022052307/55a755ef1a28abc05d8b47a2/html5/thumbnails/17.jpg)
“EVALUATIONS”
![Page 18: JSAV: The JavaScript Algorithm Visualization Library](https://reader034.vdocuments.us/reader034/viewer/2022052307/55a755ef1a28abc05d8b47a2/html5/thumbnails/18.jpg)
TRAKLA2 -> JSAV @ Aalto University
![Page 19: JSAV: The JavaScript Algorithm Visualization Library](https://reader034.vdocuments.us/reader034/viewer/2022052307/55a755ef1a28abc05d8b47a2/html5/thumbnails/19.jpg)
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
![Page 20: JSAV: The JavaScript Algorithm Visualization Library](https://reader034.vdocuments.us/reader034/viewer/2022052307/55a755ef1a28abc05d8b47a2/html5/thumbnails/20.jpg)
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”
![Page 21: JSAV: The JavaScript Algorithm Visualization Library](https://reader034.vdocuments.us/reader034/viewer/2022052307/55a755ef1a28abc05d8b47a2/html5/thumbnails/21.jpg)
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
![Page 22: JSAV: The JavaScript Algorithm Visualization Library](https://reader034.vdocuments.us/reader034/viewer/2022052307/55a755ef1a28abc05d8b47a2/html5/thumbnails/22.jpg)
SUMMARY
![Page 23: JSAV: The JavaScript Algorithm Visualization Library](https://reader034.vdocuments.us/reader034/viewer/2022052307/55a755ef1a28abc05d8b47a2/html5/thumbnails/23.jpg)
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