Function Keys Interactivity in Storyline Using JavaScript

Feb 07, 2013

eLearning mLearning
By eLearning mLearning

I am creating simulation for a software in storyline. This simulation has function keys interactivity - F2,F3,F10,F11.

I was able to write trigger code - Jump to Slide when user presses F3 keys.

When I am publishing this project, the function keys are responding to the browser function keys. e.g. when I press F3, instead of going to slide F3, its showing browser's find feature.

I tried to do research on google and articulate forum for how to use functions for simulation its leading me JavaScript.

I understand that I need to use trigger - Excute JavaScript in Storyline.

But I don't know how to write a javascript.

I need JavaScript which will disable browsers function key e.g. F3 and if user presses F3 it should go to the next slide.

I guess I need two JavaScripts; the one which will disable browser's function key, and the other which will assign the user defined function that is go to F3 slide if user presses F3 funciton key.

I know there are tons of website which will give you javascript code. But I find it difficult execute in the Storyline.

I have created an example and uploaded the storylline file in this message.

Please help me to write the javascript in storyline.

Thanks in Advance.

47 Replies
Lynn Stocks
over 10 years ago07/03/13 at 9:53 am (UTC)

I think I may have a solution for you.

go to this website

http://www.quirksmode.org/js/keys.html

determine the keycode for the functino key you want to disable (F1 is 112, F2 is 113 etc)

add a trigger to the slide that needs to have the function key disabled to execute javascript.when timeline starts and enter this script.

 document.onkeydown = function (e) {

        if(e.which == 113){

                return false;

        }

}

changing the number 113 to whatever the code is for your function key,

it really works

Pam Robinson
almost 7 years ago10/05/16 at 4:02 pm (UTC)

I have been struggling with this too and need an assist.  I have created an AS400 step-by-step simulation in Storyline 2 that requires users to press the F4 or F6 key to move to the next slide.  I have executed this javascript: document.onkeydown = function (e) {if(e.which == 115){return false;}} for F4. (I changed 115 to 117 for F6)  They appear to be disabled but they don't advance to the next slide, even when I add a second trigger to jump when the user presses the key.

Any ideas?? My workaround of placing a hotspot over the function onscreen to jump fell flat with my test group because they were able to execute other activities using their keyboard in the training. 

Thanks in advance!

Karen Opperman
almost 7 years ago10/06/16 at 5:02 am (UTC)

Hi Pam, almost all of my work-arounds were successful except for the F2 and F3 for the simulations I created.  In the end I didn't use them, but instead added the follow comment:
"In the live environment, press F2 to continue.  For this example, press Enter."

If anybody else has a solution to this problem, I'd love to know as well!

OWEN HOLT
over 5 years ago01/23/18 at 3:48 pm (UTC)

No need to upgrade, I tested in SL2 and it works there as well. See the attached SL2 file where I have disabled keys F1 through F12 and added an action to each key to show a different layer.

The JS code I used is a series of else if statements:

document.onkeydown = function (e) {
if(e.which == 112){
return false;
} else if(e.which == 113){
return false;
} else if(e.which == 114){
return false;
} else if(e.which == 115){
return false;
} else if(e.which == 116){
return false;
} else if(e.which == 117){
return false;
} else if(e.which == 118){
return false;
} else if(e.which == 119){
return false;
} else if(e.which == 120){
return false;
} else if(e.which == 121){
return false;
} else if(e.which == 122){
return false;
} else if(e.which == 123){
return false;
}
}

OWEN HOLT
over 5 years ago01/23/18 at 3:56 pm (UTC)

This does work, even for F1.  It is a bit tricky, however because, as you pointed out, when you select F1 while authoring, the Articulate help site opens. If, however, you use your mouse to click back on StoryLine in the ribbon, you will see that the F1 key is still selected in your trigger wizard window.  If like me you typically use the alt + tab shortcut to toggle between windows, you will learn that this particular window navigation method replaces F1 with Tab... so be sure to use your mouse to navigate back to SL from the help window.

Chelsea Johnson
over 5 years ago01/23/18 at 4:07 pm (UTC)

I have never been able to get that code to work when I put it in, but could be user error. However if you want to eliminate using java in your program the storyline 360 is the way to go. All I had to do was create a trigger to jump to the next page when user clicks F5 and its good to go! But it is good to know that it is a possibility to get done in S2!

Pam Robinson
over 5 years ago01/23/18 at 6:14 pm (UTC)

I have also been frustrated with that code.  F10, F11, F12 and F1 and F4 always want to respond in the browser. The rest will work fine.  Also, no one has addressed the Shift + Function keys of the extended keyboard (we use all 24 function keys). And Chelsea, I agree with you that it could be user error on my part. My solution was to use a hotspot button to resolve. 

Brandon Harper
over 5 years ago01/23/18 at 6:34 pm (UTC)

Owen - I appreciate the assist on this one. I downloaded the attached file, published, zipped, and sent to tempshare to see how it was working. When I went to the tempshare link, the functions are not working in Chrome. It does look like this will work in Internet Explorer with the one note that you added about F1. Every time F1 is selected, the player does perform the action within the course, but it also opens help in Internet Explorer every time. I was happy to see how this works without issue for all of the other F-keys! THANK YOU!!! Every other attempt I had just didn't work. 

Brandon Harper
over 5 years ago01/23/18 at 6:37 pm (UTC)

Chelsea - If the function keys are all working for you with 360, that is amazing! When you publish your files, have you tested this function in Chrome and Internet Explorer? Our learners are split about 50/50 between these two browsers. With what Owen has helped with, it worked on IE, but not in Chrome. Additionally, with the F1 selection, does it open help? I sincerely appreciate any info you can provide on this. 

OWEN HOLT
over 5 years ago01/23/18 at 7:42 pm (UTC)

I'm using chrome and it works for me. Cross browser support is always tricky.
Try this code as an alternative to disable all of the function keys instead of what i listed before and see if you get a better result:

document.onkeydown = function (e) {
    var key = e.charCode || e.keyCode;
    if (key >= 112 && key <= 123) {
    e.preventDefault();
    } else {
    // non function key so do nothing
    }
}

See attached SL2 file with alternate code.

Sign In to Reply