Trivia game using jquery

Question

I'm creating a trivia game using jquery and javascript. I'm having trouble with the code. I already able to display the first question but now I don't know how to approach the rest of the question. I want the next question and answers to display without needing the user input and continue to display until there is no more question left. Each question have a timer of 30 seconds. Any suggestion will help a lot. Thanks.

var userPick;

var correctAnswer = 0;

var incorrectAnswer = 0;

var unAnswer = 0;

var question = 0;

var images;

var count=30;

var disneyQuestion = [{
question: "In Aladdin, what is the name of Jasmine's pet tiger?",
choices: ["Rajah", "Bo", "Iago", "Jack" ],
images:  ["../images/Rajah.gif"],
validAnswer: 0
}, {
question:"In Peter Pan, Captain Hook had a hook on which part of his     body?",
choices: ["Right Foot", "Left Hand", "Left Foot", "Right Hand"],
validAnswer: 1

}, {
question:"In the Lion King, where does Mufasa and his family live?",
choices: ["Rocky Mountain", "Forest", "Desert", "Pride Rock"],
validAnswer: 3

}, {
question:"In Beauty and the Beast, how many eggs does Gaston eat for    breakfast?",
choices: ["2 Dozen", "5 Dozen", "5000", "0"],
validAnswer: 1

}, {
question:"In Alice in Wonderland, what is the name of Alice’s kitten?",
choices: ["Dinah", "Sammie", "Kat", "Luna"],
validAnswer: 0

 }, {
question:"After being on earth, where did Hercules first meet his   father Zeus?",
choices: ["Mount Olympus", "Greece", "In the Temple of Zeus", "Elysian   Fields"],
validAnswer: 2

}, {
question:"During the ballroom scene of Beauty & the Beast, what color is Belle’s Gown?",
choices: ["Yellow", "Blue", "Gold", "White"],
validAnswer: 2

}, {
question:"In Bambi, what word does the owl use to describe falling in love?",
choices: ["Whimsical", "Miserable", "Joyful", "Twitterpatted"],
validAnswer: 3

}

];

$("#start_button").click(function(){
$(this).hide();
counter = setInterval(timer, 1000); 
displayTrivia();
}); 


function timer(){
count--;
if (count <= 0) {
 clearInterval(counter);
 return;
}

 $("#timer").html("Time remaining: " + "00:" + count + " secs");
}


function displayTrivia() {
$("#question_div").html(disneyQuestion[0].question);
question++;

  var choicesArr = disneyQuestion[0].choices;
  var buttonsArr = [];

  for (let i = 0; i < choicesArr.length; i++) {
    var button = $('<button>');
    button.text(choicesArr[i]);
    button.attr('data-id', i);
    $('#choices_div').append(button);
   }

  } 

 $('#choices_div').on('click', 'button', function(e){
 userPick = $(this).data("id");
 disneyQuestion[0].validAnswer;
 if(userPick != disneyQuestion[0].validAnswer) {

 $('#choices_div').text("Wrong Answer! The correct answer is Rajah.");
 incorrectAnswer++;

} else if (userPick === disneyQuestion[0].validAnswer) {
$('#choices_div').text("Correct!!! The pet tiger name is Rajah");
correctAnswer++;

}

});

Answer 1

I liked the idea so here it is. It could be optimized and streamlined a bit more, and has no styling.

Took your logic and packed it up as a jQuery plugin, mainly because this way it's contained inside a single variable, which could be easily replaced with a new instance of it, when the user restarts.

 $.fn.trivia = function() { var _t = this; _t.userPick = null; _t.answers = { correct: 0, incorrect: 0 }; _t.images = null; _t.count = 30; _t.current = 0; _t.questions = [{ question: "In Aladdin, what is the name of Jasmine's pet tiger?", choices: ["Rajah", "Bo", "Iago", "Jack"], images: ["../images/Rajah.gif"], correct: 0 }, { question: "In Peter Pan, Captain Hook had a hook on which part of his body?", choices: ["Right Foot", "Left Hand", "Left Foot", "Right Hand"], correct: 1 }, { question: "In the Lion King, where does Mufasa and his family live?", choices: ["Rocky Mountain", "Forest", "Desert", "Pride Rock"], correct: 3 }, { question: "In Beauty and the Beast, how many eggs does Gaston eat for breakfast?", choices: ["2 Dozen", "5 Dozen", "5000", "0"], correct: 1 }, { question: "In Alice in Wonderland, what is the name of Alice's kitten?", choices: ["Dinah", "Sammie", "Kat", "Luna"], correct: 0 }, { question: "After being on earth, where did Hercules first meet his father Zeus?", choices: ["Mount Olympus", "Greece", "In the Temple of Zeus", "Elysian Fields"], correct: 2 }, { question: "During the ballroom scene of Beauty & the Beast, what color is Belle's Gown?", choices: ["Yellow", "Blue", "Gold", "White"], correct: 2 }, { question: "In Bambi, what word does the owl use to describe falling in love?", choices: ["Whimsical", "Miserable", "Joyful", "Twitterpatted"], correct: 3 }]; _t.ask = function() { if (_t.questions[_t.current]) { $("#timer").html("Time remaining: " + "00:" + _t.count + " secs"); $("#question_div").html(_t.questions[_t.current].question); var choicesArr = _t.questions[_t.current].choices; var buttonsArr = []; for (var i = 0; i < choicesArr.length; i++) { var button = $('<button>'); button.text(choicesArr[i]); button.attr('data-id', i); $('#choices_div').append(button); } window.triviaCounter = setInterval(_t.timer, 1000); } else { $('body').append($('<div />', { text: 'Unanswered: ' + ( _t.questions.length - (_t.answers.correct + _t.answers.incorrect)), class: 'result' })); $('#start_button').text('Restart').appendTo('body').show(); } }; _t.timer = function() { _t.count--; if (_t.count <= 0) { setTimeout(function() { _t.nextQ(); }); } else { $("#timer").html("Time remaining: " + "00:" + _t.count + " secs"); } }; _t.nextQ = function() { _t.current++; clearInterval(window.triviaCounter); _t.count = 30; $('#timer').html(""); setTimeout(function() { _t.cleanUp(); _t.ask(); }, 1000) }; _t.cleanUp = function() { $('div[id]').each(function(item) { $(this).html(''); }); $('.correct').html('Correct answers: ' + _t.answers.correct); $('.incorrect').html('Incorrect answers: ' + _t.answers.incorrect); }; _t.answer = function(correct) { var string = correct ? 'correct' : 'incorrect'; _t.answers[string]++; $('.' + string).html(string + ' answers: ' + _t.answers[string]); }; return _t; }; var Trivia; $("#start_button").click(function() { $(this).hide(); $('.result').remove(); $('div').html(''); Trivia = new $(window).trivia(); Trivia.ask(); }); $('#choices_div').on('click', 'button', function(e) { var userPick = $(this).data("id"), _t = Trivia || $(window).trivia(), index = _t.questions[_t.current].correct, correct = _t.questions[_t.current].choices[index]; if (userPick !== index) { $('#choices_div').text("Wrong Answer! The correct answer was: " + correct); _t.answer(false); } else { $('#choices_div').text("Correct!!! The correct answer was: " + correct); _t.answer(true); } _t.nextQ(); }); 

 div { margin-bottom: 20px; } .correct, .incorrect { text-transform: capitalize; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="start_button">start game</button> <div id="timer"></div> <div id="question_div"></div> <div id="choices_div"></div> <div class="correct"></div> <div class="incorrect"></div> 

Feel free to extend and style it up, add features, questions.

Happy coding!