如何在React应用程序中将SCORM包与react-scorm-provider集成？

Question

我正在尝试使用react-scorm-provider库将SCORM包集成到React应用程序中。我的目标是在 iframe 中显示 SCORM 包，然后访问 SCORM 数据，例如学生姓名、状态和跟踪信息。但是，我正在努力建立与 SCORM API 的连接来检索此数据。

这是我的代码结构： 父组件（App.js）：

import React from "react";
import "./styles.css";
import ScormProvider from "react-scorm-provider";
 import Scorm from "components/Scorm";

export default function App() {
  return (
    <ScormProvider version="1.2" debug={true}>
      <div className="App">
        <h1>Quiz</h1>
        <hr />
        <Scorm />
      </div>
    </ScormProvider>
  );
}

子组件（Scorm.jsx）：

import React from "react";
import { withScorm } from "react-scorm-provider";

const Scorm = (props) => {
    return (
      <div>
        <iframe
          src="https://louuu03.github.io/Scorm_Example/story.html"
          height="600px"
          width="900px"
          title="Scorm Package URL"
        />
        <br />
        <button onClick={() => { console.log(props); }}>
          Click Me
        </button>
      </div>
    );
}

export default withScorm()(Scorm);

Answer 1

react-scorm-provider 库提供客户端 SCORM API 功能。与所有 SCORM 课程一样，您仍然需要在 LMS 环境中启动课程，该环境提供服务器端 SCORM API。如果您没有 LMS，您可以免费在 SCORM Cloud 中测试您的课程。