Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Count Radio Button

Posted on 2002-04-22
23
416 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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 

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
 

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

828 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