javascript - JQuery 测验应用程序未重置以显示下一个答案

Question

我在 JavaScript/JQuery 中有一个数学应用程序，会有一个计时器让用户有 3 秒的时间来回答随机给他们的数学问题，如果他们在 3 秒内没有回答，用户将失去。当用户选择正确答案时，我无法显示下一个随机问题。

我把所有的问题放在一个对象数组中。然后我创建了一个以随机数学函数作为参数的函数。random 函数在对象数组中的索引之间随机选择。

我想通过在我的 selectAnswer() 中再次调用这个随机函数，它会重置当前问题的信息并随机显示下一个问题。但它只是再次附加当前问题..

我是初学者，所以我的代码可能不是最好的！我愿意接受任何见解！您还会注意到，单击重新开始按钮时重新加载页面的事件未正确触发。我正在努力。

const questions = [
    {
        question: '80 * 20',
        answ: 80 * 20,
        answers: [
            { text: 1600 },
            { text: -1600 },
            { text: 16 },
            { text: 160 },

        ]
    },
    {
        question: '80 / 20',
        answ: 80 / 20,
        answers: [
            { text: '-4', correct: false },
            { text: '50', correct: false },
            { text: '4', correct: true },
            { text: '40', correct: false },

        ]
    },


    {
        question: '80 + 20',
        answ: 80 + 20,
        answers: [
            { text: '-100', correct: false },
            { text: '1000', correct: false },
            { text: '10', correct: false },
            { text: '100', correct: true },
        ]
    },

    {
        question: '80 - 20',
        answ: 80 - 20,
        answers: [
            { text: '66', correct: false },
            { text: '60', correct: true },
            { text: '600', correct: false },
            { text: '20', correct: false },
        ]
    },

    {
        question: '8 * -2',
        answ: 8 * -2,
        answers: [
            { text: '66', correct: false },
            { text: '666', correct: false },
            { text: '-16', correct: true },
            { text: '16', correct: false },
        ]
    },

    {
        question: '-2 + 8',
        answ: -2 + 8,
        answers: [
            { text: '-6', correct: false },
            { text: '66', correct: false },
            { text: '600', correct: false },
            { text: '6', correct: true },
        ]
    },

    {
        question: '14 - 66',
        answ: 14 - 66,
        answers: [
            { text: '52', correct: false },
            { text: '54', correct: false },
            { text: '-52', correct: true },
            { text: '-54', correct: false },
        ]
    },

    {
        question: '103 * 33',
        answ: 103 * 33,
        answers: [
            { text: '3502', correct: true },
            { text: '3509', correct: false },
            { text: '3503', correct: false },
            { text: '3507', correct: false },
        ]
    },

    {
        question: '165 / 33',
        answ: 165 / 33,
        answers: [
            { text: '33', correct: true },
            { text: '15', correct: false },
            { text: '5', correct: false },
            { text: '25', correct: false },
        ]
    },

    {
        question: '88 * 28',
        answ: 88 * 28,
        answers: [
            { text: '2624', correct: false },
            { text: '2462', correct: false },
            { text: '2464', correct: true },
            { text: '2426', correct: false },
        ]
    }

]







$(() => {
    // GRABBING HTML ELEMENTS
    const $startBtn = $("#start-btn")
    const $timeLeft = $("#time-left")
    const $quitBtn = $("#quit-btn")
    const $secondsLeft = $("#seconds-left")
    const $questionContainerElement = $("#question-container")
    const $questionElement = $("#question")
    const $answerButtonElement = $("#answer-buttons")
    $secondsLeft.hide()
    $quitBtn.hide()
    let $buttons;
    let mathAnsw;
    // CREATING VARIABLES FOR RANDOM FUNCTION ANCD URRENT QUESTION
    let shuffledQuestions, currentQuestionIndex
    let timeLeft = 3
   
    // START BUTTON FUNCTIONALITY
    // HIDES START MENU WHEN FIRED
    // INVOKES RANDOM FUNCTION 
    $startBtn.click(() => {
        $secondsLeft.fadeIn(900)
        $quitBtn.fadeIn(900)
        $startBtn.fadeOut(900)
        // countDown()
        console.log("started")
        $startBtn.hide()
        // SORTS THROUGH THE ARRAY OF QUESTIONS
        shuffledQuestions = questions.sort(() => Math.random() - .5)
        currentQuestionIndex = 0;
        $questionContainerElement.show()
        showQuestion(shuffledQuestions[currentQuestionIndex])
        mathAnsw = questions[currentQuestionIndex].answ
        console.log("the answer", mathAnsw)
    })
    // NEXT BUTTON FUNCTIONALITY
    // INVOKES SHOWQUESTION() EVERYTIME FIRED
    const setNext = () => {
        showQuestion(question)
        console.log(questions)
        // resetState()
    }
    $quitBtn.click(() => {
        location.reload(true)
    })
    // CURRENT QUESTION
    // APPEND CURRENT QUESTION TO THE QUESTION BOX
    const showQuestion = (question) => {
        $questionElement.append(`<h2 class="text-center">${questions[currentQuestionIndex].question}</h2>`)
        console.log(questions[currentQuestionIndex].question)
        // POPULATING ANSWERS
        const AnswersArray = question.answers
        let value
        for (x in AnswersArray) {
            $buttons = $(`<button id="answer${x}"class="btn" value='${questions[currentQuestionIndex].answers[x].text}'>${questions[currentQuestionIndex].answers[x].text}</button>`)
            $answerButtonElement.append($buttons)
        }
        selectAnswer()
    }
    // ANSWER
    const selectAnswer = () => {
        $('.btn').each(function () {
            $(this).on("click", function () {
                let $value = $(this).attr('value')
                let value = Number($value)
                console.log(value)
                console.log(mathAnsw)
                if (value === mathAnsw) {
                    console.log('correct!!')
                    showQuestion(shuffledQuestions[currentQuestionIndex])

                } else {
                    $("#question-container").replaceWith("<h1>You Lost</h1>")
                    $quitBtn.replaceWith("<button id='start-over'>Start Over</button>")
                    console.log("wrong")
                }
            })
        })
    }
    $("#start-over").click(() => {
        location.reload(true)
        console.log("clicked")
    })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fast Math</title>
    <link rel="stylesheet" href="index.css">
    <script src="../fast-math/lib/jquery-3.6.0.min.js"></script>
</head>

<body>


    <div class="container">
        <h3 id="seconds-left">Seconds Left: <span id="time-left"></span></h3>
        <div id="question-container" class="hide">
            <div id="question">Question</div>
            <div id="answer-buttons" class="btn-grid">
            </div>
        </div>
        <div class="controls">
            <button id="start-btn" class="start-btn btn">start</button>
            <button id="quit-btn" class="quit-btn btn">quit</button>
        </div>
    </div>
    <script src="index.js"></script>
    <script src="mathProblems.js"></script>
</body>



</html>

标签： javascriptjquery