A Radio Button Quiz
This example is going be a little quiz using Radio-Buttons and JavaScript (not a quiz about radio-buttons as the title may suggest). It is not that I thought of this as a useful application, more that the techniques used are quite handy. What's more, if it were really a quiz, you could cheat buy viewing the source-code.
The principles demonstrated are that of Multi-Dimensional JavaScript Arrays and of working with Radio-Buttons in JavaScript functions.
Let's get started with the quiz:
So, how did you do? Before you start to mail me with complaints, a couple of the answers are just my opinion. Sorry.
So let's look at the function that is called by the "Mark Answers" link:
function getScore( form ) {
var AnswersAndObjects = new Array();
AnswersAndObjects[0] = ["16", form.question1];
AnswersAndObjects[1] = ["IE", form.question2];
AnswersAndObjects[2] = ["AS", form.question3];
AnswersAndObjects[3] = ["T", form.question4];
var theScore = 0;
for (i=0; i < AnswersAndObjects.length; i++) {
currQuestionObject = AnswersAndObjects[i][1];
for (j=0; j<currQuestionObject.length; j++){
if (currQuestionObject[j].checked && currQuestionObject[j].value == AnswersAndObjects[i][0] ) {
theScore++;
break;
}
}
}
theScore = Math.round( theScore/AnswersAndObjects.length*100 );
form.percentage.value = theScore + "%";
}
What does it do?
First thing is to build an Array that has 4 elements, one for each of the questions. In turn, each of these contain two more elements, one for the correct answer and one for the radio-group object reference.
With the array of the question's answers and objects, the function now loops through each question, getting a hold on the object, looping through all the possible answers and comparing them to the stored one. Whenever an answer is found to be correct the "score" variable is increased by one.
The last thing to do is to convert this score in to a percentage, by dividing by the number of question and multiplying by a hundred. All we need do then is to use the answer. In this case it is placed in to an input field, called "percentage".
Netscape!!!
hey jake, it's great work . But have you ever tried to look at the pages through Netscape 4.x? Man does it look ugly. yes I know , you want all browsers to be current and latest. But what the heck, my organiztaion has standardized on Netscape. So this just doesn't apply. By the way a part of being "Web devloper" or "Internet Developer" would be to make sure your pages work in all the browsers. You too would agree I am sure otherwise you woudn't have asked a question on an obscure browser like "opera".
Reply
Re: Netscape!!!
They may look "ugly" in Netscape but they WORK. I haven't got the time or the patience to even bother starting to worry about why.
Netscape is a pain in the ass and the sooner it dies the better....
Jake
Reply
Show the rest of this thread
quiz
Couldnt you reference the source of the javascript to another file on the server so as not to disclose the answers on the main page.
Reply
Re: quiz
I could Derek, but why would I?
Reply
Radio Buttons
It works just what i was looking for. Now i just need to make it work in my program. Thanks.
Reply
Pass Score Value to next page?
How would you go about passing theScore value to another page?
thanks,
Reply
Thank you
Thank you very much. I'm so glad with this information.
Reply
this doesnt help at all unless i know how you wrote the code for your questions and answers. i have no idea how the form links up with the function you show here
Reply
View source?
Reply
Can we add this type of quiz on blog ?
And isn't it possible showing msg telling "you are right" or "you are wrong" just after clicking on a option ?
Reply