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.

Continue reading...

Web 2.0 and Its Implementation to E-Learning

Ridwan Sanjaya¹, Rear Admiral Prasart Sribhadung^2
1 Soegijapranata Catholic University, Semarang, Indonesia.
² Graduate School of Information Technology, Assumption University, Bangkok, Thailand.
Email: mail2ridwan@yahoo.com, prasart@ksc.au.edu

Abstract

Web 2.0 is a new buzzword being used in the Internet these days. The concept had become popular after the discussion was made in 2004 between O'Reilly and MediaLive International. Although most people claim that Web 2.0 is the second phase of the World Wide Web development, it is not apparently clear what it means and what it takes. However, the proponents of Web 2.0 formulated the seven principles characterizing the current practices which are explored. These are (1) The Web As Platform, (2) Harnessing Collective Intelligence, (3) Data is the Next Intel Inside, (4) End of the Software Release Cycle, (5) Lightweight Programming Models, (6) Software [written] Above the Level of a Single Device, (7) Rich User Experiences. Relatively, the principles of Web 2.0 have the following key components: connectivity, interactivity and participation from the users. Nowadays, this concept is also being used in the field of education which has come to be known as E-Learning 2.0. This paper presents the process of implementing the concepts of Web 2.0 in E-Learning by integrating different tools into the concept which will help users learn fast and interact effectively while using E-learning website.

Keywords

Web 2.0, RSS, E-Learning, Education, Web Platform

*) Published in Special Issue of the International Journal of the Computer, the Internet and Management (IJCIM), Vol. 14 No.SP1, Assumption University of Thailand, August, 2006, ISSN: 0858-7027.

**) Presented at The Third International Conference on E-Learning for Knowledge-Based Society held at Bangkok, Thailand on August 4, 2006.

PDF Version [Download]

 

1. Introduction

Even though Web 2.0 is becoming an interesting topic in the internet, it is not a familiar word for the users. There are a lot of users still asking for the meaning, the function, and the objective of Web 2.0 and also comparing it to the present web technology. They are afraid that Web 2.0 will make incompatibility in the client side. But none of the technology on the client side is changing. The development of Web 2.0 emphasizes on the way of thinking to provide the content and interface on the website. The Web was shifting from being a medium, in which information was transmitted and consumed, into being a platform, in which content was created, shared, remixed, repurposed, and passed along [2]. Most of the concepts in Web 2.0 integrate some web technologies in the present days.

Nowadays, Web 2.0 is a new buzzword in the Internet. This concept has been well-known after the discussion between O'Reilly and MediaLive International in 2004. Despite the claim that Web 2.0 is the second phase of the World Wide Web development, it is not actually clear what it means and what it takes. Some of them emphasize on the social network between the website and its users, like the Blog does. But others push the ideas on using web as a platform, like AJAX (Asynchronous Javascript and XML) does [5].

The users can run the word processor or spreadsheet software using the web browser only. They do not have to install the software in the computer, but they can access the website of the application provider via web browsers, for instance, Google Spreadsheet (http://spreadsheets.google.com) or Zoho Writer (http://www.zohowriter.com).

Through these applications, the users can create, format, and edit documents online with a powerful WYSIWYG editor. Moreover, they can access and share their documents from anywhere using only the web browser. Users do not need the conventional storage anymore. Saving and sharing the documents can be done via internet.

2. Concepts Overview

After the brainstorming between O’Reilly and MediaLive International, they published the seven character principles of Web 2.0 [4]. The first character is web as a platform in which the users can create the web as a place to work at everywhere. They only need to open the web browser and then they can type, calculate, analyze finance, or create a presentation document using any application related to the work and publish the work directly in the internet. The example of this first character can be seen in the following figure.

Figure 1. Web as a platform

The second character is participation from the users on the knowledge collaboration. It reminds the users about the trust that is given to the internet users like in the Wikipedia. They can share their knowledge in the Wikipedia, an encyclopedia based on the web which is developed by the internet users over the world. The content is characterized by open communication, decentralized authority, freedom to share and re-use, and dynamic interactivity [1].

The next character is data becomes a trademark of application. It reminds the internet users with the “Intel Inside” slogan which is famous among the computer users. That trademark has been a trust guarantee to the users who have a computer or want to buy a computer. The same objective explains the third character in which the data supplier will give a trademark. That trademark will be used by a website owner to give the trust guarantee to the visitors. A few examples of this character are “Nevteq Onboard” slogan for the map data on the GPS navigation and “Powered by Google” for the Google Maps which supports the world map based on web.

The fourth character is web 2.0 as the end of software release cycle; it illustrates every software producer which does not release their product physically. Because of web as a platform, users can come to the website to run the software that they want to use. Every update can be used directly by the users. Software is not sold as a product but as a service. Producer who gives the faster and better service will be chosen by users.

The fifth character is the support of the simple programming and the idea of web service. The existence of RSS can be remixed easily by other websites using their own interface, web design, and simple programming.

The sixth character is software which is not limited to specific devices. It emphasizes on the term of web as a platform in which all application can access. Computer is not the only device that can run any application on the internet. Every application on the web 2.0 must be designed to run at personal computer, handheld devices (mobile phone or PDA), or internet server.

Finally, the last character is innovation on the client interface using Rich Web Applications with AJAX. Supports of AJAX which integrates HTML, CSS, Javascript, and XML on the Yahoo!Mail Beta and Gmail make the users get more additional values than ordinary web based e-mail service. Combination Instant Messenger or Voice over Internet Protocol can create a stronger character of Web 2.0 on the website.

3. Strategies

The existing e-learning website can adopt several characters to be implemented in each situation. In this pre-eliminary experiment, the five characters which can be adopted are the first character (web as a platform), second character (participation from users), fourth characters (the end of software release cycle), fifth character (support from simple programming and the idea of web service), and the sixth character (software which is not limited to a specific device).

The first character is web that can serve as lecturers’ workplace. The lecturer can use the web to create the presentation, text document, or other else. If the lecturer has created the documents before, the documents can be imported to the web and saved in the server. Since it is saved on the internet, users can see the documents via the internet or participate in giving any input or changes if the lecturer share it for them.

Like Wikipedia, every change is saved in the history. Everyone can see the changes until the official document is released by the lecturer. This kind of collaboration emphasizes the second character of Web 2.0. The users are trusted to make changes but their activities are recorded to give clear information to other users about the changes.

The fourth character can be adopted to E-learning website to help the lecturers create their presentation, text document, or others without installing the application. The lecturers can visit E-learning website and do their job there. E-learning website must be equipped with several office applications to support the lecturing.

Based on the fifth character, the saved documents can produce RSS to support the simple programming and the idea of the web service.

The flowchart of produce XML RSS can be seen in the following figure.

Figure 2. Produce XML RSS via web based software

The flowchart explains (1) If the lecturers want to create a new document, they will get the software based on web. Otherwise, they can choose to import the existing document to be saved on the server. (2) After the lecturers finish the activity, they can save the document in the server, and (3) generate it to produce XML RSS.

Because the output is XML RSS, the educational content can be accessed via mobile phone, PDA, desktop computer, or other media using any communication media, such as GPRS, HCSD, EDGE, LAN, or WiFi.

Figure 3. XML RSS can be accessed by any devices

The XML RSS can be adopted by other website with simple programming. However, for the commercial education, RSS can be supported by HTTP authentication to limit the users. Only registered users can access the RSS from their own device.

Figure 4. XML RSS with HTTP authentication

4. Implementation

To provide the software based on the web, the university can develop E-Learning website using AJAX. An example of the office application can be seen on zohoshow.com (presentation software), zohowriter.com (word processor), zohosheet.com (spreadsheet), and spreadheet.google.com (spreadsheet). They have the capability to access from anywhere, share and collaborate, load the existing document based on the Microsoft Office and OpenOffice; thus, installation is unnecessary. A simple office application can be seen on Figure 5.

After the lecturer save the documents, it will create an xml file using RSS format (see Figure 6). This format is used to provide items containing short descriptions of web content together with a link to the full version of the content. The items can be seen by using the RSS aggregator application which is installed in desktop computer (see Figure 7), mobile phone, and PDA (see Figure 8).

Figure 5. Sample office application based on the web

Figure 6. Saved document on the XML RSS format

Figure 7.View of the e-learning content from the desktop application

Figure 8.View of the e-learning content from the handheld device

For the commercial education, RSS can be supported by using HTTP authentication. It will limit the number of users. Only the registered users can access the RSS from their own device. The HTTP authentication is a common method to provide security on the website. However, when HTTP authentication is combined with SSL, the RSS can become more secure [3].

For Apache web server users, they have to make sure that the value of AllowOverride parameter in the httpd.conf file has changed to All.

# AllowOverride controls what directives may be placed in .htaccess files. It can be "All", "None", or any combination of the keywords: Options FileInfo AuthConfig Limit

AllowOverride All

They have to create .htaccess and .htpasswd files in the saving directory. The content of .htaccess file can be seen on the following. Then, they have to modify the e-learning-directory string to the real location on the web server.

AuthUserFile /elearning-directory/.htpasswd

AuthGroupFile /dev/null

AuthName "E-learning Authentication"

AuthType Basic

<Limit GET POST>

require valid-user

</Limit>

To create .htpasswd, the command can be typed as the following. Then, they have to change the username to the real name on the student list. To make it dynamic, it can be connected to the database as well.

htpasswd -c .htpasswd username

Figure 9 describes the result of using HTTP authentication. Before the users access the content, they have to write the username and password. If it matches, the RSS XML will be read and it will be saved on the RSS aggregator application. The flowchart can be seen at Figure 4.

Figure 9. Using HTTP authentication

In order to invite the users to participate, e-learning website can provide editing forms. Each edited activity and the user’s identity will be recorded in the history. If the editing is not correct, the lecturer can rollback to the previous document based on the history list. The E-learning website can also be equipped with the shoutbox or chatbox as a communication tool between the lecturer and students.

5. Conclusion

E-learning website can add several characters on the Web 2.0 to provide some advantages for its users. First of all, by using the Web 2.0, users do not have to install the software. The next advantage is users can access the E-learning content without visiting the website. Finally, users can access the E-learning content from any devices.

Besides these advantages offered to its users, the use of HTTP authentication can limit the number of E-learning content viewers. Only the users who have rights can access the content of E-learning.

Although E-learning website is equipped by several communication tools to encourage users’ participation in sharing knowledge, this website still needs lecturers’ trust in order to maintain the participation.

Reference

[1] Daniel, Graeme. Web 2.0 and Education, http://magazines.fasfind.com/wwwtools/magazines.cfm?rid=2756, February 14, 2006.
[2] Downes, Stephen. Feature: E-learning 2.0, ELearn Volume 2005, Issue 10. ACM Press, October 2005.
[3] Garrity, Steven. Private RSS Feeds: Support for security in aggregators, http://labs.silverorange.com/archives/2003/july/privaterss, July 9, 2003.
[4] O'Reilly, Tim. What Is Web 2.0?, http://www.oreilly.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html, September 30, 2005.
[5] Treese, Win. Putting it together: Web 2.0: is it really different?, Networker, Volume 10 Issue 2. ACM Press, June 2006.

Continue reading...