Creating Quiz using JavaScript and HTML

The Quiz is created by designing it in HTML and Quiz Logic in JavaScript. It's a very basic and easy to implement Quiz Program. In the quiz program, one question is displayed at a time. It has two buttons next and previous. Answers are selected by checking radio buttons. Step 1: Design part: Form is created and <legend> tag is used to give title to the form. Inside the <fieldset> tag a table is created with id attribute. Questions and answers are placed inside the table rows.On first row, question number and question is displayed with the help of script as follows.
  1. <tr>
  2. <td ><script language=JavaScript>
  3. //var i=1;
  4. document.write(i + ".\t");
  5. </script>
  6. </td>
  7. <td>
  8. <script language=JavaScript>
  9. document.write(questions[i]);
  10. </script>
Next row contains answer options which are stored in JavaScript array. These are retrieved with the help of script.
  1. <tr><td>
  2. <input type = "radio" value="1" name = "quiz"></td>
  3. <td>
  4. <script language=JavaScript>
  5. document.write(answerA[i]);
  6. </script></td></tr>
Two buttons previous and next are displayed with image on it. These button are created as a image link using anchor tag and respective method is called when a particular button is clicked.
  1. <a href=javascript:preQuestion();><img src=Images/GREEN2.JPG align=left width=50 height=50></a>
Step 2: Logic Part: All the questions, correct answers and options are stored in Array so that it's easy to add new Questions to the quiz. function preQuestion() is used to get the previous question. This function first checks if a particular radio button is checked or not. If it is checked it checks the answer then updates the score and finally displays previous question. "quiz" is the name of radio button group in HTML. It is accessed in the following way.
  1. var radios = document.getElementsByName("quiz");
All the radio button are checked to see if a particular button is checked or not.
  1. for (var j = 0; j < radios.length; j++) {
  2. if (radios[j].checked) {
  3. option=radios[j].value; //get value of selected radio button
  4. radios[j].checked=false; // uncheck the selected radio button.
  5. break;
  6. }
  7. }
If the option equals correct answer then score is incremented and previous question is displayed.
  1. var x=document.getElementById('myTable').rows //obtains table rows
  2. var y=x[0].cells //obtains cell data of a particular row;
  3. y[0].innerHTML=i + ".\t"; //changes the first cell data of the row y
  4. y[1].innerHTML=questions[i]; //changes second cell data of row y
  5. getOptionA(); // displays option A in similar way
Similary nextQuestion() function is used go to the next question. It works similar to preQuestion() but displays next question of the Array. showScore() function is used to display the score. Score can be checked at any time by clicking on the button. Future Plan: We can make following changes to the above quiz code. 1. Alert message can be displayed to show whether the answer is correct or not after next button is clicked. 2. Timer can be set for the quiz. 3. Quit button can be added to quit the quiz. 4. Correct answers can be displayed at the end of quiz.

Add new comment