js实现选择题

实现选择题功能（JavaScript）

以下是一个基于JavaScript的简单选择题实现方案，包含题目展示、选项选择和结果反馈功能。

HTML结构

<div id="quiz-container">
  <h3 id="question">问题加载中...</h3>
  <div id="options"></div>
  <button id="submit" disabled>提交答案</button>
  <div id="result"></div>
</div>

CSS样式

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

#options {
  margin: 15px 0;
}

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

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

.option.selected {
  background-color: #e0f7fa;
  border-color: #4dd0e1;
}

#submit {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#submit:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

JavaScript实现

// 题目数据
const quizData = [
  {
    question: "JavaScript是什么类型的语言？",
    options: ["编译型", "解释型", "混合型", "标记型"],
    answer: 1
  },
  {
    question: "以下哪个不是JavaScript的数据类型？",
    options: ["string", "boolean", "number", "float"],
    answer: 3
  }
];

let currentQuestion = 0;
let selectedOption = null;
let score = 0;

// 初始化测验
function loadQuestion() {
  const questionElement = document.getElementById('question');
  const optionsElement = document.getElementById('options');
  const submitButton = document.getElementById('submit');

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

  quizData[currentQuestion].options.forEach((option, index) => {
    const optionElement = document.createElement('div');
    optionElement.classList.add('option');
    optionElement.textContent = option;
    optionElement.addEventListener('click', () => selectOption(index));
    optionsElement.appendChild(optionElement);
  });

  submitButton.disabled = true;
  document.getElementById('result').textContent = '';
}

// 选择选项
function selectOption(index) {
  selectedOption = index;
  const options = document.querySelectorAll('.option');
  options.forEach((option, i) => {
    if(i === index) {
      option.classList.add('selected');
    } else {
      option.classList.remove('selected');
    }
  });
  document.getElementById('submit').disabled = false;
}

// 提交答案
function submitAnswer() {
  if(selectedOption === quizData[currentQuestion].answer) {
    score++;
    document.getElementById('result').textContent = '正确！';
    document.getElementById('result').style.color = 'green';
  } else {
    document.getElementById('result').textContent = '错误！';
    document.getElementById('result').style.color = 'red';
  }

  setTimeout(() => {
    currentQuestion++;
    if(currentQuestion < quizData.length) {
      loadQuestion();
    } else {
      showResults();
    }
  }, 1000);
}

// 显示结果
function showResults() {
  const quizContainer = document.getElementById('quiz-container');
  quizContainer.innerHTML = `
    <h3>测验完成</h3>
    <p>你的得分: ${score}/${quizData.length}</p>
    <button onclick="location.reload()">重新测验</button>
  `;
}

// 事件监听
document.getElementById('submit').addEventListener('click', submitAnswer);

// 加载第一个问题
loadQuestion();

功能扩展建议

本地存储记录 使用localStorage保存用户的测验记录和最高分：

// 保存分数
localStorage.setItem('quizHighScore', Math.max(score, localStorage.getItem('quizHighScore') || 0));

// 显示历史最高分
const highScore = localStorage.getItem('quizHighScore') || 0;

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

let timeLeft = 30;
const timer = setInterval(() => {
  timeLeft--;
  document.getElementById('timer').textContent = `剩余时间: ${timeLeft}秒`;
  if(timeLeft <= 0) {
    clearInterval(timer);
    submitAnswer();
  }
}, 1000);

随机题目顺序 打乱题目顺序增加随机性：

function shuffleArray(array) {
  return array.sort(() => Math.random() - 0.5);
}

const shuffledQuiz = shuffleArray([...quizData]);

这个实现提供了完整的选择题功能，包括题目展示、选项选择、答案验证和结果反馈。可以根据需要进一步扩展功能，如添加更多题目类型、实现用户认证或集成后端API等。