javascript - Im currently editing Jquery for a basic Q and A test that displays results -
im using 2 different jquery tutorials 1 displaying right answer other scorekeeping/calculator. part 1 works reason cant scorekeeper calculate past 3 20 question quiz. fyi im using bootstrap framework. can tell me went wrong? here 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) of these jokesters have not performed on campus in 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 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 first foals born on campus in 30 years. 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 , 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 , 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 , jacob</label></span><br/><br /> <span class="border"><input type="radio" name="q2" value="d" id="q2d" class="radio"><label for="q2d">d. artax , shadowfax</label></span><br/> </ul> </div><!-- /input-group --> </form> <div id="category2"> <p> <strong>question 2:</strong> correct answer <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) wore 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> correct answer <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 set 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> correct answer <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 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> correct answer <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) 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. 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. of above</label></span><br /><br/> </ul> </div><!-- /input-group --> </from> <div id="category6"> <p> <strong>question 6:</strong> correct answer <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) student passed away in march 2014, legacy lives on through 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> correct answer <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) on campus can pho style brisket, fire grilled salmon , 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 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. guy on 4th floor of mckeldin library</label></span><br /><br/> </ul> </div><!-- /input-group --> </from> <div id="category8"> <p> <strong>question 8:</strong> correct answer <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) terp souvenir did dali lama receive during 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 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. 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. maryland flag bow tie</label></span><br /><br/> </ul> </div><!-- /input-group --> </from> <div id="category9"> <p> <strong>question 9:</strong> correct answer <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) artist hasn’t performed @ art attack in 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. 1 direction</label></span><br /><br/> </ul> </div><!-- /input-group --> </form> <div id="category10"> <p> <strong>question 10:</strong> correct answer <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) animal 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 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) of these offerings testudo 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 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> correct answer <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 2011-12 season, how many times has women’s basketball team made 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> correct answer <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) 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> correct answer <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 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> correct answer <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) has occurred last 3 years @ 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> correct answer <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) 1 of these college park mainstays 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. 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> correct answer <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) name of 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> correct answer <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” joint performance 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. 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. 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> correct answer <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) football team changes more times katy perry. of following not uniform worn 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> correct answer <strong>answer 2</strong>.</p> </div> </div><!-- /.col-lg-6 --> </div> <br/> <div id="results"> show me answers! </div> <div id="category21"> <p> answered them right!</p> </div> <br /> <div class="center"> <div id="answersheet"> <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>
here bootply code cleaned up.
aside invalid html (mostly <spans> in place of <li>'s in <ul>'s), biggest problem had lot of <from> rags instead of <form> tags (which script $("form").each wouldn't find).
there still couple problems, biggest can see being answers array not match says answer after scoring. you're doing weird fetching answer: chosen.val() == answers[(index * 2) + 1]), i'll leave sorting out you.
Comments
Post a Comment