JavaScript实现Shuffle Quiz API答案选项随机排序求助

问题分析 #

你当前的代码直接将错误答案依次放在A/B/C位，正确答案固定在D位，导致正确选项位置完全固定。要实现随机分布，需要先把正确答案和错误答案合并成完整选项数组，再进行随机打乱。

解决方案步骤 #

• 合并完整选项数组：将API返回的correct_answer并入incorrect_answers数组，得到包含所有4个选项的数组
• 使用Fisher-Yates洗牌算法打乱数组：这是无偏的随机洗牌方法，能确保每个选项出现在任意位置的概率均等
• 渲染打乱后的选项：将打乱后的数组依次填充到页面的四个选项位置
• 记录正确答案：保存当前题目的正确答案，用于后续判断用户选择是否正确

修改后的完整代码 #

const main = () => {
       let score = 0;
       let questionCounter = 0;
       let availableQuestions = [];
       let currentQuestion = {};
       let currentCorrectAnswer = ""; // 新增：保存当前题目的正确答案

// target DOM elements
     const question = document.querySelector(".question-container");
     const choices = document.querySelectorAll(".choice-txt");
     const selection = document.querySelectorAll(".choice-container");

// API endpoint     
     const endPoint = `https://opentdb.com/api.php?amount=10&difficulty=easy&type=multiple`;

// Fisher-Yates洗牌算法：无偏打乱数组
     const shuffleArray = (array) => {
       const newArray = [...array];
       for (let i = newArray.length - 1; i > 0; i--) {
         const j = Math.floor(Math.random() * (i + 1));
         [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
       }
       return newArray;
     }

// fetch data from the API
     fetch(endPoint)
     .then((res)=>{
            return res.json();
     })
     .then((json)=>{
            const currentQ = json.results[0];
            question.innerHTML = `<p>${currentQ.question}</p>`;
            
            // 合并正确答案和错误答案，生成完整选项数组
            const allAnswers = [...currentQ.incorrect_answers, currentQ.correct_answer];
            // 打乱选项数组
            const shuffledAnswers = shuffleArray(allAnswers);
            // 保存当前正确答案
            currentCorrectAnswer = currentQ.correct_answer;

            // 填充打乱后的选项
            choices.forEach((choice, index) => {
              choice.innerText = shuffledAnswers[index];
            })
     })
     .catch((err)=>{
            console.log(`An error occured ${err}`);
     })

     // 修改点击事件：判断选择是否正确
     selection.forEach((item, index) => {
       item.addEventListener("click",()=>{
         const selectedAnswer = choices[index].innerText;
         if (selectedAnswer === currentCorrectAnswer) {
           console.log("回答正确！");
           score++;
         } else {
           console.log(`回答错误，正确答案是：${currentCorrectAnswer}`);
         }
       })
     })
}
main();

代码说明 #

1. 洗牌函数：shuffleArray采用Fisher-Yates算法，通过交换数组元素实现无偏打乱，避免了sort(() => Math.random() - 0.5)这种方法的分布不均问题
2. 合并与打乱：将正确答案加入错误答案数组后再打乱，确保所有选项都参与随机排序
3. 点击逻辑优化：统一处理所有选项的点击事件，通过对比选中的文本和保存的正确答案来判断对错，不再依赖固定位置

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