Scenario Branching and Focus

That is actually a 508 requirement, which makes me think that ELB must have a way to support it. I don't see one, however.

Thank you Carl. Yeah, I agree with you and hopefully I can find a solution for this issue because it is a "show stopper" for all our trainings.

Thanks again Carl. It's a great idea to repost it to Web Accessibility page and hopefully someone will be able to help. I cannot get the training passed the 508 testing until this issue is fixed.

@tmichael9734 , you can certainly do it in JavaScript, but I have never mastered JS in Lectora and can't give specific advice ... and you shouldn't have to, it should be built in.

You might consider reposting in the Web Accessibility area (https://rockstars.elearningbrothers.com/categories/screen-readers).

Just thinking out loud here but could you use a variable and run a JS action.

Something like:

Action On Show: Run JS

triv$('#button1392btn', getDisplayDocument()).focus()

Condition: If variable equals X

where '#button1392btn' is the ID of your button you want the browser to focus on when it returns.

On the last page before the learner returns to the Main list page, set that variable to X.

Have multiple actions based on the variable number set in each section.

Hope that helps

Cheers

Trev

I have attached an example which shows a few different ways to set focus. It can be imported to Lectora Desktop or Online.

On Show actions are used to set known names for the buttons, this helps make the solution portable to other projects where object id's may change.

If you can download the zip file and rename it to SetFocusProject.pkg then you can import the Lectora Online PKG format directly into Lectora on the file tab.

@wheels thanks a lot for the help. I'm getting these messages after following the steps:

What's wrong?

@trog Thank you, I tried your method but it didn't work, but many thanks thoug

@wheels Will it be possible to put down the steps here? I cannot open zip files.

@wheels I'm sorry, hit Post prematurely... Thank you for help and time

@wheels Thank you. You're right, the one you sent me doesn't have the very top action in Pag1 (OnTimedSetFocus). What does that action do? I can add it and test it. It actually runs right only when I publish it, but not in any other mode. Here's my screenshot

Thanks a lot,

Interesting what version of Lectora are you using?

Thank you. I use Lectora desktop L21.

It sounds like you are missing the action that sets mybutton1 in JavaScript. I'm attaching a screenshot of what the Project Explorer should look like. It should work when you go into run mode, is that what you are trying? It's a pretty simple project so I'm not sure what could have happened.

@tmichael9734 I have updated the file attachment with a new one, please give that a try.

Ahh! Thank you @wheels! I did change the script as per advice, but here's the focus route:

1- I select Button 1, go to the branched page and return to list page;

2- the focus goes first to Skip Nav (that's fine) then, after I hit Enter;

3- it goes to Button 1 (again), and then Button 2

When the focus returns to the list page after visiting the branched page, I'm trying to force the focus to go to Button 2, after Skip Nav.

Even when I excluded Skip Nav, still the focus navigates to the header elements after returning to list page. It doesn't focus on Button 2.

I tried both methods.

Many many thanks again,

We are working on an action to set the focus, sorry you have to use JavaScript for this.

That should remain getDisplayWindow().mybutton1 = triv$(%HTMLNAME%.div)[0]; the %HTMLNAME% is resolved when this is published. That way you don't have to fuss with object names.

@wheels, thank you so much for your time and effort to help me, I really appreciate it so much.

I tried to plug in your JS into my project, but I still have no luck.

Here's the way I changed the button name using your script:

getDisplayWindow().mybutton1 = triv$('button18142'.div)[0];

Is that correct? I think this replacement is wrong and that may be causing the error.

Many thanks again!

It actually gives the same error with the button page scripts. I still pasted them on the button page and when I tried to preview it in browser or preview mode, it rendered a blank page.

Yeah, I'm sorry @Wheels for the difficult part, that's why I resorted to the pros :)

When I pasted your scripts as instructed, I'm getting a syntax error (see image), did I miss anything? I actually copied and pasted the script from this post.

Millions of thanks again and again!

That is most definitely the most difficult part, coordinating when and where to set the focus.

Set up a known name in JavaScript for each of the buttons

1. Add an action on Button 1 On Page Show -> Run JavaScript -> getDisplayWindow().mybutton1 = triv$('button',%HTMLNAME%.div)[0];

2. Add an action on Button 2 On Page Show -> Run JavaScript -> getDisplayWindow().mybutton2 = triv$('button',%HTMLNAME%.div)[0];

3. Add an action on Button 3 On Page Show -> Run JavaScript -> getDisplayWindow().mybutton3 = triv$('button',%HTMLNAME%.div)[0];

Set a value into a variable to indicate where the focus should go on return to the page.

1. Create a Lectora Variable named SetFocusTo with initial value of 0.

2. Add an action to Button 1 On Click -> Modify Variable -> SetFocusTo set it to 2

3. Make sure that action on Button 1 is before the On Click navigate to branched page

(repeat this for other buttons)

To set the focus when returning to the button page:

1. Add an action to the button page On Show -> Run JavaScript -> getDisplayWindow().mybutton1.focus(); [condition SetFocusTo is equal to 1] [Delay 1 second]

2. Add an action to the button page On Show -> Run JavaScript -> getDisplayWindow().mybutton2.focus(); [condition SetFocusTo is equal to 2] [Delay 1 second]

3. Add an action to the button page On Show -> Run JavaScript -> getDisplayWindow().mybutton3.focus(); [condition SetFocusTo is equal to 3] [Delay 1 second]

4. Add an action to the button page On Show -> Modify Variable -> SetFocusTo set it to 0

High level that will set the focus based on the value of the SetFocusTo variable when you return to the button page. Hopefully this will give you enough pieces to build your accessible page.

Thank you @wheels. Can you just give me on example of how to add the condition to the JS? I don't think our system will allow me to share a zip file.

Hi @tmichael9734 I think the syntax error is from the button page scripts. The part in [brackets] is not part of the JavaScript, it just is an indicator to put a Lectora Action Condition so that the action to focus an element will only happen when the SetFocusTo Lectora Variable is equal to 1.

Maybe you can post your project here. Go to File -> Export -> Export as Zip and then upload it here.

@wheels , may I suggest you create an example project that uses your code, and let @tmichael9734 copy the working setup in that AWT file?

Thanks @carlfink give this a try @tmichael9734 (see attached Lectora project)

@wheels sounds logic... Some good news, I used your method in another page that has several buttons as well, and the focus worked great. Lots of thanks!

My guess is because the %HTMLNAME% is not valid JavaScript. That is substituted for the parent object's html-name when the title is published/run.

Hurray! Yep this is the one!!! Yes, this solution resolved the issue and the focus jumps like a horse to the next button :) Thanks a lot @wheels for your patience with my request all throughout, and many thanks @carlfink for the suggestion and support.

BTW I have another focus issue with layered text but I'll put it in a separate post later on the day.

@wheels quick question though... while pasting your JS to my title, I noticed that the JS to change the button name has a "wrong" sign (as attached), could I ask what does sign refer to? It confused me when I first pasted it, so I thought it may confuse other people when they apply this method.

Many many thanks again, and wish you both a very blessed holiday season and 2022 :)