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)">
No of Questions : <div id="noofques"></div><br />
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>
