60秒速算挑战赛 - 知达AI助教 | 教育人工智能案例

提示词：编写html版速算小能手，功能：随机生成加减乘除题目，限时作答，实时显示得分与排名，技术：HTML动态生成题目，JavaScript计时与评分，点击开始计时，答错扣分，每开始一次计一次排名，可以输入学生姓名，正误显示在答题框下方。
以下是一个符合要求的 HTML 版「速算小能手」页面实现。该页面具备以下功能：

✅ 输入学生姓名

✅ 点击「开始挑战」后动态生成随机加减乘除题目（含合理数值范围，避免负数/小数干扰小学阶段）

✅ 倒计时 60 秒（可配置），实时显示剩余时间

✅ 实时提交答案，答对 +1 分，答错 -1 分（最低分不小于 0）

✅ 每次挑战独立计分，并按得分从高到低生成本次会话内「排名」（仅当前页面生命周期有效，不涉及服务器存储）

✅ 答题框下方即时显示「正确 ✅」或「错误 ❌：应为 X」提示

✅ 全中文界面，语义化 HTML + 内联 CSS + 原生 JavaScript（无外部依赖）

✅ 完整可运行 HTML 文件（复制保存为 .html 即可打开使用）：

代码生成中...

知达任务回放中

60秒速算挑战赛

代码

预览

81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
    }
    .game {
      padding: 24px;
      display: none;
    }
    .status-bar {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      font-size: 18px;
      font-weight: bold;
      color: #1890ff;
    }
    .problem {
      font-size: 32px;
      text-align: center;
      margin: 24px 0;
      min-height: 60px;
      color: #262626;
    }
    .answer-input {
      width: 100%;
      padding: 14px;
      font-size: 20px;
      text-align: center;
      border: 2px solid #d9d9d9;
      border-radius: 8px;
      outline: none;
      transition: border-color 0.2s;
    }
    .answer-input:focus {
      border-color: #1890ff
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

✅ 完整可运行 HTML 文件（复制保存为 .html 即可打开使用）：

✅ 完整可运行 HTML 文件（复制保存为 `.html` 即可打开使用）：