JS Quiz Maker

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:

that have true-false and/or multiple-choice questions.
that are graded immediately upon completion by students
that email the student's answers and grade to a designated instructor

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 2. Version 2 gives the quiz creator a more flexible and reliable quiz engine, and a more user-friendly interface for producing the quizzes.

Cautions

The procedure used by JS Quiz Maker to construct these quizzes or self-tests is not completely secure. Most 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.
In addition, any online quiz cannot be policed and is thus by nature a very 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 as 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.

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

Locating a folder on your computer where you wish to work with JS Quiz Maker. JS Quiz Maker is a 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.
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.
Begin making quizzes by opening the file "1-Start-JSQM.html" and following its instructions.
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.

To begin, 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. Version 2 can be edited in such WYSIWYG web editors such as Microsoft's FrontPage, but authors should be careful not to delete any of underlying JavaScript code. In FrontPage these are represented by rectangular graphics such as these . 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. Do not change any of the material inside the dotted box that represents the web form itself nor any of the small-box graphics that represent underlying JavaScript code.

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 (or another editor), 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 OK buttons as necessary and then save the "selftest.html" file. This is now your own self-test web page file.

Note: The name of this file and its header may be changed whenever a new self-test is created. However, nothing else needs to be nor should be changed in this web page file.

For users from outside of the Bridgewater College campus, be aware that this action line should be modified as appropriate for your institution. The cgi script "mailformdata" 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.

Enter your questions in JS Quiz Maker.

One of the biggest improvements in Version 2 of JS Quiz Maker 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.js". Note that the name of this file must remain "questions.js" (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.js" 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.

Include HTML tags as desired

An improvement 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 at the beginning of the text to be italicized and end the text with . Similarly, ... can be used to underline text. Subscripting and superscripting can also be accomplished with the ... or ... pairs of HTML tags. The break tag 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 / (x² - 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 file may be edited directly, but handle it with care.

The "questions.js" file 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	" (name code style)
apostrophe	' (number code style)
ampersand	&

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.

Don't forget to save this file when you are finished.

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

The only files that must be present in the web folder are the "selftest.html" web page, the "questions.js" file, and the "powered-by-JSQM-2.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.

Return to JS Quiz Maker Home

Go to Academic Computing at Bridgewater College

Created and maintained by: Richard L. Bowman (last updated: 19-Mar-05)

CREATING AN ONLINE QUIZ USING JS QUIZ MAKER