Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 438
  • Last Modified:

Count Radio Button

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
twlew
Asked:
twlew
  • 10
  • 9
  • 4
1 Solution
 
estraussCommented:
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
 
fritz_the_blankCommented:
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
 
twlewAuthor Commented:
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
twlewAuthor Commented:
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
 
fritz_the_blankCommented:
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
 
twlewAuthor Commented:
Fritz,

How to work on the Answers.htm page ?

I cannot get the answer there

thanks
0
 
estraussCommented:
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
 
twlewAuthor Commented:
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
 
estraussCommented:
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
 
fritz_the_blankCommented:
twlew,

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

Fritz the Blank
0
 
fritz_the_blankCommented:
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
 
twlewAuthor Commented:
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
 
estraussCommented:
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
 
fritz_the_blankCommented:
My JavaScript solution doesn't require that you use the server.

Fritz the Blank
0
 
twlewAuthor Commented:
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
 
fritz_the_blankCommented:
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
 
twlewAuthor Commented:
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
 
fritz_the_blankCommented:
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
 
fritz_the_blankCommented:
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
 
twlewAuthor Commented:
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
 
fritz_the_blankCommented:
TWLEW,

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

Fritz the Blank
0
 
twlewAuthor Commented:
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
 
fritz_the_blankCommented:
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.

  • 10
  • 9
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now