Tuesday, June 11, 2013

Quiz using html,css, jquery, xml, javascript

Problem Statement : Build a Single Select quiz engine.  
Technologies: HTML, JavaScript, jQuery, css
1. Load the XML file data.xml.
2. Populate data into a model object.
3. Show first question with options and next button should be disabled.
4. Once user selects an option next button should be enabled.
5. Once all the questions are answered, text on ‘Next’ should change to ‘Show Result’
    and clicking on it should show the result page with total number of questions and number of
    correct answers.



Solution:
 <!DOCTYPE html>  
 <html>  
      <head>  
      <style type="text/css">  
           div#options input{  
                  margin-left: 15px;    
           }  
           ul{  
                   list-style-type: none;  
           }  
           div#wrapper{  
                  width: 500px;    
                  background-color: #FAFAFA;  
                  padding: 10px;  
                  padding-bottom: 35px;  
           }  
           #nextButton{  
                  float:right;  
                  width: 100px;  
                  height: 25px;  
           }  
      </style>  
      <script type="text/javascript" src="js/jquery.min.js"></script>  
      <script type="text/javascript">  
        var nextnodecounter = 0;  
        var xmldocstr;  
        var correctanscounter = 0;  
        var randmarrcnt = 0;  
        var quesindex = 0;  
        var getvalue;  
        var ansarry = new Array();  
        function UITest1() {  
       var xmlhttp;  
       if (window.XMLHttpRequest) {  
         xmlhttp = new XMLHttpRequest();  
       }  
       else {  
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
       }  
       xmlhttp.onreadystatechange = function () {  
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {  
           var dataxml = xmlhttp.responseText;  
           xmldocstr = loadXMLString(dataxml);  
             displaychild(xmldocstr);  
         }  
       }  
       xmlhttp.open("GET", "data.xml", true);  
       xmlhttp.send();  
     }  
   function OnSuccessCall(response) {  
   }  
   function OnErrorCall(response) {  
   }  
   function loadXMLString(str) {  
     if (window.DOMParser) {  
       parser = new DOMParser();  
       xmlDoc = parser.parseFromString(str, "text/xml");  
     }  
     else // Internet Explorer  
     {  
       xmlDoc = new ActiveXObject("Microsoft.XMLDOM");  
       xmlDoc.async = "false";  
       xmlDoc.loadXML(txt);  
     }  
     return xmlDoc;  
   }  
   var newxmldoc;  
   function displaychild(newxmldoc) {  
     // randomizeques(newxmldoc);  
     document.getElementById("nextButton").disabled = true;  
     if (document.getElementById("nextButton").innerHTML == "Show Result") {  
       document.getElementById("nextButton").disabled = false;  
       document.getElementById("nextButton").onclick=ShowResult();  
     }  
     var questiontext = newxmldoc.getElementsByTagName("question");  
     var nodevalue1 = newxmldoc.getElementsByTagName("question_text")[nextnodecounter].childNodes[0].nodeValue;  
     // display question text  
     document.getElementById("question").innerHTML = nodevalue1;  
     document.getElementById("options").innerHTML = "";  
     var answer = newxmldoc.getElementsByTagName("question_text");  
     var optiontext = newxmldoc.getElementsByTagName("option");  
     for (var anscount = 0; anscount < questiontext.length; anscount++) {  
       var indexofans= answer[anscount].getAttribute("answer");  
       ansarry[anscount] = questiontext[nextnodecounter].getElementsByTagName("option")[indexofans - 1].textContent;  
     }  
     //display radio buttons  
     for (i = 0; i < optiontext.length; i++) {  
       //var nodevalue2 = "" + newxmldoc.getElementsByTagName("option")[i].childNodes[0].nodeValue;  
       var nodevalue2 = questiontext[nextnodecounter].getElementsByTagName("option")[i].textContent;  
       var radioBtn = $('<li><input name="r1" type="radio" value="' + nodevalue2 + '" onclick="enablebtn(this.value)" id="rbtnCount" ' + i + ' /><label>' + nodevalue2 + '</label> </li>');  
       radioBtn.appendTo('#options');  
       checkradiobtn();  
     }  
   }  
   function FunNextNode() {  
     nextnodecounter = nextnodecounter + 1;  
     $("#wrapper").animate({ height: '0px', opacity: '0.5' }, "fast");  
     $("#wrapper").promise().done(function () {  
     });  
     $("#wrapper").animate({ height: '150px', opacity: '1' }, "slow");  
     $("#wrapper").promise().done(function () {  
     });  
     if (getvalue == ansarry[nextnodecounter]) {  
       correctanscounter = correctanscounter + 1;  
     }  
     var questiontext = xmldocstr.getElementsByTagName("question");   
     if (questiontext.length == (nextnodecounter)) {  
       document.getElementById("nextButton").innerHTML = "Show Result";  
     }  
       displaychild(xmldocstr);  
   }  
   function checkradiobtn()  
   {  
     var radios = document.getElementsByTagName('input');  
     var value;  
     for (var i = 0; i < radios.length; i++) {  
       if (radios[i].type == 'radio' && radios[i].checked) {  
         document.getElementById("nextButton").disabled = true;  
       }  
     }  
   }  
   var setvalue;  
   function enablebtn(setvalue) {  
     document.getElementById("nextButton").disabled = false;  
     getvalue = setvalue;  
   }  
   function ShowResult() {  
     if (getvalue == ansarry[nextnodecounter-1]) {  
       correctanscounter = correctanscounter + 1;  
     }  
     document.getElementById("result").style.display="block";  
     document.getElementById("noofques").innerHTML = nextnodecounter;  
     document.getElementById("noofcorans").innerHTML = correctanscounter;  
   }  
   // function to get random index of questions  
   var tempcount = 0;  
   var tempxmldoc;  
   var randquearr = new Array();  
   function randomizeques(tempxmldoc) {  
     var questiontext = tempxmldoc.getElementsByTagName("question");  
     var randomno = Math.floor((Math.random() * questiontext.length) + 1);  
     var tempnodevalue = tempxmldoc.getElementsByTagName("question_text")[randomno].childNodes[0].nodeValue;  
     if (tempcount == 0) {  
       randquearr[randmarrcnt] = tempnodevalue;  
       tempcount = tempcount + 1;  
       randmarrcnt = randmarrcnt + 1;  
     }  
     else {  
       for (var tempcnt = 0; tempcnt < randquearr.length; tempcnt++) {  
         if (randquearr[tempcnt] == tempnodevalue) {  
           randomizeques(tempxmldoc);  
         }  
       }  
       randquearr[randmarrcnt] = tempnodevalue;  
       randmarrcnt = randmarrcnt + 1;  
     }  
     quesindex = randomno;  
   }  
      </script>  
      </head>  
      <body onload="UITest1()">  
           <div id="wrapper">  
                  <div id="question">  
                  </div>  
         <br />  
                  <ul id="options">  
                  </ul>  
                  <button id="nextButton" onclick="FunNextNode()">Next</button>  
           </div>  
     <br />  
     <center>  
     <div id="result" style="display:none;height:200px;width:500px;background-color:rgb(152, 173, 240)">  
   &nbsp;&nbsp;&nbsp; No of Questions : <div id="noofques"></div><br />  
   &nbsp;&nbsp;&nbsp; No of Correct Answers : <div id="noofcorans"></div>  
     </div></center>  
      </body>  
 </html>  

XML
 <questions>  
      <question>  
           <question_text answer="1">Question 1</question_text>  
           <options>  
                <option>Option 1</option>  
                <option>Option 2</option>  
                <option>Option 3</option>  
           </options>  
      </question>  
      <question>  
           <question_text answer="1">Question 2</question_text>  
           <options>  
                <option>Option 1</option>  
                <option>Option 2</option>  
                <option>Option 3</option>  
                <option>Option 4</option>  
           </options>  
      </question>  
      <question>  
           <question_text answer="1">Question 3</question_text>  
           <options>  
                <option>Option 1</option>  
                <option>Option 2</option>  
           </options>  
      </question>  
 </questions>  





9 comments:

  1. Can I use this code? It is for students only to take quizzes.

    ReplyDelete
  2. how to insert questions in the script..
    may i use this code in my blog Blog

    ReplyDelete
  3. hello chetan ji your post is looking good. can i have a working demo of this quiz.

    ReplyDelete
  4. It won't options my system can you me a solution

    ReplyDelete
  5. No gif.hub & no buffering connecting to Oppo A3s

    ReplyDelete
  6. No gif.hub & no buffering connecting to Oppo A3s

    ReplyDelete
  7. Slotyro Casino Hotel, Las Vegas, NV - Mapyro
    Find all information and febcasino best deals of Slotyro 군포 출장샵 Casino 안성 출장마사지 Hotel in Las 제주도 출장마사지 Vegas, NV. Mapyro offers guests the opportunity to stay in the most attractive 포항 출장샵

    ReplyDelete