Movie Quiz - How was it done?

The movie quiz demo is a relatively simple example of a web form using AJAX. Instead of uploading and checking the whole form, as would be done in a classical web application, each answer is checked individually when entered, and the reply is shown immediatly, by replacing small parts of the web page and its style.

The movie quiz consists of two CGI scripts in Perl, one JavaScript and one CSS file, and any number of quiz files and movie scene images.

The Backend - Part 1

The quiz page is generated by a CGI script written in Perl. This page could be done as a static HTML page, but I wanted to be able to create multiple quizzes, defined by a simple configuration file, right from the start. As a secondary task of this whole experiment, I wanted to style the page with CSS exclusively, so the generated HTML code is purely descriptive, with all styling defined in a CSS file. The scoreboard uses the attribute "position: fixed", which works for most modern browsers, except the Internet Explorer (which isn't necessarily a contradiction).

The Frontend

When the user enters an answer, it is sent to the server. This is the AJAX part of the game. Using the JavaScript method "XMLHttpRequest", HTTP requests can be sent to a server (for security reasons only the same server that delivered the web page) in the background, without reloading the whole page. Replies are recieved and processed asynchronously, hence the first "A" in AJAX. In this example, according to the response, the answer is displayed as right or wrong, and the score is incremented, if appropriate. Although the "X" in AJAX stands for XML, in this application short text messages are exchanged, which works just as well.

The Backend - Part 2

The answer sent via AJAX is received by a second CGI script, again implemented in Perl. This script checks, if the answer is correct, and sends back an appropriate reply. In addition, this script counts the number of questions, which are requested via the JavaScript method "onLoad" and displayed in the score board. In the current implementation, this script is executed, whenever an answer is sent. An implementation using a constantly running backend (via mod_perl, FastCGI, a standalone program, or any other appropriate technique), would probably yield in much better response times, allowing e.g. a "check-as-you-type" approach, similar to the original (though AJAX-free) version of the movie quizzes.

Pecularities and Pitfalls

In my opinion the feature that takes the single most amount of brain-wrapping is the fact, that the communication between front- and backend is stateless, due to the asynchronism of the requests and the responses. This is probably no big news for everybody who has done parallel programming or similar stuff. But if you are used to simple method/function/procedure calls, this feels odd. You don't only have to supply all necessary information when calling the function, but you also have to return enough identification back to the caller, so it can find the right question to the answer.

A similar problem is, that the order of replies is not defined, which can be a problem, if you send many requests in short intervals. The check-as-you-type approach was abandoned, because a reply saying "wrong answer" might arrive after a positive one. Either pacing the requests or a more graceful handling of the replies could help, but I settled for a different behaviour of the form.