PDA

View Full Version : Creating a Javascript Quiz?


Roxanna M
10-09-2007, 11:25 AM
I am making a Javascript Quiz which will determine what sort of shopper you are, but I am having trouble getting it to calculate the answer for me. As it is a ‘type’ quiz it looks at how many are assigned to each variable rather than looking at values.

I can’t paste the code below as it is over 1000 characters but will be happy to send it to anyone who may be able to help. I want the correct answer to show when you click on ‘Compute Score’. I have already created inner HTML so that once you have finished the quiz, answering all the questions, it changes when you click on it.

I got the original template from http://www.spacefem.com/tutorials/typequiz.shtml. Any help would be gratefully received.
<HTML>
<HEAD>
<TITLE>
My Quiz
</TITLE>
<link rel="stylesheet" type="text/css" href="http://www.pricerunner.co.uk/style.css">
<script language="JavaScript" type="text/javascript" src="http://www.pricerunner.co.uk/www-static/pricerunner.js"></script>
<script LANGUAGE="JavaScript">
<!--

function process()
{

var chop = 0;
var clever = 0;
var window = 0;
var sniper = 0;
var closet = 0;
var shopaholic = 0;

var f = document.f;
var i = 0;

for (i = 0; i < f.a.length; i++) if (f.a[i].checked) value = f.a[i].value;
if (value == "1") { chop++; }
if (value == "2") { clever++; }
if (value == "3") { window++; }
if (value == "4") { sniper++; }
if (value == "5") { closet++; }
if (value == "6") { shopaholic++; }

for (i = 0; i < f.b.length; i++) if (f.b[i].checked) value = f.b[i].value;
if (value == "1") { chop++; }
if (value == "2") { clever++; }
if (value == "3") { window++; }
if (value == "4") { sniper++; }
if (value == "5") { closet++; }
if (value == "6") { shopaholic++; }
for (i = 0; i < f.c.length; i++) if (f.c[i].checked) value = f.c[i].value;
if (value == "1") { chop++; }
if (value == "2") { clever++; }
if (value == "3") { window++; }
if (value == "4") { sniper++; }
if (value == "5") { closet++; }
if (value == "6") { shopaholic++; }

for (i = 0; i < f.d.length; i++) if (f.d[i].checked) value = f.d[i].value;
if (value == "1") { chop++; }
if (value == "2") { clever++; }
if (value == "3") { window++; }
if (value == "4") { sniper++; }
if (value == "5") { closet++; }
if (value == "6") { shopaholic++; }

for (i = 0; i < f.e.length; i++) if (f.e[i].checked) value = f.e[i].value;
if (value == "1") { chop++; }
if (value == "2") { clever++; }
if (value == "3") { window++; }
if (value == "4") { sniper++; }
if (value == "5") { closet++; }
if (value == "6") { shopaholic++; }
for (i = 0; i < f.f.length; i++) if (f.f[i].checked) value = f.f[i].value;
if (value == "1") { chop++; }
if (value == "2") { clever++; }
if (value == "3") { window++; }
if (value == "4") { sniper++; }
if (value == "5") { closet++; }
if (value == "6") { shopaholic++; }

for (i = 0; i < f.g.length; i++) if (f.g[i].checked) value = f.g[i].value;
if (value == "1") { chop++; }
if (value == "2") { clever++; }
if (value == "3") { window++; }
if (value == "4") { sniper++; }
if (value == "5") { closet++; }
if (value == "6") { shopaholic++; }

/* -------------------------------- */

var out = "0";
i = 0;
var dupe = 0;
var out1 = "";
var out2 = "";
var out3 = "";
var output = "";
if (chop > i) { out ="chop"; i = chop; }
if (clever = i) { out ="clever"; i = clever; dupe++; out1 = "chop"; out2 = "clever"; }
if (clever > i) { out ="clever"; i = clever; dupe = 0; }
if (window = i) { out ="window"; i = window; dupe++; if (dupe = 1) { out2 = "window"; } if (dupe = 2) { out3 = "window"; } }
if (window > i) { out ="window"; i = window; dupe = 0; }
if (sniper = i) { out ="sniper"; i = sniper; dupe++; if (dupe = 1) { out1 = out; out2 = "sniper"; } if (dupe = 2) { out3 = "sniper"; } }
if (sniper > i) { out ="sniper"; i = sniper; dupe = 0; }
if (closet = i) { out ="closet"; i = closet; dupe++; if (dupe = 1) { out1 = out; out2 = "closet"; } if (dupe = 2) { out3 = "closet"; } }
if (closet > i) { out ="closet"; i = closet; dupe = 0; }
if (shopaholic = i) { out ="shopaholic"; i = shopaholic; dupe++; if (dupe = 1) { out1 = out; out2 = "shopaholic"; } if (dupe = 2) { out3 = "shopaholic"; } }
if (shopaholic > i) { out ="shopaholic"; i = shopaholic; }
if (dupe = 0) { ouput = out; }
if (dupe = 1) { output = out1 + " / " + out2; }
if (dupe = 2) { output = out1 + " / " + out2 + " / " + out3; }




/* !!!OUTPUT "output" variable to HTML HERE!!! ---------------------------------- */



//location.href = out + ".shtml";



document.getElementById('score').innerHTML = 'You are a XXXX shopper!';

//}//close of process()
score = Math.round(score/numQues*100);
form.percentage.value = score + "%";
var correctAnswers = "";
for (i=1; i<=numQues; i++) {
correctAnswers += i + ". " + answers[i-1] + "\r\n";
}
form.solutions.value = correctAnswers;
}

Jewel D
10-09-2007, 11:25 AM
Contact:
www.mjleppan.com
for EVERYTHING you need to know re IT

JimmyJoeArt
10-09-2007, 11:31 AM
It looks like you know something about JavaScript so that's good. However, you've got a lot of repeated code and it's not very scalable. It would be best if you could separate the code from the questions. If you need help understanding this code, contact me (in profile):

<form id="quizForm" autocomplete="off"></form>

<script type="text/javascript">
var questions = [
Â*Â*{q: "Question 1 text",
Â*Â*Â*Â*a: [
Â*Â*Â*Â*Â*Â*{theme: "chop", txt: "Answer 1"},
Â*Â*Â*Â*Â*Â*{theme: "clever", txt: "Answer 2"},
Â*Â*Â*Â*Â*Â*{theme: "window", txt: "Answer 3"},
Â*Â*Â*Â*Â*Â*{theme: "sniper", txt: "Answer 4"},
Â*Â*Â*Â*Â*Â*{theme: "closet", txt: "Answer 5"},
Â*Â*Â*Â*Â*Â*{theme: "shopaholic", txt: "Answer 6"}
Â*Â*Â*Â*]
Â*Â*},
Â*Â*{q: "Question 2 text",
Â*Â*Â*Â*a: [
Â*Â*Â*Â*Â*Â*{theme: "chop", txt: "Answer 1"},
Â*Â*Â*Â*Â*Â*{theme: "clever", txt: "Answer 2"},
Â*Â*Â*Â*Â*Â*{theme: "window", txt: "Answer 3"},
Â*Â*Â*Â*Â*Â*{theme: "sniper", txt: "Answer 4"},
Â*Â*Â*Â*Â*Â*{theme: "closet", txt: "Answer 5"},
Â*Â*Â*Â*Â*Â*{theme: "shopaholic", txt: "Answer 6"}
Â*Â*Â*Â*]
Â*Â*},
Â*Â*{q: "Question 3 text",
Â*Â*Â*Â*a: [
Â*Â*Â*Â*Â*Â*{theme: "chop", txt: "Answer 1"},
Â*Â*Â*Â*Â*Â*{theme: "clever", txt: "Answer 2"},
Â*Â*Â*Â*Â*Â*{theme: "window", txt: "Answer 3"},
Â*Â*Â*Â*Â*Â*{theme: "sniper", txt: "Answer 4"},
Â*Â*Â*Â*Â*Â*{theme: "closet", txt: "Answer 5"},
Â*Â*Â*Â*Â*Â*{theme: "shopaholic", txt: "Answer 6"}
Â*Â*Â*Â*]
Â*Â*}
];

function getRadio(txt, idx) {
Â*Â*var label = document.createElement( "label" );
Â*Â*var radio = document.createElement( "input" );
Â*Â*radio.setAttribute( "type", "radio" );
Â*Â*radio.setAttribute( "name", "q" + idx );
Â*Â*label.appendChild( radio );
Â*Â*label.appendChild( document.createTextNode(" " + txt) );
Â*Â*return label;
}

function buildForm(frm) {
Â*Â*frm.setAttribute( "onsubmit", "return score(this)" );
Â*Â*var qList, question, qIdx, aIdx, submitBtn;
Â*Â*for (qIdx = 0; qIdx < questions.length; qIdx++) {
Â*Â*Â*Â*qList = document.createElement( "fieldset" );
Â*Â*Â*Â*qList.style.width = "30em";
Â*Â*Â*Â*question = document.createElement( "legend" );
Â*Â*Â*Â*question.style.fontWeight = "bold";
Â*Â*Â*Â*question.appendChild( document.createTextNode( questions[qIdx].q ) );
Â*Â*Â*Â*qList.appendChild( question );
Â*Â*Â*Â*for (aIdx = 0; aIdx < questions[ qIdx ].a.length; aIdx++) {
Â*Â*Â*Â*Â*Â*qList.appendChild( getRadio(questions[ qIdx ].a[ aIdx ].txt, qIdx) );
Â*Â*Â*Â*Â*Â*qList.appendChild( document.createElement( "br" ) );
Â*Â*Â*Â*}
Â*Â*Â*Â*frm.appendChild( qList );
Â*Â*}
Â*Â*submitBtn = document.createElement( "input" );
Â*Â*submitBtn.setAttribute( "type", "submit" );
Â*Â*submitBtn.setAttribute( "value", "Score Quiz" );
Â*Â*frm.appendChild( submitBtn );
}

function score(frm) {
Â*Â*var qIdx, aIdx, theme;
Â*Â*var answers = {
Â*Â*Â*Â*chop: 0,
Â*Â*Â*Â*clever: 0,
Â*Â*Â*Â*window: 0,
Â*Â*Â*Â*sniper: 0,
Â*Â*Â*Â*closet: 0,
Â*Â*Â*Â*shopaholic: 0
Â*Â*};
Â*Â*for (var qIdx = 0; qIdx < questions.length; qIdx++) {
Â*Â*Â*Â*theme = "";
Â*Â*Â*Â*for(aIdx = 0; aIdx < frm["q" + qIdx].length; aIdx++) {
Â*Â*Â*Â*Â*Â*if (frm[ "q" + qIdx ][ aIdx ].checked) {
Â*Â*Â*Â*Â*Â*Â*Â*theme = questions[ qIdx ].a[ aIdx ].theme;
Â*Â*Â*Â*Â*Â*}
Â*Â*Â*Â*}
Â*Â*Â*Â*if (answers[ theme ] != null) {
Â*Â*Â*Â*Â*Â*answers[ theme ]++;
Â*Â*Â*Â*}
Â*Â*}
Â*Â*var score, highestScore = 0;
Â*Â*var highestTheme = "";
Â*Â*for (theme in answers) {
Â*Â*Â*Â*score = answers[theme];
Â*Â*Â*Â*if (score > highestScore) {
Â*Â*Â*Â*Â*Â*highestScore = score;
Â*Â*Â*Â*Â*Â*highestTheme = theme;
Â*Â*Â*Â*} else if (score > 0 && score == highestScore) {
Â*Â*Â*Â*Â*Â*highestTheme += " and " + theme;
Â*Â*Â*Â*}
Â*Â*}
Â*Â*if (highestScore == 0) {
Â*Â*Â*Â*alert("Please answer the questions before you score the quiz.");
Â*Â*} else {
Â*Â*Â*Â*alert("You are a " + highestTheme + " shopper");
Â*Â*}
Â*Â*return false;
}

window.onload = function() {
Â*Â*if (document.getElementById) {
Â*Â*Â*Â*buildForm( document.getElementById( "quizForm" ) );
Â*Â*}
}
</script>