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>
Can I use this code? It is for students only to take quizzes.
ReplyDeletehow to insert questions in the script..
ReplyDeletemay i use this code in my blog Blog
hello chetan ji your post is looking good. can i have a working demo of this quiz.
ReplyDeleteYou can attend our Quiz here.
ReplyDeleteIt won't options my system can you me a solution
ReplyDeleteThanks for sharing information...nice blog
ReplyDeletejavascript training in hyderabad
No gif.hub & no buffering connecting to Oppo A3s
ReplyDeleteNo gif.hub & no buffering connecting to Oppo A3s
ReplyDeleteSlotyro Casino Hotel, Las Vegas, NV - Mapyro
ReplyDeleteFind 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 포항 출장샵