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.

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>
  <item id="sit2" grade="1">
    <contents type="answer">Select me also!</contents>
  </item>
  <item id="sit3" grade="-2">
    <contents type="answer">I hope you won't select me..</contents>
  </item>
</select>

• 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>
  <item id="it2">
    <contents type="answer">3</contents>
  </item>
  <item id="it3">
    <contents type="answer">4</contents>
  </item>
</select-one>

• 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.

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.