javascript - 如何使用 Math.random() 做题？

Question

所以我正在制作一个网站，其中包含您需要回答的问题，并且我想以相同的顺序使用这些问题。那么我如何使用 Math.random() 函数来随机化我的问题，我不想随机化答案!请帮助处理此 javascript 代码:

  (function() {
    const myQuestions = [{
            question: "Esimerkki kysymys1",
            answers: {
                a: "Oikein",
                b: "Väärin"
            },
            correctAnswer: "a"
        },
        {
            question: "Esimerkki kysymys2",
            answers: {
                a: "Oikein",
                b: "Väärin"
            },
            correctAnswer: "b"
        },
        {
            question: "Esimerkki kysymys3",
            answers: {
                a: "Oikein",
                b: "Väärin"
            },
            correctAnswer: "a"
        }
    ];

    function Random() {
        var display = document.getElementById("myQuestions");
        var questionAmount = 2;
        for (var i = 0; i < questionAmount; i++) {
            do {
                var randomQuestion = Math.floor(Math.random() * questions.length);
            } while (existingQuestions());

            display.innerHTML += questions[randomQuestion] + '<br>';
            questionTracker.push(randomQuestion);
        }


        function existingQuestions() {
            for (var i = 0; i < questionTracker.length; i++) {
                if (questionTracker[i] === randomQuestion) {
                    return true;
                }
            }
            return false;
        }
    }

    function buildQuiz() {
        // we'll need a place to store the HTML output
        const output = [];

        // for each question...
        myQuestions.forEach((currentQuestion, questionNumber) => {
            // we'll want to store the list of answer choices
            const answers = [];

            // and for each available answer...
            for (letter in currentQuestion.answers) {
                // ...add an HTML radio button
                answers.push(
                    `<label>
     <input type="radio" name="question${questionNumber}" value="${letter}">
      ${letter} :
      ${currentQuestion.answers[letter]}
   </label>`
                );
            }

            // add this question and its answers to the output
            output.push(
                `<div class="slide">
   <div class="question"> ${currentQuestion.question} </div>
   <div class="answers"> ${answers.join("")} </div>
 </div>`
            );
        });

        // finally combine our output list into one string of HTML and put it on the page
        quizContainer.innerHTML = output.join("");
    }

    function showResults() {
        // gather answer containers from our quiz
        const answerContainers = quizContainer.querySelectorAll(".answers");

        // keep track of user's answers
        let numCorrect = 0;

        // for each question...
        myQuestions.forEach((currentQuestion, questionNumber) => {
            // find selected answer
            const answerContainer = answerContainers[questionNumber];
            const selector = `input[name=question${questionNumber}]:checked`;
            const userAnswer = (answerContainer.querySelector(selector) || {}).value;

            // if answer is correct
            if (userAnswer === currentQuestion.correctAnswer) {
                // add to the number of correct answers
                numCorrect++;

                // color the answers green
                answerContainers[questionNumber].style.color = "lightgreen";
            } else {
                // if answer is wrong or blank
                // color the answers red
                answerContainers[questionNumber].style.color = "red";
            }
        });

        // show number of correct answers out of total
        resultsContainer.innerHTML = `${numCorrect} Oikein ${myQuestions.length}`;
    }

    function showSlide(n) {
        slides[currentSlide].classList.remove("active-slide");
        slides[n].classList.add("active-slide");
        currentSlide = n;

        if (currentSlide === 0) {
            previousButton.style.display = "none";
        } else {
            previousButton.style.display = "inline-block";
        }

        if (currentSlide === slides.length - 1) {
            nextButton.style.display = "none";
            submitButton.style.display = "inline-block";
        } else {
            nextButton.style.display = "inline-block";
            submitButton.style.display = "none";
        }
    }

    function showNextSlide() {
        showSlide(currentSlide + 1);
    }

    function showPreviousSlide() {
        showSlide(currentSlide - 1);
    }

    const quizContainer = document.getElementById("quiz");
    const resultsContainer = document.getElementById("results");
    const submitButton = document.getElementById("submit");

    // display quiz right away
    buildQuiz();

    const previousButton = document.getElementById("previous");
    const nextButton = document.getElementById("next");
    const slides = document.querySelectorAll(".slide");
    let currentSlide = 0;

    showSlide(0);

    // on submit, show results
    submitButton.addEventListener("click", showResults);
    previousButton.addEventListener("click", showPreviousSlide);
    nextButton.addEventListener("click", showNextSlide);
})();

我尝试使用 Math.random 函数，但我无法让它工作!

Answer 1

您可以 shuffle数组 myQuestions 通过调用 shuffle(myQuestions) 和下面的 shuffle 函数(Fisher Yates 算法，从链接中的答案复制)。

function shuffle(a) {
    for (let i = a.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [a[i], a[j]] = [a[j], a[i]];
    }
    return a;
}

语法: shuffledArr = shuffle(arr);

然后按顺序显示它们(现在打乱)。这将节省空间复杂性，否则必须处理一系列已经提出的问题。

与 OP 对话后，这里是完整的重构代码:https://jsfiddle.net/L0qzdhg0/4/

下面的示例片段:运行多次以查看不同的结果

function shuffle(a) {
    for (let i = a.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [a[i], a[j]] = [a[j], a[i]];
    }
    return a;
}

console.log(
shuffle(
[{
            question: "Esimerkki kysymys1",
            answers: {
                a: "Oikein",
                b: "Väärin"
            },
            correctAnswer: "a"
        },
        {
            question: "Esimerkki kysymys2",
            answers: {
                a: "Oikein",
                b: "Väärin"
            },
            correctAnswer: "b"
        },
        {
            question: "Esimerkki kysymys3",
            answers: {
                a: "Oikein",
                b: "Väärin"
            },
            correctAnswer: "a"
        }
    ]
    )
    );