开年迄今，于网络之上，最为火爆的当属人工智能 deepseek，同时亦掀起了人工智能于各行各业中的应用浪潮。未来已至，为避免被社会淘汰，近段时日，分享些许人工智能在教育教学领域的应用，部分内容、观点以及素材源自网络。
想法
做一个班级积分排行系统，以此激发学生的学习激情。系统中导入学生名单（按顺序分组）提供系统的通用性，然后四人一组，每行三组，组内显示积分，名单，分数加减；旁边显示实时排名等。
下面是提问过程
我是老师，请帮我做一个小组积分系统，用html语言显示。先用excel导入数据，按顺序分组，每组四人，在一个框内，框内显示分数，可以加减分数。对小组进行一个实时排名。
导入的名单是乱码，改进通用性，xlsx和csv格式都行，样式上优化一下，名单和实时排行左右排列，名单左边每行排3个。美观上优化一下
加一个关闭页面后能保存数据功能
增加自定义分组名称功能，可结合颜色区分不同分数段，添加组内成员贡献度统计，输出完整代码终结版
根据不断优化，最终得到一个比较理想美观的界面
代码
小组积分系统 - 终极版
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
实时排行榜
<script>
let groups = [];
// 初始化加载数据
window.addEventListener('load', () => {
const savedData = localStorage.getItem('groupSystemData');
if (savedData) {
try {
const data = JSON.parse(savedData);
groups = data.groups || [];
renderGroups();
updateRanking();
} catch (e) {
console.error('数据加载失败:', e);
}
}
});
// 文件处理
document.getElementById('fileInput').addEventListener('change', async function(e) {
const file = e.target.files[0];
if (!file) return;
try {
const students = await readFile(file);
initializeGroups(students);
saveData();
renderGroups();
updateRanking();
} catch (error) {
alert('文件读取失败: ' + error.message);
}
});
// 初始化小组
function initializeGroups(students) {
groups = [];
const groupCount = Math.ceil(students.length / 4);
for (let i = 0; i < groupcount i const members='students.slice(i*4,'> ({
name: name.trim(),
contribution: 0
}));
groups.push({
id: Date.now() + i,
customName: `第 ${i+1} 组`,
members,
color: getGroupColor(0) // 初始颜色
});
}
}
// 渲染小组
function renderGroups() {
const container = document.getElementById('groupsContainer');
container.innerHTML = '';
groups.forEach((group, index) => {
const total = calculateTotalScore(group);
const card = document.createElement('div');
card.className = 'group-card';
card.style.borderColor = getGroupColor(total);
card.innerHTML = `
${group.customName}
${total} 分
${group.members.map((member, idx) => `
${member.name}
${member.contribution}
`).join('')}
`;
container.appendChild(card);
});
}
// 编辑组名
function editGroupName(index) {
const newName = prompt('请输入新的小组名称:', groups[index].customName);
if (newName) {
groups[index].customName = newName;
saveData();
renderGroups();
}
}
// 更新贡献值
function updateContribution(groupIndex, memberIndex, delta) {
groups[groupIndex].members[memberIndex].contribution += delta;
updateGroupColor(groupIndex);
saveData();
renderGroups();
updateRanking();
}
// 全员调整贡献值
function updateAllContributions(groupIndex, delta) {
groups[groupIndex].members.forEach(member => {
member.contribution += delta;
});
updateGroupColor(groupIndex);
saveData();
renderGroups();
updateRanking();
}
// 计算总分
function calculateTotalScore(group) {
return group.members.reduce((sum, member) => sum + member.contribution, 0);
}
// 获取组颜色
function getGroupColor(total) {
if (total >= 100) return '#2ecc71';
if (total >= 50) return '#f1c40f';
if (total >= 0) return '#e67e22';
return '#e74c3c';
}
// 更新组颜色
function updateGroupColor(groupIndex) {
const total = calculateTotalScore(groups[groupIndex]);
groups[groupIndex].color = getGroupColor(total);
}
// 更新排名
function updateRanking() {
const sorted = [...groups].sort((a, b) =>
calculateTotalScore(b) - calculateTotalScore(a));
const rankingDiv = document.getElementById('ranking');
rankingDiv.innerHTML = '';
sorted.forEach((group, index) => {
const item = document.createElement('div');
item.className = 'rank-item';
item.innerHTML = `
${index + 1}
${group.customName}
${calculateTotalScore(group)} 分
`;
rankingDiv.appendChild(item);
});
}
// 文件读取
async function readFile(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (e) => {
try {
let data = [];
if (file.name.endsWith('.xlsx')) {
const workbook = XLSX.read(e.target.result, {type: 'array'});
const sheet = workbook.Sheets[workbook.SheetNames[0]];
data = XLSX.utils.sheet_to_json(sheet, {header: 1})
.flat()
.filter(x => x && x.toString().trim());
} else {
const text = new TextDecoder('utf-8').decode(e.target.result);
data = text.split('\n')
.map(line => line.trim())
.filter(line => line);
}
resolve(data);
} catch (error) {
reject(error);
}
};
reader.onerror = () => reject(new Error('文件读取错误'));
if (file.name.endsWith('.xlsx')) {
reader.readAsArrayBuffer(file);
} else {
reader.readAsArrayBuffer(file);
}
});
}
// 数据存储
function saveData() {
localStorage.setItem('groupSystemData', JSON.stringify({
version: 2.0,
groups: groups,
timestamp: new Date().getTime()
}));
}
// 清除数据
function clearData() {
if (confirm('确定要清除所有数据吗？')) {
localStorage.removeItem('groupSystemData');
groups = [];
renderGroups();
updateRanking();
document.getElementById('fileInput').value = '';
}
}
// 页面关闭前自动保存
window.addEventListener('beforeunload', () => saveData());
</script>
主要升级功能说明：
自定义小组名称：
双击小组名称进行修改
支持中文命名
修改后立即生效并保存
智能颜色区分系统：
根据总分自动变色：
红色（<0分）：#e74c3c
橙色（0-49分）：#e67e22
黄色（50-99分）：#f1c40f
绿色（≥100分）：#2ecc71
颜色指示器实时显示当前状态
成员贡献度统计：
每个成员独立贡献值显示
支持单个成员±1分调整
支持全员±1分批量操作
贡献值实时影响总分和排名
增强的数据管理：
版本化数据存储（v2.0）
自动保存所有操作
支持跨会话数据恢复
完善的错误处理机制
视觉优化：
动态颜色边框
悬浮动画效果
紧凑的成员列表布局
直观的颜色指示器
响应式按钮设计
使用指南：
数据导入：
- 准备CSV/XLSX文件（第一列包含学生姓名）
- 点击上传按钮选择文件
- 系统自动创建4人小组
基础操作：
- 双击小组名称进行重命名
- 点击成员旁的±1按钮调整个人贡献
- 使用"全员±1"按钮进行批量调整
数据维护：
- 数据自动保存到本地
- 清除数据需二次确认
- 支持浏览器刷新/关闭恢复
状态识别：
- 边框颜色反映小组总分状态
- 右侧排名实时更新
- 颜色指示器同步总分状态
注意事项：
- Excel文件建议使用单列学生名单
- 成员贡献值允许负数
- 颜色规则可在getGroupColor函数中自定义
- 数据存储在浏览器本地，更换设备需重新导入
- 建议使用Chrome/Firefox等现代浏览器
界面情况
最终优化的基本能达到要求，但有一个功能最终版本丢失，数据导出和导入功能。这个系统能够实时展示小组的积分和排名情况，能有效激励小组间的有序竞争，下次探索做一个积分刮奖系统。
需要最近基础实例文件的留言