个人中心
gpt4 book ai didi

javascript - 对基本测验的 if else 循环逻辑有困难

转载 作者：行者123 更新时间：2023-11-30 19:51:49 25 4
gpt4 key购买 nike

我正在尝试构建一个基本测验，但在最后一部分遇到困难:在回答最后一个问题后，我想发出警报(“测验结束”)并将变量重置为 0。

我已经输入:如果问题编号大于问题数组的长度，输出“测验结束”..但它只在测验结束后第二次点击后输出..现在如果我把它写成=对于问题的长度，它会过早地输出此警报问题。

有人可以解释一下我的做法是否正确吗？有没有一种方法可以按照我编写的方式解决这个问题，而无需重写所有逻辑？我确信有更有效的方法可以做到这一点我真的很想知道如何改进我的方法。

(如果您全屏打开代码片段，该按钮不会被错误隐藏)

//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>

最佳答案

首先，修复 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 .

关于javascript - 对基本测验的 if else 循环逻辑有困难，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54391940/

25 4 0
文章推荐： c - 使用C语言函数求一个数的半值
文章推荐： c# - 用于 Excel 克隆的正确数据结构
文章推荐： c - 这段代码的解释？
文章推荐： javascript 在遇到意外的 anchorOffset 时执行多个 createrange()
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com