[Safety Production Month] 2023 National Safety Production Month Theme Knowledge Contest, a simple answering applet based on HTML, CSS and JavaScript. It mainly includes the following functions:
1. Topic display: display the topic, options and countdown on the page.
2. Answer interaction: the user can choose an answer, and the system will automatically judge whether it is correct or not and pop up a corresponding message box after the user answers.
3. Random questions: different questions can be randomly generated according to the selected set of questions, so as to avoid the memory of the user's answers.
4. Final score: After all the time and answers are submitted, the system will automatically calculate the score and display it.
The following is the code implementation:
HTML part:
<!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 part:
* {
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 part:
// 定义题目列表和答案
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();The above code implements a simple answering applet, which realizes basic functions such as random question, answer verification, score calculation, and countdown. But it should be noted that this is only the most basic implementation, and there are still many places that can be optimized and expanded.
Safety production knowledge quiz
Safety Production Month Knowledge Contest——How much do you know about the new safety law? The theme of the online competition "How much do you know about the new safety law?"