• welcome
• administration
• schedule
• project
• documentation

In this lab you will write your own functions to grade an online quiz and validate required inputs for a form. The HTML file that contains the form with the quiz is given to you. This file links to a JavaScript file, code.js, which you can download here. Notice that code.js is only a template, which we will fill in today. We will write JavaScript code that:

1. Calculates and reports a score for the quiz, based on the correct answers and the user's input. This happens when the user clicks on the "Check answers" button.
2. When the user clicks on "Submit", the form is validated. If it passes validation then an email is sent to your account, with the form's contents. In the opposite case, submission is blocked.
3. When the reset button is clicked, the form's fields are set back to their initial state.

Task 1

• Examine the HTML code carefully, in the form.html file you just downloaded, and make note of the naming conventions. Here's one helpful hint: in the Web developer toolbar, select Information > Display ID and Class Details. That will show you this window:
  
  The yellow highlighted text indicates the different IDs set up in the form.
• Modify the value of the _recipient input, so that the form will be mailed to your own email address.
• Open and check the template code.js file. You will add all the functions to validate the form and grade the quiz here.
• In the form required inputs are marked with a "*".

Task 2: Grade the Quiz

In code.js, define the gradeQuiz() function that grades the quiz.

The area to the right of the button is called quiz_result (quiz_result is the ID of that area of the page). Here is the code that creates quiz_result alongside the form itself:

<input type ="button" value ="Check answers" onClick = "gradeQuiz();"> <span id="quiz_result" class = "message"> </span>

The score of the quiz will be shown next to the button, like this:

One answer correct
Two answers correct
All three answers correct

The correct answers will be given to you in class. As an example, here is how you can check the correctness of the check-box question:

           
//grade the (check-box) third question
if ((document.quizForm.q3[1].checked) && (document.quizForm.q3[2].checked) && 
(!document.quizForm.q3[0].checked)) {
   tally = tally + 1;
}
                

The function presents the result on the page, by setting the innerHTML property of the quiz_result span, like:

         
document.getElementById("quiz_result").innerHTML = " Perfect Score!"; 
           
           

gradeQuiz() is called when the user clicks on .

Task 3: Reset the form

In code.js, define a resetForm() function that resets each question in the form to its initial state (i.e., red asterisks and initial message restored).

     
document.getElementById("name_asterisk").style.visibility="visible";

document.getElementById("quiz_result").innerHTML = ""; 
      

The event handler for the Reset button calls this function.

Task 4: Validate the Form

In code.js, define a validForm() function that validates the two required inputs: the user's name and whether they have taken a CS course. When the user clicks on the Submit button, validForm() is called. Our validation will be modular: We will define separate helper functions to validate each type of question. The validForm() function will just call the helper functions.

The following defines a valid input:

• The Name text input is valid if not empty:

              
  if (document.quizForm.studentName.value != "") {
     document.getElementById("name_asterisk").style.visibility = "hidden";
     return true;
     }
     

• The Have you taken a CS course question is valid if a radio button has been checked:

              
  if (document.quizForm.course_taken[0].checked || 
      document.quizForm.course_taken[1].checked) {
     document.getElementById("course_asterisk").style.visibility 
     = "hidden";
     return true;
  }      
    

• When an input is validated, the "*" marking it should no longer be visible, e.g., with the name input here:
  
  and with the course input here:
  
• When required input does not validate, the "*" should remain visible, e.g., with the course input and name input, respectively, in the above images. Here is a shot with both inputs invalid:
  
• When both required inputs are validated, the red text next to the Reset button should change to a personalized message which uses the name entered on the form (i.e. "Thanks for the info, Wendy!"):

  

  
  var validName = validateText();
  var validCourse = validateRadio();
  if (validName && validCourse) {
     document.getElementById("form_status").innerHTML = 
     " Thanks for the info, " + 
     document.quizForm.studentName.value + " !";
     return true;
     } 
          

  Finally, the contents of the form should be emailed to your email address.

  Here's a link to a working version of the form, and a link to the JavaScript code, with all the functions defined.