Javascript quiz

**eskymo** · 03-03-2003, 06:13 AM

Hi there all...

I'm looking for help with a javascript quiz and wondered if anyone had come across any source, or has any that does the following :

I need a quiz like the one's you get in women's magazines. Here's an example that's been done in asp:

http://cosmo.ninemsn.com.au/cosmo/cosmoquiz/quiz11.asp

I need something like this, but in javascript, with 10 or so questions on one page, that have radio buttons for each answer and then when you click on the submit button you're taken to the next page that gives you a score and you can check which type of person you are fron the text below depending on what your score was.

any help with this would be appreciated. I've looked through alot of javascript sites and not come accross anything this specific.

cheers

e

**catbert303** · 03-03-2003, 10:21 AM

I guess you could make a simple quiz in javascript. You could structure the form a little like this,

<html>
<head>
<title>Quiz</title>
</head>
<body>
<form method="get" action="results.html" name="quiz">
<p>Do I like flash?</p>
<p>Yes: <input type="radio" name="question1" value="2" checked />
No: <input type="radio" name="question1" value="0" /></p>
<p>Which is the best emoticon on flashkit?</p>
<p>Dan the Cow: <input type="radio" name="question2" value="3" checked />
Big Grin: <input type="radio" name="question2" value="2" />
Mr Smoov: <input type="radio" name="question2" value="1" /></p>
<p><input type="submit" value="Go!" /></p>
</form>
</body>
</html>

in the value attribute assign the score for each choice, in the above example liking flash is obviously a good thing, so selecting that earns you 2 points, selecting no for that question earns nothing. on the page results.html you can then use some javascript to pick out the values from the query string and total them up to give a score.

something like this could be used to calculate the score,

Code:

<script type="text/javascript">
var recieved = location.search.substring(1);
var questionAndAnswer = recieved.split('&');
var total = 0;
for (var i = 0; i < questionAndAnswer.length; ++i) {
    var answer = questionAndAnswer[i].split('=')[1];
    total += parseInt(answer);
    document.write(answer + "<br />");
}
document.write(total);
</script>

you could then use the value of total to provide some kind of feedback to the user, maybe along the lines of

if (total < 5) {
// say something
} else if (total < 10) {
// say something else
} else {
// say something else again
}

**eskymo** · 03-03-2003, 11:14 AM

cheers

i'll give it a go - but being a javascript virgin this kind of thing is a bit daunting. i'm sure i can expand on your script to create a quiz with 10 questions. but a little more help would be appreciated....

essentially the first bit has to be a html form...is that right?
with a submit button that takes you to the results.html page.

would i need any script on the submit button?

and on the results page would i put your code....is this bit

if (total < 5) {
// say something
} else if (total < 10) {
// say something else
} else {
// say something else again
}

to be in the script or just html?

if you could help me clarify these bits, that'd be great.

thanks

e

**catbert303** · 03-03-2003, 11:23 AM

hi,

the first page is just html I guess the most important bit is the values assigned to each radio button, all the actual work is done on the results.html page. here's a more complete script for that,

Code:

<script type="text/javascript">
var recieved = location.search.substring(1);
var questionAndAnswer = recieved.split('&');
var total = 0;
for (var i = 0; i < questionAndAnswer.length; ++i) {
    var answer = questionAndAnswer[i].split('=')[1];
    total += parseInt(answer);
}
if (total < 5) { // adjust the values so they suit the possible scores that can be achieved from the quiz
    document.write("oh dear, you only scored " + total);
} else if (total < 10) {
    document.write("you scored " + total);
} else {
    document.write("congratulations you scored " + total);
}
</script>

(this could be pasted into the body of the page)

**eskymo** · 03-03-2003, 11:29 AM

That's brilliant !

thanks a lot.

So the quiz calculates the score from the values for each radio button. that makes sense now. i just created my html pages and have got it working.

i don't really understand the initial bit of the javascript, but can understand the if statements. i could essentially have quite a few in there and all i would need to do is hard code the text for each bit so the user can refer their score to whichever textr it relates to.

this has helped me a hell of a lot.

really appreciate it mate!

e

**catbert303** · 03-03-2003, 11:44 AM

glad to help

here's a little explanation for the first bit of javascript,

var recieved = location.search.substring(1);

location.search contains everything in the address of the page from the ? onwards the question1=3&question2=1 etc using location.search.substring(1) just removes the ? from the beginning this is then stored in the variable recieved

var questionAndAnswer = recieved.split('&');

this takes the variable recieved and splits it into an array using the & symbol to separate the elements so if recieved was question1=3&question2=1

questionAndAnswer would be an array containing the elements question1=3 and question2=1

var total = 0;

set up a variable to hold the score.

for (var i = 0; i < questionAndAnswer.length; ++i) {
var answer = questionAndAnswer[i].split('=')[1];
total += parseInt(answer);
}

loop through all the elements in questionAndAnswer again use split to create an array (this time using = as the separator) pick out the item in position 1 in the array (this is the value for the question) convert this value to an integer (variables read from the url arrive as strings) and add it to the total.

**eskymo** · 03-03-2003, 11:51 AM

That's brilliant !

I'll print that out so i can refer to it whenever i need to.

you're a star !

e

**eskymo** · 03-04-2003, 06:43 AM

Hi there

i've created the multiple choice quiz [quiz.html] which contains 10 questions each with 4 radio buttons alongside 4 answers. the user will pick one answer per question and then hit the 'go' button. the next page [results.html] counts the values of the checked radio buttons and dislpays their score. got that bit sorted now.

what i need help with is some kind of validation on the first page so that i can make sure that each question has been answered or at least that one question has been answered.

I got confused as i didn't know how to just check for just one radio button for each question...or do i need to just check that 10 radio buttons are checked?

any help with this would be great.

cheers

here's my code for the quiz.html page...

<html>
<head>
<title>Quiz</title>
<link href="quizStyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<form method="get" action="results.html" name="quiz">
<table width="300" border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td align="center" class="title"><img src="../images/quiz_star.gif" width="12" height="12"></td>
<td class="title">Question 1 goes here?</td>
</tr>
<tr>
<td class="title"> </td>
<td class="title"> </td>
</tr>
<tr>
<td width="30" align="center"><input type="radio" name="question1" value="8"/></td>
<td width="270">Answer 1</td>
</tr>
<tr>
<td width="30" align="center"><input type="radio" name="question1" value="6"/></td>
<td width="270">Answer 2 </td>
</tr>
<tr>
<td width="30" align="center"><input type="radio" name="question1" value="4"/></td>
<td width="270">Answer 3</td>
</tr>
<tr>
<td width="30" align="center"><input type="radio" name="question1" value="2"/></td>
<td width="270">Answer 4</td>
</tr>
<tr>
<td width="30"> </td>
<td width="270"> </td>
</tr>
<tr>
<td align="center" class="title"><img src="../images/quiz_star.gif" width="12" height="12"></td>
<td class="title">Question 2 goes here?</td>
</tr>
<tr>
<td width="30"> </td>
<td width="270"> </td>
</tr>
<tr>
<td width="30" align="center"><input type="radio" name="question2" value="8"/></td>
<td width="270">Answer 1</td>
</tr>
<tr>
<td width="30" align="center"><input type="radio" name="question2" value="6"/></td>
<td width="270">Answer 2 </td>
</tr>
<tr>
<td align="center"><input type="radio" name="question2" value="4"/></td>
<td>Answer 3</td>
</tr>
<tr>
<td align="center"><input type="radio" name="question2" value="2"/></td>
<td>Answer 4</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td align="center" class="title"><img src="../images/quiz_star.gif" width="12" height="12"></td>
<td class="title">Question 3 goes here?</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td align="center"><input type="radio" name="question3" value="8"/></td>
<td>Answer 1 </td>
</tr>
<tr>
<td align="center"><input type="radio" name="question3" value="6"/></td>
<td>Answer 2 </td>
</tr>
<tr>
<td align="center"><input type="radio" name="question3" value="4"/></td>
<td>Answer 3 </td>
</tr>
<tr>
<td align="center"><input type="radio" name="question3" value="2"/></td>
<td>Answer 4</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td align="center" class="title"><img src="../images/quiz_star.gif" width="12" height="12"></td>
<td class="title">Question 4 goes here?</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td align="center"><input type="radio" name="question4" value="8"/></td>
<td>Answer 1</td>
</tr>
<tr>
<td align="center"><input type="radio" name="question4" value="6"/></td>
<td>Answer 2</td>
</tr>
<tr>
<td align="center"><input type="radio" name="question4" value="4"/></td>
<td>Answer 3</td>
</tr>
<tr>
<td align="center"><input type="radio" name="question4" value="2"/></td>
<td>Answer 4</td>
</tr>
<tr>
<td colspan="2" class="title"> </td>
</tr>
<tr>
<td align="center" class="title"><img src="../images/quiz_star.gif" width="12" height="12"></td>
<td class="title">Question 5 goes here?</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td align="center"><input type="radio" name="question5" value="8"/></td>
<td>Answer 1</td>
</tr>
<tr>
<td align="center"><input type="radio" name="question5" value="6"/></td>
<td>Answer 2</td>
</tr>
<tr>
<td align="center"><input type="radio" name="question5" value="4"/></td>
<td>Answer 3</td>
</tr>
<tr>
<td align="center"><input type="radio" name="question5" value="2"/></td>
<td>Answer 4</td>
</tr>
<tr>
<td colspan="2" class="title"> </td>
</tr>
<tr>
<td align="center" class="title"><img src="../images/quiz_star.gif" width="12" height="12"></td>
<td class="title">Question 6 goes here?</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td align="center"><input type="radio" name="question6" value="8"/></td>
<td>Answer 1</td>
</tr>
<tr>
<td align="center"><input type="radio" name="question6" value="6"/></td>
<td>Answer 2</td>
</tr>
<tr>
<td align="center"><input type="radio" name="question6" value="4"/></td>
<td>Answer 3</td>
</tr>
<tr>
<td align="center"><input type="radio" name="question6" value="2"/></td>
<td>Answer 4</td>
</tr>
<tr>
<td colspan="2" class="title"> </td>
</tr>
<tr>
<td align="center" class="title"><img src="../images/quiz_star.gif" width="12" height="12"></td>
<td class="title">Question 7 goes here?</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td align="center"><input type="radio" name="question7" value="8"/></td>
<td>Answer 1</td>
</tr>
<tr>
<td align="center"><input type="radio" name="question7" value="6"/></td>
<td>Answer 2</td>
</tr>
<tr>
<td align="center"><input type="radio" name="question7" value="4"/></td>
<td>Answer 3</td>
</tr>
<tr>
<td align="center"><input type="radio" name="question7" value="2"/></td>
<td>Answer 4</td>
</tr>
<tr>
<td colspan="2" class="title"> </td>
</tr>
<tr>
<td align="center" class="title"><img src="../images/quiz_star.gif" width="12" height="12"></td>
<td class="title">Question 8 goes here?</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td align="center"><input type="radio" name="question8" value="8"/></td>
<td>Answer 1</td>
</tr>
<tr>
<td align="center"><input type="radio" name="question8" value="6"/></td>
<td>Answer 2</td>
</tr>
<tr>
<td align="center"><input type="radio" name="question8" value="4"/></td>
<td>Answer 3</td>
</tr>
<tr>
<td align="center"><input type="radio" name="question8" value="2"/></td>
<td>Answer 4</td>
</tr>
<tr>
<td colspan="2" class="title"> </td>
</tr>
<tr>
<td align="center" class="title"><img src="../images/quiz_star.gif" width="12" height="12"></td>
<td class="title">Question 9 goes here?</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td align="center"><input type="radio" name="question9" value="8"/></td>
<td>Answer 1</td>
</tr>
<tr>
<td align="center"><input type="radio" name="question9" value="6"/></td>
<td>Answer 2</td>
</tr>
<tr>
<td align="center"><input type="radio" name="question9" value="4"/></td>
<td>Answer 3</td>
</tr>
<tr>
<td align="center"><input type="radio" name="question9" value="2"/></td>
<td>Answer 4</td>
</tr>
<tr>
<td colspan="2" class="title"> </td>
</tr>
<tr>
<td align="center" class="title"><img src="../images/quiz_star.gif" width="12" height="12"></td>
<td class="title">Question 10 goes here?</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td align="center"><input name="question10" type="radio" value="8"/></td>
<td>Answer 1</td>
</tr>
<tr>
<td align="center"><input type="radio" name="question10" value="6"/></td>
<td>Answer 2</td>
</tr>
<tr>
<td align="center"><input type="radio" name="question10" value="4"/></td>
<td>Answer 3</td>
</tr>
<tr>
<td align="center"><input type="radio" name="question10" value="2"/></td>
<td>Answer 4</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<p><input type="submit" value="Go!"/></p>
</form>
</body>
</html>

**catbert303** · 03-04-2003, 08:04 AM

one solution is you can use the checked attribute to one of the options for each question so the question will always have answer.

<input type="radio" name="question1" value="1" checked>
<input type="radio" name="question1" value="2">
<input type="radio" name="question1" value="3">

would by default check the first option for question1, since radio buttons can't be unselected (without choosing another one) the question will always have an answer.

**eskymo** · 03-05-2003, 08:17 AM

hi there

sorry to bother you again...

how would i replace the boring techy submit button at the end of the form with an image?? i have tried to do this but have had no positive results...what i did end up with was a blank space within dremweaver and when testing the page in the browser got a flashing button...i don't know why.

also,

i'm wanting to add a style to the text responses in the following script. do you know how to do this? I can link the html page to the relevant stylesheet, but need to know how to apply the styles in the javascript.

heres the code:

<script type="text/javascript">
var recieved = location.search.substring(1);
var questionAndAnswer = recieved.split('&');
var total = 0;
for (var i = 0; i < questionAndAnswer.length; ++i) {
var answer = questionAndAnswer[i].split('=')[1];
total += parseInt(answer);
}
if (total < 20) { // adjust the values so they suit the possible scores that can be achieved from the quiz
document.write("oh dear, you only scored " + total);
} else if (total < 30) {
document.write("you scored " + total);
} else if (total < 40) {
document.write("you scored " + total);
} else {
document.write("congratulations you scored " + total);
}
</script>

please help.

cheers

e

**catbert303** · 03-05-2003, 09:45 AM

Hi,

you can use an image as the submit button using,

<input type="image" src="filename.gif">

however this adds a small complication to the results.html page. when an image is used for the submit button the browser sends 2 additional variables along with the form, these are x and y, the coordinate positions of the mouse on the image when it was clicked (I think this is for server side image maps) anyway we don't really want to include these variables in the results for the quiz so we need to modify the script on results.html to take this into account. The only changes are in the for loop,

Code:

for (var i = 0; i < questionAndAnswer.length; ++i) {
    var answerArray = questionAndAnswer[i].split('=');
    if (answerArray[0] == 'x' || answerArray[0] == 'y') {
        continue;
    }
    var answer = answerArray[1];
    total += parseInt(answer);
}

here each time the loop runs answerArray[0] contains the variable name and answerArray[1] contains the variable value for each variable sent to the page. the if statement checks for the variable name being x or y and if it is one of these the continue statement tells the loop to move onto the next iteration without executing anymore of the code following that line.

an alternative for a prettier submit button could be css something like,

Code:

<style type="text/css">
.sb {
    font-family: verdana,helvetica,arial,sans-serif; font-weight: bold; font-size: 10pt; color: #000000; background-color: #ffffff; border-top: 1px solid #ff9900; border-left: 1px solid #ff9900; border-bottom: 1px solid #000000; border-right: 1px solid #000000; padding: 0px;
}
</style>

<input type="submit" value="Go!" class="sb">

the advantage of using css is you don't get the extra variables sent with the form.

adding styles to the javascript output could be done a little like this,

if (total < 20) { // adjust the values so they suit the possible scores that can be achieved from the quiz
document.write("<span class=\"someClassName\">oh dear, you only scored</span><span class=\"anotherClass\"> " + total + "</span>");
} else if (total < 30) { // or maybe using inline styles
document.write("<span style=\"font-family: verdana,helvetica,arial,sans-serif; color: #cccccc;\">you scored</span><span style="font-family: verdana,helvetica,arial,sans-serif; color: #000000;\"> " + total + "</span>");
} else if (total < 40) {
document.write("you scored " + total);
} else {
document.write("congratulations you scored " + total);
}

**eskymo** · 03-05-2003, 10:56 AM

Hi again...

thanks for all that...i've managed to put my image on my button [i had stupidly by accident exported the image as an animated gif and so it was flashing as my fireworks file ahs 4 frames...bummer] so i fixed that part of it.

I then copied and pasted your 'for loop' into my code a replaced what was there. but now the score of the quiz is not being calculated properly. If i select the first readio button for each of the 10 questions i should get 80 points, but what i am getting is 181 and then if i test it agin i get 196 then a different number the 3rd time i test it.

Have you got nay idea why this figure would be different every time?

maybe i should just do a simple css style for the button and be done with it.

thanks for the tip with adding the style to the javascript. i knew it would be something like that - i just wasn't sure where it would sit within each line of code.

I seem to be keeping you busy at the moment...hope that's not a pain.

cheers

e

**catbert303** · 03-05-2003, 11:13 AM

Hi,

I don't mind being busy

i'm not sure why it is giving different values when you run it each time, maybe these files will help (they don't have any pretty formatting, but all the code is there)

quiz.html - the form (includes both css and image buttons, the css button is commented out) note I used simple numbers for my values to compensate for me being bad at adding stuff

Code:

<html>
<head>
<title>quiz again...</title>
<style type="text/css">
.sb {
    font-family: verdana,helvetica,arial,sans-serif; font-weight: bold; font-size: 10pt; color: #000000; background-color: #ffffff; border-top: 1px solid #ff9900; border-left: 1px solid #ff9900; border-bottom: 1px solid #000000; border-right: 1px solid #000000; padding: 0px;
}
</style>
</head>
<body>
<form name="quiz" action="results.html" method="get">
<input type="radio" name="question1" value="1" checked>
<input type="radio" name="question1" value="2">
<input type="radio" name="question1" value="3"><br>
<input type="radio" name="question2" value="1" checked>
<input type="radio" name="question2" value="2">
<input type="radio" name="question2" value="3"><br>
<input type="radio" name="question3" value="1" checked>
<input type="radio" name="question3" value="2">
<input type="radio" name="question3" value="3"><br>
<input type="radio" name="question4" value="1" checked>
<input type="radio" name="question4" value="2">
<input type="radio" name="question4" value="3"><br>
<input type="radio" name="question5" value="1" checked>
<input type="radio" name="question5" value="2">
<input type="radio" name="question5" value="3"><br>
<input type="radio" name="question6" value="1" checked>
<input type="radio" name="question6" value="2">
<input type="radio" name="question6" value="3"><br>
<input type="radio" name="question7" value="1" checked>
<input type="radio" name="question7" value="2">
<input type="radio" name="question7" value="3"><br>
<input type="radio" name="question8" value="1" checked>
<input type="radio" name="question8" value="2">
<input type="radio" name="question8" value="3"><br>
<input type="radio" name="question9" value="1" checked>
<input type="radio" name="question9" value="2">
<input type="radio" name="question9" value="3"><br>
<input type="radio" name="question10" value="1" checked>
<input type="radio" name="question10" value="2">
<input type="radio" name="question10" value="3"><br>
<!--<input type="submit" value="Go!" class="sb">-->
<input type="image" src="button.gif">
</form>
</body>
</html>

the results page results.html

Code:

<html>
<head>
<title>Quiz</title>
</head>
<body>
<script type="text/javascript">
var recieved = location.search.substring(1);
var questionAndAnswer = recieved.split('&');
var total = 0;
for (var i = 0; i < questionAndAnswer.length; ++i) {
    var answerArray = questionAndAnswer[i].split('=');
    if (answerArray[0] == "x" || answerArray[0] == "y") {
         continue;
    }
    var answer = answerArray[1];
    total += parseInt(answer);
    // for testing write out the value from each radio button
    document.write(answer + "<br>");
}
document.write(total);
</script>
</body>
</html>

**eskymo** · 03-06-2003, 05:27 AM

hi there

i coudln't get you code to work when using an image for a button, so i just put a style on it instead. this is a link to the quiz. it hasn't got anything in it yet:

http://www.kylieklub.com/members/games/quiz/quiz.html

just thought you might like to see it.

THANKS FOR ALL YOUR HELP !!!!!

cheers

e

Thread: Javascript quiz

Thread Tools

Display

Javascript quiz

validation

Posting Permissions