时间戳

首页 > 解决方案 > 如何用 SCORM 和 React 计算总分？

reactjs - 如何用 SCORM 和 React 计算总分？

问题描述

SCORM实现的例子很少，所以我有点迷茫。我需要根据 3 个问题获得学生分数。我真的不明白我在做什么。我知道我可能需要一个像 calculateScore() 这样的函数。不过，SCORM 让我很困惑。我使用 SCORMCLOUD 进行测试，但每次我想测试某些东西时我都会重新上传构建..

APP.js

function App() {
  Scorm.init();

  const [learnerName, setLearnerName] = useState(`${Scorm.getLearnerName()}`);
  const [assessment, setAssessment] = useState([]);

  const finish = () => {
    Scorm.finish();
  };

  const updateAssesment = (correct, response) => {
    setAssessment(assessment.concat([correct]));
    Scorm.submitMCQ(correct, response);
  };
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Learner name={learnerName} />
      </header>
      <main>
        <Mcq result={updateAssesment.bind()} question="What is 10 * 10?" correctAnswer={0} answers={["100", "20"]} />
        <Mcq
          result={updateAssesment.bind()}
          question="What is the capital of Spain?"
          correctAnswer={2}
          answers={["Barcelona", "Lisbon", "Madrid"]}
        />
        <Mcq
          result={updateAssesment.bind()}
          question="Which US President's office commissioned the creation of SCORM?"
          correctAnswer={3}
          answers={["Donald Trump", "Barack Obama", "Ronald Reagan", "Bill Clinton"]}
        />
        <CompleteButton completeActivity={finish.bind()} />
      </main>
    </div>
  );
}
export default App;

SCORM.js

import { SCORM } from "pipwerks-scorm-api-wrapper";

let Scorm = {
  init() {
    SCORM.init();
  },

  getLearnerName() {
    return SCORM.get("cmi.core.student_name");
  },

  submitMCQ(correct, response) {
    let nextIndex = SCORM.get("cmi.interactions._count", true);
    SCORM.set("cmi.interactions." + nextIndex + ".id", "round_" + nextIndex);
    SCORM.set("cmi.interactions." + nextIndex + ".type", "choice");
    SCORM.set("cmi.interactions." + nextIndex + ".student_response", response);
    SCORM.set("cmi.interactions." + nextIndex + ".result", correct);
  },

  calculateScore() {
    //something here??
    SCORM.set("cmi.core.score.raw", "0");
    SCORM.set("cmi.core.score.max", "100");
    SCORM.set("cmi.core.score.min", "0");
  },

  finish() {
    alert("you have finished!");
    SCORM.set("cmi.core.lesson_status", "completed");
    SCORM.save();
    SCORM.quit();
  },
};

export default Scorm;

MCQ 组件

export default function Mcq(props) {
  const [selectedOption, setSelectedOption] = useState(0);
  const [answered, setAnswered] = useState(false);

  const handleOptionChange = (changeEvent) => {
    setSelectedOption(Number(changeEvent.target.value));
  };
  const renderAnswers = () => {
    return props.answers.map(function (answer, index) {
      return (
        <div className="answer" key={index}>
          <input type="radio" value={index} checked={selectedOption === index} onChange={handleOptionChange} />
          <label>{answer}</label>
        </div>
      );
    });
  };
  const handleFormSubmit = (formSubmitEvent) => {
    formSubmitEvent.preventDefault();
    setAnswered(true);
    props.result(selectedOption === props.correctAnswer, props.answers[selectedOption]);
  };
  const currentState = () => {
    if (!answered) {
      return (
        <form onSubmit={handleFormSubmit.bind(this)}>
          {renderAnswers()}
          <button className="btn btn-default" type="submit">
            Submit
          </button>
        </form>
      );
    } else {
      return <div>{checkCorrectAnswer()}</div>;
    }
  };
  const checkCorrectAnswer = () => {
    if (selectedOption === props.correctAnswer) {
      return `yes, ${props.answers[props.correctAnswer]} is the correct answer.`;
    } else {
      return `You answered ${props.answers[selectedOption]}. Sorry, but the correct answer is ${
        props.answers[props.correctAnswer]
      }.`;
    }
  };

  return (
    <div className="Mcq">
      <p>{props.question}</p>
      {currentState()}
    </div>
  );
}

标签： reactjsscormscorm1.2scorm-cloud-api

解决方案

你的问题有点令人困惑。SCORM 是一个将两件事联系在一起的 API：

  • 学习内容，通常以一个或多个所谓的 SCO 的形式（即带有与 SCORM JS API 对话的资产的 HTML 文件）
  • 提供学习内容并提供 SCORM JS API 实例的 LMS

看起来您正在尝试创建学习内容，尽管您提供了一种更改学习者名称的方法，这是 JS API 提供的只读数据。

如果这就是你想要做的，那么分数不是由 SCORM 决定的，而是由你决定的。根据您的代码，我猜如果回答正确，您希望每个问题都值得多分（或至少只有一分），并且分数应该基于该问题和问题总数。

由于您已经存储了所有答案cmi.interactions，您可以先尝试获取交互次数（即答案）。这会告诉您答案的总数以及最大的点数，或cmi.core.score.max。

因为如果你做一个简单的计数而不是更复杂的事情，比如选择不正确的选择的负分，那么最低可能的分数是零分，那么cmi.core.score.min就会是0。

这cmi.core.score.raw将是总点数，因此是正确答案的数量。您可以通过迭代cmi.interactions.n.result您之前设置的值来获得此值（n索引介于零cmi.interactions._count和仅计算 is 的result值"correct"）。

但是请注意，submitMCQ应该设置cmi.interactions.n.result为"correct"or "incorrect"not trueor false。否则，符合标准的 LMS 将拒绝该值为无效（这不会引发异常，而是设置一个错误标志，您必须明确检查，因为 SCORM 很奇怪）。

推荐阅读