单击“开始”按钮时，“开始”按钮不显示问题

Question

I am working on a quiz. My start button is supposed to show the first question/answers when clicked and it does (the first time I use it).

In fact, when I click on my startover button at the end of the quiz (once results are shown), it brings me back to the first "page" with the start button (to start the quiz again) but when I click the start button, thought the progress bar does show, the question doesn't!

So basically, my start button works to start the quiz but if you want to start over the quiz again you can't because in this case it only shows the progress bar and nothing else.

This is my code:

  $(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();
 });