基于HTML5的移动调查评估系统设计与实现

摘要：在干部教育培训过程中，经常需要及时对学员作课前需求调查或课后教学效果评估。传统调查评估需要借助纸质调查问卷或者电脑完成，效率低、周期长。开发设计了基于HTML5的移动调查评估系统，学员可通过手机微信完成调查或评估问卷，并实时反馈调查评估结果，为教育培训提供参考。

关键词：HTML5；微信公众平台；移动互联网；移动应用开发；调查评估系统

DOIDOI：10.11907/rjdk.151631

中图分类号：TP319

文献标识码：A 文章编号：16727800（2015）006008603

作者简介作者简介：万寨雨（1972-），男，湖北随州人，硕士，中共广州市花都区委党校信息电教室讲师，研究方向为网络数据库技术。

0 引言

随着智能移动设备的普及、4G网络的兴起，移动互联网在各领域的应用都已超越或即将超越传统互联网，人们更喜欢通过手机、平板电脑等移动终端设备访问互联网或处理事务。据中国互联网络信息中心（CNNIC）2015年1月的《中国互联网络发展状况统计报告》显示，截至 2014年12月，我国网民规模达到 6.49亿，其中手机网民规模达5.57 亿，手机网民占比达85.8%[1] ，已达绝对多数，用户对移动应用程序的需求成井喷态势。

在干部教育培训工作中，经常需要对特定的学员进行培训需求调查和培训效果评估，传统方式通常需要借助纸质调查问卷或电脑来完成，统计过程耗费人力、周期长。笔者借助HTML5技术，结合微信公众平台，设计和开发了既可以在PC端也可以在移动终端上完成调查评估的移动应用程序，方便学员参与调查评估，系统可实时反馈统计结果。

1 HTML5及其新功能

1.1 HTML5概述

2014年10月29日，W3C（World Wide Web Consortium，万维网联盟）宣布标准通用置标语言（HTML）第五次重大修改完成并公开，即HTML5。它作为开放WEB平台（Open Web Platform）的基石，目前已被包括IE9+、Safari、Chrome、Opera、Firefox等国内外主要浏览器所支持，以其为标准开发的程序界面可以自适应屏幕，具有良好的跨平台性，更适合移动应用程序的开发，并将最终实现桌面和移动应用程序的无缝衔接。

1.2 HTML5新功能

和先前版本相比，HTML5更似为移动互联网而生，它加入了很多新的标签和功能以适应新的应用场景，比如新的绘图、表单、多媒体标签、本地存储方式以及更加丰富的API接口和控件、提供多线程支持等。

HTML5新增了许多实用的全新标签。比如：，通过JavaScript 的API，实现绘图功能；、等提供多媒体播放功能，不需借助第三方插件，即可在页面上直接播放音视频；提供类似于.net平台的表单控件功能等。同时，一些新的标签为开发者设计更好的页面结构提供了便利，如，定义页面侧边栏内容，定义页面内容之外内容等。HTML5也移除了一些标签，如、、、、等[2]。

HTML5还为开发者增加了不少有用的API接口。如File API，可以支持文件拖放上传；Web Storage API，支持在本地获取和存储key-value对；Web SQL Database API，适用于在本地对复杂的关系数据进行处理，并可以基于SQL语法对数据进行操作等。Web Workers API提供了让javascript实现多线程的解决方案，可以将复杂计算任务交由web Worker执行而不影响用户页面的运行[3]。

2 移动调查评估系统设计与实现

2.1 系统需实现功能

本系统主要实现教学管理人员从系统后台设置调查问卷或教学效果评估表，调查题型包括单选、多选、文本框（填空）等。问卷后，学员通过手机微信公众号登陆问卷系统，在线填写问卷，并可实时查看统计反馈信息。

2.2 系统开发运行环境

本系统程序在.NET Framework 4.0 框架下开发，数据库采用SQL Server 2005，使用C#编程语言，页面依照HTML5标准开发设计，并将客户端绑定到学校的微信公众平台，学员通过手机访问应用程序。

2.3 系统数据库设计

本系统采用关系型数据库设计，主要数据表包括Questionnaire （问卷名称表，见表1）、QueAssRelationship （问卷题目关联表）、AssessIndex_T（题目表，见表2）、AssessOptions_T（题目选项表）、ClassEvaluation_T （课程评价统计表）等。限于篇幅，仅示例部分数据表结构。

2.4 关键程序代码

本系统设计开发的关键程序主要包括自适应页面的设计、微信帐号和本系统用户的绑定、汇总统计问卷等。

2.4.1 利用HTML5设计自适应页面

移动终端操作系统和屏幕大小千差万别，让程序自动适应屏幕，才能让不同用户得到相同用户体验。本系统充分利用了HTML5的新特性，采用了自适应的页面设计。

首先，在网页代码的头部，加入viewport元标签。

2.5 后台应用程序和微信公众号平台的整合

本程序前端通过微信公众平台和用户交互，后台程序开发完毕，还需要和微信公众号进行整合。以“编辑模式”进入微信公众号管理界面后，编辑设定“自定义菜单”，在自定义菜单的链接地址选项上，复制每项所对应的后台程序URL，即可让用户通过点击菜单进入相应的调查和评估界面，完成相应操作。

3 结语

HTML5为移动互联网的发展奠定了坚实的基础，以它为标准开发的页面能够极大地满足各种移动终端对用户界面的需求。本移动调查评估系统后台程序采用传统的.NET技术开发，同时结合HTML5、CSS3和微信公众平台，用户可以通过手机等移动终端方便快捷地访问应用程序，带来了崭新的用户体验。

参考文献：

[1]中国互联网络信息中心.中国互联网络发展状况统计报告[EB/OL]，5移动Web开发指南 [M].北京：电子工业出版社，2012.

[3]武佳佳，王建忠. 基于HTML5实现智能手机跨平台应用开发[J]. 软件导刊，2013，12 （2）： 6668.

英文摘要Abstract：In the process of cadres education and training， we often need to make a needs survey or teaching effectiveness evaluation to particular students timely. The traditional investigation and assessment systems needs the help of a paper questionnaire or a computer， this way is generally low efficiency， long cycle .This article is designed to develop the mobile investigation and assessment system based on HTML5， combined with wechat public platform that lets students use mobile to complete the investigation and assessment questionnaires， and immediate feedback survey findings， provide real quick reference for education and training.

英文关键词Key Words： HTML5； Wechat Public Platform； Mobile Internet； Mobile Application Development； Investigation and Assessment System