Freeform shortcut key - How to use Tab

Hi all

We are creating a 'what am I' interaction where users read a description and need to choose the correct key on the keyboard. On one slide, the correct key is the tab key. However, when trying to choose the tab key as the correct key in form view, it is not registering and just moving to the next point (like tab would normally do!) Could anyone help with a way around this please. 

Many thanks 

Chris 

18 Replies
Alyssa Gomez

Hey, Chris!

The Tab key functions as an accessibility feature for screen readers. You can turn off that functionality in the Size and Position window, but the tab key will still cycle through objects on the slide from the upper-left corner to the lower-right corner. Could you use another key instead of Tab?

Tell me more about what's going on with Alt + F. Are you using this keystroke in Storyline Preview or after publishing?

We've found that Storyline doesn't detect the Pause Break key. What function are you trying to perform with that key? There might be another keyboard shortcut I can recommend. 

Chris Want

Hi Alyssa 

We are creating an interaction relating to a system which uses keys such as pause break, tab, alt &F7 and F10. We are showing a description on screen and the user is to hit the correct key on the keyboard for the description. I am considering some alternatives to offer, but the sponsor is keen to use this interaction. 

Many thanks 

Chris 

Matthew Bibby

Hi Chris,

Can you please test this demo?

A message should appear when you press Tab, Alt+F or Pause Break.

I'm not sure how reliably it'll work in all browsers (for example, IE likes to steal the Alt+F) or if the Pause Break button will be registered.

But the Tab and Alt+F work fine in Chrome and the default Tab behaviour is being prevented (keep in mind this means accessibility is negatively impacted). 

But if this does the trick, I'm happy to share details on how it was done. 

Matthew Bibby

Okay, here's how I did it.

Add a text variable to Storyline called keypress

Then add an Execute JavaScript trigger to the slide master that fires when the timeline starts (or, if you just need this on one slide, you could just add it to the relevant slide). 

Add this code to the JS trigger:

var player = GetPlayer();
var scope = document.getElementById("preso");;
var options = {
prevent_default : true
};
var listener = new window.keypress.Listener(scope, options);
listener.simple_combo("tab", function() {
player.SetVar("keypress","tab");
});
listener.simple_combo("alt f7", function() {
player.SetVar("keypress","alt+f7");
});
listener.simple_combo("pause", function() {
player.SetVar("keypress","pause");
});

Then, after you publish the course you'll need to edit both the story_flash.html and the story_html5.html files to include keypress.js.

You can do that by opening both of those files in your preferred text editor (e.g. Sublime Text) and finding the line that says:

<script SRC="story_content/user.js" TYPE="text/javascript"></script>

Then, you want to add this code above that:

 <script SRC="https://cdnjs.cloudflare.com/ajax/libs/keypress/2.1.4/keypress.js" TYPE="text/javascript"></script> 

So when it's done, the relevant part of your story_flash.html file should look a little something like this:

And your story_html5.html file should look a little something like this:

Now when the tab key is pressed the keypress variable will change to tab, when aft+f7 is pressed it'll change to alt+f7 and when pause/break is pressed it should change to pause. You can use this change of variable value to trigger stuff in Storyline. 

Here is the demo.

Here is the SL360 .story file.

Note that according to the keypress page "Some keys have unreliable support and should mostly be avoided. Print, Scroll Lock, Pause/Break, and Insert have unreliable keyup or keydown firing in Windows or OS X, so I suggest avoiding them, although Keypress does still allow them."

Hope that helps mate. Yell out if you run into any issues. 

Stephanie Harnett

Hey Matthew. Would you happen to know of any way to prevent the browser from executing keys that are pressed in a Storyline published project? Ctrl+W for example will close the browser window. Is there a way to trap that keypress and prevent the browser from interpreting it and executing it? Thanks for any insight you might have on this. 

Matthew Bibby

Hey Stephanie,

If you do everything I've outlined above (although there is no need to create the keypress variable in Storyline) and replace the JS with the following it should do the trick:

var scope = document.getElementById("preso");;
var options = {
prevent_default : true
};
var listener = new window.keypress.Listener(scope, options);
listener.simple_combo("ctrl w", function() {
});
Stephanie Harnett

Thanks Matthew! I gave that a quick try using the code plus the line of code for the story_html5.html file. It didn't work for the Ctrl+W key in Chrome, Brave, FireFox as it closed the browser window when pressed. Looks like I'll need to dig a little deeper to see if I can trap that key combo.

Sam L

Hi Matthew,

As I was testing, I noticed if a user were to exit the course during the on-screen demo that uses this javascript and select resume where left off, the javascript no longer seems to work and the user gets stuck on a slide. It works fine if you go all the way through and don't stop to exit. Does it lose connection with the javascript on resume?