Example
Simple Tabs
That’s probably the most accurate way to describe this submission, possibly the most boring interaction I’ve ever produced for an eLearning challenge.
Ironically, it’s built around tabs, which can be pretty useful when done right (keep them simple, clean, and don’t overthink it).
But here’s the twist:
If you manage to stick around for 2 whole minutes, you’ll unlock a reward, a downloadable Storyline file. Because if you’ve got the stamina to survive two minutes of my "creativity," you deserve something.
Inside:
🕒 A global timer built with JavaScript
🎞️ Image transitions powered by the Web Animation API
🎁 And who knows, maybe a surprise or two.
5 Replies
Two minutes is definitely not too long to explore your demo, Nedim . I immediately spotted the interesting detail on the second screen. Thank you so much for generously offering us (as usual) these two golden JS gems. I think I'll have the opportunity to use them in my next client project (as soon as I've finished studying the possible settings). So elegant.
Thanks ThierryEMMANUEL !
I love how the background colour changes when a new selection is made, too! The 2 minutes were totally worth it!
Thank you Nedim
Thanks for sharing this file Nedim! Can you tell me how you get the images to flip to the one underneath when each tab opens. I had a look at the file but there doesn't seem to be an animation on these images.
Hi Mary,
All images are flipped with JavaScript that runs on each slide.If you need any help in setting up your images, please let me know and I’ll be happy to assist. I’m not very active in this community anymore, so if you need me and I’m not tagged, feel free to email me at nedim.ramic@gmail.com.
Getting Started with the E-Learning Challenges
Find practical answers to common questions about the E-Learning Challenges, a weekly event that helps you build skills, create your portfolio, and grow as an e-learning professional.