pg7s85mrc
/
select_random
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: pg7s85mrc:main
Branches Tags
pg7s85mrc:前端
pg7s85mrc:main
pg7s85mrc:后端
..
compare: pg7s85mrc:前端
Branches Tags
pg7s85mrc:前端
pg7s85mrc:main
pg7s85mrc:后端

1 Commits
main ... 前端

Author SHA1 Message Date
luoyonghuang 11fcadb21f Delete '111'
2 months ago
17 changed files with 891 additions and 1516 deletions
Show Stats

3
README.md
Unescape View File

@ -1,3 +1,2 @@
###html属于前端部分 # select_random
###js属于后端部分

285
answer.html
Unescape View File

@ -1,199 +1,86 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>回答问题</title> <title>回答问题</title>
<style> <style>
body { body {
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
height: 100vh; height: 100vh;
margin: 0; margin: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: linear-gradient(135deg, #6e45e2, #88d3ce); background: linear-gradient(135deg, #6e45e2, #88d3ce);
color: white; color: white;
} }
.container { .container {
text-align: center; text-align: center;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
padding: 30px; padding: 30px;
border-radius: 15px; border-radius: 15px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
} }
#question { #question {
font-size: 2em; font-size: 2em;
margin-bottom: 20px; margin-bottom: 20px;
} }
button { button {
padding: 12px 30px; padding: 12px 30px;
font-size: 1.1em; font-size: 1.1em;
border: none; border: none;
border-radius: 50px; border-radius: 50px;
background-color: #ff5722; background-color: #ff5722;
color: white; color: white;
cursor: pointer; cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease, box-shadow 0.3s ease; transition: background-color 0.3s ease, box-shadow 0.3s ease;
margin: 10px; margin: 10px;
} }
button:hover { button:hover {
background-color: #ff3d00; background-color: #ff3d00;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div id="question">请重复问题，选择正确或错误：</div> <div id="question">你需要回答问题 结果是：</div>
<button id="repeatCorrectButton">准确重复</button> <button id="correctButton">正确</button>
<button id="repeatWrongButton">未准确重复</button> <button id="wrongButton">错误</button>
<button class="back-button" onclick="window.location.href='select.html'">返回点名页面</button>
<div id="questionResult"></div> <!-- 显示重复问题的结果 --> <div id="result"></div>
</div>
<div id="answerContainer" style="display:none;">
<p>现在回答问题：</p> <script>
<button id="correctButton">回答正确</button> const urlParams = new URLSearchParams(window.location.search);
<button id="partiallyCorrectButton">部分正确</button> const name = urlParams.get('name');
<button id="wrongButton">回答错误</button> const correctButton = document.querySelector('#correctButton');
</div> const wrongButton = document.querySelector('#wrongButton');
const resultDisplay = document.querySelector('#result');
<button class="back-button" onclick="window.location.href='select.html'">返回点名页面</button>
<div id="result"></div> // 初始化积分
<div id="studentInfo"></div> <!-- 显示学生信息 --> let userPoints = parseInt(localStorage.getItem(name));
</div>
// 正确答案处理
<script> correctButton.addEventListener('click', () => {
async function updateScore(student_id, points) { userPoints += 10; // 正确回答加 10 分
try { localStorage.setItem(name, userPoints); // 保存更新后的积分
const response = await fetch('/api/update-score', { resultDisplay.textContent = `正确！${name} 的当前积分: ${userPoints}`;
method: 'POST',
headers: { });
'Content-Type': 'application/json',
}, // 错误答案处理
body: JSON.stringify({ student_id, points }), wrongButton.addEventListener('click', () => {
}); userPoints -= 5;
localStorage.setItem(name, userPoints); // 保存更新后的积分
if (!response.ok) { resultDisplay.textContent = `错误！${name} 的当前积分: ${userPoints}`;
throw new Error('网络响应不正常');
} });
const data = await response.text(); // 使用 text() 解析纯数字响应 </script>
console.log('更新后的分数:', data); // data 是字符串形式的分数
return data; // 返回更新后的分数字符串 </body>
} catch (error) { </html>
console.error('分数更新失败:', error);
return null;
}
}
const urlParams = new URLSearchParams(window.location.search);
const student_name = urlParams.get('student_name');
const student_id = urlParams.get('student_id');
const repeatCorrectButton = document.querySelector('#repeatCorrectButton');
const repeatWrongButton = document.querySelector('#repeatWrongButton');
const questionResultDisplay = document.querySelector('#questionResult');
const correctButton = document.querySelector('#correctButton');
const partiallyCorrectButton = document.querySelector('#partiallyCorrectButton');
const wrongButton = document.querySelector('#wrongButton');
const resultDisplay = document.querySelector('#result');
const answerContainer = document.querySelector('#answerContainer');
const studentInfoDisplay = document.querySelector('#studentInfo');
// 显示学生姓名和学号
studentInfoDisplay.textContent = `学生: ${student_name} 学号: ${student_id}`;
// 正确重复问题处理 +0.5
repeatCorrectButton.addEventListener('click', () => {
updateScore(student_id, 0.5)
.then(newscore => {
if (newscore !== null) {
questionResultDisplay.textContent = `重复正确！${student_id} 的当前积分: ${newscore}`; // 直接使用字符串
answerContainer.style.display = 'block'; // 显示回答问题部分
} else {
console.error('更新分数失败');
questionResultDisplay.textContent = `更新分数失败，请重试。`;
}
})
.catch(error => {
console.error('请求失败:', error);
questionResultDisplay.textContent = `更新分数失败，请重试。`;
});
});
// 未准确重复问题处理 -1
repeatWrongButton.addEventListener('click', () => {
updateScore(student_id, -1)
.then(newscore => {
if (newscore !== null) {
questionResultDisplay.textContent = `重复错误！${student_id} 的当前积分: ${newscore}`; // 直接使用字符串
answerContainer.style.display = 'block'; // 显示回答问题部分
} else {
console.error('更新分数失败');
questionResultDisplay.textContent = `更新分数失败，请重试。`;
}
})
.catch(error => {
console.error('请求失败:', error);
questionResultDisplay.textContent = `更新分数失败，请重试。`;
});
});
// 回答问题的处理
correctButton.addEventListener('click', () => {
updateScore(student_id, 3)
.then(newscore => {
if (newscore !== null) {
resultDisplay.textContent = `回答完全正确！${student_id} 的当前积分: ${newscore}`; // 直接使用字符串
} else {
console.error('更新分数失败');
resultDisplay.textContent = `更新分数失败，请重试。`;
}
})
.catch(error => {
console.error('请求失败:', error);
resultDisplay.textContent = `更新分数失败，请重试。`;
});
});
partiallyCorrectButton.addEventListener('click', () => {
updateScore(student_id, 1.5)
.then(newscore => {
if (newscore !== null) {
resultDisplay.textContent = `回答部分正确！${student_id} 的当前积分: ${newscore}`; // 直接使用字符串
} else {
console.error('更新分数失败');
resultDisplay.textContent = `更新分数失败，请重试。`;
}
})
.catch(error => {
console.error('请求失败:', error);
resultDisplay.textContent = `更新分数失败，请重试。`;
});
});
wrongButton.addEventListener('click', () => {
updateScore(student_id, 0.5)
.then(newscore => {
if (newscore !== null) {
resultDisplay.textContent = `回答基本正确！${student_id} 的当前积分: ${newscore}`; // 直接使用字符串
} else {
console.error('更新分数失败');
resultDisplay.textContent = `更新分数失败，请重试。`;
}
})
.catch(error => {
console.error('请求失败:', error);
resultDisplay.textContent = `更新分数失败，请重试。`;
});
});
</script>
</body>
</html>

158
choice.html
Unescape View File

@ -1,78 +1,80 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择页面</title> <title>选择页面</title>
<style> <style>
body { body {
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
height: 100vh; height: 100vh;
margin: 0; margin: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: linear-gradient(135deg, #6e45e2, #88d3ce); background: linear-gradient(135deg, #6e45e2, #88d3ce);
color: white; color: white;
} }
.container { .container {
text-align: center; text-align: center;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
padding: 30px; padding: 30px;
border-radius: 15px; border-radius: 15px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
} }
#nameDisplay { #nameDisplay {
font-size: 2.5em; font-size: 2.5em;
margin-bottom: 30px; margin-bottom: 30px;
} }
button { button {
padding: 12px 30px; padding: 12px 30px;
font-size: 1.1em; font-size: 1.1em;
border: none; border: none;
border-radius: 50px; border-radius: 50px;
background-color: #ff5722; background-color: #ff5722;
color: white; color: white;
cursor: pointer; cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease, box-shadow 0.3s ease; transition: background-color 0.3s ease, box-shadow 0.3s ease;
margin: 10px; margin: 10px;
} }
button:hover { button:hover {
background-color: #ff3d00; background-color: #ff3d00;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div id="nameDisplay">欢迎, </div> <div id="nameDisplay">欢迎, </div>
<button id="answerButton">老实回答问题</button> <button id="answerButton">老实回答问题</button>
<button id="lotteryButton">消耗积分抽奖</button> <button id="lotteryButton">消耗积分抽奖</button>
</div> </div>
<script> <script>
// 获取URL中的参数（名字） // 获取URL中的参数（名字）
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
const name = urlParams.get('student_name'); const name = urlParams.get('name');
const id = urlParams.get('student_id');
// 显示被抽中的名字
const nameDisplay = document.querySelector('#nameDisplay');
// 显示被抽中的名字 nameDisplay.textContent = ` ${name} 你的选择是：`;
const nameDisplay = document.querySelector('#nameDisplay'); // 初始化用户的积分
nameDisplay.textContent = ` ${name} 你的选择是：`; let userPoints = localStorage.getItem(name) ? parseInt(localStorage.getItem(name)) : 0;
if (!localStorage.getItem(name)) {
// 回答问题功能，跳转到回答问题页面 localStorage.setItem(name, 0); // 如果没有积分记录，初始化为 0
document.querySelector('#answerButton').addEventListener('click', () => { }
window.location.href = `answer.html?student_name=${encodeURIComponent(name)}&student_id=${encodeURIComponent(id)}`; // 回答问题功能，跳转到回答问题页面
}); document.querySelector('#answerButton').addEventListener('click', () => {
window.location.href = `answer.html?name=${encodeURIComponent(name)}`;
// 抽奖功能，跳转到抽奖页面 });
document.querySelector('#lotteryButton').addEventListener('click', () => {
window.location.href = `lottery.html?student_name=${encodeURIComponent(name)}&student_id=${encodeURIComponent(id)}`; // 抽奖功能，跳转到抽奖页面
}); document.querySelector('#lotteryButton').addEventListener('click', () => {
</script> window.location.href = `lottery.html?name=${encodeURIComponent(name)}`;
});
</body> </script>
</html>
</body>
</html>

65
classManager.js
Unescape View File

@ -1,65 +0,0 @@
const fs = require('fs');
const path = require('path');
const xlsx = require('xlsx');
const pool = require('../db');
const classManager = {
addClass: async (req, res) => {
// 创建students表的SQL语句
const createTableQuery = `
CREATE TABLE IF NOT EXISTS students (
student_id INT AUTO_INCREMENT PRIMARY KEY,
student_name VARCHAR(255) NOT NULL,
score DECIMAL(5, 2),
call_count INT DEFAULT 0
);
`;
try {
// 先创建表
await pool.query(createTableQuery);
const filePath = req.file.path;
// 读取并解析Excel文件
const workbook = xlsx.readFile(filePath);
const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];
const students = xlsx.utils.sheet_to_json(worksheet);
// 定义所需的字段
const requiredFields = ['student_id','student_name'];
let hasError = false;
students.forEach(student => {
// 数据验证
const missingFields = requiredFields.filter(field =>!(field in student));
if (missingFields.length > 0) {
console.error(`Student data is missing fields: ${missingFields.join(', ')}`);
hasError = true;
return;
}
// 将学生数据插入数据库
const query = 'INSERT INTO students (student_id, student_name, score, call_count) VALUES (?,?, 0, 0)';
pool.query(query, [student.student_id, student.student_name], (error) => {
if (error) {
console.error(`Error inserting student: ${student.name}`, error);
hasError = true;
}
});
});
if (hasError) {
res.status(500).json({ message: 'Error adding class. Some students were not added successfully.' });
} else {
res.status(200).json({ message: 'Class added successfully!' });
}
} catch (err) {
console.error('Error creating students table:', err);
res.status(500).json({ message: 'Error creating table during class addition.' });
}
}
};
module.exports = classManager;

24
db.js
Unescape View File

@ -1,24 +0,0 @@
const mysql = require('mysql2/promise');
// 创建连接池
const pool = mysql.createPool({
host: 'localhost', // 数据库地址
user: 'root', // 数据库用户名
password: '123456', // 数据库密码
database: 'class_k' ,// 使用的数据库
waitForConnections: true,
connectionLimit: 10,
queueLimit: 0
});
// 测试数据库连接
pool.getConnection((err, connection) => {
if (err) {
console.error('Error connecting to the database:', err);
} else {
console.log('Database connected successfully!');
connection.release(); // 释放连接
}
});
module.exports = pool;

22
delete-table.js
Unescape View File

@ -1,22 +0,0 @@
const pool = require('../db');
async function deleteTable(req, res) {
const { tableName } = req.body; // 从请求体中获取表名
let connection;
try {
connection = await pool.getConnection();
await connection.query(`DROP TABLE IF EXISTS ??`, [tableName]); // 删除表
connection.release();
res.json({ message: `表 ${tableName} 已被成功删除` });
} catch (error) {
console.error('删除表失败:', error);
res.status(500).json({ error: '删除表失败' });
} finally {
if (connection) {
connection.release();
}
}
}
module.exports = { deleteTable };

334
dianming.html
Unescape View File

@ -1,167 +1,167 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>课堂点名</title> <title>课堂点名</title>
<style> <style>
body { body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #89f7fe, #66a6ff); background: linear-gradient(135deg, #89f7fe, #66a6ff);
height: 100vh; height: 100vh;
margin: 0; margin: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: #333; color: #333;
} }
.container { .container {
text-align: center; text-align: center;
background: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.85);
padding: 40px; padding: 40px;
border-radius: 20px; border-radius: 20px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(8.5px); backdrop-filter: blur(8.5px);
-webkit-backdrop-filter: blur(8.5px); -webkit-backdrop-filter: blur(8.5px);
border: 1px solid rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.18);
} }
h1 { h1 {
margin-bottom: 30px; margin-bottom: 30px;
font-size: 2em; font-size: 2em;
color: #ff5722; color: #ff5722;
} }
#studentNameDisplay { #studentNameDisplay {
font-size: 1.8em; font-size: 1.8em;
margin-bottom: 30px; margin-bottom: 30px;
min-height: 50px; min-height: 50px;
} }
.button-group { .button-group {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 20px; gap: 20px;
flex-wrap: wrap; flex-wrap: wrap;
} }
button { button {
padding: 12px 25px; padding: 12px 25px;
font-size: 1em; font-size: 1em;
border: none; border: none;
border-radius: 30px; border-radius: 30px;
background-color: #4CAF50; background-color: #4CAF50;
color: white; color: white;
cursor: pointer; cursor: pointer;
transition: transform 0.2s, background-color 0.3s; transition: transform 0.2s, background-color 0.3s;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
} }
button:hover { button:hover {
background-color: #45a049; background-color: #45a049;
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
} }
#absentButton { #absentButton {
background-color: #f44336; background-color: #f44336;
} }
#absentButton:hover { #absentButton:hover {
background-color: #e53935; background-color: #e53935;
} }
.back-button { .back-button {
margin-top: 30px; margin-top: 30px;
background-color: #2196F3; background-color: #2196F3;
} }
.back-button:hover { .back-button:hover {
background-color: #1e88e5; background-color: #1e88e5;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>课堂点名</h1> <h1>课堂点名</h1>
<div id="studentNameDisplay">请点击“随机点名”按钮</div> <div id="studentNameDisplay">请点击“随机点名”按钮</div>
<div class="button-group"> <div class="button-group">
<button id="startAttendance">随机点名</button> <button id="startAttendance">随机点名</button>
<button id="presentButton" style="display:none;">到</button> <button id="presentButton" style="display:none;">到</button>
<button id="absentButton" style="display:none;">没到</button> <button id="absentButton" style="display:none;">没到</button>
</div> </div>
<button class="back-button" onclick="window.location.href='index.html'">返回主页面</button> <button class="back-button" onclick="window.location.href='index.html'">返回主页面</button>
</div> </div>
<script> <script>
const studentNameDisplay = document.getElementById('studentNameDisplay'); const studentNameDisplay = document.getElementById('studentNameDisplay');
const startAttendanceButton = document.getElementById('startAttendance'); const startAttendanceButton = document.getElementById('startAttendance');
const presentButton = document.getElementById('presentButton'); const presentButton = document.getElementById('presentButton');
const absentButton = document.getElementById('absentButton'); const absentButton = document.getElementById('absentButton');
let currentStudent = null; let currentStudent = null;
// 随机点名按钮点击事件 // 随机点名按钮点击事件
startAttendanceButton.addEventListener('click', async () => { startAttendanceButton.addEventListener('click', async () => {
try { try {
// 向后端请求随机学生 // 向后端请求随机学生
const response = await fetch('http://localhost:3000/api/random-call'); const response = await fetch('http://localhost:3000/api/random-call');
const data = await response.json(); const data = await response.json();
if (data.student_id && data.student_name) { if (data.student) {
currentStudent = data; currentStudent = data.student;
studentNameDisplay.textContent = `当前学生: ${currentStudent.student_name}`; studentNameDisplay.textContent = `当前学生: ${currentStudent.student_name}`;
presentButton.style.display = 'inline-block'; presentButton.style.display = 'inline-block';
absentButton.style.display = 'inline-block'; absentButton.style.display = 'inline-block';
startAttendanceButton.disabled = true; startAttendanceButton.disabled = true;
} else { } else {
alert('无法获取学生数据'); alert('无法获取学生数据');
} }
} catch (error) { } catch (error) {
console.error('获取学生失败', error); console.error('获取学生失败', error);
alert('获取学生失败，请重试'); alert('获取学生失败，请重试');
} }
}); });
// 到场按钮点击事件 // 到场按钮点击事件
presentButton.addEventListener('click', async () => { presentButton.addEventListener('click', async () => {
if (currentStudent) { if (currentStudent) {
await updatePoints(currentStudent.student_id, 0.5); // 到场加0.5分 await updatePoints(currentStudent.student_id, 1); // 到场加1分
alert(`${currentStudent.student_name} 已到，加0.5分`); alert(`${currentStudent.student_name} 已到，加1分`);
resetAttendance(); resetAttendance();
} }
}); });
// 没到按钮点击事件 // 没到按钮点击事件
absentButton.addEventListener('click', async () => { absentButton.addEventListener('click', async () => {
if (currentStudent) { if (currentStudent) {
await updatePoints(currentStudent.student_id, -1); // 未到减1分 await updatePoints(currentStudent.student_id, -1); // 未到减2分
alert(`${currentStudent.student_name} 未到，减1分`); alert(`${currentStudent.student_name} 未到，减1分`);
resetAttendance(); resetAttendance();
} }
}); });
// 更新分数的函数 // 更新分数的函数
async function updatePoints(studentId, points) { async function updatePoints(studentId, points) {
try { try {
// 发送请求更新分数 // 发送请求更新分数
const response = await fetch('http://localhost:3000/api/update-score', { const response = await fetch('http://localhost:3000/api/update-score', {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
body: JSON.stringify({ student_id: studentId, points }), body: JSON.stringify({ student_id: studentId, points }),
}); });
if (!response.ok) { if (!response.ok) {
throw new Error('更新分数失败'); throw new Error('更新分数失败');
} }
} catch (error) { } catch (error) {
console.error('更新分数失败', error); console.error('更新分数失败', error);
alert('更新分数失败，请重试'); alert('更新分数失败，请重试');
} }
} }
// 重置点名的函数 // 重置点名的函数
function resetAttendance() { function resetAttendance() {
studentNameDisplay.textContent = '请点击“随机点名”按钮'; studentNameDisplay.textContent = '请点击“随机点名”按钮';
presentButton.style.display = 'none'; presentButton.style.display = 'none';
absentButton.style.display = 'none'; absentButton.style.display = 'none';
startAttendanceButton.disabled = false; startAttendanceButton.disabled = false;
} }
</script> </script>
</body> </body>
</html> </html>

179
index.html
Unescape View File

@ -1,107 +1,72 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>课堂管理系统</title> <title>课堂管理系统</title>
<style> <style>
body { body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #6e8efb, #a777e3); background: linear-gradient(135deg, #6e8efb, #a777e3);
height: 100vh; height: 100vh;
margin: 0; margin: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: white; color: white;
} }
.container { .container {
text-align: center; text-align: center;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
padding: 40px; padding: 40px;
border-radius: 20px; border-radius: 20px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(8.5px); backdrop-filter: blur(8.5px);
-webkit-backdrop-filter: blur(8.5px); -webkit-backdrop-filter: blur(8.5px);
border: 1px solid rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.18);
} }
h1 { h1 {
margin-bottom: 40px; margin-bottom: 40px;
font-size: 2.5em; font-size: 2.5em;
} }
.button-group { .button-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; gap: 20px;
} }
button { button {
padding: 15px 30px; padding: 15px 30px;
font-size: 1.2em; font-size: 1.2em;
border: none; border: none;
border-radius: 50px; border-radius: 50px;
background-color: #ff5722; background-color: #ff5722;
color: white; color: white;
cursor: pointer; cursor: pointer;
transition: transform 0.2s, background-color 0.3s; transition: transform 0.2s, background-color 0.3s;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
} }
button:hover { button:hover {
background-color: #ff3d00; background-color: #ff3d00;
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.button-group { .button-group {
flex-direction: column; flex-direction: column;
} }
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>课堂管理系统</h1> <h1>课堂管理系统</h1>
<div class="button-group"> <div class="button-group">
<button onclick="window.location.href='dianming.html'">课堂点名</button> <button onclick="window.location.href='dianming.html'">课堂点名</button>
<button onclick="window.location.href='select.html'">随机提问</button> <button onclick="window.location.href='select.html'">随机提问</button>
<button onclick="window.location.href='score_display.html'">积分显示</button> <button onclick="window.location.href='score_display.html'">积分显示</button>
<button onclick="document.getElementById('fileInput').click()">导入学生名单</button> </div>
<input type="file" id="fileInput" accept=".xlsx" style="display:none;" onchange="importStudents(event)"> </div>
</div>
</div> </body>
</html>
<script>
async function importStudents() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0]; // 获取选中的文件
if (!file) {
alert('请选择一个文件');
return;
}
const formData = new FormData();
formData.append('file', file); // 将文件添加到FormData中，键名为'file'
try {
const response = await fetch('/api/upload', { // 假设后端API的路径为/api/upload
method: 'POST',
body: formData
});
if (response.ok) {
const result = await response.json();
console.log('上传成功:', result);
alert('学生名单导入成功！');
} else {
console.error('上传失败:', response.statusText);
alert('导入失败，请重试。');
}
} catch (error) {
console.error('请求错误:', error);
alert('发生错误，请检查控制台了解详细信息。');
}
}
</script>
</body>
</html>

335
lottery.html
Unescape View File

@ -1,200 +1,135 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抽奖页面</title> <title>抽奖页面</title>
<style> <style>
body { body {
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
height: 100vh; height: 100vh;
margin: 0; margin: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: linear-gradient(135deg, #6e45e2, #88d3ce); background: linear-gradient(135deg, #6e45e2, #88d3ce);
color: white; color: white;
transition: background-color 0.5s ease; transition: background-color 0.5s ease;
} }
.container { .container {
text-align: center; text-align: center;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
padding: 30px; padding: 30px;
border-radius: 15px; border-radius: 15px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
opacity: 1; opacity: 1;
transition: opacity 0.5s ease; transition: opacity 0.5s ease;
} }
#pointsDisplay { #pointsDisplay {
font-size: 1.5em; font-size: 1.5em;
margin-bottom: 20px; margin-bottom: 20px;
} }
button { button {
padding: 12px 30px; padding: 12px 30px;
font-size: 1.1em; font-size: 1.1em;
border: none; border: none;
border-radius: 50px; border-radius: 50px;
background-color: #ff5722; background-color: #ff5722;
color: white; color: white;
cursor: pointer; cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease, box-shadow 0.3s ease; transition: background-color 0.3s ease, box-shadow 0.3s ease;
margin: 10px; margin: 10px;
} }
button:hover { button:hover {
background-color: #ff3d00; background-color: #ff3d00;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
} }
#loading { #loading {
display: none; display: none;
font-size: 1.5em; font-size: 1.5em;
margin-top: 20px; margin-top: 20px;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div id="pointsDisplay">当前积分: </div> <div id="pointsDisplay">当前积分: </div>
<button id="startLotteryButton">开始抽奖</button> <button id="startLotteryButton">开始抽奖</button>
<button class="back-button" id="backButton">返回前一页面</button> <button class="back-button" id="backButton">返回前一页面</button>
<div id="result"></div> <div id="result"></div>
<div id="loading">正在加载，请稍候...</div> <div id="loading">正在加载，请稍候...</div>
</div> </div>
<script> <script>
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
let student_name = urlParams.get('student_name'); let name = urlParams.get('name');
let student_id = urlParams.get('student_id');
// 如果 URL 中没有 name 参数，尝试从 localStorage 获取
const pointsDisplay = document.querySelector('#pointsDisplay'); if (!name) {
const startLotteryButton = document.querySelector('#startLotteryButton'); name = localStorage.getItem('currentUserName');
const resultDisplay = document.querySelector('#result'); }
const backButton = document.getElementById('backButton');
const loadingIndicator = document.getElementById('loading'); const pointsDisplay = document.querySelector('#pointsDisplay');
const startLotteryButton = document.querySelector('#startLotteryButton');
// 睡眠函数，让页面跳转更自然 const resultDisplay = document.querySelector('#result');
function sleep(d) { const backButton = document.getElementById('backButton');
return new Promise(resolve => setTimeout(resolve, d)); const loadingIndicator = document.getElementById('loading');
}
// 睡眠函数，让页面跳转更自然
// 全局变量，用于存储用户积分 function sleep(d) {
let userPoints = null; return new Promise(resolve => setTimeout(resolve, d));
}
// 获取该用户的分数
const fetchStudentScore = async (student_id) => { // 获取该用户的积分
try { let userPoints = parseInt(localStorage.getItem(name)) || 0;
const response = await fetch('http://localhost:3000/api/get-score', { pointsDisplay.textContent = `${name} 的当前积分: ${userPoints}`;
method: 'POST', // 使用 POST 方法
headers: { // 设置返回按钮的 URL
'Content-Type': 'application/json', // 设置请求体的内容类型 backButton.onclick = () => {
}, loadingIndicator.style.display = 'block'; // 显示加载提示
body: JSON.stringify({ student_id }), // 将 student_id 放入请求体 window.location.href = `choice.html?name=${encodeURIComponent(name)}`;
}); };
if (!response.ok) { // 抽奖逻辑
alert('分数获取失败'); startLotteryButton.addEventListener('click', async () => {
return null; // 返回 null 表示获取失败 if (userPoints >= 20) {
} userPoints -= 20; // 每次抽奖消耗 20 分
localStorage.setItem(name, userPoints); // 保存更新后的积分
// 直接返回响应体中的数字 pointsDisplay.textContent = `${name} 的当前积分: ${userPoints}`;
const data = await response.json(); // 直接解析为 JSON
const score = data.score; // 随机选择奖品
return score; // 返回数字 const prizes = ["跳过权", "再来一次", "什么也没有发生", "加30积分且跳过"];
} catch (error) { const randomPrize = prizes[Math.floor(Math.random() * prizes.length)];
alert('网络请求失败'); resultDisplay.textContent = `你赢得了: ${randomPrize}`;
return null; // 返回 null 表示获取失败
} // 等待 2 秒以展示结果
}; await sleep(2000);
loadingIndicator.style.display = 'block'; // 显示加载提示
// 更新用户分数 if (randomPrize === '跳过权') {
async function updateScore(student_id, points) { await sleep(1000);
try { window.location.href = `select.html?name=${encodeURIComponent(name)}`;
const response = await fetch('http://localhost:3000/api/update-score', { } else if (randomPrize === '再来一次') {
method: 'POST', userPoints += 20;
headers: { localStorage.setItem(name, userPoints);
'Content-Type': 'application/json', } else if (randomPrize === '什么也没有发生') {
}, await sleep(1000);
body: JSON.stringify({ student_id, points }), window.location.href = `answer.html?name=${encodeURIComponent(name)}`;
}); } else if (randomPrize === '加30积分且跳过') {
userPoints += 30;
if (!response.ok) { localStorage.setItem(name, userPoints);
throw new Error('网络响应不正常'); await sleep(1000);
} window.location.href = `select.html?name=${encodeURIComponent(name)}`;
}
// 使用 text() 解析响应，得到字符串形式的分数 } else {
const data = await response.text(); resultDisplay.textContent = "积分不足，无法抽奖！";
let score = Number(data); // 转换为数字 loadingIndicator.style.display = 'block'; // 显示加载提示
return score; // 返回数字 await sleep(1000);
} catch (error) { window.location.href = `answer.html?name=${encodeURIComponent(name)}`;
console.error('分数更新失败:', error); }
return null; // 返回 null 表示更新失败 });
} </script>
} </body>
</html>
// 初始化函数，用于设置用户积分
async function init() {
userPoints = await fetchStudentScore(student_id); // 获取分数并存储到全局变量
pointsDisplay.textContent = `${student_name} 的当前积分: ${userPoints}`;
}
// 执行初始化函数
init();
// 设置返回按钮的 URL
backButton.onclick = () => {
loadingIndicator.style.display = 'block'; // 显示加载提示
window.location.href = `choice.html?student_name=${encodeURIComponent(student_name)}&student_id=${encodeURIComponent(student_id)}`;
};
// 开始抽奖
startLotteryButton.addEventListener('click', async () => {
if (userPoints >= 2) {
userPoints = await updateScore(student_id, -2); // 积分-2
pointsDisplay.textContent = `${student_name} 的当前积分: ${userPoints}`;
// 随机选择奖品
const prizes = ["跳过权", "再来一次", "什么也没有发生", "加3积分且跳过"];
const randomPrize = prizes[Math.floor(Math.random() * prizes.length)];
resultDisplay.textContent = `你赢得了: ${randomPrize}`;
// 等待 2 秒以展示结果
await new Promise(resolve => setTimeout(resolve, 2000));
loadingIndicator.style.display = 'block'; // 显示加载提示
if (randomPrize === '跳过权') {
await sleep(2000);
window.location.href = `select.html?student_name=${encodeURIComponent(student_name)}&student_id=${encodeURIComponent(student_id)}`;
}
else if (randomPrize === '再来一次') {
userPoints = await updateScore(student_id, 2); // 积分返回2
await sleep(2000);
window.location.href = `lottery.html?student_name=${encodeURIComponent(student_name)}&student_id=${encodeURIComponent(student_id)}`;
}
else if (randomPrize === '什么也没有发生') {
await sleep(2000);
window.location.href = `answer.html?student_name=${encodeURIComponent(student_name)}&student_id=${encodeURIComponent(student_id)}`;
}
else if (randomPrize === '加3积分且跳过') {
userPoints = await updateScore(student_id, 3); // 积分+3
await sleep(2000);
window.location.href = `select.html?student_name=${encodeURIComponent(student_name)}&student_id=${encodeURIComponent(student_id)}`;
}
} else {
resultDisplay.textContent = "积分不足，无法抽奖！返回回答问题";
loadingIndicator.style.display = 'block'; // 显示加载提示
await sleep(2000);
window.location.href = `answer.html?student_name=${encodeURIComponent(student_name)}&student_id=${encodeURIComponent(student_id)}`;
}
});
</script>
</body>
</html>

9
package.json
Unescape View File

@ -1,9 +0,0 @@
{
"dependencies": {
"body-parser": "^1.20.3",
"express": "^4.21.0",
"multer": "^1.4.5-lts.1",
"mysql2": "^3.11.3",
"xlsx": "^0.18.5"
}
}

47
randomSelect.js
Unescape View File

@ -1,47 +0,0 @@
const pool = require('../db');
async function selectStudent(req, res) {
try {
const connection = await pool.getConnection();
// 从数据库查询学生
const [students] = await connection.query('SELECT * FROM students');
// 计算权重的总和（使用 softmax 权重计算）
const totalWeight = students.reduce((acc, student) => acc + Math.exp(-student.score), 0);
// 将每个学生的权重归一化
const weightedStudents = students.map(student => ({
student,
weight: Math.exp(-student.score) / totalWeight,
}));
// 生成随机数
const random = Math.random(); // 介于 0 和 1 之间
let sum = 0; // 用于累加权重
let selectedStudent = null;
// 遍历加权后的学生，累加权重，并判断随机数落在哪个学生的区间
for (let i = 0; i < weightedStudents.length; i++) {
sum += weightedStudents[i].weight; // 累加当前学生的权重
if (random <= sum) { // 如果随机数小于或等于当前的累积权重
selectedStudent = weightedStudents[i].student; // 选中该学生
break; // 找到后立即退出循环
}
}
if (selectedStudent) {
res.send({ student_name: selectedStudent.student_name,
student_id: selectedStudent.student_id
});
} else {
res.status(404).send({ message: '无学生数据' });
}
connection.release();
} catch (error) {
res.status(500).send({ error: '随机选择学生失败' });
}
}
module.exports = { selectStudent };

25
ranking.js
Unescape View File

@ -1,25 +0,0 @@
const pool = require('../db');
async function get_descend_Ranking(req, res) {
try {
const connection = await pool.getConnection();
const [ranking] = await connection.query('SELECT student_name, student_id, score FROM students ORDER BY score DESC');
connection.release();
res.json(ranking);
} catch (error) {
res.status(500).send({ error: '无法获取排名' });
}
}
async function get_ascend_Ranking(req, res) {
try {
const connection = await pool.getConnection();
const [ranking] = await connection.query('SELECT student_name, student_id, score FROM students ORDER BY score ASC');
connection.release();
res.json(ranking);
} catch (error) {
res.status(500).send({ error: '无法获取排名' });
}
}
module.exports = { get_ascend_Ranking, get_descend_Ranking };

50
router.js
Unescape View File

@ -1,50 +0,0 @@
const express = require('express');
const router = express.Router();
const multer = require('multer');
const randomSelect = require('./services/randomSelect');
const ranking = require('./services/ranking');
const classManager = require('./services/classManager');
const scoreManager = require('./services/scoreManager');
const TableManager = require('./services/delete-table');
const pool = require('./db');
// 文件上传配置
const upload = multer({ dest: 'uploads/' });
// 路由 - 添加班级
router.post('/upload', upload.single('file'), classManager.addClass);
// 路由 - 随机点名
router.get('/random-call', randomSelect.selectStudent);
// 路由 - 获取排名
router.get('/ascend_ranking', ranking.get_ascend_Ranking);
router.get('/descend_ranking', ranking.get_descend_Ranking);
// 路由 - 更新分数
router.post('/update-score', scoreManager.updateScore);
//路由 - 获取某个id的分数
router.post('/get-score', scoreManager.getStudentScore);
//路由 - 删除班级
router.post('/delete-table', TableManager.deleteTable);
// 获取全部学生名单
router.get('/get-students', async (req, res) => {
let connection; // 声明连接变量
try {
connection = await pool.getConnection(); // 从连接池获取连接
const [students] = await connection.query('SELECT student_name FROM students'); // 执行查询
const studentNames = students.map(student => ({ student_name: student.student_name })); // 只保留 student_name 字段
res.json(studentNames); // 返回只包含 student_name 的结果
} catch (error) {
console.error('Error fetching students:', error); // 记录错误信息
res.status(500).send({ error: 'Failed to fetch students' }); // 返回500错误响应
} finally {
if (connection) connection.release(); // 确保连接被释放
}
});
module.exports = router;

93
scoreManager.js
Unescape View File

@ -1,93 +0,0 @@
const pool = require('../db');
async function updateScore(req, res) {
const { student_id, points } = req.body; //假设前端发送的数据是这两部分
const pool = require('../db');
async function updateScore(req, res) {
const { student_id, points } = req.body;
let connection; // 在try块外部声明connection
try {
connection = await pool.getConnection();
// 更新学生的积分并增加点名次数
const [result] = await connection.query(
'UPDATE students SET score = score + ?, call_count = call_count + 1 WHERE student_id = ?',
[points, student_id]
);
if (result.affectedRows > 0) {
// 查询更新后的分数
const [rows] = await connection.query(
'SELECT score FROM students WHERE student_id = ?',
[student_id]
);
if (rows.length > 0) {
const updatedScore = rows[0].score;
return res.send(String(updatedScore));
} else {
return res.status(404).send('学生不存在');
}
} else {
return res.status(404).send('学生不存在');
}
} catch (error) {
console.error('数据库操作失败:', error);
return res.status(500).send('更新积分失败');
} finally {
if (connection) {
connection.release(); // 只有在connection已被赋值时才调用release
}
}
}
async function getStudentScore(req, res) {
const { student_id } = req.body;
let connection;
try {
connection = await pool.getConnection();
// 查询指定学生的分数
const [rows] = await connection.query(
'SELECT score FROM students WHERE student_id =?',
[student_id]
);
if (rows.length > 0) {
const score = rows[0].score;
// 修改这里，构建包含student_id和score的对象并返回
return res.json({ student_id, score });
} else {
return res.status(404).json({ message: '学生不存在' });
}
} catch (error) {
console.error('数据库操作失败:', error);
return res.status(500).json({ error: '获取分数失败' });
} finally {
if (connection) {
connection.release();
}
}
}
module.exports = { updateScore, getStudentScore };
try {
const connection = await pool.getConnection();
const [result] = await connection.query('UPDATE students SET score = score + ?, call_count = call_count + 1 WHERE student_id = ?', [points, student_id]);
if (result.affectedRows > 0) {
res.send({ message: '积分已更新' });
} else {
res.status(404).send({ message: '学生不存在' });
}
connection.release();
} catch (error) {
res.status(500).send({ error: '更新积分失败' });
}
}
module.exports = { updateScore };

446
score_display.html
Unescape View File

@ -1,249 +1,197 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>积分显示</title> <title>积分显示</title>
<style> <style>
body { body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #a18cd1, #fbc2eb); background: linear-gradient(135deg, #a18cd1, #fbc2eb);
height: 100vh; height: 100vh;
margin: 0; margin: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: #333; color: #333;
} }
.container { .container {
width: 90%; width: 90%;
max-width: 800px; max-width: 800px;
background: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.85);
padding: 40px; padding: 40px;
border-radius: 20px; border-radius: 20px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(8.5px); backdrop-filter: blur(8.5px);
-webkit-backdrop-filter: blur(8.5px); -webkit-backdrop-filter: blur(8.5px);
border: 1px solid rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.18);
text-align: center; text-align: center;
} }
h1 { h1 {
margin-bottom: 30px; margin-bottom: 30px;
font-size: 2em; font-size: 2em;
color: #ff5722; color: #ff5722;
} }
#sortButton { #sortButton {
padding: 10px 20px; padding: 10px 20px;
font-size: 1em; font-size: 1em;
border: none; border: none;
border-radius: 25px; border-radius: 25px;
background-color: #2196F3; background-color: #2196F3;
color: white; color: white;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s, transform 0.2s; transition: background-color 0.3s, transform 0.2s;
margin-bottom: 20px; margin-bottom: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
} }
#sortButton:hover { #sortButton:hover {
background-color: #1e88e5; background-color: #1e88e5;
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
} }
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin-top: 10px; margin-top: 10px;
} }
th, td { th, td {
padding: 12px 15px; padding: 12px 15px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
font-size: 1em; font-size: 1em;
} }
th { th {
background-color: #4CAF50; background-color: #4CAF50;
color: white; color: white;
} }
tr:hover { tr:hover {
background-color: #f1f1f1; background-color: #f1f1f1;
} }
.button-group { .button-group {
margin-top: 30px; margin-top: 30px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 10px; gap: 10px;
} }
.back-button, .clear-button { .back-button, .clear-button {
padding: 10px 20px; padding: 10px 20px;
font-size: 1em; font-size: 1em;
border: none; border: none;
border-radius: 25px; border-radius: 25px;
color: white; color: white;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s, transform 0.2s; transition: background-color 0.3s, transform 0.2s;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
} }
.back-button { .back-button {
background-color: #2196F3; background-color: #2196F3;
} }
.back-button:hover { .back-button:hover {
background-color: #1e88e5; background-color: #1e88e5;
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
} }
.clear-button { .clear-button {
background-color: #f44336; background-color: #f44336;
} }
.clear-button:hover { .clear-button:hover {
background-color: #e53935; background-color: #e53935;
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
} }
@media (max-width: 600px) { @media (max-width: 600px) {
th, td { th, td {
padding: 8px 10px; padding: 8px 10px;
} }
#sortButton, .button-group button { #sortButton, .button-group button {
width: 100%; width: 100%;
margin: 10px 0; margin: 10px 0;
} }
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>积分显示</h1> <h1>积分显示</h1>
<button id="sortButton">切换排序 (降序)</button> <button id="sortButton">切换排序 (降序)</button>
<table> <table>
<thead> <thead>
<tr> <tr>
<th>姓名</th> <th>姓名</th>
<th>学号</th> <th>积分</th>
<th>积分</th> </tr>
</tr> </thead>
</thead> <tbody id="studentList">
<tbody id="studentList"> <!-- 学生积分将在此处显示 -->
<!-- 学生积分将在此处显示 --> </tbody>
</tbody> </table>
</table> <div class="button-group">
<div class="button-group"> <button class="back-button" onclick="window.location.href='index.html'">返回主页面</button>
<button class="back-button" onclick="window.location.href='index.html'">返回主页面</button> <button class="clear-button" id="clearButton">清除所有数据</button>
<button class="clear-button" id="clearButton">清除所有数据</button> </div>
</div> </div>
</div>
<script>
<script> const studentList = document.getElementById('studentList');
const studentList = document.getElementById('studentList'); const sortButton = document.getElementById('sortButton');
const sortButton = document.getElementById('sortButton'); const clearButton = document.getElementById('clearButton');
const clearButton = document.getElementById('clearButton'); let ascending = false; // 默认降序
let ascend = false; // 默认降序
// 预定义学生名单
const predefinedStudents = [
//删除表 { name: '张三', points: 0 },
async function deleteTable(tableName) { { name: '李四', points: 0 },
try { { name: '王五', points: 0 },
const response = await fetch('/api/delete-table', { { name: '赵六', points: 0 },
method: 'POST', ];
headers: {
'Content-Type': 'application/json', // 获取所有学生，包括预定义名单
}, function getAllStudents() {
body: JSON.stringify({ tableName }), const students = predefinedStudents.map(student => {
}); const storedPoints = localStorage.getItem(student.name);
return {
if (!response.ok) { name: student.name,
throw new Error('删除表失败'); points: storedPoints !== null ? parseInt(storedPoints) : student.points
} };
});
const data = await response.json(); return students;
alert(data.message); // 成功后显示消息 }
} catch (error) {
console.error('删除表操作失败:', error); // 显示学生积分
alert('删除表失败'); function displayStudents() {
} const students = getAllStudents();
} students.sort((a, b) => ascending ? a.points - b.points : b.points - a.points);
studentList.innerHTML = '';
students.forEach(student => {
studentList.innerHTML += `
// 获取按分数降序排列的学生排名 <tr>
async function fetchDescendRanking() { <td>${student.name}</td>
try { <td>${student.points}</td>
const response = await fetch('/api/descend_ranking'); </tr>
if (!response.ok) { `;
alert('无法获取降序排名'); });
return null; }
}
// 切换排序
const ranking = await response.json(); // 获取并解析为JSON数组 sortButton.addEventListener('click', () => {
return ranking; // 返回排名数组 ascending = !ascending;
} catch (error) { sortButton.textContent = `切换排序 (${ascending ? '升序' : '降序'})`;
console.error('请求失败:', error); displayStudents();
return null; });
}
} // 清除所有数据
clearButton.addEventListener('click', () => {
// 获取按分数升序排列的学生排名 const confirmation = confirm("确定要清除所有学生数据吗？此操作无法撤销！");
async function fetchAscendRanking() { if (confirmation) {
try { localStorage.clear();
const response = await fetch('/api/ascend_ranking'); alert("所有数据已清除！");
if (!response.ok) { displayStudents(); // 重新显示清空后的数据
alert('无法获取升序排名'); }
return null; });
}
// 初次加载时显示学生积分
const ranking = await response.json(); // 获取并解析为JSON数组 displayStudents();
return ranking; // 返回排名数组 </script>
} catch (error) {
console.error('请求失败:', error); </body>
return null; </html>
}
}
async function displayStudents() {
let ranking; // 声明 ranking 变量
if (ascend) {
ranking = await fetchAscendRanking(); // 获取升序排名
} else {
ranking = await fetchDescendRanking(); // 获取降序排名
}
// 检查 ranking 是否为空
if (!ranking) {
alert('空 ranking');
return; // 退出函数
}
studentList.innerHTML = ''; // 清空表格内容
// 只显示前五名学生
ranking.slice(0, 5).forEach(student => {
studentList.innerHTML += `
<tr>
<td>${student.student_name}</td> <!-- 学生姓名 -->
<td>${student.student_id}</td> <!-- 学生ID -->
<td>${student.score}</td> <!-- 学生分数 -->
</tr>
`;
});
}
sortButton.addEventListener('click', () => {
ascend = !ascend;
sortButton.textContent = `切换排序 (${ascend ? '升序' : '降序'})`;
displayStudents();
});
clearButton.addEventListener('click', () => {
const confirmation = confirm("确定要清除所有学生数据吗？此操作无法撤销！");
if (confirmation) {
deleteTable('students');
alert("所有信息已清除！");
displayStudents(); // 重新显示清空后的数据
}
});
displayStudents();
</script>
</body>
</html>

306
select.html
Unescape View File

@ -1,153 +1,153 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机点名</title> <title>随机点名</title>
<style> <style>
body { body {
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
height: 100vh; height: 100vh;
margin: 0; margin: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: linear-gradient(135deg, #6e45e2, #88d3ce); background: linear-gradient(135deg, #6e45e2, #88d3ce);
color: white; color: white;
} }
.container { .container {
text-align: center; text-align: center;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
padding: 30px; padding: 30px;
border-radius: 15px; border-radius: 15px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
} }
#nameDisplay { #nameDisplay {
font-size: 2.5em; font-size: 2.5em;
margin-bottom: 20px; margin-bottom: 20px;
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
background-color: rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.2);
transition: all 0.3s ease; transition: all 0.3s ease;
} }
#nameDisplay.active { #nameDisplay.active {
transform: scale(1.1); transform: scale(1.1);
color: #ffeb3b; color: #ffeb3b;
} }
button { button {
padding: 12px 30px; padding: 12px 30px;
font-size: 1.1em; font-size: 1.1em;
border: none; border: none;
border-radius: 50px; border-radius: 50px;
background-color: #ff5722; background-color: #ff5722;
color: white; color: white;
cursor: pointer; cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease, box-shadow 0.3s ease; transition: background-color 0.3s ease, box-shadow 0.3s ease;
} }
button:hover { button:hover {
background-color: #ff3d00; background-color: #ff3d00;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
} }
button:disabled { button:disabled {
background-color: #999; background-color: #999;
cursor: not-allowed; cursor: not-allowed;
} }
button + button { button + button {
margin-left: 15px; margin-left: 15px;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div id="nameDisplay">准备开始提问</div> <div id="nameDisplay">准备开始提问</div>
<button id="startButton">开始</button> <button id="startButton">开始</button>
<button id="stopButton" disabled>停止</button> <button id="stopButton" disabled>停止</button>
<button class="back-button" onclick="window.location.href='index.html'">返回主页面</button> <button class="back-button" onclick="window.location.href='index.html'">返回主页面</button>
</div> </div>
<script> <script>
let names = []; let names = [];
let intervalId = null; let intervalId = null;
// 获取 DOM 元素 // 获取 DOM 元素
const nameDisplay = document.querySelector('#nameDisplay'); const nameDisplay = document.querySelector('#nameDisplay');
const startButton = document.querySelector('#startButton'); const startButton = document.querySelector('#startButton');
const stopButton = document.querySelector('#stopButton'); const stopButton = document.querySelector('#stopButton');
// 页面加载时获取学生名单 // 页面加载时获取学生名单
window.addEventListener('DOMContentLoaded', fetchStudents); window.addEventListener('DOMContentLoaded', fetchStudents);
// 获取学生名单 // 获取学生名单
async function fetchStudents() { async function fetchStudents() {
try { try {
const response = await fetch('/api/get-students'); const response = await fetch('/api/get-students');
if (!response.ok) { if (!response.ok) {
throw new Error('Network response was not ok'); throw new Error('Network response was not ok');
} }
const data = await response.json(); const data = await response.json();
names = data.map(student => student.student_name); names = data.map(student => student.student_name);
} catch (error) { } catch (error) {
console.error('Error fetching student list:', error); console.error('Error fetching student list:', error);
} }
} }
// 动态更新显示效果 // 动态更新显示效果
const updateNameDisplay = (name) => { const updateNameDisplay = (name) => {
nameDisplay.textContent = `点到: ${name}`; nameDisplay.textContent = `点到: ${name}`;
nameDisplay.classList.add('active'); nameDisplay.classList.add('active');
setTimeout(() => { setTimeout(() => {
nameDisplay.classList.remove('active'); nameDisplay.classList.remove('active');
}, 300); }, 300);
}; };
// 开始滚动显示 // 开始滚动显示
startButton.addEventListener('click', () => { startButton.addEventListener('click', () => {
startButton.disabled = true; startButton.disabled = true;
stopButton.disabled = false; stopButton.disabled = false;
intervalId = setInterval(() => { intervalId = setInterval(() => {
// 从 names 数组中随机选择一个名字进行滚动显示 // 从 names 数组中随机选择一个名字进行滚动显示
const randomIndex = Math.floor(Math.random() * names.length); const randomIndex = Math.floor(Math.random() * names.length);
const selectedName = names[randomIndex]; const selectedName = names[randomIndex];
// 更新显示选中的名字 // 更新显示选中的名字
updateNameDisplay(selectedName); updateNameDisplay(selectedName);
}, 100); // 每100毫秒滚动显示一次 }, 100); // 每100毫秒滚动显示一次
}); });
// 停止滚动并通过后端决定最终选择的学生 // 停止滚动并通过后端决定最终选择的学生
stopButton.addEventListener('click', async () => { stopButton.addEventListener('click', () => {
clearInterval(intervalId); clearInterval(intervalId);
startButton.disabled = false; startButton.disabled = false;
stopButton.disabled = true; stopButton.disabled = true;
try { // 调用后端接口获取最终选中的学生
const response = await fetch('/api/random-call'); fetch('/api/random-call')
.then(response => {
if (!response.ok) { if (!response.ok) {
throw new Error('Network response was not ok'); throw new Error('Network response was not ok');
} }
return response.json();
const data = await response.json(); })
// 从后端返回的数据中获取学生名字 .then(data => {
const selectedName = data.student_name; // student_name 属性 // 从后端返回的数据中获取学生名字
if (data.student && data.student.name) {
if (selectedName) { const selectedName = data.student.name;
// 更新显示选中的学生 // 更新显示选中的学生
updateNameDisplay(selectedName); updateNameDisplay(selectedName);
// 跳转到新页面并传递被选中的名字 // 跳转到新页面并传递被选中的名字
window.location.href = `choice.html?student_name=${encodeURIComponent(data.student_name)}&student_id=${encodeURIComponent(data.student_id)}`; window.location.href = `choice.html?name=${encodeURIComponent(selectedName)}`;
} else { } else {
console.error('未返回有效学生数据'); console.error('未返回有效学生数据');
} }
} catch (error) { })
console.error('请求失败:', error); .catch(error => {
} console.error('请求失败:', error);
}); });
});
</script> </script>
</body> </body>
</html> </html>

26
server.js
Unescape View File

@ -1,26 +0,0 @@
const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const router = require('./router');
const app = express();
// 中间件
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// API 路由
app.use('/api', router);
// 静态文件
app.use(express.static(path.join(__dirname, 'public')));
// 处理 SPA 路由
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'index.html'));
});
// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});
Write Preview
Loading…
Cancel
Save