Angular应用对接SCORM、LMS相关技术疑问及集成咨询

一、先理清核心概念 #

• SCORM：一套在线课程内容和学习管理系统（LMS）的通信标准，规定了课程怎么和LMS交换数据（比如学习进度、测验成绩）。你用Articulate导出的SCORM包，就是符合这个标准的课程文件。
• LMS：用来管理、分发SCORM课程，同时存储用户学习数据的系统，常见类型：
  • Moodle：开源可自建的LMS，需要自己部署服务器、维护；
  • Scorm Cloud：第三方托管的LMS服务，不用搭服务器，上传SCORM包就能用，还提供API对接；
  • 自建后端：自己开发符合SCORM标准的学习管理系统，成本高但完全可控。

二、Articulate导出SCORM后的推进步骤 #

根据团队技术能力和需求二选一：

选项1：用第三方LMS（比如Scorm Cloud） #

1. 注册账号后上传你的SCORM压缩包；
2. 平台会生成课程的访问链接/嵌入代码；
3. 把链接/嵌入代码集成到你的Angular应用（比如用iframe）；
4. 通过平台提供的API，获取用户的学习进度、测验成绩等数据。

选项2：自建后端服务器（自定义LMS） #

1. 搭建后端服务，实现SCORM标准要求的运行时API接口（比如初始化课程、保存进度、获取成绩的方法）；
2. 把SCORM包解压后存到服务器的静态文件目录；
3. 在Angular应用里通过iframe加载SCORM包根目录下的index.html（这是课程的实际入口页面）；
4. 后端处理SCORM内容发送的学习数据请求，存储到数据库。

三、Angular获取测验/考试数据的方法 #

用第三方LMS的情况 #

直接调用平台提供的API（比如Scorm Cloud的REST API），传入用户ID、课程ID，即可拉取测验成绩、答题详情等数据。

自建LMS的情况 #

1. 后端在SCORM课程提交测验数据时，把数据（用户ID、课程ID、答对题数、总分等）存入数据库；
2. Angular通过调用自建后端的API，从数据库查询并获取这些数据。
3. 若要实时获取，可让SCORM内容在提交测验时，通过postMessage把数据发送给Angular父页面，Angular监听消息接收数据。

四、iframe中应加载的内容 #

• 用第三方LMS：加载平台生成的课程嵌入链接（比如Scorm Cloud的专属访问链接），这个链接已经封装了SCORM的初始化和通信逻辑；
• 自建LMS：加载SCORM包解压后的入口HTML文件（通常是根目录的index.html），imsmanifest.xml是SCORM的配置文件，用来描述课程结构，由LMS后台解析，不是前端直接加载的内容。

五、SCORM内容交互需求的实现 #

1. 获取视频停止的精确时间 #

• 如果视频内嵌在SCORM内容里：在Articulate制作课程时，给视频添加触发器，当视频暂停/停止时，调用SCORM的cmi.suspend_data字段（用于存储自定义学习状态），把当前时间戳存进去；
• Angular通过LMS的API（第三方或自建）获取cmi.suspend_data字段，解析出视频停止时间；
• 也可以让SCORM内容在视频停止时，通过postMessage把时间戳实时发送给Angular父页面。

2. 内嵌白板绘图并保存结果 #

• 方案一：在Articulate制作课程时，嵌入自定义HTML5 Canvas白板组件，把绘图结果转成base64字符串；通过SCORM的cmi.suspend_data字段把数据保存到LMS；Angular从LMS获取数据后展示或下载。
• 方案二：如果白板是Angular应用的组件，让SCORM内容通过postMessage通知Angular打开白板；用户保存后，Angular再把数据发送给SCORM内容，由SCORM保存到LMS。

内容的提问来源于stack exchange，提问作者Kerim Balayev