Interactive Questions in JSXaal

Update (March 2012): The JSXaal project is not actively worked on anymore. See JSAV for a JavaScript algorithm visualization framework.

Interactive Questions

Interactive questions in algorithm animations are questions shown to the student. Typically, the questions require students to predict what is going to happen in the following steps of the animation based on the current state and the algorithm in question. The main motivation behind the questions is the belief that the more engaging the animations are, the better the learning results (see Engagement Taxonomy, especially level Responding). For this reason, interactive questions have been used in many visualization systems, such as Animal, JHAVÉ, Jeliot, and ViLLE.

Interactive Questions in JHAVÉ..

Interactive Questions in JHAVÉ..

Since the usage of interactive questions has become more and more popular in AV systems, several studies of their effectiveness in learning has been carried out. Here I'll introduce only some of them

  • In 2000, an experiment comparing levels viewing and responding was conducted by Jarc et al. The results of the survey found no statistically significant differences. However, the data indicated that the students working on level responding scored better on difficult topics, but poorly overall. The study used the Interactive Data Structure Visualizations system to visualize the data structures.
  • Grissom et al. experimented in 2003 to compare levels no viewing, viewing, and responding using JHAVÉ system. The results show that learning improves as the level of student engagement increases. The difference between no viewing and responding was statistically significant.
  • A recent study in 2009 by Taylor et al. compared students using passive and predictive animations of graph algorithms. They conclude that students working on the responding level learned better than students viewing passive animations. It is unclear, though, whether or not their results were statistically significant.

Interactive Questions in XAAL

The roots of XAAL come from the ITiCSE 2005 working group "Development of XML-based Tools to Support User Interaction with Algorithm Visualizations" (see also the Working Group report). The working group specified and gave examples for different parts of an XML-based algorithm animation language. One of the parts that was specified in detail were the interactive questions. Thus. those specifications have been adopted in XAAL. Below are examples and explanations of the different question types supported by XAAL (the working group report specifies more), see the documentation for the XAAL XML schema for interaction for details.

  • select: for multiple-choice questions where multiple answers can be selected by student
    <select id="selectQuestion">
      <contents type="label">Which do you want to select?</contents>
      <item id="sit1" grade="2">
        <contents type="answer">Select me!</contents>
      <item id="sit2" grade="1">
        <contents type="answer">Select me also!</contents>
      <item id="sit3" grade="-2">
        <contents type="answer">I hope you won't select me..</contents>
  • select-one:for multiple-choice questions where only one answer can be selected by student
    <select-one id="selectOneQuestion" solutionId="it3">
      <contents type="label">How many <i>children</i> does 
                 the rootnode of the tree have?</contents>
      <item id="it1">
        <contents type="answer">1</contents>
      <item id="it2">
        <contents type="answer">3</contents>
      <item id="it3">
        <contents type="answer">4</contents>
  • fill: for fill-in-the-blanks questions that can contain several blanks where the student should enter her aswers

..and in JSXaal

When an animation with interactive questions is viewed in JSXaal, the questions are shown to the user. The user will also get feedback on whether or not her answers were correct. The figure below shows an example question in JSXaal. You can also view an example online. Currently, JSXaal supports questions of type select-one and select.

Example question in JSXaal
Example question in JSXaal

When integrating with online material and some learning environment, it's often necessary to communicate the student answers back to the server. In JSXaal, this can be done by implementing a simple JavaScript class. The class has to have two functions:

  • questionAnswered(question): This function is called whenever a student answers a question. It gets as a parameter the question as an instance of JSXaal.Question.
  • annotationAdded(annotation): This function is called whenever a students adds an annotation to the animation.

So, a simple example of doing this is:

Event.observe(window, 'load', function() {
  viewer = new JSXaalViewer("animation", {}, {fileUrl: "xaal-interaction-demo.xml"});
  MyServerInterface = Class.create({
    annotationAdded: function(annotation){
      // handle the annotation
    questionAnswered: function(question){
      // handle the question
  viewer.setServerInterface(new MyServerInterface());

What you do with the annotation and question is completely up to you. One possible way is to store the complete XAAL animation on the server, as the question response and the annotation are added to the current animation.

JSXaal Goes Open Source

Update (March 2012): The JSXaal project is not actively worked on anymore. See JSAV for a JavaScript algorithm visualization framework.

JSXaal viewer, the JavaScript viewer for XAAL animations is now an open source project at Google Code. You can find the project here.

Getting Started

First of all, make sure to check the brief introduction to XAAL. Then follow the three simple steps below.

Step 1: Check out the source

To checkout the source code, you will need Subversion installed. Then you can checkout the code by typing: svn checkout http://jsxaal.googlecode.com/svn/trunk/ jsxaal-read-only

Step 2: Play with the Example

The directory that you just checked out includes an example in doc/example.html (imaginative naming, don't you think?). You can also view the example online. What you should see when opening that file is something like the image below. The controls for the animation should be quite self-evident: forward moves you forward and backward one step backward.

JSXaal Viewer Example

JSXaal Viewer Example

Step 3: Modify the XAAL document

The example loads the XAAL file doc/example.xml. Try modifying it by, for example, changing the positions or colors of the objects. You can also add new objects or animation effects according to the XAAL specification. Note, that the viewer does not support the whole specification yet.

XAAL has a new home at xaal.org

Main page of xaal.org
Main page of xaal.org

As I aim to publish XAAL and the related tools for the whole AV community to benefit from, XAAL has moved to xaal.org. The site has all the important information about XAAL:

  • Publications - There are already several publications available about XAAL. These are all listed on xaal.org.
  • Documentation - Documentation is something I'm working on improving. At the moment, the site includes some examples on how to use XAAL.
  • Schemas - The XML Schemas for XAAL are available from the site. The documentation for these is also work in progress.

Now that you all non-existing readers of this blog :) know what is available from the site, it's a good time to explain why you should (or shouldn't) visit the site.

What is XAAL?

In short, XAAL (eXtensible Algorithm Animation Language) is an algorithm animation language designed to be used in multiple algorithm animation (AA) systems. The goal is to unify the AA world by allowing interchange of animations between the existing systems. The language has primitives for working with graphics such as rectangles and circles, as well as data structures like arrays and graphs.

XAAL Example

The following is an example of using graphical primitives in XAAL.

<polyline id="poly">
  <coordinate x="210" y="210"/>
  <coordinate x="220" y="220"/>
  <coordinate x="210" y="230"/>
  <coordinate x="230" y="230"/>
  <coordinate x="230" y="210"/>
  <closed value="false"/>
    <color name="lime"/>
    <fill-color name="black"/>
    <stroke width="4"/>

In addition to the polyline, the building blocks available include

  • point, polyline, line, polygon;
  • arc, ellipse, circle and circle-segment;
  • square, triangle, rectangle;
  • text.

Data structures available include array, graph, list, tree, and binary tree. Below is an example of a graph.

  <node id="n1"><key value="D"/></node>
  <node id="n2"><key value="E"/></node>
  <node id="n3"><key value="M"/></node>
  <node id="n4"><key value="O"/></node>
  <edge from="n1" to="n2" directed="true"/>
  <edge from="n2" to="n3" directed="true"/>
  <edge from="n3" to="n4" directed="true"/>
  <edge from="n4" to="n1" directed="true"/>
XAAL graph example

Tools for working with XAAL

There are also tools for creating and working with XAAL animations. These include a Java parser, classes for creating animations, and adapters for converting XAAL animations for some of the existing algorithm animation systems. These are not, however, published yet but they will be. So, stay tuned for more updates on that!

Currently, the animations can be used in JHAVÉ or using the JavaScript viewer.

My article "Seamless Merging of Hypertext and Algorithm Animation" in TOCE

My article "Seamless Merging of Hypertext and Algorithm Animation" was finally published in ACM Transactions on Computing Education (TOCE) in volume 9, issue 2 (in ACM digital library). The abstract of the article:

Online learning material that students use by themselves is one of the typical usages of algorithm animation (AA). Thus, the integration of algorithm animations into hypertext is seen as an important topic today to promote the usage of algorithm animation in teaching. This article presents an algorithm animation viewer implemented purely using HTML and JavaScript. The viewer is capable of viewing animations in Xaal (eXtensible Algorithm Animation Language), a language designed to allow easy transformation of AAs between various formats. This solution is extremely suited for use in hypertext learning material due to the advanced interaction possibilities between learning material (HTML) and the animation.

I'll try to post some demos of the viewer soon. Below is a picture explaining the main parts of the viewer.

JSXaal viewer
JSXaal viewer