Question

（我对编码非常陌生，对不起）。我正在使用jQuery和Javascript为我的编码训练营创建Trivia测验。到目前为止，我已经隐藏和显示了一些东西。现在，当我尝试启动Trivia测验时，我面临的障碍是。

（我还将附上我的HTML以供参考）。

我在以下方面遇到问题： 1.让我的问题正确显示（我发现只有写$（“＃question”）。html（triviaArray [0] .question）才能显示它； 2.获得我在triviaArray中创建的答案以显示在各个按钮中。 3.我需要创建一个for循环，但是我不太确定是否正确编写了它。我只需要for循环即可遍历我创建的每个问题（及其各自的答案）。

如果我写$（“＃question”）。html（triviaArray.question）; 问题不会显示在屏幕上。

当我尝试做 document.getElementById（“ answer”）。innerHTML + =“” + triviaArray.answers +“”; 它显示为未定义。我忘记了原来的东西，但被列为“对象”

这是我当前的JS脚本：

// ================================= GLOBAL VARIABLES ==========================================

var triviaArray = [
    {
        question: "How many times is 'f*ck' used in Pulp Fiction?",
        answers: ["a. 252 times", "b. 265 times", "c. 287 times", "d. 301 times"],
        correctAnswer: "b"
    },
    {
        question: "How many days did Bruce Willis work on the film?",
        answers: ["a. 28 days", "b. 42 days", "c. 14 days", "d. 18 days"],
        correctAnswer: "d"
    },
    {
        question: "This movie cost $8 million to make. How much of that money went to pay the actors' salaries?",
        answers: ["a. $6 million", "b. $4 million", "c. $5 million", "d. $8 million"],
        correctAnswer: "c"
    },
    {
        question: "When John Travolta was reviving Uma Thurman's character, which two board games are seen in the background?",
        answers: ["a. Game of Life, Operation", "b. Monopoly, Game of Life", "c. Candyland, Operation", "d. Scrabble, Operation"],
        correctAnswer: "a"
    },
];

var count = 0;

// user's guess is either right or wrong
var rightGuesses = 0;
var wrongGuesses = 0;
var unanswered = 0;

// define variable for the timer
var timer = 0;

// timer functionality 
var intervalID;

// // INVESTIGATE: should I have an index of questions and answers? If so,
// var indexQandA = 0; 

// then the game should start w/ 0.
// var score = 0; 

// create a results page at the end instead ("<h3>this is how many you've guessed correctly " + correct + "! </h3>")
// jQuery manipulates HTML!

// ========================================= PROCESS ==========================================

// GOOD HOUSEKEEPING: Make sure that HTML div tags are created and represented.
// Try to figure out where I can console.log stuff.

$(document).ready(function () {

    // List out everything that needs to be hidden before starting the quiz.
    $("#question").hide();
    $(".choices").hide();
    $("#answer").hide();
    $("#timer").hide();

    //  When I click the button. it should start the trivia quiz.
    $("#btn4").on("click", startQuiz);

    // create a function startQuiz() to start the game. 
    function startQuiz() {

        // the following represents the Results page... meaning I have to create a results page. 
        $("#startQuiz").empty();
        $("#right").empty();
        $("#wrong").empty();
        $("unanswered").empty();

        rightGuesses = 0;
        wrongGuesses = 0;
        unanswered = 0;

        // whatever I hid, now I have to show it: 
        $("#question").show();
        $(".choices").show();
        $("#answer").show();
        $("#timer").show();

        // The timer should start running.
        // If the timer starts running, the button should disappear and the question should display.
        // timer();
    };

    // function timer() {
    //     timer = setInterval(countdown, 10000 * 3)
    // };

    // create a function nextQuestion() and have a for loop to generate the next question.
    function nextQuestion() {

        $("#question").html(triviaArray[0].question);
        for (var i = 0; i < triviaArray.length; i++) {
            document.getElementById("answer").innerHTML += "<button>" + triviaArray.answers + "</button>";
        };

    };

nextQuestion();
});

这是我当前的HTML（以供参考，以防万一我的错误与命名约定有关）：（并且不用担心，我有指向CSS，jQuery，Javascript的正确链接）


    <div class="container"> 
        <div id="quiz">
            <h1>Pulp Fiction Trivia Quiz</h1>
            <hr style="margin-top: 20px"> 

            <div id="startQuiz">
                <button id="btn4">START QUIZ</button>
            </div>

            <!-- Question / Answer section -->
            <div id="timer">
                <h3>Time Remaining:</h3>
            </div>
            <div id="question"></div>
            <div id="answer"></div>

            <!-- Display correct answer -->
            <div id="message"></div>
            <div id="correctedAnswer"></div>

            <!-- Track Stats -->
            <div id="right"></div>
            <div id="wrong"></div>
            <div id="unanswered"></div>

            <div class="choices">
                <!-- <button id="btn0"><span id="choice0"></span></button>
                <button id="btn1"><span id="choice1"></span></button>
                <button id="btn2"><span id="choice2"></span></button>
                <button id="btn3"><span id="choice3"></span></button> -->
            </div>

            <hr style="margin-top: 50px">
            <footer>
                <p id="progress">Question x of y.</p>
            </footer>
        </div>

Answer 1

您正在循环包含所有数据的数组，但是您应该在问题答案数组上进行循环。因此，对于第一个问题，您的代码应该像这样

    function nextQuestion() {

        $("#question").html(triviaArray[0].question);
        for (var i = 0; i < triviaArray[0].answers.length; i++) {
            document.getElementById("answer").innerHTML += "<button>" + triviaArray[0].answers[i] + "</button>";
        };

    };

这仅适用于第一个问题。查看您的评论，您就走对了。也许您应该像forEach一样寻找一种更好的循环方式。

创建琐事测验-我对自己的for循环功能有疑问

1 个答案: