打造专属你的消防安全答题小程序：答题页篇

前端

2023-11-09 07:39:13

答题页设计

答题页是小程序的主要功能页面，也是用户参与知识竞答的主要界面。因此，在设计答题页时，需要考虑以下几点：

界面简洁美观： 答题页的界面应简洁美观，以避免分散用户的注意力。
功能布局合理： 答题页的功能布局应合理，以方便用户操作。
内容清晰易懂： 答题页的内容应清晰易懂，以方便用户理解。

答题页功能实现

答题页的功能主要包括：

显示题目： 答题页应显示当前的题目。
显示选项： 答题页应显示当前题目的选项。
用户选择答案： 用户可以从选项中选择答案。
提交答案： 用户可以提交答案。
显示结果： 答题页应显示用户提交答案后的结果。

代码示例

以下是一段实现答题页功能的代码示例：

// 显示题目
const question = document.getElementById('question');
question.innerHTML = '1 + 1 = ?';

// 显示选项
const options = document.querySelectorAll('.option');
options[0].innerHTML = '2';
options[1].innerHTML = '3';
options[2].innerHTML = '4';

// 用户选择答案
let answer;
options.forEach(option => {
  option.addEventListener('click', () => {
    answer = option.innerHTML;
  });
});

// 提交答案
const submitButton = document.getElementById('submit-button');
submitButton.addEventListener('click', () => {
  // 检查答案是否正确
  if (answer === '2') {
    // 显示正确结果
    const result = document.getElementById('result');
    result.innerHTML = '恭喜你，回答正确！';
  } else {
    // 显示错误结果
    const result = document.getElementById('result');
    result.innerHTML = '抱歉，回答错误！';
  }
});