【安全生产月】2023年全国安全生产月主题知识竞赛，基于 HTML、CSS 和 JavaScript 实现的简单答题小程序。主要包括以下功能：
1. 题目展示：在页面上展示题目、选项和倒计时。
2. 答案交互：用户可以选择答案，系统在用户回答后自动判断是否正确并弹出相应的消息框。
3. 随机出题：可以根据所选套题随机生成不同的题目，避免用户答案的记忆。
4. 最后得分：在时间和答案全部提交后，系统会自动计算得分并展示。
以下是代码实现：
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>答题小程序</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>答题小程序</h1>
<span class="score">得分：0</span>
</div>
<div class="question">
<span class="q-title">问题：</span>
<ul class="q-content"></ul>
</div>
<div class="options">
<ul>
<li><a href="#">A. </a><span class="option-content"></span></li>
<li><a href="#">B. </a><span class="option-content"></span></li>
<li><a href="#">C. </a><span class="option-content"></span></li>
<li><a href="#">D. </a><span class="option-content"></span></li>
</ul>
</div>
<div class="footer">
<span class="timer">00:00</span>
<button class="submit-btn">提交</button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>CSS部分：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
margin: 0 auto;
width: 80%;
height: 100vh;
display: flex;
flex-direction: column;
}
.header {
height: 10%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #0072c6;
color: #FFF;
font-size: 24px;
}
.score {
font-size: 20px;
}
.question {
margin-top: 20px;
height: 40%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.q-title {
font-size: 22px;
}
.q-content {
margin-top: 10px;
font-size: 20px;
}
.options {
height: 30%;
display: flex;
justify-content: center;
align-items: center;
}
.options ul {
list-style-type: none;
}
.options li {
display: flex;
align-items: center;
margin-top: 10px;
font-size: 20px;
}
.options li span {
margin-left: 10px;
}
.options li a {
color: #0072c6;
font-size: 26px;
}
.footer {
height: 20%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #0072c6;
color: #FFF;
font-size: 20px;
}
.timer {
font-size: 28px;
}
.submit-btn {
background-color: #FFF;
padding: 10px;
border-radius: 5px;
font-size: 20px;
cursor: pointer;
}JavaScript部分：
// 定义题目列表和答案
var questionList = [
{
question: '世界上最大洲是？',
options: ['亚洲', '非洲', '南美洲', '北美洲'],
answer: '亚洲'
},
{
question: '中国的国土面积排名世界第几？',
options: ['第一', '第二', '第三', '第四'],
answer: '第三'
},
{
question: 'JavaScript是哪种类型的编程语言？',
options: ['解释型', '编译型', '中间型', 'JAVA虚拟机型'],
answer: '解释型'
},
{
question: 'WWW的意思是？',
options: ['网站', '万维网', '网络', '无限制网络'],
answer: '万维网'
},
{
question: '当前全世界使用人数最多的操作系统是？',
options: ['Windows', 'Mac OS', 'Linux', 'Android'],
answer: 'Android'
}
];
var quizIndex = 0, score = 0, timer = null, time = 60;
// 生成问题和选项并绑定点击事件
function generateQuiz() {
var qTitle = document.querySelector('.q-title'),
qContent = document.querySelector('.q-content'),
optionContent = document.querySelectorAll('.option-content');
qTitle.innerHTML = `问题${quizIndex + 1}：`;
qContent.innerHTML = questionList[quizIndex].question;
optionContent.forEach((opt, idx) => {
opt.innerHTML = questionList[quizIndex].options[idx];
});
document.querySelectorAll('.options ul li').forEach((li) => {
li.addEventListener('click', (e) => {
checkAnswer(e.target);
});
});
}
// 校验答案是否正确
function checkAnswer(ele) {
if (ele.innerHTML === questionList[quizIndex].answer) {
alert('恭喜你，回答正确！');
score += 10;
document.querySelector('.score').innerHTML = `得分：${score}`;
} else {
alert('很遗憾，回答错误！');
}
if (quizIndex < questionList.length - 1) {
quizIndex++;
generateQuiz();
} else {
endQuiz();
}
}
// 随机生成题目并打乱选项顺序
function randomQuestions(arr) {
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
return arr;
}
// 计时器
function countDown() {
timer = setInterval(() => {
if (time >= 0) {
document.querySelector('.timer').innerHTML = `${time < 10 ? '0' + time : time}:00`;
time--;
} else {
endQuiz();
}
}, 1000);
}
// 结束答题
function endQuiz() {
clearInterval(timer);
document.querySelector('.timer').innerHTML = '00:00';
alert(`答题结束，你的得分是${score}分！`);
}
// 按钮点击事件
document.querySelector('.submit-btn').addEventListener('click', () => {
if (quizIndex === 0) {
randomQuestions(questionList);
countDown();
}
checkAnswer(document.querySelector('.options ul li a'));
});
// 生成问题
generateQuiz();以上代码实现了一个简单的答题小程序，实现了题目随机、答案校验、得分计算、倒计时等基本功能。但是需要注意的是，这只是一个最基础的实现，还有很多可以进行优化和扩展的地方。
安全生产知识竞答
安全生产月知识竞赛——新安法知多少，“新安法知多少”网络竞赛活动主题，遵守安全生产法，当好第一责任人。