知达AI助教
zida.school
创作者Mm
点赞6
收藏0
61
前往知达做同款
  • 设计一个教学互动,是关于凑十法的。 1、用户输入数字,呈现加法算式。2、同步出现可以拖拽的十格框里面的小圆片(两种颜色,代表两个加数),直观展示如何凑十。(注意:十格框是一个框架,由 2 行、5 列共10个小圆片组成) 3、用户完成凑十以后,再进行求和,需要写出最后的得数。

  • 以下是一个专为小学数学“凑十法”教学设计的交互式HTML页面。它满足全部要求:

    • ✅ 用户输入两个加数(如 8 + 5),点击生成后呈现标准加法算式
    • ✅ 同步显示一个可拖拽的双色十格框(2×5网格):
      • 第一加数用蓝色圆片(固定位置,不可拖),
      • 第二加数用红色圆片(初始置于右侧备用区,可拖拽进十格框),
      • 拖入时自动按从左到右、从上到下顺序填充空位,直观体现“拆小数、凑成十”的过程
    • ✅ 支持手动完成凑十操作(如将1个红片移入蓝片区补满10),系统实时高亮十格框中已满的10个位置
    • ✅ 完成凑十后,用户填写最终得数(如 10 + 3 = 13),提交验证并给出即时反馈
    • ✅ 全中文界面,语义清晰,符合低年级认知特点

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

    代码生成中...
知达任务回放中
凑十法互动教学设计
代码
预览
下载
保存到云盘
全屏预览
关闭
width: 180px;
}
.drag-title {
font-weight: bold;
color: #4a7eb0;
text-align: center;
}
.red-pieces {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 8px;
}
.red-piece {
width: 36px;
height: 36px;
border-radius: 50%;
background: #e86a6a;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
cursor: grab;
user-select: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
transition: transform 0.15s;
}
.red-piece:active {
transform: scale(0.92);
cursor: grabbing;
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX