Forum Discussion
Up-Updated "Reveal" codes
I’ve been experimenting with the original HTML code blocks included in Articulate 360’s built-in examples and wanted to share how far you can extend that base structure using GenAI to iterate and refine interactions.
Starting with the default image-reveal index provided by Articulate, I used GenAI to progressively develop three new versions. I supplied my own images, created meaningful alternative text for screen readers, and introduced additional UX and accessibility improvements. Every version is fully tailorable if you want to adapt the formatting, colours, spacing or behaviour.
The three examples are:
- Enhanced Image Reveal Grid
Uses the original Articulate structure.
Adds a hover zoom, a click-to-zoom state, and high-contrast purple letter tiles for accessibility. - Fanned “Deck of Cards” Flip Interaction
A dynamic fanned layout, more like a real card hand.
Cards lift and reveal their letter on hover, flip on click, and reset if clicked again.
Includes chevron navigation for easier cycling. - Plain Flip Grid with Navigation
A clean, accessible flip-card grid with navigation chevrons.
Mirrors the deck behaviour but with a simplified layout.
NOW WITH MORE EXAMPLES of what reveal styles can imagine!
If you have suggestions, improvements or alternative approaches, I’d really love the feedback.
And if you’d like to use or remix any part of this, feel free — I’d love to see what you create with it.
13 Replies
Thank you for the feedback, Samantha. At the moment, the zip files are wrapped in HTML code, so you would need to unpack the HTML code and edit the various functions and visuals, then repack it.
Still working on a configurable version in the browser, but it's a challenge to do that without the editing option being visible in any final published SCORM
Hey Dan, these look awesome thanks for sharing! Question - how do I customize these once I get them in a course? I uploaded the zip file using a "code" block and got the cards into the course, but I was unable to customize them from there.
Podrías compartir el código?
Yes I'd be more than happy to, reach out to me on LinkedIn at https://www.linkedin.com/in/daniel-boyland-577b6476/LinkedIn or contact me via mailto:dan.boyland@forgedframeworks.co.uk
Sí, con mucho gusto. Puedes contactarme a través de LinkedIn en https://www.linkedin.com/in/daniel-boyland-577b6476/ o escribirme a dan.boyland@forgedframeworks.co.uk.
This is amazing! Thank you for sharing your work!!
You are more than welcome, and I appreciate you commenting. If you haven't already done so, feel free to repurpose and reuse
Any queries, feel free to reach out here or on LinkedIn
Love this idea! Thank you!!!
Thanks for saying so and leaving a comment on the Review comments, feel free to reinvent and apply, happy creating 🤗
Very nice!
Thank you for sharing :)You are welcome
Hi JoCousins-4f348 hmm oddness, something playing up with the ethernet gremlins, I'll see if I can attach a file in the chat here as editing the post isn't allowing me to upload
GDrive location: HERE
Let me know if you have any joyAwesome, thanks Dan 😀
Thanks for sharing! I couldn't see a downloadable file though and I'd love to play around with the fanned 'deck of cards'. Would you mind sharing, please?
