跳到主要内容

对话模拟器 (Chat Simulator)

对话模拟器是一种用于演示与训练的气泡式聊天内容类型。你可以为左右两侧的参与者配置头像、名称与颜色；按时间顺序添加消息并设置自动启动、播放速度与固定聊天高度；支持滚动查看。它适用于客服脚本演练、面试情景模拟、课堂沟通训练等场景。通过合理的视觉对比与可访问性设置，可帮助学习者清晰跟随对话并快速复盘关键信息。

本教程目标​

  • 了解「对话模拟器」的适用场景与核心功能
  • 学习创建角色、添加消息、设置启动与尺寸行为

第一次使用课灵？

请先注册并登录课灵账号(可以使用微信登录)，在工作区点击"创建"，并选择『对话模拟器（Chat Simulator）』开始创作。

注册/登录

何时使用对话模拟器​

  • 角色扮演训练：客服脚本、求职面试、课堂情景对话
  • 沟通技巧演练：冲突处理、同理心表达、流程讲解

教程示例​

下面展示的是一个典型的对话场景示例：左侧为接收者，右侧为发送者，对话按时间顺序自动播放并支持滚动查看。

示例含 10 条消息、自动启动与固定聊天窗口高度
快速复制示例
  • 点击 这里➜将示例复制到你的课灵工作区
  • 在打开的页面点击“复制”
  • 随后在生成的副本中点击“编辑”
  • 即可查看并操作本教程所示的设置。

创建对话模拟器：分步指南​

步骤 1：创建新内容​

  1. 在 H5P 编辑器的内容类型列表中选择 『对话模拟器 (Chat Simulator)』或搜索chat。
  2. 进入编辑器后，左侧显示消息列表，右侧为消息详情与设置区域。
选择手风琴内容类型
从 H5P 内容类型列表中选择『对话模拟器』

步骤 2：添加消息​

  1. 在「消息文本」中输入对话内容，支持 Emoji 表情。
  2. 在「消息来源」中选择 发送者（右侧） 或 接收者（左侧），用于决定气泡出现的位置与颜色。
  3. 点击底部 『添加MESSAGE』，消息会加入左侧列表中。
  4. 重复添加，形成完整的对话脚本；可通过列表操作进行删除或重新排序。
消息编辑示例：消息文本与消息来源
为每条消息指定文本与来源，逐条加入列表

步骤 3：配置角色与视觉​

在「视觉设置」中分别为发送者与接收者配置：

  • 默认背景颜色：用于该侧聊天气泡与栏目的主色，务必确保文字与背景对比度充足。
  • 图标图像：建议使用正方形图片。
  • 用户名：用于标注左/右侧的参与者姓名。
视觉设置示例：角色的颜色、图标与用户名
为两侧角色设置颜色、图标与用户名

步骤 4：行为设置​

  • 启动行为：选择 可见时自动启动 或 手动启动。手动启动适合课堂讨论式引导。
  • 显示播放器栏：启用后，底部显示播放控制（播放/暂停等）。
  • 内容大小调整：在 固定聊天高度 与 随消息增长聊天高度 间选择。
    • 固定聊天高度：设置一个高度（例如 360–600px），超出部分可滚动；适合嵌入页面。
    • 随消息增长聊天高度：容器随消息增加而变高；适合独立展示或页面空间充裕的场景。
行为设置示例：启动方式、播放器栏与尺寸调节
根据教学场景选择启动方式与尺寸策略

步骤 5：预览与发布​

点击 『保存并关闭』 生成完整的对话模拟。检查消息节奏、颜色与高度是否符合预期。您现在应该有一个与本教程顶部示例类似的结果。

交互说明​

  • 自动启动：内容可见时按消息顺序播放；手动模式需点击播放。
  • 滚动阅读：当高度固定且消息较多时，用户可滚动查看历史消息。
  • 键盘操作：焦点在播放器栏时可用空格/回车播放暂停；确保页面的可访问导航不被遮挡。
  • Emoji 支持：消息文本支持 Emoji，用于增强表达与语气。

优化与可访问性建议​

  • 对比度：为左右两侧选择高对比的背景与文字颜色，满足 WCAG AA。
  • 节奏控制：消息长度适中，使用手动启动引导关键讨论节点。
  • 高度与布局：在页面中优先使用固定高度，避免影响整体排版；在独立页面可选择随消息增长。
  • 文本备份：为课堂资料准备文字脚本或讲义，便于无障碍阅读与复习。

专家提示：用例灵感与相关内容类型推荐​

应用场景灵感

  • 培训脚本演练：客服/销售/技术支持的标准话术复盘与角色扮演
  • 面试模拟：HR 提问与候选人回答，练习结构化表达与复盘要点
  • 课堂讨论引导：展示示范对话，提示关键问题与反馈语言，支持滚动回看

相关内容类型推荐

最后由 Sam Xu 于 更新