How to set up SCORM 2004 API using SimplifyScorm?

76 Views Asked by At

I need to get from Scorm package 2004 3rd edition current user points This is my code on typescript react ( Cross Origin policy in browser turned off) And always my cmi.score.max is null I am using lib https://github.com/gabrieldoty/simplify-scorm/

If you know how to set up SCORM API with another lib , please answer





import React, { useRef, useEffect, useState } from 'react';

const SCORMPlayer = () => {
    const scormPackageUrl = 'http://localhost:8000/media/courses/2004full/shared/launchpage.html';
    const scormApiScriptUrl = 'http://localhost:3000/scormAPI.js'; // Укажите URL скрипта scormapi.js
    const iframeRef = useRef<HTMLIFrameElement>(null);
    const [score, setScore] = useState<string | null>(null);

    useEffect(() => {
        const handleLoad = () => {
            const iframeDocument = iframeRef.current?.contentDocument;

            if (!iframeDocument) {
                console.error('Не удалось получить доступ к документу iframe');
                return;
            }
            const scormApiScript = iframeDocument.createElement('script');
            scormApiScript.src = scormApiScriptUrl;
            scormApiScript.onload = () => {
                console.log('SCORM API Script Loaded');
                initializeScormApi();
            };
            scormApiScript.onerror = () => {
                console.error('Error loading SCORM API script');
            };
            iframeDocument.head.appendChild(scormApiScript);
        };

        const initializeScormApi = () => {
            const scormAPI = iframeRef.current?.contentWindow?.API_1484_11;
            scormAPI.apiLogLevel = 1;
            if (!scormAPI) {
                console.error('SCORM API isnt accessible');
                return;
            }

            if (typeof scormAPI.Initialize !== 'function') {
                console.error('Initialize dont found');
                return;
            }

            const resultInit = scormAPI.Initialize('');
            if (resultInit !== 'true') {
                console.error('SCORM API NOT Initialized');
                return;
            }

            console.log('SCORM API Initialized');
            const Object = scormAPI.cmi.toJSON();
            console.log(Object)
            const scoreRaw = scormAPI.GetValue('cmi.score.max');
            if (scormAPI.GetLastError() === "0") {
                setScore(scoreRaw);
                console.log('Points:', scoreRaw);
            } else {
                console.error('Error to get points');
            }

            // Важно также правильно завершить сессию при размонтировании компонента
            return () => {
                scormAPI.Terminate('');
            };
        };

        const iframe = iframeRef.current;
        iframe?.addEventListener('load', handleLoad);
        return () => {
            iframe?.removeEventListener('load', handleLoad);
        };
    }, [scormPackageUrl, scormApiScriptUrl]);

    return (
        <div>
            <iframe
                allow="autoplay"
                ref={iframeRef}
                src={scormPackageUrl}
                style={{ width: '100vw', height: '100vh', border: 'none' }}
                title="SCORM Content"
            />
        </div>
    );
};

export default SCORMPlayer;




I am trying all methods but on scorm packages what given to me it didn't work If you have normal SCORM 2004 package please give a link

0

There are 0 best solutions below