PDA

View Full Version : java script quiz using string and onbody load function



tomwaits4noman
03-11-2009, 05:50 PM
Hi I am trying to program a quiz for site, with the java in a separate file to the html and using a function command in the html.

I have linked the javascript file to the html document but I can't get the button to get the score


Have supplied Javascript code below.

thanks.

var qList = new Array();
//qList[0] = new q_and_a("What color is grass?", "green", 1);
var newAnswers0 = new Array("green", "blue", "red", "yellow");
qList[0] = new q_and_a("What color is grass?", newAnswers0, 0, 1);

var newAnswers1 = new Array("green", "blue", "red", "yellow");
qList[1] = new q_and_a("What color is the sky?", newAnswers1, 1, 2);

var newAnswers2 = new Array("50", "51", "53", "55");
qList[2] = new q_and_a("What is 10 + 43?", newAnswers2, 2, 3);

var newAnswers3 = new Array("2", "3", "4", "5");
qList[3] = new q_and_a("What is 100\/20?", newAnswers3, 3, 4);

var newAnswers4 = new Array("Galway", "Cork", "Dublin", "Limerick");
qList[4] = new q_and_a("What is the capital of Ireland?", newAnswers4, 2, 5);

function q_and_a(que, ans, correctans, pos)
{
this.question = que;
this.answer = ans;
this.myPos = pos;
this.correctans = correctans;
this.draw = draw;
this.check = check;
}

function draw(div_id)
{
var the_string = "";
the_string += this.myPos + ". " + this.question + "<br />";


//the_string += "<input type=\"text\" value=\"What is your answer?\" id=\"q" + this.myPos + "\" /><br /><br />";
the_string += this.answer[0] + "<input type=\"radio\" name=\"pNames"+this.myPos+"\" value=\"0\" onclick=\"moveThis(this.value);\"><br />";
the_string += this.answer[1] + "<input type=\"radio\" name=\"pNames"+this.myPos+"\" value=\"1\" onclick=\"moveThis(this.value);\"><br />";
the_string += this.answer[2] + "<input type=\"radio\" name=\"pNames"+this.myPos+"\" value=\"2\" onclick=\"moveThis(this.value);\"><br />";
the_string += this.answer[3] + "<input type=\"radio\" name=\"pNames"+this.myPos+"\" value=\"3\" onclick=\"moveThis(this.value);\"><br />";
// this is where I am i need to do a check function to check the position of the answerQ3
//the_string += "<input type=\"hidden\" id=\"name"+this.myPos+"\" />"

//John <input type="radio" name="pNames" value="0" onclick="moveThis(this.value);"><br />
//Jane <input type="radio" name="pNames" value="1" onclick="moveThis(this.value);"><br />
//Mary <input type="radio" name="pNames" value="2" onclick="moveThis(this.value);"><br />
//<input type="hidden" id="name" />

document.getElementById(div_id).innerHTML += the_string;
}

function check(ans)
{
if(this.answer.toLowerCase() == ans.toLowerCase())
{
return 1;
}
else
{
return 0;
}
}

function checkAll()
{
var score = 0;
for(i=0;i<qList.length;i++)
{
the_div = "q" + qList[i].myPos;
//retrives the answer
the_answer = document.getElementById(the_div).value;

temp_score = qList[i].check(the_answer);

if(temp_score == 0)
document.getElementById(the_div).style.backgroundColor = "red";
else
document.getElementById(the_div).style.backgroundColor = "green";
score += temp_score;
}
document.getElementById('submenu').innerHTML = "You scored " + score + " out of " + qList.length + ".";
}

function drawQSheet(questions, div_id)
{
document.getElementById(div_id).innerHTML = "<u><h3>Questions</h3></u>";

for(i=0;i<questions.length;i++)
{
questions[i].draw(div_id);
}
document.getElementById(div_id).innerHTML += "<br /><button onclick=\"checkAll();\">Check your answers</button><br /><br />";
}

Nile
03-11-2009, 09:50 PM
Try this (http://home.comcast.net/~jscheuer1/side/quiz10.htm).

(made by John) (http://www.dynamicdrive.com/forums/member.php?u=2033)

Larry Battle
04-08-2009, 09:19 AM
Where is the function moveThis()? You didn't included it in your source.

Try jQuizMe to make online quizzes.
bateru.com/jquery/jquizme/

Here is what you would do for the first two questions.

HTML:

<div id="myQuiz"></div>

Javascript:

var quiz = [
{ "ques": "What color is grass?", "ans": "green", "ansSel": ["blue", "red", "yellow"] }, //question 1
{ "ques": "What color is the sky", "ans": "blue", "ansSel": ["blue", "red", "yellow"] } // question 2
];
options = { "quizType":"multipleChoice" };

$( "#myQuiz" ).jQuizMe( quiz, options ); //Done.