我目前正在为显示结果的基本问答测试编辑Jquery
Im currently editing Jquery for a basic Q and A test that displays results
我使用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])
,但我将把排序留给您。
相关文章:
- 模糊事件的Javascript测试
- 我的单元测试选项是什么
- 测试索引值是否等于某个数字的倍数
- 在localhost Dev Box上测试JSONP请求的最佳方式
- 测试数组中每个项的内容
- 测试Angular Service解决错误回调中的promise
- 使用Jest测试React Native应用程序
- 为函数代码编写测试
- 如何在Angular单元测试中从另一个控制器的rootScope将方法添加到rootScope中
- 如何使用JS/nightwatchjs并行运行多个测试
- 使用量角器的当前url单元测试的getTitle
- 茉莉花宝石-耙茉莉花:ci dons't运行测试
- JavaScript滚动脚本-在测试中激发,而不是在开发站点上
- AngularJS指令单元测试中未定义的函数
- 一个密码测试程序,如果存在空格,它会提醒用户
- 测试角度解析方法
- Protractor:在Iframe中测试非角度应用程序
- 简单类测试未通过
- 如何在Ionic2测试版中包含Ionic.io服务
- 我目前正在为显示结果的基本问答测试编辑Jquery