admin管理员组

文章数量:1422169

I am using /[email protected]/dist/scorm-again.js, and initializing after loading CDN in my NextJS page. Initialization is successful and window.API_1484_11 is also having value, but still unable to get scores and progress from course because course file is unable to find LMS API, I don't know why.

I have successfully loaded scormontent/html file and and initialized scorm again player but still my course is unable to communicate with scorm-again and throwing warnings:

Warning: Course was unable to find the LMS API for CommitData. Course may have been launched from scormcontent/index.html, or the course package is not within an LMS. Saving of student data will not occur.

index.html:195 Warning: Course was unable to find the LMS API for ConcedeControl. Course may have been launched from scormcontent/index.html, or the course package is not within an LMS. Saving of student data will not occur. index.html:195 Warning: Course was unable to find the LMS API for CreateResponseIdentifier. Course may have been launched from scormcontent/index.html, or the course package is not within an LMS. Saving of student data will not occur. index.html:195 ,**

'use client';

import { useEffect, useState, useRef } from "react";
import Script from "next/script"; // For Next.js (remove if using plain React)

declare const Scorm2004API: any;
declare const Scorm12API: any;

const ScormCDN = () => {
  const [scormAPILoaded, setScormAPILoaded] = useState(false);
  const [loadIframe, setLoadIframe] = useState(false);
  const iframeRef = useRef(null);

  // Function to execute when the SCORM library is loaded
  const onLoadScormAgainLibrary = () => {
    setScormAPILoaded(true);
    console.log("✅ SCORM library loaded");
  };

  useEffect(() => {
    if (scormAPILoaded && typeof window !== "undefined") {
      // Initialize SCORM 2004 API and attach it to `window`
      const apiUrl = 'http://localhost:3000/v1';
      const apiVersion: string = '2004';
      const apiSettings = {
        logLevel: 1,
        version: apiVersion,
        lmsCommitUrl: `${apiUrl}/scorm/progress`,
        autocommitSeconds: 5,
        autocommit: false,
        asyncCommit: true,
        xhrWithCredentials: true,
        autoProgress: true,
        xhrHeaders: {
            accept: 'application/json',
        },
        fetchMode: 'cors',
        responseHandler: (response: any) => {
            if (response.status === 404) {
                console.error('Commit failed with 404 error, retrying...');
            } else {
                console.log('responseHandler Response from LMS:', response);
            }
        },
        onload: function (response: any) {
          console.log('onload Response from LMS:', response);
        },
        renderCommonCommitFields: true,
        mastery_override: false
      }

      const userId = '123';
      const userName = 'Binyameen';

      if(apiVersion === '1.2')
      {
        window.API = new Scorm12API(apiSettings);
        console.log("✅ SCORM 1.2 API initialized:", window.API);

        window.API.cmi.core.student_id = userId;
        window.API.cmi.core.student_name = userName;
      }
      else if(apiVersion === '2004')
      {
        window.API_1484_11 = new Scorm2004API(apiSettings);
        console.log("✅ SCORM 2004 API initialized:", window.API_1484_11);
            // Attach event listener before initializing
            window.API_1484_11.on("Initialize", function () {
              console.log("

本文标签: nextjsScorm course HTML file is unable to communicate with scormagain JS in NextJS pageStack Overflow