title: display correct answer javascript
body: <p>I am trying to get the following code to display the number of right answers at the end of the timmer any help would be great. also, I am having an issue where the scoreDiv fades away when the timer is up I would like it to appear when the timer is done. </p>
  
  <p>Note: I appoligize for the messy code I am new and trying to learn.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    $(function() {
  //-------------Global Var-----------
  
  //lets store our trivia questions in an object
      var trivia = [
                    // question 1
                      {
                          question: "01. What is CSS?",
                          answers: ["Casscading Style Sheets", "Carrot steamed soup", "Corruoted style sheets", "Casscading stairs sheets"],
                          correctAnswer: 0
                      },
                      // question 2
                      {
                          question: "02. Q2?",
                          answers: ["1", "2", "3", "4"],
                          correctAnswer: 1
                      },
                      // question 3
                      {
                          question: "03. Q3?",
                          answers: ["1", "2", "3", "4"],
                          correctAnswer: 3
                      },
                      // question 4
                      {
                          question: "04. Q4?",
                          answers: ["1", "2", "3", "4"],
                          correctAnswer: 3
                      }
                   ];
    
      var timerId;
      var timer      = 10;
      var selections = [];//Holds Selections
      var score      = $('#score');
      var counter    = 0;
  
      //----------------Create trivia questions in Div---------------
      //start Button  populate
      //Q1
      $("#startButton").on('click', function populate() {
          var testDiv = document.createElement("div");
          for (var i = 0; i &lt; trivia.length; i++) {
                testDiv.innerHTML = '&lt;h3&gt;' + trivia[0].question + '&lt;/h3&gt;'
                     + '&lt;div&gt; &lt;form&gt; &lt;p&gt; &lt;input type="radio" name ="answer0" value="right"&gt;'
                     + trivia[0].answers[0] + '&lt;/p&gt;'
                     + '&lt;p&gt;&lt;input type="radio" name ="answer1" value="2"&gt;' + trivia[0].answers[1] + '&lt;/p&gt;'
                     + '&lt;p&gt;&lt;input type="radio" name ="answer2" value="3"&gt;' + trivia[0].answers[2] + '&lt;/p&gt;'
                     + '&lt;p&gt;&lt;input type="radio" name ="answer3" value="4"&gt;' + trivia[0].answers[3] + '&lt;/p&gt;'
                     + '&lt;p&gt;&lt;/form&gt; &lt;/div&gt;';
                var questionsDiv = document.getElementById('questions');
                questionsDiv.appendChild(testDiv);
          }
      });
  
      //Q2
      $("#startButton").on('click', function populate() {
          var testDiv = document.createElement("div");
              for (var i = 0; i &lt; trivia.length; i++) {
                testDiv.innerHTML = '&lt;h3&gt;' + trivia[1].question + '&lt;/h3&gt;'
                     + '&lt;div&gt; &lt;form&gt; &lt;p&gt; &lt;input type="radio" name ="answer" value="1"&gt;'
                     + trivia[1].answers[0] + '&lt;/p&gt;'
                     + '&lt;p&gt;&lt;input type="radio" name ="answer" value="2"&gt;' + trivia[1].answers[1] + '&lt;/p&gt;'
                     + '&lt;p&gt;&lt;input type="radio" name ="answer" value="3"&gt;' + trivia[1].answers[2] + '&lt;/p&gt;'
                     + '&lt;p&gt;&lt;input type="radio" name ="answer" value="4"&gt;' + trivia[1].answers[3] + '&lt;/p&gt;'
                     + '&lt;p&gt;&lt;/form&gt; &lt;/div&gt;';
                var questionsDiv = document.getElementById('questions');
                questionsDiv.appendChild(testDiv);
          }
      });
  
      //Q3
      $("#startButton").on('click', function populate() {
          var testDiv = document.createElement("div");
          for (var i = 0; i &lt; trivia.length; i++) {
                testDiv.innerHTML = '&lt;h3&gt;' + trivia[2].question + '&lt;/h3&gt;'
                     + '&lt;div&gt; &lt;form&gt; &lt;p&gt; &lt;input type="radio" name ="answer" value="1"&gt;'
                     + trivia[2].answers[0] + '&lt;/p&gt;'
                     + '&lt;p&gt;&lt;input type="radio" name ="answer" value="2"&gt;' + trivia[2].answers[1] + '&lt;/p&gt;'
                     + '&lt;p&gt;&lt;input type="radio" name ="answer" value="3"&gt;' + trivia[2].answers[2] + '&lt;/p&gt;'
                     + '&lt;p&gt;&lt;input type="radio" name ="answer" value="4"&gt;' + trivia[2].answers[3] + '&lt;/p&gt;'
                     + '&lt;p&gt;&lt;/form&gt; &lt;/div&gt;';
                var questionsDiv = document.getElementById('questions');
                questionsDiv.appendChild(testDiv);
          }
      });
  
      //Q4
      $("#startButton").on('click', function populate() {
          var testDiv = document.createElement("div");
          for (var i = 0; i &lt; trivia.length; i++) {
                testDiv.innerHTML = '&lt;h3&gt;' + trivia[3].question
                     + '&lt;/h3&gt;'+ '&lt;div&gt; &lt;form&gt; &lt;p&gt; &lt;input type="radio" name ="answer" value="1"&gt;'
                     + trivia[3].answers[0] + '&lt;/p&gt;'
                     + '&lt;p&gt;&lt;input type="radio" name ="answer" value="2"&gt;' + trivia[3].answers[1] + '&lt;/p&gt;'
                     + '&lt;p&gt;&lt;input type="radio" name ="answer" value="3"&gt;' + trivia[3].answers[2] + '&lt;/p&gt;'
                     + '&lt;p&gt;&lt;input type="radio" name ="answer" value="4"&gt;' + trivia[3].answers[3] + '&lt;/p&gt;'
                     + '&lt;p&gt;&lt;/form&gt; &lt;/div&gt;';
                var questionsDiv = document.getElementById('questions');
                questionsDiv.appendChild(testDiv);
          }
      });
    
      //add radio buttons
      //Come back and loop the populate
  
      //------------------Start Game-------------------
      //Hide Start Button
      $(document).ready(function(){
          $("#startButton").click(function(){
              $("#startButton").fadeOut();
          });
      });
        
      //------------------Start Timer-------------------
      $("#startButton").on("click", run);
  
      function run() {
          timerId = setInterval(decrement, 1000);
      }
  
      function decrement() {
          timer--;
          $("#show-number").html("&lt;h3&gt;" + timer + "&lt;/h3&gt;");
  
          if (timer === 0) {
              stop();
              alert("times up");
              $('#questions').fadeOut();
          }
      }
  
      function stop() {
  
        clearInterval(timerId);
      };
  
      //-----------------Check awnsers------------------------
      //Pushusers ansers to an array
      function choose() {
          selections[counter] = $("input[type='radio'][name='answer']:checked").val() === "right";
      }
      choose();
  
      function displayScore() {
          var score = $('&lt;p&gt;',{id: 'score'});
  
          var numCorrect = 0;
          for (var i = 0; i &lt; selections.length; i++) {
              if (selections[i] === trivia[0].correctAnswer) {
                  numCorrect++;
              }
          }
  
          score.append('You got ' + numCorrect + ' questions out of ' + trivia.length + ' right!!!');
          return score;
      }
  
      displayScore();
  
      var scoreElement = displayScore();
      score.append(scoreElement).fadeIn();
  
  //-----------------Finish Button------------------------
  // when finish button is click skip timer to 0
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
   text-align: center;
   font-family: 'Poiret One', sans-serif;
   background-color:#8f16cc;
   color: white;
  }
  
  h1 {
   font-family: 'Poiret One', sans-serif;
   font-size: 4em;
  }
  
  h2 {
   font-size: 2em;
  }
  
  button {
   color: white;
   border-radius: 20px;
   background-color: #8f16cc;
   font-size: 2em;
  }
  
  .radio {
   display: block;
  }
  
  .answers {
   display: block;
   color: or
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;Trivial Game!&lt;/title&gt;
  
   &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
   &lt;link rel="stylesheet" type="text/css" href="assets/styles/styles.css"&gt;
  
   &lt;link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;Trivia Game&lt;/h1&gt;
  &lt;h2&gt;Test your Knowledge&lt;/h2&gt;
  &lt;div id="header"&gt;&lt;/div&gt;
  
  &lt;div id="show-number"&gt;&lt;/div&gt;
  
  &lt;button id="startButton"&gt;Start&lt;/button&gt;
  
  &lt;div id="questions"&gt;
  
  &lt;div id="score"&gt;&lt;/div&gt;
  
  
  &lt;/div&gt;
  
  &lt;div id="footer"&gt;&lt;/div&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="assets/scripts/app.js"&gt;&lt;/script&gt;
  
  
   
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>