New Matching lay-out
Last week we received the updated lay-out of the matching knowledge check. The moment I discovered it was a bit unlucky (during a presentation, got me a bit confused) but today I had some time to look into it. The changelog as following on the articulate website: Enhanced: Matching knowledge check blocks have been upgraded with intuitive navigation, full keyboard support, and comprehensive screen reader integration. Now, I think it's great that Articulate is improving it's software's accessibility, however, I don't see anything intuitive about the new design. A lot of new things have been added which for me only make the assignment more confusing. On the left side the hamburger icon and number suggest some sort of clickability, which is not there. The drop downs on the right give the assignment a new layer of intractability which only wouldn't want for the student. Overall the lay-out is a lot less clean and drains focus away from the content towards the design. Maybe a simple solution would be to add a slider which let's us choose between this lay-out and the previous one (or this one without the rings and bells). That's just my opinion, I was wondering what other think of the new lay-out!Welcome to the New E-Learning Heroes!
Hello! I’m Ginger Swart, a Community Manager here at Articulate, and I’m thrilled to welcome you to our new E-Learning Heroes Community! Please check out this article to watch a walkthrough video of our site and our FAQ article for more information. The work to move to our new site started over a year ago. To prepare for this, we have migrated over 1.5 million community members, 2100+ articles, 970+ examples and downloads, and more discussion posts than I can count! We had a beta period with our Super Heroes, and we appreciate all of the feedback we received from them. But with that much content, we anticipate there will be some hiccups, so please use this discussion to let us know about any issues you find and any feedback you want to share with us. I hope you’ll love the new community as much as I do!Rise Learning Journal / Notes
Update (04 June 2025) This project is now available open source at GitLab. I've included a quick glance at the License (Same as Moodle). License: GNU GPL v3 Type: Strong copyleft license Implications: ✅ You can use, modify, and distribute Rise Learning Journal freely. 🔁 If you distribute a modified version, you must also release the source code under the GPLv3. ❌ You cannot make it proprietary or incorporate it into closed-source software. ✅ You can use it commercially, but the GPL applies to any distribution. 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. (trial account, limited to 10 users, ping me, mailto:notes@rebusmedia.com, if it's maxed out and I'll clear users). 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 (trial account, limited to 10 users, ping me, mailto:notes@rebusmedia.com, if it's maxed out and I'll clear users). 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>Storyline 360 Pros — What’s Your Favorite “Hidden Gem”? 💎
As someone who’s spent a lot of time working with (and on!) Storyline 360, I’ve come to appreciate the power in the little things — those lesser-known features that quietly make our lives easier. Here's one of my personal favorites: 🎧📽️ Cue Points with the “C” Key: I recently spoke with a customer who struggled to time trigger actions to audio and video media on their slides. They would preview the slide, make note of when a trigger should be fired, then return to slide authoring view to add a cue point to the timeline to tie into the trigger event. This would require a lot of manual back-and-forth between authoring and previewing. I often have to do the same thing, and there is an easier way. If you use stage preview (accessible via the "Play" icon" in the lower-left corner of the Timeline panel), Storyline will stay in the slide authoring view and play the timeline of the slide, including any audio or video media that's present. As it plays, you can press the "C" key on your keyboard to have cue points added to the current playback position. It’s a simple way to place cue points in real time, right where they’re needed — perfect for syncing trigger actions to specific moments in your media. cting Storyline 360's UI and using the "C" key to drop cue points on the timeline. Now I’m curious: What’s your favorite under-the-radar Storyline feature? Something small, subtle, maybe even a little obscure — but that you personally couldn’t live without. Drop it in the comments — I’d love to learn what little gems you rely on. 👇Meet Your New Teammate: First Impressions of Articulate’s AI Assistant
Introduction: Why AI Built for eLearning Changes Everything AI is everywhere these days — from writing emails to generating images, creating videos, and more. We all know tools like ChatGPT, Midjourney, DALL·E, Grammarly, Synthesia, and plenty more. They’ve quickly become part of our daily workflows — or at least, they have in mine! But if you’ve ever tried using these tools to help build an eLearning course, you’ve probably noticed something… They’re smart — but they don’t really get what we do. That’s why I was both excited and curious when I heard that Articulate was introducing an AI Assistant, built right into Storyline and Rise. Finally, an AI tool designed specifically for instructional designers and eLearning developers. I’ve been working with Articulate tools for over 14 years, and like many of you, I’m always looking for ways to speed up my workflow without sacrificing creativity or quality. So the big question was: Could this AI Assistant actually help me design or improve my courses — in a way that generic AI tools can’t? Spoiler alert: It can. And it did. This is the first post in a series where I’ll share how Articulate’s AI Assistant is changing the way I approach course development — making everyday tasks faster, smoother, and honestly, a bit more fun. So let’s take a closer look at why having AI built specifically for eLearning really makes a difference. Why Use Articulate’s AI Assistant Instead of Other AI Tools? Like many of you, I’ve used my fair share of AI tools — from ChatGPT for brainstorming to DALL·E for generating creative visuals. These tools are great, but they’re generalists. They don’t know (or care) that I’m building an eLearning course. That’s where Articulate’s AI Assistant stands out. It’s designed inside Articulate Storyline and Rise, for people like us — instructional designers, eLearning developers, and content creators. No copy-pasting between tools, no explaining to a chatbot what a "learning objective" is every single time. Here’s why I immediately saw the benefit of having AI built right into the tools I already use: It understands context. You’re not starting from scratch with every prompt. The AI Assistant knows you’re working within slides, quizzes, scenarios, and learning objectives. It fits seamlessly into your workflow. No need to bounce between apps or worry about formatting. You stay in Storyline or Rise, focused on creating — and the AI is right there when you need a boost. It’s tailored for eLearning tasks. Whether you’re drafting instructional text, generating quiz questions, or adjusting tone for different audiences, it’s built to support tasks we handle every day. Other AI tools are powerful, but they weren’t made for eLearning. Articulate’s AI Assistant feels like it was built by people who understand the little challenges that come with designing courses — and that makes all the difference. What Impressed Me Right Away I went in with low expectations — I mean, AI is cool, but it’s not magic, right? Well, after just a few prompts, I found myself genuinely impressed. Articulate’s AI Assistant is fast and simple. No manuals, no guesswork. You type, it helps. It felt less like learning a new feature and more like having a colleague nearby to bounce ideas off. Articulate’s AI Assistant gets you moving. The hardest part of creating content is often just getting started. The AI Assistant hands you a decent draft so you’re not stuck wondering how to begin. From there, it’s all about tweaking. Articulate’s AI Assistant understands eLearning. This isn’t some generic writing tool — it gets that you’re creating learning content. Whether it’s suggesting learning objectives or drafting quiz questions, it speaks the language of eLearning. By the end of my first session, I realized this tool isn’t just about saving time — it’s about keeping me in that productive flow state. Less overthinking, more doing. Wrapping Up — And What’s Next After just a short time using Articulate’s AI Assistant, I knew it was going to be part of my daily routine. It’s not here to replace creativity — it’s here to remove those little hurdles that can slow us down. No more blank slides. No more overthinking simple tasks. And the best part? I’m only scratching the surface. In my next post, I’ll show you how I’m using the AI Assistant to speed up writing — from slide content to quizzes and even branching scenarios. That’s where things get really interesting. Have you given the AI Assistant a try yet? I’d love to hear how it’s working for you — or if you're still wondering how to fit it into your workflow. Drop a comment below and let’s share ideas! Stay tuned — more AI-powered tips coming soon! About me: Paul Alders LinkedIn Profile The eLearning BreweryA New Chapter for Our E-Learning Heroes Community
It's hard to believe that two weeks have already passed since we launched our new E-Learning Heroes community platform. We're thrilled to be on this journey with you, building upon the incredible foundation of knowledge and collaboration we've cultivated together for well over a decade now. What's New and Exciting Many of you have shared positive feedback about the new forums, noting that they're easier to navigate. We're especially pleased to hear that the new dedicated groups, such as those for JavaScript and Accessibility, are welcome additions. These improvements are just the beginning – we have more exciting features in the pipeline. Acknowledging the Challenges Of course, with any significant transition, there are bound to be some hurdles along the way. We've encountered a few hiccups, and we sincerely appreciate your patience and understanding as we work through them. Here are a couple of key points to be aware of: Content Cleanup: In preparation for the move, we archived discussions that hadn't seen activity in over three years, as well as outdated articles and user guides. This means that some older content may no longer be accessible. It will take some time for search engines to update their results accordingly. Technical Issues: We're aware of a redirect bug that sometimes causes pages to load incorrectly. If you encounter this, please try refreshing the page or clearing your cache. We're actively working with our platform vendor to resolve this and some other issues. Feature Differences: We’ve heard your feedback about some features that you’re missing from our old community, such as showcasing projects on your profile, how the emails display, seeing postings on our jobs hub, and others. Some of those features are in the works, and we are sharing additional feature requests with our vendor. In the meantime, If you're looking for E-Learning job postings, we recommend ATD's job bank and and The Learning Guild Job Board. Moving Forward Together Your experience and satisfaction are our top priorities. We're committed to creating an environment where you can easily find the help and resources you need to build exceptional courses. As we navigate this transition together, please don't hesitate to reach out with any questions, concerns, or feedback. You can reply to this thread or feel free to email us at community@articulate.com. Thank you for being an integral part of our E-Learning Heroes community. Your contributions, insights, and patience during this time are invaluable. We're excited about the future and the enhanced experience that we're building together.Auto-Generate PDF Certificates in Storyline (No HTML Edits Needed)
UPDATE August 20, 2025: I uploaded the new version of the file I've been using. It adds a layer for the learner to double-check their name, then blocks them from editing the name again if they download the certificate, in order to prevent multiple people from generating the certificate. I recently developed a way to generate a certificate PDF in Storyline without having to edit the published files. That means it works even in Storyline Preview and Review 360, and it's simple enough to use as a team-wide template. I drew inspiration from Devlin Peck’s tutorial, but updated the code to follow current JavaScript standards and removed the need to modify output files manually. You’ll find the full code and a sample .story file at the bottom of this post. If you like it or have any suggestions for improvement, let me know! You can also see an example version of it in action here, using a simple certificate template from Canva: https://philwingfield.com/wp-content/certificate-generator/story.html Table of Contents: What You’ll Need Define Your Storyline Variables Certificate Background Image Changing Orientation to Portrait Placing Text on the Certificate Naming the PDF File Triggering the Script in Storyline Troubleshooting TL;DR Full Code .story File (attached to post) What You’ll Need Storyline (obviously!) A background image for your certificate (.jpg or .png, set to A4 size) Recommended: Some sort of code reader such as Visual Studio Code Somewhere to upload the certificate file for testing, such as AWS (though there are instructions for local storage below under the Certificate Background Image header) Define Your Storyline Variables You’ll need to set up the Storyline variables that will be pulled into the certificate. Here are the variables I used: Storyline Variable Purpose UserName Learner’s name (typed in by the user) CHANGECourseName Course name (manually set per course) CHANGECreditHours Number of credit hours (manually set) ⚠️ Variable names are case-sensitive. userName ≠ UserName. I made this as a template for our team, so the variables beginning with CHANGE are the ones they will change manually when using the template in a course by changing the values of these variables: The current date is handled inside the JavaScript, so you don’t need to create a date variable in Storyline. Here’s how the script pulls in those values: This line gets us ready to pull the variables from storyline, and the next few lines redefine the Storyline variables as JavaScript variables: const player = GetPlayer(); And then this line pulls the value of the UserName variable from Storyline and stores it in a new JavaScript constant called name (a constant is a type of variable that does not change later) const name = player.GetVar(“UserName”); So then we do that with all the variables: const player = GetPlayer(); const name = player.GetVar("UserName"); const course = player.GetVar("CHANGECourseName"); const hours = String(player.GetVar("CHANGECreditHours")); If you need to pull in other variables, follow the same pattern. There is another variable, date, which is defined in the code itself in lines 20-24 and returns the current date. It does not need to be input to Storyline. You could also pull in quiz data if you like. In Storyline, make a number variable on the last slide (I'll call it score) and make a trigger to set score equal to the internal variable Quiz1.ScorePercent when the timeline starts. Then you could use something like this code after line 10: const score = player.GetVar("score")+"%"; The +"%" part will append a % sign to the end, so a learner answering 4/5 correctly will display as 80% instead of just 80. Don't forget to tell jsPDF where to draw it during the Placing Text on the Certificate section below! Certificate Background Image You’ll need a background image for your certificate — It should be sized as A4 landscape (297mm x 210mm)***. Make sure to leave space for where the name, course name, date, and number of credit hours can go. Note that jsPDF will compress the background image, so I would recommend doubling the photo size to 594x420mm if you want the higher resolution, or even tripling it. It will look less blurry when it is scaled down. Here’s an example background you can view (hosted via S3): 📎 certificate_example.png (Note: I may not maintain this file indefinitely.) To load the image in the code, host it somewhere with public access (like AWS with a direct link), and reference the URL like this on line 2: const CERT_BG_IMG_URL = "https://yourhost.com/your_image.png"; Alternatively, you can reference an image placed locally in the story_content folder after publishing and reference it as “/story_content/your_image_name.jpg”, but that will not work in Preview or Review 360. ***The defaults for a standard 8.5x11" are 216mmx280mm. jsPDF will convert your image to the correct size as defined in line 70, so the certificate may be slightly distorted if you don't use A4 sizing. Changing Orientation to Portrait There are 2 steps if you want to change your image to portrait instead of landscape. In line 62: remove orientation: 'landscape' so it is just curly brackets: {} The default for jsPDF is portrait A4, so we only need to define it as landscape if we want it that way. In line 70: change the size of the imported image. Swap the 297 and 210 in that line (the x and y lengths) so it reads (img, 0, 0, 210, 297) This will force whatever image you import to be 210mm wide and 297mm high, so make sure you change line 2 from the URL for my certificate to whatever certificate you have, or else it will be distorted. Make sure that your portrait image is portrait A4 as well. 🚧 CORS Warning If you’re hosting the image online, make sure CORS is enabled in the hosting service so it can load locally and in preview mode. For AWS: 🔗 Enable CORS in Amazon S3 If your PDF shows text but no background image, this may be why. The script is written to fall back and still display text if the image fails to load. Placing Text on the Certificate You’ll manually position the text using jsPDF’s .text() function. Here's an example: doc.setFont("times", "bold"); doc.setFontSize(30); doc.text(name, doc.internal.pageSize.width / 2, 130, { align: 'center' }); .setFont() – sets the font and weight. There are 14 accepted fonts from jsPDF, and you can see the parameters in the image below, taken from the jsPDF documentation: If you want to import custom fonts, Devlin Peck once again has a good tutorial: https://www.devlinpeck.com/content/jspdf-custom-font .setFontSize() – sets the font size .text() – 4 fields separated by commas which let you define the text (in this case it is the variable “name,” which was defined earlier in line 14), the x coordinate from the left, the y coordinate from the top, and then the alignment in reference to that coordinate. Note that the x coordinate in the example above uses a formula to place it in the exact center of the document from left to right. The y coordinate, 130, means it is 130mm from the top. To determine where your text should go: Open your certificate background in Canva, GIMP, or another editor Use guides or measurement tools to identify the X/Y positions. For example, in this screenshot, I had a line drawn in canva, opened the position editor, and could see the y coordinate at 129.97mm for the end where the name would go. So, it is entered as 130 in the text() function Use those values in the .text() calls in your script You can also preview your placement by: Pressing F12 to open the console in preview, review 360, or a published course. Copying and pasting your entire code into the console. Then you can paste again and quickly adjust the x/y coordinates until you get it fine-tuned. This is also a good way to check for console errors if the download is not happening (copying and pasting the console error message into google is how I discovered the CORS issue from above). Naming the PDF File Line 54 defines the filename for the downloaded certificate: doc.save(`${name}_${course}_certificate.pdf`); The ${} symbols simply allow you to call a variable, in this case name and course. If you wanted to make it a static name, you could replace that with something like: doc.save("Course Certificate.pdf"); Triggering the Script in Storyline Use a Storyline trigger like this: Make sure this happens after the learner has entered their name, or the UserName variable won’t have any value. In my example file, the js script is triggered when the certificate generation layer is opened and the learner clicks the "Continue to Download" button. I also have another js script set to execute when the timeline begins on the base layer (it makes the variable update as the user types their name, rather than after they click off of the field). Make sure you are editing the one tied to the download button. If the download button won't appear for some reason, then just set the button's initial state to normal instead of hidden. A.I. Troubleshooting As of 2025, generative AI like chatGPT and deepseek excels at catching things like syntax errors (e.g., missing a bracket), cleaning up code, or giving solutions to a very targeted question asking how to arrive at a very particular result. It can be an exercise in frustration if you don't have a clear idea of what you want the result to be, and you often have to help it troubleshoot yourself if something doesn't work. However, it is an excellent tool, especially for people like me who have a hobbyist-level understanding of JavaScript. Here are some suggested question types for how to use generative AI to troubleshoot - I find it works best when you ask the entire question at once, otherwise it won't wait and will just start generating: - "Why isn't [wanted action] happening when I run this code: [paste entire script]?" - "This script below gives me the date format as MM/DD/YYYY. How can I change it to the full written month name, like July 4, 2025? [paste the part of the script that generates the date variable]" - "The script isn't running at all. What's the issue with this code? [paste entire script]" - "How can I make a record of each time someone generates a certificate?" - "I want to change the color of the course title. How can I do that? [paste section that draws the text]" - "Explain line by line in detail what this section of code you gave me does [paste the code that it gave you]" Just keep in mind that generative AI will confirm what you ask and will often have on blinders about your issue. When you go to someone experienced and explain what you're doing to solve a problem, that person will often be able to give you a completely different way to approach it that's simpler and more elegant. Generative AI will almost never do that. Instead, it will dig into the method that you were trying and attempt to make THAT work, even if it is overly complicated or will never actually function. TL;DR Set up your Storyline variables Add a background image to your certificate Use jsPDF to place Storyline variables over it Trigger the script No need to modify published files Works in Preview and Review 360 as well as published outputs Generative AI is a great troubleshooter (to an extent) Full Code // --- CONFIGURABLE SETTINGS --- // const CERT_BG_IMG_URL = "https://philwingfield.com/wp-content/open-content/certificate_example.png"; // Background image URL (A4 landscape: 297mm x 210mm) // --- LOAD jsPDF LIBRARY DYNAMICALLY --- // const script = document.createElement('script'); script.src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/3.0.1/jspdf.umd.min.js"; /** * Main logic to generate the certificate PDF after jsPDF loads. */ script.onload = () => { // --- GET VARIABLES FROM STORYLINE --- // const player = GetPlayer(); const name = player.GetVar("UserName"); const course = player.GetVar("CHANGECourseName"); const hours = String(player.GetVar("CHANGECreditHours")); // --- FORMAT CURRENT DATE --- // const now = new Date(); const dd = String(now.getDate()); const mm = String(now.getMonth() + 1); const yyyy = now.getFullYear(); const formattedDate = `${mm}/${dd}/${yyyy}`; /** * Draws the certificate text on the PDF. * @param {jsPDF} doc - The jsPDF document instance. */ function drawText(doc) { // User Name doc.setFont("times", "bold"); doc.setFontSize(30); doc.text(name, doc.internal.pageSize.width / 2, 130, { align: 'center' }); // Credit Hours doc.setFont("times", "normal"); doc.setFontSize(20); doc.text(hours, 233, 150, { align: 'left' }); // Course Name doc.setFontSize(30); doc.setTextColor(0, 0, 0); doc.setFont("times", "bold"); doc.text(course, doc.internal.pageSize.width / 2, 88, { align: 'center' }); // Date doc.setFont("times", "normal"); doc.setFontSize(24); doc.text(formattedDate, 210.64, 176.89, { align: 'left' }); // Save PDF doc.save(`${name}_${course}_certificate.pdf`); // format of the saved document name } /** * Generates the PDF, adds background image, and overlays text. */ async function generatePDF() { const { jsPDF } = window.jspdf; const doc = new jsPDF({ orientation: 'landscape'}); // Load background image const img = new Image(); img.src = CERT_BG_IMG_URL; img.crossOrigin = "anonymous"; img.onload = function () { doc.addImage(img, 0, 0, 297, 210); // Defines position and size in mm or image drawText(doc); }; // Skips background image loading if not available; check for CORS permissions img.onerror = function () { console.warn("Failed to load certificate background image. Continuing without it."); drawText(doc); // Proceed without background }; } generatePDF(); }; // --- APPEND SCRIPT TO LOAD jsPDF --- // document.head.appendChild(script);We launched a new forum for exchanging e-learning best practices 🤝
Hey all! If we haven't met yet, my name is Noele and I'm the new Director of Community here at Articulate. Over the last few months I've been having a ton of virtual coffee chats 🍵 with community members to get to know you better and learn more about how you want to use E-Learning Heroes. (If we chatted: thank you so much). One of the big things I took away from those chats is that your expertise and work in the E-Learning industry goes so far beyond what you do with Articulate's products. This community is full of experts not only in how to make the most of Storyline and Rise, but in all things e-learning: storyboarding, adult learning principles, working with SMEs, and so much more. And you want to talk about it with each other. Today I'm excited to share that based on your feedback, we've added a new forum to E-Learning Heroes: Exchange Best Practices (you can find it under the Connect tab). Think of this new forum like your virtual co-working space: you can use it to ask other e-learning pros for advice on how to best work with SMEs, look for ideas and brainstorming on how to make your latest course more engaging, discuss the latest news in the e-learning industry, and more. Have a best-practice discussion you want to start now? We can't wait to see it! To grease the wheels, I also popped in a question of my own that I'd love to get your thoughts on. Excited to get to know you all and your work better in this space!
