display correct answer javascript

Question

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.

Note: I appoligize for the messy code I am new and trying to learn.

  $(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 < trivia.length; i++) { testDiv.innerHTML = '<h3>' + trivia[0].question + '</h3>' + '<div> <form> <p> <input type="radio" name ="answer0" value="right">' + trivia[0].answers[0] + '</p>' + '<p><input type="radio" name ="answer1" value="2">' + trivia[0].answers[1] + '</p>' + '<p><input type="radio" name ="answer2" value="3">' + trivia[0].answers[2] + '</p>' + '<p><input type="radio" name ="answer3" value="4">' + trivia[0].answers[3] + '</p>' + '<p></form> </div>'; var questionsDiv = document.getElementById('questions'); questionsDiv.appendChild(testDiv); } }); //Q2 $("#startButton").on('click', function populate() { var testDiv = document.createElement("div"); for (var i = 0; i < trivia.length; i++) { testDiv.innerHTML = '<h3>' + trivia[1].question + '</h3>' + '<div> <form> <p> <input type="radio" name ="answer" value="1">' + trivia[1].answers[0] + '</p>' + '<p><input type="radio" name ="answer" value="2">' + trivia[1].answers[1] + '</p>' + '<p><input type="radio" name ="answer" value="3">' + trivia[1].answers[2] + '</p>' + '<p><input type="radio" name ="answer" value="4">' + trivia[1].answers[3] + '</p>' + '<p></form> </div>'; var questionsDiv = document.getElementById('questions'); questionsDiv.appendChild(testDiv); } }); //Q3 $("#startButton").on('click', function populate() { var testDiv = document.createElement("div"); for (var i = 0; i < trivia.length; i++) { testDiv.innerHTML = '<h3>' + trivia[2].question + '</h3>' + '<div> <form> <p> <input type="radio" name ="answer" value="1">' + trivia[2].answers[0] + '</p>' + '<p><input type="radio" name ="answer" value="2">' + trivia[2].answers[1] + '</p>' + '<p><input type="radio" name ="answer" value="3">' + trivia[2].answers[2] + '</p>' + '<p><input type="radio" name ="answer" value="4">' + trivia[2].answers[3] + '</p>' + '<p></form> </div>'; var questionsDiv = document.getElementById('questions'); questionsDiv.appendChild(testDiv); } }); //Q4 $("#startButton").on('click', function populate() { var testDiv = document.createElement("div"); for (var i = 0; i < trivia.length; i++) { testDiv.innerHTML = '<h3>' + trivia[3].question + '</h3>'+ '<div> <form> <p> <input type="radio" name ="answer" value="1">' + trivia[3].answers[0] + '</p>' + '<p><input type="radio" name ="answer" value="2">' + trivia[3].answers[1] + '</p>' + '<p><input type="radio" name ="answer" value="3">' + trivia[3].answers[2] + '</p>' + '<p><input type="radio" name ="answer" value="4">' + trivia[3].answers[3] + '</p>' + '<p></form> </div>'; 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("<h3>" + timer + "</h3>"); 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 = $('<p>',{id: 'score'}); var numCorrect = 0; for (var i = 0; i < 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 }); 

 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 } 

 <!DOCTYPE html> <html> <head> <title>Trivial Game!</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="assets/styles/styles.css"> <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet"> </head> <body> <h1>Trivia Game</h1> <h2>Test your Knowledge</h2> <div id="header"></div> <div id="show-number"></div> <button id="startButton">Start</button> <div id="questions"> <div id="score"></div> </div> <div id="footer"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="assets/scripts/app.js"></script> </body> </html> 

Answer 1

Is this what you wanted?

INFO: Your #score div was inside the #questions div. When the questions div gets display:none; all childs will also be hidden. So I placed the score outside the questions and created a .hidden class.

EDIT: I replaced the alert() with a console.log() just in case you are wondering ;-).

 $(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 timer = 10; var timerId; 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 < trivia.length; i++) { testDiv.innerHTML = '<h3>' + trivia[0].question + '</h3>'+ '<div> <form> <p> <input type="radio" name ="answer0" value="right">' + trivia[0].answers[0] +'</p>' + '<p><input type="radio" name ="answer1" value="2">' + trivia[0].answers[1] +'</p>' + '<p><input type="radio" name ="answer2" value="3">' +trivia[0].answers[2] +'</p>' + '<p><input type="radio" name ="answer3" value="4">' +trivia[0].answers[3] +'</p>' + '<p></form> </div>'; var questionsDiv = document.getElementById('questions'); questionsDiv.appendChild(testDiv); } }); //Q2 $("#startButton").on('click', function populate() { var testDiv = document.createElement("div"); for (var i = 0; i < trivia.length; i++) { testDiv.innerHTML = '<h3>' + trivia[1].question + '</h3>'+ '<div> <form> <p> <input type="radio" name ="answer" value="1">' + trivia[1].answers[0] +'</p>' + '<p><input type="radio" name ="answer" value="2">' + trivia[1].answers[1] +'</p>' + '<p><input type="radio" name ="answer" value="3">' +trivia[1].answers[2] +'</p>' + '<p><input type="radio" name ="answer" value="4">' +trivia[1].answers[3] +'</p>' + '<p></form> </div>'; var questionsDiv = document.getElementById('questions'); questionsDiv.appendChild(testDiv); } }); //Q3 $("#startButton").on('click', function populate() { var testDiv = document.createElement("div"); for (var i = 0; i < trivia.length; i++) { testDiv.innerHTML = '<h3>' + trivia[2].question + '</h3>'+ '<div> <form> <p> <input type="radio" name ="answer" value="1">' + trivia[2].answers[0] +'</p>' + '<p><input type="radio" name ="answer" value="2">' + trivia[2].answers[1] +'</p>' + '<p><input type="radio" name ="answer" value="3">' +trivia[2].answers[2] +'</p>' + '<p><input type="radio" name ="answer" value="4">' +trivia[2].answers[3] +'</p>' + '<p></form> </div>'; var questionsDiv = document.getElementById('questions'); questionsDiv.appendChild(testDiv); } }); //Q4 $("#startButton").on('click', function populate() { var testDiv = document.createElement("div"); for (var i = 0; i < trivia.length; i++) { testDiv.innerHTML = '<h3>' + trivia[3].question + '</h3>'+ '<div> <form> <p> <input type="radio" name ="answer" value="1">' + trivia[3].answers[0] +'</p>' + '<p><input type="radio" name ="answer" value="2">' + trivia[3].answers[1] +'</p>' + '<p><input type="radio" name ="answer" value="3">' +trivia[3].answers[2] +'</p>' + '<p><input type="radio" name ="answer" value="4">' +trivia[3].answers[3] +'</p>' + '<p></form> </div>'; 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("<h3>" + timer + "</h3>"); if (timer === 0) { stop(); console.log("times up"); $('#questions').fadeOut(); $('#score').removeClass('hidden'); } } 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 = $('<p>',{id: 'score'}); var numCorrect = 0; for (var i = 0; i < 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 }); 

 body{ text-align: center; font-family: 'Poiret One', sans-serif; background-color:#8f16cc; color: white; } .hidden{ display:none; } 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 } 

 <!DOCTYPE html> <html> <head> <title>Trivial Game!</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="assets/styles/styles.css"> <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet"> </head> <body> <h1>Trivia Game</h1> <h2>Test your Knowledge</h2> <div id="header"></div> <div id="show-number"></div> <button id="startButton">Start</button> <div id="questions"></div> <div id="score" class="hidden"></div> <div id="footer"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="assets/scripts/app.js"></script> </body> </html> 

Answer 2

Move your score div outside of the question div:

<div id="score"></div>
<div id="questions"></div>