基于H5的拖动交互式课件开发与应用

骆令健

摘 要：移动互联网的兴起，也促使教育教学发生变化，移动端是学习随时随地变为可能。本文通过两个实例，介绍了使用移动平台端H5技术，制作开发交互式课件的过程。

关键词：H5;Html5;木疙瘩;拖动游戏

一、概念及作用

课件是根据教学大纲的要求，结合教学的目标，教学内容和教学分析，加以制作的课程软件，多媒体课件是根据教师的教案，把需要陈述的教学内容通过计算机视频、音频、动画、图片或者文字表述加工而成的课件，它生动形象的解决教学中存在的问题，活跃课堂气氛，提高学生的学习兴趣，而交互式的拖动（拖拽）游戏就是其中的一中。

二、当前形势

十年前flash在整个互联网非常火热，网页游戏动画效果绚丽，几乎整个互联网都离不开flash，对于教育而已，也是在用flash制作交互式课件来丰富课堂，突出重点突破难点，有很多相关的书籍介绍如何用flash制作物理、数学、化学等实验，如何制作语文类的交互式课件等等。

随着移动端的兴起，flash的弊端逐步呈现，flash走向没落，取而代之的是HTML5。HTML5是萬维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。目前PC端，移动端HTML5的应用以及全面开花，异彩纷呈，例如易企秀、人人秀、iH5、MAKA和木疙瘩等平台。PC的逐渐萎缩，移动应用的兴起，使学生突破学习的时空，具备持续学习的环境，逐步锻炼提升学生持续学习的能力。

木疙瘩平台是一家为移动互联网提供基于云架构的HTML5富媒体广告制作、存储、部署一体化解决方案。其强大的功能，整体的解决方案，用于制作教学用的交互式课件是绰绰有余的。本文将结合H5木疙瘩平台，介绍交互式拖动课件的制作。

三、木疙瘩平台的优势

1.界面优势

木疙瘩平台操作界面和flash很非常相像，舞台、时间轴、图层等等。熟悉flash的教师初次打开木疙瘩，可以很快的上手，不需要过多的软件熟悉过程，减少了学习的时间成本，为广大教师提供了便利。

2.组件优势

木疙瘩平台自定义了常用的组件，例如选择题、填空题、连线和拖动容器等，这些都是在教学中经常使用的交互式功能，平台已经开发了这种功能组件，教师无须编程，直接拖动下来就可以使用，大大降低了制作课件的难度，为利用平台制作教学课件奠基了基础。

3.数据库优势

教师制作的交互式课件，全班完成后，如何了解全班的完成情况？在信息化教学中，需要得到教与学中的数据，而且是精准的数据。传统的教学可能会通过举手调查甚至一个个检查的模式进行，效率低且操作性差。木疙瘩平台提供数据库服务功能，只需要勾选需要的数据统计，在后台就可以准确的得到数据，实时且高效！完全解决教与学中的数据问题。

四、木疙瘩H5交互式拖动课件的制作

这里以文秘专业中安排领导座位（以下简称“座位排序”）和内衣设计汇总洛可可风格（以下简称“洛可可风格”）两个拖拽课件为例进行讲解。两个课件在整体结构上类似，但在功能需求上有所不同。

1.需求分析

拖拽课件是要实现预设的元件拖动到预定的位置，提交后显示成绩。在座位排序课件中，每个位置都是固定唯一的，不可能一个位置坐两个人。课件需要将正确的职务拖放到正确的位置中，假设这个位置已经有“总经理”，当“秘书”拖进来的时候，“总经理”会被弹出，确保每个位置都只能有一个元件，也就是一个位置只能坐一个人，同时需要判断每个人是否坐到了正确的位置上。

而在洛可可风格中，属于洛可可风格的内衣有多个元件，都可以拖到一个大的区域中，在这个大区域中，可以容纳所有的元件，每个元件都可以拖进来的， 也可以从区域中拖出去，同时需要统计得分，正确拖进来加分，错误的拖进来则扣分。

2.结构分析

根据需求分析得出，页面结构上这里至少需要三个页面，分别是登录页、拖拽页和反馈页。

登录页需要初始化的拖拽课件，要求输入基本信息，如姓名;拖拽页由于显示游戏的要求，或者说是题目要求，已经放置拖拽的对象，拖拽的区域等;反馈页需要把拖拽课件得分呈现出来。在这里，反馈页可以是多页，便于根据不同的得分，反馈不同的信息，增加课件的趣味性。

3.界面设计

在思路上理清结构侯，可以着手进入游戏的制作阶段。

（1）分辨率的设置

分辨率的设置很重要。考虑到面向对象的不同，而设定恰当的分辨率。由于现在移动端的兴起，制作完成的交互课件在移动端运行，根据当前移动端分辨率来设定，例如1280*720像素、1920*1080像素或者更高的是2160*1080像素。分辨率太高会让显示更加细腻，同样字号下，可以容纳更多内容;分辨率太低，也显得很粗糙，同样字号下，容纳更少内容。木疙瘩平台默认的分辨率是320*520像素。

分辨率一旦确定，后期就不要做更改，否则每个页面中的元素都需要重新调整布局，非常麻烦。

（2）登录页

登录页有三个基本元素。第一个元素，文本框，其中输入“姓名：”，用于提示使用者;第二个元素，文本框，内容为空，但需要给该文本框命名，例如“name”，用于后台数据的传递;第三个元素，确定按钮，可以在木疙瘩平台素材库中找到一个合适的按钮，或者自行制作导入平台中使用。

需要特别注意的是，需要在登录页设定行为属性。木疙瘩平台默认存在多页的话，是可以直接滑动翻页的。登录页需要在行为，动画控制播放，设定“禁止翻页”。同时在确定按钮中，添加行为，动画控制播放，设定“下一页”。只有单击确定按钮，才能进入下一页。

（3）拖拽页

登录页有四个基本元素。第一个元素是文本框，用于输入题目要求;第二个元素是拖拽的对象，这里可以是多个，只需要在属性界面设定为自由拖动即可。第三个元素是拖放容器，这是木疙瘩平台为教学课件专门开发的控件，并在属性界面中把可以拖进来的对象添加进来即可。第四个元素是文本框，默认值是0，可以命名为text1，用于统计分值。这个文本框需要放置在屏幕外面，不需要给使用者看到。

行为设定上，需要设定拖动不同的对象，促使文本框（textl1）的属性（文本取值）改变，例如增加10分或者减少10分，根据实际情况而定。

（4）反馈页

反馈页有三个基本元素。第一个元素是文本框，需要命名，例如score，行为属性上，当其出现的时候，文本取值等于text1的值，即把分数得分显示出来。第二个元素是按钮，内容可以为“再来一次”，让使用者重新做题。设定行为属性，当点击按钮是，返回到第2页。

五、小结

木疙瘩平台专门为交互式课件开发了专门的控件，例如本例中使用的拖放容器，除此之外，还有连线，单选、多选等，非常便于操作。

为了便于学习，上述两个实例链接如下：

会议座位安排游戏：http：//9b217e0b.u.h5mgd.com/campaigns/58e79b6e92b57977fb792e04/20170919110602/59bbfc46347a194b1f0071bf/index.html

寻找洛可可拖拽游戏：http：//9.u.h5mc.com/c/rdxv/uwmu/index.html