www.webdeveloper.com
Results 1 to 6 of 6

Thread: Need Help with Building this Quiz

  1. #1
    Join Date
    Oct 2013
    Posts
    7

    Post Need Help with Building this Quiz

    Hi,
    I am looking to build a simple calculating quiz using javascript and HTML. But I have hit a snag. I can't seem to get the buttons to do as I want. I make it to question 4, and then I can't select beyond it or else it changes and erasers the last selected question. Help!

    Here is my code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Quiz</title>

    <style type="text/css">
    <!--
    .bgclr {background-color: white; color: black; font-weight: bold;}
    -->
    </style>

    <script language="JavaScript">


    <!-- Begin
    // Insert number of questions
    var numQues = 10;

    // Insert number of choices in each question
    var numChoi = 4;

    // Insert number of questions displayed in answer area
    var answers = new Array(10);

    // Insert answers to questions
    answers[0] = "All of the Above";
    answers[1] = "";
    answers[2] = "An enemy insect";
    answers[3] = "Ash";
    answers[4] = "Asia";
    answers[5] = "Wood";
    answers[6] = "A non for profit organization that Keeps Indiana Beautiful";
    answers[7] = "Green";
    answers[8] = "Ashley";
    answers[9] = "All of the Above";

    function getScore(form) {
    var score = 0;
    var currElt;
    var currSelection;
    for (i=0; i<numQues; i++) {
    currElt = i*numChoi;
    for (j=0; j<numChoi; j++) {
    currSelection = form.elements[currElt + j];
    if (currSelection.checked) {
    if (currSelection.value == answers[i]) {
    score++;
    break;
    }
    }
    }
    }
    score = Math.round(score/numQues*100);
    form.percentage.value = score + "%";
    var correctAnswers = "";
    for (i=1; i<=numQues; i++) {
    correctAnswers += i + ". " + answers[i-1] + "\r\n";
    }
    form.solutions.value = correctAnswers;
    }

    </script>
    </head>


    <body>
    <h3>Web Design Quiz</h3>

    <form name="quiz">
    1. Why do we need trees?
    <ul style="margin-top: 1pt">
    <li><input type="radio" name="q1" value="Shade">Shade</li>
    <li><input type="radio" name="q1" value="Oxygen">Oxygen</li>
    <li><input type="radio" name="q1" value="Animal Habitats">Animal Habitats</li>
    <li><input type="radio" name="q1" value="All of the Above">All of the Above</li>
    </ul>

    2. Which if these is an ash tree?
    <ul style="margin-top: 1pt">

    </ul>
    3. What is an Emerald Ash Borer?
    <ul style="margin-top: 1pt">
    <li><input type="radio" name="q3" value="Midwestern Species of Bird">Midwestern Species of Bird</li>
    <li><input type="radio" name="q3" value="A mineral">A mineral</li>
    <li><input type="radio" name="q3" value="An enemy insect">An enemy insect</li>
    <li><input type="radio" name="q3" value="A super hero">A super hero</li>
    </ul>
    4. What type of tree is the Emerald Ash Borer found in?
    <ul style="margin-top: 1pt">
    <li><input type="radio" name="q4" value="Ash">Ash</li>
    <li><input type="radio" name="q4" value="Maple">Maple</li>
    <li><input type="radio" name="q4" value="Oak">Oak</li>
    <li><input type="radio" name="q4" value="Pine">Pine</li>
    </ul>
    5. Where did Emerald Ash Borers come from?
    <ul style="margin-top: 1pt">
    <li><input type="radio" name="q4" value="Asia">Asia</li>
    <li><input type="radio" name="q4" value="Africa">Africa</li>
    <li><input type="radio" name="q4" value="South America">South America</li>
    <li><input type="radio" name="q4" value="North America">North America</li>
    </ul>
    6. What do the larva feed on?
    <ul style="margin-top: 1pt">
    <li><input type="radio" name="q4" value="Leaves">Leaves</li>
    <li><input type="radio" name="q4" value="McDonalds">McDonalds</li>
    <li><input type="radio" name="q4" value="Wood">Wood</li>
    <li><input type="radio" name="q4" value="Dirt">Dirt</li>
    </ul>
    7. What is KIB?
    <ul style="margin-top: 1pt">
    <li><input type="radio" name="q4" value="Kibbles In Bits">Kibbles In Bits</li>
    <li><input type="radio" name="q4" value="A non for profit organization that Keeps Indiana Beautiful">A non for profit organization that Keeps Indiana Beautiful</li>
    <li><input type="radio" name="q4" value="A tree">A tree</li>
    <li><input type="radio" name="q4" value="An insect">An insect</li>
    </ul>
    8. What color is the Merald Ash Borer
    <ul style="margin-top: 1pt">
    <li><input type="radio" name="q4" value="Red">Red</li>
    <li><input type="radio" name="q4" value="Green">Green</li>
    <li><input type="radio" name="q4" value="Orange">Orange</li>
    <li><input type="radio" name="q4" value="Purple">Purple</li>
    </ul>
    9. What is the name of the woman in the video?
    <ul style="margin-top: 1pt">
    <li><input type="radio" name="q4" value="Brandy">Brandy</li>
    <li><input type="radio" name="q4" value="Tom">Tom</li>
    <li><input type="radio" name="q4" value="Ashley">Ashley</li>
    <li><input type="radio" name="q4" value="Colleen">Colleen</li>
    </ul>
    10. What can you do to help?
    <ul style="margin-top: 1pt">
    <li><input type="radio" name="q4" value="Volunteer with KIB">Volunteer with KIB</li>
    <li><input type="radio" name="q4" value="Don't transport wood to other locations">Don't transport wood to other locations</li>
    <li><input type="radio" name="q4" value="Be educated and spread awareness">Be educated and spread awareness</li>
    <li><input type="radio" name="q4" value="All of the Above">All of the Above</li>
    </ul>

    <input type="button" value="Get score" onClick="getScore(this.form)">
    <input type="reset" value="Clear answers">
    <p> Score = <strong><input class="bgclr" type="text" size="5" name="percentage" disabled></strong><br><br>
    Correct answers:<br>
    <textarea class="bgclr" name="solutions" wrap="virtual" rows="4" cols="30" disabled>
    </textarea>
    </form>
    </body>
    </html>

    Thanks so much, anything to help would be awesome.

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,636
    how many radio groups in your code have name="q4" ?
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Oct 2013
    Posts
    7
    Thanks, that made me notice that I hadn't change the name values for the radio buttons.

    My only problem now seems to be that it won't calculate the average the right way. No matter the answers I click and enter I always end up with 0%. Any suggestions?

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,636
    try this

    Code:
    function getScore(form) {
     var score=0,cntr=0;
     while(cntr<numQues){
     var correct=answers[cntr];
     cntr++;
     var group=document.getElementsByName('q'+cntr);
     for(var i=0;i<group.length;i++){
     if(group[i].checked&&group[i].value===correct){score++;break;}
     }
     }
     score=Math.round(score/numQues*100);
     form.percentage.value=score+"%";
     var correctAnswers="";
     for (i=1;i<=numQues;i++) {
     correctAnswers+=i+". "+answers[i-1]+"\r\n";
     }
     form.solutions.value=correctAnswers;
     }
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    Oct 2013
    Posts
    7
    Thank you so much!

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,636
    anytime )) people always get help here if their attempts are obvious
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles