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.
22 Replies
Nice work Dan, the template feature works well. I would have liked to have had a means to remove the template once deployed, in case I changed my mind and wanted to revert to the standard note. Nice orange buttons too 🙂
Perpetual Notepad — High-Level Update Summary
Hi JoeDey I may now be obsessed with both this and JavaScript-enabled UI 😁
Here's my latest version based on yours Review360- Full visual redesign for a contemporary, modern UI aligned to Forged Frameworks branding.
- Unified typography system (Lato/Montserrat) for a clean, consistent learner experience.
- New brand-aligned colour palette applied across buttons, panels, accents and backgrounds.
- Improved layout & interaction design, including softer components, better spacing and clearer hierarchy.
- Updated note structure, including renaming the default note to Starting note to support reflection flow.
- Enhanced toolbar and editor experience, with refined buttons, clearer controls and better placement.
- Improved learner scaffolding, including updated templates and a more intuitive reflective starting point.
- Consistent export styling, ensuring Word exports match the updated UI and typography.
- Cleaner, more robust codebase, with refined localStorage handling, smoother load behaviour and higher stability.
- Professional attribution + documentation added for transparency, reuse and community sharing.
This is truely awesome!! Do you think there is the flexibility to add a template that can be completed in the notepad? I'm thinking about a CPD reflective log that many of our midiwfery members (learners) need to complete for their revalidation . I may have a go at this :-)
just to mention - i've managed to do this - I need to refine it a bit , but will share any mods made :-)
That's great Matt, I'll certainly be interested to see your work with the embedded template, that sounds like a great addition. I did experiment with adding tables, but getting the usual table features to work became a bit of a challenge. I may revisit that.
JoeDey This is fab and useful. The learner being able to download makes it practical. Thanks for sharing.
Thank you Helen, I'm glad you found a use for it.
My team loved it! Thank you. I am trying to add it to our template, but when I click Close, it opens the left side menu. Can you help? :)
JoeDey This is awesome. Our team has been discussing something very similar. LOVE the share! Thank you!👏
Could it be in RTL in some way? Does it support right-to-left scripts such as Arabic and Hebrew?
Hi Sourena, it doesn't I'm afraid. But you have the code. Try popping it into ChatGPT and instruct it to have a go at that. If it works, you could put the new version on here for all to enjoy.
This is great JoeDey, I've just done something similar as a standalone using the new HTML coding option for the activties mentioned below by Katie-Jordan but a rolling/perpetual note system looks grand.
Hi Brenda, this will work in Rise 360 with an 'Interactive' block with the Storyline option. Glad you like it. Don't forget to come back and share your ideas for its use.
Morning Joe, I'm just picking up on the variable flip for the close button and wondered how that is configured
Hi Dan. 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) on your lightbox slide.
Next place a trigger (when the timeline starts) on the lightbox slide to (adjust variable CloseNotepad) to False.
That should do the trick.
This is amazing! Thank you so much for sharing. I can see multiple uses for this throughout many eLearning courses we create at our company. I am going to play with it a bit more just to wee all it can do. I would be very interested in an option for Rise 360 as our course catalog/portfolio is a mix of Rise and Storyline courses.
Again, thanks for sharing!
Brenda
