Forum Discussion
Trigger for Text Entry to Play Screen Recording Action
I am working on a simulation in which I need the screen recording action to play when a specific number is entered into a text entry field. I don't want the user to have to click anywhere else, as the screen recording shows a dropdown populating from the text entry field. I cannot use the "When the user clicks" trigger because the text entry ends in 3 and there are 2 other 3s in the number.
You're missing one closing brace for the second if block.
Here’s the corrected code with proper closing braces:
const Inputs = () => { const inputs = document.querySelectorAll('.acc-textinput'); inputs.forEach((input) => { input.setAttribute('maxlength', '10'); input.disabled = false; input.addEventListener('keyup', () => { let text = input.value; if (text.length === 10) { if (text[8] === '4' && text[9] === '4') { setVar('valueCorrect', true); console.log('Valid number: Correct placement of 4'); } else { console.log('You must enter the correct Provider NPI.'); setVar('error', true); // setting storyline variable 'error' to true after invalid entry input.disabled = true; // disable number after invalid entry } } }); }); }; setTimeout(Inputs, 100);
I’ve attached a simple example for you. The JavaScript code is included inside. This code validates a number field based on the following conditions:
1. The number is limited to 8 digits.
2. The 2nd, 6th, and 8th digits must be the number 3.
I’ve put some basic explanation in the code itself. Let me know if your slide has more than one number/text entry, so the code can be adjusted to specifically target the number entry in question. Hope you find it useful! For any further assistance, you know where to find me. :)Nedim, I'm trying to replicate what you did using slightly different criteria and a different result. I used a 10-digit number, and the 9th and 10th digits must be 4. The resulting action is the slide transitions to the next slide. This isn't working. Can you take a look?
You're missing one closing brace for the second if block.
Here’s the corrected code with proper closing braces:
const Inputs = () => { const inputs = document.querySelectorAll('.acc-textinput'); inputs.forEach((input) => { input.setAttribute('maxlength', '10'); input.disabled = false; input.addEventListener('keyup', () => { let text = input.value; if (text.length === 10) { if (text[8] === '4' && text[9] === '4') { setVar('valueCorrect', true); console.log('Valid number: Correct placement of 4'); } else { console.log('You must enter the correct Provider NPI.'); setVar('error', true); // setting storyline variable 'error' to true after invalid entry input.disabled = true; // disable number after invalid entry } } }); }); }; setTimeout(Inputs, 100);
Hello Shannon,
I'm happy to help! You can use an adjust variable trigger to play the screen recording when the TextEntry variable changes. Add a trigger condition to set the number the learner needs to enter to execute the trigger. Please see the screenshot below from the attached Storyline project file.
Let me know how it goes, and I'll be more than happy to assist further.
Hi, Eric! Thank you for the reply. I used that trigger, but the user has to click off of the text entry box for the trigger to work. I need it to happen when they type the last number, not when they click out of the box.
What would I need to input as the user for this to work? Would typing "333" fulfill the criteria, where entering the number 3 for the third time triggers the screen recording to play?
It’s actually an 8-digit number, but the 2nd, 6th, and 8th numbers are all 3, so I can’t use the keystroke trigger.
This solution involves JavaScript because I don't see another way.
Ok, never mind. I just saw your new post. Why not validate a whole number instead and use a number field rather than a text field? You could also limit it to an 8-digit number. This would also involve JavaScript.
It's definitely doable. Here's how it could look using JavaScript with number entry instead of text entry. Let me know if this solution works for you, and I'll gladly help you set it up. I understand not everyone is comfortable using JavaScript in their projects. I just don’t see another way to achieve this at the moment. Adding functionality to show an "error" layer would require a few more tweaks, but it’s not essential for this to function as intended.
Nedim, yes, I knew it would require JavaScript, which I’ve never tackled but am interested in learning. I am thinking it would require writing the script for the specific number or requiring the user to enter an 8-digit string ending in 3. The second option wouldn’t require the exact number, but the nature of the simulation would result in users typing the right number even if the entire thing isn’t specified in the script. I have used a workaround for now, as I needed to meet a deadline, but I would love some guidance on an actual fix for future projects, as I am likely to encounter this again.
