摘要:隨著教學(xué)要求的不斷提升和新生代學(xué)生對移動終端的偏好,有必要開發(fā)一種跨平臺的、運(yùn)行便捷、短小精悍、可玩性強(qiáng)的教學(xué)游戲,而用目前最流行的HTML5來開發(fā)網(wǎng)頁教學(xué)游戲無疑最適合的了。
關(guān)鍵詞:HTML5;教學(xué)游戲;數(shù)據(jù)庫
引言
HTML5是目前比較受歡迎的WEB標(biāo)準(zhǔn),因?yàn)樗袕?qiáng)大的兼容性、跨平臺運(yùn)行、支持安卓和IOS、網(wǎng)頁表現(xiàn)佳、具有本地?cái)?shù)據(jù)庫、游戲動畫效果好,在各種終端設(shè)備中有更好的體驗(yàn)和交互。
一、 理論基礎(chǔ)
建構(gòu)主義理論以學(xué)習(xí)者為中心的理念,支持了游戲式教學(xué)的情境設(shè)計(jì)、教學(xué)游戲交互體驗(yàn)、教學(xué)信息的多種表達(dá)方式及主動建構(gòu)知識的過程。
體驗(yàn)式學(xué)習(xí)理論注重為學(xué)習(xí)者提供真實(shí)或模擬的環(huán)境和活動,學(xué)生心理特點(diǎn)是好奇,游戲情境下的教學(xué)系統(tǒng)能使學(xué)生體驗(yàn)到的生活樂趣和學(xué)習(xí)經(jīng)驗(yàn),激發(fā)學(xué)生主動學(xué)習(xí)。
二、研究現(xiàn)狀
理論研究者多,真正開發(fā)軟件者少;小打小鬧多,形成系統(tǒng)的少;簡單游戲的多,系統(tǒng)化游戲式的少;娛樂類H5小游戲多,H5能夠連接網(wǎng)絡(luò)數(shù)據(jù)庫(比如MYSQL、MSSQL)的少。將教學(xué)內(nèi)容改編成象專業(yè)游戲那樣,可玩性強(qiáng)的游戲幾乎沒有了。這類軟件開發(fā)幾乎是個空白。有想法的老師開發(fā)不出來,有開發(fā)能力的軟件企業(yè)不懂一線教學(xué)或不愿投入去開發(fā)不容易盈利的教學(xué)類項(xiàng)目。
三、技術(shù)分析
傳統(tǒng)的教學(xué)課件如PPT課件的局限性大,F(xiàn)LASH動畫消耗資源大,兼容性又差,相比之下,HTML5的優(yōu)勢是比較明顯的:
跨平臺特性,無需重寫代碼可以在不同平臺運(yùn)行,兼容性特別好;是未來的WEB標(biāo)準(zhǔn),將廣泛使用,在網(wǎng)絡(luò)暢通無阻。
上手容易,對于老師來說,開發(fā)技術(shù)與專業(yè)團(tuán)隊(duì)是不能比的,而HTML5易學(xué)易懂,開發(fā)工具多,非常適合有想法的老師。
傳播快而廣,現(xiàn)在智能手機(jī)非常普及,各種小游戲、好文章、網(wǎng)絡(luò)調(diào)查、賀卡、相冊、抽獎、促銷等都用上了HTML5的網(wǎng)頁,已經(jīng)到了無人不用的地步了。
四、 游戲式教學(xué)的設(shè)計(jì)理念
據(jù)我們調(diào)查,絕大多數(shù)的學(xué)生接收以游戲的方式來學(xué)習(xí),與其看到許多學(xué)生沉迷于游戲不能自撥,嚴(yán)重影響學(xué)習(xí),不如把枯燥的教學(xué)方式改變?yōu)橛腥さ挠螒蚴浇虒W(xué)?學(xué)生以游戲挑戰(zhàn)方式參與教學(xué)過程中的知識的問答和技能的訓(xùn)練,后期再進(jìn)行在線自主考核,如此一來,可以充分激發(fā)學(xué)生的學(xué)習(xí)熱情,我們對教材中每一個知識點(diǎn)進(jìn)行改編,加入題庫,設(shè)計(jì)了3種難度,分別用3種不同動物代表,每題有相應(yīng)的經(jīng)驗(yàn)值、金幣數(shù),答對了就獎勵。學(xué)生在
游戲式教學(xué)過程中,精神高度集中,熱情高漲,對知識和技能印象深刻,收到了非常好的效果。
五、 使用HTML5拖拽操作
在游戲式教學(xué)系統(tǒng)中,學(xué)生使用教學(xué)游戲,機(jī)房里可以使用鼠標(biāo)、鍵盤進(jìn)行操作,鼠標(biāo)的操作設(shè)計(jì)簡單,這里不贅述,當(dāng)課后學(xué)生使用手機(jī)時,就要用到拖拽操作了。
每一個可拖動的元素,在拖動過程中,都會經(jīng)歷三個過程,拖動開始-->拖動過程中--> 拖動結(jié)束。
六、教材到游戲的改編
將教材中的各章節(jié)知識點(diǎn)進(jìn)行改編,開成了HTML5網(wǎng)頁游戲,參考各種流行的網(wǎng)頁游戲,設(shè)計(jì)出與教材相應(yīng)的游戲場景,讓學(xué)生身臨其境;將知識點(diǎn)一條條按交互方式進(jìn)行設(shè)計(jì),并有游戲的激勵機(jī)制。對教材中的重點(diǎn)的突出、難點(diǎn)的突破,用HTML5動畫等技術(shù)手段去突破,生動的動畫、以及交互模式。在實(shí)踐中很受師生歡迎。比如我們把查找哪些是“數(shù)據(jù)庫管理系統(tǒng)”的問題,改編為了“挖地雷”游戲,借用了地雷戰(zhàn)的場景和音樂,鼠標(biāo)就變成了探測器,挖對了,就在對象上插上紅旗,挖錯了,對象就會爆炸,游戲結(jié)束。
七、 與數(shù)據(jù)庫的連接
為了把整本教材系統(tǒng)化,也為了把學(xué)生學(xué)習(xí)的過程全部記錄下來,開成過程性評價,我們自己架設(shè)了服務(wù)器,并創(chuàng)建了數(shù)據(jù)庫,網(wǎng)頁通過conn.asp與數(shù)據(jù)庫連接,代碼如下:
<%
' FileName="Connection_ado_conn_string.htm"
' Type="ADO"
' DesigntimeType="ADO"
' HTTP="false"
' Catalog=""
' Schema=""
Dim MM_conn_STRING
MM_conn_STRING = "PROVIDER=SQLOLEDB;DATA SOURCE=(local);UID=sa;PWD=qjx123456;DATABASE=it"
%>
數(shù)據(jù)庫是放在本地服務(wù)器,所以來源是local? 用戶名為sa,密碼為:qjx123456,創(chuàng)建了一個名為it的數(shù)據(jù)庫,里面存放了與教學(xué)游戲有關(guān)的student,grade等幾十個數(shù)據(jù)表。有了它們,就可以全程記錄學(xué)生的學(xué)習(xí)情況,形成大數(shù)據(jù),自動記錄,自動評價。
八、如游戲般的帳號登陸
為了管理和評價方便,給每一個學(xué)生一個帳號/密碼,開場象游戲一樣地登錄。
<%Dim student1
Dim student1_numRows
Set student1 = Server.CreateObject("ADODB.Recordset")
student1.ActiveConnection = MM_conn_STRING
student1.Source = "SELECT *? FROM dbo.student? where 用戶名='" + Replace(student1__user, "'", "''") + "' and 密碼='" + Replace(student1__pass, "'", "''") + "'"
student1.CursorType = 0
student1.CursorLocation = 2
student1.LockType = 1
student1.Open()
student1_numRows = 0 %>
<p>加載前:? 接收到的</p>
<p>用戶名:? <% =Request.Form("a") %></p>
<p>密碼:? <%=Request.Form("b")%></p>
九、研究結(jié)果
徹底擺脫傳統(tǒng)的PPT等老舊的信息技術(shù)教學(xué)手段,成功地使用了“互聯(lián)網(wǎng)+”與“大數(shù)據(jù)”等先進(jìn)技術(shù)來研究和開發(fā)教學(xué)系統(tǒng)軟件,成功地用html5腳本語言制作出交互式教學(xué)游戲,成功地用B/S架構(gòu)實(shí)現(xiàn)學(xué)生機(jī)對服務(wù)器的教學(xué)系統(tǒng)的訪問并練習(xí),成為現(xiàn)有學(xué)生機(jī)房的又一種新型的網(wǎng)絡(luò)教學(xué)模式,成功地用數(shù)據(jù)庫記錄并輸出游戲教學(xué)數(shù)據(jù),實(shí)現(xiàn)了實(shí)時評價和反饋,成功地打通了課堂內(nèi)外的邊界,使學(xué)生、家長、老師都可以同時用自己的帳號進(jìn)入網(wǎng)絡(luò)課堂進(jìn)行學(xué)習(xí)、監(jiān)督、掌握學(xué)習(xí)情況。
本課題研究取得了豐碩的成果,也產(chǎn)生了很積極的社會影響。因本課題研究,多個項(xiàng)目在各種創(chuàng)新比賽中獲獎。比如本市的科技創(chuàng)新大賽一等獎、二等獎。還參加了由本市企業(yè)界參加的創(chuàng)新創(chuàng)業(yè)大賽并在58個企業(yè)中排名第8名,獲三等獎,還獎了一萬元。
參考文獻(xiàn):
[1]陸凌牛.HTML5開發(fā)精要與實(shí)例詳解[M].北京:機(jī)械工業(yè)出版社,2011.
[2]姜雪荃,林星,孫亮.寫給WEB開發(fā)人員看的HTML5[M].北京:人民郵電出版社,2012.
[3]秀野堂主,蔣宇捷,羅睿.論道HTML5[M].北京:人民郵電出版社,2012.
作者簡介:
陳光枝(1977-)男,漢,福建福清,職務(wù)/職稱:初級教師, 本科,研究方向:在線教學(xué)系統(tǒng)開發(fā)。
(本文為福建省教育信息技術(shù)研究課題項(xiàng)目,項(xiàng)目名稱:基于H5+MYSQL的跨平臺游戲式教學(xué)系統(tǒng)的開發(fā)與研究 項(xiàng)目編號FJDJ1803)