课程

5分钟入门H5P

已完成0步,共0步0%
0 模块

本文简要介绍H5P概念、特点、使用方法,以及如何在峻茂教学管理平台课程中使用。

 

一. H5P概念及特点(引自《维基百科》)

H5P是一个基于JavaScript的免费开源内容协作框架。H5P是HTML5包的缩写,旨在使其便于大家创建、分享和复用交互式HTML5内容。交互式视频、交互式演示文稿、测验、交互式时间线以及更多其他内容,已经在H5P.org 上使用 H5P开发和共享。目前,H5P正被超过9000+网站使用。

该框架包含web内容编辑器、可以分享内容类型的网站、以及可以为将现成的CMS和文件格式绑定为HTML5 资源的插件。基于web的编辑器,默认情况下能够添加和更换多媒体文件,和各种H5P内容类型和应用程序中的文本内容。另外,一个内容类型可能提供任何类型的编辑能力和经验,包括为所见即所得方式编辑整个内容类型的编辑器提供的自定义小部件。

H5P.org是可以共享H5P库、应用程序和内容类型的社区网站。H5P应用程序和内容类型在所有H5P兼容网站的工作方式相同。三个平台以集成方式存在,一个用于Drupal、WordPress,一个用于Moodle。平台集成包括泛型H5P代码,以及接口实现和集成H5P与平台所需的平台特定代码。设计了H5P要有最少的平台特定代码和最低的后端代码。大部分是代码的JavaScript。目的是使其易于集成H5P与新的平台。文件格式包括JSON格式的元数据文件,大量的库文件提供各种功能和内容设计目录,其中文本内容以JSON格式存储,而多媒体内容以外部链接方式存在与外部站点。

 

二.  H5P使用简单介绍

在下面视频中,以设置一个单选题为例,操作演示如何使用H5P创建动态页面,并嵌入到在线课程。

 

三.  H5P常见应用

1.对话框(Dialog)

  • 在Content type中选择“Dialog Cards”;
  • 在Dialog的Text中填入问题,Answer中填入答案;

  • 完成效果如下:

 

2. 填空(Fill blanks)

  • 在Content type中选择“Fill in the Blanks”;
  • 在Text blocks中填入正文及答案,其中答案用“*”前后分隔;

  • 完成效果如下:

 

3.  图片拖放(Drag and drop)

  • 在Content type中选择“Drag and drop”,然后跳过“Step 1:Settings”,选择“Step 2:Task”;

  • 在Task中分别加入文字要求说明(Text)、图片拖放区域(Insert drop zone)、图片内容(Image):

  • 逐一修改各图片的可拖放区域,此处建议各区域都选上:

  • 然后逐一修改各拖放区域对应的图片内容,即拖放的正确答案:

  • 完成效果如下:

 

四.  如何将H5P设计内容嵌入峻茂教学管理平台

将H5P设计内容嵌入平台课程,步骤较简单:

  • 首先,在H5P网站保存设计内容后,会自动进入View界面,点击下方的Embed标签:
  • 此时会看到该设计内容的链接代码:
  • 然后打开峻茂教学管理平台,进入课程编辑页面,进入Text模式,在课程页面所需要插入H5P应用的地方,粘贴该链接代码即可:

 

五.  结束

H5P应用内容非常灵活丰富,远不限于所举例子。各应用可单独设计,也可在类似“Quiz”场景中组合使用,大家可逐步研究熟悉,在此就不一一列举。

文中所介绍内容如有不当之处,还请指正或建议,谢谢!

(完)

登录 发表评论
avatar
6 评论主题
3 主题回复
1 关注者
 
最响应的评论
最热门的评论帖子
8 评论者
张胜娥顾斌廖静秋申时义周玉禄 最近的评论者
  订阅  
提醒
顾斌
成员

小师弟入门,欢迎指教

申时义

欢迎顾老师!

张胜娥
成员

顾总真认真啊,我今天才看到这个内容

廖静秋
成员

好厉害!!

申时义

H5P值得一一研究其使用场景和表现形式,然后根据需要整合到课件中。还有,有些内容形式是可以整合其他形式的,比如,在互动的presentation中就可以插入quiz、拖放等。感谢志刚那么简洁明快的入门介绍,期盼其他在线教学设计师能从中发现乐趣并借此将自己的课程设计得生动有趣,以增加学员的学习体验。

周玉禄
成员

交互式设计试用了几个:Accordion、image hotspots、Multiple choice,简单好用。
H5P牛,还是免费的,不用太亏了。
我发现,后续可以用来和小朋友互动,做启发式学习(小朋友是闲不住的,大朋友则不想动),应该非常不错的。

志刚兄的微课,数典引文,图文并茂,非常棒,点赞!

Minqiu Hua

简洁,清晰, 太棒了!

吴耀福
成员

做的非常漂亮