在互联网时代,知识测试是一种非常受欢迎的互动方式。通过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 + "分";
});
总结
通过以上源码,你可以轻松地打造一个互动式知识测试页面。你可以根据自己的需求修改样式、功能和问题内容。希望这个模板能够帮助你!
