如何为图片测验实现题目与选项的随机化功能？

问题说明 #

我从谷歌获取了这份图片测验资源，尝试实现测验的随机化效果，但未找到合适方法。作为前端初学者，我曾尝试使用shuffle方法但失败了，希望能找到简便方式，实现刷新页面或完成答题后加载随机测验题目的功能。

当前代码 #

HTML & CSS #

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Picture Quiz</title>
<style>
body {
background-color: #eeeeee;
}
.grid {
width: 68%;
height: 520px;
margin: 0 auto;
background-color: #fff;
padding: 10px 50px 50px 50px;
border-radius: 50px;
border: 2px solid #cbcbcb;
box-shadow: 10px 15px 5px #cbcbcb;
}

.buttons img
{
width:200px;
}
.grid h1 {
font-family: "sans-serif";
background-color: #ffc107;
font-size: 35px;
text-align: center;
color: #ffffff;
padding: 2px 0px;
border-radius: 50px;
}
hr
{
margin-top: 50px;
    color: red;
    background-color: #ffc107;
    height: 2px;
    border: none;
}
#score {
color: #ffc107;
text-align: center;
font-size: 30px;
}

.grid #question {
font-family: "monospace";
font-size: 30px;
color: #ffc107;
}

.buttons {
margin-top: 30px;
}

#btn0,
#btn1,
#btn2,
#btn3 {

    padding: 0px;
font-size: 20px;
color: #fff;
    border: none;
margin: 10px 20px 10px 0px;

}

#btn0:hover,
#btn1:hover,
#btn2:hover,
#btn3:hover {
cursor: pointer;
background-color: #ffc107;
}

#btn0:focus,
#btn1:focus,
#btn2:focus,
#btn3:focus {
outline: 0;
}

#progress {
color: #2b2b2b;
font-size: 18px;
}
</style>
</head>
<body>
<div class="grid">
<div id="quiz">
<h1>Picture Quiz</h1>
<hr style="margin-bottom: 20px">
<p id="question"></p>
<div class="buttons">
<button id="btn0"><span id="choice0"></span></button>
<button id="btn1"><span id="choice1"></span></button>
<button id="btn2"><span id="choice2"></span></button>
<button id="btn3"><span id="choice3"></span></button>
</div>
<hr style="margin-top: 50px">
<footer>
<p id="progress">Question x of y</p>
</footer>
</div>
</div>
</body>
<script src="index.js" type="text/javascript"></script>
</html>

JavaScript #

var images = {
"dog"  : "dog.jpg",
"cow" : "cow.jpg",
"cat" : "cat.jpg",
"goat"   : "goat.jpg",
"deer"   : "deer.jpg",
"hen"   : "hen.jpg",
"lion"   : "lion.jpg",
"parrot"   : "parrot.jpg",
"tiger"   : "tiger.jpg"

}  
function populate() {
if (quiz.isEnded()) {
showScores();
} else {
// show question
var element = document.getElementById("question");
element.innerHTML = quiz.getQuestionIndex().text;

// show options
var choices = quiz.getQuestionIndex().choices;
for (var i = 0; i < choices.length; i++) {
var element = document.getElementById("choice" + i);
element.innerHTML = images[choices[i]]? '<img src="'+images[choices[i]]+'"/>':choices[i];
guess("btn" + i, choices[i]);
}

showProgress();
}
};

function guess(id, guess) {
var button = document.getElementById(id);
button.onclick = function() {
quiz.guess(guess);
populate();
}
};

function showProgress() {
var currentQuestionNumber = quiz.questionIndex + 1;
var element = document.getElementById("progress");
element.innerHTML = "Question " + currentQuestionNumber + " of " + quiz.questions.length;
};

function showScores() {
var gameOverHTML = "<h1>Result</h1>";
gameOverHTML += "<h2 id='score'> Your scores: " + quiz.score + "</h2>";
var element = document.getElementById("quiz");
element.innerHTML = gameOverHTML;
};

// create questions
var questions = [
new Question("Which one is dog?", ["cow", "goat", "cat", "dog"], "dog"),
new Question("select tiger below", ["parrot", "deer", "tiger", "lion"], "tiger"),
new Question("choose parrot pls?", ["hen", "parrot", "goat",  "dog"], "parrot"),
new Question("Find cat below?", ["parrot", "goat", "cat", "tiger"], "cat"),
new Question("choose lion pls?", ["lion", "goat", "tiger", "dog"], "lion")
];

function Question(text, choices, answer) {
this.text = text;
this.choices = choices;
this.answer = answer;
}

Question.prototype.isCorrectAnswer = function(choice) {
return this.answer === choice;
}


function Quiz(questions) {
this.score = 0;
this.questions = questions;
this.questionIndex = 0;
}

Quiz.prototype.getQuestionIndex = function() {
return this.questions[this.questionIndex];
}

Quiz.prototype.guess = function(answer) {
if (this.getQuestionIndex().isCorrectAnswer(answer)) {
this.score++;
}

this.questionIndex++;
}

Quiz.prototype.isEnded = function() {
return this.questionIndex === this.questions.length;
}

// create quiz
var quiz = new Quiz(questions);

// display quiz
populate();

解决方案 #

要实现题目随机化，只需完成以下三步：

1. 添加Fisher-Yates洗牌函数 #

这是一种高效且公平的数组打乱算法，将其添加到JavaScript代码末尾：

// 洗牌函数，打乱数组顺序
function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

2. 初始化测验时打乱题目 #

替换原有的测验初始化代码，复制原题目数组并打乱，避免修改原数据：

// 创建并打乱题目数组，初始化测验
var shuffledQuestions = shuffleArray([...questions]);
var quiz = new Quiz(shuffledQuestions);

// 显示测验
populate();

这样刷新页面时，题目顺序会自动随机变化。

3. 答题结束后添加重新开始按钮 #

修改showScores函数，添加重新开始按钮，点击后重新打乱题目并初始化测验：

function showScores() {
var gameOverHTML = "<h1>Result</h1>";
gameOverHTML += "<h2 id='score'> Your scores: " + quiz.score + "</h2>";
// 添加重新开始按钮
gameOverHTML += "<button onclick='restartQuiz()' style='padding:10px 20px; font-size:20px; background:#ffc107; color:white; border:none; border-radius:10px; cursor:pointer;'>重新开始测验</button>";
var element = document.getElementById("quiz");
element.innerHTML = gameOverHTML;
}

// 重新开始测验函数
function restartQuiz() {
  var shuffledQuestions = shuffleArray([...questions]);
  quiz = new Quiz(shuffledQuestions);
  populate();
}

修改完成后，不仅刷新页面会加载随机题目，答完题点击重新开始按钮也会重新随机题目顺序。

内容的提问来源于stack exchange，提问作者Amongus