Gamified Onboarding
Collect the gems by exploring the office! This gamified eLearning was developed for team members to explore their workspace while getting some product knowledge. The process: Conducting a training needs analysis through discussions with leaders Building a learner persona using surveys and polls Planning the desired outcomes Create a fun course Explore the project.Storyline Game: OneDesk Quest
Check out this innovative gamified project! It features a progress bar, life system, game map, items, boss fights, personalized and adaptive learning, and engaging story-driven animated videos. This approach is designed to boost learner engagement and improve learning outcomes. Video: Key highlights that went into the game. Explore this project. ----------------------------------------------------------------------------------------------------- Screenshots
AI & Me: Creating a Family Feud/Wordle Style Game in Storyline
In the world of e-learning, engagement is key. That's why I created “Focus Feud”, an interactive game supported by a Rise companion guide that features an interactive coach. This project transforms a static article about maintaining focus at work into a fun, memorable learning experience, built with AI assistance. In this post, I'll walk you through how AI simplified complex tasks, elevated creativity, and streamlined the development process - all without extensive coding or a team of developers. Motivation & Concept Inspired by Articulate's new AI features, I set out to showcase how AI can be integrated into content development. My goal was to: Gamify an article on maintaining focus at work Use Storyline for interactive game slides Create a Rise companion guide featuring a digital twin as an interactive coach Tools of the Trade Here's a quick look at the AI-powered toolkit that made Focus Feud possible: Articulate Storyline and Rise: Game development and companion guide creation. ChatGPT: Content summarization, game ideation, JavaScript co-creation. HeyGen: Digital host avatar with a custom voice. Camtasia: Video editing of avatar. Canva/Photoshop: Graphic tweaks. Word/PowerPoint: Storyboarding and scriptwriting. Game Planning & Storyboarding I kicked off the process by feeding the original article into ChatGPT. It helped me extract key points from the article, convert these points into game objectives and elements, and brainstorm game show formats that would work well with the content. After settling on a Wordle/Family Feud hybrid, I created a PowerPoint storyboard to visualize the game flow and mechanics. Graphics and Narration Storyline's AI generated most of the images, requiring only minor tweaks in Canva and Photoshop. While Storyline’s neural voices worked well, for the game show host, I used HeyGen to create a video-style avatar with a custom voice, which I then refined in Camtasia. Coding and Development This was a balancing act between AI assistance and traditional development: JavaScript and AI: Initially, I used ChatGPT to co-create JavaScript for input validation, scoring, and timers. While this was incredibly helpful for complex functionalities, it sometimes led to troubleshooting challenges. Storyline Triggers: As the project progressed, I found that leveraging Storyline's built-in triggers and variables was more effective for many game mechanisms. This brought me back to familiar territory and improved overall stability. Variables: I set up numerous variables for each mini-game in Storyline, testing incrementally to isolate and fix issues as they arose. Content Creation and Editing AI tools proved invaluable for content creation. ChatGPT helped generate and edit content. This was useful as Storyline's current AI features cannot evaluate external links/content (and the game was based on a web-based source). Storyline's AI features significantly reduced the time needed to generate images, sounds, and edit text. Overcoming Challenges with AI Throughout the development process, AI helped me overcome several hurdles: Complex Functionality: AI-assisted JavaScript allowed me to implement features I couldn't have coded on my own, and in a matter of minutes. Time Constraints: Storyline's AI features dramatically sped up image generation, sound creation, text editing, and overall development. Consistency Issues: When AI-generated graphics needed adjustments, non-AI tools like Photoshop helped maintain visual consistency. The Rise Companion Guide To complement the game, I created a companion guide in Rise that features my digital twin. This guide explains the game’s content and includes an interactive digital avatar trained on the article’s material that acts as a live coach. While an API allows direct integration, for this example, it launches into a new window. Conclusion: AI - A Solo Developer's Powerful Equalizer Combining Storyline's AI features with tools like ChatGPT has revolutionized content creation for solo developers. Limited knowledge of JavaScript or advanced Storyline triggers and variables is no longer a barrier. AI acts as both tool and tutor, enabling the creation of complex learning experiences beyond one's coding abilities while consistently suggesting efficient solutions. These new AI tools are leveling the playing field, allowing solo developers to create sophisticated e-learning rivaling team-produced content. By accelerating ideation, prototyping, and media generation, AI dramatically reduces development time. We're just at the beginning of this transformation, with even more accessible and innovative opportunities on the horizon as AI continues to evolve.Voice Interactivity Demo With Realtime AI Agent And Navigation Controls! 💬🌟🦅
Hi Heroes, I'd like to share my latest Storyline demo, which showcases the level of interactivity made possible by integrating Storyline with the new OpenAI Realtime API. 🚀 These are some of the features I have been able to achieve through my work on this: Voice-Activated AI Navigation: You'll see how users can engage with an intelligent AI agent that understands the context of your learning journey within an eLearning module in real time. This allows the AI seamlessly assist at any point it is called upon, even activating navigation triggers to guide the experience. Real-Time Function Calls: The AI not only recognises the eLearning module’s structure but also responds in real time, adapting to user inputs, including the ability to generate follow-up questions, voice-based quizzes, and role-play interactions. Session-Based Conversation Memory: Conversation history is saved throughout the session, providing continuity and an agent that can “remember” your prior questions or responses for more engaging learning. (https://www.youtube.com/watch?v=WqdxvIoiJxU&list=PLgWxRODbk1M0En-4t0cjfmYTax_RzF-QL&index=4&ab_channel=DiscovereLearning) --- My name's Chris Hodgson, an eLearning developer and software trainer based in the UK. I enjoy creating fun, unique, and engaging online experiences using Articulate software! Connect with me on LinkedIn - https://www.linkedin.com/in/chrishodgson44/
Using multiple sliders as an alternative to drag-and-drop, with dynamic Z-index control
Hello! For this week's ELH Challenge (#489), DavidAnderson asked us "to share an interactive example that shows people how to set a table. Go formal, go casual, or mix it up. It is totally your call." So, of course, I built a pirate-themed demo inspired by The Goonies.... This is my latest experiment using customised sliders as an accessible alternative to drag-and-drop. As shown below, by replacing the slider thumb with an image, it's possible to build an 'on rails' drag-and-drop that is also accessible from the keyboard: Being a bit of a perfectionist, I also used Javascript to change the Z-index position of the 'goblet' slider, so it passes in front of the knife and fork when it is moved, despite initially appearing beneath them. (We're setting a table - everything needs to be in the right place!) Z-index is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index. Changing the z-index number with Javascript means I can move the goblet from its starting position behind the knife and fork, placing it in front of the knife and fork when appropriate. This also helped to make all of the sliders 'grabbable' within such a small area, where otherwise the larger slider could block out the other two. This code moves the goblet to the very top: let controls = document.querySelector("[data-model-id='5xjQeS51pKT']"); controls.style.zIndex = "999" This code returns it to its starting position: let controls = document.querySelector("[data-model-id='5xjQeS51pKT']"); controls.style.zIndex = "4" And this IF/ELSE trigger moves the goblet to the back when the slider is at position 0 and 2.5, or to the very front when it is in any other position: For good measure, I also added a trigger that moves the slider to the very front whenever it is clicked. For more information on manipulating the z-index number of objects in Storyline, check out JeffBatt-bf4917's brilliant tutorial here. But hang on a minute Testing my demo, I found that the sliders for the knife and fork were accessible from the keyboard, but the slider I used for the goblet was not. It appears that changing the z-index of the slider also knocks out the accessibility controls. While I could still highlight the slider using the tab key in the usual fashion, I could no longer change its position using the arrow keys. It took a bit of lateral thinking, but I found a workaround... document.querySelector("#acc-5xjQeS51pKT").addEventListener("keydown", function(e) { if (e.key === "ArrowLeft") { let currentVal = GetPlayer().GetVar("GOBLET"); if (currentVal > 0) { GetPlayer().SetVar("GOBLET", Math.max(0, currentVal - 0.5)); } } else if (e.key === "ArrowRight") { let currentVal = GetPlayer().GetVar("GOBLET"); if (currentVal < 10) { GetPlayer().SetVar("GOBLET", Math.min(10, currentVal + 0.5)); } } }) When the user highlights the goblet with the Tab key, the above code listens for whether they then press the left or right arrow keys. If they press the left arrow, the code checks the current position of the goblet and moves it half a step to the left - but won't let it go below zero. If they press the right arrow, it does the same thing but moves it half a step to the right - but won't let it go above ten. I've basically replaced the accessibility controls that were affected by the z-index changes, all to ensure the goblet appears in front of the cutlery... 😃 Every day's a school day! I've attached my master file for anyone who'd like to take a closer look at this. My original idea was to dynamically change the z-index position of all three sliders in relation to each other, to ensure they are all consistently 'grabbable', but I just couldn't get this to work smoothly. But for my money, this technique presents a viable alternative to drag-and-drop that has potential if explored further. Let me know what you think! EDIT: I've also now attached v2 of the master file which incorporates Nedim's debugging. The z-index of all three sliders are now dynamically controlled to maintain the perspective throughout the interaction, and the accessibility controls are working without additional code.
Collection of Carousel Templates
Some experiments! Hope this gives you some inspo. Vertical Sliding Interaction (Light): Preview Notes: Uses hover layers which don't work on mobile. Features: Two options for vertical progress bars, swipe forward and back animations Horizontal Swipe Interaction (Dark): Preview Notes: Uses hover layers which don't work on mobile. Features: "Dot" progress animationsInteractive video (award-winning project)
This project was designed to engage salespeople in using proper sales techniques and technical inspection skills. Check the demonstration. We employed an interactive first-person video approach. Instead of prioritizing clicks, we focused on a web series format, similar to Netflix episodes. To enhance realism, we simulated interactions with customers and products, and the use of video allowed us to showcase details of tools, environments, materials, and even appropriate body language. At the end, rather than completing a linear course, students will have tested their decisions and learned from successes and mistakes in a safe digital environment, enabling them to repeat the experience and make different choices while comparing the consequences of each action. The making of In this tutorial I explain my production process. Thank you!Free slider example in Storyline - Cocktail Recipes
Hey, some Mondays can be tough. To make it easier we thought it would be cool to share some cocktail recipe example built in Storyline some time ago. It is a free download. Use at your own risk :) Download here: https://fastercourse.com/download/free-storyline-360-template-sliders/
