图像排序 (Image Sequencing)
图像排序 (Image Sequencing) 要求学习者将一组无序的图像按照正确的逻辑顺序重新排列。这种交互方式不仅适合展示过程、时间线或故事情节，还支持为每张图片添加音频旁白，使其成为一种多感官的学习体验。
本教程目标
通过本教程，您将学会：
- 创建多媒体排序任务：结合图像与音频，设计更丰富的互动体验。
- 配置辅助功能：设置无障碍描述和键盘导航支持，确保所有学习者都能使用。
- 优化反馈机制：启用解决方案和重试选项，鼓励学生自主探索与纠正。
第一次使用课灵？
请先注册并登录课灵账号(可以使用微信登录)，在工作区点击"创建"，并选择『图像排序 (Image Sequencing)』开始创作。
何时使用图像排序
- 故事重述 (Story Retelling)：如本教程示例，要求学生按情节发展重排故事场景，检查阅读理解。
- 过程演示 (Process Demonstration)：展示科学实验步骤、烹饪流程或软件操作顺序。
- 时间线梳理 (Timelines)：排列历史事件、生物进化阶段或产品生命周期。
- 逻辑推理 (Logical Reasoning)：通过排列因果关系图（如：云 -> 雨 -> 植物生长），训练逻辑思维。
- 语言学习 (Language Learning)：结合音频，让学生听到描述后选择对应的图片顺序，训练听力与语序。
教程示例
下面是我们将在本教程中创建的图像排序活动，主题是「邋遢的喜鹊」，学习者需要根据故事情节，将莫里斯收集礼物到回归大自然的图片按正确顺序排列。
拖动下面的图片按故事中的正确顺序排列；点击图片右上方的音频按钮可播放描述
快速复制示例
- 点击 这里➜ 将示例复制到你的课灵工作区
- 在打开的页面点击"复制" (注意：请确保已登录课灵账号，否则无法复制)
- 随后在生成的副本中点击"编辑"
- 即可查看并操作本教程所示的设置。
创建图像排序：分步指南
步骤 1：创建新内容
- 在课灵工作区点击「创建」，进入 H5P 编辑器
- 在内容类型列表中选择 『图像排序』 或搜索
Image Sequencing - 进入编辑界面开始配置
从 H5P 内容类型列表中选择『图像排序』
步骤 2：设置标题与任务描述
在 『标题』 字段中输入：邋遢的喜鹊 （图像排序）
提示
别忘了点击标题旁的 『元数据』(Metadata) 按钮，为您的内容添加版权信息和许可证。
在 『任务描述』 字段中输入指导说明：
根据《邋遢的喜鹊》的故事，拖动下面的图片按故事中的正确顺序排列。点击图片右上方的音频按钮播放图片描述。
无障碍支持
您还可以在 『无障碍任务描述』 中为屏幕阅读器用户提供专门的指导：
正确排序以下列表。使用光标键浏览列表项，使用空格激活或停用项目，使用光标键移动它
设置标题、任务描述及无障碍说明
步骤 3：添加排序图像与音频
点击 『添加图像』 按钮，按正确的顺序上传图片并添加描述。
图片尺寸建议
为了获得最佳视觉效果，建议所有图片保持相同的宽高比（例如都是 4:3 或 1:1）。这能确保排列整齐，避免视觉混乱。
以本示例中的前两个阶段为例：
项目 1：收藏家莫里斯
- 图片：上传喜鹊莫里斯收集各种物品的图片。
- 图片描述：
莫里斯是个收藏家（当图片无法显示时，此文本将作为替代文本；也可用于鼠标悬停提示）。 - 音频文件：上传对应的旁白音频（如 mpeg 格式）。这为活动增加了多感官体验。
项目 2：发现礼物
- 图片：上传莫里斯发现礼物的图片。
- 图片描述：
发现了一个礼物。 - 音频文件：上传对应音频。
继续添加剩余的 6 张图片（共 8 张），分别对应故事的后续情节：礼物太多、环境伤害、跟着卡车、搬家、播种、大自然最美丽。
上传图片、填写描述并添加可选的音频文件
步骤 4：配置行为设置
展开 『行为设置』 部分，调整互动体验：
- 为游戏添加显示解决方案按钮：勾选。允许用户查看正确顺序。
- 添加游戏结束时重试按钮：勾选。鼓励反复练习。
- 添加按钮以从当前状态恢复：勾选。允许用户在中断后恢复之前的进度。
启用解决方案、重试及状态恢复按钮
步骤 5：保存与预览
点击 『保存并关闭』 生成完整的图像排序活动。您现在应该有一个与本教程顶部示例类似的结果。
交互说明
- 拖放操作 (Drag & Drop)：这是最直观的交互方式。在触摸屏设备上，体验尤为流畅。
- 音频辅助 (Audio Support)：
- 点击图片右上角的 扬声器图标 即可播放音频。
- 音频播放不会打断排序操作，学生可以一边听一边思考位置。
- 键盘导航 (Keyboard Navigation)：
- 使用
Tab键进入图片列表。 - 使用
左/右箭头键在图片间移动焦点。 - 使用
Space(空格键) 选中一张图片，再次移动焦点并按Space键将其放置到新位置（交换位置）。
- 使用
优化与可访问性
- 图片描述 (Alt Text)：必须填写。
- 对于视力正常的用户，它是图片加载失败时的替代文本，也是鼠标悬停时的提示。
- 对于屏幕阅读器用户，这是他们理解图片内容的唯一途径。
- 音频的双重作用：
- 音频不仅是装饰，更是脚手架。对于阅读困难的学生，听觉信息能帮助他们理解复杂的图片内容。
- 无障碍任务描述：
- 这里的文本是不可见的，仅供屏幕阅读器朗读。请使用祈使句，清晰地说明操作方法（如本教程示例所示）。
专家提示：用例灵感与相关内容类型推荐
想拓展『图像排序』的使用场景？以下是一些创意方向：
- 漫画创作：提供打乱的漫画格子，让学生复原故事逻辑。
- 算法可视化：排列流程图组件，展示正确的程序执行逻辑。
- 艺术鉴赏：按时间顺序排列画家的不同时期作品，展示风格演变。
- 急救培训：排列 CPR（心肺复苏）的正确操作步骤，强化肌肉记忆。
提示
