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.Code Block Accordion w/ Video Player
I opted to go full custom code block for this one. My accordion consists of 14 statements that might resonate with a subject matter expert who has been asked to develop and deliver training. Clicking each statement operates like a typical accordion by expanding and showing more content. In this case, the content includes several buttons that let the user explore a quick solution, or mark the scenario as not applicable to them. Additionally, they can even go deeper on the content and load a short video on the topic. The full accordion sits inside a single custom code block. Enjoy! Link to Course DemoValentine'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! 💕The Million Dollar Challenge: An engaging and fun gamified quiz
Hello! 👋 I would like to share another project I’ve been working on — The Million Dollar Challenge, a fully interactive, game-based quiz experience that I built with some help from AI. This project is based on a popular gameshow, applying the same mechanics and gameplay to the quiz. With some prompts, guidance, and code generation from AI, here's a game that’s fun, challenging, and suitable for embedding into any course. Just tweak the question and answer choice sets and you'll have a game that could help achieve your course learning objectives. Usability: Easy to Play: One click to start, intuitive question/answer flow. Engaging Learning Tool: Perfect for knowledge checks, gamified assessments, or review activities. Customizable: Swap out questions, tweak prize amounts, change colors, or edit sounds to match your brand. Accessible Interaction: Clear text, large clickable buttons, and visual cues. Give The Million Dollar Challenge a try in this demo and let me know your thoughts on how you can integrate this into your e-learning projects if this is something that you would actually use for serious topics (compliance, safety training) or lighthearted refreshers. If you have suggestions on how to make the game even better, feel free to let me know; would love to know what you think. 🙂Reading a Micrometer
My first foray into Rise Coding using ChatGPT and very little knowledge of HTML, CSS, and JavaScript. I am excited with the results so far, but I know I have some refinement to do. Maybe making the overall package smaller. For example, when I upload it into Rise, it takes some time to load, then it works fine. I am not even sure how to upload the file here.Fun and Gamified Learning with Code Block (Beta) feature in Artiulate Rise 360
Developed using Artiulate Rise 360’s new Code Block (Beta) feature, this interactive game challenges learners to click targets before they disappear. Each target adds points. Click the link below to try it now and see if you can top your best score! https://www.brilliantteams.com.au/gamified-learning-with-rise360-code-block-feature/
🕹️ NeonNet Cognitive Console
This week’s challenge entry explores when open text questions are most useful. Instead of scoring or tracking, the interaction focuses on reflection: learners type their own response, compare it with a model answer, and then give themselves a simple self-rating. It’s a light, playful build in a retro console style, designed to show how the Rise Code Block can be used for more than just quizzes. The interaction demonstrates how to: Encourage learner ownership through reflection. Blend open text entry with self-assessment. Keep feedback flowing without breaking immersion. The full HTML/CSS/JS code sits just below the interaction, so you can lift it and repurpose or remix it as you like. Check it out here!
