拖放题 (Drag and Drop)

拖放题 (Drag and Drop) 是一种高互动性的内容类型，允许学习者通过拖拽元素（图片或文本）到指定的放置区域来完成任务。这种直观的操作方式不仅能有效测试知识掌握程度，还能通过视觉和动觉的双重参与，显著提升学习者的参与度和记忆保持率。无论是简单的图文匹配，还是复杂的分类与排序，拖放题都能提供生动的学习体验。

本教程学习目标

通过本教程，您将能够：

识别应用场景：准确判断何时使用拖放题来提升教学效果。
掌握创作流程：熟练运用 H5P 编辑器创建包含图片和文本的拖放练习。
精通高级配置：设置多对多匹配、视觉反馈及评分规则，打造专业级互动内容。

第一次使用课灵？

请先注册并登录课灵账号(可以使用微信登录)，在工作区点击"创建"，并选择『拖放题（Drag and Drop）』开始创作。

典型应用场景

拖放题非常适合评估学习者对概念关联、分类及过程的理解：

分类与归纳：要求学习者将项目（如动物、单词、化学元素）拖入正确的类别容器中。
匹配与关联：建立两个集合之间的对应关系，例如将国家旗帜拖到地图上的对应位置，或将术语与定义匹配。
排序与流程：按照逻辑或时间顺序排列元素，如历史事件排序或实验步骤重组。
空间位置识别：在背景图上标记正确位置，例如指出人体器官的位置或机器零件的安装点。
图文结合练习：将文本标签拖拽到图片对应位置，或将图片拖拽到文本描述旁，强化多模态学习。

互动视频教程

下面的互动视频演示如何在课灵中创建拖放题内容。

互动视频：拖放题示例（可交互）

教程示例

下面是我们将在本教程中创建的拖放题，主题是「道路安全」，学习者需要判断图片中的过马路行为是否安全，并将其拖放到「安全的」或「不安全的」区域中。

道路安全：下面过马路的行为安全吗?

快速复制示例

点击这里➜ 将示例复制到你的课灵工作区
在打开的页面点击"复制" (注意：请确保已登录课灵账号，否则无法复制)
随后在生成的副本中点击"编辑"
即可查看并操作本教程所示的设置。

创建拖放题：分步指南

步骤 1：创建新内容

在课灵工作区点击「创建」，进入 H5P 编辑器
在内容类型列表中选择 『拖放题』 或搜索 Drag and Drop
进入编辑界面开始配置

从 H5P 内容类型列表中选择『拖放题』

步骤 2：设置标题与背景

标题：在 『标题』 字段中输入：道路安全：下面过马路的行为安全吗?
步骤 1 设定：
- 背景图示：点击添加一张背景图片（可选），这作为整个拖拽任务的底图。
- 任务大小：设置为 600 x 400 px。这决定了活动区域的尺寸。

设置标题、背景图及任务区域大小

步骤 3：添加放置区域

点击顶部的 『步骤 2 任务』 标签进入编辑界面。我们需要创建两个区域：「安全的」和「不安全的」。

点击工具栏上的 『添加放置区域』 图标。
标签：输入 安全的。
背景不透明度：设置为 30（让背景隐约可见）。
点击完成，调整其大小和位置（例如放在左侧）。
重复上述步骤创建第二个区域，标签为 不安全的，放在右侧。

添加两个放置区域：安全的和不安全的

步骤 4：添加拖拽元素

现在添加代表不同行为的图片。

点击工具栏上的 『添加图片』 图标。
图片：上传一张过马路行为的图片。
- 提示：点击标题旁的 『元数据』(Metadata) 按钮，为上传的图片添加版权和来源信息，这是内容创作的最佳实践。
替代文字：输入简短描述（如"红灯过马路"）。
选择任务区域：勾选 安全的 和 不安全的。
- 注意：这一步是指定该元素可以被拖放到哪些区域，而不是正确答案。通常我们需要让用户可以将其拖到任意一个框中。
点击完成，将图片放置在上方待选区。
重复此步骤添加所有图片。

依次添加拖拽元素

步骤 5：配置正确答案

最后，我们需要告诉系统哪个图片属于哪个区域。

双击 『安全的』 放置区域。
在 『选择正确的元素』 列表中，勾选所有代表"安全行为"的图片。
点击完成。
双击 『不安全的』 放置区域。
在 『选择正确的元素』 列表中，勾选所有代表"不安全行为"的图片。
点击完成。

双击放置区域，勾选属于该区域的正确元素

步骤 6：配置整体反馈

展开 『整体反馈』 部分，您可以根据学习者的得分设置不同的反馈信息：

点击 『添加范围』 增加分数段。
设置如下范围和反馈文本：
- 0% - 60%：输入 需要进一步学习道路安全知识，注意交通安全。
- 61% - 99%：输入 有一定的了解，但仍需加强学习，提高安全意识。
- 100%：输入 表现优秀，已经很好掌握了道路安全知识！

配置整体反馈，根据得分显示不同提示

步骤 7：行为设定

展开 『行为设定』 部分，调整交互细节：

启用 "重试" 功能：勾选。允许用户重新尝试。
处罚：勾选。答错时扣分。
启用分数说明：勾选。在检查答案时显示得分详情。
任务区域显著标记：选择 『拖曳时』。当用户拖动元素时，高亮显示放置区域。
启用全屏：勾选。允许全屏操作。
显示得分 和 显示标题：保持勾选。

配置组件行为

步骤 8：保存与预览

点击 『保存并关闭』，生成完整的活动内容。效果参考本文上方示例。

交互说明

学习者拖拽元素到对应的放置区域
支持即时反馈，显示正确或错误的放置
可配置是否允许多次尝试和重置
提供视觉提示，帮助识别正确的放置位置

优化与可访问性

确保拖拽元素和放置区域大小适中
提供清晰的视觉区分和标签说明
支持键盘操作作为拖拽的替代方式
为视觉障碍用户提供音频反馈
控制元素数量，避免界面过于复杂

专家建议

1. 教学设计与交互体验

明确分类标准：选择与学习目标紧密相关的分类维度，避免模棱两可的选项。
直观的视觉布局：确保放置区域足够大且间距适中，降低操作的认知负担。
即时反馈机制：合理利用“重试”和“解释”功能，引导学习者从错误中学习。
多元化交互：考虑不同学习风格，结合文本、图像甚至音频提示。

2. 难度控制技巧 根据目标受众调整任务难度，实现阶梯式学习：

入门级 (Scaffolding)：
- 开启“自动对齐”，帮助用户轻松放置。
- 降低放置区域透明度（如 50%-70%），使其清晰可见。
- 提供即时正确/错误提示。
挑战级 (Mastery)：
- 将放置区域透明度设为 0，隐藏轮廓，要求用户凭记忆定位。
- 增加干扰项（不属于任何区域的元素）。
- 关闭“重试”功能，模拟真实考核环境。

选择合适的内容类型

『拖放题』 最适合用于图文分类与匹配的学习场景。根据您的具体需求，还可以考虑以下替代方案：