diff --git a/stu_roll.html b/stu_roll.html
new file mode 100644
index 0000000..a3d17cf
--- /dev/null
+++ b/stu_roll.html
@@ -0,0 +1,365 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>课堂随机点名系统</title>
+    <link rel="icon" href="static/logo.ico" type="image/x-icon">
+    <style>
+        html,
+        body {
+            height: 100%;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            margin-top: 50px;
+            background-image: url('/static/background.png'); /* 背景图片路径 */
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+        .card {
+            background-color: rgba(255, 255, 255, 0.8); /* 卡片背景色 */
+            border-radius: 10px; /* 圆角 */
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 阴影 */
+            margin: 20px auto; /* 上下间距和自动水平居中 */
+            padding: 20px; /* 内边距 */
+            width: 300px; /* 卡片宽度 */
+        }
+        h1 {
+            color: whitesmoke;
+            font-size: 36px;
+            margin-bottom: 20px;
+        }
+        /* 按钮样式 */
+        .button {
+            display: block; /* 改为块级元素以实现纵向排列 */
+            width: 100%; /* 设置按钮宽度为 100% */
+            margin: 15px 0; /* 上下间距 */
+            padding: 15px; /* 增加上边距和下边距 */
+            font-size: 20px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        .button:hover {
+            background-color: #45a049;
+        }
+        .button:active {
+            transform: scale(0.95);
+        }
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 2;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgba(0, 0, 0, 0.8);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .modal.show {
+            opacity: 1;
+        }
+        .modal-content {
+            background-color: #fefefe;
+            margin: 15% auto;
+            padding: 20px;
+            border: 1px solid #888;
+            width: 80%;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+            transition: transform 0.3s ease;
+        }
+        .modal-content.show {
+            transform: scale(1);
+        }
+        .close {
+            color: #aaa;
+            float: right;
+            font-size: 28px;
+            font-weight: bold;
+            cursor: pointer;
+        }
+        .close:hover,
+        .close:focus {
+            color: black;
+            text-decoration: none;
+        }
+        .disabled {
+            opacity: 0.5; /* 设置透明度为 0.5 以表示禁用状态 */
+            pointer-events: none; /* 禁用事件 */
+        }
+    </style>
+</head>
+<body>
+    <h1>课堂随机点名系统</h1>
+    <img src="/static/kfc_cat.jpg" alt="Logo" style="width: 88px; height: auto;">
+
+    <div class="card">
+        <div class="card-body">
+            <button class="button" data-action="upload">上传学生名单</button>
+            <button class="button" data-action="roll-call">随机点名</button>
+            <button class="button" data-action="view-rank">查看积分排行</button>
+        </div>
+    </div>
+
+    <div id="myModal" class="modal">
+        <div class="modal-content">
+            <span id="closeModal" class="close">&times;</span>
+            <p id="rollResult"></p>
+            <form id="rollCallForm">
+                <p>是否来上课了？
+                    <label><input type="radio" name="isCome" value="yes" onclick="toggleQuestionOptions()"> 来了</label>
+                    <label><input type="radio" name="isCome" value="no" onclick="toggleQuestionOptions()"> 没来</label>
+                </p>
+                <div id="questionOptions">
+                    <p>是否能够重复问题？
+                        <label><input type="radio" name="canRepeat" value="yes"> 能</label>
+                        <label><input type="radio" name="canRepeat" value="no"> 不能</label>
+                    </p>
+                    <p>是否能够正确回答问题？
+                        <label><input type="radio" name="answerCorrect" value="correct"> 完全正确</label>
+                        <label><input type="radio" name="answerCorrect" value="partial"> 部分正确</label>
+                        <label><input type="radio" name="answerCorrect" value="incorrect"> 错误</label>
+                    </p>
+                </div>
+                <button type="button" id="submitRollCall">提交</button>
+            </form>
+        </div>
+    </div>
+
+    <script>
+        const apiBaseUrl = "http://127.0.0.1:8000"; /* 部署到服务器需要修改为http://8.130.115.98:8080 */
+        var modal = document.getElementById("myModal");
+        var rollResultElement = document.getElementById("rollResult");
+        var span = document.getElementById("closeModal");
+
+        // 关闭模态框的函数
+        function closeModal() {
+            modal.classList.remove('show');
+            setTimeout(() => {
+                modal.style.display = "none";
+            }, 300);
+        }
+
+        span.onclick = closeModal;
+        window.onclick = function (event) {
+            if (event.target == modal) {
+                closeModal();
+            }
+        };
+
+        let studentData = [];
+
+        // 处理上传学生名单的函数
+        function uploadList() {
+            let fileInput = document.createElement('input');
+            fileInput.type = 'file';
+            fileInput.accept = '.xlsx';
+            fileInput.onchange = function () {
+                let formData = new FormData();
+                formData.append('file', fileInput.files[0]);
+                fetch(apiBaseUrl + '/upload', {
+                    method: 'POST',
+                    body: formData
+                })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('Network response was not ok');
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    alert(data.message);
+                    if (data.message === "名单上传成功！") {
+                        studentData = data.students;
+                    }
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    alert('上传失败，请检查网络连接或文件格式。');
+                });
+            };
+            fileInput.click();
+        }
+
+        // 处理随机点名的函数
+        function rollCall() {
+            fetch(apiBaseUrl + '/roll?enable_random_events=true')
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.json();
+            })
+            .then(responseData => {
+                if (responseData.message) {
+                    alert(responseData.message);
+                } else {
+                    sessionStorage.setItem('lastCalledStudentId', responseData.学号);
+                    rollResultElement.innerText = `被点名的学生是：${responseData.学号}--${responseData.姓名}`;
+                    modal.classList.add('show');
+                    modal.style.display = "block";
+                    if (responseData.转移权) {
+                        showTransferOptions(responseData.学号);
+                    }
+                    if (responseData.随机事件) {
+                        alert(`随机事件触发：${responseData.随机事件}`);
+                    }
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                alert(`无法完成点名，请检查网络连接或服务器状态。详细信息：${error.message}`);
+            });
+        }
+
+        // 切换问题选项的可用性
+        function toggleQuestionOptions() {
+            const form = document.getElementById("rollCallForm");
+            const isCome = form.elements["isCome"].value;
+            const questionOptions = document.getElementById("questionOptions");
+            if (isCome === "no") {
+                questionOptions.classList.add("disabled");
+                Array.from(questionOptions.querySelectorAll('input[type="radio"]')).forEach(input => {
+                    input.checked = false;
+                    input.disabled = true;
+                });
+            } else {
+                questionOptions.classList.remove("disabled");
+                Array.from(questionOptions.querySelectorAll('input[type="radio"]')).forEach(input => {
+                    input.disabled = false;
+                });
+            }
+        }
+
+        // 显示转移选项的函数
+        function showTransferOptions(currentStudentId) {
+            const transferModal = document.createElement('div');
+            transferModal.className = 'modal transfer-modal';
+            const transferContent = document.createElement('div');
+            transferContent.className = 'modal-content';
+            transferContent.innerHTML = `<p>请选择转移的学生：</p>`;
+            studentData.forEach(student => {
+                if (student.学号 !== currentStudentId) {
+                    const button = document.createElement('button');
+                    button.innerText = `${student.姓名} (${student.学号})`;
+                    button.onclick = function () {
+                        alert(`转移到学生：${student.姓名} (${student.学号})`);
+                        transferModal.style.display = "none";
+                        modal.style.display = "none";
+                        sessionStorage.setItem('lastCalledStudentId', student.学号);
+                        rollCall();
+                    };
+                    transferContent.appendChild(button);
+                }
+            });
+            transferModal.appendChild(transferContent);
+            document.body.appendChild(transferModal);
+            transferModal.classList.add('show');
+            transferModal.style.display = "block";
+            const closeButton = document.createElement('span');
+            closeButton.className = 'close';
+            closeButton.innerHTML = '&times;';
+            closeButton.onclick = function () {
+                transferModal.style.display = "none";
+            };
+            transferContent.appendChild(closeButton);
+        }
+
+        // 提交点名评估的函数
+        document.getElementById("submitRollCall").onclick = function () {
+            const form = document.getElementById("rollCallForm");
+            const isCome = form.elements["isCome"].value === "yes";
+            const canRepeat = form.elements["canRepeat"].value === "yes";
+            const answerCorrect = form.elements["answerCorrect"].value === "correct" ? "完全正确" :
+                (form.elements["answerCorrect"].value === "partial" ? "部分正确" : "错误");
+            const studentId = sessionStorage.getItem('lastCalledStudentId');
+            if (!studentId) {
+                alert('没有找到被点名的学生 ID，请重新点名。');
+                return;
+            }
+            const dataToSend = {
+                student_id: studentId,
+                is_come: isCome,
+                can_repeat: canRepeat,
+                answer_correct: answerCorrect
+            };
+            fetch(apiBaseUrl + '/evaluate-answer', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(dataToSend),
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.json();
+            })
+            .then(updatedData => {
+                if (updatedData.success) {
+                    alert('回答已评估！');
+                } else {
+                    alert('回答评估失败！');
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                alert('无法完成评估，请检查网络连接或服务器状态。');
+            });
+            closeModal();
+        };
+
+        // 处理查看积分排行的函数
+        function viewRank() {
+            fetch(apiBaseUrl + '/rank')
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.json();
+            })
+            .then(data => {
+                if (data.message) {
+                    alert(data.message);
+                } else {
+                    let rankList = "积分排行：\n";
+                    data.forEach((student, index) => {
+                        rankList += `${index + 1}. 学号：${student.学号} 姓名：${student.姓名} 积分：${student.积分}\n`;
+                    });
+                    alert(rankList);
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                alert('无法完成操作，请检查网络连接或服务器状态。');
+            });
+        }
+
+        // 为按钮添加点击事件处理
+        document.querySelectorAll('.button').forEach(button => {
+            button.addEventListener('click', function () {
+                const action = this.dataset.action;
+                if (action === 'upload') {
+                    uploadList();
+                } else if (action === 'roll-call') {
+                    rollCall();
+                } else if (action === 'view-rank') {
+                    viewRank();
+                }
+            });
+        });
+    </script>
+</body>
+</html>
