我目前正在为显示结果的基本问答测试编辑Jquery

Im currently editing Jquery for a basic Q and A test that displays results

本文关键字:问答 测试 Jquery 编辑 结果 目前 显示      更新时间:2023-09-26

我使用2个不同的Jquery教程1显示正确的答案,另一个是记分/计算器。第一部分做得很好,但由于某些原因,我无法让记分员算出超过3分的分数。这是一个20题的测验。我使用bootstrap框架。有人能告诉我哪里做错了吗?这里是Jquery

var answers = ["d", "b", "b", "a", "a", "e", "a", "c", "c", "d", "d", "c", "d", "b", "d", "a", "c", "a", "b", "f", ];    
function calcScore() {
    var results1 = {right: 0, wrong: 0, answered: [], unanswered: [], missed: []};
    $("form").each(function(index) {
        var chosen = $(this).find("input:checked");
        if (chosen.length) {
            results1.answered.push(index);
            if (chosen.val() == answers[(index * 2) + 1]) {
                results1.right++;
                results1.answered.push(index);
            } else {
                results1.wrong++;
                results1.missed.push(index);
            }
        } else {
            results1.unanswered.push(index);
        }
    });
    return(results1);
}
$("#buttonDiv").click(function() {
    var results1 = calcScore();
    var str = "Correct: " + results1.right + ", Wrong: " + results1.wrong;
    $("#results1").html(str);
});
html:

  <div class="row">
  <div class="col-lg-6">
    <form>
    <div class="input-group">
     <p class="question">1) Which of these jokesters have not performed on campus in the last 4 years?</p>  
      <ul class="input-group-addon answers"> 
       <span class="border"><input type="radio" name="q1" value="a" id="q1a" class="radio"><label for="q1a">A.  Jim Gaffigan</label></span><br/><br />        
       <span class="border"><input type="radio" name="q1" value="b" id="q1b" class="radio"><label for="q1b">B.  Kevin Hart</label></span><br/><br />      
       <span class="border"><input type="radio" name="q1" value="c" id="q1c" class="radio"><label for="q1c">C.  Seth Meyers</label></span><br/><br />            
       <span class="border"><input type="radio" name="q1" value="d" id="q1d" class="radio"><label for="q1d">D.  Rodney Dangerfield</label></span><br /><br/>  
      </ul>
    </div><!-- /input-group -->
  </form>
    <div id="category1">            
   <p>test this is a test</p>   
</div>      
  </div><!-- /.col-lg-6 -->
</div>
  <div class="row">
  <div class="col-lg-6">
    <from>
    <div class="input-group">
    <p class="question">2)  In 2013 the first foals were born on campus in 30 years. What are their names?</p>        
      <ul class="input-group-addon answers">  
        <span class="border"><input type="radio" name="q2" value="a" id="q2a" class="radio"><label for="q2a">A. Twilight Sparkle and Rainbow Dash</label></span><br/><br />           
        <span class="border"><input type="radio" name="q2" value="b" id="q2b" class="radio"><label for="q2b">B. Diamondback Fire and Maryland Miss</label></span><br/><br />            
        <span class="border"><input type="radio" name="q2" value="c" id="q2c" class="radio"><label for="q2c">C. Edward and Jacob</label></span><br/><br />           
        <span class="border"><input type="radio" name="q2" value="d" id="q2d" class="radio"><label for="q2d">D. Artax and Shadowfax</label></span><br/>       
      </ul>
    </div><!-- /input-group -->
  </form>
    <div id="category2">            
<p>              
<strong>Question 2:</strong> The correct answer is <strong>Answer 2</strong>.</p>        
</div>        
  </div><!-- /.col-lg-6 -->
</div>
  <div class="row">
  <div class="col-lg-6">
    <from>
    <div class="input-group">
     <p class="question">3) Who wore it better: Bill Nye or Wallace Loh? (bowtie photos)</p>
      <ul class="input-group-addon answers">  
        <span class="border"><input type="radio" name="q3" value="a" id="q3a" class="radio"><label for="q3a">A. Bill Nye</label></span><br /><br/>            
        <span class="border"><input type="radio" name="q3" value="b" id="q3b" class="radio" ><label for="q3b">B. Shadowfax</label></span><br/><br />                     
      <!--  <span class="border"><input type="radio" name="q3" value="c" id="q3c" class="radio"><label for="q3c">Answer 3</label></span><br/><br />           
        <span class="border"><input type="radio" name="q3" value="d" id="q3d" class="radio"><label for="q3d">Answer 4</label></span><br /><br/> -->
      </ul>
    </div><!-- /input-group -->
</from>
<div id="category3">            
<p>                
<strong>Question 3:</strong> The correct answer is <strong>Answer 3</strong>.</p>        
</div> 
  </div><!-- /.col-lg-6 -->
</div>
  <div class="row">
  <div class="col-lg-6">
    <from>
    <div class="input-group">
     <p class="question">4) How high did Gamera II fly to set the world record in 2012?</p>  
      <ul class="input-group-addon answers">  
       <span class="border"><input type="radio" name="q4" value="a" id="q4a" class="radio"><label for="q4a">A.  8 ft.</label></span><br/>  <br />        
       <span class="border"><input type="radio" name="q4" value="b" id="q4b" class="radio"><label for="q4b">B.  9 ft.</label></span><br/><br />      
       <span class="border"><input type="radio" name="q4" value="c" id="q4c" class="radio"><label for="q4c">C.  10 ft.</label></span><br/><br />            
       <span class="border"><input type="radio" name="q4" value="d" id="q4d" class="radio"><label for="q4d">D.  11 ft.</label></span><br /><br/>  
      </ul>
    </div><!-- /input-group -->
  </form>
    <div id="category4">            
<p>               
<strong>Question 4:</strong> The correct answer is <strong>Answer 4</strong>.</p>        
</div>        
  </div><!-- /.col-lg-6 -->
</div>
  <div class="row">
  <div class="col-lg-6">
    <form>
    <div class="input-group">
     <p class="question">5) Puppy Palooza debuted in what year?</p> 
      <ul class="input-group-addon answers">  
       <span class="border"><input type="radio" name="q5" value="a" id="q5a" class="radio"><label for="q5a">A.  2011</label></span><br/>  <br />        
       <span class="border"><input type="radio" name="q5" value="b" id="q5b" class="radio"><label for="q5b">B.  2012</label></span><br/><br />      
       <span class="border"><input type="radio" name="q5" value="c" id="q5c" class="radio"><label for="q5c">C.  2013</label></span><br/><br />            
       <span class="border"><input type="radio" name="q5" value="d" id="q5d" class="radio"><label for="q5d">D.  2014</label></span><br /><br/>  
      </ul>
    </div><!-- /input-group -->
  </from>
    <div id="category5">            
<p>                
<strong>Question 5:</strong> The correct answer is <strong>Answer 1</strong>.</p>        
</div>    
  </div><!-- /.col-lg-6 -->
</div>
  <div class="row">
  <div class="col-lg-6">
    <from>
    <div class="input-group">
     <p class="question">6) What did Occupy UMD occupy?</p>     
      <ul class="input-group-addon answers">  
       <span class="border"><input type="radio" name="q6" value="a" id="q6a" class="radio"><label for="q6a">A.  The Stamp</label></span><br/>  <br />        
       <span class="border"><input type="radio" name="q6" value="b" id="q6b" class="radio"><label for="q6b">B.  Main Admin</label></span><br/><br />      
       <span class="border"><input type="radio" name="q6" value="c" id="q6c" class="radio"><label for="q6c">C.  McKeldin Mall</label></span><br/><br />            
       <span class="border"><input type="radio" name="q6" value="d" id="q6d" class="radio"><label for="q6d">D.  Xfinity Center</label></span><br /><br/> 
       <span class="border"><input type="radio" name="q6" value="e" id="q6e" class="radio"><label for="q6e">E.  All of the above</label></span><br /><br/>   
      </ul>
    </div><!-- /input-group -->
  </from>
    <div id="category6">            
<p>                
<strong>Question 6:</strong> The correct answer is <strong>Answer 2</strong>.</p>        
</div>   
  </div><!-- /.col-lg-6 -->
</div>
  <div class="row">
  <div class="col-lg-6">
    <from>
    <div class="input-group">
    <p class="question">7)  This student passed away in March 2014, but his legacy lives on through this pose:</p>    
      <ul class="input-group-addon answers">  
       <span class="border"><input type="radio" name="q7" value="a" id="q7a" class="radio"><label for="q7a">A.  Zaching</label></span><br/>  <br />        
       <span class="border"><input type="radio" name="q7" value="b" id="q7b" class="radio"><label for="q7b">B.  Screeching</label></span><br/><br />      
       <span class="border"><input type="radio" name="q7" value="c" id="q7c" class="radio"><label for="q7c">C.  Tebowing</label></span><br/><br />            
       <span class="border"><input type="radio" name="q7" value="d" id="q7d" class="radio"><label for="q7d">D.  Planking</label></span><br /><br/>  
      </ul>
    </div><!-- /input-group -->
  </from>
    <div id="category7">            
<p>                
<strong>Question 7:</strong> The correct answer is <strong>Answer 3</strong>.</p>        
</div>  
  </div><!-- /.col-lg-6 -->
</div>
  <div class="row">
  <div class="col-lg-6">
    <form>
    <div class="input-group">
   <p class="question">8) Where on campus can you get Pho style brisket, fire grilled salmon and deconstructed cannoli?</p>     
      <ul class="input-group-addon answers">  
       <span class="border"><input type="radio" name="q8" value="a" id="q8a" class="radio"><label for="q8a">A.  Taco Bell in the Stamp</label></span><br/>  <br />        
       <span class="border"><input type="radio" name="q8" value="b" id="q8b" class="radio"><label for="q8b">B.  Green Tidings food truck</label></span><br/><br />      
       <span class="border"><input type="radio" name="q8" value="c" id="q8c" class="radio"><label for="q8c">C.  251 North</label></span><br/><br />            
       <span class="border"><input type="radio" name="q8" value="d" id="q8d" class="radio"><label for="q8d">D.  From that guy on the 4th floor of McKeldin Library</label></span><br /><br/>  
      </ul>
    </div><!-- /input-group -->
  </from>
    <div id="category8">            
<p>               
<strong>Question 8:</strong> The correct answer is <strong>Answer 4</strong>.</p>        
</div> 
  </div><!-- /.col-lg-6 -->
</div>
  <div class="row">
  <div class="col-lg-6">
    <from>
    <div class="input-group">
    <p class="question">9)  What Terp souvenir did the Dali Lama receive during his visit in 2013?</p>  
      <ul class="input-group-addon answers">  
       <span class="border"><input type="radio" name="q9" value="a" id="q9a" class="radio"><label for="q9a">A.  Parking ticket from DOTS</label></span><br/>  <br />        
       <span class="border"><input type="radio" name="q9" value="b" id="q9b" class="radio"><label for="q9b">B.  Under Armor cleats</label></span><br/><br />      
       <span class="border"><input type="radio" name="q9" value="c" id="q9c" class="radio"><label for="q9c">C.  A UMD sun visor</label></span><br/><br />            
       <span class="border"><input type="radio" name="q9" value="d" id="q9d" class="radio"><label for="q9d">D.  A Maryland flag bow tie</label></span><br /><br/>  
      </ul>
    </div><!-- /input-group -->
  </from>
    <div id="category9">           
<p>               
<strong>Question 9:</strong> The correct answer is <strong>Answer 1</strong>.</p>        
</div>  
  </div><!-- /.col-lg-6 -->
</div>
  <div class="row">
  <div class="col-lg-6">
    <form>
    <div class="input-group">
       <p class="question">10)   Which artist hasn’t performed at Art Attack in the last 4 years?</p>      
      <ul class="input-group-addon answers">  
       <span class="border"><input type="radio" name="q10" value="a" id="q10a" class="radio"><label for="q10a">A. Jessie J</label></span><br/>  <br />        
       <span class="border"><input type="radio" name="q10" value="b" id="q10b" class="radio"><label for="q10b">B. Big Sean + Wale</label></span><br/><br />      
       <span class="border"><input type="radio" name="q10" value="c" id="q10c" class="radio"><label for="q10c">C. MGMT</label></span><br/><br />            
       <span class="border"><input type="radio" name="q10" value="d" id="q10d" class="radio"><label for="q10d">D. One Direction</label></span><br /><br/>  
      </ul>
    </div><!-- /input-group -->
  </form>
    <div id="category10">            
<p>                
<strong>Question 10:</strong> The correct answer is <strong>Answer 2</strong>.</p>        
</div>  
  </div><!-- /.col-lg-6 -->
</div>
  <div class="row">
  <div class="col-lg-6">
    <form>
    <div class="input-group">
     <p class="question">11)   What animal is Dr. Loh riding?</p>  
      <ul class="input-group-addon answers"> 
       <span class="border"><input type="radio" name="q11" value="a" id="q11a" class="radio"><label for="q11a">a. Tortoise</label></span><br/><br />        
       <span class="border"><input type="radio" name="q11" value="b" id="q11b" class="radio"><label for="q11b">b. Hare</label></span><br/><br />      
       <span class="border"><input type="radio" name="q11" value="c" id="q11c" class="radio"><label for="q11c">c. Griffon</label></span><br/><br />            
       <span class="border"><input type="radio" name="q11" value="d" id="q11d" class="radio"><label for="q11d">d. Camel</label></span><br /><br/>  
      </ul>
    </div><!-- /input-group -->
  </form>
    <div id="category11">            
   <p>test this is a test</p>   
</div>      
  </div><!-- /.col-lg-6 -->
</div>
  <div class="row">
  <div class="col-lg-6">
    <from>
    <div class="input-group">
    <p class="question">12)  Which of these offerings to Testudo is flammable?</p>        
      <ul class="input-group-addon answers">  
        <span class="border"><input type="radio" name="q12" value="a" id="q12a" class="radio"><label for="q12a">a. Stop Sign</label></span><br/><br />           
        <span class="border"><input type="radio" name="q12" value="b" id="q12b" class="radio"><label for="q12b">b. CVS Basket</label></span><br/><br />            
        <span class="border"><input type="radio" name="q12" value="c" id="q12c" class="radio"><label for="q12c">c. Candle with a lampshade</label></span><br/><br />           
        <span class="border"><input type="radio" name="q12" value="d" id="q12d" class="radio"><label for="q12d">d.  Laptop</label></span><br/>       
      </ul>
    </div><!-- /input-group -->
  </form>
    <div id="category12">            
<p>              
<strong>Question 12:</strong> The correct answer is <strong>Answer 2</strong>.</p>        
</div>        
  </div><!-- /.col-lg-6 -->
</div>
  <div class="row">
  <div class="col-lg-6">
    <from>
    <div class="input-group">
     <p class="question">13)  Since the 2011-12 season, how many times has the women’s basketball team made the NCAA tourney?</p>
      <ul class="input-group-addon answers">  
        <span class="border"><input type="radio" name="q13" value="a" id="q13a" class="radio"><label for="q13a">a. 3</label></span><br /><br/>            
        <span class="border"><input type="radio" name="q13" value="b" id="q13b" class="radio"><label for="q13b">b.  2</label></span><br/><br />                     
        <span class="border"><input type="radio" name="q13" value="c" id="q13c" class="radio"><label for="q13c">c. 12</label></span><br/><br />           
        <span class="border"><input type="radio" name="q13" value="d" id="q13d" class="radio"><label for="q13d">d. 4</label></span><br /><br/>
      </ul>
    </div><!-- /input-group -->
</from>
<div id="category13">            
<p>                
<strong>Question 13:</strong> The correct answer is <strong>Answer 3</strong>.</p>        
</div> 
  </div><!-- /.col-lg-6 -->
</div>
  <div class="row">
  <div class="col-lg-6">
    <from>
    <div class="input-group">
     <p class="question">14)   What is this monstrosity?</p>  
      <ul class="input-group-addon answers">  
       <span class="border"><input type="radio" name="q14" value="a" id="q14a" class="radio"><label for="q14a">a.  Ratsie’s last slice</label></span><br/>  <br />        
       <span class="border"><input type="radio" name="q14" value="b" id="q14b" class="radio"><label for="q14b">b.  Crab Pretzel</label></span><br/><br />      
       <span class="border"><input type="radio" name="q14" value="c" id="q14c" class="radio"><label for="q14c">c.  Churro Dog</label></span><br/><br />            
       <span class="border"><input type="radio" name="q14" value="d" id="q14d" class="radio"><label for="q14d">d.  Chipotle Quesarito burrito</label></span><br /><br/>  
      </ul>
    </div><!-- /input-group -->
  </form>
    <div id="category14">            
<p>               
<strong>Question 14:</strong> The correct answer is <strong>Answer 4</strong>.</p>        
</div>        
  </div><!-- /.col-lg-6 -->
</div>
  <div class="row">
  <div class="col-lg-6">
    <form>
    <div class="input-group">
     <p class="question">15)   In 2014 Maryland joined which athletic conference?</p> 
      <ul class="input-group-addon answers">  
       <span class="border"><input type="radio" name="q15" value="a" id="q15a" class="radio"><label for="q15a">a.  ACC</label></span><br/>  <br />        
       <span class="border"><input type="radio" name="q15" value="b" id="q15b" class="radio"><label for="q15b">b.  Big East</label></span><br/><br />      
       <span class="border"><input type="radio" name="q15" value="c" id="q15c" class="radio"><label for="q15c">c.  Power outage</label></span><br/><br />            
       <span class="border"><input type="radio" name="q15" value="d" id="q15d" class="radio"><label for="q15d">d.  Low attendance</label></span><br /><br/>  
      </ul>
    </div><!-- /input-group -->
  </from>
    <div id="category15">            
<p>                
<strong>Question 15:</strong> The correct answer is <strong>Answer 1</strong>.</p>        
</div>    
  </div><!-- /.col-lg-6 -->
</div>
  <div class="row">
  <div class="col-lg-6">
    <from>
    <div class="input-group">
     <p class="question">16)    What has occurred the last 3 years at a high-profile men’s basketball game?</p>     
      <ul class="input-group-addon answers">  
       <span class="border"><input type="radio" name="q16" value="a" id="q16a" class="radio"><label for="q16a">a. Flash Mob</label></span><br/>  <br />        
       <span class="border"><input type="radio" name="q16" value="b" id="q16b" class="radio"><label for="q16b">b. Burning couches</label></span><br/><br />      
       <span class="border"><input type="radio" name="q16" value="c" id="q16c" class="radio"><label for="q16c">c. Power outage</label></span><br/><br />            
       <span class="border"><input type="radio" name="q16" value="d" id="q16d" class="radio"><label for="q16d">d. Low attendance</label></span><br /><br/>  
      </ul>
    </div><!-- /input-group -->
  </from>
    <div id="category16">            
<p>                
<strong>Question 16:</strong> The correct answer is <strong>Answer 2</strong>.</p>        
</div>   
  </div><!-- /.col-lg-6 -->
</div>
  <div class="row">
  <div class="col-lg-6">
    <from>
    <div class="input-group">
    <p class="question">17)  Which one of these College Park mainstays is still standing?</p>    
      <ul class="input-group-addon answers">  
       <span class="border"><input type="radio" name="q17" value="a" id="q17a" class="radio"><label for="q17a">a. Maryland Book Exchange</label></span><br/>  <br />        
       <span class="border"><input type="radio" name="q17" value="b" id="q17b" class="radio"><label for="q17b">b. Ratsie’s</label></span><br/><br />      
       <span class="border"><input type="radio" name="q17" value="c" id="q17c" class="radio"><label for="q17c">c. The Bagel Place</label></span><br/><br />            
       <span class="border"><input type="radio" name="q17" value="d" id="q17d" class="radio"><label for="q17d">d. Knox Boxes</label></span><br /><br/>  
      </ul>
    </div><!-- /input-group -->
  </from>
    <div id="category17">            
<p>                
<strong>Question 17:</strong> The correct answer is <strong>Answer 3</strong>.</p>        
</div>  
  </div><!-- /.col-lg-6 -->
</div>
  <div class="row">
  <div class="col-lg-6">
    <form>
    <div class="input-group">
   <p class="question">18)   What was the name of the epic snowball fight on McKeldin Mall in Feb. 2015?</p>     
      <ul class="input-group-addon answers">  
       <span class="border"><input type="radio" name="q18" value="a" id="q18a" class="radio"><label for="q18a">a. #SnowForLoh</label></span><br/>  <br />        
       <span class="border"><input type="radio" name="q18" value="b" id="q18b" class="radio"><label for="q18b">b.  #Snowgasm</label></span><br/><br />      
       <span class="border"><input type="radio" name="q18" value="c" id="q18c" class="radio"><label for="q18c">c.  #Snowmageddon</label></span><br/><br />            
       <span class="border"><input type="radio" name="q18" value="d" id="q18d" class="radio"><label for="q18d">d.  #Snowpocalypse</label></span><br /><br/>  
      </ul>
    </div><!-- /input-group -->
  </from>
    <div id="category18">            
<p>               
<strong>Question 18:</strong> The correct answer is <strong>Answer 4</strong>.</p>        
</div> 
  </div><!-- /.col-lg-6 -->
</div>
  <div class="row">
  <div class="col-lg-6">
    <from>
    <div class="input-group">
    <p class="question">19)  “Midsummer Nights Dream” was a joint performance with which school?</p>  
      <ul class="input-group-addon answers">  
       <span class="border"><input type="radio" name="q19" value="a" id="q19a" class="radio"><label for="q19a">a.  Duke University</label></span><br/>  <br />        
       <span class="border"><input type="radio" name="q19" value="b" id="q19b" class="radio"><label for="q19b">b.  The National Academy of Chinese Theatre Arts</label></span><br/><br />      
       <span class="border"><input type="radio" name="q19" value="c" id="q19c" class="radio"><label for="q19c">c.  The Julliard School</label></span><br/><br />            
       <span class="border"><input type="radio" name="q19" value="d" id="q19d" class="radio"><label for="q19d">d.  Coastal Carolina University</label></span><br /><br/>  
      </ul>
    </div><!-- /input-group -->
  </from>
    <div id="category19">           
<p>               
<strong>Question 9:</strong> The correct answer is <strong>Answer 1</strong>.</p>        
</div>  
  </div><!-- /.col-lg-6 -->
</div>
  <div class="row">
  <div class="col-lg-6">
    <form>
    <div class="input-group">
       <p class="question">20)   The football team changes their look more times than Katy Perry. Which of the following is not a uniform worn by the team?</p>      
      <ul class="input-group-addon answers">  
       <span class="border"><input type="radio" name="q20" value="a" id="q20a" class="radio"><label for="q20a">a. Pride 1.0 </label></span><br/>  <br />        
       <span class="border"><input type="radio" name="q20" value="b" id="q20b" class="radio"><label for="q20b">b. Star-Spangled</label></span><br/><br />      
       <span class="border"><input type="radio" name="q20" value="c" id="q20c" class="radio"><label for="q20c">c. Maryland Pride 2.0</label></span><br/><br />            
       <span class="border"><input type="radio" name="q20" value="d" id="q20d" class="radio"><label for="q20d">d. Black Ops</label></span><br /><br/>  
       <span class="border"><input type="radio" name="q20" value="e" id="q20e" class="radio"><label for="q20e">e. White Ops</label></span><br/>  <br />        
       <span class="border"><input type="radio" name="q20" value="f" id="q20f" class="radio"><label for="q20f">f. Patriotic</label></span><br/><br />      
       <span class="border"><input type="radio" name="q20" value="g" id="q20g" class="radio"><label for="q20g">g. Red on Black</label></span><br/><br />            
       <span class="border"><input type="radio" name="q20" value="h" id="q20h" class="radio"><label for="q20h">h. Solid Black</label></span><br /><br/>  
       <span class="border"><input type="radio" name="q20" value="i" id="q20i" class="radio"><label for="q20i">i. Turtle helmet</label></span><br /><br/> 
      </ul>
    </div><!-- /input-group -->
  </form>
    <div id="category20">            
<p>                
<strong>Question 20:</strong> The correct answer is <strong>Answer 2</strong>.</p>        
</div>  
  </div><!-- /.col-lg-6 -->
</div>
<br/>
<div id="results">            
Show me the answers!       
</div>                                
<div id="category21">            
<p> You answered them all right!</p>        
</div>
<br />
<div class="center">
<div id="answerswerSheet">
    <p id="score"><h1>Your Score!</h1></p>
    <br />
    <span>Results: </span><span id="results1"></span>
 </div>
 <div id="buttonDiv">        
    <input type="button" id="button" value="Score" />
</div>
</div>

这是一个bootply,代码已清理。

除了无效的HTML(主要是<spans>代替<li><ul>),最大的问题是你有很多<from>破布而不是<form>标签(脚本$("form").each找不到)。

仍然有几个问题,我能看到的最大的是答案数组不匹配它说的答案是得分后。您在获取答案时做了一些奇怪的事情:chosen.val() == answers[(index * 2) + 1]),但我将把排序留给您。