正文

HTML5在线答题模板源码：轻松打造互动式知识测试页面

/0 浏览量
0523

在互联网时代，知识测试是一种非常受欢迎的互动方式。通过HTML5技术，我们可以轻松地打造一个具有互动性的知识测试页面。下面，我将为大家介绍一个HTML5在线答题模板的源码，帮助你快速搭建自己的知识测试平台。

模板概述

这个在线答题模板采用HTML5、CSS3和JavaScript技术，具有以下特点：

  • 界面简洁大方，易于阅读。
  • 支持单选题、多选题和判断题。
  • 答题进度实时显示。
  • 支持用户提交答案并查看得分。
  • 支持自定义问题和选项。

模板结构

以下是一个简单的模板结构：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>在线答题系统</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="question">
      <span class="question-num">1.</span>
      <span class="question-content">这是一道单选题。</span>
    </div>
    <div class="options">
      <label><input type="radio" name="answer" value="A"> A. 选项A</label>
      <label><input type="radio" name="answer" value="B"> B. 选项B</label>
      <label><input type="radio" name="answer" value="C"> C. 选项C</label>
      <label><input type="radio" name="answer" value="D"> D. 选项D</label>
    </div>
    <!-- 更多问题和选项 -->
    <button id="next">下一题</button>
    <div class="score">得分：0分</div>
    <button id="submit">提交答案</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

样式设计

以下是一个简单的样式设计，你可以根据自己的需求进行修改：

body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
  padding: 20px;
}

.container {
  width: 600px;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.question-num {
  font-weight: bold;
}

.question-content {
  margin-left: 20px;
}

.options {
  margin-top: 10px;
}

.options label {
  display: block;
  margin-top: 5px;
}

.score {
  margin-top: 20px;
  font-weight: bold;
}

功能实现

以下是一个简单的JavaScript实现，你可以根据自己的需求进行修改：

var questions = [
  {
    content: "这是一道单选题。",
    options: ["A. 选项A", "B. 选项B", "C. 选项C", "D. 选项D"],
    answer: "A"
  },
  // 更多问题和选项
];

var questionIndex = 0;
var score = 0;

function loadQuestion() {
  var question = questions[questionIndex];
  document.querySelector(".question-content").textContent = question.content;
  var options = document.querySelectorAll(".options label");
  options.forEach(function (option, index) {
    option.textContent = question.options[index];
    option.querySelector("input").value = question.options[index].charAt(0);
  });
}

document.getElementById("next").addEventListener("click", function () {
  questionIndex++;
  if (questionIndex >= questions.length) {
    questionIndex = 0;
  }
  loadQuestion();
});

document.getElementById("submit").addEventListener("click", function () {
  var answers = document.querySelectorAll(".options input[type='radio']:checked");
  answers.forEach(function (answer) {
    if (answer.value === questions[questionIndex].answer) {
      score++;
    }
  });
  document.querySelector(".score").textContent = "得分：" + score + "分";
});

总结

通过以上源码，你可以轻松地打造一个互动式知识测试页面。你可以根据自己的需求修改样式、功能和问题内容。希望这个模板能够帮助你！

-- 展开阅读全文 --