基于HTML5的移動(dòng)調(diào)查問(wèn)卷設(shè)計(jì)及圖形化分析

郭健輝

摘 要：在教學(xué)培訓(xùn)過(guò)程中，開(kāi)展課前需求調(diào)查和課后教學(xué)效果評(píng)估是提高教學(xué)針對(duì)性的有效方法。通過(guò)基于HTML5的調(diào)查問(wèn)卷系統(tǒng)，學(xué)生可以方便地使用手機(jī)完成調(diào)查問(wèn)卷，將調(diào)查數(shù)據(jù)進(jìn)行匯總，使用HTML5、JavaScript和CSS3技術(shù)，以2D、3D的形式進(jìn)行圖形化顯示，直觀地呈現(xiàn)給教師和學(xué)生，搭起師生信息溝通的橋梁。

關(guān)鍵詞：HTML5；調(diào)查問(wèn)卷；移動(dòng)開(kāi)發(fā)；互聯(lián)網(wǎng)+

DOIDOI：10.11907/rjdk.162489

中圖分類號(hào)：TP319

文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：1672-7800（2016）012-0082-02

0 引言

隨著智能移動(dòng)設(shè)備和移動(dòng)網(wǎng)絡(luò)的快速普及，移動(dòng)互聯(lián)網(wǎng)技術(shù)在各行業(yè)領(lǐng)域的應(yīng)用以井噴態(tài)勢(shì)迅速蔓延，改變著人們的衣食住行，越來(lái)越多的事務(wù)可以通過(guò)使用手機(jī)、平板電腦、智能穿戴設(shè)備進(jìn)行處理?；ヂ?lián)網(wǎng)+教育也在快速發(fā)展，利用互聯(lián)網(wǎng)開(kāi)展教育教學(xué)，豐富了教育教學(xué)手段，改變了教學(xué)方式方法，更符合新時(shí)期大學(xué)生的學(xué)習(xí)認(rèn)知特點(diǎn)和習(xí)慣。在教育教學(xué)活動(dòng)前了解學(xué)生的基本情況、學(xué)習(xí)基礎(chǔ)和學(xué)習(xí)需求，有助于教師熟悉教學(xué)對(duì)象，適當(dāng)調(diào)整教學(xué)內(nèi)容、教學(xué)進(jìn)度和教學(xué)重點(diǎn)，提高教學(xué)的針對(duì)性。課后調(diào)查學(xué)生學(xué)習(xí)掌握情況，有助于后續(xù)教學(xué)活動(dòng)更好地開(kāi)展。傳統(tǒng)的調(diào)查問(wèn)卷采用紙質(zhì)來(lái)進(jìn)行，調(diào)查統(tǒng)計(jì)過(guò)程耗時(shí)費(fèi)力[1]，學(xué)生不能及時(shí)查看調(diào)查結(jié)果，不適合頻繁使用。利用電腦進(jìn)行問(wèn)卷調(diào)查因受設(shè)備設(shè)施局限性大，也不適合廣泛開(kāi)展。借助HTML5技術(shù)，通過(guò)掃描二維碼打開(kāi)問(wèn)卷，學(xué)生可以非常方便地進(jìn)行問(wèn)卷作答提交，利用HTML5的2D、3D圖形技術(shù)可以及時(shí)展示調(diào)查結(jié)果。

1 HTML5特色優(yōu)勢(shì)

基于B/S結(jié)構(gòu)的HTML5頁(yè)面相對(duì)于APP擺脫了對(duì)平臺(tái)的依賴，通過(guò)瀏覽器可以直接訪問(wèn)應(yīng)用，不需要應(yīng)用市場(chǎng)審核，可以隨時(shí)更新應(yīng)用。HTML5具有很好的跨平臺(tái)性，開(kāi)發(fā)的應(yīng)用可以在PC端和不同屏幕大小的移動(dòng)端（包括Android和IOS平臺(tái)）運(yùn)行，大多數(shù)核心代碼不用重寫，可以很好地兼容各種瀏覽器[2]。HTML5的新標(biāo)簽使得網(wǎng)頁(yè)中很容易加入音頻、視頻，不再需要插件。HTML5代碼簡(jiǎn)潔，擁有很多強(qiáng)大的API，可以實(shí)現(xiàn)交互，使用戶獲得更好的體驗(yàn)。HTML5的Canvas元素提供繪圖區(qū)域，通過(guò)JavaScript代碼訪問(wèn)繪圖區(qū)域，提供了一套完整的繪圖功能，實(shí)現(xiàn)動(dòng)態(tài)生成圖形，擁有基于SVG、Canvas、WebGL及CSS3的3D功能[3]。

2 系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

本系統(tǒng)基于HTML5實(shí)現(xiàn)調(diào)查問(wèn)卷的顯示、編輯、提交和統(tǒng)計(jì)分析，將分析結(jié)果以2D、3D圖形形式進(jìn)行展示。調(diào)查問(wèn)卷題型包括單項(xiàng)選擇、多項(xiàng)選擇和填空等。

2.1 系統(tǒng)開(kāi)發(fā)技術(shù)和開(kāi)發(fā)環(huán)境

綜合考慮調(diào)查問(wèn)卷系統(tǒng)應(yīng)用環(huán)境，系統(tǒng)后臺(tái)開(kāi)發(fā)選擇Visual Studio2010，開(kāi)發(fā)語(yǔ)言使用C#。數(shù)據(jù)庫(kù)管理系統(tǒng)使用SQLServer2008R2，使用IIS7作為Web服務(wù)器。前端開(kāi)發(fā)使用HTML5、JavaScript和CSS3，使用目前流行的Bootstrap框架技術(shù)柵格化布局頁(yè)面。系統(tǒng)在Chorme瀏覽器進(jìn)行程序調(diào)試。學(xué)生可以通過(guò)手機(jī)、平板電腦或PC訪問(wèn)系統(tǒng)。

2.2 系統(tǒng)功能模塊設(shè)計(jì)

本調(diào)查問(wèn)卷系統(tǒng)主要應(yīng)用于教學(xué)培訓(xùn)的課前情況了解和課后學(xué)習(xí)效果調(diào)查。為方便調(diào)查，使用掃描二維碼或在瀏覽器輸入網(wǎng)頁(yè)地址的方式訪問(wèn)頁(yè)面，完成調(diào)查，提交問(wèn)卷，并查看結(jié)果。系統(tǒng)用戶主要有教師和學(xué)生，教師登錄系統(tǒng)，可以管理題庫(kù)，發(fā)布問(wèn)卷，查看統(tǒng)計(jì)結(jié)果及個(gè)性化分析結(jié)果（針對(duì)題目或?qū)W生個(gè)體的分析）[4]。系統(tǒng)功能結(jié)構(gòu)如圖1所示。

2.3 系統(tǒng)數(shù)據(jù)庫(kù)設(shè)計(jì)

根據(jù)系統(tǒng)功能需求，采用關(guān)系型數(shù)據(jù)庫(kù)，數(shù)據(jù)表包括Teacher（教師用戶表）、Question_type（題目類型表）、Question（題目表）、Options（題目選項(xiàng)表）、Answer（答題表）、Statistics（問(wèn)卷統(tǒng)計(jì)表）等。限于篇幅，僅列出部分?jǐn)?shù)據(jù)表結(jié)構(gòu)。

2.4 系統(tǒng)關(guān)鍵代碼

2.4.1 基于HTML5的自適應(yīng)頁(yè)面設(shè)計(jì)

智能手機(jī)、平板電腦等移動(dòng)設(shè)備屏幕千差萬(wàn)別，為了讓不同大小屏幕的用戶都有很好的體驗(yàn)，利用HTML5的新特性設(shè)計(jì)自適應(yīng)頁(yè)面。

具體方法是在頁(yè)面頭部標(biāo)簽加入viewport meta元素。代碼如下：

將網(wǎng)頁(yè)寬度默認(rèn)為與屏幕寬度相等，頁(yè)面縮放比為1。

設(shè)置好viewport meta標(biāo)簽后，瀏覽器就不會(huì)再縮放頁(yè)面了。針對(duì)不同視口的移動(dòng)設(shè)備，在CSS中利用媒體查詢功能設(shè)計(jì)在不同視口設(shè)備中的處理方式，部分代碼如下：

@media screen and （min-width：1200px）{img {max-width：1000px；} #container{width：1100px；}

@media screen and （max-width：767px）{img {max-width：305px；} #container{width：320px；}

這樣對(duì)于不同尺寸的屏幕網(wǎng)頁(yè)都有了較好的顯示。

2.4.2 調(diào)查問(wèn)卷生成與數(shù)據(jù)提交

系統(tǒng)從數(shù)據(jù)庫(kù)提取問(wèn)卷題目、選項(xiàng)，呈現(xiàn)在網(wǎng)頁(yè)中。用戶作答問(wèn)卷后系統(tǒng)進(jìn)行回收、存儲(chǔ)、統(tǒng)計(jì)。部分關(guān)鍵代碼如下：

namespace Maticsoft.Web.Choosetheanswer

{ public partial class Add ： Page

{protected void Page_Load（object sender， EventArgs e）

{ }

protected void btnSave_Click（object sender， EventArgs e）

{

string strErr=""；

if（！PageValidate.IsNumber（txtc_id.Text））

{

strErr+="選擇ID格式錯(cuò)誤！＼＼n"；

}

if（this.txtanswer.Text.Trim（）.Length==0）

{

strErr+="答案不能為空?。埽躰"；

}

if（！PageValidate.IsNumber（txtu_id.Text））

{

strErr+="用戶ID格式錯(cuò)誤?。埽躰"；

}

if（strErr！=""）

{

MessageBox.Show（this，strErr）；

return；

}

int c_id=int.Parse（this.txtc_id.Text）；

string answer=this.txtanswer.Text；

int u_id=int.Parse（this.txtu_id.Text）；

Maticsoft.Model.Choosetheanswer model=new Maticsoft.Model.Choosetheanswer（）；

model.c_id=c_id；

model.answer=answer；

model.u_id=u_id；

Maticsoft.BLL.Choosetheanswer bll=new Maticsoft.BLL.Choosetheanswer（）；

bll.Add（model）；

Maticsoft.Common.MessageBox.ShowAndRedirect（this，"提交成功！"，"add.aspx"）；

}

public void btnCancle_Click（object sender， EventArgs e）

{

Response.Redirect（"list.aspx"）；

}

}

}

2.4.3 調(diào)查結(jié)果統(tǒng)計(jì)與圖形化展示

問(wèn)卷回收后在服務(wù)器端進(jìn)行統(tǒng)計(jì)，將結(jié)果保存到“問(wèn)卷統(tǒng)計(jì)表”中。通過(guò)JSON獲取數(shù)據(jù)，Web前端使用HTML5的canvas畫布，使用JavaScript進(jìn)行圖形繪制[5-6]。

2.4.4 生成二維碼

大多數(shù)瀏覽器自帶生成二維碼工具。生成網(wǎng)頁(yè)的二維碼的方法是：使用瀏覽器（本文使用360瀏覽器）打開(kāi)網(wǎng)頁(yè)，在地址欄中點(diǎn)擊二維碼圖標(biāo)即可生成訪問(wèn)此網(wǎng)頁(yè)的二維碼，然后將其截圖保存。在開(kāi)展問(wèn)卷調(diào)查時(shí)，學(xué)生可以通過(guò)掃描二維碼打開(kāi)調(diào)查問(wèn)卷網(wǎng)頁(yè)。

3 結(jié)語(yǔ)

HTML5技術(shù)可以實(shí)現(xiàn)移動(dòng)開(kāi)發(fā)從C/S結(jié)構(gòu)的APP向B/S結(jié)構(gòu)的網(wǎng)頁(yè)模式轉(zhuǎn)變[7]?；贖TML5的移動(dòng)調(diào)查問(wèn)卷系統(tǒng)可以方便、快速地開(kāi)展調(diào)查問(wèn)卷的作答、提交和統(tǒng)計(jì)分析，實(shí)時(shí)向用戶展示圖形化的統(tǒng)計(jì)結(jié)果。該系統(tǒng)不僅可以在教學(xué)培訓(xùn)中應(yīng)用，還可以在各種技術(shù)講座、產(chǎn)品發(fā)布、調(diào)研、會(huì)議中使用。

參考文獻(xiàn)：

[1] 萬(wàn)寨雨.基于HTML5的移動(dòng)調(diào)查評(píng)估系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].軟件導(dǎo)刊，2015（6）：86-88.

[2] 王燕妮.HTML5應(yīng)用現(xiàn)狀分析[J].無(wú)線互聯(lián)科技，2016（13）：28-29.

[3] HTML5的優(yōu)點(diǎn)是什么[EB/OL]. http：//www.studyofnet.com/.

[4] 楊偉杰.基于HTML5的高職學(xué)生職業(yè)核心能力測(cè)評(píng)系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn) [J].軟件導(dǎo)刊·教育技術(shù)，2016（6）：91-93.

[5] 劉瑩.基于html5的動(dòng)態(tài)數(shù)據(jù)3d展示軟件實(shí)現(xiàn)[J].電腦編程技巧與維護(hù)，2016（15）：68-68.

[6] Ichartjs-基于html5的圖表組件[EB/OL]. http：//www.ichartjs.com/.

[7] 武佳佳，王建忠.基于html5實(shí)現(xiàn)智能手機(jī)跨平臺(tái)應(yīng)用開(kāi)發(fā)[J].軟件導(dǎo)刊，2013（2）：66-68.

（責(zé)任編輯：孫 娟）