Web-Dev-For-Beginners 教学实施指南：GitHub Classroom、LMS 导入与直接仓库交付三种落地模式

Web-Dev-For-Beginners 是一门覆盖 24 课、12 周的 Web 开发课程，其根目录的 for-teachers.md（含 保加利亚语等 50+ 语言翻译）专门面向教师，说明如何将这套课程设计到真实课堂中。本篇基于该文档展开，覆盖三种落地模式：与 GitHub Classroom 配合的按课建仓工作流、向 Moodle/Canvas/Blackboard 导入现成课程包、以及不依赖任何平台直接从仓库授课，并结合仓库内真实存在的教学资源文件（LMS 导入包、课堂规范文档、测验应用与离线文档工具）说明每一环节的具体配置与注意事项，读完即可按图索骥地把这门课程搬进自己的班级。

课程包导入 Moodle 后的课堂界面

课程形态与教学资源盘点

在配置任何平台之前，先了解这套课程在仓库中的组织形态，这决定了它在各平台上的拆分与导入方式：

• 24 课 / 12 周结构：课程按阶段组织在编号目录中，如 1-getting-started-lessons、2-js-basics、3-terrarium、6-space-game、7-bank-project 等，每个项目目录内再按子课细分，整体节奏见 Roadmap.md；
• 每课标准结构：lesson-template/README.md 展示了统一模板——课前测验链接、正文内容、Knowledge Check、Challenge、课后测验，以及配套的 assignment.md。教师分仓时可以直接以课目录为粒度；
• 测验应用：所有课前/课后测验集中在 quiz-app（Vite + 前端应用，测验内容以 JSON 存放于 quiz-app/src/assets/translations 下，支持多语言）。测验可在本地运行或部署到 Azure，详见该目录 README；
• LMS 导入包与截图：teaching-files/ 目录内包含 Moodle 上传文件 webdev-moodle.mbz、Common Cartridge 文件 webdev-common-cartridge.imscc，以及 Moodle 界面截图 与 Canvas 界面截图，是后文 LMS 章节的直接依据；
• 离线与 PDF 输出：仓库自带 Docsify 离线文档方案（docsify serve 可在本地 3000 端口渲染全部文档），并用 docsifytopdf.js 配置将 docs/_sidebar.md 侧边栏定义的目录导出为 pdf/readme.pdf（构建脚本 convert 见 package.json）。教师可据此向班级分发纸质/离线材料。

模式一：配合 GitHub Classroom 按课建仓

文档给出的核心思路是：为每一课创建独立仓库，这样 GitHub Classroom 可以为每课单独挂载作业（assignment），互不干扰。完整操作流程如下：

1. Fork 到组织：先将本仓库 fork 到教师自己的 GitHub 组织（organization）下，便于集中管理；
2. 为每课拆分独立仓库，将课程文件夹提取到单独仓库，文档给出两个选项：
   • 选项 A（简单）：创建空仓库（每课一个），把对应课目录（如 3-terrarium、6-space-game）的内容直接拷贝进去；
   • 选项 B（保留 Git 历史）：使用保留 Git 历史的方式（例如把某个文件夹拆分为新仓库），适合需要追踪内容溯源（provenance）的场景；
3. 在 GitHub Classroom 中为每课创建一个 assignment，并指向对应的课程仓库；
4. 推荐设置：
   • 仓库可见性设为 private，保护学生作业；
   • 以课程仓库默认分支作为 starter code（学生 fork 的起点）；
   • 为测验和提交添加 Issue / Pull Request 模板；
   • 如课程包含自动化测试，可配置 autograding（自动评分）；
5. 有用的命名与标签约定：
   • 仓库命名：lesson-01-intro、lesson-02-html 等，与课序对应；
   • Issue 标签：quiz、assignment、needs-review、late、resubmission，覆盖测验、作业、待审、迟交、重交的完整状态流；
   • 按教学批次打 tag/发布 release，例如 v2025-term1，便于区分不同学期/班级。

文档还有一条重要提示：避免把仓库放在云同步文件夹（如 OneDrive/Google Drive）内，这在 Windows 上极易引发 Git 冲突。

从仓库结构看，该模式与课程目录天然契合：每课目录本身就是一个自包含单元（README + assignment + 图片/代码），选项 A 的"拷贝课目录"操作几乎零成本。

模式二：导入 Moodle、Canvas 或 Blackboard

如果学校使用 LMS 统一管理课程，本仓库提供了可直接导入的课程包：

• Moodle：上传 webdev-moodle.mbz（Moodle 备份归档格式）即可加载整个课程；
• Common Cartridge：上传 webdev-common-cartridge.imscc（IMS CC 标准包），兼容面更广；
• 注意事项：
  • Moodle Cloud 对 Common Cartridge 的支持有限，官方建议优先使用上面的 Moodle 专用文件——该文件同样可以上传到 Canvas；
  • 导入完成后，务必复查各模块（module）、截止日期（due dates）与测验设置（quiz settings），使其与自己的学期日历对齐。

同一课程包在 Canvas 中的呈现

结合前面盘点：LMS 包中的测验内容对应 quiz-app 中的题库，导入后建议按自己班级重新排期；quiz-app 也支持本地运行或部署，可作为 LMS 之外的补充测验渠道。

模式三：不依赖 Classroom，直接从仓库授课

若不想使用 GitHub Classroom，文档给出两种课堂形态的组织方式：

同步/在线形式（Zoom/Teams）：

• 由导师（mentor）带领简短的开场热身；利用 breakout 分组房间进行测验；
• 公布测验时间窗，学生以 GitHub Issues 提交答案；
• 协作型作业则让学生在公开的课仓库中工作并通过 Pull Request 提交。

私有/异步形式：

• 学生把每课 fork 到自己名下的 private 仓库，并把教师添加为 collaborator；
• 学生在课堂仓库或自己的私有 fork 中，通过 Issues 交测验、通过 Pull Requests 交作业。

这一模式与课程前几课的 GitHub 基础教学正好形成呼应：第 2 课 Intro to GitHub 本身就在教 fork、Issue、PR 流程，因此学生在完成课程内容的同时恰好掌握了作业提交所需的 Git 操作。

教学最佳实践

文档最后给出五条落地建议，均可与仓库内现成资源对应：

1. 提供 Git/GitHub 入门课：覆盖 Git 基础、Issues 与 PRs 的用法——正好对应 1-getting-started-lessons 前两课的内容；
2. 在 Issues 中使用 checklist（任务清单）：用于多步骤测验/作业的进度跟踪；
3. 添加课堂规范文档：仓库已内置 CONTRIBUTING.md 与 CODE_OF_CONDUCT.md，fork 后可直接沿用或按班级情况改写；
4. 注意无障碍：为图片补充 alt 文本、为视频加字幕，并提供可打印的 PDF（可用 pdf/readme.pdf 或按 docsifytopdf.js 自行生成）；
5. 按学期版本化内容：每个学期独立版本，并在发布后冻结课程仓库，避免课程进行中被上游改动影响学生。

反馈与支持

课程维护者欢迎教师反馈：可以在本仓库直接开 Issue 报告错误、提出请求或改进建议，也可以在仓库的 Teacher Corner 讨论区发起讨论（入口见 README.md 中 Getting Started 一节对教师的指引）。若使用多语言课堂，可直接采用 translations/ 下对应语言版本的本文档与课程材料，各语言由 Co-op Translator 自动同步更新。

适用前提与限制：上述 LMS 包与 GitHub Classroom 流程均以当前仓库 teaching-files/ 中的文件版本为准；Moodle Cloud 的 CC 支持限制、测验排期复查等说明同样适用于任何 LMS 导入场景。仓库为只读参考资料，实际操作（fork、建仓库、上传课程包）均应在教师自己的组织/账户中进行。