Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | Building an Online Quiz - JavaScript(JS)

Chapter: Internet & World Wide Web HOW TO PROGRAM - The Ajax Client - JavaScript: Arrays

| Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail |

Building an Online Quiz - JavaScript(JS)

Online quizzes and polls are popular web applications often used for educational purposes or just for fun.

Building an Online Quiz

 

Online quizzes and polls are popular web applications often used for educational purposes or just for fun. Web developers typically build quizzes using simple XHTML forms and process the results with JavaScript. Arrays allow a programmer to represent several possible answer choices in a single data structure. Figure 10.14 contains an online quiz consisting of one question. The quiz page contains one of the tip icons used throughout this book and an XHTML form in which the user identifies the type of tip the image represents by selecting one of four radio buttons. After the user selects one of the radio button choices and submits the form, the script determines whether the user selected the correct type of tip to match the mystery image. The JavaScript function that checks the user’s answer combines several of the concepts from the current chapter and previous chapters in a con-cise and useful script.

 

Before we discuss the script code, we first discuss the body element (lines 25–48) of the XHTML document. The body’s GUI components play an important role in the script.

Lines 26–47 define the form that presents the quiz to users. Line 26 begins the form element and specifies the onsubmit attribute to "checkAnswers()", indicating that the interpreter should execute the JavaScript function checkAnswers (lines 12–21) when the user submits the form (i.e., clicks the Submit button or presses Enter).

 

Line 29 adds the tip image to the page. Lines 32–42 display the radio buttons and corresponding labels that display possible answer choices. Lines 44–45 add the submit and reset buttons to the page.

 

We now examine the script used to check the answer submitted by the user. Lines 12– 21 declare the function checkAnswers that contains all the JavaScript required to grade the quiz. The ifelse statement in lines 17–20 determines whether the user answered the question correctly. The image that the user is asked to identify is the Error-Prevention Tip icon. Thus the correct answer to the quiz corresponds to the second radio button.

An XHTML form’s elements can be accessed individually using getElementById or through the elements property of the containing form object. The elements property

      <?xml version = "1.0" encoding = "utf-8"?>

 

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 

      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

      <!-- Fig. 10.14: quiz.html -->

 

      <!-- Online quiz graded with JavaScript. -->

 

      <html xmlns = "http://www.w3.org/1999/xhtml">

 

      <head>

 

      <title>Online Quiz</title>

 

        <script type = "text/JavaScript">

        <!--

 

        function checkAnswers()

{

 

var myQuiz = document.getElementById( "myQuiz" );

                       

// determine whether the answer is correct

            if ( myQuiz.elements[ 1 ].checked )          

            alert( "Congratulations, your answer is correct" );

else // if the answer is incorrect

            alert( "Your answer is incorrect. Please try again" );

        } // end function checkAnswers

        -->

 

        </script>

 

        </head>

 

        <body>

 

        <form id = "myQuiz" onsubmit = "checkAnswers()" action = "">

 

<p>Select the name of the tip that goes with the

image shown:<br />

<img src="EPT.gif" alt="mystery tip"/>

<br />

                       

            <input type = "radio" name = "radiobutton" value = "CPE" /> 

<label>Common Programming Error</label>

                       

            <input type = "radio" name = "radiobutton" value = "EPT" />  

<label>Error-Prevention Tip</label>

                       

            <input type = "radio" name = "radiobutton" value = "PERF" />

<label>Performance Tip</label>

                       

            <input type = "radio" name = "radiobutton" value = "PORT" />

<label>Portability Tip</label><br />

                       

<input type = "submit" name = "submit" value = "Submit" />

        <input type = "reset" name = "reset" value = "Reset" />

        </p>

 

        </form>

 

        </body>

 

</html>



Fig. 10.14 | Online quiz graded with JavaScript.

contains an array of all the form’s controls. The radio buttons are part of the XHTML form myQuiz, so we access the elements array in line 17 using dot notation (myQuiz.elements[ 1 ]). The array element myQuiz.elements[ 1 ] corresponds to the correct answer (i.e., the second radio button). Finally, line 17 determines whether the property checked of the second radio button is true. Property checked of a radio button is true when the radio button is selected, and it is false when the radio button is not selected. Recall that only one radio button may be selected at any given time. If property myQuiz.elements[ 1 ].checked is true, indicating that the correct answer is selected, the script alerts a congratulatory message. If property checked of the radio button is false, then the script alerts an alternate message (line 20).

 

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.