基于H5技術的交互課件設計與實現

李夢媛，吳國業，林志峰，才爭野

(廣州工商學院 計算機科學與工程系，廣東 廣州 510850)

0 引言

隨著新媒體技術的發展，我國的數字化教育資源建設取得了長足的進步，尤其是教學輔助類新媒體的應用，其在現代課程教學中扮演著越來越重要的角色。傳統的教學模式往往存在課堂氛圍沉悶、學生積極性不高、注意力易分散等問題，急需帶動學習氛圍、調動學生積極性、培養學生動手能力、強化教學內容，以適應當前的課堂教學需求。基于新媒體技術的教學輔助類課件不僅能夠很好地改善上述問題，而且還可以使課堂具有趣味化、交互性強、靈活度高等優點。基于新媒體技術的新興課堂教學模式已成為近些年的教學研究熱點。其中H5技術以其低成本、跨平臺、即時響應、互動性強等獨有的優勢[1]為開發者和終端用戶提供了巨大的便利。本文基于H5技術設計并實現了一個交互教學輔助課件(以下簡稱“交互課件”)，該課件一方面可以豐富教學內容，給學生提供多樣化的學習情境，另一方面可以直觀地展示課程內容，幫助學生更快理解知識，從而提高教學效率[2]。

1 交互課件的優點

1.1 豐富教學資源與教學方式，激發學生學習興趣、提高教學效果

課件利用新媒體創意交互技術創新教學方式，突破傳統的教學思想和教學理念，給學習過程增添了許多互動和交流的機會，不僅可以讓學習者通過和他人(教師、同學)的交流促進對知識的理解和運用，更能使其在交流中實現情感和人格的完善[3]。

1.2 交互課件是信息技術與學科教學的有機結合，是實現信息化教育的有效途徑

課件具有一定的靈活性、游戲性、趣味性，且適用于多種課程，教師可以根據教學內容對課件的內容進行調整并在課件中設計多種交互反饋機制，以增強用戶的操作實踐性和視覺感受[4]。

1.3 共享性好

交互課件打破了傳統的文件分享形式，用戶可以不受各種系統平臺和軟件插件的限制，以二維碼或者鏈接的形式打開，通過瀏覽器運行即可查看課件，使得課件的傳播更加方便、快捷[5]。

3 交互課件的設計與實現

本文以“計算機圖形圖像處理”課程為例，其交互課件的內容展示以及交互功能的實現主要以H5、CSS和Javascript為主，各種素材的繪制主要用Photoshop軟件實現。為方便用戶理清學習思路，對課程內容了進行精心設計，其內容主要包括7個模塊，分別是知識結構、知識籃子、知識測試、知識應用、教學視頻、幫助、拓展資源，課件的基本結構如圖1所示。

圖1 內容架構

在制定每個版塊對應的知識內容時，首先，按照大綱列出的條目收集相關素材，包括文字、圖像、視頻、音樂等。其次，利用Photoshop設計UI和界面，遵循簡潔明了、美觀大方、人性化、風格統一的設計原則。整潔美觀的視覺效果能讓學生更加容易理解學習內容，增強了學習的邏輯性，進而減少學習的時間成本[6]。最后，再利用CSS、JS進行交互設計。

3.1 首頁

首頁設計的重點在于制作出良好的交互視覺體驗感。因此，在設計上使用動態輪播圖，其具有全面、豐富、易學、清晰、實用的特性。給動態輪播圖添加animation無限循環效果，使用transition調整元素過渡時間，并改變元素的opacity、position等屬性，避免畫面過于單調，讓用戶有不一樣的視覺感受。

3.2 主界面

主界面注重控件的編排呈現效果，對各個控件添加css:active選擇器效果，點擊控件時，改變其描邊大小和顏色，給予用戶視覺上的信息反饋。

3.3 知識籃子模塊

知識籃子模塊注重視覺呈現的效果。采用日常教學中應用最為廣泛的圖文并茂方式呈現教學內容，使用戶對知識內容有直觀的印象。對主題使用3×2的方格進行劃分，并添加css：hover選擇器效果，當鼠標指針懸停時，改變控件的不透明度并引入多個圓環，增強視覺效果。在內容上，使用scrollbar效果以上下滾動的方式查閱知識內容。知識籃子的樣式效果及內容如圖2所示。

圖2 知識籃子頁面

3.4 知識測試模塊

知識測試模塊包含選擇題、填空題、連線題、基礎操作題、綜合操作題等豐富的題型。該模塊注重交互課件的靈活性以及信息反饋的邏輯判斷，用戶可以根據自己的需求選擇相應的題型，增加了用戶可操作性的靈活性。在設計方面，背景使用褶皺的紙張，讓用戶身臨其境，猶如置身于課室內，正在拿著筆作答試卷。交互設計中使用JS獲取用戶的輸入信息以進行邏輯判斷，其應用方式為document.getElementById("XXX").value，隨后使用if else邏輯語句判斷if(value=="key")，正確時會出現正確提示，反之亦然。頁面效果如圖3所示。

圖3 知識測試—選擇題

3.5 知識應用模塊和教學視頻模塊

知識應用模塊背景設計采用了具體的Photoshop操作界面，讓用戶有切身使用Photoshop的感覺，也方便用戶在無實踐操作環境下即時獲取所需信息，該模塊中使用了visibility:hidden效果，使標題元素之間進行顯示與隱藏的相互切換。知識頁面效果如圖4所示。

圖4 知識應用頁面

教學視頻模塊頁面比較精簡，畫面更側重于視頻上，該模塊主要采用

3.6 其余模塊(知識結構、幫助、拓展資源)

知識結構模塊對本課件的學習內容進行簡要的文字概述，并通過知識架構圖具體呈現出來。幫助模塊以文字的形式概述本課件的創意、動機以及本課件在未來市場的競爭優勢與發展機遇。拓展資源模塊通過超鏈接的形式讓用戶了解更多與該課程相關的學習網站，拓展相關知識。

4 結語

在高速發展的新媒體時代，新媒體交互課件已成為教育中不可分割的一部分，其改變了傳統課堂沉悶的教學模式，活躍了課堂氛圍，提高了教學質量。本文首先通過深入研究、分析交互課件的背景及現狀，提出當前交互課件的可改進點。然后基于H5、CSS和Javascript等技術設計并研發出一個體驗感更好、交互性更強交互課件。