<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
div#test {
border: solid;
width: 730px;
height: 360px;
padding-left: 83px;
padding-top: 53px;
margin: 88px;
}
div#test-Result {
width: 730px;
height: 36px;
padding-left: 26px;
padding-top: 8px;
margin: 88px;
}
</style>
</head>
<body>
<div id="test-Result"></div>
<div id="test"></div>
</body>
</html>
<script type="text/javascript">
var test, testResult, pos = 0, count = 0, op1, op2, op3, answer;
var Questions = [
[["20", "10", "5", "5"], "40", "41", "42", "a"],
[["20", "10", "5", "5", "5"], "50", "45", "42", "b"],
[["20", "10", "5", "5", "5", "5"], "41", "42", "50", "c"],
[["20", "10", "5", "5"], "46", "41", "40", "c"],
];
//Function to return ID
function _(element) {
return (document.getElementById(element));
} //Bind Questions to the Main Div along with the Options and a button onclick takes you to next question
function getQuestions() {
// debugger;
test = _("test");
testResult = _("test-Result");
testResult.innerHTML = "Currently you are Viewing Question " + (pos + 1) + " Out of " + (Questions.length);
test.innerHTML = "";
var questionsLength = Questions[pos][0];
for (var i = 0; i < questionsLength.length; i++) {
test.innerHTML += questionsLength[i] + '</br>' + '</br>';
}
op1 = 'a ' + '<input name="choices" type="radio" value="a" />' + ' ' + Questions[pos][1] + '</br>';
op2 = 'b ' + '<input name="choices" type="radio" value="b"/>' + ' ' + Questions[pos][2] + '</br>';
op3 = 'c ' + '<input name="choices" type="radio" value="c"/>' + ' ' + Questions[pos][3] + '</br>';
test.innerHTML += op1;
test.innerHTML += op2;
test.innerHTML += op3;
test.innerHTML += '<input type="button" value="Submit Answer" id="Submit" onclick="checkResult()"/>'
}
getQuestions();
//Check the selected answer
//Display the question number in header
function checkResult() {
//debugger;
answer = Questions[pos][4];
var choicesArr = document.getElementsByName('choices');
for (var i = 0; i < choicesArr.length; i++) {
if (choicesArr[i].checked) {
if (choicesArr[i].value == answer) {
count = count + 1;
}
}
}
pos++;
if (Questions.length > pos) {
getQuestions();
}
else if (Questions.length == pos) {
testResult.innerHTML = "You have " + count + " correct Answers Out of " + (Questions.length) + " Questions";
test.style.visibility = 'hidden';
}
}
</script>