4C_ID模型在Web前端开发基础课程中的应用.pdf

第 8 期2023 年 8 月 10 日计 算 机 教 育Computer Education中图分类号：G6421500引 言为优化传统教学设计，将教学设计从最初的注重知识传递转变为支持和促进学生积极建构知识。作为整体性教学设计的代表模型，4C/ID 模型是面向真实实际的，注重如何应用所学知识解决现实生活和工作中遇到的问题，旨在改进和提高学生在其专业领域的表现。由于该模式的设计步骤主要关注对学习任务与学习内容的分析与设计，因此杰罗姆范梅里恩伯尔教授指出 4C/ID模型可以与其他教学设计模式相结合以弥补其不足，从而促进有效学习的发生。14C/ID模型4C/ID 模型由荷兰教育技术专家杰罗姆范梅里恩伯尔教授从 20 世纪 80 年代开始研究，于1997 年正式提出，是一种解决复杂学习的整体教学设计模式。该模型将知识、技能和态度作为一个整体，用整体任务替代了部分任务（包括表1 中的 4 个核心要素和 10 个步骤），旨在培养学生在完成面向工作实际的学习任务的同时，掌握各种复杂认知技能，促使学生有能力把所学知识应用到真实的工作中1。4C/ID 模型以整体论思想为指导，强调教学设计要以学生为主体，任务的安排要与具体实践相融合。教师不再单方面地向学生传授知识，而是利用各种教学媒体做好活动开始前的准备工作，按照从简到繁的顺序安排任务，通过培养学生构建整体性思维来促进知识的迁移，从而最终掌握解决实际问题的技能2。2基于4C/ID模型的项目式学习模式构建基于 4C/ID 模型的项目式学习，整合了 4C/ID 模型和项目式学习，教学设计流程如图 1 所示，包括分析阶段、设计阶段、探究阶段和评价阶段。2.1分析阶段1）分析教学目标。确定绩效目标，教师将三维目标整合，以整体性目标代替分类目标，向学生描述在完成一个教学单元或主题后“应该做到什么程度”,即各个构成性技能在完整任务情境中协调和综合表现出来的专业能力或复杂技能，也就是融合了知识、技能和态度的综合能力3。2）分析学习者特征。包括对学生认知策略和心智模式的分析，教师在教学前应了解学生目前掌握知识的情况和心理发展特征，从而预测学生能否理解所提供的指导，以保证设计的支持性信息对学生的学习有帮助、学习任务难度学生可以接受。4C/ID 模型在 Web 前端开发基础课程中的应用肖丹阳，刘万松（贵州师范大学 物理与电子科学学院，贵州 贵阳 550025）摘 要：结合 4C/ID 模型和项目式学习，提出基于 4C/ID 模型的项目式学习模式，详细阐述该模式分析阶段、设计阶段、探究阶段和评价阶段的设计要点，以 Web 前端开发基础课程为例，介绍基于 4C/ID 模型的项目式学习实践活动。关键词：4C/ID 模型；项目式学习；整体任务；Web 前端开发基础文章编号：1672-5913(2023)08-0150-06作者简介：肖丹阳，女，硕士研究生在读，研究方向为信息技术，；刘万松（通讯作者），男，副教授，研究方向为课程教材教法，。教育与教学研究第 8 期151表 1 4C/ID 模型的 4 要素与 10 步骤要素步骤学习任务设计学习任务任务组排序确定绩效目标支持性信息分析认知策略分析心智模式设计支持性信息程序性信息分析认知规则分析前提性信息设计程序性信息专项操练设计部分任务练习2.2设计阶段1）设计学习任务。首先选择一个具体真实且有意义的完整任务，以整体任务的形式描述学生应该做什么；然后基于整体性原则进行任务组排序，将整体任务按照从简单到复杂的顺序划分为一个个任务组。在最初的任务组设计中，增加学习指导和支持信息，使学生能够完成相应任务，随着一个个任务的完成，逐步减少学习指导和支持信息，最终使学生可以独立完成4。2）设计支持性信息。支持性信息是帮助学生学习和完成任务里的非复用性技能所设计的信息，即在学习任务和迁移任务之间不同的技能（可以视为学生现有知识和将要学习知识之间的桥梁4），并且支持性信息为构建或重构知识提供相应帮助，在设计时应考虑哪些有利于学生完成任务。支持性信息可以在进行每个任务之前呈现给学习者，也可以在他们正在完成任务的过程中呈现。3）设计程序性信息。程序性信息是帮助学生学习和完成任务里的复用性技能所设计的前提性信息，是对正确操作规则的直接说明，又称为即时性信息。复用性技能是学习任务和迁移任务之间相同的技能，不会图 1 基于 4C/ID 模型的项目式学习教学设计流程基于 4C/ID 模型的项目式学习设计分析阶段教 学 目 标确定绩效目标学习者特征分析认知策略 分析心智模式学 习 任 务设计学习任务 任务组排序支持性信息设计支持性信息程序性信息设计程序性信息专 项 操 练设计部分任务练习作 品 制 作成 果 交 流活 动 评 价形成性评价 终结性评价设计阶段探究阶段评价阶段2023152计 算 机 教 育Computer Education随着任务难易情况而变化。程序性信息促进学生在学习中进行认知图式的构建以达到自动化程度，这些信息在学习任务中以相同方式呈现，不用理解只需记忆，帮助学生缩短“探索”时长，完成任务中的常规活动5。程序性信息最好是对学习者即时呈现，并且随着学习者获得更多地知识技能，任务难度逐渐递增，程序性信息也逐渐消退。4）设计专项操练。专项操练是学生熟练掌握学习任务中某些常规方面所进行的额外练习，也叫部分任务练习。和课后练习目的相同，即查漏补缺提升知识，通常分布在整个学习任务中，为复用性技能提供反复练习。课堂上没有太多任务给学生进行发散性训练，专项操练的设计在一定程度上弥补了整体任务组单一设计的不足，通过课后的任务不仅巩固所学知识，还可以拓展学习的程度和内容5。部分任务练习只有当学习者熟练了任务中的常规活动后才开始进行。2.3探究阶段活动探究以学生的实践活动为主体，锻炼学生多方面能力的培养，是学生掌握知识技能的重要阶段，在此过程中学生获得大部分知识的必备技能。将设计阶段付诸实施，在教师引导下学生完成任务组、相应子任务、专项操练以及整体学习任务，最后按照作品要求，学生独立或以小组为单位应用所学知识技能来完成作品制作。2.4评价阶段作品完成后，教师组织学生进行作品展示，检查学生通过任务组和专项操练后知识与技能的掌握情况，大家相互交流分享自己完成任务过程中的经验和感受，取长补短共同进步。在此阶段，不仅要求对结果评价，还要求对学习过程评价，实现教学实践过程的形成性评价，促进教学不断改进逐步完善；在教学实施后，实行总结性评价，以对教学的最终效果进行评价。最终实现定量评价和定性评价、形成性评价和终结性评价、自我评价和他人评价的相互融合。3基于4C/ID模型的项目式学习的实际应用“Web 前端开发基础”是计算机专业培养课程体系中的一门专业必修课程，包含了软件行业Web 开发领域的关键技术基础知识（如 HTML、CSS、JavaScript 等），将基于 4C/ID 模型的项目式学习应用于 Web 前端开发基础课程 HTML 相关内容的教学中，过程如下。3.1分析阶段1）教学目标。掌握 HTML 的基本语法、文字段落标记、图像标记、表格标记，并用其熟练制作网页，以培养学生创新能力、探究能力和审美能力。2）学习者特征。学生对于网页的认识还只是停留在页面的直观操作上，从学习简单网页 HTML 代码开始制作基本网页，逐步具备使用 HTML 制作包含基本内容的网页的能力。3.2设计阶段1）学习任务设计。根据对教学目标的分析和教材的梳理，整体任务设计为“利用记事本工具与 HTML 标签制作、设计图文混排的个人主页”，将这个整体任务按照由简单到复杂的原则分解为 3 个任务组，分别为“利用 HTML 插入一段文字”“利用HTML 插入一张图片”“利用 HTML 插入表格”，这个整体任务的任务组、相关子任务、专项操作和作品制作如图 2 所示。2）教学活动设计。设计学习任务的具体教学活动，具体实施流程见表 2。3.3探究阶段以陕西省某职业学校计算机专业 2020 级共计 24 名学生为应用研究对象，将上述所设计的教学活动实施，以检验基于 4C/ID 模型的项目式学习在“Web 前端开发基础”课程中的应用效果。在研究实施过程中，实验班采用基于 4C/ID模型的项目式学习设计的教学活动进行授课，对照班采用传统的课堂教学进行授课。按照整体学习任务的要求“利用记事本工具与 HTML 标签制作、设计图文混排的个人主页”，实验班和对照班上交个人网页作品，由 2 位专职教师分别进行打分，从网页的内容质量、设计排版效果、界面美观程度、整体结构和创新点 5 个方面进行 评价。教育与教学研究第 8 期153图 2 学习任务设计整体任务利用记事本工具与 HTML 标签制作、设计图文混排的个人主页利用HTML插入一张图片利用HTML插入一段文字利用HTML插入表格设计第一个HTML页面插入一段文字，设计文本字体样式插入一段文字，设计文本段落格式插入一张图片修改图片的宽度、高度和对齐方式插入背景图片插入有列标题的表格插入有通栏的表格修改表格的颜色利用 HTML插入自己喜欢的古诗词，排版整齐美观利用HTML插入喜欢的图片和背景利用 HTML表格标记插入个人简历利用记事本工具与 HTML 标签制作、设计图文混排的班级主页任务组子任务专项操练作品制作表 2 教学活动设计教学环节教师活动预设学生活动预设实践探究1任务 1：利用记事本工具与 HTML 文字段落标记插入一段文字任务 1：利用记事本工具与 HTML 文字段落标记插入一段文字1、呈现程序性信息：HTML 基本语法和基本格式2、布置任务 1-1：利用记事本工具设计第一个 HTML 页面3、呈现支持性信息：演示操作，操作过程的文字说明1、掌握程序性信息2、根据教师讲授及支持性信息完成任务 1-1、1-2、1-3 和专项操练 11、呈现程序性信息：文字样式标记的具体格式2、布置任务 1-2：插入一段文字，设计文本字体样式3、呈现支持性信息：文字样式标记的概念，演示操作，相关素材1、呈现程序性信息：文字段落标记的具体格式2、布置任务 1-3：插入一段文字，设计文本段落格式3、呈现支持性信息：文字段落标记的概念，演示操作，相关素材1、布置专项操练 1：利用记事本工具与 HTML 文字段落标记插入自己喜欢的古诗词，排版整齐美观2、呈现支持性信息：文字样式和文字段落的相关标记概念3.4评价阶段将 2 个班的作品评价结果进行对比分析，主要目的是为了检验 2 个班学生作品质量是否存在差异性，以检测基于 4C/ID 模型的项目式学习能否有效促进复杂技能的整体应用。利用 SPSS 软件分析实验班和对照班所汇总成绩各个部分的均值和标准差，然后采用独立样本 T 检验的统计方法检测是否存在显著差异，具体的统计分析结果见表 3。2023154计 算 机 教 育Computer Education续表 2教学环节教师活动预设学生活动预设实践探究2任务 2：利用记事本工具与 HTML 图像标记插入一张图片任务 2：利用记事本工具与 HTML 图像标记插入一张图片1、呈现程序性信息：标记的基本格式2、布置任务 2-1：插入一张图片3、呈现支持性信息：图像标记的概念，演示操作1、掌握程序性信息2、根据教师讲授及支持性信息完成任务 2-1、2-2、2-3 和专项操练 21、呈现程序性信息：标记和 标记设置图片水平对齐方式2、布置任务 2-2：修改图片的宽度、高度和对齐方式3、呈现支持性信息：图片的宽度、高度和对齐方式说明，演示操作1、呈现程序性信息：设置背景图片的格式2、布置任务 2-3：插入背景图片3、呈现支持性信息：背景图片设置的相关概念，演示操作1、布置专项操练 2：利用记事本工具与 HTML 图像标记插入喜欢的图片和背景，排版整齐美观2、呈现支持性信息：图像标记的概念实践探究3任务 3：利用记事本工具与 HTML 表格标记插入表格任务 3：利用记事本工具与 HTML 表格标记插入表格1、呈现程序性信息：表格标记的基本格式，的使用说明2、布置任务 3-1：插入有列标题的表格3、呈现支持性信息：表格标记的相关概念，