![]() |
CREATING AN ONLINE QUIZ
|
Dr. Richard
L. Bowman
Academic Computing, Bridgewater College, Bridgewater, VA, USA 22812
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
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.
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!
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.
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 | " (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. 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.
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)
Go to Academic Computing at Bridgewater College
Created and maintained by: Richard L. Bowman (last updated: 24-Aug-06)