Example

Jonathan_Hill's avatar
Jonathan_Hill
Super Hero
27 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.

3 Replies

  • I always love seeing what you come up with Jonathan_Hill​! I can see this idea working in different contexts, too, like a combination lock or telescope situation. If you are open to it, this might be a good one to post in Share Examples for more people to see, especially if you're willing to share the .story file.  

    PS: We’ll also be featuring this in an upcoming ELH Weekly Newsletter!

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.