Free Articulate Storyline 360 E-Learning Templates
Good morning my fellow developers. We have a bunch of old courses that need to be refreshed at our company. To save time, I wonder if you know any good places to find FREE modern storyline 360 templates because starting them all from scratch would take a lot more time than we have. If you know of any places, I should look please let me know.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) 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.Simplified Approach to Adding Transparent Videos to Storyline
Demo: https://360.articulate.com/review/content/6534ea7f-0df5-4a02-813b-70811843fbf0/review Updated: Added an option for overall video transparency. Allows for see-through videos. For example, if you wanted to project them against a surface, like a wall, or overlay them onto a graphic background. Disclaimer Some time ago, Matt Kurtin published some instructions on adding webM videos to storyline to support transparent videos. Other discussions have also addressed this issue, utilizing web objects to contain transparent videos inside Storyline. I typically used web object for my projects, but recently developed an approach very similar to Matt's to make handling transparent videos more flexible. See: https://www.innovativelg.com/resources/enabling-videos-with-transparent-backgrounds-in-articulate-storyline/ I had not actually read his article before making this. I do want to acknowledge his work though. My approach expands upon the concept somewhat. Transparency on the web Videos with transparent videos are popular online. They are great for overlaying action onto otherwise static backgrounds. Support for transparent video formats is limited by your browser, however. A widely supported, but quite old format is webM. This uses the V9 codec, and it supports an alpha channel, which provides the transparency option. It is supported by the primary Windows browsers (Chrome, Firefox, Edge, etc.). These browsers on a Mac also support webM. The Safari browser on a Mac does not support webM, however. It supports an HEVC format that can be packaged as an MP4. Incidentally, the codec is tied to Mac hardware, so you cannot generate transparent video in this format unless you have Mac hardware (unfortunately for Windows users). To fully support both platforms, you need to offer both formats. Storyline and Transparency Storyline currently does not directly support video transparency. Import options are limited and any inserted videos are converted to a uniform format during publication. Even if you are able to insert a video that includes an alpha channel, it will be lost when published. The Web Object Approach My traditional approach to inserting transparent videos into Storyline has been to load them into web objects and display them as if they were their own webpages. This way, I could use any format you wanted. I would place the video files and an index.html containing the webpage structure into the web object. Controlling these from Storyline could be difficult but was doable. The biggest problem with web objects, however, is that they don’t render during the design phase, and properly sizing what they contained could be a hassle, requiring a lot of trial and error. Overall, using web objects was fairly straightforward, but cumbersome. An Alternative Approach Here, I offer another approach to inserting transparent videos into Storyline. This method still uses web objects to convey the video files into the Storyline project but is more friendly on the design side. Technically, you could also modify this solution to accommodate using the URLs of web-hosted videos and eliminate the web objects all together. I’ll leave that to you to play with. For this method, we insert a video (any video clip will do, since we’re not really using it) into our slide in one of the usual manners. I use the default Storyline settings of Show Video in Slide, Play Automatically, and Show No Controls. We will then simply replace the video source specified by Storyline with one of our own, using our transparent video and some JavaScript. Since this is done in real-time, after the project is published, Storyline does not prevent us from utilizing our transparent video formats. As long as we have access to the video files, we can use them instead. I mentioned that any video can be inserted to start. You should use a video with the same dimensions as your desired video, so the proportions are correct. You could also just resize the video placeholder to the appropriate dimensions. You can use a version of your actual video if you want. I just create a very short clip from my video, maybe the first few frames, and insert that. That way it remains small. It’s just a placeholder after all. Benefits The benefit of this approach is that the video is now easy to reposition and resize on your slide, without having to hassle with modifying and possibly re-inserting your web object each time. Any changes to the video’ size and position will be reflected in the transparent video that is swapped in to replace it. You also still have control over the video player through Storyline, without having to take extra steps. Making it Work Add a Poster: On the design side, in Storyline we can specify the image displayed by the inserted video placeholder. You just right click the video and click on Set Poster Frame. Create an image (for example, a single frame of your video) that is saved as a transparent .png file. Make the image the same dimensions as your video. This way, the displayed video placeholder will accurately represent your video. Accessibility Tag: You will need to edit the Accessibility tag for the video in SL (right click on the video in the timeline). Make the tag the same as the actual filename of your transparent video, without the extension. For example, for “Petals.webm”, just use Petals as the tag (no quotes). If you include both a .webm and an .mp4 version of your video file, make sure the base filename is the same. Create Transparent Videos: You need to have transparent videos ready. You can make your own or convert some green screen videos that can be downloaded from the web or through the Storyline media library. You will need a way to key out the green screen and then convert the video formats to webM (from Chrome, etc.) or HEVC MP4 (for Safari). If you have Adobe products, then After Effects and Premiere would work. You can also use the free version of Davinci Resolve to remove green screen in videos. Search for “3D Keyer Davinci Resolve” on YouTube for help. Save in ProRes format with the include alpha channel option checked. Output will be a .MOV file. These are very large, which is why it’s best to convert them into HEVC MP4s with a smaller size for web use, if you are supporting Safari. If you have access to a Mac, you might be able to use something like Rotato Converter to create both WEBM and HEVC MP4 formats. For shorter clips, you could use a free online converter (for example, https://www.aconvert.com/video/mov-to-webm/). This will convert the transparent MOV file into a webM file. You can also adjust the bitrate. Adobe Premiere can export webM with alpha using a plugin (https://www.fnord.com/). This is what I use to create webM files, make short placeholder clips, and extract a single frame to use as the poster image. Create the Web Object: The transparent video files should have the same base name, one that matches the accessibility tag you assign to the Storyline video. These go into the web object folder, along with an empty index.html file. This folder gets inserted into your Storyline project (say in a separate scene). See this discussion for more details on getting and setting the woFolder name inside Storyline. Notes on accessing files inside a web object: See the last section of this article Set the vidParameters Variable: This passes the details to the JavaScript that swaps the video on your slide. It specifies the identifying tag and other features such as autoplay, muting, and time indexes. It uses a string of text with commas separating each field. The script and this variable set up the initial swap of video when your slide loads and can also control your video further while your slide is visible, if you desire. See slide #1 in the demo to see how this works. The tag name is required, all the other fields are optional. Trigger the Script: Trigger the JavaScript to create the initial swap. For control later, place a “C” in the second field, and model the variable string as shown on Slide #1. Slide #2 shows a very simple example, with the minimum elements needed to make the video swap work. The buttons shown on the slide are optional. It should work on Chrome, Firefox, etc. browsers (I did not include the transparent Safari file). You can find the clip in Storyline by searching for “petals green” under insert video. Slide #1 should work on Safari as well, although I did not have a Mac handy to check. The clip was from another project. I’ve attached a sample .story file and the web object folder used in the demo. The script is commented. Feel free to modify it as you see fit. Still can't attach the zip file. https://paedagogus.org/VidSwapRsc/woFolder+Project.zipIntegrating a Chatbot into My Storyline Project
Hi all, I'd like to integrate chatbots in my Storyline courses in the near future. I tried a little test with my ChatGPT API key. It doesn't work because I don't want to buy API tokens. Also, I read other posts that let me know that I would be exposing myself to malicious hackers if I used my API key in a front-end server (I think I'm saying that right). What I'd like to know is, has anyone successfully integrated a chatbot without using an API key? Is there a better option than ChatGPT? Thanks! KrisMorph transition on Feature Roadmap
As the Morph transition made it to the Feature Roadmap for Articulate 360 ( finally! ), i do think it is good to post what we want/expect it to do, and what is a miss in our ( the users ) eyes. That way Articulate can keep that in mind while developing. For that we first need to divide Storyline elements in groups/types ... so we can discuss how we expect that type to morph. TYPES 1) Images 2) Storyline shapes 3) Video 4) Text ( SVG ) 5) Imported SVG 6) UI elements As on the roadmap it is defined as 'transition'. So i expect it to be exactly that. A Morph transition between 2 slides. So next would be defining the 'attributes' of the defined types we expect to morph. ATTRIBUTES A) Position x/y B) Scale C) Rotation D) Fill color and line ( actually all Format Shape settings ) E) Transparancy If for all the types the given attributes are morphable, i am happy. I expect 3) Video to be non-morphable. 2) Shapes and 4) Text i however expect and hope to have all attributes morphable. Do comment on this with your hopes and dreams for the Morph transition and lets hope Articulate listens.Drawing Annotation on Storyline Slide
Demo: https://360.articulate.com/review/content/518383b2-1161-408d-b9f5-adb9a6f57a11/review Inspired by code discussed on: https://img.ly/blog/how-to-draw-on-an-image-with-javascript/ Using Charts in your Storyline | Articulate - Community About This is a brief example of using an HTML canvas element to enable annotation on a Storyline slide. The example displays an image on a slide, sets a few variables, and the accessibility tags of a some slide objects. It then triggers a JavaScript trigger to create a canvas over the image, and then watches the mouse buttons and movement to allow drawing on the canvas. How it works A canvas element is created, filled with the specified base image, and inserted below a small rectangle (canvasAnchor) that is the same width as and placed directly above the image. Another rectangle (canvasClickArea) overlays and is sized to match the image. This is the area that allows drawing on the canvas (where the mouse is watched). Brush width and color can be controlled. The drawing can be cleared. It also resizes with the slide. To improve The events to watch the mouse and clear button should be better handled to allow removal when a new canvas is created. A mechanism to allow a blank base (clear) should be reinstated. Right now it just relies on the use of the initial image from the slide. Both options have their uses. Since the canvas is a raster image, resizing to very small and then very large results in poor image quality. The image can be extracted from the canvas. This could be saved or printed. More drawing options are available with the canvas element. Credit: X-ray images from https://learningradiology.com/
