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.
35 Replies
Hi JoeDey . In my opinion, this is not a “simple” notepad but a huge piece of work. Thank you very much for generously sharing it. I have downloaded it and will study it closely. Not being a coder, I am always interested in how I can (possibly) modify the code “my way.” So, give me a few hours/days to explore it, and I will let you know how useful I found it. Thanks again.
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?
Thank you.
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.
As 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 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? ThanksHave 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.
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.
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.
***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)
I was just thinking about this very thing! How could I push the notes to the LMS and bring them back again! Thank-you !
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
I'll convert it for you Matt. I may have developed it in the Beta version. May take me a day or two.
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.Hi Theirry
I can explain why. I may have developed those using the Beta version and in doing so, I was able to name the Execute Jacascript triggers. These are incompatible with the production version and will prevent the story file opening in it. That may be your difficulty. If I get time in the next few days I'll try to convert it for you and upload it again.
