Structure of the source file

To keep the source file clean in which Nuggets will be implemented, scenes and slides will be structured as follows:

Reserved Stage and slides

• An entire scene will be reserved for the library.
  You can call it Nuggets, Nuggets Add-on or Nuggets Plug-in, whichever you prefer.

• In this scene, each version of Nuggets will be imported into a separate slide. I've got into the habit of naming each of these slides by the library version number.

• These slides will have a Slide Master dedicated to loading Nuggets, which we will call Nuggets loader, in which we will set the triggers responsible for loading the library.

"Project" Stage and slides

• All the other scenes, including the starting scene, and all the slides in them, will make up your project.

• These slides will also have a dedicated Slide Master to check for the presence of the library, with the required triggers.

Dedicated variables

In order to record whether or not Nuggets is loaded into the project, we're going to create a first variable nuggetsLoaded of boolean type (true/false).

This will be used with the trigger in the main Slide Master.

Next, we'll create a second variable of boolean type again, which we'll call isOnline. We'll use it to disable/enable triggers that execute JavaScript code when we're in the Storyline Preview environment or a browser.

• For any test that doesn't require JavaScript, we'll set the value of this variable to FALSE, which will allow us to test in the Storyline Preview.

• If not, we'll set the value to TRUE and test the project in a browser.

We are now going to build the 2 Slide Masters. Click on the View tab, then Slide Master.

Main Slide Master

On this first Slide Master, we are going to create 2 triggers.
Make sure you are positioned on the Master and not on layouts.

Storyline Triggers

When the timeline starts on 'this slide'
- Pause timeline on 'this slide'
    If 'isOnline' = value 'True'
- Execute 'JavaScript'
    If 'isOnline' = value 'True'

In the JavaScript Editor panel, enter this script:

JavaScript

const loaded = null!==document.querySelector("[data-id='nuggets']");
GetPlayer().SetVar('nuggetsLoaded',loaded);

Then continue with the following triggers:

Storyline Triggers

When the timeline starts on 'this slide'
- Resume the timeline on 'this slide'
    If 'isOnline' = value 'True'
        and 'nuggetsLoaded' = value 'True'
- jump to slide '1.1 nuggets 00.0.0a'
    If 'isOnline' = value 'True'
        and 'nuggetsLoaded' = value 'False'

where 1.1 nuggets 00.0.0a is the slide into which the library has been imported. At this moment, it does not yet exist.

Let's create the second Slide Master.

Nuggets Slide Master

Create a new Slide master and call it Nuggets loader.

As the library will always load in the same way, we will keep only the Empty Layout and delete all the others. In this empty layout, reduce the length of the timeline to 0.25 seconds (equivalent to 2 notches) on both the Master and the Layout.

In the Master (again, be careful to focus on the Master and not the Layout), we're going to create triggers.

Storyline Triggers

When the timeline starts on 'this slide'
- Execute 'JavaScript'
- Pause timeline on 'this slide'

and enter this code in the JavaScript Editor panel:

JavaScript

(()=>{let e=t=>{if("nuggets"===t.data.origin){if(void 0===t.data.lib||null===t.data.lib)t.source.postMessage({nuggetsID:GetPlayer().GetVar("nuggetsID"),courseID:GetPlayer().GetVar("Project.ActivityId")},"*");else{window.removeEventListener("message",e,!1);let a=e=>{let s=document.createElement("script");document.querySelector("head").appendChild(s);for(let d=0;d<e.length;d+=2)s.setAttribute(e[d],e[d+1]||`${t.data.lib.shift()}`);s.addEventListener("load",()=>{t.data.lib.length?a(t.data.attr):GetPlayer().SetVar("nuggetsLoaded",!0)},!1)};a(t.data.attr)}}};window.addEventListener("message",e,!1)})();

The timeline is stopped and the JavaScript code above waits for the references to the Nuggets .js files to be returned so that they can be implemented in the Storyline player.

Once this task has been completed, the nuggetsLoaded variable changes to True and the following trigger goes into action:

Storyline Trigger

When 'nuggetsLoaded' changes
- Resume timeline on 'this slide'
    If 'nuggetsLoaded' = value 'True'

The timeline resumes, but no further instructions are given here. They will be given on the slide itself.

That's it for the Slide Masters. Now let's go back to the Storyline Story view.

Nuggets Slide

As explained in the section Structure of the source file, we're going to import the library into a dedicated slide.

If the scene and/or slide have not yet been created, we will create them now. Once created, we apply the layout Nuggets loader > blank to the slide and immediately shorten the timeline to 0.25s.

Next, we import the Nuggets library. If you haven't yet downloaded the latest version of the library, you can find it here:

Nuggets on Github

From Storyline's Insert tab, click on Web Object and in the panel that opens, target the contents of the previously retrieved and decompressed archive. Leave the other parameters unchanged, as we want the library to load automatically into the slide.

Then we create triggers:

Storyline Triggers

   When the timeline end on 'this slide'
    - Execute 'JavaScript'  // Main initialisation trigger
    - Jump to slide 'previous slide'

Remember, in the Nuggets loader Master, the timeline resumed once the library had finished loading but had no instructions to follow afterwards.

The Timeline resumes and at the end, we execute some JavaScript code.

For the moment, we're just putting in this line:

JavaScript

console.log('Hello World!');

Then we use the Storyline player's natural navigation to return to the previous slide.

The library integration is complete. We return to the first slide of our starting scene.

Starting slide

At this stage, the .story source file is ready to start any project. As for the source file template available on Github, we advise you to keep this file carefully.

For a simple test, we'll create a Hello world! layer and insert a text field in which we write: Hello world!, then in the base layer, we'll create a trigger.

Storyline Trigger

When the timeline starts on 'this slide'
- Show layer 'Hello world!'
    If 'isOnline' = value 'True'
        and 'nuggetsLoaded' = value 'True'

All that's left to do is publish in Web mode and launch in your browser.

Hello world! is displayed in the slide, as well as in the debug console.