Menu
Thank you for reading this!
I am developing a nonsensical quiz ( I used some existing code for my base) in an effort to teach myself JavaScript. I am currently having a couple of issues and would love some help.
First of all, I want to validate that each question has been answered – is there a way to do this? Also, there are a couple of questions that I would like users to be able to choose more than one answer.
Thanks in advance!
Here is my working site: [URL=”http://www.public.asu.edu/~srempel/quiz.html”]My quiz
Again, any suggestions would be appreciated!
<i>
</i><!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.style1 {font-family: "Trebuchet MS"}
</style>
<title>Project 9 Quiz</title>
<script type="text/javascript" src="Quiz.js"></script>
<script language="javascript" type="text/javascript">
//This script is inspired by http://www.gamarod.com.ar - I used it as a jumping off point for my quiz.
// This portion defines the answers to the questions.
// Extensively modified
var done = new Array;
var yourAns = new Array;
var score = 0;
function getRBtnName(GrpName) {
var sel = document.getElementsByName(GrpName);
var fnd = -1;
var str = '';
for (var i=0; i<sel.length; i++) {
if (sel[i].checked == true) { str = sel[i].value; fnd = i; }
}
// return fnd; // return option index of selection
// comment out next line if option index used in line above <br/>
return str;
}
function StatusAllCheckboxes(IDS,cnt) {
var str = '';
IDS = 'q'+IDS;
var tmp = '';
for (var i=0; i<cnt; i++) {
tmp = document.getElementById(IDS+'_'+i);
if (tmp.checked) { str += tmp.value + '|'; }
}
return str; <br/>
}
// function Engine(question, answer, opt, Qtype) {
function Engine(question, answer, Qtype) {
switch (Qtype) {
case "RB" : yourAns[question] = answer; break;
case "SB" : yourAns[question] = answer; break;
default : yourAns[question] = ''; alert('Invalid question type: '+Qtype); break;
}
}
function EngineCB(question, answer, itemcnt) { // answer is not used at this time
yourAns[question] = StatusAllCheckboxes(question,itemcnt); <br/>
// alert('question: '+question+' :'+yourAns[question]);
}
//This is the code that calculates the score.
function Score(){
score = 0;
var tmp = '';
var answerText = "How awesome are you?<p>"; // alert('Size of QR: '+QR.length);
for (var i=1; i<QR.length; i++) {
answerText = answerText+"<br>Question :"+i+" Your answer: "+yourAns[i]+"<br>";
<i> </i>tmp = QR[i][3];
<i> </i>if (QR[i][0] == 'CB') { tmp = tmp+'|'; }
// alert(i+' : '+tmp+' : '+yourAns[i]+'nn'+answerText+'nn');
<i> </i>if (tmp != yourAns[i]) {
<i> </i> answerText = answerText+"<br>The correct answer was "+QR[i][3]+"<br>"+explainAnswer[i]+"<br>";
<i> </i>} else {
<i> </i> answerText = answerText+" <br>Wooohooo! You got this one right! <br>";
<i> </i> score++;
<i> </i>}
}
answerText=answerText+"<br><br>Your total score is : "+score+" out of "+(QR.length-1)+"<br>";
// for varying number of questions, alter scoring
var ScoreMax = QR.length-1;
var ScoreInc = Math.floor(ScoreMax / 4); // Don't have fewer than 5 questions.
answerText=answerText+"<br>Comment : ";
if(score<=ScoreInc){ answerText=answerText+"It seems as if you need to study your useless trivia a bit more."; }
if(score>=(ScoreInc+1) && score <=(ScoreInc*2)){ answerText=answerText+"Almost average."; }
if(score>=(ScoreInc*2+1) && score <=(ScoreInc*3)){ answerText=answerText+"Hey, pretty good job."; }
if(score>(ScoreInc*3+1)){ answerText=answerText+"You are the master of all!"; }
var w = window.open('', '', 'height=500,width=750,scrollbars');
w.document.open();
w.document.write(answerText);
w.document.close();
}
</script>
</head>
<body>
<p><hr></p>
<p class="style1 style1"><strong>Section Two - Quiz:</strong></p>
<p class="style1 style1">All questions must be answered in order to calculate your score.</p>
<form name="myform" class="style1">
<ol>
<script type="text/javascript">
var str = '';
var tmpr = [];
var resp = ['a','b','c','d','e','f','g','h','i','j']; // allows for up to 10 responses (can have more)
for (q=1; q<QR.length; q++) {
str += '<li>'+QR[q][1]+'</li><br />';
tmpr = QR[q][2].split('|');
switch (QR[q][0]) {
case 'RB' :
for (var r=0; r<tmpr.length; r++) {
str += '<input type="radio" name="q'+q+'" value="'+resp[r]+'"';
str += ' onClick="Engine('+q+',this.value,''+QR[q][0]+'')">';
str += resp[r]+'&nbsp;&nbsp;'+tmpr[r]+'<br />';
} break;
case 'CB' :
for (var r=0; r<tmpr.length; r++) {
str += '<input type="checkbox" id="q'+q+'_'+r+'" name="q'+q+'" value="'+resp[r]+'"';
str += ' onClick="EngineCB('+q+',this.value,'+tmpr.length+')">';
str += resp[r]+'&nbsp;&nbsp;'+tmpr[r]+'<br />';
} break;
case 'SB' :
str += '<select name="q'+q+'" size="1" id="q'+q+'"';
str += ' onClick="Engine('+q+',this.value,''+QR[q][0]+'')">';
for (var r=0; r<tmpr.length; r++) {
str += '<option value="'+resp[r]+'">';
str += tmpr[r]+'</option>';
} str += '</select>'; break;
/* test code for future entries -- not implemented yet
case 'CBM' : break;
case 'SBM' :
str += '<select name="q'+q+'" size="1" id="q'+q+'"';
str += ' onClick="Engine('+q+',this.value,''+QR[q][0]+'')" multiple>';
for (var r=0; r<tmpr.length; r++) {
str += '<option name="q'+q+'" value="'+resp[r]+'">';
str += tmpr[r]+'</option>';
} str += '</select>'; break;
*/
default : str += q+': Invalid type: '+QR[q][0]; break;
}
str += "<p />";
}
document.write(str);
</script> <br/>
<br />
<br />
<input type=button onClick="Score()" value="How awesome am I?">
</div>
</ol>
</form>
</body>
</html>
<i>
</i>// Quiz.js
var QR = [
['Question type','Question','Responses,...','Answers,...'], // format of QR array
['RB', "What was the start and end year of World War I?",
"1905 - 1910|1915 - 1920|1914 - 1918|None of the above","c"],
['CB', "What color is the sky? (Choose the three that best fit)",
"Blue|Red|Grey|White|Orange|Plaid","a|c|d"],
['SB', "Choose the world's fastest bird:",
"Select|Roadrunner|Peregrine falcon|Emu|Bald eagle","c"],
['SB', "What did Spartan warriors have to eat:",
"Select|Twinkies|Potato chips|Plain black broth|Fruit roll up","d"],
['CB', "What are common traits of mammals? (Choose all that apply)",
"Feathers|Warm blood|Prehensile tail|Green eyes|Hair|Lays eggs","b|e"] // No comma after last entry
];
var explainAnswer = [
"", // unused entry
"World War I started in 1914 and ended in 1918.",
"The sky can have any varying shades of blue, white or grey.",
"The Peregrine falcon is the world's speediest bird.",
"Plain black broth kept the Spartan warriors strong and fit. <br>Others are modern day inventions.",
"Mammals have warm blood and hair on their bodies." // No comma after last entry
];
You are amazing! How will I ever be a coder like you...
?[/quote]
Hopefully you won't be. You'll develop your own sense of style and what you consider to be "best coding practices". Sometimes people will tell you that they're actually bad coding practices, which they may be. However, there are some that aren't bad at all; they're just conceived and used before the rest of the world is ready for them. In addition, not all "best practices" work for all languages. Example --
...
[/QUOTE]
If I'm consistent with my style and I obey my rules, why is it better to follow your rules? :eek:[/quote]That's my point exactly.
You are amazing! How will I ever be a coder like you...[/quote]
Hopefully you won't be. You'll develop your own sense of style and what you consider to be "best coding practices".[/quote]Perhaps I switched onto a tangent and stuck with it... Writing is a strong suit of mine, but I seem to have a rather annoying problem with staying focused. :p
0.1.9 — BETA 5.15