当前位置：首页 > JavaScript

js实现答题功能

2026-04-07 08:19:17JavaScript

实现答题功能的基本思路

答题功能通常包括题目展示、选项选择、答案验证和结果统计等模块。以下是使用JavaScript实现答题功能的关键步骤。

数据结构设计

使用数组或对象存储题目、选项和正确答案。例如：

const questions = [
  {
    question: "JavaScript是什么？",
    options: ["标记语言", "编程语言", "样式表", "数据库"],
    answer: 1
  },
  {
    question: "以下哪个不是JavaScript框架？",
    options: ["React", "Vue", "Angular", "Django"],
    answer: 3
  }
];

界面渲染

动态生成HTML元素显示题目和选项：

function renderQuestion(index) {
  const q = questions[index];
  let html = `<div class="question">${q.question}</div>`;

  q.options.forEach((option, i) => {
    html += `
      <div class="option" data-index="${i}">
        <input type="radio" name="answer" id="option${i}">
        <label for="option${i}">${option}</label>
      </div>
    `;
  });

  document.getElementById('quiz-container').innerHTML = html;
}

事件监听

为选项添加点击事件监听器：

document.addEventListener('click', function(e) {
  if (e.target.closest('.option')) {
    const selectedIndex = parseInt(e.target.closest('.option').dataset.index);
    // 存储用户选择
    currentSelected = selectedIndex;
  }
});

答案验证

比较用户选择与正确答案：

function checkAnswer(questionIndex, userAnswer) {
  return questions[questionIndex].answer === userAnswer;
}

结果统计

维护一个分数计数器：

let score = 0;

function updateScore(isCorrect) {
  if (isCorrect) {
    score++;
    document.getElementById('score').textContent = score;
  }
}

完整流程控制

控制题目切换和结果显示：

js实现答题功能

let currentQuestion = 0;
renderQuestion(currentQuestion);

document.getElementById('next-btn').addEventListener('click', function() {
  const isCorrect = checkAnswer(currentQuestion, currentSelected);
  updateScore(isCorrect);

  currentQuestion++;
  if (currentQuestion < questions.length) {
    renderQuestion(currentQuestion);
  } else {
    showResults();
  }
});