...

View Full Version : submit a form question



Vapor
05-26-2005, 07:00 PM
Ok, here is my code. How can I make it so that you click that answers and hit submit and it shows you what is correct and what is incorrect.


<html>
<head>
<title>This is a quiz</title>
</head>
<form>
This is question 1
<br>
<p>
<input type="radio" name="NAME" value="a">Answer A
<br>
<input type="radio" name="NAME" value="b">Answer B
<p>
This is a question 2
<br>
<p>
<input type="radio" name="NAME" value="a">Answer A
<br>
<input type="radio" name="NAME" value="b">Answer B
<p>
<input type="submit" name="submit" value="submit">
</form>
</html>

general knorr
05-26-2005, 08:02 PM
Vapor, initialize an array with the correct answers and compare the form return with the corresponding value in the array. fun with functions. How to get the function to run at 'onClick' is a question for the jsSuperStars.

Vapor
05-26-2005, 08:58 PM
ha :o jsSuperStars indeed

With as much as I know about Javascript I would need some help. I really need to get my self a good JS study book or something.

Thanks though

ImperialSpider
05-27-2005, 05:10 AM
<FORM NAME="quizForm">
<TABLE>
<TR><TD>10 * 3 = 31</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q0" VALUE="false">
or False <INPUT TYPE="RADIO" NAME="q0" VALUE="true"> ?</TD></TR>
<TR><TD>2 + 2 = 4</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q1" VALUE="true">
or False <INPUT TYPE="RADIO" NAME="q1" VALUE="false"> ?</TD></TR>
<TR><TD>5 - 3 = 1</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q2" VALUE="false">
or False <INPUT TYPE="RADIO" NAME="q2" VALUE="true"> ?</TD></TR>
<TR><TD>7 * 7 = 49</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q3" VALUE="true">
or False <INPUT TYPE="RADIO" NAME="q3" VALUE="false"> ?</TD></TR>
<TR><TD>36 / 6 = 5</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q4" VALUE="false">
or False <INPUT TYPE="RADIO" NAME="q4" VALUE="true"> ?</TD></TR>
<TR><TD>99 - 33 = 66</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q5" VALUE="true">
or False <INPUT TYPE="RADIO" NAME="q5" VALUE="false"> ?</TD></TR>
<TR><TD>33 + 99 = 66</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q6" VALUE="false">
or False <INPUT TYPE="RADIO" NAME="q6" VALUE="true"> ?</TD></TR>
<TR><TD>5 + 4 + 3 = 12</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q7" VALUE="true">
or False <INPUT TYPE="RADIO" NAME="q7" VALUE="false"> ?</TD></TR>
<TR><TD>6 + 5 + 4 = 13</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q8" VALUE="false">
or False <INPUT TYPE="RADIO" NAME="q8" VALUE="true"> ?</TD></TR>
<TR><TD>81 / 9 = 9</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q9" VALUE="true">
or False <INPUT TYPE="RADIO" NAME="q9" VALUE="false"> ?</TD></TR>
</TABLE>

<P>
<INPUT TYPE="BUTTON" onClick="validateAnswers()" VALUE="Check Answers">
Correct: <INPUT TYPE="TEXTBOX" NAME="correct" VALUE="" SIZE="3">
</FORM>

<SCRIPT LANGUAGE="JavaScript"><!--
function validateAnswers() {
var correct = 0;
var wrong = 0;
var blank = 0;
for (var i=0;i<10;i++) {
var yesChoice = eval("document.quizForm.q" + i + "[0].checked");
var noChoice = eval("document.quizForm.q" + i + "[1].checked");
var yesAnswer = eval("document.quizForm.q" + i + "[0].value");
var noAnswer = eval("document.quizForm.q" + i + "[1].value");

if (yesChoice == noChoice)
blank++; // can't both be checked, thus must be both unchecked
else {
if ((yesChoice.toString() == yesAnswer) &&
(noChoice.toString() == noAnswer))
correct++;
else
wrong++;
}
}
document.quizForm.correct.value = correct;
document.quizForm.wrong.value = wrong;
document.quizForm.blank.value = blank;
}
//--></SCRIPT>


or this...



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>quiz</title>
<style type="text/css">
dt
{
float:left;
width:8em;
}
</style>
</head>
<body>
<form id="myquiz" method="post" onsubmit="grade();return false">
<fieldset class="question">
<legend>Question 1</legend>

<input type="hidden" value="ab">

<p>
This is question 1 and the answers are both A and B.
</p>

<dl>
<dt><label for="1a">A</label></dt>
<dd><input id="1a" name="q1[]" type="checkbox" value="a"></dd>

<dt><label for="1b">B</label></dt>
<dd><input id="1b" name="q1[]" type="checkbox" value="b"></dd>

<dt><label for="1c">C</label></dt>
<dd><input id="1c" name="q1[]" type="checkbox" value="c"></dd>
</dl>
</fieldset>

<fieldset class="question">
<legend>Question 2</legend>

<input type="hidden" value="c">

<p>
This is question 2, and the answer is C.
</p>

<dl>
<dt><label for="2a">A</label></dt>
<dd><input id="2a" name="q2[]" type="checkbox" value="a"></dd>

<dt><label for="2b">B</label></dt>
<dd><input id="2b" name="q2[]" type="checkbox" value="b"></dd>

<dt><label for="2c">C</label></dt>
<dd><input id="2c" name="q2[]" type="checkbox" value="c"></dd>
</dl>
</fieldset>

<div>
<input type="submit" value="Grade">
</div>
</form>

<script type="text/javascript">
function grade()
{
var questions = getQuestions();

if(questions.length == 0)
{
return;
}

for(var i = 0; i < questions.length; i++)
{
if(questions[i].isCorrect() == false)
{
questions[i].fieldset.style.backgroundColor = "#f00";
}
else
{
questions[i].fieldset.style.backgroundColor = "#0f0";
}
}
}

function getQuestions()
{
var questions = new Array();

var fieldsets = document.forms['myquiz'].getElementsByTagName("fieldset");

for(var i = 0; i < fieldsets.length; i++)
{
if(fieldsets[i].className.search('question') >= 0)
{
questions[questions.length] = new Question(fieldsets[i]);
}
}

return questions;
}

function Question(fieldset)
{
this.fieldset = fieldset;
this.fieldset.style.backgroundColor = "#fff";

this.answer = this.fieldset.getElementsByTagName("input")[0].value;

this.choices = this.getChoices();
}

Question.prototype.getChoices = function ()
{
var inputs = this.fieldset.getElementsByTagName("input");
var checkboxes = new Array();

for(var i = 0; i < inputs.length; i++)
{
if(inputs[i].getAttribute("type") == 'checkbox')
{
checkboxes[checkboxes.length] = inputs[i];
}
}

return checkboxes;
}

Question.prototype.getUserAnswer = function ()
{
var answer = '';
for(var i = 0; i < this.choices.length; i++)
{
if(this.choices[i].checked)
{
answer += this.choices[i].value;
}
}
return answer;
}


Question.prototype.isCorrect = function ()
{
if(this.getUserAnswer() == this.answer)
{
return true;
}
else
{
return false;
}
}
</script>
</body>
</html>


Hope this helps you, maybe you can adjust them to your needs.

Good luck
Imperial Spider



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum