Web Analytics Made Easy -
StatCounter JavaScript Quiz - CodingForum

Announcement

Collapse
No announcement yet.

JavaScript Quiz

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • JavaScript Quiz

    I want to thank you all in advance, for even reading my post.
    I am very new to the coding world...
    I am hoping to get some help and/ or guidance. I created a quiz (inspired by another quiz) using JS for a class, but there are a couple of issues that I can't figure out.
    There are two questions that I used check boxes for, in order to enable multiple select. I don't know how to format the code so that it will grade those questions.
    Also, I want to validate each question, using an alert if the user did not answer a question. Is there a clean way to do this?
    Here is the working copy: http://www.public.asu.edu/~srempel/quiz.html
    Here is my quiz (sorry for the length, I wanted to give the whole image of what I have done):
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    <!--
    .style1 {font-family: "Trebuchet MS"}
    -->
    </style>
    
    <title>Project 9 Quiz</title>
    <script language="javascript" type="text/javascript">
    //This script is inspired by  http://www.gamarod.com.ar - I used it as a jumping off point for my quiz.  This portion defines the answers to the questions. 
    var ans = new Array;
    var done = new Array;
    var yourAns = new Array;
    var explainAnswer = new Array;
    
    var score = 0;
    ans[1] = "c";
    ans[2] = "b";
    ans[3] = "d";
    ans[4] = "a";
    ans[5] = "b";
    ans[6] = "c";
    ans[7] = "b";
    ans[8] = "a";
    ans[9] = "b";
    ans[10] = "c";
    ans[11] = "a";
    ans[12] = "c";
    ans[13] = "b";
    ans[14] = "a";
    ans[15] = "c";
    ans[16] = "a";
    ans[17] = "b";
    ans[18] = "b";
    ans[19] = "d";
    ans[20] = "c";
    
    explainAnswer[1]="World War I started in 1914 and ended in 1918.";
    explainAnswer[2]="Papa Smurf is the epic leader of the smurf village.";
    explainAnswer[3]="The Plebians were the common people of Greece.";
    explainAnswer[4]="The sky can have any varying shades of blue, white or grey.";
    explainAnswer[5]="The Peregrine falcon is the world's speediest bird.";
    explainAnswer[6]="Plain black broth kept the Spartan warriors strong and fit.";
    explainAnswer[7]="Mammals have warm blood and hair on their bodies.";
    explainAnswer[8]="The Pixies are one of the best bands ever.";
    explainAnswer[9]="Sesame Street premiered on November 10, 1969.";
    explainAnswer[10]="Although some would argue that the answer is d, World of Warcraft is a massively multiplayer online role-playing game (MMORPG).";
    explainAnswer[11]="The human stomach produces a new mucus layer every two weeks, in order to protect it from itself.";
    explainAnswer[12]="Kurt Cobain often complained about an undiagnosed stomach pain, allegedly unrelated to Courtney Love.";
    explainAnswer[13]="Jimmy Carter, Nobel Peace Prize winner, saw his turtleneck sell at auction.";
    explainAnswer[14]="Tom Hanks was the actor who played the cowboy doll, Woody.";
    explainAnswer[15]="The Alphabet of Ben Sira is considered to be the oldest form of the story of Lilith as Adam's first wife.";
    explainAnswer[16]="Seashores have 14 - two per day caused by the gravitational attraction of the Moon and Sun and the opposite force of centrifugal motion.";
    explainAnswer[17]="A septuagenarian is someone who is 70 years old, or between 70 and 80.";
    explainAnswer[18]="The name Teddy Bear comes from the November 1902 hunting trip of Theodore Roosevelt because he refused to shoot a bear cub.";
    explainAnswer[19]="Daddy long legs refer to both the spider and two types of non-spider insects - both with very long legs.";
    explainAnswer[20]="According to Myth Busters, it is believed that goldfish have a memory of about 6 months.";
    function Engine(question, answer) {
    yourAns[question]=answer;
    }
    
    //This is the code that calculates the score.
    function Score(){
    var answerText = "How awesome are you?";
    for(i=1;i<=20;i++){
       answerText=answerText+"<br>Question :"+i+"<br>";
      if(ans[i]!=yourAns[i]){
        answerText=answerText+"<br>The correct answer was "+ans[i]+"<br>"+explainAnswer[i]+"<br>";
      }
      else{
        answerText=answerText+" <br>Wooohooo! You got this one right! <br>";
        score++;
      }
    }
    
    answerText=answerText+"<br><br>Your total score is : "+score+"<br>";
    
    //This is the code that will tell the user how they did on the quiz and will produce the pop-up with the results.
    answerText=answerText+"<br>Comment : ";
    if(score<=5){
    answerText=answerText+"It seems as if you need to study your useless trivia a bit more.";
    }
    if(score>=6 && score <=10){
    answerText=answerText+"Almost average.";
    }
    if(score>=11 && score <=15){
    answerText=answerText+"Hey, pretty good job.";
    }
    if(score>16){
    answerText=answerText+"You are the master of all!";
    }
    
    var w = window.open('', '', 'height=500,width=750,scrollbars');
    
    with(w.document)
    {
        open();
        write(answerText);
        close();
    }
    }
    </script>
    
    
    </head>
    
    <body>
    <p class="style1 style1"><img src="line.jpg" alt="image of a line" width="844" height="14" /></p>
      <p class="style1 style1"><strong>Section Two - Quiz:</strong></p>
     <p class="style1 style1">All questions must be answered in order to calculate your score.</p>
      <form class="style1">
      <ol>
        <li>What was the start and end year of World War I? 
          <br/>
          <input type="radio" name="q1" value="a" onClick="Engine(1, this.value)">1905 - 1910
          <br />
          <input type="radio" name="q1" value="b" onClick="Engine(1, this.value)">1915 - 1920
          <br />
          <input type="radio" name="q1" value="c" onClick="Engine(1, this.value)">1914 - 1918
          <br />
          <input type="radio" name="q1" value="d" onClick="Engine(1, this.value)">None of the above
          <br />
          <br />   
          <li>What was the name of the wise elder that resided in the Smurf village?
          <br />   
          <input type="radio" name="q2" value="a" onClick="Engine(2, this.value)">Smurfette
          <br />
          <input type="radio" name="q2" value="b" onClick="Engine(2, this.value)">Papa Smurf
          <br />
          <input type="radio" name="q2" value="c" onClick="Engine(2, this.value)">Gargamel
          <br />
          <input type="radio" name="q2" value="d" onClick="Engine(2, this.value)">Chef Smurf
           <br /> 
           <br />
           <li>Who were the Plebians?
           <br />
          <input type="radio" name="q3" value="a" onClick="Engine(3, this.value)">Roman leaders
          <br />
          <input type="radio" name="q3" value="b" onClick="Engine(3, this.value)">Greek and Roman gods
          <br />
          <input type="radio" name="q3" value="c" onClick="Engine(3, this.value)">Greek merchants
          <br />
          <input type="radio" name="q3" value="d" onClick="Engine(3, this.value)">The commoners of Greece
          <br />
          <br />
          <li>What color is the sky? (Choose the three that best fit)
    	  <br />
    	  <input type="checkbox" name="q4" value="a" onClick="Engine(4, this.value)">Blue
    	  <input type="checkbox" name="q4" value="b" onClick="Engine(4, this.value)">Red
    	  <input type="checkbox" name="q4" value="c" onClick="Engine(4, this.value)">Grey
    	  <input type="checkbox" name="q4" value="d" onClick="Engine(4, this.value)">White
    	  <input type="checkbox" name="q4" value="e" onClick="Engine(4, this.value)">Orange
    	  <input type="checkbox" name="q4" value="f" onClick="Engine(4, this.value)">Plaid
    	  <br />
          <br />
          <li>Choose the world's fastest bird:
          <br />
            <select name="q5" size="1" id="q5">
              <option name="q5" value="a" onClick="Engine(5, this.value)">Roadrunner
              <option name="q5" value="b" onClick="Engine(5, this.value)">Peregrine falcon
              <option name="q5" value="c" onClick="Engine(5, this.value)">Emu
              <option name="q5" value="d" onClick="Engine(5, this.value)">Bald eagle
                </select>
          <br />
          <br />
          <li>What did Spartan warriors have to eat:
          <br />
            <select name="q6" size="1" id="q6">
              <option name="q6" value="a" onClick="Engine(6, this.value)">Twinkies
              <option name="q6" value="b" onClick="Engine(6, this.value)">Potato chips
              <option name="q6" value="c" onClick="Engine(6, this.value)">Plain black broth
              <option name="q6" value="d" onClick="Engine(6, this.value)">Fruit roll ups
                </select>
          <br />
          <br />
          <li>What are common traits of mammals? (Choose the two that best fit)
    	  <br />
    	  <input type="checkbox" name="q7" value="a" onClick="Engine(7, this.value)">Feathers
    	  <input type="checkbox" name="q7" value="b" onClick="Engine(7, this.value)">Warm blood
    	  <input type="checkbox" name="q7" value="c" onClick="Engine(7, this.value)">Body hair
    	  <input type="checkbox" name="q7" value="d" onClick="Engine(7, this.value)">Prehensile tail
    	  <input type="checkbox" name="q7" value="e" onClick="Engine(7, this.value)">Green eyes
    	  <input type="checkbox" name="q7" value="f" onClick="Engine(7, this.value)">Lays eggs    
           <br /> 
           <br />
           <li>Which one of the following is a real band?
           <br />
          <input type="radio" name="q8" value="a" onClick="Engine(8, this.value)">The Pixies
          <br />
          <input type="radio" name="q8" value="b" onClick="Engine(8, this.value)">The Partridge Family
          <br />
          <input type="radio" name="q8" value="c" onClick="Engine(8, this.value)">The Monkees
          <br />
          <input type="radio" name="q8" value="d" onClick="Engine(8, this.value)">Backstreet Boys
          <br />
          <br />
          <li>What year was Sesame Street first aired?
          <br />
            <select name="q9" size="1" id="q9">
              <option name="q9" value="a" onClick="Engine(9, this.value)">1973
              <option name="q9" value="b" onClick="Engine(9, this.value)">1969
              <option name="q9" value="c" onClick="Engine(9, this.value)">1960
              <option name="q9" value="d" onClick="Engine(9, this.value)">1981
                </select>  
           <br /> 
           <br />
           <li>World of Warcraft is...
           <br />
          <input type="radio" name="q10" value="a" onClick="Engine(10, this.value)">a vehicle for satan worship and tainted morals.
          <br />
          <input type="radio" name="q10" value="b" onClick="Engine(10, this.value)">George Bush's political cabinet.
          <br />
          <input type="radio" name="q10" value="c" onClick="Engine(10, this.value)">an MMORPG.
          <br />
          <input type="radio" name="q10" value="d" onClick="Engine(10, this.value)">for nerds. 
          <br />
          <br />
          <li>How often does the human stomach produce a new layer of mucus?
          <br />
            <select name="q11" size="1" id="q11">
              <option name="q11" value="a" onClick="Engine(11, this.value)">Every two weeks
              <option name="q11" value="b" onClick="Engine(11, this.value)">Every day
              <option name="q11" value="c" onClick="Engine(11, this.value)">Every year
              <option name="q11" value="d" onClick="Engine(11, this.value)">Every six months
                </select>  
           <br /> 
           <br />
           <li>Kurt Cobain, lead singer of Nirvana, reportedly suffered from:
           <br />
          <input type="radio" name="q12" value="a" onClick="Engine(12, this.value)">Courtney Love.
          <br />
          <input type="radio" name="q12" value="b" onClick="Engine(12, this.value)">Claustrophobia.
          <br />
          <input type="radio" name="q12" value="c" onClick="Engine(12, this.value)">Chronic stomach pain.
          <br />
          <input type="radio" name="q12" value="d" onClick="Engine(12, this.value)">Courtney Love's voice. 
          <br />
          <br />
          <li>Which former president's turtleneck sold for $5,000 at auction, after he wore it at cease-fire talks in Bosnia?
           <br />
          <input type="radio" name="q13" value="a" onClick="Engine(13, this.value)">Ronald Reagan
          <br />
          <input type="radio" name="q13" value="b" onClick="Engine(13, this.value)">Jimmy Carter
          <br />
          <input type="radio" name="q13" value="c" onClick="Engine(13, this.value)">George Bush
          <br />
          <input type="radio" name="q13" value="d" onClick="Engine(13, this.value)">Gerald Ford 
          <br />
          <br />
          <li>Who gave Woody his voice in the movie "Toy Story"?
          <br />
            <select name="q14" size="1" id="q14">
              <option name="q14" value="a" onClick="Engine(14, this.value)">Tom Hanks
              <option name="q14" value="b" onClick="Engine(14, this.value)">Kelsey Grammer
              <option name="q14" value="c" onClick="Engine(14, this.value)">Tim Allen
              <option name="q14" value="d" onClick="Engine(14, this.value)">Brad Pitt
                </select>  
           <br /> 
           <br />
           <li>According to certain mythology, who was Adam's first wife?
           <br />
          <input type="radio" name="q15" value="a" onClick="Engine(15, this.value)">Eve
          <br />
          <input type="radio" name="q15" value="b" onClick="Engine(15, this.value)">Mary Magdalene
          <br />
          <input type="radio" name="q15" value="c" onClick="Engine(15, this.value)">Lilith
          <br />
          <input type="radio" name="q15" value="d" onClick="Engine(15, this.value)">Jane 
          <br />
          <br />
          <li>How many high tides do seashores have in a week?
           <br />
          <input type="radio" name="q16" value="a" onClick="Engine(16, this.value)">14
          <br />
          <input type="radio" name="q16" value="b" onClick="Engine(16, this.value)">7
          <br />
          <input type="radio" name="q16" value="c" onClick="Engine(16, this.value)">28
          <br />
          <input type="radio" name="q16" value="d" onClick="Engine(16, this.value)">10 
          <br />
          <br />
          <li>What is a septuagenarian?
           <br />
          <input type="radio" name="q17" value="a" onClick="Engine(17, this.value)">Someone who is extremely afraid of sea creatures.
          <br />
          <input type="radio" name="q17" value="b" onClick="Engine(17, this.value)">A person who is between 70 and 80 years old.
          <br />
          <input type="radio" name="q17" value="c" onClick="Engine(17, this.value)">A historian.
          <br />
          <input type="radio" name="q17" value="d" onClick="Engine(17, this.value)">A person who studies those said sea creatures. 
          <br />
          <br />
           <li>Teddy bears were named after what president, when he refused to shoot a bear cub.
          <br />
            <select name="q18" size="1" id="q18">
              <option name="q18" value="a" onClick="Engine(18, this.value)">George W. Bush
              <option name="q18" value="b" onClick="Engine(18, this.value)">Theodore Roosevelt
              <option name="q18" value="c" onClick="Engine(18, this.value)">Abraham Lincoln
              <option name="q18" value="d" onClick="Engine(18, this.value)">John Adams
                </select>  
           <br /> 
           <br />
            <li>What are "daddy long legs"?
           <br />
          <input type="radio" name="q19" value="a" onClick="Engine(19, this.value)">A type of spider.
          <br />
          <input type="radio" name="q19" value="b" onClick="Engine(19, this.value)">My boyfriend.
          <br />
          <input type="radio" name="q19" value="c" onClick="Engine(19, this.value)">A nickname for the harvester and crane fly.
          <br />
          <input type="radio" name="q19" value="d" onClick="Engine(19, this.value)">Both a and c. 
          <br />
          <br />
          <li>A goldfish has a memory span of ___________.
          <br />   
          <input type="radio" name="q20" value="a" onClick="Engine(20, this.value)">3 seconds
          <br />
          <input type="radio" name="q20" value="b" onClick="Engine(20, this.value)">6 minutes
          <br />
          <input type="radio" name="q20" value="c" onClick="Engine(20, this.value)">6 months
          <br />
          <input type="radio" name="q20" value="d" onClick="Engine(20, this.value)">Wait...what was the question?
           <br /> 
           <br />
          <div align="center">
                
                  <input type=button onClick="Score()" value="How awesome am I?">
                  </div>
                  </ol>
    </form>
    </body>
    </html>
    Last edited by miss.smase; Apr 14, 2009, 05:54 PM. Reason: Added a link.

  • #2
    I have to assume this is just homework, as it couldn't be used for any serious purpose. All anybody has to do is VIEW==>>SOURCE to see all the correct answers.

    So, that being said...

    There really is NO REASON to make that call to Engine on each button click. In fact, it would be much preferable to *NOT* do so, and then you could add in the flexibility for multiple checkbox answers easily.

    Instead, all you need is a function that gets the (possibly multi-valued) value of a given radio-button *OR* checkbox set. The code to get the value will be the same, and since radio buttons can ONLY have one button checked, you will automatically get single values from them and can then get multi-values for checkboxes (when the checkboxes have the same name).

    The code is simple:
    Code:
    function getGroupValue( groupName )
    {
         var group = document.forms[0].elements[groupName];
         if ( group.length == null ) /* only needed if there are some 1-element groups */
         {
              return group.checked ? group.value : "";
         }  
         var answer = "";
         for ( var i = 0; i < group.length; ++i )
         {
               if ( group[i].checked ) answer += group[i].value;
         }
         return answer;
    }
    And so now you can invoke that by code as simple as
    Code:
         var userAnswer = getGroupValue("q4");
    or equivalent. And you will get back all the users answers concatenated into a single string. Example: acd
    Be yourself. No one else is as qualified.

    Comment


    • #3
      Thank you. You are correct - I am doing this for a project and it has no value as a quiz. It would be very easy to view the answers, not to mention the absurd questions.
      I will try this, but I have to ask if you could tell me what I need to replace. Again, I am very new to JavaScript. I appreciate your help!

      Comment


      • #4
        Is this homework for a class? I have to assume it is. If so, it's not really good for me to say more than I have already.

        I already noted that you should get rid of ALL of your onclick= event handlers.

        That means you can also get rid of your Engine( ) function.

        You should be doing *everything* (except the function I gave you) in your Score( ) function.

        Oh, w.t.h. Here:
        Code:
        function Score()
        {
            var form = document.forms[0];
            var answerText = "How awesome are you?";
            for(i=1;i<=20;i++)
            {
                 answerText=answerText+"<br>Question :"+i+"<br>";
                 var userAnswerForQi = getGroupValue( form.elements["q" + i ];
                 ... you figure it out from here ...
            }
            ...
        }
        But don't blame me if you have problems on the final exam! <grin/>
        Be yourself. No one else is as qualified.

        Comment


        • #5
          OOPS! I just noticed that some of your questions are done via <SELECT>s !!!

          That code I showed you ONLY works for CHECBOXES and RADIO BUTTONS!!!

          You would need to have different code for SELECTs.

          You *could* do that right in the function.

          Code:
          function getQuestionValue( groupName )
          {
               var group = document.forms[0].elements[groupName];
               if ( group.length == null ) 
               {
                    // must be that "group" is actually a <SELECT> list...
                    // so use the value of the list:
                    return group.value;
               }  
               var answer = "";
               for ( var i = 0; i < group.length; ++i )
               {
                     if ( group[i].checked ) answer += group[i].value;
               }
               return answer;
          }
          Be yourself. No one else is as qualified.

          Comment

          Working...
          X