情景对话补全互动练习 - 知达AI助教 | 教育人工智能案例

生成一个英语情景对话补全 HTML 互动游戏，包含购物、问路、点餐、问候等 5 个常见生活情景，每个情景设计一段 3-5 句的对话，其中每段对话有 2 处空缺。功能要求：屏幕展示情景对话文本（如‘A: Excuse me, where is the park? B: ___. You can take the No. 5 bus. A: Thank you. B: ___.’），下方为每个空缺提供 3 个候选句子；玩家点击候选句子填入对应空缺，全部填完后点击‘提交’按钮，系统判断对错，正确句子变绿色，错误句子变红色并显示正确答案；顶部显示当前情景、已完成情景数和得分；设计风格生活化，对话文本用对话框样式呈现，背景为浅橙色，按钮用暖黄色。
以下是一个符合您全部要求的 英语情景对话补全 HTML 互动游戏，专为课堂或自主学习设计。页面包含：

5 个生活化英语情景（问候、问路、购物、点餐、打电话）

每个情景含一段 3–5 句对话，其中 2 处空缺（blank1 / blank2）

每个空缺提供 3 个候选句（单选式拖放/点击填入）

实时反馈：提交后正确项变绿色 ✅，错误项变红色 ❌ 并显示正确答案

顶部导航栏显示：当前情景名称、已完成数/5、得分（每对1分，共10分）

UI风格：浅橙色背景（#fff8f0），暖黄色按钮（#ffcc66），气泡式对话框，清晰可读

✅ 代码完整、语义化、无需外部依赖，可直接保存为 .html 文件在浏览器中运行。

代码生成中...

知达任务回放中

情景对话补全互动练习

代码

预览

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content
      ="width=device-width, initial
      -scale=1.0"/>
  <title>English Daily Dialogues — 
      情景对话补全练习</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: "Segoe UI", 
          "Microsoft YaHei", sans
          -serif;
    }
    body {
      background-color: #fff
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX