如何让JavaScript答题库的题目与对应答案正确显示并运行

第一步：调整HTML结构 #

现有题库第三题包含D选项，原页面只有A/B/C三个选项按钮，需要新增D按钮：

<!-- 原quiz-container容器内选项按钮部分修改为如下 -->
<button class="btns" id="btn-a">A</button>
<button class="btns" id="btn-b">B</button>
<button class="btns" id="btn-c">C</button>
<button class="btns" id="btn-d">D</button>

第二步：调整JavaScript逻辑 #

完整修改后的JS代码如下，核心逻辑包含题库渲染、答案校验、答题流程控制：

const questionBank = [
    {
        prompt: "What markup language is used for styling webpages?\n(a) HTML\n (b) CSS \n (c) Java",
        answer: "b",
        options: ["HTML", "CSS", "Java"]
    },
    {
        prompt: "What language uses the syntax let and const?\n(a) HTML\n (b) CSS \n (c) Javascript",
        answer: "c",
        options: ["HTML", "CSS", "Javascript"]
    },
    {
        prompt: "What markup language is used for the skeleton of a webpage?\n(a) CSS\n (b) Javascript \n (c) Python \n (d) HTML",
        answer: "d",
        options: ["CSS", "Javascript", "Python", "HTML"]
    },
];

const startBtn = document.getElementById("start");
const questionEl = document.getElementById("question");
const timerEl = document.getElementById('timer');
const scoreEl = document.querySelector('.score');
const optionBtns = {
    a: document.getElementById('btn-a'),
    b: document.getElementById('btn-b'),
    c: document.getElementById('btn-c'),
    d: document.getElementById('btn-d')
};

let currentQuestionIndex = 0;
let score = 0;
let timerInterval = null;

// 计时函数
function startTimer() {
    let sec = 15;
    timerEl.innerHTML = '00:' + sec;
    // 先清除已有计时，避免重复触发
    if(timerInterval) clearInterval(timerInterval);
    timerInterval = setInterval(function(){
        sec--;
        timerEl.innerHTML = '00:' + (sec < 10 ? '0' + sec : sec);
        if (sec < 0) {
            clearInterval(timerInterval);
            // 时间到直接跳转下一题
            nextQuestion();
        }
    }, 1000);
}

// 渲染当前题目
function renderCurrentQuestion() {
    const currentQues = questionBank[currentQuestionIndex];
    questionEl.innerText = currentQues.prompt;
    // 遍历按钮，显示对应选项文本，没有对应选项的按钮隐藏
    Object.keys(optionBtns).forEach(key => {
        const btn = optionBtns[key];
        const optionIndex = key.charCodeAt(0) - 97;
        if(currentQues.options[optionIndex]) {
            btn.style.display = 'inline-block';
            btn.innerText = `${key.toUpperCase()}. ${currentQues.options[optionIndex]}`;
            // 绑定点击事件
            btn.onclick = () => checkAnswer(key);
        } else {
            btn.style.display = 'none';
        }
    });
}

// 校验答案
function checkAnswer(selected) {
    const currentQues = questionBank[currentQuestionIndex];
    if(selected === currentQues.answer) {
        score += 10;
        scoreEl.innerText = `Score: ${score}`;
    } else {
        // 答错可以扣时间，根据需求调整
        if(timerInterval) clearInterval(timerInterval);
        let sec = parseInt(timerEl.innerText.split(':')[1]);
        sec = Math.max(0, sec - 3);
        timerEl.innerHTML = '00:' + (sec < 10 ? '0' + sec : sec);
        startTimer(sec);
    }
    nextQuestion();
}

// 跳转下一题
function nextQuestion() {
    clearInterval(timerInterval);
    currentQuestionIndex++;
    if(currentQuestionIndex >= questionBank.length) {
        // 所有题目答完
        questionEl.innerText = `答题结束！最终得分：${score}`;
        Object.values(optionBtns).forEach(btn => btn.style.display = 'none');
        timerEl.innerText = '00:00';
        return;
    }
    renderCurrentQuestion();
    startTimer();
}

// 开始答题
startBtn.onclick = function beginQuiz(){
    // 重置状态
    currentQuestionIndex = 0;
    score = 0;
    scoreEl.innerText = `Score: ${score}`;
    startBtn.style.display = 'none';
    renderCurrentQuestion();
    startTimer();
}

核心实现说明 #

• 新增options字段存储每个题目的选项内容，方便动态渲染按钮文本
• 统一管理计时器实例，避免重复触发计时导致逻辑混乱
• 动态控制选项按钮显示隐藏，适配不同选项数量的题目
• 答题结束后自动显示最终得分，隐藏所有选项按钮

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