TITLE OF [THESIS, DISSERTATION]Document Transcript
A WEB-BASED QUIZ DELIVERY SYSTEM USING AJAX (ASYNCHRONOUS
Rance Scott Harmon
A project submitted in partial fulfillment
of the requirements for the degree
Master of Science
MONTANA STATE UNIVERSITY
STATEMENT OF PERMISSION TO USE
In presenting this project in partial fulfillment of the requirements for a
master’s degree at Montana State University, I agree that the Computer Science
Department shall make it available on the department’s website.
If I have indicated my intention to copyright this project by including a
copyright notice page, copying is allowable only for scholarly purposes, consistent with
“fair use” as prescribed in the U.S. Copyright Law. Requests for permission for extended
quotation from or reproduction of this paper in whole or in parts may be granted
only by the copyright holder.
Rance Scott Harmon
I would like to thank Dr. Rockford J. Ross for his support and patience throughout
this project. In addition, I would like to thank Scott Dowdle, the Montana State
University Computer Science Department’s system manager, for his assistance in
helping me set up the server resources for this project. In addition, I would like to
thank my fellow students for their suggestions about the project, especially, Karen
Schuller, Jon Hauer, and Swapan Dutta Roy. This work was supported, in part, by
National Science Foundation Grant No. 0618744.
TABLE OF CONTENTS
INTRODUCTION ......................................................................................................................................... 1
INITIAL DESIGN CONSIDERATIONS AND REQUIREMENTS ........................................................ 3
REVISED VERSION DESIGN CONSIDERATIONS AND REQUIREMENTS ................................... 5
USER GUIDE ................................................................................................................................................ 8
FUTURE WORK ........................................................................................................................................ 17
REFERENCES ............................................................................................................................................ 18
LIST OF FIGURES
1 Functional Requirements for Self-Check Quiz System Prototype. 4
2 Functional Requirements for Self-Check Quiz System Revised Version. 6
3 Appearance of the Biofilm Hypertextbook Quiz Delivery System With
No Specific Quiz Loaded Initially. 9
4 Appearance of the Biofilm Hypertextbook Quiz Delivery System With
a Specific Quiz Loaded Initially. 10
5 An Example of the File (Quizzes.xml) That Specifies the Available
6 A Sample Three-Question Quiz As It Appears in the Hypertextbook
Quiz Application and the Corresponding XML File. 13
7 A Sample of the Feedback Generated by the Quiz Application for the
First Question in Figure 6, in Which the User Selected Only the First
Two Distractors. 16
This paper will discuss a web-based quiz delivery system for Biofilms: The
Hypertextbook. Hypertextbooks differ from traditional textbooks by including interactive
resources that can enhance student learning. While developed specifically for the biofilms
hypertextbook, the quiz delivery system uses standard technologies and a modular
design, so hypertextbooks containing different subject matter or other types of websites
can easily add it to their offerings. The quiz delivery system uses Ajax (Asynchronous
more responsive to user requests. Online self-check quizzes can significantly enhance
student learning and retention by mitigating the effects of student stress and enabling
students to make adjustments before they take a graded assessment. The prototype quiz
delivery system provided immediate feedback for each question. The feedback included
both the correct answer and an explanation of why each distractor was correct or
incorrect. A revised version, based on stakeholder input, includes the following
improvements: allowing an arbitrary number of distractors for each question, enhancing
the user interface, adding screen shots to the instruction page, permitting images as well
as text to appear in questions, improving cross-browser functionality, and enabling entry
to the quiz delivery system with a specific quiz loaded. We used the Google Web Toolkit
(GWT) to develop the revised version. GWT enables programmers to write web
applications using the Java programming language. The project includes a guide for
website administrators, and the application contains an instruction page with screen shots
for quiz takers. Future work could include adding a database component to store results
and verify usernames and passwords, a widget that instructors or other authorized users
could use to add quizzes, and a secure environment for administering for-credit quizzes.
This paper discusses the development of a web-based quiz delivery system for
Biofilms: The Hypertextbook . Hypertextbooks differ from traditional textbook by,
among other things, including interactive resources that can enhance student learning.
The quiz delivery system is one of these resources. It uses Ajax (Asynchronous
that can make web applications more responsive to user requests.
The Center for Biofilm Engineering (CBE) at Montana State University is
targeting Biofilms: the Hypertextbook as a long-term education initiative . A biofilm is
“a complex aggregation of microorganisms marked by the excretion of a protective and
adhesive matrix” . While, I developed the quiz delivery system specifically for the
biofilms hypertextbook, the application can also work with hypertextbooks containing
different subject matter.
In a review of the literature, Rößling et. al.  found that the term
“hypertextbook” has no standard definition. For this project, we define hypertextbook as
a teaching and learning resource delivered via standard web browsers that extends
traditional textual presentations by adding pictures and illustrations; video clips; audio;
and interactive, active learning visualizations of key concepts , .
Active learning tools and models are key features of the biofilms hypertextbook.
The tools and models extend the capacity for teaching and learning by requiring students
to become actively involved in the learning process .
An additional opportunity for enhancing the active learning capacity of the
biofilms hypertext is the inclusion of self-check quizzes linked to content sections.
Online quizzes can significantly enhance student learning and retention by mitigating the
effects of student stress, allowing students to “practice” before graded tests and quizzes,
and motivating students to acquire the expected skills .
Self-check quizzes are a form a formative evaluation. They provide students with
feedback on how well they understand the material before the end of the unit. Thus, self-
check quizzes enable students to make adjustments before they take the assessment for a
grade at the end of the unit, when it is often too late to improve learning. Self-assessment
quizzes can strongly benefit student learning .
Summative quizzes for credit present security issues when students print
questions, feedback, and correct answers; have others take quizzes for them; use outside
resources; or work with friends. Self-check quizzes avoid the need to address these
security issues, since the self-check quizzes are formative rather than summative.
Students are encouraged to use outside resources, such as the hypertextbook, and work
with other students, both of which can foster further opportunities to enhance student
INITIAL DESIGN CONSIDERATIONS AND REQUIREMENTS
In developing the quiz delivery system, we wanted to make it respond quickly to
experiences on the Internet by making interactive web applications more responsive, so
they feel more like traditional desktop applications , . When the user interacts with
a traditional, non-Ajax, web application, he has to wait for the server to respond—a pause
resulting in the dreaded blank screen, progress bar, or hourglass. Ajax enables the server
to do its work behind the scenes, so the user can continue to interact with the web page.
We used Ajax to develop the self-check quizzes because it enhances user
experiences and relies on standards-based technologies, including XHTML (Extensible
Hypertext Markup Language), CSS (Cascading Style Sheets) the Document Object
Another key design issue was to enable students to take the quiz as many times as they
like and to provide them feedback on their answers, both of which enhance student
The requirements we used to develop the first version of the biofilms
hypertextbook quiz delivery system are in Figure 1.
Figure 1: Functional Requirements for Self-Check Quiz System Prototype
Name: FR-1: Quiz Link Page Name: FR-4: Interactive Quiz Screen –
Summary: Entry into the application will be Corrected Question
through a web page that contains links to each quiz Summary: When the user has finished answering
and a link to the instruction page. the question, he clicks the “Check Answer” button,
Rationale: Each section of the hypertextbook, in and the screen dynamically displays the corrected
which a quiz is associated, will link to the quiz content of that particular question.
application’s main page. This will ease Rationale: By using dynamic content, the quiz
maintenance issues as developers move and reorder pages provide the user with a richer experience
parts of the hypertextbook. while utilizing the quiz system. He will see
Requirements: The quiz application’s introduction feedback to his answers (right or wrong) as well as
displays links to each quiz that is available, as well feedback about the other possible answers. The
as a link to the Quiz Introduction Page. feedback explains why a particular answer was a
correct choice or not.
Name: FR-2: Quiz Introduction Page • Ajax and HTML provide the means to display
Summary: The introduction page opens in a new the corrected answer content dynamically
window (or tab) and explains how to use the quiz when the user clicks on the “Check Answer”
Rationale: New quiz users need instruction in using • A script will parse the XML document to
the quiz system before they continue on to the display the correct answers and feedback
actual quiz. Return users may need the introduction content. The feedback for each answer will
page to refresh their knowledge before taking the appear beside each choice.
quiz. • Correct answers will turn green and incorrect
Requirements: The introduction screen is a static answers will turn red.
HTML page that includes instructions about taking • A “Next Question” button will provide a way
the quiz and a button to close the window (or tab) for the user to move to the next question.
when they are finished reviewing the instructions.
Name: FR-5: Display Quiz Results
Name: FR-3: Interactive Quiz Screen – Question Summary: When the user reviews his answers to
Only the last question, the application will display a
Summary: The interactive quiz screen displays one “View Results” button rather than the “Next
question at a time in multiple-choice format. Users Question” button. Clicking the “View Results”
select check boxes to choose answers. button will take the user to a page that displays the
Rationale: When a user has only one question in results of all the questions. From the results page
front of him, he is less distracted and can better the user has the option of closing the quiz or
concentrate on the question content. This is printing the results.
particularly important when the user has answered Rationale: The quiz results page gives the user a
the question, and the screen dynamically displays comprehensive list of her quiz results. The option
the corrected version of the question. to print the results allows the student to print a
Requirements: hardcopy for future reference or study.
• There will be a single HTML page that reads Requirements:
XML formatted documents from the server to • All individual question results will appear on
retrieve questions that appear on the question one screen.
screen. • “Close” and “Print” buttons will be supplied.
• The initial page will include the question, with
the multiple-choice answers beneath. Each
answer has a check box associated with it.
• Each HTML page has a “Check Answer”
• When the user clicks the “Check Answer”
button, the application moves to the Interactive
Quiz Screen – Corrected Question state.
REVISED VERSION DESIGN CONSIDERATIONS AND REQUIREMENTS
After testing, deploying, and getting feedback from the biofilms hypertextbook
development team and stakeholders, we decided to make the following changes to
improve the quiz delivery system:
• Eliminate the problem of some buttons working differently with different web
• Eliminate the limitation of exactly five choices per question by allowing an
arbitrary number of choices.
• Improve the appearance of the user interface.
an administrator adds a new quiz or reorders chapter or section numbers.
• Add screen shots to the instructions page to make the instructions clearer.
• Enable the ability to have images as well as text in questions.
• Enable two entry points to the quiz application. One entry point loads a specific
quiz contained as parameters appended to the hyperlink that directs the user to the
quiz application. The other entry point opens the quiz application with no quiz
In response to these issues, we redesigned the quiz delivery system and
implemented a new user interface. The requirements for the revised version of the quiz
delivery system, based on the feedback, are in Figure 2.
Figure 2: Functional Requirements for Self-Check Quiz System Revised Version
Name: FR-1: Quiz Page can select to indicate that he believes that choice is
Summary: The quiz application will consist of one correct
main HTML page, with a link to a static Rationale: When a user has only one question in
instructions page. front of him at a time, he is less distracted and can
Rationale: Links from appropriate locations within better concentrate on the question content. This is
the hypertextbook will direct users to the quiz particularly important when the user has answered
application’s main page. The links may contain the question, and the screen dynamically displays
parameters that specify a specific quiz to load or the corrected version of the question.
may be parameterless, in which case the application Requirements:
opens with no quiz loaded initially. Each section of • The single HTML page will change
the hypertextbook in which a quiz is associated will dynamically in response to XML documents
link to the quiz application’s main page. This will retrieved from the server.
ease maintenance issues as the administrator moves • Each tab will include one of the questions, an
and renumbers parts of the hypertextbook. optional image, and multiple choice distractors
Requirements: The Quiz Page will contain a link to beneath. Each choice has a check box
an Instructions Page and a means of selecting and associated with it.
taking quizzes. • Each tab has a “Check Answer” button.
• When the user clicks the “Check Answer”
button, the current tab moves into the Quiz
Name: FR-2: Quiz Instructions Page Panel—Corrected Question state.
Summary: The introduction page opens in a new
window (or tab) and explains how to use the quiz
application. Name: FR-5: Quiz Panel—– Corrected Question
Rationale: New quiz users need instruction in using State
the quiz system before they continue on to the Summary: When the user has finished answering
actual quiz. Return users may need the introduction the question, he clicks the “Check Answer” button,
page to refresh their knowledge before taking the and the tab dynamically displays the corrected
quiz. content for that particular question.
Requirements: The instruction page is a static Rationale: By using dynamic content, the quiz
HTML page that includes instructions and screen pages provide the user with a richer experience. He
shots explaining how to take a quiz. will see feedback for all the choices (whether he
answered the choice right or wrong). The feedback
will include whether the user answered the question
Name: FR-3: Quiz Selection Panel correctly and an explanation for each choice.
Summary: The application will contain a panel that Requirements:
will enable the user to select the chapter, section, • Ajax and HTML provide the means to display
and level of the quiz to load. the corrected answer content dynamically
Rationale: The user can easily choose any available when the user clicks on the “Check Answer”
Requirements: The application will construct a tree • An XML document will contain the correct
in the quiz selection panel when the application answers and feedback content. The feedback
loads by parsing an XML file that contains for each answer will appear beside each
information about the chapter, section, and level of choice.
all existing quizzes.
• Correct answers will turn green and incorrect
answers will turn red.
• The application will deactivate the check
Name: FR-4: Quiz Panel—Question Presentation
boxes and remove the “Check Answer” button
in the Corrected Question State.
Summary: The interactive quiz panel displays one
quiz with tabs for all of the questions in that quiz.
Each tab contains one question, with the text of the
question followed by an optional image, followed
by an arbitrary number of choices. Each choice
contains a corresponding checkbox that the user
One major drawback of Ajax applications is that, without special programming
considerations, the browsers “Back” and “Forward” buttons may not enable the user to
navigate through information in the way she is accustomed in other web situations . To
help mitigate this pitfall and for other advantages explained below, we chose to
implement the advanced version of the self-check quizzes web application using the
Google Web Toolkit (GWT) .
GWT enables programmers to write web applications using the Java
programming language. GWT has widgets that enabled us to spruce up the user interface.
browsers  . In developing the self-check quiz application, I used the GWT’s plug-in
for the Eclipse integrated development environment . Advantages of using Eclipse
include code highlighting, code suggestion and completion, and incremental compiling.
Writing code in Java has additional benefits in that Java is strongly typed, object-
oriented, has an extensive API, and has support for unit testing.
Instructions for taking the quizzes are included on the “Instructions” link in the quiz
application. The instructions contain detailed information for the user, including screen
shots. The remainder of this section provides a guide for the hypertextbook administrator.
I sought to build the quiz delivery system as a modular component of the biofilm
hypertextbook, so the code for the quiz application would not require refactoring to work
with future changes to the structure of the hypertextbook. Communication between the
quiz delivery system and the rest of the hypertextbook is limited to the links that direct
users to the HTML page that loads the quiz application.
The link to the quiz application can take two forms:
1. A link to the quiz application with no specific quiz loaded initially
2. A link to the quiz application with a specific quiz loaded initially
A link to the quiz application with no specific quiz loaded takes no parameters. For
example the URL might look like, http://biofilmbook.com/quizzes. Figure 3 shows how
the application would initially appear if a link with no parameters directs the user to the
Figure 3. Appearance of the Biofilm Hypertextbook Quiz Delivery System With No
Specific Quiz Loaded Initially.
A link to the quiz application with a specific quiz loaded takes parameters for the
chapter, section, and level. For example the URL might look like,
http://biofilmbook.com/quizzes?chapter=001§ion=001&level=green . The
parameters are appended to the general URL and follow the “?” character. Note that the
parameters are in lower case, appear in key-value pairs, and that the chapter and section
numbers must contain three digits (including leading zeros if needed). Figure 4 shows
how the application would initially appear if a link with parameters directs the user to a
specific quiz chapter, section, and level.
In both scenarios the user can employ the quiz selector (left side of the window)
to select or change the chapter, section, and level of the quiz any time after the
XML files contain the content of the quizzes, so there is no need to change or
modify the code of the quiz delivery system when the hypertextbook administrator wants
to add, delete, reorder, or modify quizzes. The quiz delivery system uses two types of
1. Exactly one file (Quizzes.xml ) that specifies the quizzes that are available (by
chapter, section, and level)
2. Files that specifying the content of the quizzes, which exactly one XML file
for each quiz
Figure 4. Appearance of the Biofilm Hypertextbook Quiz Delivery System With a
Specific Quiz Loaded Initially.
Figure 5 shows an example of the Quizzes.xml file. It contains a <chapter>
element for each chapter that contains at least one quiz. The <chapter> element has an
“id” attribute, which takes an integer value (without leading zeros). Nested within each
<chapter> element, are one or more <section> elements. Each <section> element has an
integer “id” attribute, as well.
Nested within each <section> element are one or more <level> elements, which
can have exactly one of the following values: green, blue, or black. The XML file in
Figure 5. An Example of the File (Quizzes.xml) That Specifies the Available Quizzes.
<?xml version="1.0" encoding="UTF-8"?>
Figure 5 indicates that the following quizzes are available.
Chapter 1, section 1, green level
Chapter 1, section 1, blue level
Chapter 1, section 1, black level
Chapter 1, section 2, green level
Chapter 1, section 3, green level
Chapter 2, section 1, blue level
Names for the files that specify individual quizzes take on the following format:
“XML_” [three digit chapter number]”_” [three digit section number]”_” [level]”.xml”
Below is the name of the file for the quiz for chapter 1, section 1, green level:
Note that the leading XML must be in upper case, while the other characters are all
lower case. Also, note that chapter and section numbers must contain three digits. Thus,
they may contain leading zeros.
Figure 6 shows a side-by-side view of a three-question quiz as it appears in the
hypertextbook quiz application and the xml file that defines the quiz.
The top-level element in the XML file is <quiz>. The elements that are direct
children of the <quiz> element include: <type>, <chapter>, <section>, <level>, and
<question>. Exactly one of each of the first four kinds of elements appears, while one or
more <question> elements can appear. The <type> element provides for possible future
expansion to indicate different types of quizzes. The <chapter>, <section>, and <level>
elements, respectively, specify the chapter, section, and level of the quiz. The <question>
elements each specify one question in the quiz.
Figure 6 A Sample Three-Question Quiz As It Appears in the Hypertextbook Quiz
Application (Left) and the Corresponding XML File (Right).
<?xml version="1.0" encoding="UTF-8"?>
<question_text>What conditions must be met in
order for a conditioning film to
<explanation>Yes.Surface is needed</explanation>
<explanation>Yes. Water is needed</explanation>
<explanation>Yes. DOM needed</explanation>
<question_text>In which of these growth curve
stages (shown below) are the planktonic cells
most similar to cells in a
<explanation>No. Not lag phase.</explanation>
<choice_text>Log or exponential
<explanation>No. Not log phase.</explanation>
<explanation>No. Note death.</explanation>
<question_text>Which of the following strategies
would you consider to have the best chance of
preventing or eliminating biofilm infections in
patients who have received an artificial implant
such as this prosthetic hip
<choice_text>Heavy metal disinfectant treatment
of the implant prior to
<explanation>No. Not heavy metals.</explanation>
<choice_text>Quorum sensing inhibitors that
<choice_text>Compounds that encourage premature
detachment of the biofilm.</choice_text>
Each <question> element contains three types of direct child elements:
<question_text>, <image>, and <choice>. There is exactly one <question_text> element,
which specifies the text of the question.
There is exactly one <image> element. The <image> element can contain the
value “none,” if there is no image for the question. (Note that each character in the word
“none” is lower case.) If an image is part of the question, the exact name of the image
file, including the extension, appears within the <image> element. In Figure 6, the first
question has no associated image, while the second and third questions do have images
associated with them. Note that the hypertextbook administrator must place the actual
image files in the “images” folder in the quiz application, in order for the application to
load the images into the quiz.
There may be one or more <choice> elements. Each choice element represents
one of the distractors for the question. Each choice element has three direct child
elements: <correctness>, <choice_text>, and <explanation>. There is exactly one of each
of the three child nodes within each choice element. The <correctness> element can have
a value of “true” or “false,” and indicates whether the distractor is correct. The
<choice_text> element contains the text for the distractor. The <explanation> element
begins with the phrase “Yes.” or with the phrase “No.” "Yes" means that this distractor is
correct. “No” means that the distractor is incorrect.
The quiz application uses the <correctness> and <explanation> elements to
provide feedback to the user after she clicks the “Check Answer” button for each
question. Figure 7, shows the results of a user who selected just the first two distractors in
the first quiz question in Figure 6. Since the correct answer for the question included all
of the distractors, the application marked the first two check boxes correct with a green
color, and the second two check boxes incorrect with a red color. The explanation for
each of the distractors also appears.
The website administrator must place the Quizzes.xml file and the xml files for
the individual quizzes in the application’s xml folder in order for the application to
function as expected.
Figure 7 A Sample of the Feedback Generated by the Quiz Application for the First
Question in Figure 6, in Which the User Selected Only the First Two Distractors.
The prototype version originally interacted with a database on the server to verify
usernames and passwords, access quizzes, and store quiz results. I removed the database
interaction due to time constraints and the nature of the hosting service where the
biofilms hypertextbook currently resides. A future project could involve implementing
the database and server-side code for the quiz delivery system.
I also began creating a web-based widget that instructors or other authorized users
could use to write quizzes. The widget would verify usernames and passwords and then
provide an interface for entering questions into the hypertextbook. The widget would
work by converting the information the user entered into a properly formatted XML file
and then storing the XML file in the quiz delivery system’s database. I abandoned work
on this part of the application for the same reasons I mentioned above—time constraints
and the nature of the hosting service.
Another interesting extension to the project would be the creation of a secure
environment in which instructors could administer for-credit quizzes. As mentioned in
the Background section of this paper, for-credit quizzes pose more security issues than
 Cole, J. and Foster, H. 2007. Chapter 5: Quizzes in Using Moodle: Teaching with
the Popular Open Source Software, 2nd edition. O’Reilly Community Press.
 Cunningham, A.B., Lennox, J.E., and Ross, R.J. Eds. 2001-2008 Biofilms: The
 Cunningham, A.B. and Ross, R.J. Project Overview Information Page. Biofilms:
The Hypertextbook. Center for Biofilm Engineering.
 The Eclipse Foundation. http://www.eclipse.org/
Associates. ISBN 0-596-10199-6.
 Garret, J.J. 2005. Ajax: a new approach to web applications. Adaptive Path.
 Google Web Toolkit. 2009. Google.com. http://code.google.com/webtoolkit/
 Google Web Toolkit. Product Overview.
 Rößling, G., Naps, T., Hall, M., Karavirta, V., Kerren, A., Leska, C., Moreno, A.
Oechsle, R., Rodger, S., Velàzquez-Iturbide, J. A. and Urquiza-Fuentes, J.
Merging interactive visualizations with hypertextbooks and course management.
ACM SIGCSE Bulletin, 38 (4), 123–138, December 2006.
 Ross, R.J. and Grinder, M.T. 2002. Hypertextbooks: Animated, Active Learning,
Comprehensive Teaching and Learning Resources for the Web. In Software
Visualization, number 2269 in Lecture Notes in Computer Science, S. Diehl, ed.
 Sosnovsky, S., Shcherbinina, O., and Brusilovsky, P. Web-based parameterized
questions as a tool for learning. In: Rossett, A. (ed.) Proc. of World Conference
on E-Learning, E-Learn 2003, (Phoenix, AZ, USA, November 7-11, 2003),
 Woit, D. and Mason, D. 2001. Effectiveness of Online Assessment, Inroads, The
SIGCSE Bulletin, 35.
 Wiktionary, the free dictionary. 2009. Biofilm Entry Page.