|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>点名详细页面</title>
|
|
|
<link rel="stylesheet" href="style_3.css">
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<div class="background-container">
|
|
|
<div class="firstcontainer">
|
|
|
<button class="getpeople" onclick="startRollCall()">点击开始点名</button>
|
|
|
<label for="displayName" class="text1">姓名</label>
|
|
|
|
|
|
<input type="text" id="displayName" class="mytext1">
|
|
|
|
|
|
<label for="displayStudentID" class="text2">学号</label>
|
|
|
<input type="text" id="displayStudentID" class="mytext2">
|
|
|
<text3 class="text3">出勤</text3>
|
|
|
<svg class="signal1" xmlns="http://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54"
|
|
|
fill="none" onclick="addCredit()">
|
|
|
<path
|
|
|
d="M27 5.0625C22.6612 5.0625 18.4198 6.34911 14.8122 8.75964C11.2046 11.1702 8.3928 14.5963 6.7324 18.6049C5.07201 22.6134 4.63757 27.0243 5.48403 31.2798C6.3305 35.5353 8.41984 39.4441 11.4879 42.5122C14.5559 45.5802 18.4648 47.6695 22.7202 48.516C26.9757 49.3624 31.3866 48.928 35.3951 47.2676C39.4037 45.6072 42.8299 42.7954 45.2404 39.1878C47.6509 35.5802 48.9375 31.3388 48.9375 27C48.9314 21.1837 46.6181 15.6074 42.5054 11.4946C38.3926 7.38188 32.8163 5.06864 27 5.0625ZM27 45.5625C23.3287 45.5625 19.7398 44.4738 16.6872 42.4342C13.6347 40.3945 11.2554 37.4954 9.8505 34.1036C8.44554 30.7117 8.07794 26.9794 8.79418 23.3786C9.51042 19.7779 11.2783 16.4703 13.8743 13.8743C16.4704 11.2783 19.7779 9.51041 23.3786 8.79417C26.9794 8.07793 30.7117 8.44553 34.1036 9.85049C37.4954 11.2554 40.3945 13.6346 42.4342 16.6872C44.4738 19.7398 45.5625 23.3287 45.5625 27C45.5569 31.9214 43.5994 36.6396 40.1195 40.1195C36.6396 43.5994 31.9214 45.5569 27 45.5625ZM38.8125 27C38.8125 29.3363 38.1197 31.6201 36.8217 33.5627C35.5238 35.5052 33.6789 37.0193 31.5205 37.9133C29.362 38.8074 26.9869 39.0413 24.6955 38.5855C22.4041 38.1297 20.2993 37.0047 18.6473 35.3527C16.9953 33.7007 15.8703 31.5959 15.4145 29.3045C14.9587 27.0131 15.1926 24.638 16.0867 22.4795C16.9807 20.3211 18.4948 18.4762 20.4373 17.1783C22.3799 15.8803 24.6637 15.1875 27 15.1875C30.1319 15.1908 33.1345 16.4365 35.349 18.651C37.5636 20.8655 38.8092 23.8682 38.8125 27Z"
|
|
|
fill="#DCCFFF" />
|
|
|
</svg>
|
|
|
|
|
|
<text5 class="text5" class="mytext3">答题积分</text5>
|
|
|
<input type="text" id="add_credit" class="mytext3" title="Enter the amount of credit to add">
|
|
|
<text6 class="text6">确认</text6>
|
|
|
<button id="add_credit_button" class="signal3">Add Credit</button>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
<script>
|
|
|
|
|
|
document.getElementById("add_credit_button").addEventListener("click", plusCredit);
|
|
|
|
|
|
function plusCredit() {
|
|
|
var creditToAdd = document.getElementById("add_credit").value;
|
|
|
const displayName = document.getElementById('displayName').value;
|
|
|
const displayStudentID = document.getElementById('displayStudentID').value;
|
|
|
|
|
|
|
|
|
// 发送 POST 请求到后端 API
|
|
|
fetch('http://127.0.0.1:3000/api/credit', {
|
|
|
method: 'POST',
|
|
|
headers: {
|
|
|
'Content-Type': 'application/json'
|
|
|
},
|
|
|
body: JSON.stringify({
|
|
|
name: displayName,
|
|
|
studentID: displayStudentID,
|
|
|
creditToAdd: creditToAdd
|
|
|
})
|
|
|
})
|
|
|
.then(response => response.json())
|
|
|
.then(data => {
|
|
|
console.log(data.message);
|
|
|
})
|
|
|
.catch(error => {
|
|
|
console.error('Error:', error);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
|
|
|
function addCredit() {
|
|
|
// 获取学生姓名和学号
|
|
|
const displayName = document.getElementById('displayName').value;
|
|
|
const displayStudentID = document.getElementById('displayStudentID').value;
|
|
|
|
|
|
// 发送请求给后端，更新学生的credit
|
|
|
fetch('http://127.0.0.1:3000/api/add-credit', {
|
|
|
method: 'POST',
|
|
|
headers: {
|
|
|
'Content-Type': 'application/json'
|
|
|
},
|
|
|
body: JSON.stringify({
|
|
|
name: displayName,
|
|
|
studentID: displayStudentID
|
|
|
})
|
|
|
})
|
|
|
.then(response => response.json())
|
|
|
.then(data => {
|
|
|
console.log(data);
|
|
|
// 更新成功后的操作
|
|
|
})
|
|
|
.catch(error => {
|
|
|
console.error(error);
|
|
|
// 更新失败后的操作
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function startRollCall() {
|
|
|
fetch('http://127.0.0.1:3000/api/get-random-student')
|
|
|
.then(response => {
|
|
|
console.log('Response:', response);
|
|
|
if (!response.ok) {
|
|
|
throw new Error('Network response was not ok');
|
|
|
}
|
|
|
return response.json();
|
|
|
})
|
|
|
.then(data => {
|
|
|
document.getElementById("displayName").value = data.name; // 假设数据中有name字段
|
|
|
document.getElementById("displayStudentID").value = data.studentID; // 假设数据中有studentID字段
|
|
|
})
|
|
|
.catch(error => {
|
|
|
console.error('There was a problem with the fetch operation:', error);
|
|
|
// 可以在这里处理错误，例如显示错误消息给用户
|
|
|
alert('信息导入失败，请重试。错误信息：' + error.message);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
</body>
|
|
|
|
|
|
</html> |
