Question

我正在尝试构建基本测验，并且在最后一部分上遇到困难：在回答了最后一个问题之后，我想发出警报（“测验结束”）并将变量重置为0。 / p>

我已经提出：如果问题编号大于问题长度的数组，则输出“测验结束” ..但它仅在测验结束后的第二次单击后才输出。到问题的长度，它就太早输出此警报一个问题。

有人可以解释一下我是否在朝着正确的方向前进吗？有没有一种方法可以解决我编写而不重写所有逻辑的问题？我敢肯定，有很多方法可以做到这一点，我真的很想知道如何改进我的方法。

（如果全屏打开代码段，则该按钮不会被错误隐藏）

//JSON style data
var allQuestions = [
    { 
        question: "Who is Prime Minister of the United Kingdom?", 
        choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], 
        correctAnswer: 0 
    },
    {
        question: "What is your favourite colour?",
        choices: ["Green", "Brown", "Blue", "Red"],
        correctAnswer: 0
    },
    {
        question: "Who is your name?",
        choices: ["Bob", "Paul", "Andrey", "Alex"],
        correctAnswer: 0
    },
];


//VARIABLES
var question = document.querySelector('.questionX');
var questionNumber = 0;
var answer = document.querySelector('.userAnswer');
var score = 0;


//FUNCTION EXPRESSION TO UPDATE THE DOM WITH TEXT
let updateText = function(){

    if (typeof allQuestions[questionNumber].question !== 'undefined') {
        // the question is defined & exists
        question.innerHTML = allQuestions[questionNumber].question


        for (i = 0; i < allQuestions[questionNumber].choices.length; i++) {

            //ADD AN OPTION ELEMENT WITH innerHTML of allQuestions[questionNumber].choices[i] and a value equal to the count of the loop.
            var newOption = document.createElement("option")

            newOption.appendChild(document.createTextNode(allQuestions[questionNumber].choices[i]))

            answer.appendChild(newOption)

            //set the value of each option element to the iteration count of the loop.
            newOption.value = i
        }
    } else return
}

//load first question on window load
window.onload = updateText();



//CLEAR THE QUESTIONS OPTIONS
let clearOptions = function (){
    while (answer.children[1]) {
        answer.removeChild(answer.children[1]);
    }
}




//onClick function for next qestion button
function nextQuestion(){

    //if questionNumber > allQuestions.length alert you scored score out of allQuestions.length and set score to 0 and question to 0 and remove & rerender possible answers.
    if (questionNumber >= allQuestions.length) {
        alert(`end of quiz, you scored ${score} out of ${allQuestions.length}`);
        score == 0;
        questionNumber == 0;
        clearOptions();
        updateText();
    }
    
    
    //else if value of answer = value of correct answer add 1 to score and add 1 to question number & remove old options & update the dropdown with new options. 
    else if (document.querySelector('.userAnswer').value == allQuestions[questionNumber].correctAnswer) {
        
        questionNumber += 1;
        alert("Yay");
        clearOptions();
        score += 1;
        updateText();

    } 
    //else alert ("ney") and stay on same question
    else{
        alert("Ney, try again")
    }

    
   
}

document.querySelector("#nextQuestion").addEventListener('click', function (){
    nextQuestion();
})

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />


</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="d-flex mx-auto mt-5 mb-5">
                Quiz
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-sm-6 mx-auto">
<form>
    <div class="form-group">
        <p class="questionX">What is your favourite instrument?</p>
    </div>

    <select class="userAnswer custom-select mb-3">
        <option disabled selected>Pick one</option>
        <!-- <option value="0">Guitar</option>
        <option value="1">Violin</option>
        <option value="2">Oboe</option> -->
    </select>

    
</form>

                <button type="button" id="nextQuestion" class="btn btn-primary d-flex mx-auto mt-2">Next</button>

                

            </div>
        </div>
    </div>


    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
    <script src="main.js"></script>
</body>

</html>

Answer 1

首先，在最后修复question undefined err，以进行以下更改：

if (typeof allQuestions[questionNumber].question !== 'undefined')

对此：

 if (allQuestions[questionNumber] )

然后更改此if：

if (questionNumber >= allQuestions.length) {
    alert(`end of quiz, you scored ${score} out of ${allQuestions.length}`);
    score == 0;
    questionNumber == 0;
    clearOptions();
    updateText();
}

对此：

if (questionNumber == allQuestions.length -1 ) {
    alert(`end of quiz, you scored ${score+1} out of ${allQuestions.length}`);
    score == 0;
    questionNumber == 0;
    clearOptions();
    // updateText(); <-- you do not need this
}

它将按预期工作。工作fiddle。

难以进行基本测验的if else循环逻辑

1 个答案: