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.
21 Replies
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.
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.
