Storyline Mobile: Number Pad (Code and sample file)

Recently in the G+ Articulate Storyline Group David Carollo asked about forcing the number pad for data entry on mobile devices.

This is something most mobile applications and sites have started doing. It makes sense; save the user time by opening the keyboard they need.

But Storyline doesn't seem to follow this model. In fact all data entry fields in Storyline's HTML5 output are 'text'.

I tried a few methods and found a solution:

• First we use jQuery to find all the input fields on the screen. 
• Then we alter each field that SL has designated for numeric entry. 
• For each field we add an expected text pattern, change the type to number, and override any non-numeric entry.

I put all this into a few lines of JavaScript so that we run it with JavaScript trigger at the beginning of any slide we want to. You can grab the code from my blog here.

Something to note is that most desktop browsers will add a 'spinner' to field. Users will be able to click up/down to add/subtract the number.

You can test it on your mobile device here.

Download my sample story file here.;

Watch the video to hear a more detailed explanation.