凑十法互动教学设计 - 知达AI助教 | 教育人工智能案例 | 教育人工智能社区

设计一个教学互动，是关于凑十法的。 1、用户输入数字，呈现加法算式。2、同步出现可以拖拽的十格框里面的小圆片（两种颜色，代表两个加数），直观展示如何凑十。（注意：十格框是一个框架，由 2 行、5 列共10个小圆片组成） 3、用户完成凑十以后，再进行求和，需要写出最后的得数。
以下是一个专为小学数学“凑十法”教学设计的交互式HTML页面。它满足全部要求：

✅ 用户输入两个加数（如 8 + 5），点击生成后呈现标准加法算式

✅ 同步显示一个可拖拽的双色十格框（2×5网格）：

第一加数用蓝色圆片（固定位置，不可拖），

第二加数用红色圆片（初始置于右侧备用区，可拖拽进十格框），

拖入时自动按从左到右、从上到下顺序填充空位，直观体现“拆小数、凑成十”的过程

✅ 支持手动完成凑十操作（如将1个红片移入蓝片区补满10），系统实时高亮十格框中已满的10个位置

✅ 完成凑十后，用户填写最终得数（如 10 + 3 = 13），提交验证并给出即时反馈

✅ 全中文界面，语义清晰，符合低年级认知特点

✅ 直接复制以下完整HTML代码，保存为 .html 文件后在浏览器中打开即可使用（无需服务器）：

代码生成中...

知达任务回放中

凑十法互动教学设计

代码

预览

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
113
      justify-content: center;
      margin: 25px 0;
      gap: 30px;
    }
    .ten-frame {
      display: grid;
      grid-template-columns: repeat(5, 1fr
          );
      grid-template-rows: repeat(2, 1fr);
      gap: 6px;
      width: 250px;
      height: 100px;
      background: #eef7ff;
      padding: 12px;
      border-radius: 8px;
      border: 2px dashed #a0c8e8;
      position: relative;
      overflow: hidden;
    }
    .ten-frame::before {
      content: "十格框";
      position: absolute;
      top: 4px;
      right: 8px;
      font-size: 0.8rem;
      color: #7aa7d6;
      font-weight: bold;
    }
    .cell {
      width: 36px;
      height: 36px;
      border-radius: 50%;
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX