How about a more general approach?
Code:
<!DOCTYPE html>
<html>
<head>
<title>Quiz</title>
<style type="text/css">
div#question {
font-size: x-large;
}
div#answers, div#answers label {
font-size: large;
}
div#result {
font-size: x-large;
color: #FF0000;
}
</style>
</head>
<body>
<div>
<form action="">
<div id="question"></div>
<div id="answers"></div>
<div id="result"> </div>
<input type="button" id="checkAnswer" value="Check my answer"/><hr/>
<input type="button" id="next" value="Next question" />
</form>
</div>
<script type="text/javascript">
var questions = [
['Is there a difference between a jungle and a rain forest?',
'No difference', '*Some difference', 'Completely different' ],
['What is the world\'s most common religion?',
'*Christianity', 'Buddhism', 'Hinduism', 'Islam'],
['What is the second largest country (in size) in the world?',
'USA', 'China', '*Canada', 'Russia']
];
var qdiv = document.getElementById("question");
var adiv = document.getElementById("answers");
var rdiv = document.getElementById("result");
var questionCount = questions.length;
var currentQuestion = 0;
var currentAnswer;
var correct = 0;
var alredyAnswered = false;
function nextQuestion( )
{
if ( currentQuestion >= questionCount )
{
rdiv.innerHTML = "You answered " + correct + " question(s) "
+ "out of " + questionCount + " correctly on the first try.";
return;
}
var curq = questions[currentQuestion];
var cura = curq.slice(1).sort( function() { return Math.random() - 0.7; } );
qdiv.innerHTML = curq[0];
while ( adiv.firstChild != null )
{
adiv.removeChild( adiv.firstChild );
}
for ( var a = 0; a < cura.length; ++a )
{
var ans = cura[a];
if ( ans.charAt(0) == "*" )
{
ans = ans.substring(1);
currentAnswer = ans;
}
var lbl = document.createElement("label");
var rb = document.createElement("input");
rb.type = "radio";
rb.name = "rbanswer";
rb.value = ans;
lbl.appendChild(rb);
lbl.appendChild( document.createTextNode(ans) );
adiv.appendChild(lbl);
}
rdiv.innerHTML = " ";
alreadyAnswered = false;
++currentQuestion;
}
document.getElementById("checkAnswer").onclick =
function()
{
var rbs = this.form.rbanswer;
for ( var r = 0; r < rbs.length; ++r )
{
var rb = rbs[r];
if ( rb.checked )
{
if ( rb.value == currentAnswer )
{
rdiv.innerHTML = "That is correct.";
if ( ! alreadyAnswered ) ++correct;
} else {
rdiv.innerHTML = "Sorry, the correct answer is "
+ currentAnswer;
}
alreadyAnswered = true;
return;
}
}
rdiv.innerHTML = "You did not check any answer...try again";
};
document.getElementById("next").onclick = nextQuestion;
// start things off:
nextQuestion();
</script>
</body>
</html>
This simplifies your array of question and answers. The "*" in an answer indicates it is the right one. The code scrambles the answers, so they aren't always in the same order, and of course strips the "*" before showing the answers. It simply remembers the current correct answer in a JS variable.