Referencing Json files in Storyline 360

Hi Blake_RT here's another method for you. Insert the following JavaScript into your Slide Master.

        function loadScript() {
            const scriptId = 'dynamicScript'; // Unique ID for the script
            if (!document.getElementById(scriptId)) {
                const script = document.createElement('script');
                script.id = scriptId;
                script.src = 'story_content/MyJavaScriptFunctions.js'; // Replace with the actual script URL
                script.onload = () => console.log('Script loaded successfully.');
                script.onerror = () => console.error('Failed to load the script.');
                document.body.appendChild(script);
            } else {
                console.log('Script is already added.');
            }
        }

Then just drop your JS file into your project.

I like to use a combination of WebObject and the script above, as using WebObject ensures your script is always bundled with your project (no need to remember to add it post-publish).

So, create a folder with an "index.html" file, then drop your JS file into the folder, so you might have something like this:

JSAssets

• index.html
• MyJavaScriptFunctions.js

 

Add a WebObject to your Storyline file (I add to a layer in the Slide Master), and browse to the folder containing your files, in my example JSAssets. The files index.html and MyJavaScriptFunctions.js are now bundled into your *.story file.

I then do a publish so I can obtain the unique WebObject ID located in story_content/WebObjects/{uniqueid}

I then use script in Storyline to load the JS file I've bundled. This is where you need the unique WebObject id.

        function loadScript() {
            const scriptId = 'dynamicScript'; // Unique ID for the script
            const WebObjectID= '6fXBddbYPlO '; // Unique ID for the Storyline WebObject
            if (!document.getElementById(scriptId)) {
                const script = document.createElement('script');
                script.id = scriptId;
                script.src = `story_content/WebObjects/${WebObjectID}/MyJavaScriptFunctions.js`; // Replace with the actual script URL
                script.onload = () => console.log('Script loaded successfully.');
                script.onerror = () => console.error('Failed to load the script.');
                document.body.appendChild(script);
            } else {
                console.log('Script is already added.');
            }
        }

You could load in a JSON file using the same method.