a handy tool
Interactive Elements for Your Web Site
how to use javascript and shockwave

go to:


javascript multiple choice quiz
You can fairly easily add a multiple choice quiz to your web pages using JavaScript. The example we show is from the Cut 'N Paste JavaScript site (This site is gone, see our archived copy) and you can most likely find other packages from the other JavaScript sites we listed previously.

saw The most likely use for these quizzes is to provide practice. Because of the way JavaScript works, the answer key will always be accessible buried inside the web page's source HTML. You may choose to look for other technical solutions if you need grades to be sent to you or to be tracked.

On the other hand, this one is very easy to modify. You simple edit the HTML source code to enter your own questions, answers, and some weighting factors for how it is scored.

examples
For this workshop we have created a simple, 5 question quiz for you (try it now?). We have also used the same set of code for a retreat where we offered a trivia test in the event's web pages. If you use this code to create your own quiz, please let us know so we can share it as another example!

what you will need
The JavaScript Quiz includes one HTML file and a collection of GIF images that are used. In the next section we will start you off with the example quiz template file.

The original scripts came from the JavaScript Cut-N-Paste site (which is no longer available). You can find a relict version at:

http://www.mcli.dist.maricopa.edu/eye/code/jsquiz.zip

For editing the HTML file, we suggest that you use a plain text editor such as Simpletext for Macintosh or the Windows NotePad. Other HTML editor programs tend to gunk up JavaScript source code.

how to

  1. Create a folder on your computer and name it "jquiz"
  2. You will need to download the images used by the script:

    1. For Macintosh [14k BinHex archive]
      http://www.infohiway.com/javascript/mctest.hqx
    2. For Windows [13k Zip archive]
      http://www.infohiway.com/javascript/mctest.zip

    When decompressed, you should have a folder named "nr" containing 36 GIF images. Copy or move this folder inside your "jquiz" folder.

  3. Go to the sample quiz. (Note this web page will open in a second browser window so you can keep these instructions in view).
  4. Save the HTML source code for this page. Select Save as... from the File menu of your web browser. In the Save dialog box, be sure to select the option for Format to Source. The HTML file should be named "index.html" and stored in your "jquiz" folder.
  5. Open the "index.html" to edit with a plain text editor.
  6. The source code pretty much tells you how to modify each part of the script and all of the modification portions come at the beginning of the document. Note that in JavaScript, every line of instructions must end in a semi-colon (;). If you miss one, you may end up with errors. Here is a summary of the things you should edit:

    1. ttl="..."; == the title of your quiz as displayed on the page
    2. psco=100; == perfect score total, almost always is 100
    3. wrans=25; == how many points are subtracted for a wrong answer
    4. noans=25; == how many points are subtracted for no answer
    5. nr=5; == the number of questions to be asked
    6. ques[0]="Blah blah blah?";
      ques[1]="Blah blah blah?";
      :
      :
      ques[4]="Blah blah blah?";       == the text of each question. Note that in JavaScript, we start counting these lists of items at 0, so our five questions go from 0 to 4. Confusing? Yes, it is a programming thing! If you have fewer than 5 questions, you will have to remove some items from the template file; if you have more than 5, you will have to add some new lines and number them sequentially.
    7. cor="aebce"; == the answer key in the order of the questions, where "a" corresponds to the first answer choice, "b" to the second, and so forth. So the answer to the first question is the first answer choice ("a") and the answer to the second question is the fifth answer choice ("e")
  7. ans[0]="xxxx xxxx xxxx";
    ans[1]="xxxx xxxx xxxx";
    :
    :
    ans[24]="xxxx xxxx xxxx";     == the text of each answer choice, with 5 answer choices per question. So for a 5 question quiz, we will need 25 answer choice text items (again, numbered from 0 to 24). If you have fewer than 5 questions, you will have to remove some items from the template file; if you have more than 5, you will have to add some new lines and number them sequentially.
  8. The only other thing you may want to do is to add any HTML for information that you want to put at the top of the screen. There is an indicated location for this near the end of the template file (immediately following the <BODY> tag)
  9. Save your HTML file and then load it into your web browser to see if it works. If so, you should try experimenting with chanign some of the scoring parameters and/or adding new questions to the quiz.

what's next
Now you may select any of the other JavaScript examples from the navigation menu at the top of this page. Or as an alternative, you can compare the multiple choice quiz created with JavaScript to another one you can create using Shockwave, shown in Shockwave Example 2.