數(shù)智化視域下“知識(shí)圖譜+CDIO”混合式教學(xué)模式探索

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

關(guān)鍵詞：知識(shí)圖譜；CDIO；Web前端開發(fā)；數(shù)智化；混合式教學(xué)模式

中圖分類號(hào)：G642" 文獻(xiàn)標(biāo)志碼：A

0 引言

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

1 研究背景及存在問(wèn)題

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

1.1 教材方面

目前，市面上流通的大部分Web前端開發(fā)類教材普遍存在內(nèi)容陳舊，缺乏前沿性和時(shí)代性，與實(shí)際崗位需求相差較遠(yuǎn)等問(wèn)題。同時(shí)，教材在結(jié)構(gòu)上僅考慮了知識(shí)的邏輯性，而忽略了知識(shí)在應(yīng)用層面的連貫性。Web前端工程師崗位需求能綜合熟練應(yīng)用HTML5、CSS3和JAVASCRIPT進(jìn)行開發(fā)，有豐富的實(shí)戰(zhàn)經(jīng)驗(yàn)。整個(gè)開發(fā)流程如圖1所示。

現(xiàn)有教材在結(jié)構(gòu)安排上并未采取以上開發(fā)流程，而是依據(jù)知識(shí)的邏輯結(jié)構(gòu)將教材分為3個(gè)模塊，分別是HTML5、CSS3、JAVASCRIPT。有些教材雖然采取了項(xiàng)目驅(qū)動(dòng)，但項(xiàng)目針對(duì)的仍然是單個(gè)模塊而非整個(gè)開發(fā)流程，鑒于Web前端應(yīng)用知識(shí)點(diǎn)涉及面繁雜，模塊化的教材內(nèi)容只是將該模塊中的所有知識(shí)點(diǎn)羅列出來(lái)，學(xué)生并不了解各知識(shí)之間的前后邏輯關(guān)系，對(duì)自主學(xué)習(xí)形成了阻礙。同時(shí)，這種割裂式的教材內(nèi)容安排不能還原真實(shí)職場(chǎng)環(huán)境，學(xué)生無(wú)法以崗位角色^［8］沉浸式進(jìn)入課程學(xué)習(xí)，因此學(xué)生在學(xué)習(xí)過(guò)程中對(duì)課程的崗位需求并沒(méi)有一個(gè)清晰的認(rèn)識(shí)，學(xué)生對(duì)知識(shí)的掌握和應(yīng)用仍然是片面的，沒(méi)有形成知識(shí)體系，由此造成學(xué)生不能以全局性的視角來(lái)解決前端開發(fā)問(wèn)題。

1.2 教學(xué)模式

教學(xué)模式未從根本上改變，仍然是以教師為中心，雖然大部分教師采用項(xiàng)目化教學(xué)，但在整個(gè)教學(xué)過(guò)程中，教師仍是灌輸性的講解和演示操作，學(xué)生被動(dòng)式接受。教師的引導(dǎo)缺失，導(dǎo)致學(xué)生不能發(fā)揮主體性，創(chuàng)新思維得不到發(fā)展。隨著網(wǎng)絡(luò)和各種新技術(shù)的發(fā)展，線上線下混合的教學(xué)模式已經(jīng)成為主流，但其帶來(lái)的實(shí)際教學(xué)效果并未如預(yù)期，究其原因，主要有以下幾點(diǎn)。

（1） 線上資源陳舊且種類單一，不能引發(fā)學(xué)生自主學(xué)習(xí)興趣，導(dǎo)致資源利用率較低。

（2） 資源缺乏個(gè)性化，不能根據(jù)每個(gè)學(xué)生實(shí)際水平來(lái)制定。

（3） 資源未整合，不能與當(dāng)前課堂內(nèi)容知識(shí)點(diǎn)一一銜接，導(dǎo)致學(xué)生無(wú)法高效利用資源。

（4） 學(xué)生自我驅(qū)動(dòng)不足，無(wú)法自律完成線上學(xué)習(xí)。

1.3 評(píng)價(jià)機(jī)制

課程的評(píng)價(jià)體系離不開課程目標(biāo)。作為計(jì)算機(jī)類實(shí)操性較強(qiáng)的課程——“Web前端開發(fā)”課程目標(biāo)是培養(yǎng)能夠滿足崗位需求且具有綜合解決問(wèn)題能力的復(fù)合型人才。目前的課程評(píng)價(jià)主要包括項(xiàng)目作品的完成和最終的期末考試。首先，項(xiàng)目作品的完成度評(píng)價(jià)是一個(gè)階段性評(píng)價(jià)，不能對(duì)學(xué)生在學(xué)習(xí)過(guò)程中的表現(xiàn)做出實(shí)時(shí)有效測(cè)評(píng)，從而導(dǎo)致學(xué)生未能及時(shí)對(duì)自己的薄弱點(diǎn)進(jìn)行補(bǔ)差補(bǔ)缺。同時(shí)，項(xiàng)目作品種類單一且作品難度缺乏梯度性，不能真實(shí)評(píng)價(jià)每位同學(xué)的實(shí)際能力。學(xué)期期末考試內(nèi)容仍是以理論知識(shí)結(jié)合案例操作，與實(shí)際崗位需求差距較大，不利于畢業(yè)生今后的就業(yè)。

2 構(gòu)建以項(xiàng)目為導(dǎo)向的“Web前端開發(fā)”知識(shí)圖譜

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

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

在構(gòu)建知識(shí)圖譜時(shí)，教師除了考慮知識(shí)點(diǎn)的前置、后置以及關(guān)聯(lián)情況，同時(shí)應(yīng)標(biāo)注每個(gè)知識(shí)點(diǎn)的學(xué)習(xí)目標(biāo)、關(guān)聯(lián)資源和關(guān)聯(lián)習(xí)題，便于學(xué)生利用知識(shí)圖譜構(gòu)建的學(xué)習(xí)路徑進(jìn)行深度學(xué)習(xí)。

3 基于“知識(shí)圖譜+CDIO”的混合教學(xué)模式

CDIO（Conceive構(gòu)思—Design設(shè)計(jì)—Implement實(shí)現(xiàn)—Operate運(yùn)作）是一種真正從崗位能力需求出發(fā)，基于項(xiàng)目驅(qū)動(dòng)的工程教育模式。該模式強(qiáng)調(diào)以學(xué)生為中心，仿照產(chǎn)品從研發(fā)到運(yùn)行的整個(gè)生命周期^［11］來(lái)組織教學(xué)，讓學(xué)生以主動(dòng)的姿態(tài)在做中學(xué)和學(xué)中做，旨在培養(yǎng)學(xué)生個(gè)人能力和職業(yè)能力。該模式的教育理念與“Web前端開發(fā)”課程目標(biāo)恰好一致。因此，筆者提出將知識(shí)圖譜和CDIO工程教育模式結(jié)合起來(lái)，形成一種新型混合教學(xué)模式，具體做法是通過(guò)構(gòu)建以項(xiàng)目為導(dǎo)向的課程知識(shí)圖譜，將知識(shí)圖譜融入CDIO教學(xué)理念，讓學(xué)生在真實(shí)Web前端開發(fā)職場(chǎng)環(huán)境中學(xué)習(xí)，借助知識(shí)圖譜中給出的資源和學(xué)習(xí)路徑，優(yōu)化學(xué)習(xí)過(guò)程，提高自主學(xué)習(xí)能力和實(shí)踐操作能力?；凇爸R(shí)圖譜+CDIO”混合式教學(xué)模式的框架設(shè)計(jì)如圖2所示。

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

為了使學(xué)生能以崗位角色進(jìn)入課程學(xué)習(xí)，該模式重構(gòu)教學(xué)內(nèi)容，課程教學(xué)圍繞一個(gè)完整網(wǎng)站的前端開發(fā)過(guò)程而展開。整個(gè)網(wǎng)站包含5個(gè)子頁(yè)面，每個(gè)頁(yè)面對(duì)應(yīng)一個(gè)完整項(xiàng)目。依據(jù)CDIO理念，教師將每個(gè)項(xiàng)目制作對(duì)應(yīng)4個(gè)階段。

3.1.1 Conceive step——構(gòu)思階段

學(xué)生在該階段需要明確當(dāng)前網(wǎng)頁(yè)的設(shè)計(jì)需求，如網(wǎng)頁(yè)需要呈現(xiàn)哪些內(nèi)容，各內(nèi)容之間如何布局，通過(guò)查看知識(shí)圖譜中關(guān)聯(lián)的網(wǎng)頁(yè)模板資源獲取設(shè)計(jì)靈感，同時(shí)利用互聯(lián)網(wǎng)資源完成圖片、文本等素材的搜集。

3.1.2 Design step——設(shè)計(jì)階段

學(xué)生在構(gòu)思階段已經(jīng)確定了網(wǎng)頁(yè)的設(shè)計(jì)需求，瀏覽了大量網(wǎng)頁(yè)模板。在該階段，學(xué)生需要繪制出自己設(shè)計(jì)的網(wǎng)頁(yè)布局圖并說(shuō)明采用的布局技術(shù)及美化方案。教師對(duì)學(xué)生的布局圖進(jìn)行點(diǎn)評(píng)，指出其中的不足，引導(dǎo)學(xué)生思考和修改設(shè)計(jì)圖。

3.1.3 Implement step——實(shí)施階段

學(xué)生根據(jù)自己設(shè)計(jì)好的布局圖和美化方案，編寫HTML5代碼實(shí)現(xiàn)網(wǎng)頁(yè)框架，編寫CSS3代碼實(shí)現(xiàn)網(wǎng)頁(yè)布局美化，編寫JAVASCRIPT代碼實(shí)現(xiàn)網(wǎng)頁(yè)動(dòng)態(tài)效果。教師操作演示重點(diǎn)代碼模塊并點(diǎn)評(píng)學(xué)生代碼，對(duì)于錯(cuò)誤代碼，引導(dǎo)學(xué)生利用ChatGPT查詢錯(cuò)誤原因，根據(jù)提示嘗試自行解決問(wèn)題，對(duì)于正確代碼，教師鼓勵(lì)學(xué)生探索如何將代碼精簡(jiǎn)化，最優(yōu)化。

3.1.4 Operate step——運(yùn)作階段

學(xué)生在該階段對(duì)已經(jīng)制作好的頁(yè)面進(jìn)行調(diào)試并以小組形式在課堂上展示。教師點(diǎn)評(píng)每個(gè)小組作品，引導(dǎo)學(xué)生總結(jié)各小組布局和美化的異同點(diǎn)，讓學(xué)生投票選出以最少代碼實(shí)現(xiàn)最優(yōu)頁(yè)面效果的作品。學(xué)生在該階段要學(xué)會(huì)如何實(shí)現(xiàn)團(tuán)隊(duì)協(xié)作。

3.2 教學(xué)實(shí)施過(guò)程

基于“知識(shí)圖譜+CDIO”混合式教學(xué)模式的教學(xué)過(guò)程的實(shí)施圍繞課前預(yù)備、課中實(shí)施、課后拓展3個(gè)模塊展開。知識(shí)圖譜及其關(guān)聯(lián)的微課、網(wǎng)頁(yè)模板、電子書、習(xí)題等資源能夠幫助學(xué)生梳理課程知識(shí)體系結(jié)構(gòu)，對(duì)課程形成全局性認(rèn)識(shí)。依托知識(shí)圖譜，學(xué)生可以根據(jù)自身能力選擇個(gè)性化的學(xué)習(xí)路徑，提高自主學(xué)習(xí)能力。

3.2.1 課前預(yù)備

教師課前在學(xué)習(xí)通平臺(tái)發(fā)布任務(wù)書，學(xué)生利用知識(shí)圖譜查找該任務(wù)下須掌握的知識(shí)點(diǎn)，通過(guò)知識(shí)點(diǎn)關(guān)聯(lián)的電子書資源（如HTML5學(xué)習(xí)手冊(cè)，CSS3權(quán)威指南）進(jìn)行理論學(xué)習(xí)，然后進(jìn)入知識(shí)點(diǎn)關(guān)聯(lián)的習(xí)題資源進(jìn)行自測(cè)，檢查自學(xué)效果，完成理論知識(shí)預(yù)習(xí)；完成上述理論學(xué)習(xí)后，學(xué)生觀看知識(shí)點(diǎn)的操作視頻，利用WebStorm等編輯軟件完成技能操作并提交。教師根據(jù)學(xué)習(xí)通平臺(tái)統(tǒng)計(jì)的學(xué)生自測(cè)情況動(dòng)態(tài)調(diào)整教學(xué)策略，記錄學(xué)生技能操作中出現(xiàn)的常見錯(cuò)誤，在課堂教學(xué)中以討論的方式引導(dǎo)學(xué)生解決錯(cuò)誤問(wèn)題。

3.2.2 課中實(shí)施

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

3.2.3 課后拓展

鑒于學(xué)生學(xué)習(xí)能力的差異，能較好完成課堂任務(wù)并提交的學(xué)生，在課后登錄freeCodeCamp編程網(wǎng)站進(jìn)入響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)進(jìn)行拓展學(xué)習(xí)。教師鼓勵(lì)學(xué)生以小組形式嘗試完成該網(wǎng)站中項(xiàng)目設(shè)計(jì)，以此培養(yǎng)學(xué)生的團(tuán)隊(duì)溝通、協(xié)作能力。在拓展項(xiàng)目中，教師引導(dǎo)學(xué)生利用ChatGPT輔助學(xué)習(xí)。如調(diào)試代碼出錯(cuò)時(shí)，學(xué)生向ChatGPT提問(wèn)出錯(cuò)原因，在一問(wèn)一答中加深對(duì)知識(shí)點(diǎn)的理解，同時(shí)提高自主解決問(wèn)題的能力。對(duì)于課堂內(nèi)容掌握較差的學(xué)生，課后通過(guò)知識(shí)圖譜查找薄弱知識(shí)點(diǎn)，對(duì)照知識(shí)圖譜中關(guān)聯(lián)的視頻與習(xí)題資源進(jìn)行強(qiáng)化學(xué)習(xí)。

4 基于CDIO理念，構(gòu)建多元化評(píng)價(jià)

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

5 結(jié)語(yǔ)

文章提出的基于“知識(shí)圖譜+CDIO”構(gòu)建的混合教學(xué)模式，其核心思想是以項(xiàng)目為導(dǎo)向構(gòu)建課程知識(shí)圖譜，基于工程教育的CDIO理念開展課堂教學(xué)，前者聚焦學(xué)生理論知識(shí)的掌握以及課程知識(shí)體系的建立，后置注重實(shí)踐技能、團(tuán)隊(duì)協(xié)作和創(chuàng)新能力的提高?！爸R(shí)圖譜+CDIO”的混合式教學(xué)模式的建立，旨在從Web前端開發(fā)的崗位需求出發(fā)，通過(guò)理論和實(shí)踐相結(jié)合，達(dá)到培養(yǎng)數(shù)智化背景下的新型復(fù)合型人才的目標(biāo)。

參考文獻(xiàn)

［1］漆桂林，高桓，吳天星.知識(shí)圖譜研究進(jìn)展［J］.情報(bào)工程，2017（1）：4-25.

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

［3］孟凡貴.Web前端開發(fā)基礎(chǔ)課程過(guò)程性評(píng)價(jià)研究與實(shí)踐［J］.電工理大，2024（3）：64-69.

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

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

［6］項(xiàng)若曦，趙慧周，王楨廷，等.AIGC賦能的Web前端開發(fā)教學(xué)實(shí)踐［J］.計(jì)算機(jī)教育，2024（10）：153-158.

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

［8］張大平，熊金波.對(duì)標(biāo)企業(yè)流水線開發(fā)過(guò)程的Web前端課程設(shè)計(jì)［J］.計(jì)算機(jī)教育，2024（9）：86-90.

［9］李子亮，李興春.《科學(xué)計(jì)算與MATLAB語(yǔ)言》課程知識(shí)圖譜的構(gòu)建［J］.智能計(jì)算機(jī)與應(yīng)用，2024（9）：105-109.

［10］宋志雄.高校計(jì)算機(jī)課程體系知識(shí)圖譜構(gòu)建及可視化研究［J］.電腦知識(shí)與技術(shù)，2024（8）：89-91.

［11］肖明堯.基于CDIO的混合式教學(xué)模式在計(jì)算機(jī)課程中的應(yīng)用［J］.長(zhǎng)春師范大學(xué)學(xué)報(bào)，2024（6）：168-172.

［12］王海軍，金濤，張曉嬌，等.基于OBECDIO理念的Python語(yǔ)言程序設(shè)計(jì)課程教學(xué)探索［J］.計(jì)算機(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