h5实现答题

使用HTML5实现答题功能

HTML5结合JavaScript可以轻松实现答题功能。以下是一个简单的答题系统实现方法：

HTML结构

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

CSS样式

#quiz-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

#options {
  margin: 20px 0;
}

.option {
  display: block;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ddd;
  cursor: pointer;
}

.option:hover {
  background-color: #f5f5f5;
}

JavaScript逻辑

const quizData = [
  {
    question: "HTML5是什么时候发布的？",
    options: ["2008", "2012", "2014", "2016"],
    answer: "2014"
  },
  {
    question: "哪个标签用于播放视频？",
    options: ["<media>", "<video>", "<movie>", "<play>"],
    answer: "<video>"
  }
];

let currentQuestion = 0;
let score = 0;

function loadQuestion() {
  const questionElement = document.getElementById('question');
  const optionsElement = document.getElementById('options');

  questionElement.textContent = quizData[currentQuestion].question;
  optionsElement.innerHTML = '';

  quizData[currentQuestion].options.forEach(option => {
    const button = document.createElement('button');
    button.textContent = option;
    button.className = 'option';
    button.onclick = function() {
      selectOption(option);
    };
    optionsElement.appendChild(button);
  });
}

function selectOption(option) {
  const options = document.querySelectorAll('.option');
  options.forEach(opt => {
    opt.style.backgroundColor = '';
  });

  event.target.style.backgroundColor = '#d4edda';

  document.getElementById('submit').onclick = function() {
    checkAnswer(option);
  };
}

function checkAnswer(selectedOption) {
  if(selectedOption === quizData[currentQuestion].answer) {
    score++;
    document.getElementById('result').textContent = '正确！';
  } else {
    document.getElementById('result').textContent = '错误！';
  }

  currentQuestion++;
  if(currentQuestion < quizData.length) {
    loadQuestion();
  } else {
    document.getElementById('quiz-container').innerHTML = `
      <h3>测验完成！</h3>
      <p>你的得分: ${score}/${quizData.length}</p>
    `;
  }
}

loadQuestion();

实现答题功能的关键点

数据结构设计 使用数组存储问题和答案，每个问题对象包含问题文本、选项数组和正确答案。

{
  question: "问题文本",
  options: ["选项1", "选项2", "选项3", "选项4"],
  answer: "正确答案"
}

界面交互 为每个选项创建按钮元素，并绑定点击事件。用户选择选项后高亮显示，提交按钮检查答案。

状态管理 使用currentQuestion变量跟踪当前问题索引，score变量记录得分。每回答一个问题后递增currentQuestion。

结果展示 所有问题回答完毕后显示总分，并提供重新开始的选项（可添加重新开始按钮）。

增强功能建议

本地存储 使用localStorage保存用户进度和最高分：

// 保存分数
localStorage.setItem('quizHighScore', score);

// 读取分数
const highScore = localStorage.getItem('quizHighScore') || 0;

计时功能 添加答题计时器：

let timeLeft = 30;
const timer = setInterval(() => {
  timeLeft--;
  document.getElementById('timer').textContent = timeLeft;
  if(timeLeft <= 0) {
    clearInterval(timer);
    checkAnswer(null);
  }
}, 1000);

随机问题顺序 打乱问题顺序增加可玩性：

quizData.sort(() => Math.random() - 0.5);

多种题型支持 扩展数据结构支持多选题、判断题等：

{
  type: "multiple", // 单选/多选/判断
  correctOptions: [0, 2] // 多选正确答案索引
}