The standard vokabel.com tests were written to preload all question and answer data at test creation time so that the user could proceed with the tests without worrying about whether there was a network connection to the server available. This model seems to be the best and most efficient way to perform the task, particularly with the advent of smartphones that do not always have a data connection available. If, however, you want your client application to query the server for each question individually, you can do this as well. This tutorial will go through how one would perform the task using the latest javascript and jquery implementations. The client program will get the data by communicating with the restful web service that we created earlier.

Desired Functionality

We would like our test client to query for the question/answer pair and display an image of the word that will be tested. We would also like to give the user the ability to click on an audio button to allow them to hear the word pronunciation. Finally, we would like the testing program to allow the user to click on a button that will allow them to see whether or not the answer they typed is correct. Below is a screenshot of the client that we will be building:

File Structure

The standard client should have 3 separate files:
  1. Main html file: this is the main file that will be called when the user brings up the test in their web page. As you can see there is not a lot going on besides including the jquery libraries and calling the javascript module with the program logic.

  2. CSS Stylesheet file: this file contains the standard characteristics of GUI components that should be shared among common widgets (e.g. text boxes, push buttons)

  3. Javascript file: this file contains the program logic and builds the testing form