Below is the code of a sample radio button quiz where multiple radio buttons are provided. Correct answers and wrong answers are defined in the code. User may check any answer or keep all blank. If user checks any radio button and finally clicks "Grade Me" button, label text of radio button of any wrong answers checked by the user shall appear as red and at the same time correct answer of that particular question shall appear in green (This will help the user know which question he answered wrong and what is its correct answer). I have tried several steps and searched many forums and failed. I think it will be really simple.
Example:
var numQues = 3;
var numChoi = 3;
var answers = new Array(3);
answers[0] = "doesn't like";
answers[1] = "don't come";
answers[2] = "come";
var wrong = new Array(3);
wrong[0] = "don't like";
wrong[1] = "doesn't come";
wrong[2] = "comes";
var wrong1 = new Array(3);
wrong1[0] = "doesn't likes";
wrong1[1] = "doesn't comes";
wrong1[2] = "coming";
function getScore(form) {
var score = 0;
var currElt;
var currSelection;
for (i = 0; i < numQues; i++) {
currElt = i * numChoi;
answered = false;
for (j = 0; j < numChoi; j++) {
currSelection = form.elements[currElt + j];
if (currSelection.checked) {
answered = true;
if (currSelection.value == answers[i]) {
score += 3;
break;
}
if (currSelection.value == wrong[i]) {
score -= 1;
break;
}
if (currSelection.value == wrong1[i]) {
score -= 1;
break;
}
}
}
}
var scoreper = Math.round(score * 100 / 9);
form.percentage.value = scoreper + "%";
form.mark.value = score;
}<title>Quiz Questions And Answers</title><center><h1>Quiz Questions</h1></center><p><form name="quiz"><p><b><br>1. He -------------------- it.<br></b><label><input type="radio" name="q1" value="don't like">don't like</label><br><label><input type="radio" name="q1" value="doesn't like">doesn't like</label><br><label><input type="radio" name="q1" value="doesn't likes">doesn't likes</label><br><p><b><hr><br>2. They -------------------- here very often.<br></b><label><input type="radio" name="q2" value="don't come">don't come</label><br><label><input type="radio" name="q2" value="doesn't come">doesn't come</label><br><label><input type="radio" name="q2" value="doesn't comes">doesn't comes</label><br><p><b><hr><br>3. John and Mary -------------------- twice a week.<br></b><label><input type="radio" name="q3" value="come">come</label><br><label><input type="radio" name="q3" value="comes">comes</label><br><label><input type="radio" name="q3" value="coming">coming</label><br><p><b><hr><p><b><input type="button"value="Grade Me"onClick="getScore(this.form);"><input type="reset" value="Clear"><p>
Number of score out of 15 = <input type= text size 15 name= "mark">
Score in percentage = <input type=text size=15 name="percentage"><br></form><p><form method="post" name="Form" onsubmit="" action=""></form>