Post
Ask Question

Creating questionnaire with JQuery and XML

I am just doing some exercise with JQuery. I want to create a dynamic questionnaire with JQuery and XML. Here I want to keep my all questions in a XML file. My application should able to select random questions from the XML file and create html content with Question and its answers with radio buttons. Once user submits his response he should able to see the result and Explanation for each question.



HTML Page

  1. <html>  
  2. <head>        
  3. <title> Creating questionnaire with JQuery and XML </title>    
  4.         <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>  
  5.         <script type="text/javascript" src="readXML.js"></script>    
  6. <style>  
  7. .mydiv {  
  8.     display:table-cell;  
  9. }  
  10. .mydiv.table-hidden{  
  11.     display:none;  
  12. }  
  13.     table, th , td   
  14.         {  
  15.         border: 1px solid grey;  
  16.         border-collapse: collapse;  
  17.         padding: 5px;  
  18.         }  
  19.     table tr:nth-child(odd)  
  20.         {  
  21.         background-color: #f1f1f1;  
  22.         }  
  23.     table tr:nth-child(even)   
  24.         {  
  25.         background-color: #ffffff;  
  26.         }  
  27. </style>   
  28.     </head>  
  29.     <body>  
  30. <h2>Creating questionnaire with JQuery and XML</h2> <hr>  
  31. <div id="ContentArea"></div>  
  32. <br><button id="submit">SUBMIT</button>     
  33. </body>  
  34. </html>  
ReadXML.js
  1. // File: readXML.js  
  2. $(document).ready(function()  
  3. {   
  4.     $(document).on('click','#submit',function(e)  
  5.     { $(this).hide();  
  6.             submit();  
  7.         });  
  8.       
  9.     var Show = 5;      
  10.     var array = [];  
  11.       
  12.     // Open the questionBank.xml file     
  13.     $.get("questionBank.xml",{},function(xml)  
  14.     {     for (i = 0; i < Show; )  
  15.         {   
  16.             var newVal=Math.ceil(Math.random() * $(xml).find("Question").length );  
  17.             if ($.inArray(newVal, array) < 0)  
  18.             {  
  19.                 i++;  
  20.                     array.push(newVal)  
  21.                 }  
  22.                   
  23.         }            
  24.         myQuestionnaireHTMLOutput = '';       
  25.         myQuestionnaireHTMLOutput += '<table width="98%" border="1" cellpadding="0" cellspacing="0" id="tblQuestion">';  
  26.         var SrNo=1;  
  27.       
  28.     myQuestion  ='';  
  29.   
  30.               
  31.         $('Question',xml).each(function(i)  
  32.             {             
  33.                 QuestionID = $(this).find("QuestionID").text();  
  34.   
  35.                 for (i = 0; i < Show; i++)   
  36.                 {   
  37.                     if(QuestionID ==array[i])  
  38.                     {  
  39.                         if($.inArray(QuestionID, array) < 0)  
  40.                         {     
  41.                             Question = $(this).find("QuestionText").text();  
  42.                             QuestionID = $(this).find("QuestionID").text();  
  43.                             QuestionType = $(this).find("QuestionType").text();  
  44.                             QuestionExplanation = $(this).find("QuestionExplanation").text();  
  45.                             options=$(this).find("options");          
  46.                             strOptions ='<div class="myDivClass">';  
  47.                             $('option', options).each(function (obj)  
  48.                             {  
  49.                                 istrue=$(this).attr("istrue");  
  50.                                     strOptions  +='<input type="radio" data-istrue='+istrue+' name='+QuestionID+' value='+$(this).text()+'>'+$(this).text()+'<br>';  
  51.                                 });           
  52.               
  53.                         // Build row HTML data and store in string        
  54.                         myQuestion = BuildQuestionHTML(SrNo++,Question,QuestionID,strOptions+'</desc>',QuestionExplanation);  
  55.               
  56.                         }  
  57.                     myQuestionnaireHTMLOutput = myQuestionnaireHTMLOutput + myQuestion ;                      
  58. myQuestion ='';  
  59.                     break;  
  60.                     }  
  61.                 }         
  62.             });   
  63.       
  64.         myQuestionnaireHTMLOutput += '</table>';  
  65.           
  66.         // Update the DIV called Content Area with the HTML string        
  67.         $("#ContentArea").append(myQuestionnaireHTMLOutput );  
  68.       
  69.     });   
  70. });   
  71.   
  72. function BuildQuestionHTML(SrNo,Question,QuestionID,options,QuestionExplanation)  
  73. {  
  74.     output = '';      
  75.     output += '<tr><td width="2%">'+SrNo+'</td>';   
  76.     output += '<td>'+ Question+'<br>';  
  77.     output += options+'</td><td class="mydiv table-hidden"><div >'+QuestionExplanation+'</div></td>';       
  78.     output += '</tr>';      
  79.     return output;  
  80. }  
  81.   
  82. function submit()  
  83. {  
  84.     $(".mydiv").toggleClass('table-hidden');  
  85.     var collection = $(".myDivClass");  
  86.     collection.each(function()  
  87.     {  
  88.         $(this.parentNode.parentNode).css( "background", "" );  
  89.         var QuestionID=$(this).find(':input:first').attr("name");  
  90.         if($('input[name="'+QuestionID+'"]:checked').data('istrue')==1 )  
  91.             {     
  92.             $(this.parentNode.parentNode).css( "background", "#c8ebcc" );  
  93.             }  
  94.         else  
  95.             {     
  96.             $(this.parentNode.parentNode).css( "background", "red" );  
  97.             }  
  98.     });      
  99. }  
XML Structure
  1. <?xml version="1.0" encoding="UTF-8" standalone="yes"?>  
  2. <questionBank>  
  3. <Question>  
  4.         <QuestionText>2+5=?</QuestionText>  
  5.         <QuestionID>1</QuestionID>  
  6.         <QuestionType>Single</QuestionType>  
  7.         <options>  
  8.             <option istrue='1'>7</option>  
  9.             <option>8</option>  
  10.             <option>9</option>  
  11.             <option>10</option>  
  12.         </options>  
  13.         <QuestionExplanation>Explanation 1</QuestionExplanation>  
  14.   </Question>  
  15. </questionBank>  
Next Recommended Reading Exporting HTML Table To XML File Using jQuery