Introduction
Taking notes is a crucial part of the learning process. It helps learners retain key information, organize their thoughts, and easily review content later. But what if your learners could take notes directly within your eLearning course? Imagine how much more engaged and effective they could be!
In this tutorial, I’ll show you how to create a custom notepad feature within Articulate Storyline that allows learners to jot down notes and save them in multiple formats such as text, DOC, and PDF. This feature can enhance the learning experience and make your course stand out.
Follow along with these two simple steps, and by the end, you’ll have a fully functional notepad integrated into your eLearning module!
Preview
Step 1: Create Variables in Articulate Storyline
The first step is to set up the necessary variables in Articulate Storyline. Variables are essential because they will store the information that learners input into the notepad.
Instructions:
1. Add a Text Entry Field
- Open your project in Articulate Storyline.
- Insert a text entry field onto your slide where you want the notepad to appear.
- In the Variable Dialog box, rename the variable associated with this text entry to “Title”. This will serve as the title for the notes.
2. Add Another Text Entry Field
- Insert another text entry field below the first one.
- Rename the associated variable to “Editor”. This will serve as the main body for the notes.
These two fields will capture the learner’s input and store it for later use when saving the notes in different formats.
Step 2: Set Up JavaScript Triggers
With the variables in place, the next step is to create JavaScript triggers that will allow the notes to be saved in various formats. Don’t worry if you’re not familiar with JavaScript—I’ll provide the exact code you need to get it done.
Instructions:
1. Link the JsPDF Library
- To enable PDF generation, you need to link the JsPDF library.
- Add a trigger to your slide with the action “Execute JavaScript”.
- Set it to run when the timeline starts on this slide.
- Here’s the code to link the JsPDF library:
2. Download as .txt
- Add another trigger to your slide to allow notes to be downloaded as a .txt file.
- Set the trigger to Execute JavaScript when the learner clicks on your TxtButton Download button.
- Use the following code:
3. Download as .doc
- Add a similar trigger for downloading the notes as a .doc file.
- Trigger it when the learner clicks the DocButton Download button.
- Use this code:
4. Download as .pdf
- Finally, add a trigger for downloading the notes as a PDF.
- Set this trigger to run when the learner clicks on the PdfButton Download button.
- Use this code:
Conclusion
With these steps, you’ve successfully added a custom notepad feature to your eLearning course. Learners can now take notes and save them in their preferred format—whether it’s a simple text file, a Word document, or a PDF.
This feature not only enhances the learning experience by making it more interactive but also provides learners with a valuable tool for retaining and reviewing course content.
I hope this guide has been helpful. If you have any questions or need further assistance, feel free to leave a comment below. Also, don’t forget to download the source file if you want to see the notepad in action!
