Cyber Shield
I had so much fun with this week's challenge! I created "Cyber Shield" - a cybersecurity awareness course designed as a noir comic book. The concept is simple but impactful: 9 essential cyber safety habits, each told through a single comic panel with a short, punchy caption. Audio narration expands on each tip as the panels are revealed one by one. What I focused on: Dark noir comic book aesthetic with consistent visual style across all panels AI-generated images using ChatGPT for the comic panels Audio narration for each tip, keeping the on-screen text minimal (1-2 words per panel) while the voiceover carries the detail Tools used: Articulate Storyline 360 ChatGPT (image generation) ElevenLabs (voiceover) Pixabay (sound effects) View the demo here. ABOUT ME: I'm an Instructional Designer who loves creating interactive e-learning experiences that are engaging, visual, and fun to build. Connect with me on LinkedIn!Accordion FAQs
What if an accordion FAQ didn't have to look like one? For this week's challenge, I built two completely different takes. One is styled as sticky notes pinned on a corkboard, where each note peels open on click, and one is a chat conversation where tapping a question triggers a typing animation before the bot replies. Both in Storyline 360 on a 9:16 canvas, with a selection screen so you can pick which style to explore. Check it out here! Would love to connect on LinkedIn and exchange ideas!Valentine's Express
Valentine's Express is an interactive experience where users navigate personality-based scenarios and craft notes and love letters. They choose a personality type, receive personalized feedback, and earn a Romance Expert certificate. This entry doubles as my submission for both the E-Learning Valentine Challenge AND the Code Block Build-a-thon. It was my first time building with code blocks in Rise, and I'm amazed at what's possible. Ready to express your heart? Check it out here! 💕Learning a foreign language
Learning a language is not always easy, but comics often help to better understand certain expressions in context. As I have been learning Italian for a few months, I thought that the theme of this challenge would be perfect to showcase an example. Arrivederci e divertitevi ! Tools used : Articulate Storyline 360 (design, image generation) Poe (image generation, prompt for image generation in Storyline) ElevenLabs (italian translation for words as grandfather, mother, etc.) Here is the demo.Travel Alberta Slider Game
https://360.articulate.com/review/content/53628b3e-d00e-4c31-aca4-6d4d9ac6c704/review My entry for the Using Sliders for Accessible Drag-and-Drop Interactions weekly challenge. Using the slider you can go north or south across the province of Alberta and click on some of the cities to answer trivia. THE BUILD. A total of 8 sliders make this up. Each of the 6 icons on the map is its own slider that is linked to the main slider so they all move in unison. Of course, the map itself is a slider as well, and once again attached to the main slider. That's all there really is to it. The hard part was adjusting the size of the map as a thumb so that is fit properly on the slide.Challenge #545: Dynamic Blur Effect & Blue Carbon 🍃
Hi everyone! 👋 For this week's challenge on increasing readability with blurred backgrounds, I wanted to combine visual contrast with a mini-lesson on Mangrove ecosystems and "Blue Carbon." Mangroves are beautiful, but their intricate root systems create a very "noisy" background that completely swallows any text. To fix this, I decided to go beyond a static before-and-after slide and make the blur interactive. Behind the Scenes: Instead of using multiple image states or transparent shapes, I used a single high-res image and linked a Storyline slider to a JavaScript trigger. As you drag the slider: JS dynamically increases the CSS filter: blur() property of the background image. A dark overlay dynamically increases its opacity up to 40%. The hidden information blocks smoothly fade in. This approach keeps the file incredibly lightweight and makes the transition buttery smooth! Dynamic Blur Effect & Blue Carbon 🍃 I'd love to hear your thoughts!
Case: Operation Dopamine - A Noir Comic Mystery
Hi E-Learning Heroes! 👋 For this week's Comic Book-Inspired Challenge, I decided to go full "Noir Detective" graphic novel style. 🕵️♂️✨ In my project, "Case: Operation Dopamine", the learner steps into the shoes of a private investigator exploring a ransacked laboratory. The mission? To find the 6 stolen components of Gamification (such as Engagement, Customer Lifetime Value, and Emotional Connection) and restore color to a black-and-white corporate world. 🔍 Play the interactive demo here: > Play Operation Dopamine I had so much fun blending storytelling, visual design, and instructional concepts into this one. I would love to hear your thoughts and feedback!The Phish That Got Away!
This is my first time participating in a challenge, and I had a lot of fun with this topic. For my entry, I created a phishing example that spiraled into a little comic adventure—complete with a clueless employee, a suspiciously enthusiastic scammer, and a few red flags waving in the background. The concept is very simple, but I had a blast creating this. Tools that I used: Articulate Storyline ChatGPT: Some image creation Pixabay: Sound effects and music View example here.Every home hides a perfect match
One image. A blur effect. Six slides. I wanted to see how much instructional work a single visual treatment could do. Turns out, a lot. Each slide reveals one house from the blur, holds attention exactly where you want it, and the re-blur before the knowledge check naturally shifts learners into application mode. The final clear reveal just feels good. Content is AI generated example work (real estate agents matching clients to homes) but the blur technique is the real focus (pun totally intended). Take a look: https://storage.googleapis.com/portfolio-elearning-2024/Using%20Blurred%20Backgrounds/story.html Anyone else leaning on visual treatments to do structural heavy lifting lately?Challenge #544: Brand Storytelling Accordion (Powered by AI & JS!) 🚀
Hi everyone! 👋 Here is my entry for this week's Accordion Interactions challenge. For the content, I decided to focus on Brand Storytelling and how brands communicate through stories rather than just hard data. I thought it would be a valuable mini-lesson for anyone interested in marketing or instructional design. But the most exciting part for me was the behind-the-scenes creation process! Yesterday (March 24th), I had the opportunity to attend the "10 AI Assistant Capabilities You’re Missing & 10 Tips to Master them" event by David Anderson, which discussed the implementation of the AI Assistant in Articulate. Around the same time, I watched an excellent video tutorial by Learning Dojo titled "Building a Sliding Accordion with New Learning Prompts Tool". I felt so inspired that I decided to test out the prompts from prompts.learningdojo.app mentioned in the video, implementing them directly into the Articulate Storyline AI Assistant. To my surprise, it worked wonderfully! 🤯 The AI generated the structure for a fully functional HTML/CSS/JS accordion. I simply placed it inside an "Execute JavaScript" trigger when the timeline starts on a blank slide. Then, from my side as an instructional designer, I only had to tweak the CSS styles (giving it a clean design with a deep blue/purple gradient) and make a few minor adjustments to the code to structure the content into two levels and ensure the text fit perfectly. I think this is a fantastic tool and workflow for adding interactive and custom UI elements to our courses. AI keeps surprising me every day! You can check out my interaction here: Brand Storytelling Accordion Hope you like it! I'd love to read your feedback.
