999精品在线视频,手机成人午夜在线视频,久久不卡国产精品无码,中日无码在线观看,成人av手机在线观看,日韩精品亚洲一区中文字幕,亚洲av无码人妻,四虎国产在线观看 ?

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

2020-04-09 08:26:30駱令健
大眾科學·中旬 2020年2期

駱令健

摘 要:移動互聯網的興起,也促使教育教學發生變化,移動端是學習隨時隨地變為可能。本文通過兩個實例,介紹了使用移動平臺端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

主站蜘蛛池模板: 亚洲免费黄色网| 99re在线免费视频| 亚洲另类国产欧美一区二区| 久久综合丝袜长腿丝袜| 97在线免费视频| 欧美日韩另类国产| 欧美自拍另类欧美综合图区| 一区二区三区在线不卡免费| 毛片网站在线播放| 99精品一区二区免费视频| 亚洲日本精品一区二区| 亚洲视频免费在线| 亚洲国产精品久久久久秋霞影院| 亚洲国产欧美目韩成人综合| 亚洲a级在线观看| 无码专区国产精品一区| 欧美激情福利| 国产办公室秘书无码精品| 中文国产成人精品久久| 九色在线观看视频| 午夜精品久久久久久久无码软件| 国产精品不卡永久免费| 国禁国产you女视频网站| 欧美色综合久久| 久久久精品无码一区二区三区| 亚洲精品在线影院| 99无码熟妇丰满人妻啪啪| 国产真实乱子伦精品视手机观看| 亚洲欧美另类中文字幕| 日韩麻豆小视频| 日韩一区二区在线电影| 亚洲视频一区| 手机精品视频在线观看免费| 亚洲香蕉久久| 久久亚洲国产视频| 欧美日韩国产在线播放| 欧美亚洲欧美区| 亚洲精品麻豆| 亚洲欧美激情小说另类| 亚洲一区二区三区香蕉| 国产网站免费| 久久这里只有精品2| 久久一日本道色综合久久| 精品午夜国产福利观看| AV色爱天堂网| 欧美精品成人| 亚洲国产av无码综合原创国产| 国产视频一区二区在线观看| 无码一区二区波多野结衣播放搜索| 国产精品午夜福利麻豆| 久久黄色毛片| 国产熟睡乱子伦视频网站| 免费在线a视频| 国产毛片高清一级国语| 找国产毛片看| 日本亚洲欧美在线| 日韩欧美中文在线| 女人天堂av免费| 国产美女在线免费观看| 亚洲欧美在线综合一区二区三区| 狠狠色噜噜狠狠狠狠色综合久| 伊人91在线| 久久一级电影| 69综合网| 亚洲欧美成人在线视频| 美女被狂躁www在线观看| 中日韩欧亚无码视频| 秋霞一区二区三区| 亚洲Va中文字幕久久一区 | 久无码久无码av无码| 亚洲女人在线| 米奇精品一区二区三区| 国产主播在线一区| 日韩A∨精品日韩精品无码| 九一九色国产| 免费播放毛片| 国精品91人妻无码一区二区三区| 日本午夜精品一本在线观看| 成人在线不卡| 少妇精品在线| 日日摸夜夜爽无码| A级毛片高清免费视频就|