Trying to make a quiz with Javascript

Question

I'm new to Javascript and I was trying to create a quiz with jQuery but can not solve one big problem.

When I click in the "next" button all the answers are deleted... and I can not understand why.

PS: Can someone give me feedback about my code?

 var questionsOrder = []; var currentQuestion = 0; var allQuestions = [{ question: "1Who is Prime Minister of the United Kingdom?", choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], correctAnswer: 0 }, { question: "1United Kingdom?", choices: ["David Camerfafaon", "Gordonfffa Brown", "Winstfafaon Churchill", "Tony fafaBlair"], correctAnswer: 0 }, { question: "2Who is Prime Ministerfsafasfa of the United Kingdom?", choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], correctAnswer: 1 }, { question: "3Who ifafa Minister of the Unitedsafafgdom?", choices: ["David Caafameron", "Goasfarown", "Wiasfsfa Churchill", "TofasfaBlair"], correctAnswer: 2 }, { question: "4Who is Prime Minister oafsafaf the United Kingdom?", choices: ["David asfsafCameron", "Gordon asfasf", "Winston Churchill", "Tony Blfsafasfair"], correctAnswer: 3 }]; var deleteOlQuestion = function () { $(".question").children().slideUp(function () { $(this).remove(); }); $(".answers").children().slideUp(function () { $(".answers").html(" "); }); console.log("apagadas"); }; var shuffle = function (array) { var currentIndex = array.length, temporaryValue, randomIndex; // While there remain elements to shuffle... while (0 !== currentIndex) { // Pick a remaining element... randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; // And swap it with the current element. temporaryValue = array[currentIndex]; array[currentIndex] = array[randomIndex]; array[randomIndex] = temporaryValue; } return array; }; var changeQuestion = function (question) { $(".question").slideDown(function () { $(".question").html("<h1>" + allQuestions[questionsOrder[currentQuestion]].question); }); $(".answers").slideDown(function () { for (var i = 0; i < allQuestions[questionsOrder[currentQuestion]].choices.length; i++) { var question = allQuestions[questionsOrder[currentQuestion]].choices[i]; if (i == allQuestions[questionsOrder[currentQuestion]].correctAnswer) { $(".answers").append('<input type="radio" name="question" class="question" value=' + i + '>' + question + "<br>"); } else { $(".answers").append('<input type="radio" name="question" class="question" value="not">' + question + "<br>"); } } }); }; $("#start").on("click", function () { for (var index = 0; index < allQuestions.length; index++) { questionsOrder.push(index); } shuffle(questionsOrder); changeQuestion(currentQuestion); $("#start").css("display", "none"); $("#next").css("display", "inline"); }); $("#next").on("click", function () { if ($('.question').is(':checked')) { if (+$("input:checked").val() === allQuestions[questionsOrder[currentQuestion]].correctAnswer) { // blink blink verde currentQuestion++; deleteOlQuestion(); changeQuestion(currentQuestion); } else { alert("Wrong"); } } });

 .quizBody { text-align: center; } #next { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="quizBody"> <div> <div class="question col-md-12"></div> <div class="answers col-md-12"></div> <div class="next col-md-12"> <button type="button" id="start">Start</button> <button type="button" id="next">Next</button> </div> </div> </div>

Answer 1

It looks like a timing issue ... I commented out this line ...

// $(".answers").html(" ");

... in deleteOlQuestion . Then, put it before the for-loop in changeQuestion and it works, sort of.

This should give you enough direction to move forward.

Working code snippet:

 var questionsOrder = []; var currentQuestion = 0; var allQuestions = [{ question: "1Who is Prime Minister of the United Kingdom?", choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], correctAnswer: 0 }, { question: "1United Kingdom?", choices: ["David Camerfafaon", "Gordonfffa Brown", "Winstfafaon Churchill", "Tony fafaBlair"], correctAnswer: 0 }, { question: "2Who is Prime Ministerfsafasfa of the United Kingdom?", choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], correctAnswer: 1 }, { question: "3Who ifafa Minister of the Unitedsafafgdom?", choices: ["David Caafameron", "Goasfarown", "Wiasfsfa Churchill", "TofasfaBlair"], correctAnswer: 2 }, { question: "4Who is Prime Minister oafsafaf the United Kingdom?", choices: ["David asfsafCameron", "Gordon asfasf", "Winston Churchill", "Tony Blfsafasfair"], correctAnswer: 3 }]; var deleteOlQuestion = function() { $(".question").children().slideUp(function() { $(this).remove(); }); $(".answers").children().slideUp(function() {}); console.log("apagadas"); }; var shuffle = function(array) { var currentIndex = array.length, temporaryValue, randomIndex; // While there remain elements to shuffle... while (0 !== currentIndex) { // Pick a remaining element... randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; // And swap it with the current element. temporaryValue = array[currentIndex]; array[currentIndex] = array[randomIndex]; array[randomIndex] = temporaryValue; } return array; }; var changeQuestion = function(question) { $(".question").slideDown(function() { $(".question").html("<h1>" + allQuestions[questionsOrder[currentQuestion]].question); }); $(".answers").slideDown(function() { $(".answers").html(" "); for (var i = 0; i < allQuestions[questionsOrder[currentQuestion]].choices.length; i++) { var question = allQuestions[questionsOrder[currentQuestion]].choices[i]; if (i == allQuestions[questionsOrder[currentQuestion]].correctAnswer) { $(".answers").append('<input type="radio" name="question" class="question" value=' + i + '>' + question + "<br>"); } else { $(".answers").append('<input type="radio" name="question" class="question" value="not">' + question + "<br>"); } } }); }; $("#start").on("click", function() { for (var index = 0; index < allQuestions.length; index++) { questionsOrder.push(index); } shuffle(questionsOrder); changeQuestion(currentQuestion); $("#start").css("display", "none"); $("#next").css("display", "inline"); }); $("#next").on("click", function() { if ($('.question').is(':checked')) { if (+$("input:checked").val() === allQuestions[questionsOrder[currentQuestion]].correctAnswer) { // blink blink verde currentQuestion++; deleteOlQuestion(); changeQuestion(currentQuestion); } else { alert("Wrong"); } } });

 .quizBody { text-align: center; } #next { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="quizBody"> <div> <div class="question col-md-12"></div> <div class="answers col-md-12"></div> <div class="next col-md-12"> <button type="button" id="start">Start</button> <button type="button" id="next">Next</button> </div> </div> </div>