From 285bcf0f92b115a946896e0b02fa7ce05bc6cba1 Mon Sep 17 00:00:00 2001
From: luoyonghuang <2308014474@qq.com>
Date: Mon, 7 Oct 2024 22:24:20 +0800
Subject: [PATCH] Update select.html

---
 select.html | 306 ++++++++++++++++++++++++++--------------------------
 1 file changed, 153 insertions(+), 153 deletions(-)
diff --git a/select.html b/select.html
index d1566fa..2ef4c5c 100644
--- a/select.html
+++ b/select.html
@@ -1,153 +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>
+<!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', async () => {
+            clearInterval(intervalId);
+            startButton.disabled = false;
+            stopButton.disabled = true;
+
+            try {
+                const response = await fetch('/api/random-call');
+                
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+
+                const data = await response.json();
+                // 从后端返回的数据中获取学生名字
+                const selectedName = data.student_name; // student_name 属性
+
+                if (selectedName) {
+                    // 更新显示选中的学生
+                    updateNameDisplay(selectedName);
+                    // 跳转到新页面并传递被选中的名字
+                    window.location.href = `choice.html?student_name=${encodeURIComponent(data.student_name)}&student_id=${encodeURIComponent(data.student_id)}`;
+                } else {
+                    console.error('未返回有效学生数据');
+                }
+            } catch (error) {
+                console.error('请求失败:', error);
+            }
+    });
+
+    </script>
+
+</body>
+</html>
