基于Web的注塑工藝虛擬仿真實驗平臺設計

祝雪瑞，李海豐，劉才遠，劉 睿

（湖北汽車工業學院 材料科學與工程學院，湖北 十堰 442002）

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

1 設計開發過程

1.1 設計開發思路

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

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

圖2 網頁設計思路及實現路徑

1.2 網頁的設計與開發

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

圖3 盒子式網頁頁面布局

使用 VS Code代碼編譯器編寫控制命令代碼，該編譯器是一款針對編寫現代Web和云應用的跨平臺源代碼編輯器[5]。可支持多種不同的匯編語言，能夠在不同的控制系統上運行出相同的結果，但會根據瀏覽器內核的差異而生成不同的特效。因此，設計的網頁（網站）要考慮瀏覽器的差異。為此，以目前主流使用的Edge瀏覽器為藍本進行代碼編寫、設計，并使用通用的編寫語言，即HTML+CSS+JavaScript三件套技術[6]，雖然不同瀏覽器用的內核不同，但在不同瀏覽器中得到的也是同種布局與同種特效，并不會影響使用。這樣設計、開發的網頁（網站）均可在各大主流瀏覽器上無差別識別、運行。

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

2 設計開發結果展示

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

圖4 小米官網界面

圖5 設計的網頁式實驗平臺界面

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

圖6 質量改進模塊部分展示

圖7 點擊質量改進模塊“頂白”跳轉后頁面

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

圖9 注塑設備模塊多媒體資料展示

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

3 結語

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