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
Hide the rest of this thread
I agree, but disagree...Re: Netscape!!!
yes, netscape is as you say. but do you really want IE to be the only game in town? Netscape warned us all long ago that nothing is really free. IE was only made free in order to kill Netscape, and they succeeded, even though it took them until v. 5 to have a good product (while Netscape stagnated miserably).
Personally I love opera, and use it along with IE, but Opera doesn't currently show any sign of beating IE in the market.
The real solution would be for Netscape to stop sucking. (I'm told v. 6 has done so, but since it always crashes on me I'm waiting a while.)
Reply
Don't get me started...
I don't care if there is one or ten browsers on the market or who makes them. All I care about is that I can do my job without the need to worry about petty little things like cross-browser functionality.
I don't like IE because it's MS I like it becasue it's a bloody good browser. The things you can do with can't even *nearly* be matched by other browsers.
I love Opera too. I've used it since version 4 and it's also my mail client for non-codestore (private) mail. Try doing a day's surfing with /just/ Opera though!! You can't... its JS support is too lousy - you'll soon find yourself switching in to IE to carry on surfing.
Netscape 6 isn't much better either. Having "used" it for a while now I still hold it in the same regard as its predecessor.....
I am an IE man because that's what my job requires. All the work I do is for Intranets and they are IE based. Partly I imagine because most corporations nowadays are "Microsoft shops" and partly because the IT decision makers know enough to know it's the only one capable of performing in situations where client-like functionality needs to be reproduced.
Anyway, this could go on forever and this type of argument's boring so that's it from me.....
Reply
Re: Netscape!!!
Hear, hear!
Reply
Re: Netscape!!!
really? I.E. rocks. It has the most conpatible with js, and because all the rest of the browswers suck, like netscape....... need i go on? no.
Reply
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