Forum Discussion
Change Text Entry Variable without control losing focus?
Hey both. It's great to know this code is generating ideas. :-)
Array.from(document.querySelectorAll('.acc-textinput')).forEach(el => {
el.addEventListener('keyup', () => {
console.log('someone is typing in a box...');
el.blur();
el.focus();
})
});
'Blur' and 'focus' only triggers a 'when object loses focus' event in Storyline. It doesn't do anything else. So you must accompany this code with the aforementioned trigger on your slide—otherwise it won't do anything.
The reason why I came up with this code is because the built in trigger in Storyline only triggers ordinarily when a learner clicks on something else on the slide after typing into the box. This is often impractical for creating certain interactions—such as a function where you want to check what someone has typed while they're doing it.
The above code works for a slide where there is one or more text entry boxes.
If you only had one text entry box, and you wanted to analyse what someone has typed while they are typing it, you could use the code below. It's a type of search I suppose. You wouldn't actually need blur and focus with this example, because we don't need to trigger a 'when object loses focus event in Storyline. 'JavaScript can do the work and simply update a variable in Storyline directly. const player = GetPlayer();
document.querySelector('.acc-textinput').addEventListener('keyup', (e) => {
if (e.target.value.toLowerCase().includes('secret')) {
player.SetVar('secretFound', true);
}
});
This code works as follows. Every time a key is pressed, the code runs. It checks what is typed in the TextEntry box by looking for a word or phrase—in this case 'secret'. If it finds it, it sets a variable inside Storyline to 'true' (boolean). A trigger in Storyline makes a layer appear when it detects a change in that particular variable ('when a variable changes');
I've attached the Storyline file should you wish to play around with this bit of code. Change the value in quotes after 'includes' to whatever word you want.
You could theoretically do any analysis in JS of what someone has typed and then set a variable in Storyline to trigger something to happen—whatever you want.
Hi Simon,
Thank you so much for keep giving updates. I'm trying something similar to it using NumericEntry. But not sure how to find the class. How and where do we find the class of an object?