INTERACTIVE WEB-BASED C TUTOR M. STANISŁAWSKI, W. ZABIEROWSKI, A. NAPIERALSKI TECHNICAL UNIVERSITY OF LODZ, POLAND KEYWORDS: Web Development, E-Learning
ABSTRACT: With the invention and growth of the Internet web-based tutoring systems are now more popular than ever.
Although being widely available and easy to use, their role in the process of education is often limited due to the lack of interaction between the machine and the student. ICT, interactive web-based C tutor, being developed at the Technical University of Lodz, Poland, is an attempt to create a system with emphasis on the practical activities. It takes advantage of new web technologies for both server and client side and is implemented using open source software. ICT consists of several modules closely interacting with each other. It allows simple course management and dynamic content generation from XML based description files, quizzes and tests and on-the-fly web-based compilation and execution of user edited programs, removing the need for external software. Description of each module is given as well as overall view of the system. Important security issues are investigated and the flexibility of the system is discussed.
WEB-BASED TUTORING Web-based tutoring is very popular. With little effort anyone can create and publish information concerning any imaginable subject. The downside of this is that very often such pages offer incomplete or even misleading contents. Furthermore most of these tutorials are designed to deliver only theoretical knowledge and either instruct the user to install additional software or simply leave out this kind of information. Interactive C Tutor developed at the Technical University of Lodz, Poland, takes a different approach. Its main goal is to create a complete tutoring system allowing students to write, compile and execute programs directly from their web browser. Additionally teachers should be able to create new courses fast and without the need to modify HTML directly and also be able to check students progress. Because of the nature of the project, the high level of interactivity it requires, the choice of an appropriate technology was one of the most important steps in the design process, widely affecting all subsequent decisions and possibilities.
INTERACTIVE WEB Delivering interactive content to the end user has always been a problem. Java applets and flash movies, although powerful and flexible, require additional plugins on the client side and increase bandwidth usage significantly. Furthermore, the state of these technologies often differs between different target operating systems. Because of this lightweight solution, in the form of DHTML and Javascript, is often a better approach. However before the release of Internet Explorer 5 Javascript users had no way of asynchronous data retrieval from the server. Some attempts were made but these were not portable across different browsers[1]. However IE5 introduced a new technology which other browser
vendors followed. This technology is now know as AJAX, Asynchronous Javascript and XML, and is the de facto standard for interactive Internet applications. Some examples of AJAX in action include Google Suggest, Google Maps, Google Groups, Gmail, A9 search engine. What made this technology so popular is the fact that it allows asynchronous data requests, integrates seamlessly with existing Javascript and is cross-browser compatible.
AJAX IN DETAIL The whole AJAX concept revolves around the XMLHttpRequest object. In fact, that's the only addition. It might seem strange to use a name such as Asynchronous Javascript and XML to describe only one object but it comes from the fact that AJAX is not a technology in itself but rather a term to describe a certain design pattern. Saying AJAX means referring to HTML or XHTML for data presentation, Document Object Model for interactive content manipulation, XML, JSON EBML or any other format for data interchange, XMLHttpRequest for data retrieval and Javascript as the common factor [2]. Figure 1 shows this approach in action. Requests to the server are made transparently to the user and visual feedback is achieved through Javascript and Document Object Model. Data is usually transferred in the XML format, but since XML client-side parsing implementation is browser dependent other formats, such as JSON (Javascript Object Notation), are sometimes used. The whole process runs in the background and does not block user activities. AJAX serves as the technological basis for the interactive webbased C tutor.
Server Side Modules
Client Side User Interaction Layer
(Web Browser Rendering Engine)
AJAX Layer
(Javascript, DHTML, DOM, XML)
HTTP Trasport
Server Fig. 1. AJAX model
INTERACTIVE C TUTOR STRUCTURE Basic structure of the ICT system is shown in fig. 2. It comprises of several modules, each being an independent unit but tightly interacting with the rest of the system.
AJAX driven Client Interface
SERVER SIDE Server (PHP)
C Compiler Interface
Execution Supervising Module
XML to HTML Parser and Generator. Creating a new course and integrating it with existing system should be easy and without the need to modify existing code. ICT uses XML based course description files. Predefined set of tags and attributes allows to make full use of all features offered by the system. For example simply typing creates a web-based C editor on the client side, with initial code specified as value of the tag. The XML to HTML module not only parses and converts XML to HTML tags but takes into account the fact, that for proper operation of AJAX all client and server side resources must be synchronized. Thus it is possible to create multiple editors on one web page and not risk strange behavior. This is also true for tests. The system is capable of generating single/multiple choice and open questions while keeping answers on the server side. These are only used when the user submits his answers and are checked transparently. Logging Module. This module is used to record students performance. The system is only accessible after a successful login and this allows to distinguish between users. This module gathers information from two types of activities. Firstly during the compilation and the secondly when checking tests. In the former case all compiler generated messages are parsed in search of warnings and errors and additionally the frequency of compilation requests is stored. In the case of tests it simply records mistakes. This data can be later used by teachers to observe students progress and adjust their teaching methods.
CLIENT SIDE
XML to HTML parser and generator
Server side part of the system is built using almost exclusively the PHP Hypertext Preprocessor. Only the Execution Supervising Module is a precompiled C application due to its threaded nature. The database is a MySQL server, but any other can be easily adopted. All modules are coordinated by one central script, which upon a request delegates tasks as needed. It is also responsible for generation of the final server response. If at any stage an error occurs a special message is sent to the client which informs the user of the cause.
Logging Module
Database
Fig. 2. Basic Structure of the Interactive C Tutor System
C Compiler Interface. This is the bridge between the C compiler and the web server. Details concerning arguments of the external call and the compiler itself can be adjusted through a configuration file. All output from the compiler is redirected to the central module and the return value is checked. Further execution of the program is based upon this value. Execution Supervising Module. After a successful compilation the resulting program could be executed independently. However this would result in a serious security risk. The execution supervising module is designed as a way of controlling the behavior of the submitted program. Details are discussed in the section concerning security.
Client Side The client side part of the system is often more difficult to write than the server side due to two aspects. Firstly the developer has no control over what kind of a browser the user will use and secondly the user directly interacts with this part and thus it must be easy to control and create a good impression. All web pages generated by the system are XHTML 1.0 compliant and styled with valid CSS. As mentioned before client side uses AJAX for asynchronous communication with the server. This gives two important advantages. It significantly reduces web traffic and gives dramatically better experience. Regarding reduced traffic this is visualized in fig. 3. Conventional Approach Web Page Static Content
Server
Dynamic Content AJAX Approach Web Page Static Content Dynamic Content
A J A X
Server
Fig. 4. Interface of the web-based editor
Initial code can be specified in the XML course description file. After pressing the “Compile” button a XMLHttpRequest containing user code is sent to the server and the status label changes to indicate busy status. The request is a a standard POST HTTP request protocol but the response is in the JSON format. The reason for choosing JSON over XML is as previously mentioned, there exist minor differences in the way XML is parser on the client side. For example IE and Mozilla treat whitespace nodes differently [3]. Besides JSON is parsed much faster since it is a subset of the Javascript language and can be used as an argument to the eval function directly. The whole process is nonblocking, the user can perform other activities like editing code or solving a test while waiting for the response. When it arrives the status message changes again and compiler and program output is displayed. Fig. 5. shows an example program output.
Fig. 3. Reduced web traffic using AJAX vs conventional approach
What happens is that in the conventional approach each request is followed by a generation of a whole page, including repeating elements like the header and footer and navigation menu. Using AJAX only dynamic content is sent and directly updated through Javascript and Document Object Model. This leads to the second advantage of using Asynchronous Javascript an XML technology, better user experience through elimination of page reloads with every server request. This also has a visible impact on the client side performance, CPU intensive page rendering is done less often. Web-based Compiling. The biggest advantage of the Interactive C Tutor is the fact that simple programs, ideal in the process of learning, can be directly entered, compiled and executed from the web interface. The layout of the editor is similar to some of the most popular Integrated Development Environments so that beginners as well as more experienced don't have any problem getting used to it. The area of the editor is divided horizontally into two areas. The upper part is editable and the lower part, built of tabs, serves as an output from the compiler and the program. The bottom line contains the “Compile” button and a status display.
Fig. 5. Program output with formatting
It is interesting to note that the output formatting is preserved. The output status code is also shown, which can be important for tracking bugs. If an error or a warning occurs it is displayed in the Compiler Output tab. Fig. 6. shows an example of a buggy program together with error and warning messages. To achieve colorized output a scrolling div is used. It is a CSS method of creating generic containers with on-demand scrollbars. The reason for this is that a standard HTML text area supports only one global color. It is impossible to apply different formatting to specified part of the text.
Start Control Thread Launch execution thread in background Sleep No Fig. 6. Compiler output with formatting
SECURITY Security is a big problem considering that the system is designed to compile and run user written code. Two important issues arise. Firstly the user can execute arbitrary code on the server and secondly the program might contain an infinite loop.
Preventing Arbitrary Code Execution Although user compiled programs are run with limited privileges the risk of one user accessing other user files still exists. One approach is to run each program in a sandbox, monitoring every system call and blocking a specified range of calls. The easiest way of implementing this would be to use an existing monitoring tool such as strace. However this approach has some limitations. Most importantly blocking system calls can result in unexpected program behavior, premature termination, or even a deadlock. Additionally running each program under a monitoring tool increases CPU usage significantly which can already be high in this kind of a system. Therefore ICT uses a different approach. All processing is done on the client side. Just before sending a request to the server, user code is parsed in search of unsafe functions, headers or macros. These can be specified in the configuration file. If any of the declared keywords is found the user is given detailed information of the problem and no request to the server is made.
Preventing Infinite Loops Another problem is that users can write programs resulting in infinite loops. This can be done either on purpose or simply as a result of a mistake. The server has to be able to decide whether a program runs in an infinite loop and terminate it if needed. This is the responsibility of the Execution Supervising Module. It is the only part of the server side which is written as a separate C program. The idea is very simple. Two threads are launched, one acting as a control thread and the other running the target program. If after a specified time the execution thread is still active, an infinite loop condition is assumed and the control thread terminates it. Additionally it signals this to the server, which generates a warning response to the client.
Max. time reached? Yes Terminate Ex. th. & Signal
No
Ex. th. terminated? Yes
Terminate Fig. 7. Control thread flow chart
SUMMARY The ICT is an attempt to create an on line tutoring system for the C language with strong emphasis on practical skills. It is built basing on the AJAX framework and provides a web interface to a C compiler and interactive tests. It is also easily extendable by means of XML based courses. The system is able to log students performance for further analysis. Security can be controlled by means of limiting available functions, headers or macros and by automatic infinite loop prevention. Hopefully the system will find a broad audience and will be as useful as planned by filling a niche of on-line interactive tutoring systems.
THE AUTHORS Michał Stanisławski, Msc. Wojciech Zabierowski Prof. Andrzej Napieralski Department of Microelectronics and Computer Science Technical University of Lodz Al. Politechniki 11 90-924 Łódż E-mail:
[email protected]
REFERENCES [1] E. Traversa, “Ajax: What is it Good For?”, http://dhtmlnirvana.com/program/permalink/ajax_tu torial1.html [2] J. J. Garrett, “Ajax: A New Approach to Web Applications”, http://www.adaptivepath.com/publications/essays/ar chives/000385.php [3] D. Rosenberg, “Migrate apps from Internet Explorer to Mozilla”, http://www128.ibm.com/developerworks/web/library/waie2mozgd/
