Perpetual Notepad for Storyline

Hi Kimberley, I've set out the full steps below:

Create the Lightbox Notepad Slide

• Insert a new slide.
• Give it a clear name, e.g. Notepad Lightbox.
• The layout can be blank; you don’t need any objects on the slide itself – the JS builds the notepad UI.

(This is the slide you’ll use in Show Lightbox Slide triggers elsewhere in the course.)

Create the CloseNotepad variable

• Open Manage Project Variables.
• Click + to add a new variable: CloseNotepad
• Type: True/False - default value: False
• Click OK.

(The script assumes the variable is called exactly CloseNotepad (don’t rename it)).

Add triggers on the Notepad lightbox slide.

• To reset CloseNotepad when the lightbox opens:
• Action: Adjust variable - CloseNotepad to value 'False', when the timeline starts on this slide.

(This just ensures the variable starts clean every time the notepad opens.)

Create a trigger to close the lightbox when CloseNotepad turns True.

Trigger - Adjust Variable: close lightbox, when variable changes, variable: CloseNotepad if CloseNotepad == True

Just for your interest, the JS close button runs this part of the code: player.SetVar('CloseNotepad', true);

Add the JavaScript trigger with the D4 script

Depending on how you choose to implement the JS, if you do it on the same Notepad Lightbox slide:

• Create a new Trigger: Execute JavaScript, when the timeline starts on this slide.
• Paste the D4 script into the the JavaScript editor.

The Close button in the notepad panel now sets CloseNotepad to true. Your Storyline trigger sees the change and closes the lightbox. 

Now you need to add a way for learners to open the Notepad after they have closed it. In your case they can simply click on the link in the player otherwise, on any slide where you want access to the notepad:

• Insert a button, icon, or text link.
• Add a trigger: Show lightbox, Notepad Lightbox, when the user clicks (your button/link/etc.).

(Learner clicks → lightbox opens → JS builds the notepad → they use it → they click Close → CloseNotepad turns True → lightbox closes.)

(Optional) Hook up note text to Storyline variables

If you’d like to use the note contents inside Storyline (e.g. for review slides or debug):

Create the following text variables:

NoteTitle

NoteBody

NoteId

The script already does as shown here:

player.SetVar('NoteTitle', titleEl.value || '');
player.SetVar('NoteBody', editor.innerText || '');
player.SetVar('NoteId', id);

So those variables will update automatically as the learner types/switches notes. This a good feature because whilst the notes are saved into localStorage and persist in that way, they can still be lost, say, if the cache or history is deleted or if the learner uses a different device. In this instance we can use SCORM suspend data, to restore the notes from these variables. This may be a bit touch and go on this version. However, on the latest D3 version, which I have not released as a free version, it works well along with other advanced features that are not in this free version.

Finally a  quick checklist for the Close button

•  Lightbox slide created
•  CloseNotepad (True/False) variable created, default False
•  Trigger: Adjust CloseNotepad = False when lightbox timeline starts
•  Trigger: Close lightbox when CloseNotepad changes (and is True)
•  Execute JavaScript trigger with the D4 script on lightbox timeline start (or other means)
•  Buttons somewhere in the course to Show Lightbox → Notepad_Lightbox

Do that, and the Close button in the notepad will behave exactly like a built-in lightbox close.

Hope this helps you get started.