祝雪瑞，李海豐，劉才遠(yuǎn)，劉 睿

（湖北汽車工業(yè)學(xué)院 材料科學(xué)與工程學(xué)院，湖北 十堰 442002）

目前國內(nèi)很多高校利用虛擬仿真技術(shù)對實驗教學(xué)進(jìn)行了改革，提高了教學(xué)效果，但該技術(shù)開發(fā)周期較長、后期的迭代更新較為頻繁，這對經(jīng)費有限的普通高校而言，投入的人、財、物成本較高[1-2]。相比之下，利用互聯(lián)網(wǎng)“云端”理念，使用網(wǎng)頁制作技術(shù)搭建虛擬仿真實驗平臺，對一些人機(jī)交互操作要求不高的實驗來說，不失為一種經(jīng)濟(jì)、便捷的途徑。這種網(wǎng)頁式的虛擬仿真實驗平臺的制作，核心工作是網(wǎng)頁的設(shè)計開發(fā)，整個流程投入的人、財、物大幅減少，后續(xù)運行維護(hù)也較為簡單[3-4]。本項目即是利用該技術(shù)，對高分子材料科學(xué)與工程專業(yè)的注塑工藝實驗設(shè)計開發(fā)一種網(wǎng)頁式虛擬仿真實驗平臺，以提升教學(xué)效果。

1 設(shè)計開發(fā)過程

1.1 設(shè)計開發(fā)思路

首先根據(jù)實驗學(xué)習(xí)要求，準(zhǔn)備實驗平臺所需要的素材。主要是收集，并制作實驗相關(guān)的多媒體資料，包括文檔、視頻、動畫等；同時，根據(jù)實驗操作內(nèi)容，設(shè)計初步的人機(jī)交互動作以及網(wǎng)頁上的外部鏈接接口、路徑等。然后將素材加載到網(wǎng)頁中并運行。主要是使用代碼編輯器撰寫代碼，并在瀏覽器內(nèi)進(jìn)行渲染，將不同屬性的多媒體資料以合適的形式展現(xiàn)出來。最后調(diào)試、修改。圖 1展示了注塑工藝虛擬仿真實驗的要素及素材要求，圖2所示為網(wǎng)頁設(shè)計思路及實現(xiàn)路徑。

圖1 注塑工藝虛擬仿真實驗的要素及素材要求

圖2 網(wǎng)頁設(shè)計思路及實現(xiàn)路徑

1.2 網(wǎng)頁的設(shè)計與開發(fā)

按照設(shè)計思路，素材準(zhǔn)備完成后，下一步進(jìn)行素材的嵌入及代碼編輯，但首先要進(jìn)行網(wǎng)頁的界面設(shè)計，即對網(wǎng)頁進(jìn)行合理的布局，然后渲染出不同的效果與點擊特效。一般按功能將整個網(wǎng)頁頁面分割成不同的區(qū)域，常見的分割形式有“盒子式”“堆疊式”“標(biāo)題欄式”，這里選用“盒子式”頁面（如圖3所示），視覺效果簡潔明了。網(wǎng)頁樣式確定后，就需要內(nèi)填素材，并完成操作命令的代碼編輯。

圖3 盒子式網(wǎng)頁頁面布局

使用 VS Code代碼編譯器編寫控制命令代碼，該編譯器是一款針對編寫現(xiàn)代Web和云應(yīng)用的跨平臺源代碼編輯器[5]?？芍С侄喾N不同的匯編語言，能夠在不同的控制系統(tǒng)上運行出相同的結(jié)果，但會根據(jù)瀏覽器內(nèi)核的差異而生成不同的特效。因此，設(shè)計的網(wǎng)頁（網(wǎng)站）要考慮瀏覽器的差異。為此，以目前主流使用的Edge瀏覽器為藍(lán)本進(jìn)行代碼編寫、設(shè)計，并使用通用的編寫語言，即HTML+CSS+JavaScript三件套技術(shù)[6]，雖然不同瀏覽器用的內(nèi)核不同，但在不同瀏覽器中得到的也是同種布局與同種特效，并不會影響使用。這樣設(shè)計、開發(fā)的網(wǎng)頁（網(wǎng)站）均可在各大主流瀏覽器上無差別識別、運行。

當(dāng)代碼編寫完畢后，由瀏覽器對代碼進(jìn)行加工修飾得到需要的效果，可以用瀏覽器自帶的渲染方式，也可以自行添加各種特效和渲染模式，如字體顏色、大小、點擊特效等。經(jīng)過 VS Code編寫的代碼放入到瀏覽器中進(jìn)行渲染后，已按不同功能模塊分區(qū)的網(wǎng)頁界面就被各類素材所填充，根據(jù)鼠標(biāo)操作展現(xiàn)不同的效果。如當(dāng)鼠標(biāo)標(biāo)識變成手掌模樣，模塊便浮動起來，則表示選擇了這一功能模塊，點擊之后，對應(yīng)的素材就呈現(xiàn)出所設(shè)計的效果。

2 設(shè)計開發(fā)結(jié)果展示

網(wǎng)頁式實驗平臺的設(shè)計開發(fā)不僅僅是將各種所需的教學(xué)素材搭配整合，而是要簡潔易懂、操作流暢，并能以特定方式展現(xiàn)給學(xué)生觀看和學(xué)習(xí)，具有較為舒適的、強(qiáng)烈的操作體驗感。這就要求設(shè)計的網(wǎng)頁界面具備高度的操作“友好性”，學(xué)生無需機(jī)械地、僵硬地按部就班學(xué)習(xí)，可按照自身學(xué)習(xí)需求針對性開展學(xué)習(xí)，網(wǎng)頁界面必須美觀、便捷、實用。為此，在網(wǎng)頁主界面設(shè)計上參考了小米官網(wǎng)界面（如圖4和圖5所示），一方面簡潔大氣，符合現(xiàn)代年輕人的審美觀念；另一方面功能分區(qū)明顯，操作指引性強(qiáng)，便于學(xué)生自主學(xué)習(xí)。

圖4 小米官網(wǎng)界面

圖5 設(shè)計的網(wǎng)頁式實驗平臺界面

在原材料和質(zhì)量改進(jìn)模塊，網(wǎng)頁上先通過圖片及注釋作初步說明，然后通過鼠標(biāo)點擊對應(yīng)圖片再跳轉(zhuǎn)鏈接到第三方網(wǎng)站，在此界面進(jìn)行擴(kuò)展說明與學(xué)習(xí)，如圖6和圖7所示。在注塑工藝和注塑設(shè)備模塊，提供視頻和動畫，由學(xué)生自主選擇點擊播放后即可觀看學(xué)習(xí)，如圖8和圖9所示；同時還提供課件內(nèi)容講解的微課視頻。所有視頻均可自主控制播放進(jìn)度。此外，實驗平臺還提供實驗指導(dǎo)書、實驗思考題等文檔資料的下載。在初級版本的設(shè)計開發(fā)中，網(wǎng)站對各類文檔資料（如ppt、word）的支持效果沒有使用數(shù)據(jù)庫技術(shù)，而采用了簡單便捷的鏈接加載模式，并開放了下載權(quán)限，這樣亦可通過下載量間接反映各功能模塊的活躍度。

圖6 質(zhì)量改進(jìn)模塊部分展示

圖7 點擊質(zhì)量改進(jìn)模塊“頂白”跳轉(zhuǎn)后頁面

圖8 注塑工藝模塊多媒體資料展示

圖9 注塑設(shè)備模塊多媒體資料展示

設(shè)計開發(fā)的注塑工藝虛擬仿真實驗平臺暫為1.0版初級版本，經(jīng)試運行后，師生反饋認(rèn)為降低了教學(xué)成本、提高了學(xué)生學(xué)習(xí)的靈活性和主動性，教學(xué)效果大幅提升。教學(xué)管理部門認(rèn)為網(wǎng)頁式實驗平臺充分利用了互聯(lián)網(wǎng)的“云端”功能，既節(jié)省了電腦硬件的存儲數(shù)據(jù)量和空間，又能即時訪問，雖在人機(jī)交互方面有所欠缺，但實驗功能的呈現(xiàn)卻比較完整。更重要的是云端實驗室管理信息系統(tǒng)可被整合到高校的官網(wǎng)子系統(tǒng)里，不僅可以確保實驗室的教學(xué)服務(wù)品質(zhì)，還可便捷、高效地滿足學(xué)校的其他服務(wù)需求。

3 結(jié)語

本項目基于“云端”理念，利用互聯(lián)網(wǎng)技術(shù)，以瀏覽器為平臺、代碼為工具，將預(yù)先制作好的多媒體實驗素材加載到Web中，設(shè)計開發(fā)了一種網(wǎng)頁式的注塑工藝虛擬仿真實驗平臺。教師先在線下給學(xué)生進(jìn)行設(shè)備操作演示，然后學(xué)生在該實驗平臺上（線上）進(jìn)行多媒體資料的學(xué)習(xí)以及虛擬實驗操作。通過教學(xué)反饋得知，學(xué)生普遍認(rèn)為該平臺降低了課程學(xué)習(xí)難度，提升了學(xué)習(xí)興趣。教師認(rèn)為該平臺有效促進(jìn)了“線下線上混合式”教學(xué)的開展，學(xué)生成績也有一定程度的提高。目前，該實驗平臺還是初級版本，后續(xù)還需在人機(jī)交互、實驗測評、學(xué)習(xí)內(nèi)容擴(kuò)展等方面進(jìn)一步完善，使注塑工藝虛擬仿真實驗平臺完全覆蓋材料、工藝、設(shè)備（模具）、質(zhì)量改進(jìn)等要素，有力助推教學(xué)改革，提升教學(xué)效果。