如何使用数组中的随机元素，从数组中删除该元素，并继续使用随机元素直到数组为空？

Question

这是我的第一个堆栈溢出问题，所以如果我提出了错误，请告诉我。我对计算机编程很陌生，所以我只有一个小网页，我只是在其中实现我正在学习的东西。

我做了一个小测验，包含随机琐事多项选择题，如果你按下一个按钮，你就可以回答。我正在使用窗口提示来询问问题并获得答案，并且我将所有问题和答案存储为带有问题/提示和答案对的对象。所有这些对象都存储在一个名为 shortQuizPrompts 的变量中的数组中。我已经完成了测验和一切，也就是，它会在每个问题后告诉你，如果你对那个问题的答案是对还是错，然后它会给你一个分数...... 我也设置了它，如果你输入的答案不是“a”、“b”、“c”或“d”，它会让你知道它不是一个有效的答案。诸如此类。

截至目前，您可以从我目前共有的 24 个问题中选择您希望测验的时长。它只是按照问题存储在数组中的顺序询问问题。例如，如果您不选择将测验的长度设为完整的 24 个问题，那么您将永远不会被问到数组中的最后一个问题。但是，我想让测验以随机顺序提出问题，同时还从数组中删除这些问题，以免多次问同一个问题。

我尝试在将数组循环到从 0 到他们选择的许多问题的长度的随机数时增加迭代器。然后检查迭代器是否大于他们选择的问题数的长度，它会减少迭代器，直到它找到仍然在数组中它可以提出的问题......

如果有人知道该怎么做，那就太好了。抱歉，顺便问了个长问题。我对编码很陌生，所以这可能是一个简单的答案，但我离题了。我很确定我做的一切都是正确的。谢谢。

const quizButton = document.getElementById("quiz-button");

/*  =========================
    Question and answer pairs
    =========================
*/
let shortQuizPrompts = 
   [{prompt: "10 + 10\n(a) 10\n(b) 15\n(c) 20\n(d) 25", answer: "c"},
    {prompt: "What status did astronomers downgrade Pluto to in 2006?\n(a) Dwarf Planet\n(b) White Dwarf\n(c) Black Dwarf\n(d) Dwarf Star", answer: "a"},
    {prompt: 'What tart fruit has a sweet variety called "Meyer"?\n(a) lime\n(b) lemon\n(c) grapefruit\n(d) dragonfruit', answer: "c"},
    {prompt: `What bird lays its eggs in other birds' nests?\n(a) Blue Jay\n(b) Robin\n(c) Eagle\n (d) Cuckoo`, answer: "d"},
    {prompt: `What is a female goat called?\n(a) a foe\n(b) a larp\n(c) a nanny\n(d) a maur`, answer:"c"},
    {prompt: `What is Eisoptrophobia? \n(a) the fear of mirrors\n(b) the fear of cold temperatures\n(c) the fear of farm animals\n(d) the fear of viruses`, answer: `a`},
    {prompt: `Which element of the periodic table is named after the sun?\n(a) slinerium\n(b) helium\n(c) magnesium\n(d) uranium`, answer: `b`},
    {prompt: `What color is the octopus blood?\n(a) pink\n(b) light green\n(c) violet\n(d) light blue`, answer: `d`},
    {prompt: `What value does the Roman numeral C represent?\n(a) 20\n(b) 50\n(c) 100\n(d) 200`, answer: `c`},
    {prompt: `What is measured in fathoms?\n(a) depth of water \n(b) sound \n(c) pressure \n(d) light`, answer: `a`},
    {prompt: `What is Chiroptophobia?\n(a) fear of plants \n(b) fear of insects\n(c) fear of chirogenics \n(d) fear of bats`, answer: `d`},
    {prompt: `What is the longest and heaviest bone in the human body?\n(a) tibia\n(b) skull\n(c) femur\n(d) humorous`, answer: `c`},
    {prompt: `What are the two major elements making up the sun?\n(a) hydrogen and helium\n(b) nitrogen and hydrogen\n(c) oxygen and nitrogen\n(d) oxygen and hydrogen`, answer: `a`},
    {prompt: `What is poliosis?\n(a) a disease impacting your balance\n(b) graying of hair\n(c) loss of hair\n(d) high potassium pressence in blood`, answer: `b`},
    {prompt: `When held to ultraviolet light, what animal’s urine glows in the dark?\n(a) lemur\n(b) cat\n(c) dog\n(d) lamb`, answer: ``},
    {prompt: `What year did the "ILOVEYOU" virus began infecting computers worldwide?\n(a) 2000\n(b) 2001\n(c) 2002\n(d) 2004`, answer: `a`},
    {prompt: `What planet's four largest moons are collectively known as the Galilean Moons?\n(a) neptune\n(b) jupiter\n(c) saturn\n(d) uranus`, answer: `b`},
    {prompt: `What North American mammal is also known as the prairie wolf or brush wolf?\n(a) brown bears\n(b) ocelots\n(c) coyotes\n(d) hyenas`, answer: `c`},
    {prompt: `How often are brain cells replaced?\n(a) once every few hours\n(b) once every few days\n(c) once every few weeks\n(d) never`, answer: `d`},
    {prompt: `What physical property of a diamond do carats measure?\n(a) mass\n(b) purity \n(c) color quality\n(d) mineral composition`, answer: `a`},
    {prompt: `Nosocomephobia is the fear of what?\n(a) night time\n(b) very large objects\n(c) hospitals\n(d) loud noises`, answer: `c`},
    {prompt: `In what year did the Soviet Union launch its first Sputnik satellite?\n(a) 1049\n(b) 1957\n(c) 1963\n(d)1972`, answer: `b`},
    {prompt: `What is measured in Ergs?\n(a) Work\n(b) mass\n(c) depth\n(d) emotion`, answer: `a`},
    {prompt: `What does a Scoville unit measure?\n(a) sourness\n(b) pain\n(c) spiciness\n(d) taste`, answer: `c`},];
    
    
    
    
    /*  ======================
        initiation of the quiz
        ======================
    */
   
        quizButton.onclick = () => {
        let correct = 0;
        const amountOfQuestions = prompt(`How many questions do you want? There are ${shortQuizPrompts.length} maximum`);
        alert('You are about to start the quiz. \nFor each question, enter either "a", "b", "c", or "d". \nPress enter to continue');
        for(i = 0; i< amountOfQuestions; i++) {
           const answer = prompt(shortQuizPrompts[i].prompt);
            if(answer === shortQuizPrompts[i].answer && answer !== null && answer !== undefined) {
                alert("Correct");
                correct++;
            } else if (answer !== shortQuizPrompts[i].answer && answer !==null && answer !== undefined && answer.length >= 1 && (answer === "a" || answer === "b" || answer === "c" || answer === "d")) {
                alert("Incorrect");
            } else if (answer === null) {
                alert(`Bruh, why'd you start the quiz if you didnt want to answer the questions lol`);
            } else if (answer.length == 0) {
                setInterval(alert("Trying to skip questions, I see?? Yeah, you thought you weren't gonna get caught, huh? Well think again")), 100;
            }
            console.log(answer)
            if(i === amountOfQuestions - 1 && (Math.floor(correct / amountOfQuestions * 100)) <= 33) {
                alert(`Wow, you're bad! You made a ${Math.floor((correct / amountOfQuestions) * 100).toFixed(2)}% getting ${correct} out of ${amountOfQuestions} questions correct!`);
        
            }
    
            if(i === amountOfQuestions - 1 && (Math.floor(correct / amountOfQuestions * 100)) > 33 && (Math.floor(correct / amountOfQuestions * 100)) <= 66) {
                alert(`You did ok. You made a ${Math.floor((correct / amountOfQuestions) * 100).toFixed(2)}% getting ${correct} out of ${amountOfQuestions} questions right!`);
        
            }
    
            if(i === amountOfQuestions - 1 && (Math.floor(correct / amountOfQuestions * 100)) > 66 ) {
                alert(`Congratulations! ???? You made a ${Math.floor((correct / amountOfQuestions) * 100).toFixed(2)}% getting ${correct} out of ${amountOfQuestions} questions right!`);
            }
            if(answer !== "a" && answer !== "b" && answer!== "c" && answer !== "d" && answer.length > 0 && answer !== null && answer !== undefined) {
                alert(`What are you doing? I told you to only enter "a", "b", "c", or "d" as answers`);
            }
        }
    
    }

* {
    box-sizing: border-box;
}

button {
    cursor: pointer;
}

#quiz-text {
    position: relative;
    left: 42vw;
    top: 25vh;
    transform: translateX(-2%) translateY(5%);
    font-size: 1.5rem;

}

#quiz-button {
    position: relative;
    left: 45vw;
    top: 25vh;
    transform: translateX(-2%) translateY(5%);
    font-size: 20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="game.css">
    <script src="D:/Coding/yt games/game.js" defer></script>
    <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> Random Stuff </title>
</head>
<body id="body">
    <p id="quiz-text">Want to take a short quiz?</p>
    <button id="quiz-button"> START</button>
    
</body>
</html>

Answer 1

您可以在开始测验之前随机排列shortQuizPrompts 数组。 Array shuffle 的详细信息可以在this answer 中找到。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Random Quiz</title>
    <style>
        * {
            box-sizing: border-box;
        }

        button {
            cursor: pointer;
        }

        #quiz-text {
            position: relative;
            left: 42vw;
            top: 25vh;
            transform: translateX(-2%) translateY(5%);
            font-size: 1.5rem;

        }

        #quiz-button {
            position: relative;
            left: 45vw;
            top: 25vh;
            transform: translateX(-2%) translateY(5%);
            font-size: 20px;
        }
    </style>
</head>
<body id="body">
<p id="quiz-text">Want to take a short quiz?</p>
<button id="quiz-button"> START</button>

<script>

    function shuffle(array) {
        let currentIndex = array.length, randomIndex;

        // While there remain elements to shuffle...
        while (currentIndex != 0) {

            // Pick a remaining element...
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex--;

            // And swap it with the current element.
            [array[currentIndex], array[randomIndex]] = [
                array[randomIndex], array[currentIndex]];
        }

        return array;
    }

    const quizButton = document.getElementById("quiz-button");

    /*  =========================
        Question and answer pairs
        =========================
    */
    let shortQuizPrompts =
        [{prompt: "10 + 10\n(a) 10\n(b) 15\n(c) 20\n(d) 25", answer: "c"},
            {
                prompt: "What status did astronomers downgrade Pluto to in 2006?\n(a) Dwarf Planet\n(b) White Dwarf\n(c) Black Dwarf\n(d) Dwarf Star",
                answer: "a"
            },
            {
                prompt: 'What tart fruit has a sweet variety called "Meyer"?\n(a) lime\n(b) lemon\n(c) grapefruit\n(d) dragonfruit',
                answer: "c"
            },
            {
                prompt: `What bird lays its eggs in other birds' nests?\n(a) Blue Jay\n(b) Robin\n(c) Eagle\n (d) Cuckoo`,
                answer: "d"
            },
            {
                prompt: `What is a female goat called?\n(a) a foe\n(b) a larp\n(c) a nanny\n(d) a maur`,
                answer: "c"
            },
            {
                prompt: `What is Eisoptrophobia? \n(a) the fear of mirrors\n(b) the fear of cold temperatures\n(c) the fear of farm animals\n(d) the fear of viruses`,
                answer: `a`
            },
            {
                prompt: `Which element of the periodic table is named after the sun?\n(a) slinerium\n(b) helium\n(c) magnesium\n(d) uranium`,
                answer: `b`
            },
            {
                prompt: `What color is the octopus blood?\n(a) pink\n(b) light green\n(c) violet\n(d) light blue`,
                answer: `d`
            },
            {
                prompt: `What value does the Roman numeral C represent?\n(a) 20\n(b) 50\n(c) 100\n(d) 200`,
                answer: `c`
            },
            {
                prompt: `What is measured in fathoms?\n(a) depth of water \n(b) sound \n(c) pressure \n(d) light`,
                answer: `a`
            },
            {
                prompt: `What is Chiroptophobia?\n(a) fear of plants \n(b) fear of insects\n(c) fear of chirogenics \n(d) fear of bats`,
                answer: `d`
            },
            {
                prompt: `What is the longest and heaviest bone in the human body?\n(a) tibia\n(b) skull\n(c) femur\n(d) humorous`,
                answer: `c`
            },
            {
                prompt: `What are the two major elements making up the sun?\n(a) hydrogen and helium\n(b) nitrogen and hydrogen\n(c) oxygen and nitrogen\n(d) oxygen and hydrogen`,
                answer: `a`
            },
            {
                prompt: `What is poliosis?\n(a) a disease impacting your balance\n(b) graying of hair\n(c) loss of hair\n(d) high potassium pressence in blood`,
                answer: `b`
            },
            {
                prompt: `When held to ultraviolet light, what animal’s urine glows in the dark?\n(a) lemur\n(b) cat\n(c) dog\n(d) lamb`,
                answer: ``
            },
            {
                prompt: `What year did the "ILOVEYOU" virus began infecting computers worldwide?\n(a) 2000\n(b) 2001\n(c) 2002\n(d) 2004`,
                answer: `a`
            },
            {
                prompt: `What planet's four largest moons are collectively known as the Galilean Moons?\n(a) neptune\n(b) jupiter\n(c) saturn\n(d) uranus`,
                answer: `b`
            },
            {
                prompt: `What North American mammal is also known as the prairie wolf or brush wolf?\n(a) brown bears\n(b) ocelots\n(c) coyotes\n(d) hyenas`,
                answer: `c`
            },
            {
                prompt: `How often are brain cells replaced?\n(a) once every few hours\n(b) once every few days\n(c) once every few weeks\n(d) never`,
                answer: `d`
            },
            {
                prompt: `What physical property of a diamond do carats measure?\n(a) mass\n(b) purity \n(c) color quality\n(d) mineral composition`,
                answer: `a`
            },
            {
                prompt: `Nosocomephobia is the fear of what?\n(a) night time\n(b) very large objects\n(c) hospitals\n(d) loud noises`,
                answer: `c`
            },
            {
                prompt: `In what year did the Soviet Union launch its first Sputnik satellite?\n(a) 1049\n(b) 1957\n(c) 1963\n(d)1972`,
                answer: `b`
            },
            {
                prompt: `What is measured in Ergs?\n(a) Work\n(b) mass\n(c) depth\n(d) emotion`,
                answer: `a`
            },
            {
                prompt: `What does a Scoville unit measure?\n(a) sourness\n(b) pain\n(c) spiciness\n(d) taste`,
                answer: `c`
            },];


    /*  ======================
        initiation of the quiz
        ======================
    */

    quizButton.onclick = () => {
        let correct = 0;
        const amountOfQuestions = prompt(`How many questions do you want? There are ${shortQuizPrompts.length} maximum`);
        alert('You are about to start the quiz. \nFor each question, enter either "a", "b", "c", or "d". \nPress enter to continue');
        shuffle(shortQuizPrompts);
        for (i = 0; i < amountOfQuestions; i++) {
            const answer = prompt(shortQuizPrompts[i].prompt);
            if (answer === shortQuizPrompts[i].answer && answer !== null && answer !== undefined) {
                alert("Correct");
                correct++;
            } else if (answer !== shortQuizPrompts[i].answer && answer !== null && answer !== undefined && answer.length >= 1 && (answer === "a" || answer === "b" || answer === "c" || answer === "d")) {
                alert("Incorrect");
            } else if (answer === null) {
                alert(`Bruh, why'd you start the quiz if you didnt want to answer the questions lol`);
            } else if (answer.length == 0) {
                setInterval(alert("Trying to skip questions, I see?? Yeah, you thought you weren't gonna get caught, huh? Well think again")), 100;
            }
            console.log(answer)
            if (i === amountOfQuestions - 1 && (Math.floor(correct / amountOfQuestions * 100)) <= 33) {
                alert(`Wow, you're bad! You made a ${Math.floor((correct / amountOfQuestions) * 100).toFixed(2)}% getting ${correct} out of ${amountOfQuestions} questions correct!`);

            }

            if (i === amountOfQuestions - 1 && (Math.floor(correct / amountOfQuestions * 100)) > 33 && (Math.floor(correct / amountOfQuestions * 100)) <= 66) {
                alert(`You did ok. You made a ${Math.floor((correct / amountOfQuestions) * 100).toFixed(2)}% getting ${correct} out of ${amountOfQuestions} questions right!`);

            }

            if (i === amountOfQuestions - 1 && (Math.floor(correct / amountOfQuestions * 100)) > 66) {
                alert(`Congratulations! ? You made a ${Math.floor((correct / amountOfQuestions) * 100).toFixed(2)}% getting ${correct} out of ${amountOfQuestions} questions right!`);
            }
            if (answer !== "a" && answer !== "b" && answer !== "c" && answer !== "d" && answer.length > 0 && answer !== null && answer !== undefined) {
                alert(`What are you doing? I told you to only enter "a", "b", "c", or "d" as answers`);
            }
        }

    }
</script>
</body>
</html>