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.