new to javascript

Dev Shed Forums Sponsor:

April 10th, 2001, 10:17 AM

Susan_Q

Junior Member

Join Date: Apr 2001

Posts: 3

Time spent in forums: < 1 sec
Reputation Power: 0

HELLO ALL,
can someone please help me with my simple JS quiz.
I want to know how to scroll through radio buttons when doing a comparison and using a simple increment that checks through the answers array and the elements in the form. I can get this quiz working with text boxes and select menus because they can hold multiple answers and they only take up one elements[]but radio buttons are different because each possible answer uses an elements[] array. I want to get a quiz working that uses radio buttons and maybe 2-4 alternatives to each question. I can't have JS code eg onClick to each question. Use what i have below, because it is easy to understand and i am only a beginner.

Thanks heaps Susie

<html>
<head>
<script language="javascript">
function addQuiz(){

var answers = new Array(1)
answers[0]="B";
correct=0;
for(var i=0; i<answers.length; i++){
if (answers[i]==myform.elements[i].value)
{
correct++;
}
}
alert("you got " + correct + " right!")
}
</script>
<head>
<body bgcolor="yellow">
<h2>Test Quiz</h2><hr>
<h3>who invented javascript</h3>
<form name= "myform">
<input type="radio" name="question" value="A">Microsoft<BR>
<input type="radio" name="question" value="B">Netscape<BR>
<P>

<input type="button" value="score" onclick="addQuiz()">
<input type="reset" value="reset" >
</form>
</body>
</html>

April 10th, 2001, 11:02 AM

epl

Contributing User

Join Date: Mar 2001

Location: Dublin

Posts: 413

Time spent in forums: 2 h 18 m 18 sec
Reputation Power: 13

Susie,

This works for me on IE5, but I will only work if all questions have to be answered by clicking on radios.
You should be able to amend it easily enough to include text answers as well.

Code:

<html> 
 <head> 
  <script language="javascript"> 
   function addQuiz(thisForm)
    {var answers=new Array(1) 
      answers["question"]="B"; 

     var results=new Array(thisForm.elements.length); 
     for (var i=0;i<results.length;i++) {results[i]=false;}

     for (var i=0;i<thisForm.elements.length;i++)
      {var el=thisForm.elements[i];
       if (el.type=="radio")
        {results[i]=(el.checked&&(el.value==answers[el.name]));}
       else {results[i]=false;}
      }

     var correct=0;
     for (var i=0;i<results.length;i++) {correct+=(results[i]?1:0);}
     alert("you got " + correct + " right!") ;
    } 
  </script> 
 <head> 
 <body bgcolor="yellow"> 
  <h2>Test Quiz</h2><hr> 
  <h3>who invented javascript</h3> 
  <form name= "myform"> 
   <input type="radio" name="question" value="A">Microsoft<BR> 
   <input type="radio" name="question" value="B">Netscape<BR> 
   <p> 
   <input type="button" value="score" onclick="addQuiz(this.form);"> 
   <input type="reset" value="reset"> 
  </form> 
 </body> 
</html>

Ed.

April 10th, 2001, 10:19 PM

Susan_Q

Junior Member

Join Date: Apr 2001

Posts: 3

Time spent in forums: < 1 sec
Reputation Power: 0

thanks epl...but

Thankyou epl, you know your Javascript! You should write a book on it!

But the problem is i only understand bits of it. I want to fully understand it because i have to be able to explain it. Therefore i can't use it if i don't undestand all of it. Each bit of info goes through one for loop then to the next for loop right or can it be done simultaneously. Yes some of us are a bit Javascript challenged! hehehe.

Can you use a var count in the code (answers[i]==myform.elements[i, count].value) to make it stay at [0] but scroll through 2-4 radio buttons to see if answer[0] is equal to any of the value(which is B) of these radio buttons.

The problem is once you include multiple for loops i get confused. I suppose it's to hard to have just 1 for loop in my test quiz code unless i include a hidden array and use onClick=answers[0]="value", but i am not supposed to have JS in the HTML for all the radio buttons.

As i said in my first post i can get the quiz working with a select options box because they only take 1 element which = 1 answer[] Array. But i think we have to use radio buttons....AAAARRGHHH! The quiz has to be set up so the user can modify it. Which means that it has to be simple.

If you can make the quiz easy to understand(for the novices) with a couple of variables and one for loop let me know. This includes all you JS geniuses out there.

Thanks

Susie

April 19th, 2001, 02:34 AM

SavageKid

Junior Member

Join Date: Apr 2001

Location: Chennai,India

Posts: 25

Time spent in forums: < 1 sec
Reputation Power: 0

Savage here

Hi Susan,

Try this.

<html>
<head>
<script language="javascript">
var correct=0;
function addQuiz(v){
if(v=='B') { correct++; }
}
function showScore()
{
alert("you got " + correct + " right!")
}
function resetVal()
{
document.myform.question1[0].value="A";
document.myform.question1[1].value="B";
document.myform.question2[0].value="B";
document.myform.question2[1].value="A";
correct=0;
}
</script>
<head>
<body bgcolor="yellow">
<h2>Test Quiz</h2><hr>
<h3>who invented javascript</h3>
<form name= "myform">
<input type="radio" name="question1" value="A" onChange="addQuiz(this.value);this.value='0';">Microsoft<BR>
<input type="radio" name="question1" value="B" onChange="addQuiz(this.value);this.value='0';">Netscape<BR>
<P>
<h3>Will you make SavageKid as your friend?</h3>
<input type="radio" name="question2" value="B" onChange="addQuiz(this.value);this.value='0';">Yes<BR>
<input type="radio" name="question2" value="A" onChange="addQuiz(this.value);this.value='0';">No<BR>

<input type="button" value="score" onclick="showScore()">
<input type="reset" value="reset" onClick="resetVal()" >
</form>
</body>
</html>

And the explanation:

Look at the onChange event in the radio buttons.I declared the 'correct' variable outside the addQuiz function so that it is global.Now the onchange event will pass the value of the radio button to the addQuiz function as a parameter.If the parameter value is equal to 'B' the value of 'correct' is incremented.When you click the score button the showScore function is called which alerts the score.In the reset button check out the onClick event which call the resetVal() function which resets the old values of the radio buttons.Hope you understood.

C'ya

Savage

Last edited by SavageKid : April 20th, 2001 at 12:55 AM.

April 19th, 2001, 06:53 AM

epl

Contributing User

Join Date: Mar 2001

Location: Dublin

Posts: 413

Time spent in forums: 2 h 18 m 18 sec
Reputation Power: 13

Will give wrong answer if I click a few times on each correct answer...

new to javascript

Developer Shed Advertisers and Affiliates