Moving to SquareSpace

Last weekend I finally did what I had been planning to do for a long time: move this site off the self-hosted WordPress and into SquareSpace. I had been neglecting the site, and it simply didn't look or feel modern. Another big reason for the update was to add a page with a list of the projects I've worked on (here's the new projects page).

Since time is limited to maintain a personal site, I went with the easiest choice: SquareSpace. I use it for the Mobile Icecube site, so I knew what and how I could do with it.

I did an import from the old site, which was almost smooth and painless (code snippets broke). It might have broken some other things as well. If you find something not working, let me know.

Finally, apologies to RSS readers who probably got the last 20 blog posts as new posts.

New Publications in November

Even though I'm no longer working at the university, November was an excellent month publication wise. Two conference papers written in the Spring were published at Koli Calling 2013 whereas a long journal paper process finally ended in a published paper in ACM Transactions in Computing Education. The journal paper is titled "A Review of Generic Program Visualization Systems for Introductory Programming Education" (ACM, pdf) and was written with Juha Sorva and Lauri Malmi:

This article is a survey of program visualization systems intended for teaching beginners about the runtime behavior of computer programs. Our focus is on generic systems that are capable of illustrating many kinds of programs and behaviors. We inclusively describe such systems from the last three decades and review findings from their empirical evaluations. A comparable review on the topic does not previously exist; ours is intended to serve as a reference for the creators, evaluators, and users of educational program visualization systems. Moreover, we revisit the issue of learner engagement which has been identified as a potentially key factor in the success of educational software visualization and summarize what little is known about engagement in the context of the generic program visualization systems for beginners that we have reviewed; a proposed refinement of the frameworks previously used by computing education researchers to rank types of learner engagement is a side product of this effort. Overall, our review illustrates that program visualization systems for beginners are often short-lived research prototypes that support the user-controlled viewing of program animations; a recent trend is to support more engaging modes of user interaction. The results of evaluations largely support the use of program visualization in introductory programming education, but research to date is insufficient for drawing more nuanced conclusions with respect to learner engagement. On the basis of our review, we identify interesting questions to answer for future research in relation to themes such as engagement, the authenticity of learning tasks, cognitive load, and the integration of program visualization into introductory programming pedagogy.

First of the conference papers is "How to study programming on mobile touch devices: interactive Python code exercises" (ACM) written with Petri Ihantola and Juha Helminen:

Scaffolded learning tasks where programs are constructed from predefined code fragments by dragging and dropping them (i.e. Parsons problems) are well suited to mobile touch devices, but quite limited in their applicability. They do not adequately cater for different approaches to constructing a program. After studying solutions to automatically assessed programming exercises, we found out that many different solutions are composed of a relatively small set of mutually similar code lines. Thus, they can be constructed by using the drag-and-drop approach if only it was possible to edit some small parts of the predefined fragments. Based on this, we have designed and implemented a new exercise type for mobile devices that builds on Parsons problems and falls somewhere between their strict scaffolding and full-blown coding exercises. In these exercises, we can gradually fade the scaffolding and allow programs to be constructed more freely so as not to restrict thinking and limit creativity too much while still making sure we are able to deploy them to small-screen mobile devices. In addition to the new concept and the related implementation, we discuss other possibilities of how programming could be practiced on mobile devices.

Second Koli paper was written by the same trio and is titled "Recording and analyzing in-browser programming sessions" (ACM):

In this paper, we report on the analysis of a novel type of automatically recorded detailed programming session data collected on a university-level web programming course. We present a method and an implementation of collecting rich data on how students learning to program edit and execute code and explore its use in examining learners' behavior. The data collection instrument is an in-browser Python programming environment that integrates an editor, an execution environment, and an interactive Python console and is used to deliver programming assignments with automatic feedback. Most importantly, the environment records learners' interaction within it. We have implemented tools for viewing these traces and demonstrate their potential in learning about the programming processes of learners and of benefiting computing education research and the teaching of programming.

As soon as these become available in the ACM Author-Izer service, you'll be able to download the PDFs from my publications page.

Leaving Academia and Aalto (at least for now)

Today was my last day at Aalto University (formerly known as Helsinki University of Technology). I've worked there 11 years (and had at least as many fixed-term contracts). Early this Spring, when it started to look like things might come to an end at Aalto, I started writing a blogpost nitpicking the pros and cons of academic work. Today, it all seems quite pointless and I want to focus on the big picture:

  • I've specified the projects I work on (mostly) myself.
  • I've constantly learned new technologies and skills.
  • I've traveled to interesting places (like Lisbon, Macau, Frankfurt, Canterbury, and Beijing in just the past five months).
  • I've worked with smart and motivated people.

That's what matters in the end, and that's why I've stayed in the same place for the past 11 years. So a big thank you to all the great people I've been allowed to work with! I'm sure I'll see you someday somewhere!

 

PS. If you know of an interesting position at a university or a company, let me know :)

Quality Of WordPress Plug-Ins: An Overview of Security and User Ratings

Three weeks ago, my colleague Petri presented our (that is, me, Petri, and Teemu who did most of the work) paper titled "Quality Of WordPress Plug-Ins: An Overview of Security and User Ratings" at Workshop on Security and Privacy in Social Networks. The main purpose of the paper was to analyze a set of WordPress plugins to find out if plugin ratings predict the number of potential security vulnerabilities in them. In order to do that, we downloaded the source code and ratings and download counts of a set of random plugins (322 in total). We then ran the RIPS PHP security vulnerability scanner to find potential security holes in the code. The 322 plugins had:

  • 3,792,711 downloads
  • 2,783 user ratings
  • 179,393 lines of PHP code

Of the 322 plugins, 127 had a potential security vulnerability according to RIPS. In total, 860 vulnerabilities were identified.

When comparing this with the ratings of the plugins, we found only a small, negative correlation between the rating of the plugin and the number of potential vulnerabilities. To put it another way, plugin ratings are not a good measure of the security of the plugin.

There are, of course, several problems with our analysis and conclusion. Biggest of those is that the sample size was really small compared to the total number of plugins (over 21,000 at the moment). To improve the results, we are currently analyzing a bigger sample (100% of them, to be exact).

If you are interested in more details, the full paper can be downloaded here.

Event Handling for JSAV Data Structures

For a while now, I've been meaning to start a series of articles on JSAV features. The current documentation only works as a reference to the API and does not explain or give enough examples. Also, it does not argue why things are done certain way and writing these things down makes me really think them through. As I recently implemented a support for easy attachment of event handlers to data structures, that seems like as good as any topic to start.

The Way Things Were

In general, attaching event handlers with jQuery is easy. That is, unless the HTML is generated by the library and there is no reason you should need to know the structure of it. Also, getting the JSAV object for the node/index matching the DOM element is tricky. The old way for doing this was something like:

// register a click event handler to all JSAV array indices
$(".jsavindex").click(function() {
//find the index of the clicked item
var index = $(this).parent().find(".jsavindex").index(this);
// do something with the array
});

Events for the Array Indices

To ease this, a recent commit introduced a better way to attach events to arrays and trees. Both structures support following events: click, dblclick, mousedown, mousemove, mouseup, mouseenter, and mouseleave. While the names are reasonably self-explaining, you can check jQuery event documentation for details on the events.

For a JSAV array, there are functions with the same name as the events that can be used to register event handlers for that event type. So, for example, to add a function to be called whenever mouse enters an array index, you can do the following:

arr.mouseenter(function(index) {
this.highlight(index);
});

The event handler function gets as the first parameter the index of the array element that the user interacted with. The this variable is set to point to the JSAV array. Naturally you don't need to pass an anonymous function as the event handler, but you can use any function as the parameter. A good example of this are the JSAV array functions, most of which take an index as the first parameter. The API documentation gives the following example that illustrates this well:

arr.mouseenter(arr.highlight).mouseleave(arr.unhighlight);

This also shows that the event binding functions return the structure itself, so you can safely chain the function calls.

Another parameter the event handler gets is the jQuery event object. You can use that in case you need to, for example, stop the propagation of the event.

arr.dblclick(function(index, event) {
event.stopPropagation();
// ... do something else..
}); 

Note: most of the JSAV functions that change some properties of the structures also store the changes to the animation history. For events that are fired often (such as mousemove), the history can get really long quite fast. Thus, make sure you don't misuse the events.

Events for Trees

For trees, there are functions for binding handlers for the same set of events: click, dblclick, mousedown, mousemove, mouseup, mouseenter, and mouseleave. These functions can be called for the JSAV tree instance. The actual event handlers will be bound to either nodes or edges of the tree.

Let's begin with a simple example:

var tree = jsav.ds.tree();
// ... tree.click(function(e) {
this.highlight();
});

What this would do is bind the anonymous function to be called whenever a node in the tree is clicked. The event handler function gets as a parameter the jQuery event object. Inside the handler, this will refer to the node or edge that the event was triggered for.

Like I mentioned, the event handler will be bound to the nodes by default. My assumption here, based on our experience with TRAKLA2 assignments, is that this is the more common use case. But don't worry, binding handlers for edges is almost as simple, you just need to add one option. Like this

tree.click(myEdgeClickHandler, { edge: true });

This will bind the function to only edges, and inside the handler, this will refer to the JSAV edge object triggering the event. If you want (although I can't come up with a good use case), you can bind the handler to both by adding another option node with value true.

Custom Arguments

The above describes the basic usage of the implementation, but there are other ways to deal with even more complex requirements. First of, custom arguments can be passed to the event handler. For example, to change a CSS property of an array index on mouseenter and remove it on mouseleave, the code needed with the above functions is something like:

arr.mouseenter(function(index) {
this.css(index, {"color": "red"});
}.mouseleave(function(index) {
this.css(index, {"color": "black"});
});

To ease this, the event binding functions all take a second, optional, parameter to specify custom parameters for the handler. This parameter should be an array with as many items as you want to pass as arguments for the event handler. With custom arguments, the above example can be simplified to:

arr.mouseenter([{"color": "red"}], arr.css)
 .mouseleave([{"color": "black"}], arr.css);

So, it uses the array's css function and passes the arguments for that function as parameter when registering the event handler. The function calls made by JSAV would be identical to the those made in the version not using custom arguments, except for the jQuery event object being the last argument. Ordering the parameters for the binding function to be event data first is just to be more consistent with jQuery.

Binding Custom Events

While writing this blog post, I realized there should probably be a way to bind custom events as well. While not required at the moment, I can already see a need to bind, for example, touch events. So, a later commit added on function to array and tree that allows binding any events. As the first parameter, the function takes the event name(s). The other required argument is again the event handler. For example

arr.on("touchstart", myEventHandler);

would register the function myEventHandler to be triggered when touchstart event is triggered.

Custom data for the handler can also be specified as the second parameter:

arr.on("touchstart", {myVal: "cat"}, myEventHandler);

And for trees, a last options parameter can be passed.

Summary

As a summary, here are the function signatures for the functions in array and tree:

arr.eventName([data,] handler);
arr.on(eventName, [data,] handler);
tree.eventName([data,] handler [, options]);
tree.on(eventName, [data,] handler [, options]);

What do you think? Any questions or suggestions on how to improve?

Our First Mobile App for Learning Python - Soon Ready

Our company's (ByTheMark, that is) first mobile application is getting closer to publishing. It is a quiz game for learning and testing Python programming knowledge. Name of the app is Quiz & Learn Python.

The game asks questions ranging from simple concepts to more advanced tricks in Python programming.

The player has four lifelines at her disposal: remove two incorrect answers, skip the question, stop time and debug the program. The last one is what I think makes this game different from a typical quiz with questions about programming. Below is an image from the debugger.

The game will be soon available for iPhone, other platforms possible later. You can test Quiz & Learn Python online. On the linked page, you can also register for our newsletter to be notified when the game is ready!

Books I Read in 2011

A new year has started, so I wanted to look back on the books I read in 2011 (the idea actually came from this post by Tim Kadlec). Here is an almost complete list of the books somewhat related to web development or entrepreneurship. I've left out stuff I read for fun (like the Stieg Larsson's Millennium Trilogy) as well as the ones I did not enjoy. These are the good books!

More Engaging Learning with Accelerometer

Ever since I wrote my first blogpost and demo about using the accelerometer I've been planning on implementing some educational material that would use it. I think it can be used to make educational assignments more engaging. I finally found the time to complete the binary search tree search assignment that uses the accelerometer. Go ahead and view the demo and then come back and read the rest.

DeviceOrientation event and device orientation

I've been building an HTML5+JavaScript demo for using the device orientation and device motion events for an educational application. The article "This End Up: Using Device Orientation & Device Motion" on HTML5 Rocks does a great job explaining how to work with these events. In my case, I'm controlling a ball based on the device orientation (you know, like in a labyrinth type game). This is easy to do with HTML5 device orientation events. So, what I do is register an event handler for the ondeviceorientation event:

window.addEventListener("deviceorientation", orientationHandler, false);

The handler simply stores the values from the event for later use:

function orientationHandler(eventData) {
  tiltLR = eventData.gamma;
  tiltFB = eventData.beta;
}

The gamma and beta attributes of the event object give the left-right and front-back rotation angles. Based on these values, the position of the ball can be updated (tiltLR is change of x-coordinate, tiltFB y). For the iPad, I've divided them by 3 to get a decent speed. Note, that I'm simplifying things here and not considering the fact that Firefox has an event of their own. Read the linked article for details.

Now all goes well until the user turns the phone/tablet on its side or upside down. Now the ball moves in weird directions. The simple fix to this (which I'm sure I'll forget soon, hence the blogpost) is to check window.orientation and change the values accordingly. The value of window.orientation will be 0 when the device is in its' normal orientation, -90 when rotated on its' right side, 90 on left side and 180 when upside down. So, to take this into account and get the x and y coordinate changes:

var orient = window.orientation;
if (!orient || orient === 0) { // normal portrait orientation
dx = tiltLR;
dy = tiltFB;
} else if (orient === -90) { // landscape, rotated clockwise
dx = -tiltFB;
dy = tiltLR;
} else if (orient === 90) { // landscape, rotated counterclockwise
dx = tiltFB;
dy = -tiltLR;
} else if (orient === 180) { // portrait, upside down
dx = -tiltLR;
dy = -tiltFB;
}

This works and the ball moves in a natural way relative to the browser window. Still, it is difficult to control it when the window gets rotated. Eventually, I'd like to disable rotation of the browser window. Is there any way to do it with HTML/CSS/JS? Or is this one of those things that require wrapping the webapp into a native application?

Finally, my use case for this: I'm building an interactive exercise for learning the binary search tree search that uses the deviceorientation event. After testing this on iPad, I ran into the problem described. More on the exercise later :)

OEmbed Endpoint for TRAKLA2 Algorithm Visualizations

This summer in the Program Visualization Workshop 2011, I had a paper with a colleague about the use of web services to help algorithm visualization (AV) systems. One potential service we identified and implemented was an OEmbed endpoint for embedding AVs into hypertext learning materials such as ebooks. OEmbed is "a format for allowing an embedded representation of a URL on third party sites". To make it more understandable, let's go through an example of the OEmbed endpoint for TRAKLA2 AVs.

Example Request

Let's say we want to embed the TRAKLA2 Binary Search Tree search AV on our own HTML page. The BST search AV is located at http://www.cse.hut.fi/en/research/SVG/TRAKLA2/exercises/BST_search-28.html. The OEmbed endpoint where we can query for information to embed the TRAKLA2 AVs is running at http://trakla.cs.hut.fi/oembed/. To request the embedding information for the BST search AV, we simply make a request to the oembed endpoint with a HTTP GET parameter url specifying the URL of the resource we want to embed. So, we make a request to URL http://trakla.cs.hut.fi/oembed/?url=http://www.cse.hut.fi/en/research/SVG/TRAKLA2/exercises/BST_search-28.html

Example Response

A request to the URL above will give the following JSON response.

{"version": "1.0", 
 "type": "rich", 
 "html": "<applet code=\"applications.exerciseapplet.ExerciseApplet.class\" archive=\"http://www.cse.hut.fi/en/research/SVG/TRAKLA2/exercises/matrix.jar\" width=\"610\" height=\"600\"<<param name=\"swap\" value=\"on\" /><param name=\"ex\" value=\"content.exercises.BST_search\" /></applet>"}

The response indicates that it is using version 1.0 of the OEmbed specification and the type of he object to be embedded is rich. That tells us that we should look for the html property for the HTML to embed the object. Adding that HTML to a page, we can embed the AV.

How to Actually Embed

The request and the actual embedding of the HTML in the response can be done on a server or on a client. Here, I'll concentrate on the client side as it brings with it a new problem: same origin policy permitting JavaScript in browser to only access resources from the same origin as the page was loaded. This is obviously done for security reasons, but it also inhibits a script to load the JSON data from the trakla.cs.hut.fi domain. But not to worry, there is a simple workaround known as JSONP or "JSON with padding". JSONP requires the service to support it, and the OEmbed endpoint we have implemented does.

With JSONP, a callback function is specified in the request. This callback function is than called with the returned data as parameter. The callback can be appended to the URL as callback GET parameter, for example, a request to URL http://trakla.cs.hut.fi/oembed/?callback=foo&url=http://www.cse.hut.fi/en/research/SVG/TRAKLA2/exercises/BST_search-28.html In the response, the data will then call the function foo: foo({"version": "1.0", ...});

Now, we only need to implement a function foo to handle the data. Or, we can use jQuery to simplify things.

A Complete HTML + JavaScript Example

Let's assume we have an HTML page where we load the jQuery JavaScript library and have an element where we want to embed the BST search AV.

<div id="embedHere"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Now, we can make the request and embed the AV with the following piece of JavaScript.

$(function() {
  $.getJSON("http://trakla.cs.hut.fi/oembed/?url=http://www.cse.hut.fi/en/research/SVG/TRAKLA2/exercises/BST_search-28.html&callback=?", 
    function(data) {
      $("#embedHere").html(data.html);
    })
});

What is happening here is the code using the jQuery function getJSON to load the JSON from the specified URL. The callback parameter is specified using callback=? GET parameter. jQuery will generate a unique ID for the callback function, which is given as the second parameter for the getJSON function. The function gets the response JSON as a parameter, data, and sets the HTML content of the element with id embedHere to be the html in the data. The end result is the AV to be embedded on the page.

Benefits of the approach

So, why would anyone want to do it this complicated when one could just copy and paste the HTML into a page? Well, with a single AV that is possible. The real benefits come when we embed multiple AVs and do not want to keep the HTML up to date. Embedding the content using OEmbed, the responsibility of the up-to-date embedding information is on the creator of the AV (system). Furthermore, this gives the AV creator the possibility to update the embedding information or even the content of the AV. Hopefully, one day we'll be able to replace the TRAKLA2 AV applets with JavaScript versions using the JSAV library. Those embedding the AVs through OEmbed would benefit from our update immediately without any manual updates.

Status of the Service

The service is up and running online, and can be used to embed resources available on the TRAKLA2 exercise site. So go give it a try and let me know what you think and how it could be improved!

The code for the service is available on GitHub. At the moment, it is a bit TRAKLA2 specific, but with reasonable effort it could be improved to be a more generic AV embedding service.

JavaScript Algorithm Visualization (JSAV) Library v0.2 Released

JSAV and OpenDSA

For a while now, I've been working with Cliff Shaffer on the JavaScript Algorithm Visualization (or, JSAV) library. The goal of the library is to provide a modern JavaScript framework for building interactive algorithm visualizations.

This is still early work, but the version 0.2 of the library has just been released. At the moment, the library supports only array data structure and animation effects on that. Building the library is part of my research project on mobile algorithm visualization as well as the larger OpenDSA project. OpenDSA project aims at collaboratively create an active electronic book covering the whole data structures and algorithms course.

The OpenDSA work has been started by creating a somewhat complete chapter on shellsort.

What's next?

For the next version, we have planned to add support for creating interactive exercises. The exercises will support visualizations of algorithms with stop-and-think questions about the content. Another exercise type will be exercises similar to those in TRAKLA2 where user interacts with the visualization to mimic the behavior of an algorithm. Feedback of correctness as well as model answer as algorithm visualization will also be supported.

Want to contribute?

If you're interested in contributing to JSAV (and we sure could use the help) or just want to follow the development, head over to the JSAV GitHub repository. Alternatively, you can join the discussions on AlgoViz.org forums.

CSS3 and AV revisited (with flexible box layout)

In the first post about CSS3 and algorithm visualization, I had demos showing how to animate sorting algorithms using CSS3 transforms. Yesterday, when watching CSS3 First Look on Lynda.com, I learned about the CSS3 Flexible Box Layout Module and wanted to give it a try and improve the previous animations.

Flexible Box Layout

The flexible box layout gives an excellent way to control the layout and ordering of elements on a page. All in all, it's really flexible. To give an example, let's work with the following HTML. 

  <div id="container">
    <div id="box1">Box 1</div>
    <div id="box2">Box 2</div>
    <div id="box3">Box 3</div>
  </div>

Now, without any styling, this would become a page where the divs are vertically on top of each other. With just one line of CSS3 magic, we can change that:

    #container  { display: box; }

Actually, we need at least three lines until the specification is ready and vendor prefixes are dropped:

    #container {
      display: -webkit-box;
      display: -moz-box;
      display: box;
    }

This will arrange the boxes horizontally next to each other (see the demo, example 2). The feature I was most interested in related to the sorting algorithm animation is the box-ordinal-group property. It allows to change the order of the child elements inside the box. To give you an example, the following CSS3:

    #box1 { 
      -webkit-box-ordinal-group: 2;
      -moz-box-ordinal-group: 2; 
      box-ordinal-group: 2;
    }
    #box2 {
      -webkit-box-ordinal-group: 3;
      -moz-box-ordinal-group: 3;
      box-ordinal-group: 3;
    }
    #box3 {
      -webkit-box-ordinal-group: 1;
      -moz-box-ordinal-group: 1;
      box-ordinal-group: 1;
    }

would change the boxes to be in order box3, box1, box2 from left to right (view the demo, example 3).

Visualizing Sorting Algorithms

One of the problems with the original CSS3 algorithm visualizations was the calculation of pixels when translating the elements to animate array item swaps. The box model seems like a great solution for replacing the pixels with just changing the box-ordinal-group property.

After creating a simple test case, I realized that it did not work as I suspected. The elements changed places, but no smooth animation was shown. After spending some time trying to fix my CSS I turned to Google. To my disappointment, it wasn't my code that was broken. Nor was it the browser. The box-ordinal-group just isn't one of the animatable properties according to the CSS3 Transitions specification.

So, to sum up the experiment: flexible box model could be used to visualize sorting algorithms, if no smooth animation is needed. In modern browsers, that is. According to caniuse.com, browsers that support this currently are Firefox 3.5+, Safari 3.2+, and Chrome 9.0+. In addition, Mobile Webkit on iOs and Android support it.

CSS3 Transformations and Transitions for Algorithm Visualization

CSS3 offers some interesting new properties that could be used for algorithm visualization. Here, I'll first introduce the new properties and then proceed to show and explain some demos that I've created. You can skip the nonsense and view the demos: bubble sortselection sort

CSS3 (or Cascading Stylesheets 3)

CSS3 includes several modules useful for web designers and web developers. Here, we are only interested in a couple: CSS Transforms, CSS Transitions, and CSS Animations. These are the modules that make it possible to add animation effects to web pages using CSS classes.

CSS Transforms CSS3 transforms allows translation, rotation, and scaling of elements in 2D and 3D. A two-dimensional transformation is applied to an element through the transform property. This property contains a list of transform functions. The transform-origin property establishes the origin of transformation for an element.

The transform functions in the specification are translate, scale, rotate, and skew. There are also versions of translate, scale, and skew to transform only X or Y dimension, that is, translateX and translateY, for example. Furthermore, the matrix transform functions allows for matrix transformations. Multiple transform functions can be used in a single transform property.

CSS Transitions The new CSS3 Transitions module defines CSS properties that can be used to change values of properties smoothly from one value to another over a specified duration. The transition behaviour is specified using a number of CSS properties.

  • transition-property specifies the properties that are smoothly changed. All animatable properties (not all CSS properties can be transitioned) that have changed can be animated using the value 'all'.
  • transition-duration is used to specify the length of the transition and transition-delay when the transition will start.
  • transition-timing-function describes the way the intermediate values are calculated. This allows a transition to change speed. There are several timing functions specified, for example, linear, ease-in, and ease-out.
  • transition property is a shorthand property that allows setting all of the above with one CSS property.

Listing below gives an example of how one would specify a transformation and a smooth transition.

    #selected {
      transition-property: transform, background-color, opacity;
      transform: translate(200px) scale(0.6);
      background-color: yellow;
      opacity: 0.2;
    }

The specified transformation would look like something in the picture below, assuming the original object had a red background and was not transparent.

css3transition-example

CSS Animation The CSS3 Animations module includes features to enable more fine-grained animation. This includes properties like keyframes that enable composing more controlled transitions. The module is an extension of the Transitions module.

Algorithm Visualizations with CSS3

To test how the new CSS3 properties work for visualizing algorithms, I created a couple of demos of sorting algorithms. Check out the bubble sort and selection sort demos. You'll need a browser that supports the new features, such as recent version of Chrome or Safari. If you don't have such browser, go install one or see the picture below.

CSS3 Algorithm Visualization demo screenshot

You can move backward and forward in the animation obviously using the links. When moving, the current codeline is highlighted, variable values updated, and the swaps of array elements animated. In addition to moving backward and forward, you can also change the layout to focus on the code or the data structure.

Technical Details

The animations are generated by an (ugly) Python script. This script is general enough that it would allow creation of animations of other sorting algorithms (or other algorithms working with arrays) by writing and annotating the python code. The code in the created animations is the actual Python code used to run the algorithm.

The Python code generates a JavaScript array of CSS class names as well as the corresponding CSS3 properties. An example of a highlight operation is shown below. 

/* codeline highlight */
.css-line2-5 { background-color: #afa; }
/* array element highlight */
.css-elem2-5 { background-color: yellow; }
/* moving an array element */
.css-elem2-6 {
   -webkit-transform: translate(-102px,0);
   -moz-transform: translate(-102px,0);
   transform: translate(-102px,0);
}

When moving backward or forward in the animation, JavaScript updates the CSS class attributes of the codelines, variables, and array cells changed in the operation. The browser then animates the changes according to the CSS properties.

Conclusion

While the browser support for CSS3 transformations is improving, they still can't be used for learning material that all students need to be able to access. But, they work well enough on some mobile browsers (such as iPhone and Android phones) to be useful when building AVs for mobile devices.

New Publication List with bib-publication-list

I finally got tired of updating my old HTML publication list by hand. I wanted something that would be automatically generated from my BibTeX file, without me having to remember to run any scripts or copy files. So, I wrote bib-publication-list. With it, I can just include the BibTeX into my HTML page and tell the script to turn it into a sortable and searchable table. Besides loading the required JavaScript files, all that is needed is to add a table where the data should be added and include the BibTeX:

    @article{Karavirta:JVLCTaxonomy,
        title = {A comprehensive taxonomy of algorithm animation languages},
        journal = {Journal of Visual Languages \& Computing},
        volume = {20},
        number = {1},
        pages = {1--22},
        year = {2010},
        issn = {1045-926X},
        doi = {DOI: 10.1016/j.jvlc.2009.09.001},
        author = {Ville Karavirta and Ari Korhonen and Lauri Malmi and Thomas Naps}
    }

Alternatively, the bibtex can be loaded from a file. I prefer including it in the HTML, though. This way, browsers without JavaScript enabled get at least to see the bibtex instead of a blank page.

Finally, the bib-publication-list needs to know the input data element and the output table. So, one line of JavaScript:

bibtexify("#bibtex", "pubTable");

The result looks like the figure below (or my new publication list).

The source code for the library is available on GitHub. The code uses some great libraries: jQuery, DataTables, Protovis, and JavaScript BibTeX Parser.

Let me know what you think. Especially comment if you have problems with it, I haven't tested it on all browsers (yet).

Fun with MozOrientation in Firefox 3.6

The already not so new Firefox 3.6 ships with a way for websites to detect the orientation of the laptop/device of the user. This opens interesting new possibilities for web applications similar to some iPod/iPhone/etc games. Some interesting demos are already available online:

Technically, using the new feature in JavaScript web application is really simple. It is  be done by listening to the MozOrientation event. So, in Javascript:

//register a listener
window.addEventListener("MozOrientation", updateOrientation, true);
function updateOrientation(orientation) {
    // do something with orientation.x, orientation.y
}

Since it seemed easy to use, I wanted to give it a try. The result is a simple game where you need to "collect" a number of targets on the screen. Try it yourself if you have a laptop that is supported and has an accelometer, for example MacBook(Pro). Can you come up with an application for the use of accelometer in education?

A Comprehensive Taxonomy of Algorithm Animation Languages

The article "A comprehensive taxonomy of algorithm animation languages" was finally published in the Journal of Visual Languages & Computing in volume 21, issue 1 (doi). I'd like to thank my co-authors Lauri Malmi, Ari Korhonen, and Thomas Naps for their hard work in writing this article. The abstract of the article:

In this paper, we present a taxonomy of algorithm animation languages that augments Price's well-known taxonomy of software visualization. Whereas Price's taxonomy is directed to classifying features and characteristics of visualization systems, the new taxonomy focuses on evaluating current animation languages. The taxonomy can be used by algorithm visualization system designers as a tool to compare visualization system languages with each other as well as for designing and implementing new systems and language features. In addition, the taxonomy provides guidelines to the features that are needed for transferring animations between systems. This is an ongoing project that elaborates upon the work reported on in a briefer version of the taxonomy.

The main categories of the presented taxonomy are Visualization, Dynamics, User Interaction, and MetaLanguage:

  • The category Visualization describes the features of the language used to create static visualizations for describing one state in the animation. In essence, it considers the variety of supported object types, that is, the building blocks used in the animation as well as ways to position and style the objects.
  • The category Dynamics describes the level and versatility of animation effects available in the language and how the final animation can be customized through the language. These are the ways the visualizations can be changed when moving from state to state.
  • The category User Interaction describes the type and level of interaction provided for the end-user of animations that can be specified using the language.
  • The category MetaLanguage describes the support of features that are not directly related to algorithm animation but instead are useful in the animation creation process. These are features that are not directly visible to the end user.

The figure below shows the two highest levels of the taxonomy. The paper also includes an evaluation of many of the existing AA languages. So, go read it and let me know what you think!

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

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.

Kyoto - day 6 & mmm....Osaka

See also Kyoto - day 5.

Old and New - View from our Hotel, Hotel Unizo

Old and New - View from our Hotel, Hotel Unizo

Daitoku-ji Temple

Daitoku-ji Temple

Linda at Temple Path

Linda at Temple Path

Inside the Temple

Inside the Temple

Path to the Temple

Path to the Temple

Temple Gardener :)

Temple Gardener :)

Shinkansen to Osaka

Shinkansen to Osaka

Ville and hUUge ferrisch wheel in Osaka

Ville and hUUge ferrisch wheel in Osaka

Three Whales at Osaka Aquarium :)

Three Whales at Osaka Aquarium :)

Jellyfish

Jellyfish

(Two*) Whale Shark at the Worlds Largest Fish Tank

(Two*) Whale Shark at the Worlds Largest Fish Tank

Crabby Hair Day ...

Crabby Hair Day ...

R U jealous?

R U jealous?

Osaka by Night

Osaka by Night

Shinsaibashi in Osaka

Shinsaibashi in Osaka