如何为测验添加答案解析并实现随机出题功能？附现有代码

核心功能实现说明 #

• 随机展示题目：通过洗牌算法打乱题目数组顺序，彻底避免固定顺序带来的猜测可能
• 全场景解析展示：用户提交答案后，无论对错都会即时显示对应题目的解析内容

代码修改示例 #

HTML 结构调整 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>测验应用</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="quiz-container">
        <h2 id="question-title"></h2>
        <div class="options-group">
            <button class="option" onclick="submitAnswer(0)"></button>
            <button class="option" onclick="submitAnswer(1)"></button>
            <button class="option" onclick="submitAnswer(2)"></button>
            <button class="option" onclick="submitAnswer(3)"></button>
        </div>
        <div id="explanation-block" class="explanation"></div>
        <button id="next-question-btn" onclick="loadNextQuestion()" style="display: none;">下一题</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS 样式优化 #

.quiz-container {
    max-width: 650px;
    margin: 3rem auto;
    padding: 2.5rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.options-group .option {
    width: 100%;
    padding: 1rem;
    margin: 0.8rem 0;
    border: none;
    border-radius: 6px;
    background-color: #f5f5f5;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s;
}

.options-group .option:hover {
    background-color: #eeeeee;
}

.options-group .option.correct {
    background-color: #d4edda;
    color: #155724;
}

.options-group .option.incorrect {
    background-color: #f8d7da;
    color: #721c24;
}

.explanation {
    margin-top: 1.5rem;
    padding: 1.2rem;
    border-radius: 6px;
    font-size: 0.95rem;
    display: none;
}

.explanation.show {
    display: block;
}

#next-question-btn {
    margin-top: 1rem;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 6px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
}

JavaScript 功能实现 #

// 题目数据集，可自行扩展
const quizQuestions = [
    {
        title: "以下哪种不是CSS布局方案？",
        options: ["Flexbox", "Grid", "JavaScript", "Float"],
        correctIndex: 2,
        explanation: "JavaScript是编程语言，不属于CSS布局方案，Flexbox、Grid、Float都是常见的CSS布局手段。"
    },
    {
        title: "在HTML中，<a>标签的target属性设置为_blank时，会如何打开链接？",
        options: ["当前窗口", "新窗口/标签页", "父框架", "顶层框架"],
        correctIndex: 1,
        explanation: "target='_blank'指定链接在新的浏览器窗口或标签页中打开，这是最常用的外部链接打开方式。"
    }
];

let currentQuestionIdx;
let shuffledQuestionsList;

// 初始化：洗牌打乱题目顺序
function initQuiz() {
    // Fisher-Yates洗牌算法，保证随机分布
    shuffledQuestionsList = [...quizQuestions];
    for (let i = shuffledQuestionsList.length - 1; i > 0; i--) {
        const randomIdx = Math.floor(Math.random() * (i + 1));
        [shuffledQuestionsList[i], shuffledQuestionsList[randomIdx]] = [shuffledQuestionsList[randomIdx], shuffledQuestionsList[i]];
    }
    currentQuestionIdx = 0;
    renderCurrentQuestion();
}

// 渲染当前题目
function renderCurrentQuestion() {
    const question = shuffledQuestionsList[currentQuestionIdx];
    document.getElementById("question-title").textContent = question.title;
    
    const optionBtns = document.querySelectorAll(".option");
    optionBtns.forEach((btn, idx) => {
        btn.textContent = question.options[idx];
        btn.disabled = false;
        btn.classList.remove("correct", "incorrect");
    });
    
    document.getElementById("explanation-block").classList.remove("show");
    document.getElementById("next-question-btn").style.display = "none";
}

// 提交答案并展示解析
function submitAnswer(selectedIdx) {
    const question = shuffledQuestionsList[currentQuestionIdx];
    const optionBtns = document.querySelectorAll(".option");
    const explanationBlock = document.getElementById("explanation-block");
    
    // 禁用所有选项，防止重复提交
    optionBtns.forEach(btn => btn.disabled = true);
    
    // 标记正确答案和用户选择
    optionBtns[question.correctIndex].classList.add("correct");
    if (selectedIdx !== question.correctIndex) {
        optionBtns[selectedIdx].classList.add("incorrect");
        explanationBlock.textContent = `错误：${question.explanation}`;
        explanationBlock.style.backgroundColor = "#f8d7da";
        explanationBlock.style.color = "#721c24";
    } else {
        explanationBlock.textContent = `正确：${question.explanation}`;
        explanationBlock.style.backgroundColor = "#d4edda";
        explanationBlock.style.color = "#155724";
    }
    
    // 显示解析和下一题按钮
    explanationBlock.classList.add("show");
    document.getElementById("next-question-btn").style.display = "block";
}

// 加载下一题
function loadNextQuestion() {
    currentQuestionIdx++;
    if (currentQuestionIdx < shuffledQuestionsList.length) {
        renderCurrentQuestion();
    } else {
        document.querySelector(".quiz-container").innerHTML = "<h2>测验已完成！</h2>";
    }
}

// 页面加载完成后初始化测验
window.addEventListener("load", initQuiz);

关键修改点说明 #

1. 随机题目逻辑：使用Fisher-Yates洗牌算法对题目数组进行打乱，相比简单的sort+Math.random，该算法能保证每个元素的随机分布更均匀，彻底避免固定顺序
2. 解析展示逻辑：在用户提交答案后，直接将对应题目的解析内容插入到页面中，同时通过背景色区分对错状态，无论答对答错都能看到解析
3. 交互体验优化：添加了下一题按钮，用户看完解析后手动切换题目；禁用已作答的选项按钮，防止重复选择；通过阴影、过渡效果提升页面质感

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