Creating multiple choice quiz

V

Vandana Rola

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
 
L

Lee

Andrew Thompson said:
A quiz type thing? No.. I don't think so,
..is such a thing even *possible*?
Click to expand...
..hmmm lemme see.. start with these 3900 or so..
<http://www.google.com/search?q="javascript+source"+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..
Click to expand...

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+"<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.checked) {
document.getElementById("tablet").innerHTML+=
"<p>Wrong! Try again.</p>";
return;
}
}
document.getElementById("tablet").innerHTML+="<p>Right!</p>";
if(quiz.length){
setTimeout("nextQuestion()",500);
} else {
document.getElementById("tablet").innerHTML="<p>Done!</p>";
}
}
</script>
</head>
<body onload="nextQuestion()">
<div id="tablet"></div>
</body>
</html>
 
V

Vandana Rola

Lee said:
Andrew Thompson said:
A quiz type thing? No.. I don't think so,
..is such a thing even *possible*?
Click to expand...
..hmmm lemme see.. start with these 3900 or so..
<http://www.google.com/search?q="javascript+source"+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..
Click to expand...

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+"<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.checked) {
document.getElementById("tablet").innerHTML+=
"<p>Wrong! Try again.</p>";
return;
}
}
document.getElementById("tablet").innerHTML+="<p>Right!</p>";
if(quiz.length){
setTimeout("nextQuestion()",500);
} else {
document.getElementById("tablet").innerHTML="<p>Done!</p>";
}
}
</script>
</head>
<body onload="nextQuestion()">
<div id="tablet"></div>
</body>
</html>
Click to expand...


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.
 
L

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.
Click to expand...

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

key: "7026339154",

Mozilla let that mistake slide.
 
V

Vandana Rola

Lee said:
Vandana Rola said:


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

key: "7026339154",

Mozilla let that mistake slide.
Click to expand...


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.checked)
{
newhtml+= question.a + "<br>Right.<br>";
}
else if ((key.charAt(i)>"5")==f.elements.checked)
{
newhtml+= question.a + " <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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with a multiple choice quiz. 4
[QUIZ] Twitter Personalities (#208) 21
Is C an unsuitable choice as a string parser? 72
[QUIZ] Gathering Ruby Quiz 2 Data (#189) 10
[QUIZ] Music Theory (#229) 27
[QUIZ] Genetic Programming (#212) 4
Digest Ruby Quiz 2 11
[QUIZ] URL Shenanigans (#220) 1

Members online

No members online now.
Total: 40 (members: 0, guests: 40)
Robots: 482

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,055
Latest member
SlimSparkKetoACVReview

Latest Threads

Top