图像配对 (Image Pairing)

图像配对 (Image Pairing) 是一种轻量级的拖放交互，要求学习者将一侧的图像拖拽到另一侧相匹配的图像上。与传统的记忆翻牌游戏不同，所有卡片都是可见的，因此它更侧重于知识关联和识别能力，而非短期记忆。

本教程目标

通过本教程，您将学会：

请先注册并登录课灵账号(可以使用微信登录)，在工作区点击"创建"，并选择『图像配对 (Image Pairing)』开始创作。

下面是我们将在本教程中创建的图像配对游戏，主题是「中国宇航员」，学习者需要拖拽左边航天员的肖像到右边与姓名配对到一起。

示例包含12张卡片；拖拽左边航天员的肖像到右边与姓名配对到一起

快速复制示例

从 H5P 内容类型列表中选择『图像配对』

在 『标题』 字段中输入：中国宇航员

提示

别忘了点击标题旁的 『元数据』(Metadata) 按钮，为您的内容添加版权信息和许可证。

在 『任务描述』 字段中输入指导说明： 你都认识我们国家哪些航天员？请拖拽左边航天员的肖像到右边与姓名配对到一起

设置标题与任务描述

点击 『添加卡片』 按钮，创建一组配对关系。

以本示例中的“杨利伟”卡片为例：

图片 (Image)：
- 点击 『添加』 上传杨利伟的照片。
- 图像的替代文本：输入 身着宇航服的杨利伟（描述图片视觉内容）。
匹配图像 (Image to match)：
- 这里我们不使用第二张照片，而是使用一张包含名字的图片。点击 『添加』 上传带有“杨利伟”文字的图片。
- 匹配图像的替代文本：输入 杨利伟（如果是文字图片，直接输入文字内容）。

最佳实践：图片尺寸

为了获得整洁的布局，建议所有配对卡片使用相同的宽高比（例如都是 1:1 正方形或 4:3 矩形）。

继续添加其他航天员的配对卡片，如邓清明、翟志刚、费俊龙等。

上传第一张图片和需要匹配的第二张图片（或文字图片）

点击 『保存并关闭』 生成完整的图像配对游戏。您现在应该有一个与本教程顶部示例类似的结果。

拖放操作 (Drag & Drop)：
- 按住左侧的图片（源），将其拖动到右侧对应的目标图片上。
- 注意：只能从左拖到右，不能反向操作。
即时反馈 (Instant Feedback)：
- 正确：配对成功后，两张卡片会吸附在一起，并显示绿色边框。
- 错误：配对错误时，卡片会自动弹回原位，允许立即重试。
重试机制 (Retry)：学习者可以无限次尝试，这种低风险的设计鼓励学生通过试错来学习。

替代文本 (Alt Text)：必须填写。由于这本质上是图片的配对，屏幕阅读器完全依赖 Alt Text 来告诉视障用户“这是什么”。
- 示例：不要只写"图片1"，而要写"穿着太空服的杨利伟"。
文字图片的可读性：
- 如果您像本教程一样使用包含文字的图片，请确保字体清晰、对比度高。
- 技巧：直接在 PPT 或 Canva 中制作文字卡片，导出为图片后再上传。
键盘支持：
- 使用 Tab 键在左侧图片间切换。
- 按 Enter 或 Space 选中一张图片。
- 焦点会自动跳到右侧，使用箭头键选择目标，再次按键确认配对。