Crafting an eLearning for a Major Brand
We all love polished final products, slick animations, perfect layouts, seamless interactions. But what you rarely see is the chaos that comes before the curtain call. In this new “E-Learning Unfiltered” series, I’m tearing down the walls between you and the real work: the mad dash from moodboard to prototype, the frantic bug hunts in custom scripts, and the heated debates over master-slide design. No NDAs, no polished highlight reels, just raw, uncut development moments that show you how crafting an eLearning for a major brand really happens. Ready to roll up your sleeves and learn from my stumbles (and triumphs)? Let’s dive in and embrace the messy magic that fuels innovation. To learn more about what we’ll cover, watch here: https://youtu.be/on04ZwwHSj0?si=QK7dgzymjba09zFbStoryline 360 Microphone Input
Hello, I am creating a training course that needs user input through microphone. Does Storyline support microphone input natively, and if not, are there any available workarounds? I have tried what some other (unresolved) post comments have suggested with altering iframes, does not seem to work for me or the OP of the posts regarding this I have seen.Images not uploading to Rise360
Hi there, Rise360 isn't allowing me to upload images. I keep getting the message attached. I've tried clearing browser history, restarting computer, logging out and back in and it still says the same error message. Is anyone else experiencing this or know how I can fix it? Thanks in advance!Text entry fields, line and paragraph spacing
Greetings, I added a text entry field and selected "1.5 points" for line spacing. On the slide view, the field behaves normally, with the line spacing. (You can manually fill those fields to test them) While previewing however, the line spacing switches BACK to 1.0 point. Is there a reason why? I also noticed that paragraph spacing doesn't apply to text entry fields while previewing. Thanks in advance.Auto-Generate PDF Certificates in Storyline (No HTML Edits Needed)
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. I you like it or have any suggestions for improvement, let me know! You can also see an example version of it in action here: https://certificate-examples.s3.us-east-2.amazonaws.com/Certificate+Template+Example/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 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. 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. 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 or Google Drive 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, the y coordinate, and then the alignment. Note that the x coordinate 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 errors if the download is not happening. 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 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, I have another js script set to execute when the timeline begins on the slide - 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. TL;DR Add a background image to your certificate Set up your Storyline variables 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 Full Code // --- CONFIGURABLE SETTINGS --- // const CERT_BG_IMG_URL = "https://certificate-examples.s3.us-east-2.amazonaws.com/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);Please help Trigger too soon
Hello, I am creating a quiz with 5 objects that when clicked go to slide layers. My problem is that no matter the order, once the last object is clicked and shows visited state it jumps to next slide without completing quiz. I am trying to get all 5 quiz layers to open and completed before jumping to final slide. See attached published and working slides. Thank you https://360.articulate.com/review/content/af842ef5-57b5-4e15-9ccc-fa3dc1da24dc/reviewCan you place alt text on the step of a slider????
Please help me out... I am using sliders that require the learner to rate the degree to which they exhibit certain team building characteristics. As you see on the slide, just above the set of sliders, I have a key for each "step" of the slider. (1st position = Never, 2nd position=Sometimes, etc.) I am trying to increase the usability of this slide for the learners using a screen reader. Currently, when I test my slide with the screen reader, each slider step reads, 1, 2, 3, 4. My question... When using a screen reader, I can use my arrow keys to move through each step. As I use the arrow keys, the screen reader will read...1, 2, 3, 4. Is there a way to modify the slider so that the screen reader will change from reading the numbers to reading the words Never, Sometimes, Often and Always. The activity works OK at the moment and it can be "good enough". I would like it to present a bit more professional for our screen reader users. Please find the attached Review 360 link and the Articulate file. Thank you for your assistance. Here is the Review 360 link: https://360.articulate.com/review/content/8056110f-fb68-4cd7-9231-023089337b03/reviewLabelled Graphics in Rise
I love the labelled graphics in Rise, but there is one feature about them that I wish worked differently. Often the explanation that comes up when the learner clicks a hotspot overlays the image itself and that's not helpful (or visually kind) at all because that often means it's covering the very thing the hotspot is trying to explain so you're taking away the visual reference. Is there a way to set which way the explanation opens, to the left of the hotspot or to the right? I'd love it even if it was a ninja kind of way, involving getting into the code or some such. I'd also love an update to this functionality where we could set ourselves which way the explanation opens (you can leave an option for it to be automatic like now). In this example, it was originally because the hotspots go along the edge of the picture, but what you can't see in this is that i added empty space in the uploaded image to the left (3 inches of it). This way, the actual picture gets nudged to the right and i had hoped that meant more flexibility on which way the explanation opens, but no.
