I want to write online quiz application using XML and JavaScript. The questions and answers are in XML format. The questions should be loaded one by one. I tried to change the following script where answer is submitted by input box but I want 4 options as listed below.

questions.xml
<?xml version="1.0" encoding="UTF-8"?>
<questions>
<q>What DOM object contains URL information for the window?</q>
<option id ="1">ans1</option>
<option id ="2">ans2</option>
<option id ="3">location</option>
<option id ="4">ans4</option>
<a>location</a>

<q>Which method of the document object finds the object for an element?</q>
<option id ="1">getElementById</option>
<option id ="2">ans2</option>
<option id ="3">ans3</option>
<option id ="4">ans4</option>
<a>getElementById</a>

<q>Square Root of 81?</q>
<option id ="1">9</option>
<option id ="2">ans2</option>
<option id ="3">ans3</option>
<option id ="4">ans4</option>
<a>9</a>

<q>Value of Sin 30?</q>
<option id ="1">ans1</option>
<option id ="2">ans2</option>
<option id ="3">1/2</option>
<option id ="4">ans4</option>
<a>1/2</a>

<q>Value of Tan 45?</q>
<option id ="1">1</option>
<option id ="2">ans2</option>
<option id ="3">ans3</option>
<option id ="4">ans4</option>
<a>1</a>
</questions>



//ajax.js

// global variables to keep track of the request
// and the function to call when done
var ajaxreq=false, ajaxCallback;
// ajaxRequest: Sets up a request
function ajaxRequest(filename) {
try {
// Firefox / IE7 / Others
ajaxreq= new XMLHttpRequest();
} catch (error) {
try {
// IE 5 / IE 6
ajaxreq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (error) {
return false;
}
}
ajaxreq.open("GET", filename);
ajaxreq.onreadystatechange = ajaxResponse;
ajaxreq.send(null);
}
// ajaxResponse: Waits for response and calls a function
function ajaxResponse() {
if (ajaxreq.readyState !=4) return;
if (ajaxreq.status==200) {
// if the request succeeded...
if (ajaxCallback) ajaxCallback();
} else alert("Request failed: " + ajaxreq.statusText);
return true;
}




//quiz.js
// global variable qn is the current question number
var qn=0;
// load the questions from the XML file
function getQuestions() {
obj=document.getElementById("question");
obj.firstChild.nodeValue="(please wait)";
ajaxCallback = nextQuestion;
ajaxRequest("questions.xml");
}
// display the next question
function nextQuestion() {
questions = ajaxreq.responseXML.getElementsByTagName("q");
obj=document.getElementById("question");
if (qn < questions.length) {
q = questions[qn].firstChild.nodeValue;
obj.firstChild.nodeValue=q;
} else {
obj.firstChild.nodeValue="(no more questions)";
}
}
// display the Options
function nextOption() {
questions = ajaxreq.responseXML.getElementsByTagName("option");
obj=document.getElementById("option");
if (qn < questions.length) {
q = questions[qn].firstChild.nodeValue;
obj.firstChild.nodeValue=option;
} else {
obj.firstChild.nodeValue="(no more questions)";
}
}

// check the user's answer
function checkAnswer() {
answers = ajaxreq.responseXML.getElementsByTagName("a");
a = answers[qn].firstChild.nodeValue;
answerfield = document.getElementById("answer");
if (a == answerfield.value) {
alert("Correct!");
}
else {
alert("Incorrect. The correct answer is: " + a);
}
qn = qn + 1;
answerfield.value="";
nextQuestion();
}
// Set up the event handlers for the buttons
obj=document.getElementById("startq");
obj.onclick=getQuestions;
ans=document.getElementById("submit");
ans.onclick=checkAnswer;





//ajaxquiz.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Ajax Quiz Test</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<h1>Ajax Quiz Example</h1>
<form method="post" action="">
<p><input type="button" value="Start the Quiz" id="startq" /></p>
<p><strong>Question:</strong> <span id="question">[Press Button to Start Quiz]</span></p>
<p><strong>Option1:</strong> <span id="option">[option 1 text]</span></p>
<p><strong>Option2:</strong> <span id="option">[option 2 text]</span></p>
<p><strong>Option3:</strong> <span id="option">[option 3 text]</span></p>
<p><strong> <span id="question"><input type="radio" name="question" value="question">[question]<br></span></p>
<p><strong>Question:</strong> <span id="startq">[Press Button to Start Quiz]</span></p>
<p><strong>Answer:</strong> <input type="text" name="question" id="answer" /></p>
<p><input type="button" value="Submit Answer" id="submit" /></p>
</form>
<script type="text/javascript" src="quiz.js"></script>
</body>
</html>