尝试使用JavaScript进行编码测验

Question

我要做的是：

• 显示第一个问题并单击其中一个选择后，显示了正确的答案，然后显示了下一个问题，并以下一组选择该问题

问题：

• 一旦我单击了第一个集合在选择中，显示了正确的答案，并出现了下一个问题，但它仍然具有上一个问题中相同的选择，并且单击它们也只能显示上一个问题中的答案。

我对此非常陌生，所以我敢肯定我的代码不是很好，但是请提前！

// Array of the questions, choices, and answers for the quiz.
var quizQuestions = [
    {
        question: "What method would you use to create a DOM object Element?", 
        choices: [".getAttribute()", ".createElement()", ".getElementById", ".setAttribute()"], 
        answer: ".createElement()"
    },
    {
        question: "What are variables used for?", 
        choices: ["Iterating over arrays", "Linking a JavaScript file to your html", "Storing data", "Performing specific tasks"], 
        answer: "Storing data"
    },
    {
        question: "When declaring a function, what comes after the keyword 'function'?", 
        choices: ["()", ";", "/", "++"], 
        answer: "()"
    }, 
    {
        question: "What would you use if you wanted to execute a block of code a set number of times?", 
        choices: ["While loop", "Math.random()", "For loop", "Switch statement"], 
        answer: "For loop"
    }, 
    {
        question: "Using the word 'break' will stop the code execution inside the switch block.", 
        choices: ["True", "False"], 
        Answer: "True"
    }
];

// Buttons
var highScoresButtonEl = document.querySelector(".high-scores");
var startQuizEl = document.querySelector(".quiz-button");
var choicesButtonEl = document.querySelector(".choices");

var introTextEl = document.querySelector(".intro-text");
var questionsEl = document.querySelector(".questions");
var choicesEl = document.querySelector(".choices");
var answerEl = document.querySelector(".answer")
var timerEl = document.querySelector(".timer");

var choicesListEl = document.createElement("ul");
    choicesListEl.setAttribute("class", "choices");
    choicesEl.appendChild(choicesListEl);


// Button that starts the timer, displays the first question and the first set of choices.
startQuizEl.addEventListener("click", function() {
    document.querySelector(".intro-text").style.visibility = "hidden";
    startQuizEl.style.visibility = "hidden";
    startTimer();
    displayQuestions();
    displayChoices();
    
})

// When the any of the choices are clicked, the correct answer is displayed below them.
choicesButtonEl.addEventListener("click", function () {
    displayAnswer();
})


// Incriments each question in the array of objects.
var q = 0;
function displayQuestions () {
    questionsEl.textContent = quizQuestions[q].question;
    q++
}

currentQuestion = 0;


// Turns the choices from the array into an unordered list
function displayChoices () {

    for (i = 0; i < quizQuestions[0].choices.length; i++){
        var li = document.createElement("li");
        li.textContent = quizQuestions[0].choices[i];
        li.id = i
        choicesListEl.appendChild(li);
    }
}

// Takes answer from the array of objects and places it as a paragraph below the unordered list of choices.
 function displayAnswer () {
    var p = document.createElement("p");
    p.textContent = quizQuestions[0].answer;
    p.id = i
    answerEl.appendChild(p);

        <header>
            <ul>
                <li><button class="high-scores" id="high-scores">High Scores</button></li>
                <li class="timer"></li>
            </ul>
        </header>
        <main>
            <div class="intro-text">
                <h1>Timed Coding Quiz</h1>
                <p>Come test your coding knowledge with this timed coding quiz! Everytime you answer a questoin incorrectly,
                    8 seconds is deducted from your total time! Good luck!</p>
        </main>
        </div>
        <section class="quiz-content">
            <button class="quiz-button" id="quiz-button" type="submit">Start Quiz</button>
            <div class="questions" id="questions"></div>
            <div class="choices" id="choices"></div>
            <div class="answer" id="answer"></div>
        </section>

Answer 1

您需要插入计数器，以便每次完成一个问题时，计数器都会由1添加。然后，从数组中获取确切的对象。我在下面显示了一个代码示例。希望这有帮助！

int counter = 0;
/*After question answered*/
counter++;
/*This will allow to access the correct set of questions*/
quizQuestions[counter];