COP2840

Project #1: Interactive online quiz simulator

Due Sunday, March 3 2019 at 11:30 P.M. EST.

Implementing an Online Quiz

Develop and test an HTML document that present the surfer / student with a series of
multiple-choice questions. The answers for each question will be displayed as a set of radio
buttons. When done selecting the answers, the student will click on a “Grade the quiz!”
button, whereupon the onclick event handler will call a function that processes and displays
the student’s score.

For a sample quiz, you’ll use three questions on the topic of the first Apollo moon mission.
Figure below shows the resulting display. You’re expected to take number of things you
learned in chapter 4-6 and put them together to create an interactive online quiz.

Note that although you could use only one long form that includes all the questions and
answers shown, it is recommended that you use one form for each question, plus a form
named answersForm that defines the click button, the text boxes to display the correct
answers, and the text box to display the student’s score. Using a separate form for each
question makes the radio button code a little simpler to write.

You also must use the same name for each question’s set of radio buttons, choiceRB, to label
the possible choices for each question. You can do this without the browser getting confused
because each set of radio buttons belongs to a different form, so the complete name for each
radio button is unique. For example, document.question1.choiceRB[0] refers to the first
radio button for the first question, while document.question2.choiceRB[0] refer to the first
radio button for the second question. Note if you had put all the questions in one form, then
you would have to use different names for each set of radio buttons.

Grading the Quiz

The onclick event handler of the click button in the answersForm calls a function (e.g.,
processScore() ). This function will check the student’s radio button answer against the
correct answer for each question and tally the total number of correct answers. To check form
elements like radio buttons, you have to pass each form as a parameter to the function—one
for each question, plus the answerForm—all of which the function needs to access. The
function call would be:

onclick = “processScore(question1, question2, question3, answersForm)”

The first line of the function declaration that matches this call would be something like:

Function processScore(q1, q2, q3, ansForm) {

//etc.
}

1
The processScore() function will do three things:

1. Declare a local variable named score and initialize it to 0. This variable will keep
track of the student’s score.
2. Use a series of conditional statements to check the student’s answer for each question
(as recorded by the radio button the student checked) against the correct answer. If
they match, one point is added to the score variable.
3. Display the student’s total score and the correct answers for each question.

2
function processScore(question1, question2, question3, answersForm) {

/// Initialize a variable to keep track of the score

///Next, check each answer the user gave and add 1 to score if correct
///The correct answer for Question 1 is radio button 1
///(i.e., answer b

///The correct answer for Question 2 is radio button 0

///(i.e., answer a

///The correct answer for Question 3 is radio button 2

///(i.e., answer c

///Display the resulting value of score in the score box

///Display the correct answers

} //end of function processScore

Important notes:

1. Total points: 10
2. Automatic 5 points deducted for files that do not work or produce incorrect outputs.
3. Put your name in the source files as a comment. Two points will be deducted if the file
does not have your name at the top in comments.
4. Submit HTML, Cascading Style Sheet, and JavaScript source files online via the
Assignments link.
5. Email me your questions at hardanis@palmbeachstate.edu.