基于H5的拖動交互式課件開發與應用

駱令健

摘 要：移動互聯網的興起，也促使教育教學發生變化，移動端是學習隨時隨地變為可能。本文通過兩個實例，介紹了使用移動平臺端H5技術，制作開發交互式課件的過程。

關鍵詞：H5;Html5;木疙瘩;拖動游戲

一、概念及作用

課件是根據教學大綱的要求，結合教學的目標，教學內容和教學分析，加以制作的課程軟件，多媒體課件是根據教師的教案，把需要陳述的教學內容通過計算機視頻、音頻、動畫、圖片或者文字表述加工而成的課件，它生動形象的解決教學中存在的問題，活躍課堂氣氛，提高學生的學習興趣，而交互式的拖動（拖拽）游戲就是其中的一中。

二、當前形勢

十年前flash在整個互聯網非常火熱，網頁游戲動畫效果絢麗，幾乎整個互聯網都離不開flash，對于教育而已，也是在用flash制作交互式課件來豐富課堂，突出重點突破難點，有很多相關的書籍介紹如何用flash制作物理、數學、化學等實驗，如何制作語文類的交互式課件等等。

隨著移動端的興起，flash的弊端逐步呈現，flash走向沒落，取而代之的是HTML5。HTML5是萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改。目前PC端，移動端HTML5的應用以及全面開花，異彩紛呈，例如易企秀、人人秀、iH5、MAKA和木疙瘩等平臺。PC的逐漸萎縮，移動應用的興起，使學生突破學習的時空，具備持續學習的環境，逐步鍛煉提升學生持續學習的能力。

木疙瘩平臺是一家為移動互聯網提供基于云架構的HTML5富媒體廣告制作、存儲、部署一體化解決方案。其強大的功能，整體的解決方案，用于制作教學用的交互式課件是綽綽有余的。本文將結合H5木疙瘩平臺，介紹交互式拖動課件的制作。

三、木疙瘩平臺的優勢

1.界面優勢

木疙瘩平臺操作界面和flash很非常相像，舞臺、時間軸、圖層等等。熟悉flash的教師初次打開木疙瘩，可以很快的上手，不需要過多的軟件熟悉過程，減少了學習的時間成本，為廣大教師提供了便利。

2.組件優勢

木疙瘩平臺自定義了常用的組件，例如選擇題、填空題、連線和拖動容器等，這些都是在教學中經常使用的交互式功能，平臺已經開發了這種功能組件，教師無須編程，直接拖動下來就可以使用，大大降低了制作課件的難度，為利用平臺制作教學課件奠基了基礎。

3.數據庫優勢

教師制作的交互式課件，全班完成后，如何了解全班的完成情況？在信息化教學中，需要得到教與學中的數據，而且是精準的數據。傳統的教學可能會通過舉手調查甚至一個個檢查的模式進行，效率低且操作性差。木疙瘩平臺提供數據庫服務功能，只需要勾選需要的數據統計，在后臺就可以準確的得到數據，實時且高效！完全解決教與學中的數據問題。

四、木疙瘩H5交互式拖動課件的制作

這里以文秘專業中安排領導座位（以下簡稱“座位排序”）和內衣設計匯總洛可可風格（以下簡稱“洛可可風格”）兩個拖拽課件為例進行講解。兩個課件在整體結構上類似，但在功能需求上有所不同。

1.需求分析

拖拽課件是要實現預設的元件拖動到預定的位置，提交后顯示成績。在座位排序課件中，每個位置都是固定唯一的，不可能一個位置坐兩個人。課件需要將正確的職務拖放到正確的位置中，假設這個位置已經有“總經理”，當“秘書”拖進來的時候，“總經理”會被彈出，確保每個位置都只能有一個元件，也就是一個位置只能坐一個人，同時需要判斷每個人是否坐到了正確的位置上。

而在洛可可風格中，屬于洛可可風格的內衣有多個元件，都可以拖到一個大的區域中，在這個大區域中，可以容納所有的元件，每個元件都可以拖進來的， 也可以從區域中拖出去，同時需要統計得分，正確拖進來加分，錯誤的拖進來則扣分。

2.結構分析

根據需求分析得出，頁面結構上這里至少需要三個頁面，分別是登錄頁、拖拽頁和反饋頁。

登錄頁需要初始化的拖拽課件，要求輸入基本信息，如姓名;拖拽頁由于顯示游戲的要求，或者說是題目要求，已經放置拖拽的對象，拖拽的區域等;反饋頁需要把拖拽課件得分呈現出來。在這里，反饋頁可以是多頁，便于根據不同的得分，反饋不同的信息，增加課件的趣味性。

3.界面設計

在思路上理清結構侯，可以著手進入游戲的制作階段。

（1）分辨率的設置

分辨率的設置很重要。考慮到面向對象的不同，而設定恰當的分辨率。由于現在移動端的興起，制作完成的交互課件在移動端運行，根據當前移動端分辨率來設定，例如1280*720像素、1920*1080像素或者更高的是2160*1080像素。分辨率太高會讓顯示更加細膩，同樣字號下，可以容納更多內容;分辨率太低，也顯得很粗糙，同樣字號下，容納更少內容。木疙瘩平臺默認的分辨率是320*520像素。

分辨率一旦確定，后期就不要做更改，否則每個頁面中的元素都需要重新調整布局，非常麻煩。

（2）登錄頁

登錄頁有三個基本元素。第一個元素，文本框，其中輸入“姓名：”，用于提示使用者;第二個元素，文本框，內容為空，但需要給該文本框命名，例如“name”，用于后臺數據的傳遞;第三個元素，確定按鈕，可以在木疙瘩平臺素材庫中找到一個合適的按鈕，或者自行制作導入平臺中使用。

需要特別注意的是，需要在登錄頁設定行為屬性。木疙瘩平臺默認存在多頁的話，是可以直接滑動翻頁的。登錄頁需要在行為，動畫控制播放，設定“禁止翻頁”。同時在確定按鈕中，添加行為，動畫控制播放，設定“下一頁”。只有單擊確定按鈕，才能進入下一頁。

（3）拖拽頁

登錄頁有四個基本元素。第一個元素是文本框，用于輸入題目要求;第二個元素是拖拽的對象，這里可以是多個，只需要在屬性界面設定為自由拖動即可。第三個元素是拖放容器，這是木疙瘩平臺為教學課件專門開發的控件，并在屬性界面中把可以拖進來的對象添加進來即可。第四個元素是文本框，默認值是0，可以命名為text1，用于統計分值。這個文本框需要放置在屏幕外面，不需要給使用者看到。

行為設定上，需要設定拖動不同的對象，促使文本框（textl1）的屬性（文本取值）改變，例如增加10分或者減少10分，根據實際情況而定。

（4）反饋頁

反饋頁有三個基本元素。第一個元素是文本框，需要命名，例如score，行為屬性上，當其出現的時候，文本取值等于text1的值，即把分數得分顯示出來。第二個元素是按鈕，內容可以為“再來一次”，讓使用者重新做題。設定行為屬性，當點擊按鈕是，返回到第2頁。

五、小結

木疙瘩平臺專門為交互式課件開發了專門的控件，例如本例中使用的拖放容器，除此之外，還有連線，單選、多選等，非常便于操作。

為了便于學習，上述兩個實例鏈接如下：

會議座位安排游戲：http：//9b217e0b.u.h5mgd.com/campaigns/58e79b6e92b57977fb792e04/20170919110602/59bbfc46347a194b1f0071bf/index.html

尋找洛可可拖拽游戲：http：//9.u.h5mc.com/c/rdxv/uwmu/index.html