數智化視域下“知識圖譜+CDIO”混合式教學模式探索

摘要：針對數智化視域下“Web前端開發”課程的研究背景和存在問題，文章提出基于“知識圖譜+CDIO”的混合式教學模式設想。該模式通過以項目為導向構建知識圖譜，為學生線上自主學習打造一條可視化路徑；同時，文章以工程教育中的CDIO理念開展課堂教學，從崗位能力需求出發，以完整的前端開發流程貫穿每個項目教學中，基于CDIO理念設計多元化評價體系，旨在對課程改革提供新思路。

關鍵詞：知識圖譜；CDIO；Web前端開發；數智化；混合式教學模式

中圖分類號：G642" 文獻標志碼：A

0 引言

近年來，隨著人工智能、云計算、大數據等新技術的蓬勃發展，高等教育進入了數智化時代。教育模式由傳統的以教師為中心轉變為以學生為主體，注重學生的個性化需求和學習路徑的定制化。同時，教育決策也由經驗驅動轉化為數據驅動，大數據和人工智能技術通過對海量的學生學習數據進行采集和分析，為學生畫像提供了數據支持。知識圖譜作為一種新興的人工智能技術，其本質是一個具有有向圖結構的知識庫^［1］，以其強大的知識表示和推理能力，通過可視化圖譜形象展示某課程或某學科的整體知識架構^［2］，不僅為教師教學提供輔助，同時讓學生對課程知識的理解由碎片化轉向宏觀化，為養成深度學習的學習習慣提供了良好的路徑。與此同時，構思-設計-實現-運作（Objective， Design， Implement， Operate，CDIO）工程教育模式強調以項目設計為導向，讓學生帶著問題在項目的操作中學習，注重學生實踐能力和創新能力的培養。“Web前端開發”作為信息技術領域一個重要分支，該課程目標是培養具備扎實操作技能和創新思維的前端開發人才。傳統教學模式往往側重理論知識，忽視了學生實踐能力的培養和創新思維以及團隊合作能力的培養。在數智化視域下，本文提出一種基于“知識圖譜+CDIO”的混合式教學模式，旨在通過知識圖譜技術優化教學內容，定制個性化學習資源，為學生實現自主學習提供路徑，同時結合CDIO教育理念，讓學生在做中學，強化學生的實踐操作能力和團隊協作能力，以期達到提升“Web前端開發”教學質量和效果的目的。

1 研究背景及存在問題

在數智化時代，以ChatGPT為代表的各種生成式AI技術的不斷產生，各大軟件公司對Web前端開發的崗位需求也在不斷提高，如何培養出適合新工科背景下具備扎實前端開發技術和創新思維的人才是高校教育者亟待解決的問題。為此，很多學者從不同角度對“Web前端開發”課程教學改革做了大量研究。孟凡貴^［3］分析了現有課程評價體系存在的單一性、局限性以及有效性不足等問題，從課程本身特點出發，提出利用現代信息手段追蹤學生的課前、課中和課后3個部分的過程性評價體系；解萍等^［4］將目標導向教育（Outcome Based Education，OBE）理念融入課程考核體系中，考核指標圍繞OBE核心目標制定，主要包括考勤、課堂互動、實驗成績、項目成績等。該教育理念旨在從多方位多角度對學生的應用能力和職業素養進行考核評價。宋子雄等^［5］對“Web前端開發”課程思政教學的不足進行了分析，提出在項目實踐中引入思政元素，結合翻轉課堂進行教學，使學生在提升職業技能的同時也增強職業道德，做到全方位育人。項若曦等^［6］通過對AIGC賦能“Web前端開發”課程教學的可行性分析，提出了人機協同、AIGC技術貫穿始終的教學模式。在該模式下，學生的學習可由被動學習向主動學習、建構學習以及交互學習3個方向轉化，豐富了學生的學習體驗。劉暢等^［7］從“雙元”育人模式出發，將“1+X”證書融到課程體系建設中，形成“崗賽融通”的人才培養模式，力求培養出具有終生學習能力的復合型Web前端開發人才。以上是目前高校學者對“Web前端開發”課程教學改革的主要方向，筆者在實際教學中發現仍然存在一些未能解決的問題。主要體現在以下幾個方面。

1.1 教材方面

目前，市面上流通的大部分Web前端開發類教材普遍存在內容陳舊，缺乏前沿性和時代性，與實際崗位需求相差較遠等問題。同時，教材在結構上僅考慮了知識的邏輯性，而忽略了知識在應用層面的連貫性。Web前端工程師崗位需求能綜合熟練應用HTML5、CSS3和JAVASCRIPT進行開發，有豐富的實戰經驗。整個開發流程如圖1所示。

現有教材在結構安排上并未采取以上開發流程，而是依據知識的邏輯結構將教材分為3個模塊，分別是HTML5、CSS3、JAVASCRIPT。有些教材雖然采取了項目驅動，但項目針對的仍然是單個模塊而非整個開發流程，鑒于Web前端應用知識點涉及面繁雜，模塊化的教材內容只是將該模塊中的所有知識點羅列出來，學生并不了解各知識之間的前后邏輯關系，對自主學習形成了阻礙。同時，這種割裂式的教材內容安排不能還原真實職場環境，學生無法以崗位角色^［8］沉浸式進入課程學習，因此學生在學習過程中對課程的崗位需求并沒有一個清晰的認識，學生對知識的掌握和應用仍然是片面的，沒有形成知識體系，由此造成學生不能以全局性的視角來解決前端開發問題。

1.2 教學模式

教學模式未從根本上改變，仍然是以教師為中心，雖然大部分教師采用項目化教學，但在整個教學過程中，教師仍是灌輸性的講解和演示操作，學生被動式接受。教師的引導缺失，導致學生不能發揮主體性，創新思維得不到發展。隨著網絡和各種新技術的發展，線上線下混合的教學模式已經成為主流，但其帶來的實際教學效果并未如預期，究其原因，主要有以下幾點。

（1） 線上資源陳舊且種類單一，不能引發學生自主學習興趣，導致資源利用率較低。

（2） 資源缺乏個性化，不能根據每個學生實際水平來制定。

（3） 資源未整合，不能與當前課堂內容知識點一一銜接，導致學生無法高效利用資源。

（4） 學生自我驅動不足，無法自律完成線上學習。

1.3 評價機制

課程的評價體系離不開課程目標。作為計算機類實操性較強的課程——“Web前端開發”課程目標是培養能夠滿足崗位需求且具有綜合解決問題能力的復合型人才。目前的課程評價主要包括項目作品的完成和最終的期末考試。首先，項目作品的完成度評價是一個階段性評價，不能對學生在學習過程中的表現做出實時有效測評，從而導致學生未能及時對自己的薄弱點進行補差補缺。同時，項目作品種類單一且作品難度缺乏梯度性，不能真實評價每位同學的實際能力。學期期末考試內容仍是以理論知識結合案例操作，與實際崗位需求差距較大，不利于畢業生今后的就業。

2 構建以項目為導向的“Web前端開發”知識圖譜

“Web前端開發”課程知識點繁雜，傳統教材對這些知識點未從崗位需求層面進行整合，只是以線性結構粗淺地分散在HTML5、CSS3和JAVASCRIPT3個模塊中，教材給出的教學案例也未能有效反映這3個模塊中知識點之間的關系和聯系，導致學生對整門課程缺乏全局性認識。筆者認為將知識圖譜引入“Web前端開發”教學可以作為解決這一問題的新思路。知識圖譜自2012年由谷歌提出以來，因其結構化和可視化的特性，可以良好展現課程知識體系框架結構以及知識點前后邏輯關系，諸多高校學者對其在教學改革中的應用做了大量研究。李子亮等^［9］從開發角度，對“科學技術與MATALAB語言”課程構建知識圖譜，基于該圖譜整合教學資源，顯著提升了學生的學習效率。宋志雄^［10］通過對整個計算機課程體系構建知識圖譜，為高校計算機課程體系的優化和改革提供了新思路。

為了使學生能以崗位角色沉浸式進入課程學習，在掌握知識和技能的同時，充分了解Web前端開發流程和崗位需求，筆者認為應當重構教學內容，構建以項目為導向的Web前端開發知識圖譜。具體做法是：從開發者角度出發，課程圍繞“咖啡驛站”網站搭建展開，該網站包含5個子頁面，每個子頁面對應一個項目，每個項目都遵循前端開發流程，圍繞需求分析→界面設計→技術規劃→代碼編寫→測試與發布逐個展開，其中在代碼編寫中，重構后的教學內容擯棄以往將HTML5、CSS3和JAVASCRIPT分割在不同章節中教學的做法，按照實際崗位開發流程，將這3個模塊融入每個項目。5個項目中的HTML5、CSS3和JAVASCRIPT的知識點難度呈螺旋式上升。每個項目分割為多個子任務，教師利用每個任務中的知識點構建知識圖譜，標注知識點之間的前置、后置以及相互關聯的關系。重構后的內容為學生梳理了知識點之間的邏輯關系，使學生在自主學習中，依托知識圖譜，選擇與自身能力相適應的學習路徑，從而實現個性化學習目標。以項目二“咖啡驛站——關于我們”頁面制作為例，通過表1詳細說明各子任務之間知識點的學習先后順序、關聯情況及認知維度。

在構建知識圖譜時，教師除了考慮知識點的前置、后置以及關聯情況，同時應標注每個知識點的學習目標、關聯資源和關聯習題，便于學生利用知識圖譜構建的學習路徑進行深度學習。

3 基于“知識圖譜+CDIO”的混合教學模式

CDIO（Conceive構思—Design設計—Implement實現—Operate運作）是一種真正從崗位能力需求出發，基于項目驅動的工程教育模式。該模式強調以學生為中心，仿照產品從研發到運行的整個生命周期^［11］來組織教學，讓學生以主動的姿態在做中學和學中做，旨在培養學生個人能力和職業能力。該模式的教育理念與“Web前端開發”課程目標恰好一致。因此，筆者提出將知識圖譜和CDIO工程教育模式結合起來，形成一種新型混合教學模式，具體做法是通過構建以項目為導向的課程知識圖譜，將知識圖譜融入CDIO教學理念，讓學生在真實Web前端開發職場環境中學習，借助知識圖譜中給出的資源和學習路徑，優化學習過程，提高自主學習能力和實踐操作能力。基于“知識圖譜+CDIO”混合式教學模式的框架設計如圖2所示。

3.1 混合模式下的課程階段劃分^［12］

為了使學生能以崗位角色進入課程學習，該模式重構教學內容，課程教學圍繞一個完整網站的前端開發過程而展開。整個網站包含5個子頁面，每個頁面對應一個完整項目。依據CDIO理念，教師將每個項目制作對應4個階段。

3.1.1 Conceive step——構思階段

學生在該階段需要明確當前網頁的設計需求，如網頁需要呈現哪些內容，各內容之間如何布局，通過查看知識圖譜中關聯的網頁模板資源獲取設計靈感，同時利用互聯網資源完成圖片、文本等素材的搜集。

3.1.2 Design step——設計階段

學生在構思階段已經確定了網頁的設計需求，瀏覽了大量網頁模板。在該階段，學生需要繪制出自己設計的網頁布局圖并說明采用的布局技術及美化方案。教師對學生的布局圖進行點評，指出其中的不足，引導學生思考和修改設計圖。

3.1.3 Implement step——實施階段

學生根據自己設計好的布局圖和美化方案，編寫HTML5代碼實現網頁框架，編寫CSS3代碼實現網頁布局美化，編寫JAVASCRIPT代碼實現網頁動態效果。教師操作演示重點代碼模塊并點評學生代碼，對于錯誤代碼，引導學生利用ChatGPT查詢錯誤原因，根據提示嘗試自行解決問題，對于正確代碼，教師鼓勵學生探索如何將代碼精簡化，最優化。

3.1.4 Operate step——運作階段

學生在該階段對已經制作好的頁面進行調試并以小組形式在課堂上展示。教師點評每個小組作品，引導學生總結各小組布局和美化的異同點，讓學生投票選出以最少代碼實現最優頁面效果的作品。學生在該階段要學會如何實現團隊協作。

3.2 教學實施過程

基于“知識圖譜+CDIO”混合式教學模式的教學過程的實施圍繞課前預備、課中實施、課后拓展3個模塊展開。知識圖譜及其關聯的微課、網頁模板、電子書、習題等資源能夠幫助學生梳理課程知識體系結構，對課程形成全局性認識。依托知識圖譜，學生可以根據自身能力選擇個性化的學習路徑，提高自主學習能力。

3.2.1 課前預備

教師課前在學習通平臺發布任務書，學生利用知識圖譜查找該任務下須掌握的知識點，通過知識點關聯的電子書資源（如HTML5學習手冊，CSS3權威指南）進行理論學習，然后進入知識點關聯的習題資源進行自測，檢查自學效果，完成理論知識預習；完成上述理論學習后，學生觀看知識點的操作視頻，利用WebStorm等編輯軟件完成技能操作并提交。教師根據學習通平臺統計的學生自測情況動態調整教學策略，記錄學生技能操作中出現的常見錯誤，在課堂教學中以討論的方式引導學生解決錯誤問題。

3.2.2 課中實施

“Web前端開發”課程涉及的語法知識多且繁雜，因此教師在課堂教學開始的前5 min利用學習通平臺發布理論知識小測，以客觀題為主，加深學生對上節課知識的記憶。同時，教師展示課前預備階段提交的操作有誤的作品，以小組討論的形式引導學生思考錯誤解決方案。在新課教學中，教師以問題導向引入知識點，學生根據課前預習的操作視頻，先在WebStorm中嘗試自行編寫代碼，教師巡回指導，將學生出錯的操作進行分類，通過提問的方式讓學生回歸到概念本身進行思考，邀請操作正確的同學操作演示并講解，教師對學生操作進行點評并補充。整個過程以學生為中心，教師將學生帶入崗位角色中進行學習，讓學生在實踐中內化所學知識。

3.2.3 課后拓展

鑒于學生學習能力的差異，能較好完成課堂任務并提交的學生，在課后登錄freeCodeCamp編程網站進入響應式網頁設計進行拓展學習。教師鼓勵學生以小組形式嘗試完成該網站中項目設計，以此培養學生的團隊溝通、協作能力。在拓展項目中，教師引導學生利用ChatGPT輔助學習。如調試代碼出錯時，學生向ChatGPT提問出錯原因，在一問一答中加深對知識點的理解，同時提高自主解決問題的能力。對于課堂內容掌握較差的學生，課后通過知識圖譜查找薄弱知識點，對照知識圖譜中關聯的視頻與習題資源進行強化學習。

4 基于CDIO理念，構建多元化評價

目前，“Web前端開發”課程的評價形式主要包括項目作品和期末筆試，評價內容集中在語法知識和模塊化應用中，這與實際崗位需求的綜合處理問題能力、團隊協作以及創新能力相差甚遠。同時，現有評價體系對學生的激勵機制不夠，無法充分調動學生的積極性。課程評價體系的建立無法脫離課程培養目標，在基于“知識圖譜+CDIO”的混合式教學模式下，評價體系的建立應符合CDIO工程教育理念，即培養學生的技術知識和推理能力、個人職業技能和職業道德以及團隊協作和交流。因此，筆者將課程評價分為過程性評價、終結性評價和增值性評價。過程性評價圍繞課前、課中、課后3個階段展開，旨在將評價貫穿學生學習的全過程；終結性評價從崗位能力需求出發，要求學生按照前端開發流程完成網站項目設計，該評價聚焦學生綜合實踐能力的考查；增值性評價從調動學生學習積極性出發，采取闖關獲取積分模式，鑒于學生能力差異，筆者將闖關分為基礎模塊和進階模塊，完成全部基礎模塊闖關可得積分80，完成全部進階闖關可得積分100，完成全部基礎模塊和部分進階模塊獲得積分數在80和100之間。評價體系的具體框架設計如表2所示。

5 結語

文章提出的基于“知識圖譜+CDIO”構建的混合教學模式，其核心思想是以項目為導向構建課程知識圖譜，基于工程教育的CDIO理念開展課堂教學，前者聚焦學生理論知識的掌握以及課程知識體系的建立，后置注重實踐技能、團隊協作和創新能力的提高。“知識圖譜+CDIO”的混合式教學模式的建立，旨在從Web前端開發的崗位需求出發，通過理論和實踐相結合，達到培養數智化背景下的新型復合型人才的目標。

參考文獻

［1］漆桂林，高桓，吳天星.知識圖譜研究進展［J］.情報工程，2017（1）：4-25.

［2］李振，周東岱，王勇.“人工智能+”視域下的教育知識圖譜：內涵、技術框架與應用研究［J］.遠程教育雜志，2019（4）：72-76.

［3］孟凡貴.Web前端開發基礎課程過程性評價研究與實踐［J］.電工理大，2024（3）：64-69.

［4］解萍，趙亞轉.基于OBE的Web前端開發考核體系的改革與探索［J］.公關世界，2024（9）：97-99.

［5］宋子雄，徐穎.職業院校Web前端課程思政教學策略研究［J］.電腦知識與技術，2024（9）：142-145.

［6］項若曦，趙慧周，王楨廷，等.AIGC賦能的Web前端開發教學實踐［J］.計算機教育，2024（10）：153-158.

［7］劉暢，劉玲.Web前端開發“崗課賽證”融通的課程體系建設研究［J］.哈爾濱學院學報，2024（3）：128-130.

［8］張大平，熊金波.對標企業流水線開發過程的Web前端課程設計［J］.計算機教育，2024（9）：86-90.

［9］李子亮，李興春.《科學計算與MATLAB語言》課程知識圖譜的構建［J］.智能計算機與應用，2024（9）：105-109.

［10］宋志雄.高校計算機課程體系知識圖譜構建及可視化研究［J］.電腦知識與技術，2024（8）：89-91.

［11］肖明堯.基于CDIO的混合式教學模式在計算機課程中的應用［J］.長春師范大學學報，2024（6）：168-172.

［12］王海軍，金濤，張曉嬌，等.基于OBECDIO理念的Python語言程序設計課程教學探索［J］.計算機教育，2024（9）：127-131.

（編輯 王永超）

“Knowledge Graph + CDIO” hybrid teaching model exploration in the context of digitalization： an example of “Web Frontend Development” course

JIANG" Yunxin

（Fujian Healthy College， Fuzhou 350101， China）

Abstract： In the context of the study background and existing problems of Web frontend development courses in the era of digital intelligence， this paper proposes a hybrid teaching model based on “knowledge graph + CDIO”. By constructing a knowledge graph with projectbased learning as the guide， a visualized path is created for students to engage in independent online learning. At the same time， classroom teaching is carried out with the CDIO concept from the perspective of engineering education， starting from the needs of job capabilities， and the entire frontend development process is integrated into each project teaching. A diversified evaluation system based on the CDIO concept is also designed to provide new ideas for course reform.

Key words： knowledge graph; CDIO; Web frontend development; number intellectualization; mixed teaching model