Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2005
    Posts
    220
    Thanks
    1
    Thanked 2 Times in 2 Posts

    submit a form question

    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.

    Code:
    <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>

  • #2
    New Coder
    Join Date
    May 2005
    Location
    georgia,usa
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    Regular Coder
    Join Date
    May 2005
    Posts
    220
    Thanks
    1
    Thanked 2 Times in 2 Posts
    ha 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

  • #4
    Regular Coder
    Join Date
    Jan 2004
    Location
    San Antonio, TX
    Posts
    131
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Cool dont know about your code, but try this...

    Code:
    <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...

    Code:
    <!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
    Last edited by ImperialSpider; 05-27-2005 at 05:11 AM. Reason: adding answers


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •