1. Questions
Questions are asked periodically throughout the visualizations in order
to:
•Direct the learner’s attention to key points
•Give them the opportunity to exercise their understanding of the
algorithm
•Encourage them to more fully grasp the algorithm
Pseudocode
Because of the nature and complexity of the algorithms,
pseudocode is presented to the student alongside the graphical
visualizations.
Advantages to displaying a pseudocode pane:
• Pertinent line (or lines) are highlighted at each step
• Method scope changes are show along with the
visualization.
• A call stack is presented to the user, indicating the
recursive nature of the algorithm.
The Minimax and alpha-beta
pruning algorithms are both
highly recursive algorithms;
therefore, displaying the call
stack to the student is very
helpful for keeping track of
method calls.
Call Stack
Variables
A list of variables and their values
are kept updated for each step of
the algorithm.
Visualizing Minimax
Color Coding
Since Minimax explores game states of a tree, it is essential that the
student be shown the progress of recursion, and additionally which
nodes have been visited and which node is currently being explored.
The temporary utility value for a node is
displayed to the left of a node and is updated if
a better child is explored. The final utility value
of the node is placed in the node after all
candidate children have been explored.
Nodes in the visualization are color
coded and updated over the course
of the visualization:
White – node unvisited
Yellow – node visited
Orange – current node
Green – node selected
Node Utilities
It is important that the student see how the algorithm keeps track of a
given node’s utility.
Explanatory Captions
To assist the user in easily following the
current state of the visualization, a caption
describing the current step of the
algorithm is displayed above the tree.
Since no children have been
explored yet, a temporary
value is set to infinity.
The final selected
action is shown
In green with an
arrow pointing
from the root to
the selected node
Introduction
Research Problem
Students enrolled in Artificial Intelligence classes
often struggle with concepts relating to adversarial
search, specifically the Minimax algorithm and alpha-
beta pruning.
Solution
An interactive algorithm visualization could engage
students and deepen their understanding of the
Minimax algorithm and its role in adversarial search.
Algorithm Visualization
A considerable amount of research has focused on
the development of students’ understanding of
advanced computer science algorithms.
It has been proposed that when engaged
in the visualization. However, many
algorithm visualizations are limited in their
functionality.
Students learn at different speeds. The JHAVÉ
visualization environment allows students to step
forward and backward through the visualization at his
or her own pace.
Visualizing Alpha-Beta Pruning
Alpha and Beta
One of the greatest difficulties students have in learning Minimax with
Alpha-Beta Pruning is with keeping track of the Alpha and Beta values
which are displayed to the left of the nodes which don’t represent an
end state.
Pruning
To indicate when alpha beta pruning takes
place a slash is placed across the edge
connecting the pruned subtree to its parent,
and, keeping with the proposed coloring
scheme, the pruned (unexplored) nodes are
left white.
One main difference, is that MAX nodes are
labeled with their respective alpha values and
MIN nodes are labeled with their respective
beta values.
Since alpha-beta pruning is a subtle extension to the Minimax algorithm, many of the
components of the alpha-beta pruning visualization are similar to the Minimax visualization.
Related Works
Many previous Minimax algorithm visualizations provide
the following functionality to learners:
• Random tree generation
• Node and utility tracking
• alpha and beta tracking when applying pruning
Our visualizations adds to these features by providing
the learner with the following:
• Modularized learning for Minimax and Minimax
with alpha-beta pruning
• Pseudocode highlighting
• Explanatory captions and progressive utility
tracking
• Question generation and learner assessment
Input Generator
Students are permitted to set bounds on
the size of a randomly generated trees, or
input a tree of their own design using a
proprietary string to tree input scheme.
This is recommended especially for users
who wish to sample both algorithms and
observer the nuances given the same tree.
ACKNOWLEDGEMENTS
Special thanks to Professors George Thomas and Tom
Naps, the University of Wisconsin Oshkosh, the
National Science Foundation, and the
support of our fellow researchers.
This project was funded under the NSF
REU site award 0851569 at the
University of Wisconsin Oshkosh.
Department of Computer Science
University of Wisconsin - Oshkosh
June 20 11 -July 2011
J.T. Gralka
Washington & Jefferson College
gralkajt@jay.washjeff.edu
Christopher Witt
University of Wisconsin - Whitewater
wittcm19@uww.edu
Future Work
Because these two algorithms have ‘real world’ applications in the
field of Artificial Intelligence and game theory, a natural extension
of this project would be to create a visualization for simple games,
e.g., tic-tac-toe.
Source: Hofstadter, Douglas (1979). Gödel, Escher, Bach:
An Eternal Golden Braid
A visualization of a practical
example might provide learners
with a better grasp of Minimax and
alpha-beta pruning.
A hypertext book is under development. This online textbook will
include explanations of the algorithms and pseudocode as well as
provide information on the java implementation. Students will be
able to interact with various examples and practice exercises to
help hone their understanding of the Minimax algorithm as well as
it’s applications to the real world.