Forum Discussion

JoeDey's avatar
JoeDey
Community Member
4 months ago

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

  • JoeDey's avatar
    JoeDey
    Community Member

    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.  

    • LaurieSESTIER's avatar
      LaurieSESTIER
      Community Member

      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?

  • 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.