diff --git a/templates/roll_call.html b/templates/roll_call.html
new file mode 100644
index 0000000..e62646d
--- /dev/null
+++ b/templates/roll_call.html
@@ -0,0 +1,144 @@
+<!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="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>随机点名</h1>
+            <a href="/" class="back-link">← 返回首页</a>
+        </header>
+        
+        <div class="roll-call-interface">
+            <div class="class-info">
+                <h2>软工K班</h2>
+                <p>当前班级人数: <span id="classCount">0</span>人</p>
+            </div>
+            
+            <div class="roll-call-result">
+                <div id="selectedStudent" class="student-card hidden">
+                    <h3 id="selectedName">学生姓名</h3>
+                    <p>学号: <span id="selectedId">-</span></p>
+                    <p>当前积分: <span id="selectedScore">0</span></p>
+                </div>
+                
+                <button id="rollCallBtn" class="btn btn-primary btn-large">开始点名</button>
+            </div>
+            
+            <div class="score-actions">
+                <h3>积分操作</h3>
+                <div class="action-buttons">
+                    <button onclick="updateScore('repeat_question', 'correct')" class="btn btn-success">重复问题 ✓ +0.5</button>
+                    <button onclick="updateScore('repeat_question', 'incorrect')" class="btn btn-danger">重复问题 ✗ -1</button>
+                    <button onclick="updateScore('answer_question', 'excellent')" class="btn btn-success">回答问题优秀 +3</button>
+                    <button onclick="updateScore('answer_question', 'good')" class="btn btn-success">回答问题良好 +2</button>
+                    <button onclick="updateScore('present', 'present')" class="btn btn-info">正常出席 +1</button>
+                </div>
+            </div>
+            
+            <div class="recent-calls">
+                <h3>最近点名</h3>
+                <div id="recentCalls" class="calls-list">
+                    <!-- 动态加载 -->
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+    <script>
+        let currentStudent = null;
+        
+        document.getElementById('rollCallBtn').addEventListener('click', performRollCall);
+        
+        function performRollCall() {
+            fetch('/api/roll_call/random', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    class_name: '软工K班'
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    currentStudent = data.data;
+                    displaySelectedStudent(currentStudent);
+                    loadRecentCalls();
+                } else {
+                    alert('点名失败: ' + data.message);
+                }
+            });
+        }
+        
+        function displaySelectedStudent(student) {
+            const container = document.getElementById('selectedStudent');
+            document.getElementById('selectedName').textContent = student.name;
+            document.getElementById('selectedId').textContent = student.student_id;
+            document.getElementById('selectedScore').textContent = student.total_score;
+            container.classList.remove('hidden');
+        }
+        
+        function updateScore(answerType, performance) {
+            if (!currentStudent) {
+                alert('请先选择学生');
+                return;
+            }
+            
+            fetch('/api/scores/update', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    student_id: currentStudent.student_id,
+                    answer_type: answerType,
+                    performance: performance
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    alert(`积分更新成功! ${data.score_delta > 0 ? '+' : ''}${data.score_delta}`);
+                    // 更新当前显示的积分
+                    currentStudent.total_score += data.score_delta;
+                    document.getElementById('selectedScore').textContent = currentStudent.total_score;
+                    loadRecentCalls();
+                } else {
+                    alert('积分更新失败');
+                }
+            });
+        }
+        
+        function loadRecentCalls() {
+            fetch('/api/roll_call/history')
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        displayRecentCalls(data.data);
+                    }
+                });
+        }
+        
+        function displayRecentCalls(records) {
+            const container = document.getElementById('recentCalls');
+            container.innerHTML = records.map(record => `
+                <div class="call-item">
+                    <span>${record.student_name}</span>
+                    <span class="time">${record.call_time.split(' ')[1]}</span>
+                    ${record.score_change ? `<span class="score ${record.score_change > 0 ? 'positive' : 'negative'}">${record.score_change > 0 ? '+' : ''}${record.score_change}</span>` : ''}
+                </div>
+            `).join('');
+        }
+        
+        // 初始化
+        loadRecentCalls();
+    </script>
+</body>
+</html>
\ No newline at end of file
