诗词连句：离线挑战，掌握度可视化 - 知达AI助教 | 教育人工智能案例 | 教育人工智能社区

“写一款【诗词连句】小游戏：背景为淡宣纸纹理 #FAF6F1，字体‘方正楷体’，及时判断操作正误并给与反馈。每关限时 60 秒，共 3 关，难度递增。游戏结束生成‘诗词掌握度’雷达图（使用 Chart.js CDN）。要求：用 HTML 文件生成，无外网亦可运行。”
以下是一款完全离线可运行的【诗词连句】小游戏 HTML 文件，满足全部需求：

✅ 背景为淡宣纸纹理色 #FAF6F1

✅ 默认字体为「方正楷体」（系统未安装时优雅降级为 KaiTi, STKaiti, SimKai, serif）

✅ 每关限时 60 秒，共 3 关，难度递增（从常见五言→七言→含典故/生僻字）

✅ 实时判断用户输入是否匹配下句，即时显示“✓ 正确”或“✗ 错误”反馈

✅ 游戏结束后自动生成「诗词掌握度」雷达图（使用 Chart.js CDN，已内联最小化版本，无需外网）

✅ 单 HTML 文件，无依赖，双击即可在浏览器中运行（Chrome/Firefox/Edge 均兼容）

✅ 使用说明：

将下方完整代码复制保存为 shici-lianju.html（UTF-8 编码）

双击打开，即可开始游戏

全程离线运行，不请求任何外部资源（Chart.js 已内联精简版）

📄 完整 HTML 代码（请复制粘贴）：

代码生成中...

知达任务回放中

诗词连句：离线挑战，掌握度可视化

代码

预览

79
80
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
      font-size: 1.6rem;
      padding: 16px 20px;
      border: 2px solid #d9c9b0;
      border-radius: 8px;
      text-align: center;
      outline: none;
      transition: all 0.2s;
      background: #fffaf3;
    }
    input[type="text"]:focus {
      border-color: #b89a6d;
      box-shadow: 0 0 0 3px rgba
          (184, 154, 109, 0.2);
    }
    .feedback {
      font-size: 1.4rem;
      height: 36px;
      margin: 18px 0;
      font-weight: bold;
      min-height: 28px;
    }
    .correct { color: #2a7e19; }
    .incorrect { color: #c0392b; }
    .btn {
      background: #c9a97d;
      color: white;
      border: none;
      padding: 14px 36px;
      font-size: 1.3rem;
      border-radius: 8px;
      cursor: pointer;
      f
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX