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:

1. 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.
2. 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.
3. Plain Flip Grid with Navigation
   A clean, accessible flip-card grid with navigation chevrons.
   Mirrors the deck behaviour but with a simplified layout.

All three examples are linked below, along with the downloadable files.
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.

 

Review360
Zip files GDrive location: HERE