如何结合SCORM与React实现3道选择题的学生总分计算

实现逻辑 #

你的代码已经在App组件的assessment状态中存储了每道题的对错结果，得分计算逻辑非常直接：统计正确题数，除以总题数（共3题）再乘以100，换算为百分制得分后写入SCORM指定字段即可。你使用的pipwerks-scorm-api-wrapper已经封装了底层SCORM API调用逻辑，不需要额外处理复杂的协议交互。

代码修改步骤 #

1. 修改SCORM.js中的calculateScore函数 #

接收正确题数作为入参，计算后写入SCORM得分字段，同时可以根据得分自动设置测验通过/失败状态：

calculateScore(correctCount) {
  // 总题数固定为3，换算为百分制，四舍五入取整
  const rawScore = Math.round((correctCount / 3) * 100);
  SCORM.set("cmi.core.score.raw", rawScore.toString());
  SCORM.set("cmi.core.score.max", "100");
  SCORM.set("cmi.core.score.min", "0");
  // 60分以上标记为通过，否则标记为未通过，符合SCORM标准状态规范
  const lessonStatus = rawScore >= 60 ? "passed" : "failed";
  SCORM.set("cmi.core.lesson_status", lessonStatus);
}

2. 修改App组件中的finish函数 #

用户点击完成按钮时，先统计正确题数、计算得分，再执行SCORM完结逻辑：

const finish = () => {
  // 过滤出所有做对的题目，统计数量
  const correctCount = assessment.filter(item => item === true).length;
  // 先计算得分并写入SCORM
  Scorm.calculateScore(correctCount);
  // 再执行完结保存逻辑
  Scorm.finish();
};

3. 优化SCORM.js中的finish方法 #

删除重复的学习状态赋值逻辑，避免覆盖前面calculateScore里设置的通过/失败状态：

finish() {
  alert("你已完成测验！");
  // 删除下面这行重复赋值的代码
  // SCORM.set("cmi.core.lesson_status", "completed");
  SCORM.save();
  SCORM.quit();
}

测试说明 #

修改完成后打包上传到SCORM Cloud测试即可，提交所有题目答案后点击完成，SCORM Cloud会自动识别到你写入的得分和测验状态，不需要额外配置其他参数。

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