js实现答题功能
实现答题功能的基本思路
答题功能通常包括题目展示、选项选择、答案验证和结果统计等模块。以下是使用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;
}
}完整流程控制
控制题目切换和结果显示：
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();
}
});进阶功能建议
- 添加计时功能
- 实现题目随机排序
- 添加多种题型支持
- 本地存储答题记录
- 动画效果增强用户体验
注意事项
- 确保选项选择逻辑清晰
- 处理边界情况（如最后一题）
- 添加适当的用户反馈（正确/错误提示）
- 考虑移动端触摸事件支持
以上代码提供了答题功能的基本实现框架，可根据具体需求进行扩展和优化。
