Question

我是javaScript和jQuery的初学者。我想创建一个只有两个选项的测验游戏。

我有一个对象数组，如下所示：

  var question = [];

    question[0] = {

        value: "someText here",
        ans: true
    };

我会将所有问题都写成这个对象的数组。这是一款纯粹有趣的游戏，因此如果用户打开源并阅读问题则没有问题。我想用jQuery来显示这个问题。为了表明，我写道：

$("#someID").text(question[i].value); // where i is some random variable

然后我可以调用.click方法并检查用户点击的按钮然后相应地处理情况（改变分数，减少生命等）。现在，我想依赖于时间迭代这个对象数组，这意味着，每个问题在屏幕上保留15秒左右，如果用户按下任意两个按钮，则立即出现下一个问题，其他参数为改变了。但是，如果用户没有按任何按钮15秒，则应出现下一个问题。我怎么能这样做？

在发布这个问题之前，我已经做了一些努力：

Adding a Quiz Timer, Fade Out/Skip to the next if timer reaches 0

此链接上的第一个答案告诉我一些与我想要实现的内容相近但它将数据放在<p>标签中的内容，这是我不想要的。我严格地希望将它保留为对象数组。有没有办法实现这个目标？非常感谢你。

EDIT ------

score=0; // variable to store the score of the user.
counter=0;



$(function () {
    fetchNextQuestion(); 

});

function fetchNextQuestion() {

    counter++;
    if (counter >= 5) {
        endTheGame();
    }
    else {

        number = Math.floor(Math.random() * 10);
        $("#timer").text(question[number].value);
        _qtimer = setInterval(fetchNextQuestion(), 15000);
        userHasDoneSomething();
    }
}

function userHasDoneSomething() {

    $("#true").click(function () {
        clearInterval(_qtimer);
        if (question[number].ans === true) {
            score++;
        }
        else {
            score--;
        }

        fetchNextQuestion();
    });

    $("#false").click(function () {
        clearInterval(_qtimer);
        if (question[number].ans === false) {
            score++;
        }
        else {
            score--;
        }
        fetchNextQuestion();
    });


    return;



}



function endTheGame() {
    alert("The game has ended! Your score is "+ score);
}

不幸的是，这段代码并不适合我。它只是给了我一个警告框，问题在屏幕上没有变化。我错的任何理由？注意：Web控制台中没有错误。

编辑＃2 --- 这是我的HTML ..

<!DOCTYPE html>
<html>
<head>
    <title>Serious or Joking</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <div id="timer">
        <p>00</p>
    </div>


    <input type="button" value="true" class="answer" id="truebutton" />
    <input type="button" value="false" class="answer" id="falsebutton"/>


</body>
</html>

我在Visual Studio中工作。

Answer 1

根据我的理解，你只需要一段时间..

编辑：以下是使用您的代码进行的更新：

var score=0, // variable to store the score of the user.
    counter=0;
    $(function () {
        fetchNextQuestion(); 
    });

    function fetchNextQuestion() {
        counter++;
        if (counter >= 5) {
            endTheGame();
        }
        else {
            number = Math.floor(Math.random() * 10);
            $("#timer").text(question[number].value);
            _qtimer = setInterval(fetchNextQuestion, 15000);
            $(".answer").off().on('click', userHasDoneSomething);
        }
    }

    function userHasDoneSomething() {
        clearInterval(_qtimer);
        if (Boolean(question[number].ans) == Boolean(this.value))    score++;
        else                                    score--;

        fetchNextQuestion();
    }
    function endTheGame() {
        alert("The game has ended! Your score is "+ score);
    }

注意：将#true和#false元素设为同一个类（.answer）

在jQuery / javaScript中迭代对象数组（依赖于时间的迭代）

1 个答案: