Forum Discussion
Rise Learning Journal / Notes
BETA distribution files Instructions for implementation further down the page under the heading BETA Version Release.
I've been working on a Learning Journal for Rise. I have an BETA version I'd like to share on SCORM Cloud.
The features we have included so far are:
- Comments persisted between sessions (SCORM 1.2 & SCORM 2004 3rd and 4th Ed)
- Save comments, associated with blocks individual blocks
- Comments are organised into topics/pages
- Edit existing Comments
- Delete Comments
- Print comments (to printer, or PDF is you have the required software installed)
- Export comments to Word (*.doc)
- Pagination (If comments exceed a defined number, they are split into pages)
- Add the functionality to individual blocks, or globally.
There are some things that needs to be finalised which will not take a great deal of work to complete.
- Mobile compatibility
- WCAG 2.2 AA
What I'm looking for is a bit of community input, as I know people have wanted this feature for quite some time. This is my best guess of how somebody might use a learning journal, but would love to hear any other examples of how it could function, or additional useful features that could be included.
If you would like to check it out on SCORM Cloud. You can visit this URL: Rise Learning Journal on SCORM Cloud
Update (3rd December 2024)
I have continued to work on this project and it is now SCORM 2004 compatible. Again, it is using the cmi.comments_from_learner. Unfortunately I found a significant issue with the Articulate implementation of the SCORM 1.2 and 2004 comments. I am in communication with support after logging the issue. I am hoping I can convince them that the implementation is incorrect, and the base script is updated. In the meantime, I am applying a patch to the Articulate "WriteComment" function to ensure comments are stored correctly for SCORM 1.2 and SCORM 2004.
I have also made some cosmetic changes and updated the CSS for the HTML to ensure the application picks up the current Rise module theme (colours, fonts etc).
I've fixed a few bugs I have found along the way with regards to deleting journal entries, and editing journal entries when not on the page they originated from. This all appears to be working really well now.
My next priority will be working on the CSS to ensure it is mobile compatible. Once all of the HTML and CSS is finalised, I'll then work on the accessibility. I've been implementing aria attributes as I go along, but there is still some testing and development to be done on that side of things.
I will be looking to release this as a BETA to a handful of people early in the new year.
Update (9th December 2024) Accessibility
Started work on accessibility. Currently implementing and then will be looking to test using JAWS 2024 and NVDA over the xmas holiday period.
On track for BETA release Jan 2025.
Update (09 January 2025) Accessibility & refactoring
Still working on accessibility and refactoring. There is a little more work than first forecast. Yes, I know, you've never heard that from a developer before. I'm 50/50 as to whether I can get this out in January. It will depend on other work commitments, but I will keep this post updated.
I have decided to simplify the colour scheme and move away from using the defined "branding" colours inherited from Rise, as I was finding this a bit unpredictable with colour contrast, and so in the interest of ensuring the content has the best colour contrast, I'll be hard coding the CSS rather than using the CSS variables defined in Rise. I'll re-visit this in future.
Looking at the code, I need some serious refactoring as I think I found some redundancies and so need to delete any unused code that I added and then abandoned.
Oh, and Happy New Year.
Update (24 January 2025) Accessibility & refactoring
Almost ready for BETA release. Should be ready for release next Tuesday. Accessibility just about completed. I think I could spend another few days improving things, but I think this will be a good first release.
BETA Version Release
Contact: notes@rebusmedia.com
Minimum requirements:
- Rise course published SCORM 1.2 or 2004 (xAPI not currently supported)
- LMS Support for cmi.comments (TalentLMS cmi.comments implentation is not supported as the comments are not persisted between sessions).
Release Notes:
This is a BETA release, and is provided as is without any warranties and It should be used with caution and fully tested for your use case before considering for production.
If you do find bugs, please report them to notes@rebusmedia.com (include browser, LMS, device) and I'll release a fix as quickly as possible. This is a side project and so does come second to our day job which can be busy, and so you may need a certain level of patience. Fixes can be expedited for your use case through engagement of our services for time critical projects.
It has been tested on mobile, but not extensively (Google Pixel + iPhone).
Win/Chrome has been the browser used for development, and testing has also been performed on Win/Firefox and Win/Edge.
Features requests:
If you require any features that deviate from the BETA version, they will be considered on their merit, but can only be guaranteed for your own implementation through engagement for our services.
We have a long list of features that we would like to add if there is enough interest in the application and if it is viable.
Accessibility:
We made the decision to remove colors from the modal window theme to keep it simple and generic and accessible (high color contrast). The application has been tested with JAWS 2024 and is fully keyboard accessible and keeps assistive technology users informed of what is happening when interacting with the modal window. I'm always willing to make improvements to accessibility as a priority. Accessibility issues are treated as a bug and not a feature request.
Implementation:
- Publish your Rise course to either SCORM 1.2 or 2004
- Download the two files note.min.css and notes.min.js files to your computer.
- Extract your published Rise course to your computer and then copy the note.min.css and note.min.js files to the scormcontent\lib folder
- Open the scormcontent\index.html file in a simple text editor such as notepad and paste the following text just before the closing head element, which looks like this </head>.
<link type="text/css" rel="stylesheet" href="lib/notes.min.css"> <script type="text/javascript" src="lib/notes.min.js" data-notes-per-page="5"></script>
It will look something like this:
// Excerpt of scormcontent/index.html starts window.__loadEntry = __loadEntry window.__loadRemoteEntry = __loadRemoteEntry window.__loadJsonp = __loadJsonp window.__resolveJsonp = __resolveJsonp window.__fetchCourse = __fetchCourse })() </script> <link type="text/css" rel="stylesheet" href="lib/notes.min.css"> <script type="text/javascript" src="lib/notes.min.js" data-notes-per-page="5"></script> </head> <body> <div id="app"></div> // Excerpt of scormcontent/index.html ends
- You can adjust the data-notes-per-page="5" attribute to determine how many notes should be listed in the viewer, before the pagination (note navigation) kicks in.
- Save the scormcontent/index.html file
- It's important to get this bit right, as the LMS expects the imsmanifest file in the root of the zip file you are about to create. Navigate to the folder containing imsmanifest.xml and then select all (CTL+A) and then select archive/zip/compress depending on the software you use the terminology can be different. It must be a zip file though and the imasmanifest.xml file must be in the root of the zip file.
Update (28 January 2025) Print functionality improvement
After some user feedback, I have adjust the print functionality so that there is less chance of the student losing the course window during printing. When print is completed or cancelled, the print page closes and the user is return to the course window.
Update (30 January 2025)
Fix: Added functionality to handle learn.riseusercontent.com cmi.comments implementation. The cmi.comments implementation is incorrect on the LMS and requires the application to retrieve all comments and save to the LMS rather than appending to existing comments. This could cause memory issues if users add multiple long comments over time.
CSS: Improved CSS for mobile view (using full height of the screen to display the application.
Update (31 January 2025)
Bug: There is a known issue with TalentLMS. TalentLMS does not persist SCORM 1.2 cmi.comments between sessions. All comments are disregarded at the end of the session. For this reason, we cannot support TalentLMS unless TalentLMS changes the functionality of the SCORM 1.2 cmi.comments.
CSS: Improved CSS for mobile view. Supporting devices with a minimum screen width of 355px wide.
Update (07 March 2025)
New configuration option: I have added a configuration option that allows you to determine where the note button should be inserted (instead of globally).
In order to determine where the note button should be inserted, you need to follow these steps:
- Grab a copy of the latest version of the JS and CSS files.
- Wherever you would like to insert the note button, within the Rise authoring environment, simply add {RM.NOTES} to the top of the block, for example:
- Follow the Implementation instructions, outlined earlier in this post.
- When you come to add the script to the HTML file, you will need to add an extra data attribute to the <script> tag called data-notes-global and set the value as false.
<script type="module" src="lib/notes.min.js" data-notes-global="false"></script>
Update (12 March 2025)
BETA Distribution files, including the README.MD document, are available to download.
This will be the last feature addition for a while now. Bug fixes and stabilisation will continue, but any new features will have to wait or can be requested via notes@rebusmedia.com.
Prompt
You can now add a prompt to the note when defining a notes button using the {RM.NOTES} directive. The prompt is defined as a configuration option in the following way {RM.NOTES PROMPT="Prompt text goes here."}. It would look something like this in the Rise author environment.
This would ensure that a notes button is inserted on this block, and when selected, will display the text input, preceded by the prompt "What should you include in your clinical notes?".
In order to use the prompt, you must set the global flag to false using the <script> tag as follows:
<script type="module" src="lib/notes.min.js" data-notes-global="false"></script>
Note button position
The note button default position is the top right of the target block. The button can now be positioned at the centre bottom of the target block. The position configuration can be used with the global flag set to true (buttons inserted automatically on blocks) or set to false (buttons only inserted where the {RM.NOTES} directive is present within the block.
<script type="module" src="lib/notes.min.js" data-notes-button-centre-bottom="true"></script>
85 Replies
- KateMackenzieCommunity Member
you have MADE MY DAY SamHill I see you have been working hard!
- MadihaSCommunity Member
Hi SamHill. This is a fantastic solution. I've been using Mike's solution and it's worked well for me in the past but with a current project it's not working in SCORM 2004. I'd love to use this solution but I only need the notes option on certain blocks. I'm posing questions for the learner to reflect on that will be available as a reference at the end of the course. Is there a way to do that? I might be missing something but I wasn't sure how to set that up in Rise. Thanks!
- KateMackenzieCommunity Member
Hi - from what I have learnt- you'd need to identify that particular block using CSS and that frankly is way more complicated than I can deal with - so good luck and share it once you've done it!
- SamHillSuper Hero
Hi MadihaS and KateMackenzie, the application adds the note widget to all blocks, excluding a few, such as continue blocks. At this stage it cannot be configured for specific blocks.
How would you like to see that appear to the user MadihaS? It could be a configuration option that I add.
- KateMackenzieCommunity Member
WOW SamHill you literally ARE a super hero!
What I'm confused by is how did you "tell" the course where you wanted the notes icon to be? Am I missing something? I seeAdded to each section with a `data-block-id` attribute
But how do you find that?
Sorry for the naive questions - I'm not all that literate with it comes to the back end part of things!- ChrisLivermo433Community Member
awesome work Sam... a query related to KateMackenzie's;
to hide the Notes button on a particular block, is it just a matter of setting the value of display to "none"? thanks
- SamHillSuper Hero
There aren't configuration options to do that, but if you are comfortable with CSS you could do that.
- SamHillSuper Hero
You have to view the HTML source in your browser to see the data-block-id. You can do this by launching the Rise module and then right clicking the page and selecting "inspect element", or by hitting F12 to open the browser console and then selecting the elements tab. It varies between browsers, my instructions are based on chrome. As mentioned I did exclude some block types from the notes button.
- KateMackenzieCommunity Member
Thanks- and then you can apply it to that particular block type universally?
- JenniferKnott-4Community Member
Could someone share the link from the original post and tutorial? I have worked with Learning Journal from Mike, but I want to try this one as well. Thanks!
- SamHillSuper Hero
The instructions to implement this are in the original post under the title "Implementation:"
- ChrisLivermo433Community Member
Awesome work, very much appreciate all the effort & work.
- emmbeeCommunity Member
I've been waiting for something like this for years!!! Have you shared the rebus js/css previously? Or is that what you will be sharing this week? I'm hoping to include this in my capstone project (due 02/02), but the timing is TIGHT! Thanks for sharing this great work!!!
- emmbeeCommunity Member
SamHill - you are a rockstar!!!
Here is some feedback: I just added the css and js to my SCORM package and tested it out in TalentLMS. The note-taking functionality works as expected in the course itself 😃, however when I exit or complete the course, it is not retaining the notes.
The progress is saved in the LMS platform (completed or resume), but the notes have disappeared from the course. Have you encountered this? Is there a workaround?
You've done an amazing job and I think you'll be able to capitalize well with this solution - bravo!
- AmyGttCommunity Member
Thank you! I can wait to use it as well.
- CindyMcElhin363Community Member
SamHillHey there Sam. Just came across this and WOW! I've been down a rabbit hole trying to figure out a way to integrate a "digtial workbook" into RISE - everything from fillable pdf, to google doc, to https:/wobo.app to Storyline text input and nothing I have seen thus far is as easy and elegant as the solution you have built here. While it's not an interactive workbook like I exactly had in mind -- mostly I want to prompt the user with questions and different inputs and personal reflections -- this solution you have here could simplify things immensely. I am thinking I could prompt the user with onscreen text in the block instructing them what to input in the note. For me having the notes associated with a block rather than one big note is defintely the way to go for my use case. So I guess the quesion is can we implement it now? Where exactly are you in dev? I have a course going live March 1 and would love to give it a try and am also willing to put it out in the world. Our March 1 users are a small controlled group of pilot users so we have wiggle room with working out any kinks. How can I run with it and help in any way with your feedback/testing? Bottom line....I love it! I want it! Thank you so much for helping everyone take Rise to another level.
- SamHillSuper Hero
Hi CindyMcElhin363 I'd be really keen to get this in your project and iron out kinks. The BETA will be ready next week. I'll be updating this post with implementation. I'll be looking to distribute the BETA version for free to a handful of people willing to explore using it in a real project. Can you tell me which version of SCORM you use?
- CindyMcElhin363Community Member
SamHillAwesome. I can use either version. My platform running the Rise courses is a wordpress site using Paid Memberships Pro and LifterLMS with GrassBlade LRS/xAPI Companion.
- MelnieHalliwellCommunity Member
Hey Sam. I was a long time user of Mike's learning journal. I'm working on a build that requires a journal, and found my way to you just now after following some support threads from Mike's version. Your work is fantastic—it's really exciting—and I can't wait to start using it! Can you please include me in the BETA release? I'll be watching your full video shortly and reading your release notes, so my question may very well already be answered, but are you able to control/select the blocks that show the widget? Thanks so much for sharing this :-) Melanie
- SamHillSuper Hero
Hi MelnieHalliwell, the BETA version is now available. See the original post for a link to the files and instructions.
- SamHillSuper Hero
Hi melaniehalliwell thanks for the comments. The component currently attaches to certain types of blocks and cannot be attached to specific blocks that the author chooses.
I will look into this though as it is possible. For example, adding a specific string "{{notes-button}}" at the top of a block could be used as a directive to insert the component. This was one of my very early experiments, but I opted for automatically inserting on certain block types. I will consider this as a more advanced implementation.
Thanks for the feedback!