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".
Feedback
Add your own response here:
Although your email address isn't required it is protected from spambots if you choose to provide it and not to hide it. My right to remove commercial, irrelevant or posts I just don't like is reserved.
Navigate other articles in the category "JavaScript"
| « Previous Article | Next Article » | |
| JavaScript @Now Equivalent | Advanced Form Validation Made a Little Easier |
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 to this comment
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 to this comment
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 to this comment
Re: quiz
I could Derek, but why would I?
Reply to this comment
Radio Buttons
It works just what i was looking for. Now i just need to make it work in my program. Thanks.
Reply to this comment
Pass Score Value to next page?
How would you go about passing theScore value to another page?
thanks,
Reply to this comment
Thank you
Thank you very much. I'm so glad with this information.
Reply to this comment
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 to this comment
View source?
Reply to this comment