www.webdeveloper.com
Results 1 to 6 of 6

Thread: Need Help with Building this Quiz

  1. #1
    Join Date
    Oct 2013
    Posts
    9

    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,656
    how many radio groups in your code have name="q4" ?

  3. #3
    Join Date
    Oct 2013
    Posts
    9
    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,656
    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;
     }

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

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,656
    anytime )) people always get help here if their attempts are obvious

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