the jhavÉ project jhavÉ: java hosted algorithm visualization environment goal: development of a...
TRANSCRIPT
![Page 1: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/1.jpg)
The JHAVÉ Project
• JHAVÉ: Java Hosted Algorithm Visualization Environment
• Goal: Development of a comprehensive suite of visualization-based materials for teaching algorithms and data structures, work was partially supported by a National Science Foundation Grant, CCLI-EMD #0126494
• Principal Investigators:• Scott Grissom (Grand Valley State University)• Myles McNally (Alma College)• Thomas Naps (University of Wisconsin - Oshkosh)
• Website: http://jhave.org
![Page 2: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/2.jpg)
JHAVÉ “supports” Effective AV -- How?
• “Stop-and-think” questions• Documentation window• Pseudo-code window• Input generators• Audio accompaniment
![Page 3: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/3.jpg)
A Tour of the JHAVÉ Website
![Page 4: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/4.jpg)
JHAVÉ Organization
• Client-server mode of operation• Generation of visualization script occurs by running
algorithm on server• Viewing of script handled by “dumb” rendering
client• Webstart facilitates deployment
• Users just need to access the appropriate website to run the client on their machine
• JHAVÉ supports a variety of scripting languages through plug-ins
![Page 5: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/5.jpg)
The JHAVÉ Client-Server Model
Algorithm Choice
Input Generator Presented
Script is Rendered
Appropriate Input Generator Served
Appropriate Script Generation
Program Run
Client ServerData Flows
Choice
InputGenerator
Input
Vis Script
![Page 6: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/6.jpg)
Overall GAIGS VIS Script Structure
• A GAIGS visualization script is defined in a show file
• The general script structure is:• one or more snapshots• followed by an optional question collection
• The show file could be created by hand, or (more usually) as the output of a script generating program
![Page 7: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/7.jpg)
Example of Overall Script Structure
<show>
<snap> … </snap>
<snap> … </snap>
<snap> … </snap>
<questions> … </questions>
</show>
A Show File with Three Snapshots and a Question Collection
![Page 8: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/8.jpg)
A Simple, but Complete, Example<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE show PUBLIC "-//JHAVE//DTD GAIGS SHO//EN" "gaigs_sho.dtd">
<show><snap>
<title>queue</title><pseudocode_url>index.php?line=2</pseudocode_url><queue>
<list_item color="#0000FF"><label>9</label>
</list_item></queue><question_ref ref="0"/>
</snap><questions>
<question type="MCQUESTION" id="0"><question_text>Color of the next queue item?</question_text><answer_option>red</answer_option><answer_option is_correct="yes">green</answer_option><answer_option>blue</answer_option>
</question></questions>
</show>A Simple Visualization Script with a Multiple Choice Question
![Page 9: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/9.jpg)
Generating Scripts
• GAIGS XML scripts can be generated by programs written in any programming language
• However, the JHAVÉ environment is designed to directly support programs written in Java
• Input to programs must be specified on the command line
• The first command line parameter is the file name the script is to be written to
• Support classes are available which can be used to directly generate the required GAIGS XML
![Page 10: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/10.jpg)
Support Classes for Script Generation
• ShowFile: Handles the actual writing to the script file• Structure Classes: Basically one for each of the
GAIGS built-in structures• Linear Structures: GAIGSstack, GAIGSqueue,
GAIGSlist• Arrays: GAIGSarray (includes bar graphs)• Trees and Graphs: GAIGStree, GAIGSgraph• Text: GAIGStext
• Question Classes: Support various aspects of generating questions in scripts
• XMLfibQuestion, XMLmcQuestion, XMLmsQuestion, XMLtfQuestion
![Page 11: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/11.jpg)
The ShowFile Class
• The ShowFile class is responsible for all writing to the script file
• Constructors:• ShowFile(String fileName)
• file is opened, and preliminary XML written to it• Key Methods:
• writeSnap(String title, Double titleSize, GAIGSdatastr… ds)
• writes to the file the XML for a snap with the title and each of the listed structures
• close()• writes any questions and closes the file
![Page 12: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/12.jpg)
The GAIGSstack Class I
• GAIGSstack functions in the usual way as a stack (with push and pop operations
• But also stores color and other information in a way that can remain hidden (if desired) from the client class
• Constructors:• GAIGSstack()
• create a stack using defaults for location and color• GAIGSstack(String n, String c, double x1, y1, x2, y2,
size)• create a stack with name n, color c, location
<(x1,y1),(y2,y2)>, and fontSize size
![Page 13: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/13.jpg)
The GAIGSstack Class II
• Key Methods:• pop()• push(Object o)• push(Object o, String c)
• Key Inherited Methods (from GAIGSlist)• isEmpty()• peek()
![Page 14: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/14.jpg)
import exe.*;import java.io.*;
public class Example1 {static final String title = "Stack Example";static final double titleSize = 0.08;
public static void main (String [] args) throws IOException {
GAIGSstack stack = new GAIGSstack();
ShowFile show = new ShowFile(args[0]);int itemsToAdd = Integer.parseInt(args[1]);
for (int i = 0; i < itemsToAdd; i++) {
stack.push(i);show.writeSnap(title, titleSize, stack);
}show.close();
}}
Example Code: Using the ShowFile and GAIGSstack Classes
![Page 15: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/15.jpg)
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE show PUBLIC "-//JHAVE//DTD GAIGS SHO//EN"
"gaigs_sho.dtd">
<show>
<snap><title>Stack Example</title><stack><bounds x1="0.0" y1="0.0" x2="1.0" y2="1.0" fontsize="0.05"/><list_item color="#FFFFFF"><label>0</label></list_item></stack></snap>
<questions></questions></show>
Example Output: itemsToAdd == 1
ShowFile constructor
ShowFile writeSnap
ShowFile close
![Page 16: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/16.jpg)
GAIGSarray I
• GAIGS provides support for one and two dimensional arrays
• Row labels can be specified, and if the array is 2-d column labels as well
• If the array is a 1-d array of int, it can be shown either in the usual format or as a bar graph
• Here we just briefly consider the 1-d case, please consult the GAIGS API for complete details on this class
![Page 17: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/17.jpg)
GAIGSarray II
• Constructor:
• GAIGSarray (String s, boolean bar, color c, double x1, y1, x2, y2, size)
• create a label with name s, color c, location <(x1,y1),(y2,y2)>, and fontSize size. Display as a bargraph if bar == true
![Page 18: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/18.jpg)
GAIGSarray III
• Key Methods:• set(Object o, int loc) and set(Object o, int loc,
String c)• set location loc to have value o, optionally with
color c• get(int loc)
• return the value at location loc• setColor(int loc, String c)
• set the color of the item at location loc to c• setName(String s)
• set the name of this structure to s
![Page 19: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/19.jpg)
Activity: Bubblesort Visualization
• Our exercise will be to create a complete visualization for the (infamous) Bubblesort algorithm
• Supplied code will create the snapshot shown below:
![Page 20: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/20.jpg)
Supplied Code
import java.io.*;import java.util.Random;import exe.*;
public class Sort {
static final String TITLE = null; // no titlestatic int arraySize; // # of items to sortstatic GAIGSarray items; // the array of items
Exercise Code: Preamble
![Page 21: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/21.jpg)
public static void main(String args[]) throws IOException {
// process program parameters and create the show file objectShowFile show = new ShowFile(args[0]);arraySize = Integer.parseInt(args[1]);
// define the two structures in the show snapshotsitems = new GAIGSarray(arraySize, true, "BubbleSort",
"#999999", 0.1, 0.1, 0.9, 0.9, 0.07);
// initialize the array to be sorted & show itloadArray(); show.writeSnap(TITLE, items);
for (int pass = 1; pass < arraySize; pass++)
for (int i = 0; i < arraySize-pass; i++)if ((Integer)(items.get(i)) > (Integer)(items.get(i+1)))
swap(i, i+1);
// visualization is doneshow.close();
}
Exercise Code: Main method
![Page 22: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/22.jpg)
// Load the array with values from 1 to the array size, then// shuffle these values so that they appear in random order.
private static void loadArray () {Random rand = new Random();for (int i = 0; i < arraySize; i++)
items.set(i+1,i);for (int i = 0; i < arraySize-1; i++)
swap(i, i + (Math.abs(rand.nextInt()) % (arraySize - i)) );
}
// Swap two items in the array. private static void swap (int loc1, int loc2) {
Object temp = items.get(loc1);items.set(items.get(loc2), loc1);items.set(temp, loc2);
}
Exercise Code: Support Routines
![Page 23: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/23.jpg)
If you decide to do the activity …
1. Decide when snapshots should be taken (when do the interesting events occur?)
2. Use coloring to show the ongoing actions of the algorithm
3. Use the name of the array to produce useful messages about the status of the algorithm
![Page 24: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/24.jpg)
Adding Interactive Questions
• GAIGS Scripts can be used to ask four types of
questions:
• True / False
• Fill in the Blank
• Multiple Choice
• Multiple SelectionA Multiple Choice Question
![Page 25: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/25.jpg)
Question Basics
• All the questions in a GAIGS script are collected at the end of the XML File
• Each contains a unique ID number/identifier
• A snapshot can contain a question reference• The reference is by ID number/identifier• A question reference causes the question to
appear when the snapshot is shown
![Page 26: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/26.jpg)
Question Generation Support I
• As for GAIGS structures, there are support classes for the generation of question XML
• XMLtfQuestion: true / false• XMLmcQuestion: multiple choice• XMLmsQuestion: multiple selection• XMLfibQuestion: fill in the blank
• Each support class allows the definition of the question text, choices, and correct answer(s)
![Page 27: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/27.jpg)
Question Generation Support II
• To include a question in a snap, pass a question in ShowFile method writeSnap
• This method also require documentation and pseudocode urls (which may be null)
• writeSnap(String title, double titleSize, String doc_url, String pseudo_url, question q, GAIGSdatastr… ds)
• writes to the file the XML for a snap with the title, titleSize, documentation and pseudocode urls, a question and each of the listed data structures
![Page 28: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/28.jpg)
XMLtfQuestion
• Constructor:• XMLtfQuestion(ShowFile f, String id)
• The id string must be unique within a script• ShowFile reference is a legacy code issue
• Key Methods: • setQuestionText(String text)
• sets the text which will be displayed as the question
• setAnswer(boolean value)• set the correct answer to value
![Page 29: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/29.jpg)
XMLtfQuestion Example
int id = 0;boolean swapIsDone = false;
…
XMLtfQuestion tf = new XMLtfQuestion(show, id + "");id++;tf.setQuestionText("Will a swap be done next?");
…
show.writeSnap(TITLE, null, null, tf, …);
…
tf.setAnswer(swapIsDone);
![Page 30: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/30.jpg)
XMLfibQuestion
• Constructor:• XMLfibQuestion(ShowFile f, String id)
• The id string must be unique within a script• ShowFile reference is a legacy code issue
• Key Methods: • setQuestionText(String text)
• sets the text which will be displayed as the question
• setAnswer(String text)• set text to be one of answers to be accepted as
correct
![Page 31: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/31.jpg)
XMLfibQuestion Example
int id = 0;int swapsThisPass = 0;
…
XMLfibQuestion fib = new XMLfibQuestion(show, id + "");id++;fib.setQuestionText("How many swaps will be made this pass?");
…
show.writeSnap(TITLE, null, null, fib, …);
…
fib.setAnswer(swapsThisPass + "");
![Page 32: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/32.jpg)
Probabilistic Question Asking
• The support classes allow the user to define the number of questions to be asked during a session, despite how many are “added”
• To do this, use the alternative constructor for ShowFile:
• ShowFile(String fileName, int count)
• Exactly count questions will be asked (as long as at least that many questions have been added)
![Page 33: The JHAVÉ Project JHAVÉ: Java Hosted Algorithm Visualization Environment Goal: Development of a comprehensive suite of visualization-based materials for](https://reader036.vdocuments.us/reader036/viewer/2022062422/56649e745503460f94b74b3f/html5/thumbnails/33.jpg)
Next Activity: Bubblesort + Questions
Return to your Bubblesort visualization and
1. Add a question which asks how many swaps will be made during the next pass (asked just before a pass)
2. Add a question which asks if a swap will be made (asked just before a comparison is made)
3. Use probabilistic questioning to limit the number of questions asked during a session