图像配对 (Image Pairing)教程

图像配对(ImagePairing)教程图像配对(ImagePairing)是一种轻量级的拖放交互，要求学习者将一侧的图像拖拽到另一侧相匹配的图像上。与传统的记忆翻牌游戏不同，所有卡片都是可见的，因此它更侧重于知识关联和识别能力，而非短期记忆。本教程目标通过本教程，您将学会：创建视觉关联任务：设计“图片-图片”或“图片-文字”的配对练习。优化无障碍体验：为图像添加替代文本，确保所有学习者都能参与。设计有效的反馈：利用自动检查机制，提供即时的学习反馈。何时使用图像配对人物认知：如本教程示例，将人物肖像与其姓名或成就配对。词汇学习：将物体图片与对应的单词（中文/英文）配对，特别适合语言初学者。概念分类：将具体实例（如不同种类的叶子）与其类别名称配对。科学图解：将生物器官图与功能描述图配对，或化学元素符号与名称配对。地理知识：将国家轮廓图与国旗或首都名称配对。教程示例下面是我们将在本教程中创建的图像配对游戏，主题是「中国宇航员」，学习者需要拖拽左边航天员的肖像到右边与姓名配对到一起。HYPERLINK/content/01k6zg2hvskbfdcs20bcb6b540normalLink\tdfe-10\tdlttext\tdlfFromDialog\tdtf0\tdsubnormalLink\tdkey1xuf98点击这里浏览示例示例包含12张卡片；拖拽左边航天员的肖像到右边与姓名配对到一起快速复制示例点击HYPERLINK/content/01k6zg2hvskbfdcs20bcb6b540normalLink\tdft\tdfe-10\tdfid\tddp\tdop\tdltinline\tdds\tdfvi\tdlf\tdtf\l\tdsubnormalLink\tdkeya4m9vj\tdkeya4m9vj这里➜将示例复制到你的课灵工作区在打开的页面点击"复制"(注意：请确保已登录课灵账号，否则无法复制)随后在生成的副本中点击"编辑"即可查看并操作本教程所示的设置。创建图像配对：分步指南步骤1：创建新内容在课灵工作区点击「创建」，进入H5P编辑器在内容类型列表中选择『图像配对』或搜索ImagePairing进入编辑界面开始配置从H5P内容类型列表中选择『图像配对』步骤2：设置标题与任务描述在『标题』字段中输入：中国宇航员提示别忘了点击标题旁的『元数据』(Metadata)按钮，为您的内容添加版权信息和许可证。在『任务描述』字段中输入指导说明：你都认识我们国家哪些航天员？请拖拽左边航天员的肖像到右边与姓名配对到一起设置标题与任务描述步骤3：创建配对卡片点击『添加卡片』按钮，创建一组配对关系。以本示例中的“杨利伟”卡片为例：图片(Image)：点击『添加』上传杨利伟的照片。图像的替代文本：输入身着宇航服的杨利伟（描述图片视觉内容）。匹配图像(Imagetomatch)：这里我们不使用第二张照片，而是使用一张包含名字的图片。点击『添加』上传带有“杨利伟”文字的图片。匹配图像的替代文本：输入杨利伟（如果是文字图片，直接输入文字内容）。最佳实践：图片尺寸为了获得整洁的布局，建议所有配对卡片使用相同的宽高比（例如都是1:1正方形或4:3矩形）。继续添加其他航天员的配对卡片，如邓清明、翟志刚、费俊龙等。上传第一张图片和需要匹配的第二张图片（或文字图片）步骤4：保存与预览点击『保存并关闭』生成完整的图像配对游戏。您现在应该有一个与本教程HYPERLINK/docs/tutorials/tasks/image-pairing#%E6%95%99%E7%A8%8B%E7%A4%BA%E4%BE%8BnormalLink\tdft\tdfe-10\tdfid\tddp\tdop\tdltinline\tdds\tdfvi\tdlf\tdtf\l\tdsubnormalLink\tdkeybc60nb\tdkeybc60nb顶部示例类似的结果。交互说明拖放操作(Drag&Drop)：按住左侧的图片（源），将其拖动到右侧对应的目标图片上。注意：只能从左拖到右，不能反向操作。即时反馈(InstantFeedback)：正确：配对成功后，两张卡片会吸附在一起，并显示绿色边框。错误：配对错误时，卡片会自动弹回原位，允许立即重试。重试机制(Retry)：学习者可以无限次尝试，这种低风险的设计鼓励学生通过试错来学习。优化与可访问性替代文本(AltText)：必须填写。由于这本质上是图片的配对，屏幕阅读器完全依赖AltText来告诉视障用户“这是什么”。示例：不要只写"图片1"，而要写"穿着太空服的杨利伟"。文字图片的可读性：如果您像本教程一样使用包含文字的图片，请确保字体清晰、对比度高。技巧：直接在PPT或Canva中制作文字卡片，导出为图片后再上传。键盘支持：使用Tab键在左侧图片间切换。按Enter或Space选中一张图片。焦点会自动跳到右侧，使用箭头键选择目标，再次按键确认配对。专家提示：用例灵感与相关内容类型推荐想拓展『图像配对』的使用场景？以下是一些创意方向：艺术教育：将画作局部与完整作品配对，训练观察力。生物学：将动物的足迹与其照片配对。日常生活：将交通标志与其含义（文字图片）配对。逻辑训练：将问题（如"2+2=?"）与答案图片（如数字"4"的积木图）配对。选型指南：图像配对vs.匹配(Matching)很多用户容易混淆这两个组件，区别如下：图像配对(ImagePairing)：交互：拖放图片到图片。核心：基于视觉的识别与关联。适用：低龄段、语言学习、直观认知任务。HYPERLINK/docs/tutorials/tasks/matchingnormalLink\tdft\tdfe-10\tdfid\tddp\tdop\tdltinline\tdds