Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Oct 2009
    Location
    UK
    Posts
    90
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Help with form input types not working with script

    Hello,

    I am trying to add radio buttons in this quiz script that i'm using, but when i change the drop down box to radio buttons the quiz script stops working, i.e it will not calculate the correct answers / percentage.

    I dont think i am correctly adding the input type "radio" and the script cannot recognise the value properly as i'am trying to make custom radio buttons from javascript / css.

    here is the script thats stopped working but how do i make the radio buttons send the correct value to the quiz script?

    Hope someone can help, i can add the css file if need be..



    Code:
    <HTML>
    <HEAD>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;" />
    <TITLE>Seventies Trivia Quizzes & Games</TITLE>
    <link rel="stylesheet" type="text/css" href="style.css" />
    
    
    
    
    <script language=Javascript>
    
    <!--
    function stopErrors(){
    return true;
    }
    window.onerror=stopErrors;
    // -->
    </script>
    
    <script language="JavaScript1.1">
    <!-- Hide from old browsers
    
     function quiz(form) {
            var i = 0
            var result1=document.form1.answer1.selectedIndex
            var result2=document.form2.answer2.selectedIndex
            var result3=document.form3.answer3.selectedIndex
            var result4=document.form4.answer4.selectedIndex
            var result5=document.form5.answer5.selectedIndex
            var result6=document.form6.answer6.selectedIndex
            var result7=document.form7.answer7.selectedIndex
            var result8=document.form8.answer8.selectedIndex
            
           
    
            if (result1==0){
                    alert("Question #1 was not answered");}
            if (result2==0){
                    alert("Question #2 was not answered");}
            if (result3==0){
                    alert("Question #3 was not answered");}
            if (result4==0){
                    alert("Question #4 was not answered");}
            if (result5==0){
                    alert("Question #5 was not answered");}
            if (result6==0){
                    alert("Question #6 was not answered");}
            if (result7==0){
                    alert("Question #7 was not answered");}
            if (result8==0){
                    alert("Question #8 was not answered");}
            
           
    
            else {
                    if (result1==3){i++}
                    if (result2==3){i++}
                    if (result3==1){i++}
                    if (result4==4){i++}
                    if (result5==3){i++}
                    if (result6==1){i++}
                    if (result7==1){i++}
                    if (result8==2){i++}
                  
                 
    
                    document.total.score.value = i
                    var per =  Math.round((i / 20) * 100)
                    document.total.percent.value = per 
    
                    if (result1 != 3){document.form1.check1.checked = true}
                    else {document.form1.check1.checked = false}
                    if (result2 != 3){document.form2.check2.checked = true}
                    else {document.form2.check2.checked = false}
                    if (result3 != 1){document.form3.check3.checked = true}
                    else {document.form3.check3.checked = false}
                    if (result4 != 4){document.form4.check4.checked = true}
                    else {document.form4.check4.checked = false}
                    if (result5 != 3){document.form5.check5.checked = true}
                    else {document.form5.check5.checked = false}
                    if (result6 != 1){document.form6.check6.checked = true}
                    else {document.form6.check6.checked = false}
                    if (result7 != 1){document.form7.check7.checked = true}
                    else {document.form7.check7.checked = false}
                    if (result8 != 2){document.form8.check8.checked = true}
                    else {document.form8.check8.checked = false}
                    
                    }
    }
    //-->
    </SCRIPT>
    
    <style type="text/css">
    <!--
    body {
    	margin-left: 10px;
    	margin-top: 10px;
    	margin-right: 10px;
    	margin-bottom: 10px;
    }
    -->
    </style></HEAD>
    <BODY>
    
    
    
    <FORM NAME="form1"><INPUT  TYPE="hidden" NAME="check1"> 
    <b>1. Who wrote the Eagles' 1972 hit "Take It Easy"?</b><BR><BR>
    <input type="hidden" SELECT NAME="answer1" SIZE=1>
    <fieldset class="radios">
    
     <label class="label_radio" for="sample-radio-1a0">
     <input name="sample-radio" id="sample-radio-1a0" NAME="radio" type="radio" SELECTED VALUE="0"/>
      CHOOSE AN ANSWER</label>
     
      <label class="label_radio" for="sample-radio-1a1">
     <input name="sample-radio" id="sample-radio-1a1" NAME="radio" type="radio"  VALUE="1" /> 
      Randy Meisner</label>
     
     <label class="label_radio" for="sample-radio-1a2">
     <input name="sample-radio" id="sample-radio-1a2" NAME="radio" type="radio"   VALUE="2" /> 
      J.D. Souther</label>
      
     <label class="label_radio" for="sample-radio-1a3">
     <input name="sample-radio" id="sample-radio-1a3" NAME="radio" type="radio"  VALUE="3" /> 
      Jackson Browne & Glenn Frey</label>
      
     <label class="label_radio" for="sample-radio-1a4">
    <input name="sample-radio" id="sample-radio-1a4" NAME="radio" type="radio"  VALUE="4" /> 
      Don Henley</label>
      
    </fieldset>  
     </SELECT></FORM>
    
    <BR>
      
    
      
      
    <FORM NAME="form2"><INPUT  TYPE="hidden" NAME="check2"> 
    <b>1. Who wrote the Eagles' 1972 hit "Take It Easy"?</b><BR><BR>
    <input type="hidden" SELECT NAME="answer2" SIZE=1>
    <fieldset class="radios">
    
     <label class="label_radio" for="sample-radio-2a0">
     <input name="sample-radio" id="sample-radio-2a0" NAME="radio" type="radio" SELECTED VALUE="0"/>
      CHOOSE AN ANSWER</label>
     
      <label class="label_radio" for="sample-radio-2a1">
     <input name="sample-radio" id="sample-radio-2a1" NAME="radio" type="radio"  VALUE="1" /> 
      Randy Meisner</label>
     
     <label class="label_radio" for="sample-radio-2a2">
     <input name="sample-radio" id="sample-radio-2a2" NAME="radio" type="radio"   VALUE="2" /> 
      J.D. Souther</label>
      
     <label class="label_radio" for="sample-radio-2a3">
     <input name="sample-radio" id="sample-radio-2a3" NAME="radio" type="radio"  VALUE="3" /> 
      Jackson Browne & Glenn Frey</label>
      
     <label class="label_radio" for="sample-radio-2a4">
    <input name="sample-radio" id="sample-radio-2a4" NAME="radio" type="radio"  VALUE="4" /> 
      Don Henley</label>
      
    </fieldset>  
     </SELECT></FORM>
    
    <BR>
    
    
    <FORM NAME="form3"><INPUT  TYPE="hidden" NAME="check3"> 
    <b>1. Who wrote the Eagles' 1972 hit "Take It Easy"?</b><BR><BR>
    <input type="hidden" SELECT NAME="answer3" SIZE=1>
    <fieldset class="radios">
    
     <label class="label_radio" for="sample-radio-3a0">
     <input name="sample-radio" id="sample-radio-3a0" NAME="radio" type="radio" SELECTED VALUE="0"/>
      CHOOSE AN ANSWER</label>
     
      <label class="label_radio" for="sample-radio-3a1">
     <input name="sample-radio" id="sample-radio-3a1" NAME="radio" type="radio"  VALUE="1" /> 
      Randy Meisner</label>
     
     <label class="label_radio" for="sample-radio-3a2">
     <input name="sample-radio" id="sample-radio-3a2" NAME="radio" type="radio"   VALUE="2" /> 
      J.D. Souther</label>
      
     <label class="label_radio" for="sample-radio-3a3">
     <input name="sample-radio" id="sample-radio-3a3" NAME="radio" type="radio"  VALUE="3" /> 
      Jackson Browne & Glenn Frey</label>
      
     <label class="label_radio" for="sample-radio-3a4">
    <input name="sample-radio" id="sample-radio-3a4" NAME="radio" type="radio"  VALUE="4" /> 
      Don Henley</label>
      
    </fieldset>  
     </SELECT></FORM>
    
    <BR>
    
    
    <FORM NAME="form4"><INPUT  TYPE="hidden" NAME="check4"> 
    <b>1. Who wrote the Eagles' 1972 hit "Take It Easy"?</b><BR><BR>
    <input type="hidden" SELECT NAME="answer4" SIZE=1>
    <fieldset class="radios">
    
     <label class="label_radio" for="sample-radio-4a0">
     <input name="sample-radio" id="sample-radio-4a0" NAME="radio" type="radio" SELECTED VALUE="0"/>
      CHOOSE AN ANSWER</label>
     
      <label class="label_radio" for="sample-radio-4a1">
     <input name="sample-radio" id="sample-radio-4a1" NAME="radio" type="radio"  VALUE="1" /> 
      Randy Meisner</label>
     
     <label class="label_radio" for="sample-radio-4a2">
     <input name="sample-radio" id="sample-radio-4a2" NAME="radio" type="radio"   VALUE="2" /> 
      J.D. Souther</label>
      
     <label class="label_radio" for="sample-radio-4a3">
     <input name="sample-radio" id="sample-radio-4a3" NAME="radio" type="radio"  VALUE="3" /> 
      Jackson Browne & Glenn Frey</label>
      
     <label class="label_radio" for="sample-radio-4a4">
    <input name="sample-radio" id="sample-radio-4a4" NAME="radio" type="radio"  VALUE="4" /> 
      Don Henley</label>
      
    </fieldset>  
     </SELECT></FORM>
    
    <BR>
    
    
    <FORM NAME="form5"><INPUT  TYPE="hidden" NAME="check5"> 
    <b>1. Who wrote the Eagles' 1972 hit "Take It Easy"?</b><BR><BR>
    <input type="hidden" SELECT NAME="answer5" SIZE=1>
    <fieldset class="radios">
    
     <label class="label_radio" for="sample-radio-5a0">
     <input name="sample-radio" id="sample-radio-5a0" NAME="radio" type="radio" SELECTED VALUE="0"/>
      CHOOSE AN ANSWER</label>
     
      <label class="label_radio" for="sample-radio-5a1">
     <input name="sample-radio" id="sample-radio-5a1" NAME="radio" type="radio"  VALUE="1" /> 
      Randy Meisner</label>
     
     <label class="label_radio" for="sample-radio-5a2">
     <input name="sample-radio" id="sample-radio-5a2" NAME="radio" type="radio"   VALUE="2" /> 
      J.D. Souther</label>
      
     <label class="label_radio" for="sample-radio-5a3">
     <input name="sample-radio" id="sample-radio-5a3" NAME="radio" type="radio"  VALUE="3" /> 
      Jackson Browne & Glenn Frey</label>
      
     <label class="label_radio" for="sample-radio-5a4">
    <input name="sample-radio" id="sample-radio-5a4" NAME="radio" type="radio"  VALUE="4" /> 
      Don Henley</label>
      
    </fieldset>  
     </SELECT></FORM>
    
    <BR>
    
    
    <FORM NAME="form6"><INPUT  TYPE="hidden" NAME="check6"> 
    <b>1. Who wrote the Eagles' 1972 hit "Take It Easy"?</b><BR><BR>
    <input type="hidden" SELECT NAME="answer6" SIZE=1>
    <fieldset class="radios">
    
     <label class="label_radio" for="sample-radio-6a0">
     <input name="sample-radio" id="sample-radio-6a0" NAME="radio" type="radio" SELECTED VALUE="0"/>
      CHOOSE AN ANSWER</label>
     
      <label class="label_radio" for="sample-radio-6a1">
     <input name="sample-radio" id="sample-radio-6a1" NAME="radio" type="radio"  VALUE="1" /> 
      Randy Meisner</label>
     
     <label class="label_radio" for="sample-radio-6a2">
     <input name="sample-radio" id="sample-radio-6a2" NAME="radio" type="radio"   VALUE="2" /> 
      J.D. Souther</label>
      
     <label class="label_radio" for="sample-radio-6a3">
     <input name="sample-radio" id="sample-radio-6a3" NAME="radio" type="radio"  VALUE="3" /> 
      Jackson Browne & Glenn Frey</label>
      
     <label class="label_radio" for="sample-radio-6a4">
    <input name="sample-radio" id="sample-radio-6a4" NAME="radio" type="radio"  VALUE="4" /> 
      Don Henley</label>
      
    </fieldset>  
     </SELECT></FORM>
    
    <BR>
    
    
    <FORM NAME="form7"><INPUT  TYPE="hidden" NAME="check7"> 
    <b>1. Who wrote the Eagles' 1972 hit "Take It Easy"?</b><BR><BR>
    <input type="hidden" SELECT NAME="answer7" SIZE=1>
    <fieldset class="radios">
    
     <label class="label_radio" for="sample-radio-7a0">
     <input name="sample-radio" id="sample-radio-7a0" NAME="radio" type="radio" SELECTED VALUE="0"/>
      CHOOSE AN ANSWER</label>
     
      <label class="label_radio" for="sample-radio-7a1">
     <input name="sample-radio" id="sample-radio-7a1" NAME="radio" type="radio"  VALUE="1" /> 
      Randy Meisner</label>
     
     <label class="label_radio" for="sample-radio-7a2">
     <input name="sample-radio" id="sample-radio-7a2" NAME="radio" type="radio"   VALUE="2" /> 
      J.D. Souther</label>
      
     <label class="label_radio" for="sample-radio-7a3">
     <input name="sample-radio" id="sample-radio-7a3" NAME="radio" type="radio"  VALUE="3" /> 
      Jackson Browne & Glenn Frey</label>
      
     <label class="label_radio" for="sample-radio-7a4">
    <input name="sample-radio" id="sample-radio-7a4" NAME="radio" type="radio"  VALUE="4" /> 
      Don Henley</label>
      
    </fieldset>  
     </SELECT></FORM>
    
    <BR>
    
    
    <FORM NAME="form8"><INPUT  TYPE="hidden" NAME="check8"> 
    <b>1. Who wrote the Eagles' 1972 hit "Take It Easy"?</b><BR><BR>
    <input type="hidden" SELECT NAME="answer8" SIZE=1>
    <fieldset class="radios">
    
     <label class="label_radio" for="sample-radio-8a0">
     <input name="sample-radio" id="sample-radio-8a0" NAME="radio" type="radio" SELECTED VALUE="0"/>
      CHOOSE AN ANSWER</label>
     
      <label class="label_radio" for="sample-radio-8a1">
     <input name="sample-radio" id="sample-radio-8a1" NAME="radio" type="radio"  VALUE="1" /> 
      Randy Meisner</label>
     
     <label class="label_radio" for="sample-radio-8a2">
     <input name="sample-radio" id="sample-radio-8a2" NAME="radio" type="radio"   VALUE="2" /> 
      J.D. Souther</label>
      
     <label class="label_radio" for="sample-radio-8a3">
     <input name="sample-radio" id="sample-radio-8a3" NAME="radio" type="radio"  VALUE="3" /> 
      Jackson Browne & Glenn Frey</label>
      
     <label class="label_radio" for="sample-radio-8a4">
    <input name="sample-radio" id="sample-radio-8a4" NAME="radio" type="radio"  VALUE="4" /> 
      Don Henley</label>
      
    </fieldset>  
     </SELECT></FORM>
    
    
    <BR>
    
    <BR><BR><HR>
    <P>That's it! Now click the "Submit" button to grade your Seventies music knowledge.<BR>
    
    <form name="total">
    <INPUT TYPE="BUTTON" VALUE="Submit" onClick="quiz()">  <INPUT TYPE="button" VALUE="Reload Quiz" onClick='parent.location="javascript:location.reload()"'><BR><HR><BR>Results:<BR><BR>
    You scored <INPUT TYPE="TEXT" NAME="score" VALUE="" SIZE=5> out of 
    <INPUT TYPE="TEXT" NAME="outof" VALUE="8" SIZE=5> questions correct.<BR><BR>
    Your Score: <INPUT TYPE="TEXT" NAME="percent" VALUE="" SIZE=3> %<BR><BR>
    <HR>
    
    </FORM>
    <script>
        var d = document;
        var safari = (navigator.userAgent.toLowerCase().indexOf('safari') != -1) ? true : false;
        var gebtn = function(parEl,child) { return parEl.getElementsByTagName(child); };
        onload = function() {
            
            var body = gebtn(d,'body')[0];
            body.className = body.className && body.className != '' ? body.className + ' has-js' : 'has-js';
            
            if (!d.getElementById || !d.createTextNode) return;
            var ls = gebtn(d,'label');
            for (var i = 0; i < ls.length; i++) {
                var l = ls[i];
                if (l.className.indexOf('label_') == -1) continue;
                var inp = gebtn(l,'input')[0];
                if (l.className == 'label_check') {
                    l.className = (safari && inp.checked == true || inp.checked) ? 'label_check c_on' : 'label_check c_off';
                    l.onclick = check_it;
                };
                if (l.className == 'label_radio') {
                    l.className = (safari && inp.checked == true || inp.checked) ? 'label_radio r_on' : 'label_radio r_off';
                    l.onclick = turn_radio;
                };
            };
        };
        var check_it = function() {
            var inp = gebtn(this,'input')[0];
            if (this.className == 'label_check c_off' || (!safari && inp.checked)) {
                this.className = 'label_check c_on';
                if (safari) inp.click();
            } else {
                this.className = 'label_check c_off';
                if (safari) inp.click();
            };
        };
        var turn_radio = function() {
            var inp = gebtn(this,'input')[0];
            if (this.className == 'label_radio r_off' || inp.checked) {
                var ls = gebtn(this.parentNode,'label');
                for (var i = 0; i < ls.length; i++) {
                    var l = ls[i];
                    if (l.className.indexOf('label_radio') == -1)  continue;
                    l.className = 'label_radio r_off';
                };
                this.className = 'label_radio r_on';
                if (safari) inp.click();
            } else {
                this.className = 'label_radio r_off';
                if (safari) inp.click();
            };
        };
    </script>
    
    
    
    
    <P>Ratings:<br><br>
    
    90-100% - "I Just Want To Celebrate"<br>
    &nbsp;80-89%  - "I Want To Take You Higher"<br>
    &nbsp;70-79%  - "One Toke Over The Line"<br>
    &nbsp;60-69%  - "What's Going On"<br>
    &nbsp;50-59%  - "Stuck In The Middle With You"<br>
    &nbsp;&nbsp;0-49%  - "Ball of Confusion"<br>
    
    
    
    </blockquote>
    
    
    </BODY>
    </HTML>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,640 Times in 4,602 Posts
    (1) selectedIndex is *ONLY* a property of <select> elements. No others.

    (2) Your original code apparently had *ONE* <form> with multiple questions (<select>s) in the form. Your new code has each question in its own <form>. WHY?

    (3) On top of everything else... Your original code apparently had <select>s named "question1", "question2", etc. In your new code all your radio buttons have the same name: "sample_radio".

    In short, you've changed everything on the page *except* the JavaScript, so of course the JS will no longer do anything at all.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,640 Times in 4,602 Posts
    Oops...I take it back...even the original code had one question per form. Why?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New Coder
    Join Date
    Oct 2009
    Location
    UK
    Posts
    90
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Hi Old Pedant

    The original form which does work looks like this, its the only part i have changed, i will change and add questions accordlingly later once i can get the radio button selections working, hope you can help further.

    I suppose my question is how do i change the working form below to display radio buttons instead of a drop down list, been at it for hours, sorry newbie behind the wheel here!

    Working code for the forms

    Code:
    <FORM NAME="form1">
    <INPUT  TYPE="CHECKBOX" NAME="check1"> 
    <STRONG>1. Who wrote the Eagles' 1972 hit "Take It Easy"?</STRONG><BR>
      <SELECT NAME="answer1" SIZE=1>
        <OPTION SELECTED VALUE="0">-- Choose an answer --
        <OPTION VALUE="1">Randy Meisner
        <OPTION VALUE="2">J.D. Souther
        <OPTION VALUE="3">Jackson Browne & Glenn Frey
        <OPTION VALUE="4">Don Henley
      </SELECT></FORM>
      
    <FORM NAME="form2"><INPUT  TYPE="CHECKBOX" NAME="check2"> 
    <STRONG>2. Which members of CSN&Y were formerly in Buffalo Springfield?</STRONG><BR>
      <SELECT NAME="answer2" SIZE=1>
        <OPTION SELECTED VALUE="0">-- Choose an answer --
        <OPTION VALUE="1">Crosby and Young
        <OPTION VALUE="2">Stills and Nash
        <OPTION VALUE="3">Stills and Young
        <OPTION VALUE="4">all four of them
      </SELECT></FORM>
    <FORM NAME="form3"><INPUT  TYPE="CHECKBOX" NAME="check3"> 
    <STRONG>3. Bob Seger's "Still The Same" came from what smash album?</STRONG><BR>
      <SELECT NAME="answer3" SIZE=1>
        <OPTION SELECTED VALUE="0">-- Choose an answer --
        <OPTION VALUE="1">Stranger In Town
        <OPTION VALUE="2">Night Moves
        <OPTION VALUE="3">Against The Wind
        <OPTION VALUE="4">Nine Tonight
      </SELECT></FORM>
    <FORM NAME="form4"><INPUT  TYPE="CHECKBOX" NAME="check4"> 
    <STRONG>4. Who was the first musical guest on <em>Saturday Night Live</em>?</STRONG><BR>
      <SELECT NAME="answer4" SIZE=1>
        <OPTION SELECTED VALUE="0">-- Choose an answer --
        <OPTION VALUE="1">Paul Simon
        <OPTION VALUE="2">Art Garfunkel
        <OPTION VALUE="3">Judy Collins
        <OPTION VALUE="4">Janis Ian
      </SELECT></FORM>
    Last edited by mobimad; 11-09-2010 at 11:35 PM.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,640 Times in 4,602 Posts
    Here...a simple, radio-button-based quiz. Add as many or as few questions as you like. It computes the score and percentage for you.
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function quiz( form )
    {
        var qcount = 0;
        var score = 0;
        for ( a = 1; a < 9999; ++a )
        {
            var rbs = form["answer" +a];
            if ( rbs == null || rbs.length == null ) break;
    
            ++qcount;
            var q = document.getElementById("question" + a);
            q.style.color = "#FF0000";
            for ( var r = 0; r < rbs.length; ++r )
            {
                 var rb = rbs[r];
                 if ( rb.checked && rb.className == "correct" )
                 {
                     ++score;
                     q.style.color = "#00FF00";
                     break;
                 }
            }
        }
        document.getElementById("scoring").innerHTML =
            "You got " + score + " right out of " + qcount + " questions.";
        document.getElementById("rating").innerHTML = 
            "Your score: " + ( score * 100 / qcount ).toFixed(1) + "%";
    }
    </script>
    <style type="text/css">
    div#Questions span {
        color: blue;
        font-weight: bold;
    }
    div#Questions label {
        color: black;
        font-style: italic;
    }
    div#rating, div#scoring {
        font-size: large;
    }
    </style>
    </head>
    <body>
    <div id="Questions">
    <form>
        <span id="question1">
        1. What state has the highest per capita income?
        </span><br/>
       <label><input name="answer1" type="radio">New York</label>
       <label><input name="answer1" type="radio" class="correct">Connecticut</label>
       <label><input name="answer1" type="radio">California</label>
       <label><input name="answer1" type="radio">Confusion</label>
       <br/><br/>
       <span id="question2">
       2. Who is buried in Grant's tomb?
       </span><br/>
       <label><input name="answer2" type="radio">Ulysses Simpson Grant</label>
       <label><input name="answer2" type="radio">U. S. Grant</label>
       <label><input name="answer2" type="radio" class="correct">Ulysses S Grant</label>
       <label><input name="answer2" type="radio">George Washington</label>
       <br/><br/>
       <input type="button" value="How did I do?" onclick="quiz(this.form);" />
       <br>
       <div id="scoring"></div>
       <div id="rating"></div>
    </form>
    </div>
    </body>
    </html>
    Last edited by Old Pedant; 11-09-2010 at 11:39 PM. Reason: Adding in "scoring" div
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New Coder
    Join Date
    Oct 2009
    Location
    UK
    Posts
    90
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Hi Old Penant

    Thankyou for the code, wow, much easier to deal with, there is one thing i'm stuck on, i would like to have each question set in a seperate form, and for it to still work.

    This is just so can can break each question/answer set up in a seperate box via css.

    Also how to have the script tell how many questions were right out of 20 for example



    Thanks
    Jenna
    Last edited by mobimad; 11-10-2010 at 12:00 AM.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,640 Times in 4,602 Posts
    We *could* do that, but there is still no reason for separate <form>s.

    Just put each question inside its own <div> and style the <div>.

    Styling a <form> is actually a bad idea.

    If you really think you *MUST* have multiple forms, it's doable. Just seems pointless to me.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,640 Times in 4,602 Posts
    Simple example:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function quiz( form )
    {
        var qcount = 0;
        var score = 0;
        for ( a = 1; a < 9999; ++a )
        {
            var rbs = form["answer" +a];
            if ( rbs == null || rbs.length == null ) break;
    
            ++qcount;
            var q = document.getElementById("question" + a);
            q.style.color = "#FF0000";
            for ( var r = 0; r < rbs.length; ++r )
            {
                 var rb = rbs[r];
                 if ( rb.checked && rb.className == "correct" )
                 {
                     ++score;
                     q.style.color = "#00FF00";
                     break;
                 }
            }
        }
        document.getElementById("scoring").innerHTML =
            "You got " + score + " right out of " + qcount + " questions.";
        document.getElementById("rating").innerHTML = 
            "Your score: " + ( score * 100 / qcount ).toFixed(1) + "%";
    }
    </script>
    <style type="text/css">
    div#Questions span {
        color: blue;
        font-weight: bold;
    }
    div#Questions label {
        color: black;
        font-style: italic;
    }
    div#rating, div#scoring {
        font-size: large;
    }
    div.OneQ {
        position: relative;
        width: 60%;
        border: solid blue 3px;
        padding: 10px;
        margin: 10px;
    }
    </style>
    </head>
    <body>
    <div id="Questions">
    <form>
      <div class="OneQ">
        <span id="question1">
        1. What state has the highest per capita income?
        </span><br/>
        <label><input name="answer1" type="radio">New York</label>
        <label><input name="answer1" type="radio" class="correct">Connecticut</label>
        <label><input name="answer1" type="radio">California</label>
        <label><input name="answer1" type="radio">Confusion</label>
        <br/>
      </div>
      <div class="OneQ">
        <span id="question2">
        2. Who is buried in Grant's tomb?
        </span><br/>
        <label><input name="answer2" type="radio">Ulysses Simpson Grant</label>
        <label><input name="answer2" type="radio">U. S. Grant</label>
        <label><input name="answer2" type="radio" class="correct">Ulysses S Grant</label>
        <label><input name="answer2" type="radio">George Washington</label>
        <br/>
      </div>
       <input type="button" value="How did I do?" onclick="quiz(this.form);" />
       <br>
       <div id="scoring"></div>
       <div id="rating"></div>
    </form>
    </div>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New Coder
    Join Date
    Oct 2009
    Location
    UK
    Posts
    90
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Thanks so much,

    1 more thing i promise, could you show me how it would work with seperate forms for each question/answers

    Very much appreciated
    Jenna

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,640 Times in 4,602 Posts
    *SIGH*

    I still say you are making a mistake, especially if you ever want to change this to be a *REAL* quiz. (I hope you are aware that this is a "toy": Anybody who is smarter than a rock can simply view the source code to see all the right answers. That was true with your original quiz, as well, of course.) You can ONLY submit a SINGLE form to server-side processing that would be needed to make this a real quiz.

    But okay...
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function quiz( )
    {
        var qcount = 0;
        var score = 0;
        for ( var f = 0; f < 9999; ++f )
        {
            var form = document.forms[f];
            if ( form == null ) break;
            
            var rbs = form.answer;
            if ( rbs == null || rbs.length == null ) break;
    
            ++qcount;
            var q = document.getElementById("question" + qcount);
            q.style.color = "#FF0000";
            for ( var r = 0; r < rbs.length; ++r )
            {
                 var rb = rbs[r];
                 if ( rb.checked && rb.className == "correct" )
                 {
                     ++score;
                     q.style.color = "#00FF00";
                     break;
                 }
            }
        }
        document.getElementById("scoring").innerHTML =
            "You got " + score + " right out of " + qcount + " questions.";
        document.getElementById("rating").innerHTML = 
            "Your score: " + ( score * 100 / qcount ).toFixed(1) + "%";
    }
    </script>
    <style type="text/css">
    div#Questions span {
        color: blue;
        font-weight: bold;
    }
    div#Questions label {
        color: black;
        font-style: italic;
    }
    div#rating, div#scoring {
        font-size: large;
    }
    div.OneQ {
        position: relative;
        width: 60%;
        border: solid blue 3px;
        padding: 10px;
        margin: 10px;
    }
    </style>
    </head>
    <body>
    <div id="Questions">
    <form>
      <div class="OneQ">
        <span id="question1">
        1. What state has the highest per capita income?
        </span><br/>
        <label><input name="answer" type="radio">New York</label>
        <label><input name="answer" type="radio" class="correct">Connecticut</label>
        <label><input name="answer" type="radio">California</label>
        <label><input name="answer" type="radio">Confusion</label>
        <br/>
      </div>
    </form><form>
      <div class="OneQ">
        <span id="question2">
        2. Who is buried in Grant's tomb?
        </span><br/>
        <label><input name="answer" type="radio">Ulysses Simpson Grant</label>
        <label><input name="answer" type="radio">U. S. Grant</label>
        <label><input name="answer" type="radio" class="correct">Ulysses S Grant</label>
        <label><input name="answer" type="radio">George Washington</label>
        <br/>
      </div>
    </form><form><!-- *** OPTIONAL:  Separate form for the next button: *** -->
       <input type="button" value="How did I do?" onclick="quiz( );" />
       <br>
       <div id="scoring"></div>
       <div id="rating"></div>
    </form>
    </div>
    </body>
    </html>
    Note that the "How did I do?" button can either be in the last <form> or in its own <form>.
    Last edited by Old Pedant; 11-10-2010 at 12:34 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    mobimad (11-10-2010)

  • #11
    New Coder
    Join Date
    Oct 2009
    Location
    UK
    Posts
    90
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Thanks so much
    will bear in mind what you suggest.
    Jenna


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •