Building a Responsive Custom Block with the New Labs Feature
For this week's challenge, I experimented with the new Responsive Custom Blocks feature in Labs and used it to create a custom block that automatically adapts to desktop, tablet, and mobile views. The new container-based layout made it easy to reorganize content across breakpoints while keeping the design clean and consistent. A key objective was preserving icon quality, and the responsive controls allowed the layout to resize without stretching or distorting visual elements. The device previews and flexible container settings made testing and fine-tuning very straightforward. Overall, I found the feature intuitive and surprisingly powerful. It significantly simplifies the creation of device-friendly custom blocks, and I think it would be a fantastic addition to Rise 360 if it becomes an official feature. Great work by the Articulate team, and I'm looking forward to seeing how this feature evolves!What’s New in Articulate 360
Discover the latest Articulate 360 features Join us on July 28th at 11 a.m. ET [U.S.] for our What’s New in Articulate 360 webinar. See David Anderson, Director of Training, walk through all the latest features. You’ll learn how to: Let experienced learners test out of Rise courses on topics they’ve already mastered. Automatically update live Rise courses without re-uploading them to your LMS. Customize AI-generated images without leaving Storyline. Register HereBusiness Maths Essentials
Hello everyone... For this week’s challenge, I decided to experiment with a simple combination of Articulate Rise, ChatGPT and PowerPoint. What started as a small idea quickly developed into a complete, scenario-based learning activity. I created Business Maths Essentials for new starters, using Sam, a newly appointed accountant at BrightStart, to guide learners through key financial terms, classification activities, profit-and-loss calculations and a final decision-making task. The learner supports Sam, a new accountant at BrightStart, as he works through four practical tasks: understanding key financial terms, classifying business figures, calculating profit or loss, and interpreting the wider financial position. The activities were created as responsive HTML, CSS and JavaScript components that can be placed inside Articulate Rise Code Blocks. The design uses clear instructions, immediate feedback, running totals, simple calculations and accessible keyboard controls. Consistent TS4 branding, restrained 44 px emojis and visual status cues help learners navigate the content without distracting from the learning objective. The modular structure also allows each activity to be used separately or combined into a complete learner journey. For the course banner, I adapted a template created by Tom and used PowerPoint’s Morph transition to produce a simple animated GIF, which I placed in different locations. Attached is the Rise Banner Template I used - Source : E-learning Heroes View the course: Business Maths Essentials Enjoy Dr NadiaBeyond Click-and-Read: Crafting Engaging E-Learning with AI Assistant
Unlock the power of AI Assistant in Articulate 360 to enhance your e-learning courses. Learn how to transform linear content into dynamic, interactive experiences. Discover practical ways to use AI features for creating impactful images, engaging interactive blocks, and effective quizzes that truly resonate with your learners.Paint by Num-Birds: Songbird Identification Tool
This interaction pushes learners to get curious and creative while identifying some of the most notoriously difficult bird species to spot - warblers! The paint-by-numbers interface paired learning materials (like snapshots, anatomy diagrams, and their own field notes) introduces learners to the fundamentals of bird identification, and allows them to explore this process of visually ID'ing a bird for themselves. Review Here: https://360.articulate.com/review/content/54d099bd-477a As a team with avid birdwatchers, trying to "onboard" people to the hobby always poses a classic blocker: "How do you tell the birds apart?" Though sound, habitat, and other factors play a role, visuals are the first pillar of identification that beginners start to familiarize themselves with. Using Rise's code block, we wanted to create a tool that went beyond flip cards, checklists, and other default interactions. Leveraging HTML/CSS, we created a workshop space that: Breaks down key features to note for ID'ing through an interactive diagram Offers as much or as little support they may need in the form of the snapshots, diagrams, and facts in the "Files" Provides a challenge to apply what they've learned by identifying the "Field Notes" recordings To build this block, we used a mix of vibe-coding and human code expertise! Once we had refined our idea on our own, Gemini was enlisted to help create the basic UI and functions. The functionality was refined and adjusted many times for user ease and clarity. Finally, we looped human experts back in to polish the code, refine the diagram, and squash any stubborn bugs. It was a whirlwind learning experience! Some takeaways: Having the AI refine snippets of the code ensured overall block integrity. We made the mistake at the start of having Gemini spit out a whole new HTML file to adjust minor pieces; we found it changed things that we hadn't asked it to, and actually got "lazy", condensing body text and dressing down UI elements increasingly with each iteration Knowing when to use AI, and when to call in a human expert was our superpower. Gemini deeply, SERIOUSLY struggled trying to create an SVG of a bird. So, we took the monstrosity it outputted and edited the code ourselves to create an image we were happy with! We also enlisted our senior developer to jump in and fix some serious coding errors that had made the block totally un-playable. Not all AI's are made equal: Canva's AI was very promising for vibe-coding at first, but Gemini ultimately became our tool of choice as it provided the most accurate and useful responses. We chose this activity because as bird lovers, we know that warblers in particular have such subtle differences - a black eye ring on one bird might make it a totally different species from the next! The ability to paint and visually describe these tiny differences seemed like the perfect learning opportunity for this challenge (and get our other coworkers on board with birding)! Let us know what you think! Were you able to paint a perfect match? Created by Aamir Aman, Tal Castillo, and Ryan Young.How to Add a Custom Interaction Using the Code Block in Rise
This tip comes from RonPrice, Chief Learning Officer at our certified training partner, Yukon Learning. Do you need some custom content in your Rise course but you're not sure how to start? Use the code block! All you need is an idea. It's that simple. Creating a custom block has never been easier using the Rise Code Block. In this video, we will show you: How to use AI to quickly generate some code for an interaction How to insert the AI-generated code into your Rise course Resources: Yukon Learning YouTube Channel Code Block Group. Join the code block group in ELH to ask questions, post examples, and learn from other e-learning designers.
