#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2001
    Posts
    3
    Rep Power
    0

    Wink


    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>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2001
    Location
    Dublin
    Posts
    413
    Rep Power
    14
    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.
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2001
    Posts
    3
    Rep Power
    0

    Lightbulb 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
  6. #4
  7. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2001
    Location
    Chennai,India
    Posts
    25
    Rep Power
    0

    Thumbs up 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 01:55 AM.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2001
    Location
    Dublin
    Posts
    413
    Rep Power
    14
    Will give wrong answer if I click a few times on each correct answer...

IMN logo majestic logo threadwatch logo seochat tools logo