Question

我正在使用jquery和javascript创建一个琐事游戏。我遇到了代码问题。我已经能够显示第一个问题，但现在我不知道如何处理剩下的问题。我想要显示下一个问题和答案而不需要用户输入并继续显示，直到不再有问题为止。每个问题的计时器为30秒。任何建议都会有所帮助。感谢。

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

我喜欢这个想法，所以在这里。它可以进行优化和简化，并且没有造型。

取出你的逻辑并将其打包为jQuery插件，主要是因为这种方式包含在单个变量中，当用户重新启动时，可以很容易地将其替换为新的实例

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

随意扩展和设计，添加功能，问题。

快乐的编码！

使用jquery

1 个答案: