Блог

(Я очень новичок в программировании, извините). Я создаю викторину по мелочам для моего учебного лагеря по программированию, используя jQuery и Javascript. До сих пор я получал материал для скрытия и отображения. Теперь препятствие, с которым я сталкиваюсь, — это когда я пытаюсь запустить викторину по мелочам.

(Я также приложу свой HTML для справки).

У меня возникли проблемы со следующим: 1. получение правильного отображения моего вопроса (я обнаружил, что могу отобразить его только в том случае, если я напишу $(«#question»).html(triviarray[0].question); 2. получение ответов, которые я создал в своем triviarray, для отображения на отдельных кнопках. 3. Мне нужно создать цикл for, но я не слишком уверен, правильно ли я его пишу или нет. Мне просто нужен цикл for для перебора каждого из созданных мной вопросов (с соответствующими ответами).

Если я напишу $(«#question»).html(triviarray.question); вопрос не будет напечатан на экране.

Когда я попытался выполнить document.getElementById(«answer»).innerHTML = «» triviarray.answers «»; он отображается как неопределенный. Я забыл, что у меня было изначально, но оно указано как «объект object»

Вот мой текущий 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 (для справки, на случай, если моя ошибка связана с соглашениями об именовании): (amp; не волнуйтесь, у меня есть соответствующие ссылки на 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>
  

Вы зацикливаетесь на массиве, который содержит все ваши данные, но вы должны делать это с массивом ответов на вопрос. Итак, ваш код должен выглядеть так для первого вопроса

     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 .