The Exercise

Now its time to put all the lessons together to create an exercise. First we will use HTML to show the questions and a list of possible answers, then we will use JavaScript to check if the answers are correct.

1) What does 1+1 equal?

1 55 2 11

2)What does 1+2 equal?
3 65 7 28

Here is the code I used to create this example, it might seem kind of intimidating at first since its so much code, but its really simple, take a look: 

1) What does 1+1 equal?
<BR><form name="form1" onSubmit="return false;">
<input type="radio" name="radio1" onClick="form1_radio1()">1
<input type="radio" name="radio2" onClick="form1_radio2()">55
<input type="radio" name="radio3" onClick="form1_radio3()">2
<input type="radio" name="radio4" onClick="form1_radio4()">11



2)What does 1+2 equal?
<BR><form name="form1" onSubmit="return false;">
<input type="radio" name="radio5" onClick="form1_radio5()">3
<input type="radio" name="radio6" onClick="form1_radio6()">65
<input type="radio" name="radio7" onClick="form1_radio7()">7
<input type="radio" name="radio8" onClick="form1_radio8()">28

<P>
<input type="Button" onClick="CheckAnswers()" value="Submit">
</form>
<Script language="JavaScript">
function form1_radio1(){
form1.radio1.checked=true;
form1.radio2.checked=false;
form1.radio3.checked=false;
form1.radio4.checked=false;
}
function form1_radio2(){
form1.radio1.checked=false;
form1.radio2.checked=true;
form1.radio3.checked=false;
form1.radio4.checked=false;
}
function form1_radio3(){
form1.radio1.checked=false;
form1.radio2.checked=false;
form1.radio3.checked=true;
form1.radio4.checked=false;
}
function form1_radio4(){
form1.radio1.checked=false;
form1.radio2.checked=false;
form1.radio3.checked=false;
form1.radio4.checked=true;
}


function form1_radio5(){
form1.radio5.checked=true;
form1.radio6.checked=false;
form1.radio7.checked=false;
form1.radio8.checked=false;
}
function form1_radio6(){
form1.radio5.checked=false;
form1.radio6.checked=true;
form1.radio7.checked=false;
form1.radio8.checked=false;
}
function form1_radio7(){
form1.radio5.checked=false;
form1.radio6.checked=false;
form1.radio7.checked=true;
form1.radio8.checked=false;
}
function form1_radio8(){
form1.radio5.checked=false;
form1.radio6.checked=false;
form1.radio7.checked=false;
form1.radio8.checked=true;
}
function CheckAnswers(){
var number_right= 0;

if(form1.radio3.checked==true){
++number_right;
}

if(form1.radio5.checked==true){
++number_right;
}

alert(number_right+" correct");
}
</Script>

All that changes during the most of the JavaScript is which radio button will be checked and which will be unchecked, you can just copy and paste the majority of the code. In the CheckAnswers() function just check if the correct answers are checked and add 1 to number_right for each time the student selected the right answer, then using an alert box you can display his score.

Back to Main Page 1