代码之家  ›  专栏  ›  技术社区  ›  Zami Coskula

如何对问题使用math.random()?

  •  1
  • Zami Coskula  · 技术社区  · 6 年前

    所以我正在制作一个网站,上面有一些你需要回答的问题,我想按照同样的顺序使用这些问题。那么,我如何使用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函数,但没法用!

    1 回复  |  直到 6 年前
        1
  •  1
  •   Attersson    6 年前

    你可以 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"
            }
        ]
        )
        );