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.comBuilding E-Learning Games: Concept & Storyboard #470
Game Show Design: Storyboards #470: Challenge | Recap How in the world did you build that? A common challenge for new course designers is seeing polished e-learning projects and having no clue how they came together. I hear from folks all the time that they want to do the weekly challenges, but it feels too advanced for beginners. So, for this challenge, we're going to pump the brakes and spread the build over four weeks. We’ll follow a linear development model so we can really dig into and focus on common development steps. I realize experienced designers will prefer a more iterative approach for real-world projects. And that's fair. But using a progressive, step-by-step approach should help new users follow the evolution of an e-learning challenge project from concept to deliverable. Plus, it gives us something tangible to show each week. Week 1: The Concept & Visual Storyboard This first week, we’ll focus on the initial game show theme or concept. Your task will be to create a wireframe, flowchart, or visual storyboard that captures the flow of your game. For new users, this helps you work intentionally through your ideas before jumping into development. And for you pros, this might seem like extra work, but slowing it down will help others visualize how polished interactions come together. Here’s a breakdown of the four-week schedule: Week 1: Concept & Storyboarding Week 2: Prototype Development Week 3: Development & Review Week 4: Final Testing & Project Submission 🏆 Challenge of the Week This week, your challenge is to develop an e-learning game show concept and present a visual, non-interactive storyboard or flowchart of your game’s mechanics and visual elements. You can either create something new or take an old project and break it down with us over the four weeks. This way, everyone can see how it all comes together. Week 1: Concept & Storyboarding Goal: Choose a game show concept and design theme Deliverables: Choose a game show concept, theme and design style Create a visual storyboard, flowchart, or static mock-up of the game Share a link to your static design concept Week 2: Design & Prototyping Week 3: Production & Development Week 4: Final Testing & Project Submission ✨ Share Your E-Learning Work Comments: Use the comments section below to link your published example and blog post. Forums: Start a new thread and share a link to your published example. Personal blog: If you have a blog, please consider writing about your challenges. We'll link to your posts, so your great work gets even more exposure. Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness. 🙌 Last Week’s Challenge: Before you get started on this week’s design concept, check out last week’s examples to see what e-learning designers do and how they got started in the industry. What Instructional Designers Do RECAP #469: Challenge | Recap 👋 New to the E-Learning Challenges? The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos. Learn more about the challenges in this Q&A post and why and how to participate in this helpful article. 📆 Upcoming Challenges Challenge #471 (07.26): Week 2: Prototype Development Challenge #472 (08.02): Week 3: Production & Development Challenge #473 (08.09): Week 4: Final Testing & Project SubmissionQuick and Dirty Image Effect for E-Learning Cover Slides #377
E-Learning Cover Slides #377: Challenge | Recap Can You Judge an E-Learning Course by Its Background Image? Need a quick way to set the stage for your course content? Try using a custom background image. Background images are the largest object on your slide, making them one of the best ways to establish context while creating a sense of location. This works equally well for content and course cover slides. But not all projects require custom themes or visual treatments. For example, most e-learning courses are built from existing templates that are modified based on the course content. That’s okay because there’s a background trick for those courses, too! Creating Custom Backgrounds Images Using Transparency In a recent post, Tom Kuhlmann shared a visual design tip commonly used in advertising and high-end product photography. The effect is achieved by using the same image for the focal point and background graphic. The background version is scaled beyond the slide size, and transparency dialed way up to blend the image into the background. Here’s a before-and-after view of the effect: Notice how the faded image fills the background without dominating the slide? This is one of the quickest ways to add richness and depth to your slide backgrounds. And that's what this week's challenge is all about! Challenge of the Week This week, your challenge is to create a cover screen for an e-learning course, real or fictional, using the transparent echo technique. You can share a static image of a cover slide or add a cover screen to an existing project or challenge entry you created. Share Your E-Learning Work Comments: Use the comments section below to share a link to your published example and blog post. Forums: Start your own thread and share a link to your published example.. Personal blog: If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure. Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness. Last Week’s Challenge: Before you uncover your slide designs, check out the creative ways course designers build templates from stock vector illustrations: E-Learning Templates from Illustrations #376: Challenge | Recap New to the E-Learning Challenges? The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challengesanytime you want. I’ll update the recap posts to include your demos. Learn more about the challenges in this Q&A post and why and how to participate in this helpful article.Help Kyra Cool Off!
In this eLearning challenge, I decided to use the javascript mouse follower execution. In this simple course, Kyra is disoriented from the heat and you need to help her by using your mouse and clicking items in the break room to cool her off. If you have any questions, let me know! Click here to ReviewCreating Roulette & Spinning Wheel Games in E-Learning #458
Roulette & Spinning Wheel Games #458: Challenge | Recap This week’s challenge was inspired by a recent community discussion by Troy Westphal. Troy created a roulette game using true/false variables to determine if the roulette’s spinning wheel selected red or black. Walt and Tom jumped in with ideas and tutorials to help troubleshoot Troy's source file. While Roulette games aren't a common interaction in e-learning, they present fantastic ways to flex our variables muscles. And that's what this week's challenge is all about. 🏆 Challenge of the Week This week, your challenge is to create a roulette-type game that involves spinning and randomization. You can create a literal roulette game or anything that captures the essence of the game. Ideas and Possible Projects Here are a few ideas to help you get started. Remember, you’re not limited to only roulette games. The objective this week is to combine spinning effects with randomization. Lottery Number Generator: Create an interaction to generate a set of random lottery numbers based on learner inputs or random numbers. Slot Machine Games: Create a slot-machine game where learners can spin the reels using sliders, dials, or simple buttons. Wheel of Fortune Games: Create a game based on the popular TV show. Examples of Spinning Interactions Here are a few examples of different approaches to this week’s challenge. ELC444: Example by Nichole Codrington ELC405: Example by Natalie Friedman ELC334: Example by Emmy Buxengard ELC311: Example by Owen Holt ELC278: Example & download by Samuel Apata ELC275: Example & download by Samuel Apata 🧰 Resources User Guides Storyline 360: Working with Variables Storyline 360: Adding Variable References Storyline 360: What "Object Loses Focus" Means Webinars Overview of Variables in Storyline 360 Using Text Variables in Storyline 360 Using Number Variables in Storyline 360 5 Ways to Personalize E-Learning Courses Using True/False Variables in Storyline 360 ✨ Share Your E-Learning Work Comments: Use the comments section below to link your published example and blog post. Forums: Start a new thread and share a link to your published example. Personal blog: If you have a blog, please consider writing about your challenges. We'll link to your posts so your great work gets even more exposure. Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness. 🙌 Last Week’s Challenge: Before spinning random ideas on this week’s challenge, check out the creative ways your fellow challengers combined three or more challenges: Mix-and-Match Challenge Examples RECAP #457: Challenge | Recap 👋 New to the E-Learning Challenges? The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos. Learn more about the challenges in this Q&A post and why and how to participate in this helpful article. 🚨2024 Articulate User Conference Call for Proposals We’re now accepting proposals for this year’s in-person user day conference co-hosted at DevLearn in Las Vegas. Learn more about the proposal process.BEAT THE MACHINES
Hello! Like every object in Storyline, sliders have their very own object ID that can be accessed via the new Javascript API: With Javascript, it's possible to take this object ID and manipulate the z-index of three overlapping sliders, so the slider that is being moved always passes in front of the other two. Er, a bit like a 'cup and ball' game... Play BEAT THE MACHINES here! There's a lot of other stuff going on in this demo, including a 'collision detection' system (also powered by Javascript) to ensure that no two cups occupy the same position. If you'd like a more in-depth look behind the scenes, read my full write-up here.
Course Starter: Communicating with Clinical Sites
This course starter was designed as a template for training in a clinical operations setting. The topic focuses on effective communication with site coordinators during clinical trials, a frequent challenge in pharmaceutical development. The slides include an introduction, scenario-based interactions (multiple choice and drag-and-drop), and a short quiz with feedback. The content reflects real-world sponsor-site dynamics and uses custom visuals and interactive triggers to enhance learner engagement. hCourse Starter: Communication with Clinical SitesWhat’s Your Celestial Learning Persona
In this challenge, I used a listicle format inside a scroll panel to explore how the 12 zodiac signs connect to learning styles. Each sign reveals a short, scrollable insight into how that type of learner might thrive — whether you're a curious Gemini, focused Capricorn, or imaginative Pisces. Just scroll through the list and discover which celestial style speaks to you :) What’s Your Celestial Learning Persona
