Setting focus to text entry box in Storyline

Dec 19, 2012

Hi.  I think I know the answer to this, but I need to ask to make sure.  I'm updating a simulation of a mainframe data system, originally recorded in Captivate six years ago.  To correctly mimic the system, I need the focus of the screen to be on the text entry box from when the timeline for the slide starts, so that the student can input the data without clicking on the text entry box.  In searching the forums, I found a similar query regarding Quizmaker, and this functionality was not supported in that program.  I'm guessing that Storyline won't support it either.

90 Replies
Crystal Horn

Hey folks! I'm happy to let you know that we just released Update 12 for Storyline 360, and you can check out the new features and fixes here!

Specifically included in this version is a fix to address some issues with data entry fields:

  • Data entry fields that should have focus when slides load weren't immediately accepting learner input.
  • Text entry fields didn't always have scroll bars when learners entered overflowing text. 

Simply update Storyline to the latest version and republish your project to see the fix. Here's how updating Storyline 360 works.

I'm happy to hear how you make out!

IT Econometrica

Hi Alyssa,

Thanks for replying. That does indeed work, how very odd! And very good to know.

I was testing in Articulate Review. It didn't occur to me that Review might be interfering with the keyboard focus, since it didn't interfere in Chrome or Firefox. Clearly, that's what is happening here. You can see the interference in action here:

https://360.articulate.com/review/content/f2c6519b-81f2-4513-b6b9-a6421e519bbb/review

Thanks again for your help -- when using this type of trick in the future I'll test outside of Review.

Michele Brooks

Should a data entry field be at the top of the timeline, or at the bottom for this automatic focus to work.  I have the latest version of Storyline 360 installed and some of my slides allow immediate input, and some seem to require 2-3 clicks before the user can enter data.  I need them to be able to click once and input data.  I'm on a Windows 10 machine.

Stuart Gilbert

Hi to everyone - I hope this thread is still alive.

The tips above - (1) putting the background on a slide master, and (2) moving the text entry box to the bottom of the timeline - so that the focus of the screen is on the text entry box from when the timeline for the slide starts, enabling the student to input the data without clicking on the text entry box are great tips and they work fine for me. However, . . .

If the user enters the wrong string, I present them with a feedback layer that says "Wrong text" and has them click OK, which hides the incorrect layer and in effect sends them back to the base layer. But once that happens, the focus/cursor is no longer at the beginning of the text entry field; the user has to click in the text entry box in order to enter the correct text. This would not happen in the actual system that I am trying to mimic - it would give them an error message but put their cursor back to the beginning of the field.

Does anyone know of a solution where an incorrect entry (followed by incorrect layer feedback, where I also clear the text entry by setting it to blank, thus removing their incorrect text string) will put the cursor back to the beginning of the text entry box? 

I hope I have explained that well enough. Any pointers would be welcome.

Thank you!

Ashley Terwilliger-Pollard

Hi Stuart,

Instead of using a layer, could you use a new slide? That slide trigger when they answered incorrectly could be to "Jump to slide (previous slide)" and if the slide properties are set to "reset to initial state" that should allow your text entry setup to take focus. 

Hope that helps, and if you're still stuck share a copy of your .story file here with us so that folks in the community can take a look and offer other ideas!  

Michele Brooks

Thanks, Ashley,

I did try using the text box click to a new page action on this during my initial attempts. I hadn't adjusted the slide properties this way, though, and all it did was set up another click requirement prior to doing the text entry. This was another step away from the reality I was attempting to simulate. I ended up reverting to Captivate, for this project which meant starting all over again because I couldn't extract my images from Storyline. I'll take another shot at it when I get a chance.

Kind Regards,
Michele

Leslie Thurogood

Great that Storyline 365 has an update that addresses some of the challenges of setting where the focus appears on a slide - will the same functionality be included in Storyline 3

what about mobile stories where there is no Tab button to press - anyone have a recommendation for moving easily between input boxes (text or numeric) - I have 3 numeric input boxes and would like the focus to start in one then move when the enter key pressed

Alyssa Gomez

Hi Leslie!

Back in March 2018, we released Update 3 for Storyline 3. In that release, we included a fix for this issue: Data-entry fields didn't have focus when slides loaded in HTML5 output, so learners had to click inside them before entering text.

It sounds like you've got more than one text entry field on a slide, and you want learners to input text on a mobile device. Learners will need to tap each field to type in the input boxes, since there isn't a way to automatically move from one field to another. 

Amy Harry

It looks like this is now a problem when viewing the course in Chrome. And it seems spotty since it worked in my same course previously. This time, in both Review and a local web publish, a bunch of text fields don't get the flashing cursor. I opened the web version in IE and they all worked.

What appears to be happening is that the text field itself isn't present at all. I can't click into it to enter text.

Is there a fix to have this work in other browsers?

Antje T.

If you are using Fill-in-the-blanks slides

My colleague wrote a piece of JavaScript for me that focuses directly on the text entry field. Note that this works if you have a single TextEntry field on a fill in the blanks question slide, I do not know if it works for NumericEntry.

setTimeout(function(){
var inputs = document.querySelectorAll('.shown input[type=text][role=presentation]');
console.log('n',inputs.length)
if(inputs.length) inputs[inputs.length-1].focus();
}, 90)

 

I put it in the trigger 'Execute Javascript when timeline starts on TextEntry'.

Dave Cox

I know that this may be an old topic, but I just had a need to do this, so I went back to my old notes to see how I got it to work. You don't have to put your elements on a master slide. Put them in the slide like you would any other slide.

To get the text box to receive focus, place the text box on a layer by itself. When you want to activate the text box, just activate the layer where it lives.

You can do it when the slide starts by setting a trigger to activate the layer when the timeline starts. You can then place anything that you want on the base layer, and the text box will receive focus when the layer that contains it is activated.