历史事件排序互动游戏 - 知达AI助教 | 教育人工智能案例

生成一个历史事件时间排序 HTML 游戏，包含 5 个历史事件（如‘辛亥革命’‘五四运动’等）。功能要求：事件名称随机排列在下方，玩家拖动事件到上面空白方框中的正确位置（每个历史事件都是独立的方框）；松手后判断对错，如果正确则固定在方框中，错误才返回原位；全部正确后显示‘完成’动画，可重置重新排序。设计风格简约庄重，事件卡片带轻微阴影。所有方框和文字均采用横向直线排序不要换行，排序时实时显示正误，正确方框变绿，错误变红。
以下是一个符合您全部要求的历史事件时间排序 HTML 游戏。代码完整、自包含（无需外部依赖），采用语义化结构，风格简约庄重，支持拖拽、实时反馈、完成动画与重置功能。

✅ 功能实现说明：

5个中国近现代重要历史事件（按真实时间顺序：1911 → 1919 → 1921 → 1937 → 1949）

拖拽区域横向排列，目标槽位与事件卡片均不换行

实时视觉反馈（正确→绿色边框/背景，错误→红色）

全部正确后触发动画并显示“完成”，点击“重新开始”可重置

卡片带轻微阴影、字体清晰、配色沉稳（深灰文字 + 浅灰背景 + 绿/红强调）

代码生成中...

知达任务回放中

历史事件排序互动游戏

代码

预览

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
114
115
116
117
    .event-card {
      width: 180px;
      height: 90px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0, 
          0, 0, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 15px;
      color: #2c3e50;
      cursor: move;
      user-select: none;
      transition: all 0.2s ease;
      flex-shrink: 0;
      border: 1px solid #e9ecef;
    }
    .event-card.dragging {
      opacity: 0.7;
      transform: scale(1.03);
      z-index: 1000;
      box-shadow: 0 4px 12px rgba(0
          , 0, 0, 0.15);
    }
    .event-card.correct {
      background-color: #d4edda;
      border-color: #28a745;
      color: #155724;
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX