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.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!
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!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!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.Comics in Music Video
Corporate Rock, A Comic Book Take on Learning Through Music For this week’s Comic Book challenge, I leaned into bold visuals, panel‑based storytelling, and a little nostalgia to explore a simple idea: what if learning content worked more like Schoolhouse Rock? Corporate Rock is an experiment in using music and comic book visuals to teach workplace learning concepts. I partnered with AI throughout the process, starting with the design of a Knowledge Management course strawman, then breaking topics into short, focused scripts. One subtopic was transformed into a song using an alternating verse and hook structure, with spoken moments to reinforce key ideas. From there, AI helped generate detailed image prompts for each verse and spoken section, intentionally designed as comic book panels. Verses became three‑panel cartoon sequences, while spoken moments landed as single, punchy panels. Each image was generated with a consistent illustrated style to feel like pages pulled straight from a comic. The final step was bringing everything together into a music video, syncing the song with the comic visuals and editing it all in DaVinci Resolve. The result is a learning experience that blends instructional design, music, and comic storytelling to make content more engaging and memorable. This project was a reminder that learning does not always have to look like slides. Sometimes it can look like a comic book that rocks. https://360.articulate.com/review/content/60255320-a8d6-4676-bb6a-b112b189b074/reviewLearning 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.
