当前位置：首页 > JavaScript

js实现答题

2026-04-06 08:42:35JavaScript

使用JavaScript实现答题功能

在JavaScript中实现答题功能需要处理题目展示、用户选择、答案验证和结果反馈等环节。以下是实现答题功能的关键步骤和代码示例。

数据结构设计

答题功能通常需要存储题目、选项、正确答案和用户选择。可以使用数组和对象来组织数据：

const questions = [
  {
    question: "JavaScript是什么？",
    options: ["标记语言", "脚本语言", "编译语言", "样式语言"],
    answer: 1
  },
  {
    question: "哪个符号用于声明变量？",
    options: ["#", "$", "var", "let"],
    answer: 3
  }
];

界面渲染

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

js实现答题

function renderQuestions() {
  const quizContainer = document.getElementById('quiz-container');

  questions.forEach((q, index) => {
    const questionElement = document.createElement('div');
    questionElement.className = 'question';
    questionElement.innerHTML = `<h3>${index + 1}. ${q.question}</h3>`;

    q.options.forEach((option, i) => {
      questionElement.innerHTML += `
        <label>
          <input type="radio" name="q${index}" value="${i}">
          ${option}
        </label><br>
      `;
    });

    quizContainer.appendChild(questionElement);
  });
}

用户答案收集

为提交按钮添加事件监听器，收集用户选择：

document.getElementById('submit-btn').addEventListener('click', () => {
  const userAnswers = [];
  const radioGroups = document.querySelectorAll('input[type="radio"]:checked');

  radioGroups.forEach(radio => {
    const questionIndex = parseInt(radio.name.substring(1));
    userAnswers[questionIndex] = parseInt(radio.value);
  });

  checkAnswers(userAnswers);
});

答案验证与评分

比较用户答案与正确答案并计算分数：

js实现答题

function checkAnswers(userAnswers) {
  let score = 0;

  questions.forEach((q, index) => {
    if (userAnswers[index] === q.answer) {
      score++;
    }
  });

  const resultElement = document.getElementById('result');
  resultElement.innerHTML = `你的得分: ${score}/${questions.length}`;
}

完整HTML结构

配合JavaScript代码的HTML基础结构：

<div id="quiz-container"></div>
<button id="submit-btn">提交答案</button>
<div id="result"></div>

样式增强

添加CSS改善答题界面：

.question {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
#submit-btn {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}
#result {
  margin-top: 20px;
  font-weight: bold;
}