Distance Examination using Ajax

Distance Examination using Ajax to Reduce Web Server Load and Student’s Data Transfer

Ridwan Sanjaya¹, Prof. Dr. Chaiyong Brahmawong^2
1 Soegijapranata Catholic University, Semarang, Indonesia.
² College of Internet Distance Education, Assumption University, Bangkok, Thailand.
Email: mail2ridwan@yahoo.com, chaiyong@ksc.au.edu

Abstract

Using Ajax in the web application is becoming popular now. It is a new approach of web application that closes the gap between desktop application and classic web application. Ajax is able to deliver all web contents better, smarter and richer using only technologies that are already installed on the majority of modern computers. To use this technology, a student does not need to change his/her web browser. The benefits of Ajax can be adapted by E-learning to serve a distance examination faster and more convenient for the students. Only the specific part will be requested to E-learning web server. It will reduce E-learning web server load and reduce the data transfer from students’ computers. If the students access the examination at the same time, they can access the examination faster than usual from their computer.

Keywords

Ajax, Remote Scripting, Dynamic HTML, E-Learning, Education, Web Platform

*) Published in Special Issue of the International Journal of the Computer, the Internet and Management (IJCIM), Vol. 15 No.SP3, Assumption University of Thailand, November, 2007, ISSN: 0858-7027.

**) Presented at The Fourth International Conference on E-Learning for Knowledge-Based Society held at Bangkok, Thailand on November 18-19, 2007.

PDF Version [Download]

 

1. Introduction

The web based learning is now used by several universities in the developing countries now, including Thailand and Indonesia, to give an educational opportunity to their citizens. Ministries of education in both of countries are pursuing several educational institutions to educate more people in their countries via internet, which is popularly called e-learning.

Several problems might occur in the middle of e-learning process. However, the show must go on. Several limitations in the e-learning technology can be delimited one by one by several innovations in the web technology. For educational institutions in the developing countries, one limitation to hold the e-learning is the lack of bandwidth. In the reality, every process in the e-learning website needs enough bandwidth to open the material of learning, do the group discussion, and do the examination.

Do the examination is one of important factors in the e-learning process because it is the evaluation part for the students to know how far they understand the contents of subject. For the students who have limitations in the bandwidth, do the exam smoothly without problem on the bandwidth can make them focus on the result.

Decreasing the data transfer between the web server and student can reduce the bandwidth problem. It will reduce the e-learning web server load also. Using Ajax (Asynchronous JavaScript + XML) can be one of the techniques to solve the problem on the bandwidth. Ajax can minimize the amount of traffic between the client and the server. Making sure that your Ajax application doesn't send and receive unnecessary information adds to its robustness [6].

Ajax is basically a web development technique which uses existing technologies like JavaScript and XML, and which is able to deliver the web contents faster and more convenient to the students using only technologies that are already installed on the majority of modern computers.

Only the specific part will be requested to E-learning web server. It will reduce E-learning web server load and reduce the data transfer from students’ computers. If the students access the examination at the same time, they can access the examination faster than usual from their computer.

An Ajax application eliminates the start-stop-start-stop nature of interaction on the Web by introducing an intermediary - an Ajax engine - between the user and the server. It seems like adding a layer to the application would make it less responsive, but the opposite is true [3].

Figure 1: Request specific part of webpage

Ajax has ability to deliver all web contents better, smarter and richer using only technologies that are already installed on the majority of modern computers [1]. Developers use Ajax technologies to build Web applications with improved performance and interactivity, as well as responsive user interfaces [4].

The primary advantages of Ajax-style Web applications are less waiting time and more control for the user [5]. Ajax accomplishes this by eliminating full-page post-backs in favor of smaller, incremental in-place updates; leveraging the client machine’s processing power and temporal proximity by making the Web browser responsible for more aspects of the application execution; and exploiting modern Web browsers’ rich graphics capabilities transparency, shading, animation, Z-ordering, compositing, and so on to add more glitz and interactivity to the presentation of information.

2. Concepts Overview

Ajax (Asynchronous JavaScript and XML) is the latest boom in the Web development world. Ajax helps developers narrow the gap between desktop and web applications. Google Maps, Google Gmail, Google Earth, Yahoo Flickr, and MS Outlook Express Web Version are some of the applications powered by Ajax [2].

There is no additional feature that must be added to users’ computer because Ajax is not a new technology. It is basically a web development technique which uses existing technologies like Asynchronous JavaScript and XML.

Asynchronous means that users can make a request to a server and perform other actions while the server is processing users’ request. The response can be performed only in the specific part of webpage. In the classic web applications, the user has to wait and see the blank screen while the server is processing the request [2].

Ajax architecture is very simple; a user makes an initial request and, in response, the page with the Ajax engine is loaded. Thereafter, the user sends all requests to the Ajax engine through JavaScript function calls, while the Ajax engine forwards requests to the server, parses the responses, and displays the HTML in the browser.

Ajax engine is collections of JavaScript functions which use XmlHttpRequest object to make requests to the server. XmlHttpRequest is the main player in an Ajax application it handles all the communication with the server.

Figure 2: Ajax Architecture

Ajax applications take an advantage of dynamic HTML, which consists of HTML, Cascading stylesheets (CSS), and JavaScript glued together with the Document Object Model (DOM). Ajax uses XML to encode data for transfer between a server and a browser or client application. CSS gives Web site developers and users more control over how browsers display pages [4].

Document Object Model (DOM) is a programming interface that lets developers create and modify HTML and XML documents as sets of program objects, which makes it easier to design Web pages that users can manipulate. The DOM defines the attributes associated with each object, as well as the ways in which users can interact with objects. DHTML works with the DOM to dynamically change the appearance of Web pages. Working with the DOM makes Ajax applications particularly responsive for users.

JavaScript interacts with HTML code and makes Web pages and Ajax applications more active. Ajax uses asynchronous JavaScript, which an HTML page can use to make calls asynchronously to the server from which it was loaded to fetch XML documents. This capability lets an application make a server call, retrieve new data, and simultaneously update the Web page without having to reload all the contents, all while the user continues interacting with the program.

Systems can use JavaScript-based XMLHttpRequest objects to make HTTP requests and receive responses quickly and in the background, without experiencing any visual interruptions.

Several benefits of using Ajax can be gained by the developers and users, such as (1) high interactivity, Ajax applications are more interactive than classic web applications; (2) high usability, it is updating only relevant portion on each user request will improve the usability of users’ application; (3) high speed. Ajax applications are much faster than classic web application [2].

3. Strategies

Based on the concepts, e-learning website can adapt the benefits of Ajax, especially in the examination part of e-learning. The examination page should not request the entire page for each question but only the questions themselves. The components for the page are web template, internal frame for the questions, the questions database, and the server side programming to show the questions from database.

The web template is a web design or layout which is combined from several pictures and HTML codes. The web template is loaded once only when the user requests for the examination page. To minimize the size of web page and reduce the need of bandwidth, the web design should not be full with pictures. The combination of colors can give an added value of the design without increasing the size of web page.

Figure 3: The Web Template

The internal frame should be placed in the web template to show the questions. The content inside will be changed after the students submit the answer or cancel the examination. Using Ajax, the internal frame can be dynamically showing another question without having to reloading all the web page. The students should not load all the web page but the questions only.

The questions database is needed as a bank of questions. It will be shown by the server side programming. Several served side programming languages, such as PHP, ASP.NET, JSP, and so on, can be used to open the questions database and show the question to the web page.

4. Implementation

To provide the web based examination using Ajax, the university can develop a web application which has main page (index.php), examination page (examination.php), and ajax engine (ajax.js). The example of the web examination can be shown at http://ridwan.sanjaya.org/research/ajax for the Ajax web and http://ridwan.sanjaya.org/research/non-ajax for the Classic web.

Figure 4: Implementation

The Pseudo-code of main page (index.php) of the examination web page, Ajax Engine (ajax.js), Question page (examination.php) can be seen bellow.

index.php

Begin

Create a web template

Create an internal frame

Load javascripts

Call a javascript function to show a question

End

ajax.js

Begin

Check Ajax web browser support

Collect parameters of request

Send the request to server side programming

Receive the result

Send the result to the internal frame

End

examination.php

Begin

Start SESSION

Connect to database

Check the answer

Give score and save to SESSION

Show the question

End

Based on the 10 questions which are prepared to students at http://ridwan.sanjaya.org/research/ajax, the total of web page size is 84 KB and total of loading time is 10.43 seconds.

Table 1: Ajax web measurement

At another experiment, to answer 10 questions which are prepared to students at http://ridwan.sanjaya.org/research/non-ajax, students will download 858 KB and they need 41.91 seconds to load and do the examination. The comparison of size and loading time can be shown at figure 5 and figure 6.

Table 2: Classic web measurement

5. Conclusion

Ajax is a great functional tool for web applications that is updating only relevant portion on each user request. Looking at the time comparison between Ajax and Classic examination web page, using Ajax can reduce the loading time of questions and reduce the bandwidth usage also. For the students who have limitations in the bandwidth, it can help them to do the exam smoothly without having problem on the bandwidth.

Figure 5: Size Comparison

Figure 6: Loading Time Comparison

Reference

[1] Crane, Dave, et al. Ajax in Action, Manning Publications Co., Greenwich, 2006.
[2] Eginam. 2007. An Introduction to Ajax. http://www.topcoder.com/tc?module=Static&d1=features&d2=071706.
[3] Garrett, J. 2005. Ajax: A New Approach to Web Applications. http://www.adaptivepath.com/ publications/essays/archives/000385.php.
[4] Paulson, Linda D. Building Rich Web Applications with Ajax, Computer, October 2005.
[5] Smith, Keith. Simplifying Ajax-Style Web Development, Computer, May 2006.
[6] Zakas, Nicholas C, et al. Professional Ajax, Wiley Publishing Inc., Indianapolis, 2006.