Example

Jonathan_Hill's avatar
Jonathan_Hill
Super Hero
4 days ago

Coin Operated

Hey you guys!

I Never Say Die when it comes to these demos, and following last week's Merge Shapes challenge, I thought it'd be interesting to work with a dial that has holes in it.

There are actually two 'coins' in this Goonies-inspired interaction. It's the same image, initially housed in a slider, then formatted as a dial.

This creates an 'on rails' drag-and-drop, that is fully accessible from the keyboard. (Because when you change the underlying variable of a slider or dial, this also changes its position without the learner having to touch it.)

The first time you see the coin, it's the thumb of an oversized slider.For the main part of the demo, the coin is a dial with a 720 degree radius, a start value of 0, an end value of 20, and an initial value of 10. Each step is 0.10 to create a really smooth action.

 

These Key Press Triggers make the dial fully accessible from the keyboard.

But it's certainly more fun to interact with the coin using a mouse or on a touchscreen. 


Give it a try here.

No RepliesBe the first to reply

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.