Development of Educational Tools: a Web-Oriented Approach
Denis Dion Jr., Antoine Escobar, Jacques Tremblay, Denis Laurendeau
Computer Vision and Systems Lab, Laval University, Quebec, G1K 7P4
{ddion,escobar,jackt,laurend}@gel.ulaval.ca
Abstract - This paper deals with the development of
educational and website maintenance tools using CGI-
Programming and Java. We present some basics of CGI-
Programming and how “dynamic document generation”
can greatly enhance the possibilities of traditional static
HTML.
Webtools are presented, in the context of a bachelor’s
degree C++ programming language course at Laval
University. This year, over 200 students performed
successfully an exam directly over the Net. This evaluation
system and some necessary security measures are also
presented. The URL of the website is:
http://www.gel.ulaval.ca/~ift19965/
Introduction
The purpose of this project is to study and develop
simulations and complementary learning material in an
interactive multimedia environment accessible over the
World Wide Web. With the rising popularity and
availability of new adapted computer languages, such as
Java/JavaScript, the possibility to create interactive
simulation tools accessible on the Internet has now become
a reality.
Our project is to develop and maintain a complete
website for a C++ Object-Oriented programming language
course currently followed by first-year bachelor’s degree
students at Laval University. The goal is to increase the
educational content of the course and to efficiently
complement the 3-hour lectures. A wide range of tools
have been developed to help the website administrator,
usually a non-specialist in WWW development, in adding
new documents (e.g. exercises, skill tests, etc.) to the
website. A server is dedicated to the site and takes full
advantage of the extended possibilities offered by CGI-
Programming and Java. The benefit of managing a stand-
alone web server is that it allows to examine access
statistics of the website and to keep track of the documents
that are accessed the most.
This paper is divided in 6 parts. First, section 1 presents
technical details about the CGI libraries and the server
configuration. Section 2 presents the educational contents
of the website. Section 3 shows some of the document
layouts and how CGI-Programming reduces the work load
significantly when new documents are made available to
the students on the site. Section 4 discusses the Java tools
that were developed to help the professor prepare different
types of exercises or exams and to allow him/her to add
these documents to the database on the web server. Section
5 deals with the exam on the web and, finally, section 6
addresses the future work in the implementation of the
website.
1. CGI-Programming basics and server’s
configuration
Unlike most websites, the website presented in this paper is
entirely based on CGI-Programming (Common Gateway
Interface) using Perl. CGI-Programming allows to
dynamically build (on request) each document shown on
the website, instead of forcing the edition and debugging of
static, hard-coded HTML documents usually encountered
on most websites. The documents are not only generated on
request but they can also be tailored for the browser’s
specific capabilities, since most browsers silently identify
themselves when a request is made to the web server. For
instance, HTML tables were not supported by Netscape 1.0
and are still not properly supported by most text-based
browsers such as Lynx. Using the set of tools described in
this paper, the documents are built without tables when the
browsers do not support this feature.
From the user’s point of view, when he/she accesses a
document on the website, this document appears as an
usual HTML document. However, what actually happens is
that a program generates the HTML document which is
then displayed in the browser’s page. The program, like
any program, can do virtually anything before, during and
following the generation of the HTML document. This is
the fundamental idea behind CGI-Programming. Perl is a
programming language that is well-adapted for this
purpose.
A comprehensive set of Perl functions was developed.
Two of them are particularly useful, namely, the Header
and Footer functions. These functions are used to generate
automatically a common header and footer on every
document of the site, thus providing an homogeneous look
of all the website documents accessed through the various
hyperlinks. The header and footer can be added to existing
HTML documents. Also, since each CGI-script uses the
Header and Footer functions from a function library, a
single modification is required to change the common
appearance of all the documents contained in the site (see
figure 11).
Figure 1: Common Header to all documents
Among other things, the Header function contains the
information about the background image, the text and the
link colors for the documents. It also checks the browser’s
version. The Footer function automatically displays
information about the last modification date (of the CGI-
script itself or the HTML file to which the header/footer
was added, see figure 2).
Figure 2: Common footer to all documents.
Last modification date is displayed and updated
automatically
Since confidential information is provided by the
website through passwords (grades, solutions to lab
exercises, etc.) the security and integrity issues related to
CGI-Programming were a main source of concern in
designing the site. This is the main reason why it was
decided to set-up a dedicated web server and to properly
monitor any illegal or unauthorized access. If someone
tries to access password protected document without
having a proper username/password key, each attempt is
automatically logged, clearly showing ‘who’, ‘when’ and
‘where’ this connection came from. Further action can be
taken (e-mail notification, access refusal, etc.). Also, a
special care must be taken for the configuration of the web
server itself. The default configuration can severely
1. Currently, the website is only in French. All
figures have been translated for the purpose of
this paper.
jeopardize the integrity of the computer running the web
server (and all confidential information it contains). There
are several security loopholes that are familiar to hackers
(for instance, the ‘phf’ security loophole).
CGI-Programming also allows to profusely use and
manipulate HTML forms. Whenever it is possible and
desirable, we use HTML forms to access the available
information instead of using numerous HTML hyperlinks.
For instance, there are currently 8 weekly assignments
(with their solutions and additionnal questions) available
on the website (http://rigaud.gel.ulaval.
ca:8080/TP/2). Each one is available in different formats
(HTML, FrameMaker, Postscript, PDF). It would take up
to 50 hyperlinks to access all these documents. With proper
use of HTML forms (see figure 5), the user can simply
select the desired assignement number, the desired format
and then press the ‘submit’ button.
Some actions could not be achieved without forms. As
an example, students have access to their grades and exams
results on-line (http://rigaud.gel.ulaval.
ca:8080/Resultats/). Using their personal computer
account’s username and ID number in an HTML form,
students only have access to their personal file after proper
identity validation (see figure 3). Any tampering with
unauthorized files (or failing the validation step) results in
an automatic notification to the web administrator. Among
other things, trying to get a look at a colleague’s grade
(without his/her proper ID number) is automatically
detected and the situation can be corrected.
Figure 3: Grades and exam results.
2. Even though http://www.gel.ulaval.ca/
~ift19965/ is the ‘official’ URL, it acts as a
redirection to our web server (currently on
rigaud.gel.ulaval.ca, port 8080).
 2. Educational contents
The overall goal of designing a web site is to efficiently
complement the professor’s work. Students can
continuously check their level of understanding of the
topics by looking at over one hundred exercises with
solutions stored in the course’s database. They can also get
information on the course on a daily basis. The course is
divided in 51 chapters, each one explaining one important
notion of Object-Oriented Programming in C++. For each
chapter, several exercises are available along with their
solutions (http://rigaud.gel.ulaval.ca:8080/
Exercices/). The students can download the sources of
the solutions in order to modify them and compare different
approaches. From the access-log statistics provided by the
web server, we have noticed that this is the most accessed
section of the website. CGI-Programming and dynamic
document generation allow to display the exercises in a
novel and interesting way (See figure 4). Using dynamic
document generation (more details in Section 3), it is
possible to browse through the exercices without having to
run through a plethora of standard HTML hyperlinks.
Students can jump from one chapter to another, without
ever having to press the ‘back’ button.
Students also have access to weekly mastery skills
check with password-protected multi-format (HTML,
PostScript, PDF, FrameMaker) solutions (http://
rigaud.gel.ulaval.ca:8080/TP/ ). These mastery
skills check are more like laboratory assignments and
generally require more than a week to implement. The
password to access the solutions is sent by e-mail to the
students. The solutions are password-protected to ensure
that students will put in the effort and try these laboratory
assignments by themselves. They have sufficient time to
experiment these assignments before the password is made
public. Again, since we compile weekly statistics about
how often and when these documents are accessed, the
professor is able to assess in real-time the progress of the
Figure 4: Dynamically generated, availability-
class.
based, exercises layout.
A Frequently Asked Questions database (and their
answers) about C++ related topics (http:// 3. Layouts and aesthetic appearance
rigaud.gel.ulaval.ca:8080/FAQ/ ) and also about
the UNIX environment in general (http:// Tools were developed to facilitate the website
rigaud.gel.ulaval.ca:8080/FAQ_misc/ ) is also administrator’s task when new documents (e.g. exercises)
included in the site. Students can thus get a quick look at are added to the website. Each time a document is
the FAQs before asking the same question. They can also requested, a CGI script automatically checks whether or
get advanced insights with the answers. A list of suggested not new documents are available and then properly builds-
books on course-related topics is also available on-line up the HTML documents that are then fed to the browser.
(http://rigaud.gel.ulaval.ca:8080/FAQ/ Multi-format (HTML, Postscript, PDF, FrameMaker)
Livres/ ). documents are also generated. The course instructor is thus
freed from the task of hard coding HTML documents in
order to make them available to the users. Furthermore, as
described in Section 4, user-friendly Java applications were

Figure 5: Multi-format, availability-based,
laboratory assignments layout.
developed to assist the instructor in preparing different
types of exercises or exams and to add them to a question
database.
4. Java authoring tools
The authoring tool was built to assist people with very
limited knowledge of computer. It was designed to be very
simple to use. Its purpose is to assist the professor prepare
exercises and scenarios (i.e. sequences of pre-determined
and ordered exercises). The professor never has to develop
wearisome hard-coded HTML documents in order to
elaborate different types of exercises or scenerios (exams)
and add them to the database on the web server. By the
utilisation of this Java application, the professor is
confident that all the data in the database is uncorrupted.
Moreover, this Java application allows the professor to
manage securely the database on the web server.
With this tool, the professor can edit exercises on a
personal computer or build scenarios (exams for instance).
When he/she is ready to distribute exercises to the students,
he/she just commands the application to send the document
to the web server which takes care of the remaining task of
installing it in the site.
To edit an exercise, the author has the choice between
many categories:
• True/False
• 1 out of N choices (see figure 6)
• M out of N choices
• Open subject
s
1 out of N choices
Figure 6: Graphical Interface of the Java authoring
tool. (‘1 out of N choices’ question type)
The three first categories are automatically corrected by
a CGI-script. The open subject questions still have to be
corrected by the professor. When the student fills the
answer form and submits it, the web server sends the
answer to the professor who corrects it and sends the result
back to the student. After exercises are composed, they can
be gathered in scenarios. These scenarios can be used for
exams.
The professor has two ways to compose an exam or a
scenario:
• Handling mode
• Automatic mode
In handling mode, the professor has to select in a
database the exercises he/she wants to compose the exam
or scenario with. Once he/she has finished, he/she sends the
exam file to the web server.
In automatic mode, the exam or scenario is composed
automatically. The application selects randomly the
number of exercises required for the exam and sends it to
the server.
5. Exam on the Web
In December 1996, for the first time at Laval University,
over 120 students performed an exam directly over the
Internet using a standard form-capable browser. In April
1997, this experiment was repeated with more than 100
students. CGI-scripts were developped to build the HTML
exam ‘sheet’ using a multiple-choice questions database
(see figure 7). Then, another script was built to collect the
student’s answers and to automatically correct the exam.
The interesting part is that all available information (the
content of the exam form, the start and finish times, where
the connection came from, etc.) is written to disk, and also
sent automatically (by e-mail) to the student, the professor
and the web administrator. So, there are at least four copies
of the student’s answers which limits the possibility of
fraud. For instance, should a student want to cheat by
changing the content of the e-mail containing his/her
answers and then try to argue that the correction went
berserk, at least three other copies of his/her answers would
be available to prove him/her wrong. Of course, these three
other copies are protected and inaccessible to the student.
The next step is the automatic correction of the exam.
The exam is corrected and the student automatically
receives his/her grade a few seconds after having submitted
the exam. An HTML version of the student’s personal
corrected exam is generated and is available for the student
to see where he/she succeeded/missed. The grades are
automatically compiled into a spreadsheet readable file.
The system is built with security measures so that any exam
tampering or re-submission are prohibited and
automatically identified. For instance, the student can only
take a look at his/her personal HTML copy of the exam (the
URL of the exam contains a random number). Any attempt
to look at a colleague’s exam will automatically be notified.
One an exam has been submitted, re-submission is
prohibited and is automatically detected.
The UNIX computer network is running the ident
daemon process (see RFC 931 [7] and RFC 1413 [8]). Web
servers can be configured to get valuable information from
this daemon such as the username of the person accessing
any document on the server. So, whenever a student
accesses a document (for instance, the web exam), his/her
username is automatically supplied (by the web server) to
any of the CGI scripts. This daemon cannot be fooled or
killed by users other than the superuser. Even then, the CGI
scripts automatically detect a malfunction of the ident
daemon.
6. Conclusion and future work
This first experience in a web-oriented approach for
teaching C++ has given promising results. There are many
pros for extending the approach to other courses. First,
every student has a different learning pace and using the
computer as a teaching aid can accommodate the varied
learning styles of students. Slower students can return to
the site as often as they want in order to improve their
skills. From the access statistics, it is possible for the
professor to identify the topics the students find the most
difficult and make reviews about these topics in the
classroom.
Future work will concentrate on the design of tools that
will allow the professor to built theoretical material.
Emphasis will be put on the possibility to rapidly and easily
design such documents.

Figure 7: Multiple choices, generated exam sheet.

(For illustrative purpose only)
 Acknowledgments
This work was supported in part by the MILES
(Multimedia Interactive Learning Environment with
Simulation, http://diamant.gel.ulaval.ca:8080/
miles/ ) project, a node of the Telelearning Network of
Centres of Excellence (http://www.telelearn.ca/ ).
References
[1] Denis Dion Jr., Denis Laurendeau, “C++ Under UNIX
Course Website”, 1996 TeleLearning First Annual Mee-
ting and Conference - Constructing a Vision for the
Knowledge Society, November 5-7 1996, Montréal,
Canada.
http://www.telelearn.ca/
[2] Michael Erwin & Jeffry Dwight, et al., “Special Edition
Using CGI”, QUE, 1996.
ISBN: 0-7897-0740-3
[3] David Flanagan, “Java in Nutshell : A Desktop Quick
Reference for Java Programmers”, O’Reilly & Associa-
tes Inc., 1996.
ISBN: 1-56592-183-6
[4] Eric Herrmann, “Teach Yourself CGI Programming with
Perl in a Week”, Sams Publishing, 1996.
ISBN: 1-57521-009-6
[5] Laura Lemay, Charles L. Perkins, “Teach Yourself JAVA
in 21 Days”, Sams.net Publishing, 1996.
ISBN: 1-57521-030-4
[6] David Till, “Teach Yourself Perl in 21 Days”, Sams
Publishing, 1994.
ISBN: 0-672-30586-0
[7] RFC 931: Authentication Server, Network Working
Group Mike StJohns Request for Comments: 931 TPSC
January 1985.
http://www.pmg.lcs.mit.edu/rfc.html
[8] RFC 1413: Identification Protocol, Network Working
Group M. St. Johns Request for Comments: 1413, US
Department of Defense, February 1993.
http://www.pmg.lcs.mit.edu/rfc.html