The JHAV

1
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

2
JHAVÉ supports Effective AV -- How?

• Stop-and-think questions
• Documentation window
• Pseudo-code window
• Input generators
• Audio accompaniment

3
A Tour of the JHAVÉ Website
4
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

5
The JHAVÉ Client-Server Model
Algorithm Choice
Choice
Appropriate Input Generator Served
Input Generator
Input Generator Presented
Input
Appropriate Script Generation Program Run
Vis Script
Script is Rendered
Client
Data Flows
Server
6
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

7
Example of Overall Script Structure
ltshowgt ltsnapgt lt/snapgt ltsnapgt
lt/snapgt ltsnapgt lt/snapgt ltquestionsgt
lt/questionsgt lt/showgt
A Show File with Three Snapshots and a Question
Collection
8
A Simple, but Complete, Example
lt?xml version"1.0" encoding"UTF-8"?gt lt!DOCTYPE
show PUBLIC "-//JHAVE//DTD GAIGS SHO//EN"
"gaigs_sho.dtd"gt ltshowgt ltsnapgt lttitlegtqueuelt/t
itlegt ltpseudocode_urlgtindex.php?line2lt/pseudoco
de_urlgt ltqueuegt ltlist_item
color"0000FF"gt ltlabelgt9lt/labelgt lt/list_it
emgt lt/queuegt ltquestion_ref ref"0"/gt lt/snapgt
ltquestionsgt ltquestion type"MCQUESTION"
id"0"gt ltquestion_textgtColor of the next queue
item?lt/question_textgt ltanswer_optiongtredlt/answe
r_optiongt ltanswer_option is_correct"yes"gtgreen
lt/answer_optiongt ltanswer_optiongtbluelt/answer_op
tiongt lt/questiongt lt/questionsgt lt/showgt
A Simple Visualization Script with a Multiple
Choice Question
9
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

10
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

11
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

12
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
  lt(x1,y1),(y2,y2)gt, and fontSize size

13
The GAIGSstack Class II

• Key Methods
• pop()
• push(Object o)
• push(Object o, String c)
• Key Inherited Methods (from GAIGSlist)
• isEmpty()
• peek()

14
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(args0) int itemsToAdd
Integer.parseInt(args1) for (int i
0 i lt itemsToAdd i) stack.push(i) s
how.writeSnap(title, titleSize,
stack) show.close()
Example Code Using the ShowFile and GAIGSstack
Classes
15
lt?xml version"1.0" encoding"UTF-8"?gt lt!DOCTYPE
show PUBLIC "-//JHAVE//DTD GAIGS SHO//EN"
"gaigs_sho.dtd"gt ltshowgt ltsnapgt lttitlegtSta
ck Examplelt/titlegt ltstackgt ltbounds x1"0.0"
y1"0.0" x2"1.0" y2"1.0" fontsize"0.05"/gt ltlist
_item color"FFFFFF"gt ltlabelgt0lt/labelgt lt/list_ite
mgt lt/stackgt lt/snapgt ltquestionsgt lt/questionsgt lt/sh
owgt
Example Output itemsToAdd 1
16
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

17
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
  lt(x1,y1),(y2,y2)gt, and fontSize size. Display as
  a bargraph if bar true

18
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

19
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

20
Supplied Code
import java.io. import java.util.Random import
exe. public class Sort static final String
TITLE null // no title static int
arraySize // of items to sort static
GAIGSarray items // the array of items
Exercise Code Preamble
21
public static void main(String args) throws
IOException // process program parameters
and create the show file object ShowFile show
new ShowFile(args0) arraySize
Integer.parseInt(args1) // define the two
structures in the show snapshots items new
GAIGSarray(arraySize, true, "BubbleSort",
"999999", 0.1, 0.1, 0.9, 0.9,
0.07) // initialize the array to be sorted
show it loadArray() show.writeSnap(TITLE
, items) for (int pass 1 pass lt
arraySize pass) for (int i 0 i lt
arraySize-pass i) if ((Integer)(items.get(i)
) gt (Integer)(items.get(i1))) swap(i, i1)
// visualization is done show.close()

Exercise Code Main method
22
// 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 lt arraySize
i) items.set(i1,i) for (int i 0 i lt
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
23
If you decide to do the activity

• Decide when snapshots should be taken (when do
  the interesting events occur?)
• Use coloring to show the ongoing actions of the
  algorithm
• Use the name of the array to produce useful
  messages about the status of the algorithm

24
Adding Interactive Questions

• GAIGS Scripts can be used to ask four types of
  questions
• True / False
• Fill in the Blank
• Multiple Choice
• Multiple Selection

A Multiple Choice Question
25
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

26
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)

27
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

28
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

29
XMLtfQuestion Example
int id 0 boolean swapIsDone
false XMLtfQuestion tf new
XMLtfQuestion(show, id "") id tf.setQuestion
Text("Will a swap be done next?") show.writeS
nap(TITLE, null, null, tf, ) tf.setAnswer(sw
apIsDone)
30
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

31
XMLfibQuestion Example
int id 0 int swapsThisPass
0 XMLfibQuestion fib new
XMLfibQuestion(show, id "") id fib.setQuesti
onText("How many swaps will be made this
pass?") show.writeSnap(TITLE, null, null,
fib, ) fib.setAnswer(swapsThisPass "")
32
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)

33
Next Activity Bubblesort Questions

• Return to your Bubblesort visualization and
• Add a question which asks how many swaps will be
  made during the next pass (asked just before a
  pass)
• Add a question which asks if a swap will be made
  (asked just before a comparison is made)
• Use probabilistic questioning to limit the number
  of questions asked during a session