JSXaal - JavaScript XAAL Viewer


To help integrate algorithm visualization into hypertextbooks and elearning environments, we have developed a XAAL viewer using only HTML and JavaScript. The viewer is based on requirements from the literature for visualization systems and thus is suitable as an animation viewer. The main features of the viewer are (this is a quick overview, read the article for details):

  • Viewing of XAAL animations: This one is quite obvious, the XAAL viewer is capable of viewing XAAL animations. Note, that it does not implement the whole XAAL specification.
  • Customizable: Since the viewer is HTML, its appearance can be easily customized using CSS.
  • Student engagement: The viewer supports three kinds of student engagement: pop-up questions, changing input data, and user annotations.
  • Integration with hypertext: The XAAL animation itself can contain HTML documentation which can interact with the user or the surrounding HTML page through JavaScript. In addition, any part of the surrounding HTML page can control and manipulate the viewer and the animation using JavaScript.
  • History view: The viewer can show the current step and arbitrarily many previous and next steps of the same or different animation. This allows the comparison of different algorithms with one viewer.
  • Importing other formats: Currently, GaigsXML animations can be imported to the viewer. This is done by transforming the GaigsXML file into XAAL using XSLT.
  • Easy to add to pages: Only a couple of lines in HTML. The easiest way to get started is to download it and follow the Getting started with JSXaal guide.

Example of JSXaal viewer.