CREATING AN ONLINE QUIZ
USING JS QUIZ MAKER

Dr. Richard L. Bowman
Academic Computing, Bridgewater College, Bridgewater, VA, USA 22812

I. Introduction

Online quizzes or self-tests can be a useful addition to the repertoire of tools available for an instructor who wishes to web-enhance a course. This tutorial gives directions for creating online quizzes from the modules in the JS Quiz Maker package.

JS Quiz Maker can make quizzes:

If you are using version 1.13 or an earlier version of JS Quiz Maker, including an un-numbered or un-named version of JS Quiz Maker, please update your files to version 3. Versions 2 introduced a more flexible and reliable quiz engine and a more user-friendly interface for producing the quizzes. Version 3 provides updated directions and allows the use of randomly selected quizzes from a group of similar quizzes constructed by the instructor.

CAUTIONS

  1. An online quiz is inherently an insecure method of obtaining grades, unless it is conducted only in a proctored situation. However, I have discovered that such online quizzes do have a lot of motivational power. When I teach in a computer classroom, I actually make the quizzes "live" only right before  I enter the class, and proctor the quizzes myself at the beginning of class. I then do not accept quiz answers that are submitted later. As another example, one professor has made extensive use of these online quizzes as practice tests for students who will later take a certification exam.
     
  2. In addition, the procedure used by JS Quiz Maker to construct these quizzes or self-tests is not completely secure. The vast majority of students will not know how to get to the list of correct answers, but a student with extensive experience in JavaScript authoring can probably locate and examine the questions and the answers before taking the self-test. So use these quizzes only as a motivation to read the assigned readings and to be prepared for class discussions. Thus the instructor should only make these online quizzes a minor part of any grading scheme.

II. Download and unpack the latest JS Quiz Maker files.

  1. Locate or create a folder on your computer where you wish to work with JS Quiz Maker. JS Quiz Maker is a relatively small freeware program, so load it on as many computers as you wish--in your office and at home. The easiest option is to place the whole package in its own folder inside the folder for each course or other situation for which you plan on making quizzes or self-tests.
     
  2. The whole package can be downloaded as one zipped file or as its separate files. Go to the download page to obtain the necessary files. After completing the download of the zipped folder, unzip all of the files.
     
  3. Begin making quizzes by opening the file "1-Start-JSQM.html" and following its instructions.
     
  4. Note: JS Quiz Maker can be used free of charge and the look-and-feel of the associated web pages can be freely modified for your purposes. However, please retain the code and link back to the JS Quiz Maker site through the "Powered by JS Quiz Maker" graphic. If you have any questions or suggestions, contact the author, Richard L. Bowman.

III. Modify the self-test index web page and the Form Notice web page as desired.

The self-text index page is simply a location from which the actual quizzes can be linked. Modify this web page to fit in your course web page design or abandon it altogether. All that is needed is a link to the actual quiz or self-text on some page so that students can access the quiz. That is, a link to "selftest.html" (or whatever you call the actual quiz web page file) is all that is really necessary.

To begin with, the FormNotice web page can be used as it is. This is the page that will be displayed after a student has successfully submitted a quiz for grading. It can be tailored to each instructor's situation.

IV. Edit the self-test web page design.

The "selftest.html" file is the actual web page that displays the quiz questions and grades them. It may be tailored to your web site design in a WYSIWYG web editors such as Microsoft's FrontPage. Here is how the page displays in FrontPage 2003.

Note that none of the questions are displayed. That is perfectly fine. The material at the top of the page and at the bottom, including the background color or image, can be edited.

Be careful not to delete any of underlying JavaScript code. In FrontPage these are represented by rectangular graphics such as these . Also, do not change any of the material inside the dotted box that represents the web form itself.

The web page design may also be modified through the HTML code itself, if one is so inclined. However, the same cautions apply. Do not modify any of the web form items or any of the JavaScript code, or the questions may not display properly or the quiz be graded correctly!

V. Carefully modify the self-test web form itself.

With the web page still in FrontPage, continue editing by right-clicking in the form area and selecting "Form Properties" from the drop-down menu. Press the "Options" or "Settings" button and modify the "Action" line to have your email address in place of "rbowman@bridgewater.edu".

Also modify this line so that the portion of it that reads "/cescc/acadcomp/JSQuizMaker/FormNotice.html" will now read to be the location on your web server of where the FormNotice web page will be located. For my PHYS 110 course at Bridgewater College, that location is "/~rbowman/phys110/FormNotice.html". DO NOT MODIFY anything else on this "Action" line.

Press the OK buttons as necessary to go back to editing the web page itself.

Version 3 allows the instructor to make a number of similar quizzes and to have the quiz that is presented to a user be chosen from this pool of quizzes. By default, JS Quiz Maker is shipped with only one quiz being presented to all persons taking the quiz. To have more than one quiz in the pool, the JavaScript code itself must be modified.

In FrontPage click on the "Code" link at the bottom of the edit window. When the HTML code (including the JavaScript code) is displayed, move to the 25th line, counting blank lines as well as lines of text. This line will read as below.

  var number_of_quizzes = 1

Change the one to the number of quizzes in the quiz pool, and then save the "selftest.html" file.

Note: When new quizzes are created, the number of available quizzes may be changed as desired and the material at the top and bottom of the page may be edited, but in general the "Action" line will not have to be changed.

For users from outside of the Bridgewater College campus, be aware that the "Action" line should be modified as appropriate for your institution. There are many different scripts used on different web servers to email web form results to web authors. Check with your Internet Service Provider (ISP) or the information technology staff at your institution to see how the "Action" line should be changed to access the particular script running at the location of your web pages.

The cgi script "mailformdata" that is used by Bridgewater College can be obtained from the Academic Computing site at Bridgewater College and may be copied and used freely on other systems. Find it at "Web Authoring For Interactivity Using JavaScript And Forms" site by selecting the "Creating Forms" link and reading it, especially the beginning paragraphs. If you are trying out these online quizzes and want to use the "mailformdata" cgi script on the Bridgewater College server, that can be done, but note that the location of the Form Notice file is relative to the location of the "mailformdata" script. In this case, use the location of the Form Notice file at this site. That is, do not change this part of the Action line until you have a properly running "mailformdata" script on your server.

VI. Compose your true-false and multiple-choice questions into the JS Question Maker.

One of the biggest improvements in JS Quiz Maker, that began in Version 2 and continues in Version 3, is the introduction of an HTML-based JS Question Maker. Begin by double-clicking on the web page file, "question-maker.html." Then follow the instructions it gives.

In the end, the results of JS Question Maker will be copied and pasted into the file "questions-1.js" or "questons-2.js" or such like named file. Note that the name of this file must not be changed (unless changed in the HTML and JavaScript code of the "selftest.html" file), and it must be in the same web folder as the self-test file that was modified in steps IV and V above. To open the "questions-1.js" file, (or any similarly named file) so that the new questions can be pasted in, locate this file, right-click on its icon and select "Open With / Notepad" from the menu that shows up. All of the contents of this file should be deleted before pasting in the new data.

Another improvement that began in Version 2.1 is the ability to embed HTML formatting tags within the text of a question or answer. Thus if part of the text should be italicized, then simply place <i> at the beginning of the text to be italicized and end the text with </i>. Similarly, <u>...</u> can be used to underline text. Subscripting and superscripting can also be accomplished with the <sub>...</sub> or <sup>...</sup> pairs of HTML tags. The break tag <br> can also be used to format text such as poetry.

The table below illustrates how these tags may be used in questions (and their answers).

Text Entered in a Question Text Displayed in the Quiz
What is the domain of <i>f(x) = x / (x<sup>2</sup> - 1)</i>? What is the domain of f(x) = x / (x2 - 1)?
Who worte:<br>
"Two roads diverged in a wood, and I--<br>
I took the one less traveled by,<br>
And that has made all of the difference."
Who worte:
"Two roads diverged in a wood, and I--
I took the one less traveled by,
And that has made all of the difference."
When typing a title of a book should it be italicized (<i>Principia</i>) or underlined (<u>Principia</u>)? When typing a title of a book should it be italicized (Principia) or underlined (Principia)?

The "questions-1.js" type files can be opened and edited in Notepad, if small changes need to be made. However, note that JavaScript code is very sensitive to syntax and to punctuation. Thus special characters such as regular quotation marks and apostrophes must be entered in a special code form. See the chart below for how this can be done.

To Enter Type
double quotation mark &quot; (name code style)
apostrophe &#39; (number code style)
ampersand &amp;

This method can also be used to enter letters in other languages that are not present in our English alphabet. For a list of the name codes or the number codes (unicodes) to use for international characters, see http://hotwired.lycos.com/webmonkey/reference/special_characters/ . If other language characters will be used extensively in quizzes, contact Richard Bowman to have him modify JS Question Maker to facilitate the use of such characters.

NOTE: Users of JS Question Maker do not need to be concerned about how to type the special characters given in the table above. JS Question Maker automatically adds the necessary special coding for the user. The above procedure is only for those who are editing the "questions-1.js" type files directly.

Don't forget to save the "question" file when you are finished.

VII. Finally copy the files to the appropriate web directory.

The only files that must be present in the quiz web folder are the "selftest.html" web page, the "questions-1.js" file (and any similar files), and the "powered-by-JSQM.jpg" graphics file. The "selftest.html" web page can have whatever name you choose, but it must be linked either from a quiz index page or from some other page so that users can access it through their web browsers.

Give it a try!

For assistance, please contact me, Richard L. Bowman.

-- (c) 2002-06 (24-Aug-06)


Return to JS Quiz Maker Home

Go to Academic Computing at Bridgewater College

Created and maintained by: Richard L. Bowman (last updated: 24-Aug-06)