Solved

Count Radio Button

Posted on 2002-04-22
23
408 Views
Last Modified: 2007-12-19
This is a quite easy question about Javascript, but I am a beginner, so I need help

I am working on a web page which has about 26 True/False question(using radio button).

I want the user to do the T/F Questions, and then click Submit button. Another page will come up to show how many T and F answer the user has been selected and how many question he/she answered over the 26 question.

*Assume all the Questions are False.

ASAP please !!
0
Comment
Question by:twlew
  • 10
  • 9
  • 4
23 Comments
 
LVL 1

Expert Comment

by:estrauss
ID: 6960542
Here is a chunk of script addapted from one I wrote to basically count up the number of checkboxes checked. The script for Radio buttons could be similar.

     for (i=0; i < document.formname.elements.length; i++)
          {
          if ((document.formname.elements[i].name.indexOf("question")!=-1) && document.formname.elements[i].value="true")               {
         numbertrue++
        }
     if ((document.formname.elements[i].name.indexOf("question")!=-1) && document.formname.elements[i].value="false")
         {
          numberfalse++
         }
         number answered=numbertrue+numberfalse
     }

I think that will work. It should if I made no typos!
Ethan
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 6960607
Here is something that I put together for someone once:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<SCRIPT LANGUAGE=javascript>
<!--
function checkAnswer(strQuestion, iAnswers)
{
//strQuestion is the name of the radio button, iAnswers is the number of possible answers
var iQuestionNumber, strAnswer

//get the question number to seach the array
iQuestionNumber = strQuestion.substring(5,6);

//Populate an array with the correct answers
var arrQuestions = new Array(4)
arrQuestions[0] = ""
arrQuestions[1] = "C"
arrQuestions[2] = "B"
arrQuestions[3] = "A"

//Loop through the radio button, determine which answer is given
//Compare that answer with the answer key in the array

for(i=0;i<iAnswers; i++)
    {
    if(eval("document.form1." + strQuestion + "[" + i + "].checked"))
         {
         strAnswer =(eval("document.form1." + strQuestion + "[" + i + "].value"));
         if(strAnswer==arrQuestions[iQuestionNumber])
              {
              alert("Correct!");
              }
         else
              {
              alert("Please try again.")
              }
         break;
         }
    }
}
//-->
</SCRIPT>



<TITLE></TITLE>
</HEAD>
<BODY>
<FORM action="" method=POST id=form1 name=form1><p>
Question 1<br>
A<INPUT type="radio" id=radio1 name=radio1 value=A onClick="JavaScript:checkAnswer(this.name, 4)">
B<INPUT type="radio" id=radio1 name=radio1 value=B onClick="JavaScript:checkAnswer(this.name, 4)">
C<INPUT type="radio" id=radio1 name=radio1 value=C onClick="JavaScript:checkAnswer(this.name, 4)">
D<INPUT type="radio" id=radio1 name=radio1 value=D onClick="JavaScript:checkAnswer(this.name, 4)">
<p>
Question 2<br>
A<INPUT type="radio" id=radio2 name=radio2 value=A onClick="JavaScript:checkAnswer(this.name, 4)">
B<INPUT type="radio" id=radio2 name=radio2 value=B onClick="JavaScript:checkAnswer(this.name, 4)">
C<INPUT type="radio" id=radio2 name=radio2 value=C onClick="JavaScript:checkAnswer(this.name, 4)">
D<INPUT type="radio" id=radio2 name=radio2 value=D onClick="JavaScript:checkAnswer(this.name, 4)">
<p>
Question 3<br>
A<INPUT type="radio" id=radio3 name=radio3 value=A onClick="JavaScript:checkAnswer(this.name, 4)">
B<INPUT type="radio" id=radio3 name=radio3 value=B onClick="JavaScript:checkAnswer(this.name, 4)">
C<INPUT type="radio" id=radio3 name=radio3 value=C onClick="JavaScript:checkAnswer(this.name, 4)">
D<INPUT type="radio" id=radio3 name=radio3 value=D onClick="JavaScript:checkAnswer(this.name, 4)">
<p>
</FORM>
<P>&nbsp;</P>

</BODY>
</HTML>
0
 

Author Comment

by:twlew
ID: 6960749
I am a newbabie of Javascript, so on the "Submit" button
what should I do to link to other page(answer page) which show the Total of T and F ?

How to link them ?
0
 

Author Comment

by:twlew
ID: 6960761
Ethan,

If you don't mind, could you write the whole HTML code for me or send it to me to twlew@yahoo.com

thanks


Fritz,
The example you gave me is the Multiple choice question, it's not what I want, but Thanks a lot
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 6960890
Here is an example with True/False questions. You'll need to parse the URL on your response page:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
function countResponses()
{
var numCorrect=0
var numIncorrect=0
var arrLength = document.forms[0].length
     for(i=0;i<arrLength;i++){
          if(document.forms[0].elements[i].type=="radio"){
               if(document.forms[0].elements[i].checked){
                    if(document.forms[0].elements[i].value=="Correct"){
                         numCorrect++;
                    }else{
                         numIncorrect++
                    }
               }
          }
     }
document.forms[0].action="answers.htm?Correct=" + numCorrect + "&Incorrect=" + numIncorrect;
}
//-->
</SCRIPT>

</HEAD>
<BODY>

<FORM action="" method=POST id=form1 name=form1 onSubmit="javascript:countResponses()">
Question 1<br>
True<INPUT type="radio"  name=radio1 value="Correct">
False<INPUT type="radio"  name=radio1 value="Incorrect"><p>
Question 2<br>
True<INPUT type="radio"  name=radio2 value="Incorrect">
False<INPUT type="radio"  name=radio2 value="Correct"><p>
Question 3<br>
True<INPUT type="radio"  name=radio3 value="Correct">
False<INPUT type="radio"  name=radio3 value="Incorrect"><p>
<INPUT type="submit" value="Submit" id=submit1 name=submit1>
<INPUT type="reset" value="Reset" id=reset1 name=reset1>
</FORM>
</BODY>
</HTML>
0
 

Author Comment

by:twlew
ID: 6960943
Fritz,

How to work on the Answers.htm page ?

I cannot get the answer there

thanks
0
 
LVL 1

Expert Comment

by:estrauss
ID: 6960962
Hi twlew,
   You will need to either do something sneaky like make a hidden frame (A pain) to keep track of values or have a seperate answer page which can prase out a query string (take a look at http://www.experts-exchange.com/javascript/Q.20292307.html).
    Do you need this info appear on a new page? You could have in appear an alert easily or in a text box pretty easily. Alternately you could rewrite the whole page with this info.
Ethan
0
 

Author Comment

by:twlew
ID: 6960992
Ethan,

Ya, I want it(the answer) appear on a new page. I don't want "Alert" or Message Box pop up for answer.  

I read the URL you gave me, the prase name from POST in Javascript should be in SEVER ??

It should be on the SEVER, I better use ASP, coz I know about ASP.
0
 
LVL 1

Expert Comment

by:estrauss
ID: 6960995
Hi twlew,
   You will need to either do something sneaky like make a hidden frame (A pain) to keep track of values or have a seperate answer page which can prase out a query string (take a look at http://www.experts-exchange.com/javascript/Q.20292307.html).
    Do you need this info appear on a new page? You could have in appear an alert easily or in a text box pretty easily. Alternately you could rewrite the whole page with this info.
Ethan
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 6960997
twlew,

Doing this in ASP is easy; Javascript only is much harder.

Fritz the Blank
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 6961009
Here is how you parse the URL values:

function getFormString()
{
strFormString = location.href;
iPosition = strFormString.indexOf("?");
strFormString = strFormString.substring(iPosition + 1,strFormString.length );
arrElements = strFormString.split("&");
for(i=0; i<arrElements.length; i++)
     {
     strTemp = arrElements[i];
     strTemp = replace(strTemp,'+',' ');
     document.write(strTemp + "<br>");
     }
}



0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:twlew
ID: 6961013
Fritz and Ethan,

The reason that I tried to use Javascript is because I think it won't need through the server. And now I know that Javascript still need through the sever. Oh well, thank you so much...

Any idea ?
0
 
LVL 1

Expert Comment

by:estrauss
ID: 6961020
Sorry about the double post...
Anyway, if you know asp and you are running things to a new page anyway, it might be easiest to just do this in asp. I don't see a real advantage of JavaScript unless you want to process something before you submit the page.
Ethan
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 6961034
My JavaScript solution doesn't require that you use the server.

Fritz the Blank
0
 

Author Comment

by:twlew
ID: 6961045
Fritz,

Could you paste the URL code of the answer.htm page for me ? Coz I am confuse with the parse you talked about.
Thanks

0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 6961274
page 1, test.htm:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
function countResponses()
{
var numCorrect=0
var numIncorrect=0
var arrLength = document.forms[0].length
    for(i=0;i<arrLength;i++){
         if(document.forms[0].elements[i].type=="radio"){
              if(document.forms[0].elements[i].checked){
                   if(document.forms[0].elements[i].value=="Correct"){
                        numCorrect++;
                   }else{
                        numIncorrect++
                   }
              }
         }
    }
document.forms[0].action="answer.htm?Correct=" + numCorrect + "&Incorrect=" + numIncorrect + "&Total="
+ (parseInt(numCorrect,10) + parseInt(numIncorrect,10));
}
//-->
</SCRIPT>

</HEAD>
<BODY>

<FORM action="" method=POST id=form1 name=form1 onSubmit="javascript:countResponses()">
Question 1<br>
True<INPUT type="radio"  name=radio1 value="Correct">
False<INPUT type="radio"  name=radio1 value="Incorrect"><p>
Question 2<br>
True<INPUT type="radio"  name=radio2 value="Incorrect">
False<INPUT type="radio"  name=radio2 value="Correct"><p>
Question 3<br>
True<INPUT type="radio"  name=radio3 value="Correct">
False<INPUT type="radio"  name=radio3 value="Incorrect"><p>
<INPUT type="submit" value="Submit" id=submit1 name=submit1>
<INPUT type="reset" value="Reset" id=reset1 name=reset1>
</FORM>
</BODY>
</HTML>


=====================================================

part 2, answer.htm:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
function getFormString()
{
    var strFormString = location.href;
    var iPosition = strFormString.indexOf("?");
    strFormString = strFormString.substring(iPosition + 1,strFormString.length );
    var arrElements = strFormString.split("&");
    var i=0;
    for(i=0;i<arrElements.length;i++){
        document.write(arrElements[i] + "<br>");
    }
}

//-->
</SCRIPT>


</HEAD>
<BODY onLoad="javascript:getFormString()">

<P>&nbsp;</P>

</BODY>
</HTML>
0
 

Author Comment

by:twlew
ID: 6961285
Fritz,

In the Answers.htm can you put the answer like this:

You have selected ___ Correct and
You have selected ___ InCorrect.


instead of just showing Correct= XX

??
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 6961326
You're asking a lot for 50 points....

I have to take off now, but I'll try to get to this tomorrow.

Fritz the Blank
0
 
LVL 46

Accepted Solution

by:
fritz_the_blank earned 100 total points
ID: 6961472
Okay,

Use this for the answer.htm, and you should be set:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
function getFormString()
{
     var strFormString = location.href;
     var iPosition = strFormString.indexOf("?");
     strFormString = strFormString.substring(iPosition + 1,strFormString.length );
     var arrElements = strFormString.split("&");
     strTemp = arrElements[0];
     iPosition= strTemp.lastIndexOf("=")
     strTemp = strTemp.substring(iPosition +1, strTemp.length)
     document.writeln("You have " + strTemp + " correct answer(s). <br>");
     
     strTemp = arrElements[1];
     iPosition= strTemp.lastIndexOf("=")
     strTemp = strTemp.substring(iPosition +1, strTemp.length)
     document.write("You have " + strTemp + " incorrect answer(s). <br>");
     
     strTemp = arrElements[2];
     iPosition= strTemp.lastIndexOf("=")
     strTemp = strTemp.substring(iPosition +1, strTemp.length)
     document.write("You have answered " + strTemp + " total question(s). <br>");
             
}

//-->
</SCRIPT>


</HEAD>
<BODY onLoad="javascript:getFormString()">

<P>&nbsp;</P>

</BODY>
</HTML>
0
 

Author Comment

by:twlew
ID: 6961701
Fritz,

Thank you. Here you go 100 point !!


Ethan,
Thank you for you time, I would like to give you point too, but it only can choose one. Anyway, really thanks for your help
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 6962582
TWLEW,

Why the B instead of an A? Doesn't this code do exactly what you asked for?

Fritz the Blank
0
 

Author Comment

by:twlew
ID: 6963122
Fritz,

The code is good, but got some error which I select all T or F, it will said either 2T 1F or 2F 1T.

Thanks anyway.
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 6967057
D'uh, that's what the code says--look at the radio button values. You can of course change the values to whatever you like:

True<INPUT type="radio"  name=radio1 value="Correct">
False<INPUT type="radio"  name=radio1 value="Incorrect"><p>
Question 2<br>
True<INPUT type="radio"  name=radio2 value="Correct">
False<INPUT type="radio"  name=radio2 value="Incorrect"><p>
Question 3<br>
True<INPUT type="radio"  name=radio3 value="v">
False<INPUT type="radio"  name=radio3 value="Incorrect"><p>


or

True<INPUT type="radio"  name=radio1 value="Incorrect">
False<INPUT type="radio"  name=radio1 value="Correct"><p>
Question 2<br>
True<INPUT type="radio"  name=radio2 value="Incorrect">
False<INPUT type="radio"  name=radio2 value="Correct"><p>
Question 3<br>
True<INPUT type="radio"  name=radio3 value="Incorrect">
False<INPUT type="radio"  name=radio3 value="Correct"><p>



Fritz the Blank
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now