郭健輝

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

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

DOIDOI：10.11907/rjdk.162489

中圖分類號：TP319

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

0 引言

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

1 HTML5特色優(yōu)勢

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

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

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

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

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

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

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

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

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

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

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

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

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

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

設(shè)置好viewport meta標(biāo)簽后，瀏覽器就不會再縮放頁面了。針對不同視口的移動設(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；}

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

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

系統(tǒng)從數(shù)據(jù)庫提取問卷題目、選項(xiàng)，呈現(xiàn)在網(wǎng)頁中。用戶作答問卷后系統(tǒng)進(jìn)行回收、存儲、統(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格式錯誤！＼＼n"；

}

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

{

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

}

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

{

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

}

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ù)器端進(jìn)行統(tǒng)計(jì)，將結(jié)果保存到“問卷統(tǒng)計(jì)表”中。通過JSON獲取數(shù)據(jù)，Web前端使用HTML5的canvas畫布，使用JavaScript進(jìn)行圖形繪制[5-6]。

2.4.4 生成二維碼

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

3 結(jié)語

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

參考文獻(xiàn)：

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

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

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

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

[5] 劉瑩.基于html5的動態(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ī)跨平臺應(yīng)用開發(fā)[J].軟件導(dǎo)刊，2013（2）：66-68.

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