Custom Interactive Product Match – Built with Code Snippet (Accessible & Responsive)

Hi everyone!

For this Build-a-Thon, I wanted to push the boundaries of the Rise 360 Code Block by creating a custom-coded matching activity.

In this challenge, learners must match product benefits with the correct item. Beyond the clean, modern look, I focused on two key pillars:

• Dual-Interaction Accessibility: To ensure a great experience for everyone, I’ve implemented both Drag-and-Drop AND Click-to-Select functionality. This makes the activity fully accessible for users on touch devices or those who prefer clicking.
• Gamification & Feedback: I added a dynamic progress bar and a custom CSS confetti celebration upon completion to reward the learner.

 

Check out the demo here: 

https://360.articulate.com/review/content/c1f2b467-0d8e-4b86-92db-d62456b87e7e/review

I’d love to hear your thoughts!