JavaScript Quiz: Issue Obtaining User's Score

Tidey

09-09-2011, 06:34 AM

Good evening!

After spending the last few days wrecking my brain over a simple JavaScript quiz I decided it was time I asked for help.

The complete code is right beneath this post. The page will display brief instructions followed by a table containing the quiz.

I'm having two rather peculiar problems.

The first is with the Score() function which reads as follows:
function Score(){
for(i=1;i<=10;i++)
if(ans[i]== yourAns[i])
score++;
prequiz.score.value= score;
}

Now unless I'm mistaken (which I am since the score isn't being tabulated correctly) this function essentially uses a for to cycle through both arrays, comparing the user's input against the array containing the right answers. If the contents within index i are the same on both arrays the score increases by one point. Once it cycles through the arrays, it passes score over to prequiz.score.value which will later pass this number to the text box that will display the grade to the user.

The problem I'm experiencing is that the score will either be stuck at 2 or will display as 9 (even though all 10 answers were correct).

Steps I've taken to try to solve this:

Thinking it was the setAnsArray(question, answer) function I added a document.writeline to it. However it showed that the values were being passed correctly to the answer array.
Added a document.writeline to the Score() function. Unlike the point above, score always displays as 00000 regardless of how many right answers I provide.

The second issue I'm having is that the reset button is not working correctly. If I hit reset and answer the first question, the score will come back as double the score displayed before.

Any insight into what is causing this issue is greatly appreciated!

<?xml version="1.0" encoding= "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns= "http://www.w3.org/1999/xhtml">

<head>
<title>Pre-Quiz!</title>

<script type="text/JavaScript">

var ans= new Array(10);
var yourAns= new Array(10);
var score= 0;

ans[0] = "b";
ans[1] = "c";
ans[2] = "c";
ans[3] = "a";
ans[4] = "d";
ans[5] = "c";
ans[6] = "c";
ans[7] = "a";
ans[8] = "b";
ans[9] = "c";

function setAnsArray(question, answer) {
yourAns[question]= answer;
}

function Score(){
for(i=1;i<=10;i++)
if(ans[i]== yourAns[i])
score++;

prequiz.score.value= score;

}

</script>
</head>

<body>

<h1>Pre-Quiz</h1>
<p>The following test will allow you to evaluate your knowledge in programming prior to starting the course.
After completing the test you will receive a score. Should you have any further doubts feel free to bring them
with you on the first day of class.</p>
</body>
<form name="prequiz" action="JavaScript:Score()">
<center>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value= "Reset" /><br><br>
</center>
<b>Score:</b><input type="text" name="score" disabled=true><br>
<hr>
<center><table border="3" width="65%"
summary= "Questions and options are organized in a table.">
<thead>
<tr>
<th>Question</th>
<th>Options</th>
</tr>
</thead>

<tbody>

<tr>
<td><b>1. The following parameter code is used in which control structure?</b><br>
(int i=0; i<= size; i++)<br> </td>
<td><input type="radio" name="q1" value="a" onClick="setAnsArray(1, this.value)">a. If<br>
<input type="radio" name="q1" value="b" onClick="setAnsArray(1, this.value)">b. For<br>
<input type="radio" name="q1" value="c" onClick="setAnsArray(1, this.value)">c. Do-while<br>
<input type="radio" name="q1" value="d" onClick="setAnsArray(1, this.value)">d. While</td>
</tr>

<tr>
<td><b>2. What does the command "cout" do?</b><br></td>
<td><input type="radio" name="q2" value="a" onClick="setAnsArray(2, this.value)">a. Obtains information from the user.<br>
<input type="radio" name="q2" value="b" onClick="setAnsArray(2, this.value)">b. Closes the window.<br>
<input type="radio" name="q2" value="c" onClick="setAnsArray(2, this.value)">c. Displays on screen.<br>
<input type="radio" name="q2" value="d" onClick="setAnsArray(2, this.value)">d. Pauses a process.</td>
</tr>

<tr>
<td><b>3. What is the origin of name Python? (referring to the programming language)</b><br></td>
<td><input type="radio" name="q3" value="a" onClick="setAnsArray(3, this.value)">a. Creator had a pet python.<br>
<input type="radio" name="q3" value="b" onClick="setAnsArray(3, this.value)">b. Named after a student of Plato.<br>
<input type="radio" name="q3" value="c" onClick="setAnsArray(3, this.value)">c. Named after Monty Python's Flying Circus.<br>
<input type="radio" name="q3" value="d" onClick="setAnsArray(3, this.value)">d. Creator was a fan of Greek mythology.</td>
</tr>

<tr>
<td><b>4. What does HTML stand for?</b><br></td>
<td><input type="radio" name="q4" value="a" onClick="setAnsArray(4, this.value)">a. HyperText Markup Language<br>
<input type="radio" name="q4" value="b" onClick="setAnsArray(4, this.value)">b. Hyper Tools for Managing Languages<br>
<input type="radio" name="q4" value="c" onClick="setAnsArray(4, this.value)">c. Heap Text Manager Lead<br>
<input type="radio" name="q4" value="d" onClick="setAnsArray(4, this.value)">d. Horde Take Much Lore</td>
</tr>

<tr>
<td><b>5. Who invented JavaScript?</b><br></td>
<td><input type="radio" name="q5" value="a" onClick="setAnsArray(5, this.value)">a. Bill Gates<br>
<input type="radio" name="q5" value="b" onClick="setAnsArray(5, this.value)">b. Isaac Newton<br>
<input type="radio" name="q5" value="c" onClick="setAnsArray(5, this.value)">c. Elvis Java<br>
<input type="radio" name="q5" value="d" onClick="setAnsArray(5, this.value)">d. Netscape</td>
</tr>

<tr>
<td><b>6. What is a variable?</b><br></td>
<td><input type="radio" name="q6" value="a" onClick="setAnsArray(6, this.value)">a. An unknown.<br>
<input type="radio" name="q6" value="b" onClick="setAnsArray(6, this.value)">b. A value that changes.<br>
<input type="radio" name="q6" value="c" onClick="setAnsArray(6, this.value)">c. The name for a place in the computer's memory where a certain data is stored.<br>
<input type="radio" name="q6" value="d" onClick="setAnsArray(6, this.value)">d. Part of an algebraic expression.</td>
</tr>

<tr>
<td><b>7. What is a compiler?</b><br></td>
<td><input type="radio" name="q7" value="a" onClick="setAnsArray(7, this.value)">a. Converts the target file into a .zip .<br>
<input type="radio" name="q7" value="b" onClick="setAnsArray(7, this.value)">b. Gathers all documents in one.<br>
<input type="radio" name="q7" value="c" onClick="setAnsArray(7, this.value)">c. A program or set of programs that transforms source code from programming language into another computer language.<br>
<input type="radio" name="q7" value="d" onClick="setAnsArray(7, this.value)">d. Secret ingridient in KFC's chicken</td>
</tr>

<tr>
<td><b>8. Define portability:</b><br></td>
<td><input type="radio" name="q8" value="a" onClick="setAnsArray(8, this.value)">a. Characteristic attributed to a program if it can be used in another OS different from the one it was created in without requiring major rework.<br>
<input type="radio" name="q8" value="b" onClick="setAnsArray(8, this.value)">b. Ease to transport the program's disks.<br>
<input type="radio" name="q8" value="c" onClick="setAnsArray(8, this.value)">c. How big the size of the program is.<br>
<input type="radio" name="q8" value="d" onClick="setAnsArray(8, this.value)">d. Time required to download a program.</td>
</tr>

<tr>
<td><b>9. What is an executable file?</b><br></td>
<td><input type="radio" name="q9" value="a" onClick="setAnsArray(9, this.value)">a. A text document containing code.<br>
<input type="radio" name="q9" value="b" onClick="setAnsArray(9, this.value)">b. A file in a format the computar can directly execute.<br>
<input type="radio" name="q9" value="c" onClick="setAnsArray(9, this.value)">c. A virus.<br>
<input type="radio" name="q9" value="d" onClick="setAnsArray(9, this.value)">d. A malicious program.</td>
</tr>

<tr>
<td><b>10. Which of the following is not a programming language? </b><br></td>
<td><input type="radio" name="q10" value="a" onClick="setAnsArray(10, this.value)">a. HTML<br>
<input type="radio" name="q10" value="b" onClick="setAnsArray(10, this.value)">b. Lua<br>
<input type="radio" name="q10" value="c" onClick="setAnsArray(10, this.value)">c. Moolah<br>
<input type="radio" name="q10" value="d" onClick="setAnsArray(10, this.value)">d. C++</td>
</tr>
</tbody>
</table></center>

</form>
</html>

oVTech

09-09-2011, 07:04 AM

See changes ( for an alternative quiz see here: http://www.codingforums.com/showthread.php?p=1092315 ):

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Pre-Quiz!</title>

<script type="text/javascript">

var ans = ['b', 'c', 'c' , 'a', 'd', 'c' , 'c', 'a', 'b' , 'c'];
var yourAns = [];
var score= 0;

function setAnsArray(question, answer) {
yourAns[question] = answer;
}

function Score(){
var i = 0;
for(i; i<ans.length; i++){
if(ans[i] == yourAns[i]){
score += 1;
}
}
alert("You got " + score + " questions right!");
}

</script>
</head>

<body>

<h1>Pre-Quiz</h1>
<p>The following test will allow you to evaluate your knowledge in programming prior to starting the course.
After completing the test you will receive a score. Should you have any further doubts feel free to bring them
with you on the first day of class.</p>
</body>
<form name="prequiz" onsubmit="Score()">
<center>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value= "Reset" /><br><br>
</center>
<b>Score:</b><input type="text" name="score" disabled=true><br>
<hr>
<center><table border="3" width="65%"
summary= "Questions and options are organized in a table.">
<thead>
<tr>
<th>Question</th>
<th>Options</th>
</tr>
</thead>

<tbody>

<tr>
<td><b>1. The following parameter code is used in which control structure?</b><br>
(int i=0; i<= size; i++)<br> </td>
<td><input type="radio" name="q1" value="a" onClick="setAnsArray(0, this.value)">a. If<br>
<input type="radio" name="q1" value="b" onClick="setAnsArray(0, this.value)">b. For<br>
<input type="radio" name="q1" value="c" onClick="setAnsArray(0, this.value)">c. Do-while<br>
<input type="radio" name="q1" value="d" onClick="setAnsArray(0, this.value)">d. While</td>
</tr>

<tr>
<td><b>2. What does the command "cout" do?</b><br></td>
<td><input type="radio" name="q2" value="a" onClick="setAnsArray(1, this.value)">a. Obtains information from the user.<br>
<input type="radio" name="q2" value="b" onClick="setAnsArray(1, this.value)">b. Closes the window.<br>
<input type="radio" name="q2" value="c" onClick="setAnsArray(1, this.value)">c. Displays on screen.<br>
<input type="radio" name="q2" value="d" onClick="setAnsArray(1, this.value)">d. Pauses a process.</td>
</tr>

<tr>
<td><b>3. What is the origin of name Python? (referring to the programming language)</b><br></td>
<td><input type="radio" name="q3" value="a" onClick="setAnsArray(2, this.value)">a. Creator had a pet python.<br>
<input type="radio" name="q3" value="b" onClick="setAnsArray(2, this.value)">b. Named after a student of Plato.<br>
<input type="radio" name="q3" value="c" onClick="setAnsArray(2, this.value)">c. Named after Monty Python's Flying Circus.<br>
<input type="radio" name="q3" value="d" onClick="setAnsArray(2, this.value)">d. Creator was a fan of Greek mythology.</td>
</tr>

<tr>
<td><b>4. What does HTML stand for?</b><br></td>
<td><input type="radio" name="q4" value="a" onClick="setAnsArray(3, this.value)">a. HyperText Markup Language<br>
<input type="radio" name="q4" value="b" onClick="setAnsArray(3, this.value)">b. Hyper Tools for Managing Languages<br>
<input type="radio" name="q4" value="c" onClick="setAnsArray(3, this.value)">c. Heap Text Manager Lead<br>
<input type="radio" name="q4" value="d" onClick="setAnsArray(3, this.value)">d. Horde Take Much Lore</td>
</tr>

<tr>
<td><b>5. Who invented JavaScript?</b><br></td>
<td><input type="radio" name="q5" value="a" onClick="setAnsArray(4, this.value)">a. Bill Gates<br>
<input type="radio" name="q5" value="b" onClick="setAnsArray(4, this.value)">b. Isaac Newton<br>
<input type="radio" name="q5" value="c" onClick="setAnsArray(4, this.value)">c. Elvis Java<br>
<input type="radio" name="q5" value="d" onClick="setAnsArray(4, this.value)">d. Netscape</td>
</tr>

<tr>
<td><b>6. What is a variable?</b><br></td>
<td><input type="radio" name="q6" value="a" onClick="setAnsArray(5, this.value)">a. An unknown.<br>
<input type="radio" name="q6" value="b" onClick="setAnsArray(5, this.value)">b. A value that changes.<br>
<input type="radio" name="q6" value="c" onClick="setAnsArray(5, this.value)">c. The name for a place in the computer's memory where a certain data is stored.<br>
<input type="radio" name="q6" value="d" onClick="setAnsArray(5, this.value)">d. Part of an algebraic expression.</td>
</tr>

<tr>
<td><b>7. What is a compiler?</b><br></td>
<td><input type="radio" name="q7" value="a" onClick="setAnsArray(6, this.value)">a. Converts the target file into a .zip .<br>
<input type="radio" name="q7" value="b" onClick="setAnsArray(6, this.value)">b. Gathers all documents in one.<br>
<input type="radio" name="q7" value="c" onClick="setAnsArray(6, this.value)">c. A program or set of programs that transforms source code from programming language into another computer language.<br>
<input type="radio" name="q7" value="d" onClick="setAnsArray(6, this.value)">d. Secret ingridient in KFC's chicken</td>
</tr>

<tr>
<td><b>8. Define portability:</b><br></td>
<td><input type="radio" name="q8" value="a" onClick="setAnsArray(7, this.value)">a. Characteristic attributed to a program if it can be used in another OS different from the one it was created in without requiring major rework.<br>
<input type="radio" name="q8" value="b" onClick="setAnsArray(7, this.value)">b. Ease to transport the program's disks.<br>
<input type="radio" name="q8" value="c" onClick="setAnsArray(7, this.value)">c. How big the size of the program is.<br>
<input type="radio" name="q8" value="d" onClick="setAnsArray(7, this.value)">d. Time required to download a program.</td>
</tr>

<tr>
<td><b>9. What is an executable file?</b><br></td>
<td><input type="radio" name="q9" value="a" onClick="setAnsArray(8, this.value)">a. A text document containing code.<br>
<input type="radio" name="q9" value="b" onClick="setAnsArray(8, this.value)">b. A file in a format the computar can directly execute.<br>
<input type="radio" name="q9" value="c" onClick="setAnsArray(8, this.value)">c. A virus.<br>
<input type="radio" name="q9" value="d" onClick="setAnsArray(8, this.value)">d. A malicious program.</td>
</tr>

<tr>
<td><b>10. Which of the following is not a programming language? </b><br></td>
<td><input type="radio" name="q10" value="a" onClick="setAnsArray(9, this.value)">a. HTML<br>
<input type="radio" name="q10" value="b" onClick="setAnsArray(9, this.value)">b. Lua<br>
<input type="radio" name="q10" value="c" onClick="setAnsArray(9, this.value)">c. Moolah<br>
<input type="radio" name="q10" value="d" onClick="setAnsArray(9, this.value)">d. C++</td>
</tr>
</tbody>
</table></center>

</form>
</html>

Tidey

09-09-2011, 07:32 AM

Hey oVTech,

First of all thank you very much for the prompt reply! I can't believe I hadn't set the arrays like that >< saves space and looks cleaner too.

I implemented all the changes you made, however I was still experiencing issue with the scoring. The score wasn't displaying on the scorebox I put right under the submit and reset buttons with the alert, so I had to remove that :(

I've also noticed that the answer 'b' doesn't seem to increase the score counter on the first question, while options a, c and d do. :confused:

Old Pedant

09-09-2011, 07:57 PM

There is a bug in that code.

As written, if you call the Score() function again, the score will keep increasing.

The declaration of var score = 0; should be *INSIDE* the Score( ) { ... } function code. Probably first line of the function.

Old Pedant

09-09-2011, 08:10 PM

Old Pedant

09-09-2011, 08:24 PM

How about something as simple as this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pre-Quiz!</title>
<script type="text/javascript">
function getRBValue(group)
{
for ( var b = 0; b < group.length; ++b )
{
if ( group[b].checked ) return Number(group[b].value);
}
return 0;
}

function Score(form)
{
var total = 0;
for ( var q = 1; q <= 10; ++q )
{
total += getRBValue( form["q"+q] );
}
form.score.value = total;
alert("You got " + total + " questions right!");
}
</script>
</head>
<body>

<h1>Pre-Quiz</h1>
<p>The following test will allow you to evaluate your knowledge in programming prior to starting the course.
After completing the test you will receive a score. Should you have any further doubts feel free to bring them
with you on the first day of class.</p>
</body>
<form name="prequiz" onsubmit="Score(this); return false;">
<center>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value= "Reset" /><br/><br/>
</center>
<b>Score:</b><input type="text" name="score" readonly="readonly" /><br/>
<hr/>
<center>
<table border="3" width="65%"
summary= "Questions and options are organized in a table.">
<thead>
<tr>
<th>Question</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr>
<td><b>1. The following parameter code is used in which control structure?</b><br/>
(int i=0; i<= size; i++)<br/> </td>
<td><input type="radio" name="q1" value="0" >a. If<br/>
<input type="radio" name="q1" value="1" >b. For<br/>
<input type="radio" name="q1" value="0" >c. Do-while<br/>
<input type="radio" name="q1" value="0" >d. While</td>
</tr>

<tr>
<td><b>2. What does the command "cout" do?</b><br/></td>
<td><input type="radio" name="q2" value="0" >a. Obtains information from the user.<br/>
<input type="radio" name="q2" value="0" >b. Closes the window.<br/>
<input type="radio" name="q2" value="1" >c. Displays on screen.<br/>
<input type="radio" name="q2" value="0" >d. Pauses a process.</td>
</tr>

<tr>
<td><b>3. What is the origin of name Python? (referring to the programming language)</b><br/></td>
<td><input type="radio" name="q3" value="0" >a. Creator had a pet python.<br/>
<input type="radio" name="q3" value="0" >b. Named after a student of Plato.<br/>
<input type="radio" name="q3" value="1" >c. Named after Monty Python's Flying Circus.<br/>
<input type="radio" name="q3" value="0" >d. Creator was a fan of Greek mythology.</td>
</tr>

<tr>
<td><b>4. What does HTML stand for?</b><br/></td>
<td><input type="radio" name="q4" value="1" >a. HyperText Markup Language<br/>
<input type="radio" name="q4" value="0" >b. Hyper Tools for Managing Languages<br/>
<input type="radio" name="q4" value="0" >c. Heap Text Manager Lead<br/>
<input type="radio" name="q4" value="0" >d. Horde Take Much Lore</td>
</tr>

<tr>
<td><b>5. Who invented JavaScript?</b><br/></td>
<td><input type="radio" name="q5" value="0" >a. Bill Gates<br/>
<input type="radio" name="q5" value="0" >b. Isaac Newton<br/>
<input type="radio" name="q5" value="0" >c. Elvis Java<br/>
<input type="radio" name="q5" value="1" >d. Netscape</td>
</tr>

<tr>
<td><b>6. What is a variable?</b><br/></td>
<td><input type="radio" name="q6" value="0" >a. An unknown.<br/>
<input type="radio" name="q6" value="0" >b. A value that changes.<br/>
<input type="radio" name="q6" value="1" >c. The name for a place in the computer's memory where a certain data is stored.<br/>
<input type="radio" name="q6" value="0" >d. Part of an algebraic expression.</td>
</tr>

<tr>
<td><b>7. What is a compiler?</b><br/></td>
<td><input type="radio" name="q7" value="0" >a. Converts the target file into a .zip .<br/>
<input type="radio" name="q7" value="0" >b. Gathers all documents in one.<br/>
<input type="radio" name="q7" value="1" >c. A program or set of programs that transforms source code from programming language into another computer language.<br/>
<input type="radio" name="q7" value="0" >d. Secret ingridient in KFC's chicken</td>
</tr>

<tr>
<td><b>8. Define portability:</b><br/></td>
<td><input type="radio" name="q8" value="1" >a. Characteristic attributed to a program if it can be used in another OS different from the one it was created in without requiring major rework.<br/>
<input type="radio" name="q8" value="0" >b. Ease to transport the program's disks.<br/>
<input type="radio" name="q8" value="0" >c. How big the size of the program is.<br/>
<input type="radio" name="q8" value="0" >d. Time required to download a program.</td>
</tr>

<tr>
<td><b>9. What is an executable file?</b><br/></td>
<td><input type="radio" name="q9" value="0" >a. A text document containing code.<br/>
<input type="radio" name="q9" value="1" >b. A file in a format the computar can directly execute.<br/>
<input type="radio" name="q9" value="0" >c. A virus.<br/>
<input type="radio" name="q9" value="0" >d. A malicious program.</td>
</tr>

<tr>
<td><b>10. Which of the following is not a programming language? </b><br/></td>
<td><input type="radio" name="q10" value="0" >a. HTML<br/>
<input type="radio" name="q10" value="0" >b. Lua<br/>
<input type="radio" name="q10" value="1" >c. Moolah<br/>
<input type="radio" name="q10" value="0" >d. C++</td>
</tr>
</tbody>
</table>
</center>
</form>
</html>

DanInMa

09-09-2011, 08:56 PM

is it just me or are a lot of people making javascript quizzes thsi week?

Old Pedant

09-09-2011, 09:23 PM

<html>
<head>
<script>
function checkTest(form)
{
if ( form.lotsOfPeople[0].checked )
{
alert("Oh, it's just you.");
} else {
alert("See? Nobody else is doing it.");
}
}
</script>
</head>
<body>
<form>
Is it just me, or are a lot of people making javascript quizzes thsi [sic] week?<br/>
<label><input type="radio" name="lotsOfPeople"> Yes</label>
<label><input type="radio" name="lotsOfPeople"> No</label>
<hr/>
<input type="button" value="Score me!" onclick="checkTest(this.form);"/>
</form>
</body>
</html>

Tidey

09-10-2011, 12:26 AM

I have to ask: WHY would you WANT to capture each click of a radio button?

Why wouldn't you just wait until the user has answered all questions and pushed the "Score me" button?

That code just seems way way overly complex to me.

Now that you point it out, I can't actually give you a valid reason as to why I had it coded that way. However, I'm guessing once I have more experience in JavaScript I could use a function to capture each click and perhaps provide the user with a quick answer to their question?

I had a bit of an issue with the example you posted, took me a bit to realize you had modified the values. Never would have thought of that!

I'm guessing that's something one picks up with experience?

Thank you all very much for the posts!

Old Pedant

09-10-2011, 02:20 AM

I'm guessing that's something one picks up with experience?

Or it's just because we get old an sneaky. My signature used to be "Old age and experience win out over youth and enthusiasm every time." <grin style="sheepish"/>

Old Pedant

09-10-2011, 02:24 AM

The problem with any quiz such as this--where the scoring is done via JavaScript--is that it is as secure as tissue paper. Anybody who has the least smidgen of smarts will do VIEW==>>SOURCE and peek at the HTML and JS code and know the answers.

So the only real way to do real quizzes is to use server-side scoring. PHP/ASP/JSP/etc.

But then, of course, you can't use tricks like I did, where the correct answer is obvious from the value of the button. So there, indeed, you need an array of answers (or equivalent, more likely you will check the answers against values in a DB) and that also serves to keep the HTML simple and the values indistinguishable, as you first posted.