I am building a react based LMS, I have been stuck on a issue where I have a xAPI conformant course constructed using articulate 360. I hosted the course on localhost 8000 and using it in iframe to import inside my LMS. i have setup event listeners on window to capture the events happening inside iframe. Now whenever I perform any action on the course I don't get any data related to course.

                         <iframe
                ref={iframeRef}
                id='parent-frame'
                width={600}
                height={600}
                src='http://localhost:8000/index.html'
                onLoad={handleIframeLoaded}
                ></iframe>

This is iframe code where I am loading the course.

useEffect(() => {
        const listeners = (event: MessageEvent) => {
            console.log('message from Iframe:', event);
            if (iframeRef.current && event.source === iframeRef.current.contentWindow) {
                try {
                    const messageData = JSON.parse(event.data);
                    if (messageData.statement) {
                        console.log('xAPI Statement:', messageData.statement);
                    } else {
                        console.log('message from Iframe:', messageData);
                    }
                } catch (error) {
                    console.error('Error processing message:', error);
                }
            }
        };

        window.addEventListener('message', listeners);

        return () => {
            window.removeEventListener('message', listeners);
        };
    }, []);

this is the event listener I have applied where I am expecting to capture the xAPI events but all I get is coursePreviewClicked on console logging the event data.

I am building a react based LMS, I have been stuck on a issue where I have a xAPI conformant course constructed using articulate 360. I hosted the course on localhost 8000 and using it in iframe to import inside my LMS. i have setup event listeners on window to capture the events happening inside iframe. Now whenever I perform any action on the course I don't get any data related to course.

                         <iframe
                ref={iframeRef}
                id='parent-frame'
                width={600}
                height={600}
                src='http://localhost:8000/index.html'
                onLoad={handleIframeLoaded}
                ></iframe>

This is iframe code where I am loading the course.

useEffect(() => {
        const listeners = (event: MessageEvent) => {
            console.log('message from Iframe:', event);
            if (iframeRef.current && event.source === iframeRef.current.contentWindow) {
                try {
                    const messageData = JSON.parse(event.data);
                    if (messageData.statement) {
                        console.log('xAPI Statement:', messageData.statement);
                    } else {
                        console.log('message from Iframe:', messageData);
                    }
                } catch (error) {
                    console.error('Error processing message:', error);
                }
            }
        };

        window.addEventListener('message', listeners);

        return () => {
            window.removeEventListener('message', listeners);
        };
    }, []);

this is the event listener I have applied where I am expecting to capture the xAPI events but all I get is coursePreviewClicked on console logging the event data.

• reactjs
• scorm
• lms
• xapi

Share Follow asked Mar 4 at 8:03 Vivek SherkhaneVivek Sherkhane 122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

This code is trying to leverage browser based postMessage events (see https://developer.mozilla./en-US/docs/Web/API/Window/postMessage) but that is not how xAPI is implemented. xAPI itself defines the interface to a system called an LRS. The LRS implements a RESTful web service API that the content will communicate directly with. In the case of Articulate 360 it is implemented as a package with a tincan.xml file which follows a set of [deprecated] guidelines released with a pre-1.x version of xAPI that can be found here: https://github/RusticiSoftware/launch/blob/master/lms_lrs.md

To implement an LMS to support this type of content you will need access to an LRS and to implement the launch guidelines such that certain pieces of information are provided to the content's "launch" page. It will then communicate with the LRS directly. For more about launch you may want to visit this page/site: https://xapi/launch/