Polyfills and Articulate storyline...

Hi everyone, 

I've got a unit where there's a text entry field in a software simulation. What we'd like to do is have the user fill in the text entry field and automatically progress to the next slide (i.e. without losing focus or pressing a certain keystroke). At the same time, we've designed it so that they get feedback if they get any entry keystrokes wrong, they get feedback. 

I didn't see any way of doing this natively within storyline. For example, if the answer was "Nick", then entering "Nick" would progress to the next slide (if you lost focus or pressed enter, which we didn't want). Feedback would only come if the answer wasn't Nick after losing focus, pressing, enter, etc. I'm not a coder, so I had a friend write the following javascript to execute this. They did it in their lunch break (and now they're away) but it does the trick in Chrome. Every time the user clicks the wrong keystroke, they get feedback if zs_correct is false and as soon as they get it right, then auto-advance when the storyline variable moveToNext changes to true. 

document.addEventListener("keydown", keyDownTextField, false);
var p = GetPlayer();
var answer = "Nick";
var zs_correct = true;
var textValue;

function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}

async function keyDownTextField(e) {

var keyCode = e.keyCode;
if(keyCode !== 13) {
await sleep(300);
textValue = document.getElementsByTagName("input")[0].value;
console.log("text val is: " + textValue);
console.log("length is: " + textValue.length);
var currentLength = textValue.length;
var currentLetter = textValue.charAt(currentLength - 1);
var correctLetter = answer.charAt(currentLength - 1);
console.log("current letter is: " + currentLetter);
console.log("correct letter is: " + correctLetter);

if (currentLetter.localeCompare(correctLetter) != 0) {
p.SetVar("zs_correct", false);
} else {
p.SetVar("zs_correct", true);
if (textValue.localeCompare(answer) == 0 ) {
p.SetVar("moveToNext", true);
console.log("Entered the same as answer");
}
}
}
}

However, my understanding as a non-coder is that the Promise function isnt' supported by IE 11 and testing in SCORM cloud reveals that it doesn't work in IE11. 

Is there a way to use https://cdn.polyfill.io/v3/url-builder/ to get around this? My thought was that the callback would be to the sleep function and I'd tick the promise polyfill to get the following URL:  https://polyfill.io/v3/polyfill.min.js?callback=sleep&features=Promise

I'd then put it in the index file <script src="https://polyfill.io/v3/polyfill.min.js?callback=sleep&features=Promise"></script>  under the header. However, this didn't work. 

I've also tried using SetTimeout instead of the promise function, but I just don't know any coding to get it right enough to work. 

Does anyone have any thoughts? 

Nick