Merge pull request '合并' (#1) from 123 into main

main
pg7s85mrc 2 months ago
commit 873b9a982d

1
111

@ -0,0 +1 @@
undefined

@ -0,0 +1,86 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>回答问题</title>
<style>
body {
font-family: 'Arial', sans-serif;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #6e45e2, #88d3ce);
color: white;
}
.container {
text-align: center;
background-color: rgba(255, 255, 255, 0.1);
padding: 30px;
border-radius: 15px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
#question {
font-size: 2em;
margin-bottom: 20px;
}
button {
padding: 12px 30px;
font-size: 1.1em;
border: none;
border-radius: 50px;
background-color: #ff5722;
color: white;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
margin: 10px;
}
button:hover {
background-color: #ff3d00;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="container">
<div id="question">你需要回答问题 结果是:</div>
<button id="correctButton">正确</button>
<button id="wrongButton">错误</button>
<button class="back-button" onclick="window.location.href='select.html'">返回点名页面</button>
<div id="result"></div>
</div>
<script>
const urlParams = new URLSearchParams(window.location.search);
const name = urlParams.get('name');
const correctButton = document.querySelector('#correctButton');
const wrongButton = document.querySelector('#wrongButton');
const resultDisplay = document.querySelector('#result');
// 初始化积分
let userPoints = parseInt(localStorage.getItem(name));
// 正确答案处理
correctButton.addEventListener('click', () => {
userPoints += 10; // 正确回答加 10 分
localStorage.setItem(name, userPoints); // 保存更新后的积分
resultDisplay.textContent = `正确!${name} 的当前积分: ${userPoints}`;
});
// 错误答案处理
wrongButton.addEventListener('click', () => {
userPoints -= 5;
localStorage.setItem(name, userPoints); // 保存更新后的积分
resultDisplay.textContent = `错误!${name} 的当前积分: ${userPoints}`;
});
</script>
</body>
</html>

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

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

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>课堂管理系统</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #6e8efb, #a777e3);
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.container {
text-align: center;
background: rgba(255, 255, 255, 0.1);
padding: 40px;
border-radius: 20px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(8.5px);
-webkit-backdrop-filter: blur(8.5px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
h1 {
margin-bottom: 40px;
font-size: 2.5em;
}
.button-group {
display: flex;
flex-direction: column;
gap: 20px;
}
button {
padding: 15px 30px;
font-size: 1.2em;
border: none;
border-radius: 50px;
background-color: #ff5722;
color: white;
cursor: pointer;
transition: transform 0.2s, background-color 0.3s;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
button:hover {
background-color: #ff3d00;
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
@media (max-width: 600px) {
.button-group {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container">
<h1>课堂管理系统</h1>
<div class="button-group">
<button onclick="window.location.href='dianming.html'">课堂点名</button>
<button onclick="window.location.href='select.html'">随机提问</button>
<button onclick="window.location.href='score_display.html'">积分显示</button>
</div>
</div>
</body>
</html>

@ -0,0 +1,135 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抽奖页面</title>
<style>
body {
font-family: 'Arial', sans-serif;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #6e45e2, #88d3ce);
color: white;
transition: background-color 0.5s ease;
}
.container {
text-align: center;
background-color: rgba(255, 255, 255, 0.1);
padding: 30px;
border-radius: 15px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
opacity: 1;
transition: opacity 0.5s ease;
}
#pointsDisplay {
font-size: 1.5em;
margin-bottom: 20px;
}
button {
padding: 12px 30px;
font-size: 1.1em;
border: none;
border-radius: 50px;
background-color: #ff5722;
color: white;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
margin: 10px;
}
button:hover {
background-color: #ff3d00;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
#loading {
display: none;
font-size: 1.5em;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div id="pointsDisplay">当前积分: </div>
<button id="startLotteryButton">开始抽奖</button>
<button class="back-button" id="backButton">返回前一页面</button>
<div id="result"></div>
<div id="loading">正在加载,请稍候...</div>
</div>
<script>
const urlParams = new URLSearchParams(window.location.search);
let name = urlParams.get('name');
// 如果 URL 中没有 name 参数,尝试从 localStorage 获取
if (!name) {
name = localStorage.getItem('currentUserName');
}
const pointsDisplay = document.querySelector('#pointsDisplay');
const startLotteryButton = document.querySelector('#startLotteryButton');
const resultDisplay = document.querySelector('#result');
const backButton = document.getElementById('backButton');
const loadingIndicator = document.getElementById('loading');
// 睡眠函数,让页面跳转更自然
function sleep(d) {
return new Promise(resolve => setTimeout(resolve, d));
}
// 获取该用户的积分
let userPoints = parseInt(localStorage.getItem(name)) || 0;
pointsDisplay.textContent = `${name} 的当前积分: ${userPoints}`;
// 设置返回按钮的 URL
backButton.onclick = () => {
loadingIndicator.style.display = 'block'; // 显示加载提示
window.location.href = `choice.html?name=${encodeURIComponent(name)}`;
};
// 抽奖逻辑
startLotteryButton.addEventListener('click', async () => {
if (userPoints >= 20) {
userPoints -= 20; // 每次抽奖消耗 20 分
localStorage.setItem(name, userPoints); // 保存更新后的积分
pointsDisplay.textContent = `${name} 的当前积分: ${userPoints}`;
// 随机选择奖品
const prizes = ["跳过权", "再来一次", "什么也没有发生", "加30积分且跳过"];
const randomPrize = prizes[Math.floor(Math.random() * prizes.length)];
resultDisplay.textContent = `你赢得了: ${randomPrize}`;
// 等待 2 秒以展示结果
await sleep(2000);
loadingIndicator.style.display = 'block'; // 显示加载提示
if (randomPrize === '跳过权') {
await sleep(1000);
window.location.href = `select.html?name=${encodeURIComponent(name)}`;
} else if (randomPrize === '再来一次') {
userPoints += 20;
localStorage.setItem(name, userPoints);
} else if (randomPrize === '什么也没有发生') {
await sleep(1000);
window.location.href = `answer.html?name=${encodeURIComponent(name)}`;
} else if (randomPrize === '加30积分且跳过') {
userPoints += 30;
localStorage.setItem(name, userPoints);
await sleep(1000);
window.location.href = `select.html?name=${encodeURIComponent(name)}`;
}
} else {
resultDisplay.textContent = "积分不足,无法抽奖!";
loadingIndicator.style.display = 'block'; // 显示加载提示
await sleep(1000);
window.location.href = `answer.html?name=${encodeURIComponent(name)}`;
}
});
</script>
</body>
</html>

@ -0,0 +1,197 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>积分显示</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #a18cd1, #fbc2eb);
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
color: #333;
}
.container {
width: 90%;
max-width: 800px;
background: rgba(255, 255, 255, 0.85);
padding: 40px;
border-radius: 20px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(8.5px);
-webkit-backdrop-filter: blur(8.5px);
border: 1px solid rgba(255, 255, 255, 0.18);
text-align: center;
}
h1 {
margin-bottom: 30px;
font-size: 2em;
color: #ff5722;
}
#sortButton {
padding: 10px 20px;
font-size: 1em;
border: none;
border-radius: 25px;
background-color: #2196F3;
color: white;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
margin-bottom: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
#sortButton:hover {
background-color: #1e88e5;
transform: scale(1.05);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
th, td {
padding: 12px 15px;
border-bottom: 1px solid #ddd;
font-size: 1em;
}
th {
background-color: #4CAF50;
color: white;
}
tr:hover {
background-color: #f1f1f1;
}
.button-group {
margin-top: 30px;
display: flex;
justify-content: space-between;
gap: 10px;
}
.back-button, .clear-button {
padding: 10px 20px;
font-size: 1em;
border: none;
border-radius: 25px;
color: white;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.back-button {
background-color: #2196F3;
}
.back-button:hover {
background-color: #1e88e5;
transform: scale(1.05);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}
.clear-button {
background-color: #f44336;
}
.clear-button:hover {
background-color: #e53935;
transform: scale(1.05);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}
@media (max-width: 600px) {
th, td {
padding: 8px 10px;
}
#sortButton, .button-group button {
width: 100%;
margin: 10px 0;
}
}
</style>
</head>
<body>
<div class="container">
<h1>积分显示</h1>
<button id="sortButton">切换排序 (降序)</button>
<table>
<thead>
<tr>
<th>姓名</th>
<th>积分</th>
</tr>
</thead>
<tbody id="studentList">
<!-- 学生积分将在此处显示 -->
</tbody>
</table>
<div class="button-group">
<button class="back-button" onclick="window.location.href='index.html'">返回主页面</button>
<button class="clear-button" id="clearButton">清除所有数据</button>
</div>
</div>
<script>
const studentList = document.getElementById('studentList');
const sortButton = document.getElementById('sortButton');
const clearButton = document.getElementById('clearButton');
let ascending = false; // 默认降序
// 预定义学生名单
const predefinedStudents = [
{ name: '张三', points: 0 },
{ name: '李四', points: 0 },
{ name: '王五', points: 0 },
{ name: '赵六', points: 0 },
];
// 获取所有学生,包括预定义名单
function getAllStudents() {
const students = predefinedStudents.map(student => {
const storedPoints = localStorage.getItem(student.name);
return {
name: student.name,
points: storedPoints !== null ? parseInt(storedPoints) : student.points
};
});
return students;
}
// 显示学生积分
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>
<td>${student.name}</td>
<td>${student.points}</td>
</tr>
`;
});
}
// 切换排序
sortButton.addEventListener('click', () => {
ascending = !ascending;
sortButton.textContent = `切换排序 (${ascending ? '升序' : '降序'})`;
displayStudents();
});
// 清除所有数据
clearButton.addEventListener('click', () => {
const confirmation = confirm("确定要清除所有学生数据吗?此操作无法撤销!");
if (confirmation) {
localStorage.clear();
alert("所有数据已清除!");
displayStudents(); // 重新显示清空后的数据
}
});
// 初次加载时显示学生积分
displayStudents();
</script>
</body>
</html>

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