使用H5P插件在WordPress中创建交互式内容

WordPress最著名的是网站内容管理系统,但它也是用于交付在线课程的出色的学习管理系统 (LMS)。 如果那是您在WordPress中寻找的东西,那么H5P应该是您列表中最重要的插件。

H5P是一种在浏览器中创建和共享交互式HTML5内容的方法,包括演示文稿,游戏,测验,表单等。 您可以从H5P的示例和下载页面下载各种各样的内容类型,也可以创建独特的内容嵌入到WordPress网站中。

H5P为WordPress,Moodle,Drupal,Canvas,Brightspace,Blackboard等提供了插件和集成。 在本文中,我将展示如何在WordPress中使用H5P来为学生创建阅读理解测验。

安装H5P插件

第一步是安装插件。 登录WordPress管理面板,转到插件 ,选择添加新 ,然后在插件字段中搜索H5P 找到它后,选择立即安装

addplugins-h5p.png

使用H5P插件在WordPress中创建交互式内容

(Don Watkins, CC BY-SA 4.0

H5P现在应该出现在已安装插件的列表中。 请务必通过转到WordPress管理面板底部的H5P菜单并单击按钮来**插件。 您将看到以下显示-一定要同意,以便您可以连接到H5P集线器。

h5p-consent.png

使用H5P插件在WordPress中创建交互式内容

(Don Watkins, CC BY-SA 4.0

现在,您可以开始将H5P内容添加到WordPress安装中。

创建测验

我最喜欢的一首诗是罗伯特·弗罗斯特(Robert Frost)的《未走的路》。 假设您正在教一门研究这首诗的班级,而您的目标之一就是让您的学生记住这首诗的作者。 首先,在您的网站上创建一个新的WordPress帖子,其中包含这首诗的文字及其作者。

wordpress-post.png

使用H5P插件在WordPress中创建交互式内容

(Don Watkins, CC BY-SA 4.0

现在,您要使用诗歌下方嵌入HTML5交互式内容来测试学生的理解能力。

在WordPress管理面板中,在底部附近查找H5P内容菜单,然后选择它。 在出现的菜单中,点击新建

h5p-content-menu.png

使用H5P插件在WordPress中创建交互式内容

(Don Watkins, CC BY-SA 4.0

您将看到一系列可用的内容选项。 由于您要创建多项选择测验,因此请找到“ 多项选择”选项,然后单击其右侧的“ 获取”

h5p-content-types.png

使用H5P插件在WordPress中创建交互式内容

(Don Watkins, CC BY-SA 4.0

将打开一个表格供您开始创建测验。 填写必填字段(标有红色星号)—给您的测验一个标题(例如,“未采取的道路测验”),输入一个问题(例如,“谁写的,'未采取的道路'?”)并更正和不正确的答案,然后在对话框中选择正确的答案。 完成测验创建后,保存内容。

将测验嵌入帖子中

现在,您可以将测验恰好插入您希望其出现在帖子中的位置。 在您的WordPress编辑器中打开您要放置测验的帖子(例如“ The Road Not Taken”帖子),并且您应该在界面顶部附近看到一个Add H5P按钮。 将光标放在要在测验中显示测验的位置,然后单击添加H5P 您的H5P内容将出现在这样的对话框中:

选择所需的内容,H5P将在帖子中插入嵌入代码(例如[h5p id="1"] ),如下所示:

h5p-embedded-content.png

使用H5P插件在WordPress中创建交互式内容

(Don Watkins, CC BY-SA 4.0

保存您的信息,然后在浏览器中打开它。 测验正是您希望它出现在帖子中的位置:

h5p-quiz.png

使用H5P插件在WordPress中创建交互式内容

(Don Watkins, CC BY-SA 4.0

当学生正确回答此问题时,他们会得到令人愉悦的视觉反馈:

h5p-correct-answer.png

使用H5P插件在WordPress中创建交互式内容

(Don Watkins, CC BY-SA 4.0

可能性是无止境

H5P提供了广泛的选项来增加WordPress帖子的交互性。 在此示例中,您可能创建了一组更复杂的多项选择题。 H5P还具有许多其他内容类型,包括交互式视频,算术测验,录音机,图像热点,填空测验等等

H5P还提供了出色的文档出色的教程,以帮助想要在其WordPress网站上使用该插件的任何人。 H5P软件是根据MIT许可开放的源代码,其代码可在GitHub上获得 H5P也欢迎为社区做出贡献; 查看开发者指南以获取更多信息。

翻译自: https://opensource.com/article/20/5/h5p-wordpress