Post
Ask Question

JavaScript Quiz1

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head runat="server">  
  4.     <title></title>  
  5.     <style type="text/css">  
  6.         div#test {  
  7.              
  8.             border: solid;  
  9.             width: 730px;  
  10.             height: 360px;  
  11.             padding-left: 83px;  
  12.             padding-top: 53px;  
  13.             margin: 88px;  
  14.         }  
  15.   
  16.         div#test-Result {  
  17.             width: 730px;  
  18.             height: 36px;  
  19.             padding-left: 26px;  
  20.             padding-top: 8px;  
  21.             margin: 88px;  
  22.         }  
  23.     </style>  
  24. </head>  
  25. <body>  
  26.     <div id="test-Result"></div>  
  27.     <div id="test"></div>  
  28. </body>  
  29. </html>  
  30. <script type="text/javascript">  
  31.     var test, testResult, pos = 0, count = 0, op1, op2, op3, answer;  
  32.     var Questions = [  
  33.         [["20", "10", "5", "5"], "40", "41", "42", "a"],  
  34.         [["20", "10", "5", "5", "5"], "50", "45", "42", "b"],  
  35.         [["20", "10", "5", "5", "5", "5"], "41", "42", "50", "c"],  
  36.         [["20", "10", "5", "5"], "46", "41", "40", "c"],  
  37.     ];  
  38.   
  39. //Function to return ID
  40.     function _(element) {  
  41.         return (document.getElementById(element));  
  42.     }  
          //Bind Questions to the Main Div along with the Options and a button onclick takes you to next question
  1.     function getQuestions() {  
  2.        // debugger;  
  3.         test = _("test");  
  4.         testResult = _("test-Result");  
  5.         testResult.innerHTML = "Currently you are Viewing Question " + (pos + 1) + " Out of " + (Questions.length);  
  6.         test.innerHTML = "";  
  7.         var questionsLength = Questions[pos][0];  
  8.         for (var i = 0; i < questionsLength.length; i++) {  
  9.             test.innerHTML += questionsLength[i] + '</br>' + '</br>';  
  10.   
  11.         }  
  12.          
  13.         op1 = 'a  ' + '<input  name="choices" type="radio" value="a" />' + '  ' + Questions[pos][1] + '</br>';  
  14.         op2 = 'b  ' + '<input  name="choices" type="radio" value="b"/>' + '  ' + Questions[pos][2] + '</br>';  
  15.         op3 = 'c  ' + '<input  name="choices" type="radio" value="c"/>' + '  ' + Questions[pos][3] + '</br>';  
  16.   
  17.         test.innerHTML += op1;  
  18.         test.innerHTML += op2;  
  19.         test.innerHTML += op3;  
  20.         test.innerHTML += '<input type="button" value="Submit Answer" id="Submit"  onclick="checkResult()"/>'  
  21.     }  
  22.       
  23.     getQuestions();  

  25. //Check the selected answer 
  26. //Display the question number in header 

  28.     function checkResult() {  
  29.         //debugger;  
  30.         answer = Questions[pos][4];  
  31.         var choicesArr = document.getElementsByName('choices');  
  32.         for (var i = 0; i < choicesArr.length; i++) {  
  33.             if (choicesArr[i].checked) {  
  34.                 if (choicesArr[i].value == answer) {  
  35.                     count = count + 1;  
  36.                 }  
  37.             }  
  38.         }  
  39.         pos++;  
  40.         if (Questions.length > pos) {  
  41.             getQuestions();  
  42.         }  
  43.         else if (Questions.length == pos) {  
  44.             testResult.innerHTML = "You have " + count + "  correct Answers Out of " + (Questions.length) + " Questions";  
  45.             test.style.visibility = 'hidden';  
  46.         }  
  47.     }  
  48.   
  49.     
  50. </script>