...

View Full Version : javascript quiz



Sugarcoma101
03-09-2005, 12:27 PM
Hi there!

Im trying to create a simple javascript quiz for my website but im a bit stuck on some of it. ive been advised that both the questions and answers should be stored in arrays....theres six questions and theres a multiple choice answer for each question which is viewed and selected by a pull down menu.

at the bottom of the quiz is a button "Score quiz" which shows how well the user has done out of the 6 questions. then id like a button that says "store result" which makes the score visible on the next page, which is the home page.

so far i have the questions with the answers appearing on the pulldown menus (not in arrays tho i cant seem to get it working like that can someone show me here?).

thanks a lot im really stuck here, please help, appreciate it!

Vladdy
03-09-2005, 01:16 PM
What you want to have is a data object that uses arrays where appropriate:


var quizData={
randomOrder: true,
otherQuizOption: value,
questions:[
{ text: "Is grass green?",
answers:[
{ text: "Yes",
score: 1},
{ text: "No",
score: -1},
{ text: "Not sure",
score: 0}]},
{ text: "What color is grass?",
answers:[
{ text: "Red",
score: -1},
{ text: "Green",
score: 1},
{ text: "Yellow",
score: 0}]},
/* Rinse Repeat */
]};


When you get tired of reinventing a wheel, check this out: www.klproductions.com/klquiz.html

Sugarcoma101
03-09-2005, 02:57 PM
ok cool and how do i get that to appear in drop down menu form and how does it keep track of how many right answers there are to display a score at the bottom?

ImperialSpider
03-09-2005, 11:15 PM
It is not in a dropdown format, but It's another option you may want to try out.

Code...

<BODY>
<FORM NAME="quizForm">
<TABLE>
<TR><TD>Black = White</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q0" VALUE="false">
or False <INPUT TYPE="RADIO" NAME="q0" VALUE="true"> ?</TD></TR>
<TR><TD>2 + 2 = 4</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q1" VALUE="true">
or False <INPUT TYPE="RADIO" NAME="q1" VALUE="false"> ?</TD></TR>
<TR><TD>5 - 3 = 1</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q2" VALUE="false">
or False <INPUT TYPE="RADIO" NAME="q2" VALUE="true"> ?</TD></TR>
<TR><TD>7 * 7 = 49</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q3" VALUE="true">
or False <INPUT TYPE="RADIO" NAME="q3" VALUE="false"> ?</TD></TR>
<TR><TD>36 / 6 = 5</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q4" VALUE="false">
or False <INPUT TYPE="RADIO" NAME="q4" VALUE="true"> ?</TD></TR>
<TR><TD>99 - 33 = 66</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q5" VALUE="true">
or False <INPUT TYPE="RADIO" NAME="q5" VALUE="false"> ?</TD></TR>
<TR><TD>33 + 99 = 66</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q6" VALUE="false">
or False <INPUT TYPE="RADIO" NAME="q6" VALUE="true"> ?</TD></TR>
<TR><TD>5 + 4 + 3 = 12</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q7" VALUE="true">
or False <INPUT TYPE="RADIO" NAME="q7" VALUE="false"> ?</TD></TR>
<TR><TD>6 + 5 + 4 = 13</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q8" VALUE="false">
or False <INPUT TYPE="RADIO" NAME="q8" VALUE="true"> ?</TD></TR>
<TR><TD>81 / 9 = 9</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q9" VALUE="true">
or False <INPUT TYPE="RADIO" NAME="q9" VALUE="false"> ?</TD></TR>
</TABLE>

<P>
<INPUT TYPE="BUTTON" onClick="validateAnswers()" VALUE="Check Answers">
Correct: <INPUT TYPE="TEXTBOX" NAME="correct" VALUE="" SIZE="3">
Wrong: <INPUT TYPE="TEXTBOX" NAME="wrong" VALUE="" SIZE="3">
Blank: <INPUT TYPE="TEXTBOX" NAME="blank" VALUE="" SIZE="3">
</FORM>

<SCRIPT LANGUAGE="JavaScript"><!--
function validateAnswers() {
var correct = 0;
var wrong = 0;
var blank = 0;
for (var i=0;i<10;i++) {
var yesChoice = eval("document.quizForm.q" + i + "[0].checked");
var noChoice = eval("document.quizForm.q" + i + "[1].checked");
var yesAnswer = eval("document.quizForm.q" + i + "[0].value");
var noAnswer = eval("document.quizForm.q" + i + "[1].value");

if (yesChoice == noChoice)
blank++; // can't both be checked, thus must be both unchecked
else {
if ((yesChoice.toString() == yesAnswer) &&
(noChoice.toString() == noAnswer))
correct++;
else
wrong++;
}
}
document.quizForm.correct.value = correct;
document.quizForm.wrong.value = wrong;
document.quizForm.blank.value = blank;
}
//--></SCRIPT>

</BODY>


Hope this helps.

ImperialSpider

Sugarcoma101
03-14-2005, 01:17 PM
thanks imperial spider that was helpful! ive modified your code to put in drop down format, but i need to remove where you record how many wrong answers there are and how many were left blank (I only need to record how many right answers were given) but everytime i try to do it the quiz stops working :(

Can someone show me how to modify imperial spiders code so that only the number of correct answers are recorded?

thanks so much!

Sugarcoma101
03-15-2005, 01:39 PM
anyone? :(

ImperialSpider
03-19-2005, 03:59 PM
look in the code, where you see this...



Code:


<P>
<INPUT TYPE="BUTTON" onClick="validateAnswers()" VALUE="Check Answers">
Correct: <INPUT TYPE="TEXTBOX" NAME="correct" VALUE="" SIZE="3">
Wrong: <INPUT TYPE="TEXTBOX" NAME="wrong" VALUE="" SIZE="3">
Blank: <INPUT TYPE="TEXTBOX" NAME="blank" VALUE="" SIZE="3">
</FORM>

and change it to this...

Code:

<P>
<INPUT TYPE="BUTTON" onClick="validateAnswers()" VALUE="Check Answers">
Correct: <INPUT TYPE="TEXTBOX" NAME="correct" VALUE="" SIZE="3">
</FORM>

and that should do it.

Good Luck,

Imperial Spider



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum