Forum Discussion
Perpetual Notepad for Storyline
Hi, here’s a simple Storyline 360 notepad in JavaScript:
- It is designed to be 720×540 and centred for use on a lightbox slide.
- It provides persistent notes across the course via localStorage.
- Multiple notes are allowed: the learner can create / rename / delete / switch notes.
- It has an advanced editor: font, size, colour, highlight, bold/italic/underline, lists, align, clear formatting and custom Undo/Redo (to 10 levels).
- The learner can export the current notes or a selection of multiple notes into a Word document.
- It has a built in close button that (a) flips a Storyline variable CloseNotepad (which you need to create).
- Optional SL variable can be created to sync content across your course: NoteTitle, NoteBody, NoteId.
The code can be found in the Execute JavaScript trigger on the lightbox master slide. It also requires a trigger to reset the variable CloseNotepad back to false. Everything can be found in the attached file.
If you find this useful, please let me know. I'll also upload a version that can be used in Rise 360.
33 Replies
Hi JoeDey Clearly, you're one step ahead of the average person 😄. I dive right in and everything works perfectly. Really impressive.
I imagine “LearnerName” is automatically retrieved from the LMS? So much to explore.There are two ways the script captures the learners name and you can use them depending on what you want to achieve. The script itself has the built in variable learnerName. This is linked to the insert name text entry box in the UI. The Storline variable userName captures their name via a text entry box (that you create yourself). The same is true for the script variable learnerOrg and the Storyline variables companyName and assessingBody.
***UPDATE***
Hi everyone, there has been some fantastic feedback which I really appreciated. I've taken many of the suggestions and woven them into a new version of the notepad. It can now do much more and can be fully configured to your requirements directly from the top of the JavaScript. Make sure that if you change the Storyline player size, that you also adjust the size of the notepad UI in the JavaScript.
I have added loads of functions / features and made it as accessibility compliant as I could. I have designed the UI and the Storyline setup to be used either in Rise (as it is) as a Storyline Interactive Block, or in Storyline itself via a Lightbox triggered from the Player (or any other trigger). I have removed the slots function as it was causing more issues than they were worth.The notepad is perpetual in both Storyline (on the LMS), and in Rise. It achieves this in a combination of ways:
- Saving notes to localStorage immediately after the user pauses typing
- Saving notes to SCORM suspendData (using LZ compression) (automated and manual saves)
- Saving notes to Storyline variables via the snapShot functions
This means that ideally the learner will use the same device to complete their learning, in which case localStorage on that device maintains a copy of the notes. The JavaScript automatically populates the UI with these notes by retrieving them from the cache on every revisit. However, what if the device's cache or memory is purged?
Well, in that scenario, we have the fallback that the notes are also saved automatically in Storyline variables, using the Snap feature. The JavaScript will check the notes on every revisit and if they are found to be empty it will automatically repopulate the notes from these snapshots. The user can also do this themselves via a button, though hopefully they probably won't ever have to.
This means the learner can use pretty much any device and still see their previous notes in their Rise course every time they open it up. It should also self-recover the notes where the device cache / history was cleared.This project was developed as a fun activity using AI.
That's the principle of it all anyway. If you would like to see if it actually works here is the file. Let me know how you get on by dropping a note here. If you develop it further, please share it with us on this page.
This version has been converted to be compatible with the production version. (27/11/25)
Hello JoeDey Joe.
Two months ago, I told you how much I appreciated your generous sharing, but I was so busy with work that I didn't explore the old version any further. So I jumped on this one, but unfortunately, I'm having the same problem. I can't open the .story file with the very latest version of SL. I get the same error message (in French, which is more exotic 😀, but the same) as Matt. I hope you can explain why.Try it now.
Getting the attached message - I've checked for updates, but my software appears up to date - just wondering what version of Storyline this was created with?
Matt
Try it now
I was just thinking about this very thing! How could I push the notes to the LMS and bring them back again! Thank-you !
Hello JoeDey , Many thanks!
Hi Kimberley, what odd behaviour it was doing. I couldn't locate the exact issue on that version, so I have uploaded the latest version of this JavaScript Notepad and I have configured your slide to work directly from a lightbox. I have another version that includes useful tools for the learner such as the ability to save up to 20 notes to a slot, view their notes in Storyline variables (and manipulate them later in the course), the ability to backup and restore a note in case overwriting etc. Please let me know how you get on with this.
Hi JoeDey I tried using this notepad as a Player Tab, but can't get the "close" button to function. Thanks for the awesome sample. Any advice is greatly appreciated!
Try this if you want the 'Close' button to reset CloseNotepad back to False after closing (for repeated opens):
First place the code into an Execute JavaScript trigger (when the Timeline Starts onto a lightbox slide) (you've done this via a link in the Player, which I assume will also work).
Next place a trigger (when the timeline starts) on the lightbox slide (adjust variable CloseNotepad) to False.
That should do the trick.
Have a look on the master slide. The code allows you to change the size of the note, background colour etc. I think I set the background colour on that version to transparent, which allows the notepad to adopt your Rise background.
Try copying the code to ChatGPT and giving it some suitable instructions and see how you can develop it. Post your new version here for all to see.
This is brilliant, thanks so much for sharing.
Is there anyway to get the RISE version to save to a word document so that the user can download their notes? ThanksAs a compulsive note taker myself, I value the ability to take notes and then download them at the ned of the end of the course. This would be very helpful for me to use with the videos I include in th course so that learners could note what was valuable as they watched the video.
This is great, thanks for sharing! Can the Rise version be used in a custom block?
Glad you find it useful. I don't think a custom block accepts HTML code just yet. So no, I don't think it will work in it.
Thank you.
Hi Thierry Emmanuel, I'm glad you found it useful. I've added a couple more below that might be of interest. The D3 file is the same notepad but which is designed to be imported into Rise as a Storyline block. The .docx file contains the HTML code for a smaller version of the notepad with fewer features. Both can be used multiple times, and they can for example be used by the student to write and save continuous notes, and or multiple different versions of notes anywhere in the course. Just insert as many notepads as you need.
Just copy and paste the HTML code from the Word document into a Rise Code block. That's it!
I would appreciate any feedback and I hope you find these useful too.
Thank you very much for this code. It is very useful.
I would like to add a “Download as PDF” or “Print” button to allow students to save their notes.
I tried to modify the code using ChatGPT, but I couldn't find a solution.
Can anyone help me?
