Microlearning 2: Electric Boogaloo
Hello! I've been taking part in these challenges for so long, sometimes I get to do a 'sequel' to an earlier demo. In the age of AI, witness the return of DOT - my 'microlearning companion' from 2020's 'Tiny E-Learning Challenge'. This time, she's a little bit more advanced, but no less sarcastic. DOT will respond to pre-filled questions with a range of randomised responses. Her code uses your web browser's built-in text-to-speech feature to read the dialog out loud. This week's demo is the result of a 4-hour 'vibe coding' session with Claude.ai, during which I shared images of my original demo for E-Learning Heroes Challenge 331. I'm still tinkering with DOT's code, so I won't be sharing that here. But if you'd like to know how I used two different fonts in the same course title, you'll find that code in the final section of this course. CHAT TO DOT HERE...Rise notes utility
I added a global utility bar to my Rise course to add a simple 'notes' piece, data is kept in the browser's local storage and it will not write to SCORM. Because of the global nature of this addon, it can be a handy way to make the functionality, and even some branding, always available to users across your entire course.
Simple Tabs
That’s probably the most accurate way to describe this submission, possibly the most boring interaction I’ve ever produced for an eLearning challenge. Ironically, it’s built around tabs, which can be pretty useful when done right (keep them simple, clean, and don’t overthink it). But here’s the twist: If you manage to stick around for 2 whole minutes, you’ll unlock a reward, a downloadable Storyline file. Because if you’ve got the stamina to survive two minutes of my "creativity," you deserve something. Inside: 🕒 A global timer built with JavaScript 🎞️ Image transitions powered by the Web Animation API 🎁 And who knows, maybe a surprise or two. LaunchPizzamama activity... Soooo tasty!
Hi! My name is Adèle. This is my first step in the challenge adventure. I’m quite proud to share with you my very first JS project. I’ve used JavaScript in previous projects, but only by “copying and pasting” code. This time, I managed to understand how to find the ID of an object and then customize the JS code myself :-) I hope you’ll find this little example fun!PILON Calculator
Hello! This demo uses a smattering of #Javascript to provide personalised financial advice for UK employees receiving Pay In Lieu of Notice. I was recently in this situation, so I built my own PILON calculator in Storyline to help me make some sense of it all. When life gives you lemons and all that. Plus, I couldn't resist the 'pylon' pun. Calculate your PILON payment here This calculator is built around a standard slider with some custom #Javascript doing the heavy lifting. Firstly, it pulls the current month from the local system, and adapts the length of the slider interaction. (So, in August the slider runs to 31 days.) Then it takes the financial information provided by the user and performs the PILON calculation. I hope no-one reading this post finds themselves in this situation. But if you are, maybe this will help, and put a smile on your face in the process. I'm currently on vacation without access to my master file or code, but I'd be happy to answer any questions you have on my return next week.
Balloon Boy's Buoyancy Quiz
Hello! This week, I have used a character sprite created by Segel2D on Itch.io to create a short five-question quiz on buoyancy. All of the other elements were made in PowerPoint or 'in slide' in Storyline. Your performance is indicated by the number of balloons you have left, and your progress is shown by a buoy marker that appears with each question. This is a 'one-slide' build based on a blank slide. It uses layers to reveal each question, and a little Javascript to analyse your progress and provide customised feedback. Can you make it back to dry land? I've also included my .story file so you can also take a look under the hood and see how this works. 'Pop' any questions you have below.
An AI-Powered Knowledge Check in Storyline
I've been wrestling with this challenge for a while: How do we get learners to reflect without relying on quiz after quiz? How can we use open-ended questions to encourage deeper thought? I've long considered AI for this, but there were hurdles... How do you integrate it into an Articulate Storyline course without paying for tokens or setting up contracts? And how do you do it without leaking credentials in the course itself? Can it be done without having to modify code after exporting the course? I learned recently that Hugging Face Transformers provide a solution. You can now download an AI model to the learner's machine and run it locally in their browser. I've managed to get this running reliably in Storyline, and you don't have to modify the code after export! In the final slide of the demo, your goal is to recall as much as possible from the podcast/summary. The AI will then check your response and give you a percentage score based on what you remembered. Live demo & tutorial here: https://insertknowledge.com/building-an-ai-powered-knowledge-check-in-storyline/ If you want to learn how I recommend starting with the sentiment analysis because it's easier to get started. I've also provided a file to download in that tutorial if you want to reverse engineer it.Can We Be Friends?
Hello! Everyone hates icebreakers, right? With that in mind, I've created this mobile-optimized Storyline interaction to help you make new friends. Are we cool? There are 30 different feedback options, which are selected at random by Javascript. If you have any other questions, please ask. We're all friends here!
JavaScript for Keystrokes
I ventured boldly into JavaScript after DavidAnderson challenged us in this week's webinar. I did it, but only with the help of a couple of eLearning Heroes, and some AI assistance with the coding. Here's the published file The Problem I'm developing technical training for a mainframe system and wanted the users to practice actually using the keystrokes to practice the tasks they need to be able to use. In this system, TAB is required to move from field to field, but in Storyline, TAB activates the accessibility features, which I had to override. The Solution I used JavaScript to get around that at the slide level. Thanks to NickBaca-9980a0 who helped figure that out in this discussion. I also wanted the learners to be able to leverage a hint as they were learning, which required layers to be activated by clicking a question button. I never got the hint button to work right to trigger the layers using states, so I created multiple buttons that show and hide, one for each layer. Heroes Discussion In the final review section of the course, I reused the same activity. I didn't want the learners to have the hint option, but I wanted it to show what the correct answer was if they clicked the wrong key. The challenge here was creating a trigger that would go from any key except the correct answer. I reached out again to the forum and was able to figure this out and troubleshoot when it turned out to be buggy with the help of Nathan_Hilliard. Here's the details of that conversation. Lessons Learned JavaScript is powerful to extend the capabilities of Storyline. AI tools like CoPilot, and ChatGPT will create code for you if you ask what you want it to do correctly. Troubleshooting requires an experienced skillset. You need to pay attention to the details, like capital letters in the code, and to ensure you have all of the triggers to fire in the slide. The eLearning Heroes forum is invaluable when you get stuck on this. Jean Marrapodi jean.marrapodi@umb.com
