Work | MLIS Portfolio | Lit & Art | Outdoors & Travel | Personal | Home  

Home >> MLIS >> 246 >> Minor Assign. 1 >> Notes
LIBR 246

Irish History Quiz Notes

Overview

The Irish History Quiz is an XHTML document containing both standard XHTML coding and JavaScript for interactivity. The quiz presents a set of ten questions related to Irish history, each with three possible answers, and the option for the user's answers to be scored, with a percentage correct and all incorrect answers noted. The user can opt to retake the quiz if he or she has chosen wrong answers for any of the questions.

Functions, Event Handlers and Variables

The JavaScript contained in the document makes use of the following:


Functions

Event Handlers

Variables


What is Happening

In the XHTML document, the <head> area contains meta elements providing author, contributor, title, keyword, abstract and a JavaScript (see below). The <body> contains eleven form elements, "form1"-"form10" and "total." Each of the "form1"-"form10" consists of a checkbox (for error reporting), a text question, and a "select" list of three options, with values 1-3 (the default "Choose an answer" has a value of 0 - see below). The user chooses one of the three possible answers. The last form, "total," contains two buttons with JavaScript event handlers (onClick), "Submit" and "Retake Quiz," which respectively initiate the JavaScript program in the document head or reload (reset) the page. Finally, a set of three text boxes are filled in by the script upon the user clicking the "Submit" button, providing the number of correct answers, the total number possible, and a percentage correct. If the user has missed filling on or more of the forms, alert boxes will pop up to warn the user that "Question n was not answered;" no score will be provided until the user has selected answers for all questions.

Detailed Look at the JavaScript

The JavaScript is triggered by the buttons contained within the "total" form near the end of the document.

  1. User chooses answers and clicks "Submit"
  2. Values for all variables result1-result10 (initially set to zero by:
        var resultN=document.formN.answerN.selectedIndex
    are checked for values other than the initial value (the "if (result N==0)", which invoke the:
        alert ("Question n was not answered")
    and the user needs to choose answers for question(s) N.
  3. If the user has chosen an answer for each question, the "else" portion of the script is invoked. Each "if" statement checks to see that resultN (from the selectedIndex within each form) is the same as the given value; if true, the value of variable "i" (initially set to 0 in the first variable statement) is incremented by one; if not, "i" retains it previous value.
  4. The total score (document.total.score.value) is defined as the value of "i" after all the "if" statements have been calculated. This value is output to the user in the statement:
        You got <input type="text" name="score" value="" size="5" /> out of <input type="text" name="outof" value="10" size="5" /> correct.
    The "out of," or total value is already set at "10" and is simply quoted in the textbox.
  5. This value is then divided by 10 and the result multiplied by 100 to give a value for the variable "per," which in turn is defined as the value of document.total.percent.value. This value is output to the user in the next statement:
        Your Score: <input type="text" name="percent" value="" size="9" />       %
  6. Finally, the next set of "if" statements in the script put change the checkbox (previously unchecked by default) to "checked='yes'" if the resultN does not exactly match the value given for each statement.
  7. The user can also choose to click the "Retake" button, which invokes an inline JavaScript function location.reload() with the event handler "onClick." This function reloads the document and resets all variables to their initial state.