pfqh28n73
/
a102201615
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ADD file via upload

Browse Source
main
pfqh28n73 2 months ago
parent 8e4d202fdf
commit 61eddd1ac2
1 changed files with 204 additions and 0 deletions
Show Stats Download Patch File Download Diff File

204
index.html
Unescape View File

@ -0,0 +1,204 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-scale, initial-scale=1.0">
<title>学生点名系统</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background: linear-gradient(to bottom right, #e0f7fa, #fce4ec); /* 柔和的渐变背景色 */
color: #333; /* 调整文本颜色以增加可读性 */
display: flex; /* 使用 flexbox */
flex-direction: column; /* 垂直排列 */
align-items: center; /* 水平居中 */
}
#students, #calledList { margin-top: 20px; }
#result { font-weight: bold; margin-top: 10px; }
.called-student { color: rgb(254, 2, 2); }
.btn {
padding: 10px 15px;
margin: 10px 0;
border: none;
border-radius: 5px;
background-color: #ffab40; /* 按钮背景颜色 */
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
font-family: "kaiti";
font-size: 35px;
}
.btn:hover {
background-color: #ff9800; /* 悬停时的按钮背景颜色 */
}
@keyframes gradient-animation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
h1 {
text-align: center;
font-weight: bolder;
font-size: 80px;
background: linear-gradient(45deg, #ff6b6b, #f7c24a);
background-size: 400% 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradient-animation 3s ease infinite;
background-clip: text; /* 标准属性 */
color: transparent; /* 标准属性 */
font-family: "kaiti";
}
.file-upload-container {
display: flex; /* 使用 flexbox */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
flex-direction: column; /* 垂直排列 */
margin: 20px 0; /* 添加间距 */
}
</style>
</head>
<body>
<h1>学生点名系统</h1>
<input type="file" id="fileInput" class="btn"/>
<button id="uploadBtn" class="btn">上传学生名单</button>
<div id="students"></div>
<button id="rollcallBtn" style="display: none;" class="btn">随机点名</button>
<button id="resetBtn" style="display: none;" class="btn">重置点名状态</button>
<button id="lotteryBtn" style="display: none;" class="btn">幸运抽奖</button>
<div id="result"></div>
<div id="calledList"></div>
<!-- 积分操作按钮 -->
<div id="scoreActions" style="display: none;">
<button id="arriveBtn" class="btn">抵达教室</button>
<button id="repeatCorrectBtn" class="btn">重复问题</button>
<button id="repeatWrongBtn" class="btn">重复错误</button>
<button id="accurateAnswerBtn" class="btn">准确回答</button>
</div>
<script>
let allStudents = []; // 存储所有学生
let calledStudents = []; // 存储已点名的学生 ID
let currentStudentId = null; // 当前被点名学生的 ID
document.getElementById('uploadBtn').onclick = async () => {
const fileInput = document.getElementById('fileInput');
const formData = new FormData();
formData.append('file', fileInput.files[0]);
const response = await fetch('http://localhost:3000/upload', {
method: 'POST',
body: formData,
});
const result = await response.json();
if (response.ok) {
allStudents = result.students;
calledStudents = [];
document.getElementById('rollcallBtn').style.display = 'block';
document.getElementById('resetBtn').style.display = 'block';
document.getElementById('lotteryBtn').style.display = 'block';
document.getElementById('calledList').innerHTML = ''; // 清空已点名列表
document.getElementById('scoreActions').style.display = 'none'; // 隐藏积分操作
} else {
alert(result.message);
}
};
document.getElementById('rollcallBtn').onclick = async () => {
if (calledStudents.length === allStudents.length) {
alert("所有学生都已被点名，请重置点名状态！");
return;
}
const response = await fetch('http://localhost:3000/rollcall');
const student = await response.json();
if (response.ok) {
currentStudentId = student.id;
document.getElementById('result').innerText = `被点到的学生: ${student.id} - ${student.name}`;
calledStudents.push(student.id);
const calledList = document.getElementById('calledList');
calledList.innerHTML += `<div class="called-student">${student.id} - ${student.name}</div>`;
document.getElementById('scoreActions').style.display = 'block'; // 显示积分操作按钮
} else {
alert(student.message);
}
};
document.getElementById('resetBtn').onclick = () => {
calledStudents = []; // 重置已点名数组
currentStudentId = null; // 清空当前点名学生 ID
document.getElementById('result').innerText = '';
document.getElementById('calledList').innerHTML = ''; // 清空已点名列表
document.getElementById('scoreActions').style.display = 'none'; // 隐藏积分操作
alert("已重置点名状态！");
};
// 积分操作
document.getElementById('arriveBtn').onclick = async () => {
await updateScore({ isInClass: true });
};
document.getElementById('repeatCorrectBtn').onclick = async () => {
await updateScore({ isQuestionCorrect: true });
};
document.getElementById('repeatWrongBtn').onclick = async () => {
await updateScore({ isQuestionCorrect: false });
};
document.getElementById('accurateAnswerBtn').onclick = async () => {
const score = prompt("请输入分数（0.5 - 3）:");
if (score !== null && !isNaN(score)) {
await updateScore({ isAnswerCorrect: true, score: parseFloat(score) });
}
};
document.getElementById('lotteryBtn').onclick = async () => {
const response = await fetch('http://localhost:3000/lottery', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ id: currentStudentId })
});
const result = await response.json();
if (response.ok) {
alert(`幸运抽奖结果: ${result.message}`);
} else {
alert(result.message);
}
};
async function updateScore(scoreData) {
const response = await fetch('http://localhost:3000/update-score', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
id: currentStudentId,
...scoreData
})
});
const result = await response.json();
if (response.ok) {
alert(`积分已更新: ${result.score}`);
} else {
alert(result.message);
}
}
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save