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.
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
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.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.
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!
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!
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;
}
}
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!
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.
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.
Has anyone came across with this?
Thanks.
I have come across it at the same point you are now....I need to create the computer simulation, but don't know anything about javascript and Storyline. Did you get a solution somehow?
Just saw this post... Did this actually work for you in the past? I have a similar situation and we have been trying to work around with a virtual keyboard but it is just not realistic for our learners...
This community is so AWESOME!!
I had no idea why my simulation would not advance when I'd press 'F2'. I had my trigger correct but it would not work. The advise provided by Lynn Stocks worked like a charm.
NOTE: I'm not experienced with JaveScript either.
Thank you Lynn!
Just helped a colleague with this very issue and Lynn's suggestion worked like a charm. Thank you! Thank you!! :)
Where do you enter this script? I am not fully understanding.
It works! Thanks Lynn. :)
Just a note: if you want to test it, publish to CD format for quickest results.
