Creating a "phone" interaction - Numerical Keyboard to fill in text input
May 19, 2023
I've tried looking at various learning and discussions and I'm not sure if I am just wording it incorrectly. This is what I am trying to accomplish though:
I am creating a training that teammates will need to use a cell phone to do the job. The application on the cell phone requires inputs that pop up the cell phone numerical keyboard only or alpha-numeric.
This training will occur on a computer so I need to create an interactive "phone" within storyline where they press the keys on the phone and it will input the letters or numbers that they click into a text input field. I want to allow free range where they can type whatever they want into the text input field, but they must type the correct information for it to progress.
I have figured out how to make it so goes to the layers I need it to go to based on the input that is put in from the computer keyboard, but I am trying to simulate the experience as close to what they will see when they start the job. So I am not sure how I could go about creating interactive keys on the phone image created in the program that will fill the input field and retain what has already been "keyed" in.
This is the interactive phone I have created in the program, those are the keys that I want them to be able to press and it fills the text input field above it retaining each "Keystroke" and typing it out above them as they press the keys on the phone.
11 Replies
Sounds good, and looks good. I'll bet if you attach your .story file, someone will be able to work with what you have and give you some ideas.
Here's what I came up with.
That is so cool an exactly what I want to happen! Wow! Thank you so much! To make this work across multiple entries would I just need to copy everything and then change the JavaScript line 2 from inputField to the variable for that screen?
Hi Cassandra,
On the Base Layer, there is a Trigger that sets the inputField to the variable that you want to update.
Set inputField to value DriverID when timeline starts on this slide.
Take a look at this attached example. For slide 2, there are two input fields: FirstNameField, and LastNameField.
On Click of the First Name Field there is a trigger that sets the inputField to the variable FirstName.
On Click of the Last Name Field there is a trigger that sets the inputField to the variable LastName.
Ah I see it, tried it out and looks super easy to use and change. Thank you so much! If I wanted to try and create the keyboard area to mimic this setup
Would I just need to adjust the shape name and text display then copy and modify the triggers for one already created?
I would duplicate the Number_Keyboard layer.
Then delete the buttons that you don't need.
Then resize the ones that you are keeping and don't forget to fix up their down state.
Makes sense, thank you again for all your help!
Hello! I have been able to work around any issues that I have had in generally to make sure this awesome feature works, but I have one that I was hoping you could help with a modification. I have a section where we put in numbers, but its numbers with decimals and negatives. The script will allow the numbers to be input into a variable that is a number type, but it won't include the dash or period. If I make the variable a text type it works fine, but then I cannot use the greater than/less than functions with the variable. Is there a modification to make to the script in Insert Character that would adjust for this?
Hello Cassandra,
You could use a javascript trigger to convert the text to a number.
Then you can use the greater than/less than functions on the Converted Number.
Take a look at the attached story file.
Hello Cassandra,
You could use a javascript trigger to convert the text to a number.
Then you can use the greater than/less than functions on the Converted Number.
Take a look at the attached story file.
Worked great! Thank you!