Forum Discussion
Function Keys Interactivity in Storyline Using JavaScript
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.
- kristinahard226Community Member
Just found this thread, and I'm in the same position. Writing training for a mainframe system and have to use the F1 - F9 keys. As someone already stated, F1 opens the Articulate help site, and F2 doesn't work at all.
Has anyone found a solution to this yet?
- OwenHoltSuper Hero
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.
- ChelseaJohnson-Community Member
Hello!
I was wondering if anyone had found some javascript that worked for making function keys work?
Thanks!
- BCHarperCommunity Member
I have driven myself beyond crazy trying to find a way. I just don't think it's possible. I have settled with having to maintain a "virtual keyboard." Not very realistic, but most of the learners seem to be able to follow along just fine. Wish there was a better answer :-/
- ChelseaJohnson-Community Member
Hi Brandon! I was able to get them to work with Storyline 360. It does stink that you have to upgrade to the newer version to get those to work but once I did it worked great!
- BCHarperCommunity Member
Woah?! What?! Can you give me some more details on this, please?!
This may be helpful for my organization to have an incentive to get the upgrade to 360!
- OwenHoltSuper Hero
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;
}
}
- ChelseaJohnson-Community Member
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!
- BCHarperCommunity Member
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.
- OwenHoltSuper Hero
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.
- PamRobinson-a55Community Member
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.
- OwenHoltSuper Hero
Pam, Did you look at my SL2 file? You can see it working for F1 through F12. I haven't looked at or tested the Shift + keys yet.
- OwenHoltSuper Hero
SL360 version of the above code attached below. Also has layers for the Shift + Functions.
See it in action: Link to Demo
Tested on Chrome and MS Edge.- WGillCommunity Member
Hi Owen,
Thanks for working on this a few years ago.
It looks like the .story file you sent worked when using a classic player but when using the modern player the F11 key doesn't keep the browser from maximizing/minimizing it's window.Do you happen to know of a different solution to this question?
I appreciate your time.
Thank you.
- michelleeamesCommunity Member
I have to confess when I did this I created a fake keyboard at the bottom of the screen with the F keys. :-)
- StuartGilbert-5Community Member
My comment is in respect to a fairly old thread, I know. I just want to say thanks to those who contributed and especially to Owen for supplying the .story files. I am about to do a simulation of a mainframe system that uses F-keys and it looks like the information supplied in this thread will really come in handy - and make me look really good in the process. ;)
Thanks again to all.
- StuartGilbert-5Community Member
I am building a course that mimics a mainframe system (HIMR) and I am experiencing some difficulties with what I will call "non-standard" keys. For instance, I need the learner to input a text string with a Tab key; another example is using a combination of keys (Shift+F1) to perform an action.
I have loaded a test version of the course to the LMS for testing, and I am not only getting incorrect results, but their actions differ from one browser to another.
I won't go through the trouble of uploading my .story file here unless this thread is still live. If it is, and if someone might be able to lend a hand, it would be greatly appreciated.
Thanks
Stuart Gilbert
- BCHarperCommunity Member
Stuart - For my part, I could only get Chrome to work properly. I ended out Putting a disclaimer at the beginning of the course that you must complete the course with Chrome. Since then I haven't had any learners with issues.
- StuartGilbert-5Community Member
That's exactly what I didn't want to hear. :) It sounds like it's exactly what I will have to do as well.
Thanks very much for letting me know.
- BCHarperCommunity Member
Someone else may be better able to find another solution or understand, but the explanation I found was something to do with the coding of IE. the Javascript will not override IE's functions; whereas, Chrome is able to support the override.