By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,247 Members | 871 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,247 IT Pros & Developers. It's quick & easy.

Creating multiple choice quiz

P: n/a
Hello Everyone,

I am a beginner in Javascript.I want to create fun quiz tool using
javascript (no database). The feature of that tool is every question
has five choices. The user needs to select three best choices. If they
do, a message window pops up which says good choices or something and
take them to next question. If they don't choose all of the best
choices they get another message like try again but these are not the
best choices and take them back to the same question. Is there any
tutorial which could help me do this or has anyone done something like
this before, which could help me.

VR
Jul 23 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
On 20 Jul 2004 14:01:00 -0700, Vandana Rola wrote:
or has anyone done something like
this before, which could help me.


A quiz type thing? No.. I don't think so,
...is such a thing even *possible*?

I am just *kidding*, sheeshhh!! ;-)

...hmmm lemme see.. start with these 3900 or so..
<http://www.google.com/search?q=%22javascript+source%22+quiz>

But then, you realize that any test written in
(client side) Javascript can be 'cracked' by the
students if they can read Javascript? They can
read the Javascript itself for the answers..

*Unless*.. the Javascript is server-side (very rare)
or you have help from a server side database, or
other server side 'adjudicator' that simply takes
the answers and tells the student 'right/wrong'.

HTH

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology
Jul 23 '05 #2

P: n/a
Lee
Andrew Thompson said:

On 20 Jul 2004 14:01:00 -0700, Vandana Rola wrote:
or has anyone done something like
this before, which could help me.
A quiz type thing? No.. I don't think so,
..is such a thing even *possible*?

..hmmm lemme see.. start with these 3900 or so..
<http://www.google.com/search?q=%22javascript+source%22+quiz>

But then, you realize that any test written in
(client side) Javascript can be 'cracked' by the
students if they can read Javascript? They can
read the Javascript itself for the answers..


Not many of those 3900 examples will fill the OP's requirement
of having three correct answers for each question.

Here's a simple example that also shows that you can make it
non-trivial to read the answers from the client-side script.
In this case, it's not really very hard, but still may be
more trouble than it's worth.

The correct answers are encoded in the "key" attribute as:
Ignore everything except the 5 digits that immediately
follow the first zero.
Those 5 digits correspond to the 5 answer choices.
If the digit is less than 5, then that choice is one
of the correct answers.

<html>
<head>
<script type="text/javascript">

quiz = [ {q: "Which are odd numbers?",
a: ["7", "3", "15", "12", "0"],
key: "631013287575"
},
{q: "Which are U.S. States?",
a: ["Utah", "Apache", "Maine", "Sonora", "Florida"],
key: "2401738283"
},
{q: "Which are mammals?",
a: ["skunk", "tarantula", "dolfin", "human", "aligator"],
key: "7026339154",
}
];

function nextQuestion(){
var question=quiz.pop();
var html="<p>"+question.q+"</p><form>";
for(var i=0;i<question.a.length;i++){
html+="<input type='checkbox'>&nbsp;"+question.a[i]+"<br>";
}
html+="<input type='button' value='Done' onclick='check(this.form,\""
+question.key+"\")'></form>";
document.getElementById("tablet").innerHTML=html;
}
function check(f,key){
key=key.replace(/^.*0/,"").substr(0,5);
for(var i=0;i<key.length;i++) {
if ((key.charAt(i)<"5")!=f.elements[i].checked) {
document.getElementById("tablet").innerHTML+=
"<p>Wrong! Try again.</p>";
return;
}
}
document.getElementById("tablet").innerHTML+="<p>R ight!</p>";
if(quiz.length){
setTimeout("nextQuestion()",500);
} else {
document.getElementById("tablet").innerHTML="<p>Do ne!</p>";
}
}
</script>
</head>
<body onload="nextQuestion()">
<div id="tablet"></div>
</body>
</html>

Jul 23 '05 #3

P: n/a
Lee <RE**************@cox.net> wrote in message news:<cd********@drn.newsguy.com>...
Andrew Thompson said:

On 20 Jul 2004 14:01:00 -0700, Vandana Rola wrote:
or has anyone done something like
this before, which could help me.


A quiz type thing? No.. I don't think so,
..is such a thing even *possible*?

..hmmm lemme see.. start with these 3900 or so..
<http://www.google.com/search?q=%22javascript+source%22+quiz>

But then, you realize that any test written in
(client side) Javascript can be 'cracked' by the
students if they can read Javascript? They can
read the Javascript itself for the answers..


Not many of those 3900 examples will fill the OP's requirement
of having three correct answers for each question.

Here's a simple example that also shows that you can make it
non-trivial to read the answers from the client-side script.
In this case, it's not really very hard, but still may be
more trouble than it's worth.

The correct answers are encoded in the "key" attribute as:
Ignore everything except the 5 digits that immediately
follow the first zero.
Those 5 digits correspond to the 5 answer choices.
If the digit is less than 5, then that choice is one
of the correct answers.

<html>
<head>
<script type="text/javascript">

quiz = [ {q: "Which are odd numbers?",
a: ["7", "3", "15", "12", "0"],
key: "631013287575"
},
{q: "Which are U.S. States?",
a: ["Utah", "Apache", "Maine", "Sonora", "Florida"],
key: "2401738283"
},
{q: "Which are mammals?",
a: ["skunk", "tarantula", "dolfin", "human", "aligator"],
key: "7026339154",
}
];

function nextQuestion(){
var question=quiz.pop();
var html="<p>"+question.q+"</p><form>";
for(var i=0;i<question.a.length;i++){
html+="<input type='checkbox'>&nbsp;"+question.a[i]+"<br>";
}
html+="<input type='button' value='Done' onclick='check(this.form,\""
+question.key+"\")'></form>";
document.getElementById("tablet").innerHTML=html;
}
function check(f,key){
key=key.replace(/^.*0/,"").substr(0,5);
for(var i=0;i<key.length;i++) {
if ((key.charAt(i)<"5")!=f.elements[i].checked) {
document.getElementById("tablet").innerHTML+=
"<p>Wrong! Try again.</p>";
return;
}
}
document.getElementById("tablet").innerHTML+="<p>R ight!</p>";
if(quiz.length){
setTimeout("nextQuestion()",500);
} else {
document.getElementById("tablet").innerHTML="<p>Do ne!</p>";
}
}
</script>
</head>
<body onload="nextQuestion()">
<div id="tablet"></div>
</body>
</html>


Thank you both for replying my question. Lee, I tried to execute the
code you wrote here. I am getting an error "object expected" in line
where we have <body onload="nextQuestion()">. I checked the code but
couldn't find any error. Could you help me.
Jul 23 '05 #4

P: n/a
Lee
Vandana Rola said:

Thank you both for replying my question. Lee, I tried to execute the
code you wrote here. I am getting an error "object expected" in line
where we have <body onload="nextQuestion()">. I checked the code but
couldn't find any error. Could you help me.


Sorry, I hadn't tested in IE.
Remove the comma from the end of this line:

key: "7026339154",

Mozilla let that mistake slide.

Jul 23 '05 #5

P: n/a
Lee <RE**************@cox.net> wrote in message news:<cd*********@drn.newsguy.com>...
Vandana Rola said:

Thank you both for replying my question. Lee, I tried to execute the
code you wrote here. I am getting an error "object expected" in line
where we have <body onload="nextQuestion()">. I checked the code but
couldn't find any error. Could you help me.


Sorry, I hadn't tested in IE.
Remove the comma from the end of this line:

key: "7026339154",

Mozilla let that mistake slide.

I am using the code provided by Lee above to create this tool.
There is one more improvement I would like to make here:
I would like to give the feedback for all the checked answers. Like
in the questions below:
Which are odd numbers:
2
3
4
5
13

if the user selects 2, 3, 5, then I would like to give feedback as
below:
2 Incorrect, 2 is an even number
3 correct
5 correct

I tried to make the improvement in the following function to
accomplish this:

function check(f,key){
var newhtml="";
key=key.replace(/^.*0/,"").substr(0,5);
for(var i=0;i<key.length;i++) {
if ((key.charAt(i)<"5")==f.elements[i].checked)
{
newhtml+= question.a[i] + "<br>Right.<br>";
}
else if ((key.charAt(i)>"5")==f.elements[i].checked)
{
newhtml+= question.a[i] + " <br>Wrong.<br>";

}
else {return};
}
document.getElementById("tablet").innerHTML= newhtml;

It gives me correct feedback for the checked answers. But it also
checks the unchecked answers( which I would like to ignore) and gives
me reverse feedback. e.g. even if 4 and 13 are unchecked it gives
feedback 4 is an odd number and 13 is an even number. Is there a way
to tell JAVAscript to ignore something and do not write it too. I
tried empty statements, but they didn't work either. I really
appreciate your help.

Thanks
Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.