單擊“開始”按鈕時，“開始”按鈕不顯示問題

Question

我正在做一個測驗。 我的“ start按鈕應該被單擊時顯示第一個問題/答案（我第一次使用它）。

事實上，當我在我的點擊startover按鈕測驗結束（一旦結果如圖），它使我回到了第一個“頁上的”開始按鈕（重新開始測驗），但是當我點擊開始按鈕，以為進度條確實顯示，問題不顯示！

因此，基本上，我的“ start按鈕可以啟動測驗，但是如果您想再次從頭開始測驗，則不能，因為在這種情況下，它僅顯示進度條，而沒有其他內容。

這是我的代碼：

  $(document).ready(function(){ // DOC READY var totalQuestions = $('.questionarea').length; // VARIABLES var currentQuestion = 0; var $progressbar = $("#progressbar"); var score = 0; var value = 0; $questions = $('.questionarea'); $questions.hide(); $("#startover").on("click", function(){ // STARTOVER $(this).hide(); $(".answers").hide(); $("#images").hide(); $("#score").hide(); $(".btn-lg").show(); score = 0; value = 0; currentQuestion = 0; $progressbar.val(value); $questions.hide(); }); $(document).on("click", ".btn-lg", function(){ // START BUTTON FADE OUT $(this).hide(); $progressbar.show(200); $(".answers").show(200); $($questions.get(currentQuestion)).fadeIn(); }); $(document).on("click", '.answers input', function(){ // NEW QUESTIONS FADE IN + PROGRESS BAR $($questions.get(currentQuestion)).fadeOut(200, function () { currentQuestion ++; if (currentQuestion === totalQuestions){ $("#results").fadeIn(200); } else { $questions.eq(currentQuestion).fadeIn(200); } value = value + 10; $progressbar.val(value); }); }); function calcScore() { // OPTIONS CHECKED var house1 = document.getElementById('option1').checked; var house2 = document.getElementById('option8').checked; var house3 = document.getElementById('option11').checked; var house4 = document.getElementById('option16').checked; var house5 = document.getElementById('option18').checked; var house6 = document.getElementById('option23').checked; var house7 = document.getElementById('option27').checked; var house8 = document.getElementById('option32').checked; var house9 = document.getElementById('option35').checked; var house10 = document.getElementById('option36').checked; var sher1 = document.getElementById('option2').checked; var sher2 = document.getElementById('option6').checked; var sher3 = document.getElementById('option10').checked; var sher4 = document.getElementById('option14').checked; var sher5 = document.getElementById('option19').checked; var sher6 = document.getElementById('option24').checked; var sher7 = document.getElementById('option26').checked; var sher8 = document.getElementById('option29').checked; var sher9 = document.getElementById('option33').checked; var sher10 = document.getElementById('option37').checked; var cas1 = document.getElementById('option3').checked; var cas2 = document.getElementById('option7').checked; var cas3 = document.getElementById('option9').checked; var cas4 = document.getElementById('option15').checked; var cas5 = document.getElementById('option17').checked; var cas6 = document.getElementById('option21').checked; var cas7 = document.getElementById('option28').checked; var cas8 = document.getElementById('option30').checked; var cas9 = document.getElementById('option33').checked; var cas10 = document.getElementById('option38').checked; var brbad1 = document.getElementById('option4').checked; var brbad2 = document.getElementById('option5').checked; var brbad3 = document.getElementById('option12').checked; var brbad4 = document.getElementById('option13').checked; var brbad5 = document.getElementById('option20').checked; var brbad6 = document.getElementById('option22').checked; var brbad7 = document.getElementById('option25').checked; var brbad8 = document.getElementById('option31').checked; var brbad9 = document.getElementById('option34').checked; var brbad10 = document.getElementById('option39').checked; if(house1 === true){ // SCORE CALCULATION score += 1; } if(house2 === true){ score += 1; } if(house3 === true){ score += 1; } if(house4 === true){ score += 1; } if(house5 === true){ score += 1; } if(house6 === true){ score += 1; } if(house7 === true){ score += 1; } if(house8 === true){ score += 1; } if(house9 === true){ score += 1; } if(house10 === true){ score += 1; } if(sher1 === true){ score += 2; } if(sher2 === true){ score += 2; } if(sher3 === true){ score += 2; } if(sher4 === true){ score += 2; } if(sher5 === true){ score += 2; } if(sher6 === true){ score += 2; } if(sher7 === true){ score += 2; } if(sher8 === true){ score += 2; } if(sher9 === true){ score += 2; } if(sher10 === true){ score += 2; } if(cas1 === true){ score += 3; } if(cas2 === true){ score += 3; } if(cas3 === true){ score += 3; } if(cas4 === true){ score += 3; } if(cas5 === true){ score += 3; } if(cas6 === true){ score += 3; } if(cas7 === true){ score += 3; } if(cas8 === true){ score += 3; } if(cas9 === true){ score += 3; } if(cas10 === true){ score += 3; } if(brbad1 === true){ score += 4; } if(brbad2 === true){ score += 4; } if(brbad3 === true){ score += 4; } if(brbad4 === true){ score += 4; } if(brbad5 === true){ score += 4; } if(brbad6 === true){ score += 4; } if(brbad7 === true){ score += 4; } if(brbad8 === true){ score += 4; } if(brbad9 === true){ score += 4; } if(brbad10 === true){ score += 4; } // CHARACTER SCORE if(score < 12){ score = "House & Wilson!"; $("#houseimage").show(); } if(score <= 20){ score = "Sherlock & John!"; $("#sherimage").show(); } if(score <= 30){ score = "Dean & Cas!"; $("#casimage").show(); } if(score <= 40){ score = "Walt & Jesse!"; $("#brbadimage").show(); } } // SHOW RESULTS $("#results").click(function(){ $(this).hide(); $progressbar.hide(); $("#startover").show(); calcScore(); $("#score").show(); document.getElementById("score").innerText = 'You Got: ' + score; }); }); 

  body { background-image: url("http://wallpoper.com/images/00/40/76/15/gregory-house_00407615.jpg"); background-size: cover; background-repeat: no-repeat; overflow: hidden; background-position: fixed; } .header { margin-top: 30px; } #title { font-size: 30px; text-align: center; font-family: fantasy, serif; margin-top: 50px; margin: 0 auto; float: none; } .box { width: 900px; height: 450px; background-color: #ba348b; border-radius: 40px; box-shadow: 4px 4px 10px 4px black; padding: auto; overflow: hidden; text-align: center; margin: 0 auto; margin-bottom: 20px; margin-top: 30px; float: none; } // START QUIZ BUTTON #start { background-color: #00c6d2; border: 2px solid #13281c; border-radius: 10px; color: #13281c; padding: 20px; width: 200px; opacity: 1; margin-top: 110px; font-size: 20px; font-family: fantasy, serif; &:hover { background-color: #009ea8; } } .btn-lg { float: none; margin: 0 auto; text-align:center; margin-top: 70px; margin-left: 10px; } // PROGRESS BAR .divprogress { text-align: center; float: none; margin: 0 auto; } #progressbar { background-color: blue; margin: 0 auto; float: none; box-shadow: none; outline: none; text-align: center; width: 780px; margin-left: auto; margin-right:auto; margin-top: 20px; display: none; } // QUESTIONS AND ANSWERS #QA1, #QA2, #QA3, #QA4, #QA5, #QA6, #QA7, #QA8, #QA9, #QA10 { margin-top: 10px; font-family: fantasy, serif; color: #13281c; display: none; } .questionarea { display: none; } .col-lg-6 { float: none; margin: 0 auto; margin-top: -40px; } .question1, .question2, .question3, .question4, .question5, .question6, .question7, .question8, .question9, .question10 { font-size: 18px; font-family: fantasy, serif; margin-top: 70px; margin-bottom: 30px; } .btn-primary { font-size: 14px; background-color: #ffff32 !important; color: #13281c !important; outline: 0 none; opacity: 1; border: 0 none; &:hover{ background-color: #e5e500 !important; color: black !important; outline: 0 none; } } // RESULTS BUTTON / TEXT #results { padding: 20px; background-color: #609D57; border: 3px solid darkgreen; border-radius: 10px; display: none; text-align: center; font-family: fantasy, serif; float: center; margin-top: 90px; font-size: 18px; color: #13281c !important; outline: 0 none; opacity: 1; &:hover{ background-color: #568d4e !important; color: black !important; outline: 0 none; } } #score { text-align: center; font-size: 20px; font-family: fantasy, serif; float: center; color: #920602; } #startover{ text-align: center; font-size: 14px; font-family: fantasy, serif; margin-top: 20px; float: center; display: none; background-color: rgba(211,211,211, 0.7); &:hover { background-color: rgba(211,211,211, 1); } } // IMAGES #houseimage, #sherimage, #casimage, #brbadimage { display: none; text-align: center; margin-top: 10px; } #houseimage, #sherimage, #brbadimage { height: 240px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="container box"> <div class="header"> <div class="text-center" id="title"> WHICH TV BROMANCE ARE YOU AND YOUR BFF? </div></div> <div class="col-sm-11 text-center divprogress"> <div class="text-center"> <progress class="progress progress-striped progress-animated center-block" style="width: 0%, text-align: center" id="progressbar" value="0" max="100"></progress> </div></div> <br> <br> <div class="col-lg-6 text-center"> <button type="button" class="btn btn-secondary btn-lg text-center" id="start">START QUIZ</button></div> <!-- QUIZ AREA --> <!-- QUESTION & ANSWERS 1 --> <div id="content"> <div class="questionarea text-center" id="QA1" data-question"1"> <ul class="col-lg-6 list-group text-center"> <p class="list-group-item question1">Q1: How did you and your BFF meet?</p> </ul> <br> <div class="answers"> <div id="divoption1"> <label class="btn btn-primary"> <input type="radio" name="question1" value="1" id="option1"> At work </label></div> <br> <div id="divoption2"> <label class="btn btn-primary"> <input type="radio" name="question1" value="2" id="option2"> Living together</label></div> <br> <div id="divoption3"><label class="btn btn-primary"> <input type="radio" name="question1" value="3" id="option3"> Under unusual or other circumstances</label></div> <br> <div id="divoption4"> <label class="btn btn-primary"> <input type="radio" name="question1" value="4" id="option4"> In school</label></div></div> </div> <!-- QUESTION & ANSWERS 2 --> <div class="questionarea text-center" id="QA2" data-question"2"> <ul class="col-lg-6 list-group text-center"> <p class="list-group-item question2">Q2: How long have you known each other?</p> </ul> <br> <div class="answers"> <div id="divoption1"> <label class="btn btn-primary"> <input type="radio" name="question2" value="4" id="option5"> Less than 3 years </label></div> <br> <div id="divoption2"> <label class="btn btn-primary"> <input type="radio" name="question2" value="2" id="option6"> 4-7 years</label></div> <br> <div id="divoption3"><label class="btn btn-primary"> <input type="radio" name="question1" value="3" id="option7"> At least 8 years</label></div> <br> <div id="divoption4"> <label class="btn btn-primary"> <input type="radio" name="question2" value="1" id="option8"> Over 20 years</label></div></div> </div> <!-- QUESTION & ANSWERS 3 --> <div class="questionarea text-center" id="QA3" data-question"3"> <ul class="col-lg-6 list-group text-center"> <p class="list-group-item question3">Q3: How would you describe your friendship?</p> </ul> <br> <div class="answers"> <div id="divoption1"> <label class="btn btn-primary"> <input type="radio" name="question3" value="3" id="option9"> Deep </label></div> <br> <div id="divoption2"> <label class="btn btn-primary"> <input type="radio" name="question3" value="2" id="option10"> Amazing</label></div> <br> <div id="divoption3"><label class="btn btn-primary"> <input type="radio" name="question1" value="1" id="option11"> Needy</label></div> <br> <div id="divoption4"> <label class="btn btn-primary"> <input type="radio" name="question3" value="4" id="option12"> Protective</label></div></div> </div> <!-- QUESTION & ANSWERS 4 --> <div class="questionarea text-center" id="QA4" data-question"3"> <ul class="col-lg-6 list-group text-center"> <p class="list-group-item question4">Q4: What do you do together?</p> </ul> <br> <div class="answers"> <div id="divoption1"> <label class="btn btn-primary"> <input type="radio" name="question4" value="4" id="option13"> Business </label></div> <br> <div id="divoption2"> <label class="btn btn-primary"> <input type="radio" name="question4" value="2" id="option14"> Go out</label></div> <br> <div id="divoption3"><label class="btn btn-primary"> <input type="radio" name="question4" value="3" id="option15"> Just hold each other</label> </div> <br> <div id="divoption4"> <label class="btn btn-primary"> <input type="radio" name="question4" value="1" id="option16"> Play pranks on each other</label></div></div> </div> <!-- QUESTION & ANSWERS 5 --> <div class="questionarea text-center" id="QA5" data-question"4"> <ul class="col-lg-6 list-group text-center"> <p class="list-group-item question5">Q5: How often do you fight?</p> </ul> <br> <div class="answers"> <div id="divoption1"> <label class="btn btn-primary"> <input type="radio" name="question5" value="3" id="option17"> Not much, but when we do, it's a big deal </label></div> <br> <div id="divoption2"> <label class="btn btn-primary"> <input type="radio" name="question5" value="1" id="option18"> We have lots of harmless tiffs</label></div> <br> <div id="divoption3"><label class="btn btn-primary"> <input type="radio" name="question5" value="2" id="option19"> Sometimes</label> </div> <br> <div id="divoption4"> <label class="btn btn-primary"> <input type="radio" name="question5" value="4" id="option20"> Often and it can get physical</label></div></div> </div> <!-- QUESTION & ANSWERS 6 --> <div class="questionarea text-center" id="QA6" data-question"4"> <ul class="col-lg-6 list-group text-center"> <p class="list-group-item question6">Q6: How well do you know each other?</p> </ul> <br> <div class="answers"> <div id="divoption1"> <label class="btn btn-primary"> <input type="radio" name="question6" value="3" id="option21"> Quite a lot </label></div> <br> <div id="divoption2"> <label class="btn btn-primary"> <input type="radio" name="question6" value="4" id="option22"> Not much</label></div> <br> <div id="divoption3"><label class="btn btn-primary"> <input type="radio" name="question6" value="1" id="option23"> We know every detail of each other's lives</label> </div> <br> <div id="divoption4"> <label class="btn btn-primary"> <input type="radio" name="question6" value="2" id="option24"> He knows way more about my life than I know about his (or viceversa)</label></div></div> </div> <!-- QUESTION & ANSWERS 7 --> <div class="questionarea text-center" id="QA7" data-question"4"> <ul class="col-lg-6 list-group text-center"> <p class="list-group-item question7">Q7: Do you celebrate your birthdays together?</p> </ul> <br> <div class="answers"> <div id="divoption1"> <label class="btn btn-primary"> <input type="radio" name="question7" value="4" id="option25"> No, but I buy him a great present </label></div> <br> <div id="divoption2"> <label class="btn btn-primary"> <input type="radio" name="question7" value="2" id="option26"> Of course</label></div> <br> <div id="divoption3"><label class="btn btn-primary"> <input type="radio" name="question7" value="1" id="option27"> Often</label> </div> <br> <div id="divoption4"> <label class="btn btn-primary"> <input type="radio" name="question7" value="3" id="option28"> Only if he's in town at the time</label></div></div> </div> <!-- QUESTION & ANSWERS 8 --> <div class="questionarea text-center" id="QA8" data-question"4"> <ul class="col-lg-6 list-group text-center"> <p class="list-group-item question8">Q8: How often are you around each other's houses?</p> </ul> <br> <div class="answers"> <div id="divoption1"> <label class="btn btn-primary"> <input type="radio" name="question8" value="2" id="option29"> We live together </label></div> <br> <div id="divoption2"> <label class="btn btn-primary"> <input type="radio" name="question8" value="3" id="option30"> Often</label></div> <br> <div id="divoption3"><label class="btn btn-primary"> <input type="radio" name="question8" value="4" id="option31"> Not often</label></div> <br> <div id="divoption4"> <label class="btn btn-primary"> <input type="radio" name="question8" value="1" id="option32"> All the time</label></div></div> </div> <!-- QUESTION & ANSWERS 9 --> <div class="questionarea text-center" id="QA9" data-question"4"> <ul class="col-lg-6 list-group text-center"> <p class="list-group-item question9">Q9: How often do you talk about your feelings?</p> </ul> <br> <div class="answers"> <div id="divoption1"> <label class="btn btn-primary"> <input type="radio" name="question9" value="3" id="option33"> No need. We can see right through each other </label></div> <br> <div id="divoption2"> <label class="btn btn-primary"> <input type="radio" name="question9" value="2" id="option33"> Occasionally</label></div> <br> <div id="divoption3"><label class="btn btn-primary"> <input type="radio" name="question9" value="4" id="option34"> Rarely</label></div> <br> <div id="divoption4"> <label class="btn btn-primary"> <input type="radio" name="question9" value="1" id="option35"> Only in a joking manner</label></div></div> </div> <!-- QUESTION & ANSWERS 10 --> <div class="questionarea text-center" id="QA10" data-question"4"> <ul class="col-lg-6 list-group text-center"> <p class="list-group-item question10">Q10: What do you consider each other as?</p> </ul> <br> <div class="answers"> <div id="divoption1"> <label class="btn btn-primary"> <input type="radio" name="question10" value="1" id="option36"> Life partners </label></div> <br> <div id="divoption2"> <label class="btn btn-primary"> <input type="radio" name="question10" value="2" id="option37"> Best friends</label></div> <br> <div id="divoption3"><label class="btn btn-primary"> <input type="radio" name="question10" value="3" id="option38"> Family (brothers)</label></div> <br> <div id="divoption4"> <label class="btn btn-primary"> <input type="radio" name="question10" value="4" id="option39"> Family (father/son)</label></div></div> </div> <!-- ---- --> <button id="results">View Results</button> <h2 id='score'></h2> <div id="images"> <img id="houseimage" src="http://24.media.tumblr.com/tumblr_m70pdclcae1qcy01ao1_500.gif" /> <img id="brbadimage" src="http://24.media.tumblr.com/c88e253d9ed37f2cf422bf4bef27bcbc/tumblr_n52r45b3YW1qglx18o1_r1_250.gif" /> <img id="sherimage" src="http://read.html5.qq.com/image?src=forum&q=5&r=0&imgflag=7&imageUrl=http://mmbiz.qpic.cn/mmbiz/4vhrz0icYkiaUHCPsiaJUKMEsFnUWwluggISyy0iaAaZvhOxcKhdc3XLK8LhSc3q52lOaIvBzsuZP93STzKEyqoYBw/0?wx_fmt=gif" /> <img id="casimage" src="http://66.media.tumblr.com/9c0723fa2ff4054cea2d0a530802fef8/tumblr_inline_mtnsncH2fn1qjt6x6.gif" /> </div> <div><button id="startover">Start Over</button></div> </div> </div> </body> 

Answer 1

$("#startover").on("click", function(){  // STARTOVER
   $(this).hide();
  $('#option1').removeAttr('checked');
  $('#option2').removeAttr('checked');
  /// and so on for rest of options use an array/loop to be more elegant
   //$("#images").hide(); dont want to hide slideshow
   $("#score").hide();
   $(".btn-lg").show();
   score = 0;
   value = 0;
   currentQuestion = 0;
   $progressbar.val(value);
   $questions.hide();
 });