Images don't show up in quiz results after start over button


Tags: javascript,jquery,html,css

Problem :

I'm posting this question again as I have a new problem now with my quiz. When I first take the quiz it works fine, then I click on the start over button to start the quiz again and it works just as well until I get to the results page, where the text and start over button appear but the images do not! How can I fix this?

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

HTML:

<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>

CSS:

// HEADER AND BOX

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;
}


Solution :

The reason is because the startOver function is hiding all the images.

$("#images").hide();

You need to hide the individual image tags instead of the div with $('#images img')

I added this helper to your code:

function hideImages() {
  $('#images img').hide();
}

hideImages();

See the demo here: https://jsbin.com/bezimupihi/edit?html,js,output


    CSS Howto..

    How to access CSS on img tag

    How to appy font color from li:hover to inner a link text using CSS

    css div and span display differently in browsers. How to unify?

    How to prevent IE from loading hidden content using HTML/CSS only?

    How to keep long image within background cover at any screen size in CSS?

    How to detect CSS inheritance source?

    How to create the corner that show in picture with css in webpage?

    How to create generic CSS class with input parameter

    external css loaded but not aplied to html - php codeigniter ssl - how to change css mimetype = text/html to text/css

    How to put things in divs with true border

    Hide/show block with CSS

    How to use CSS in ASP.NET application

    Show div on radio button check using JS fallback

    How to place the text after thumbnails at the bottom?

    How can I completely cancel a class when a CSS media style is used?

    Css and jQuery: How do I trigger the repositioning of a CSS3-animated element back to where it was before the animation?

    how to load external div into a master.html div from a number of submenu items

    how to use dialogClass option in jquery dialog with an external CSS file

    how to set anchor tag text width using css?

    How can I fade in new HTML elements with CSS [duplicate]

    How to change style for before/after in Angular?

    How to make a css media query snippet in ATOM editor

    How do I select an element in the dom with an attribute of ct:value?

    How to abstract this single case (showing text field based on selection of a drop down list) into a general function in jQuery?

    how to place the images exactly in menu position

    How to position a div differently for a specific page?

    How can I make a span stretch the available space between to other spans?

    How to delete only the selected message inside a #Chat using jquery?

    How can I expand this tag?

    Maintain border-spacing when using show() on a display:table element hidden with display:none