Fix for buttons not working during transitions?

zliquorman1276

Hello all,

I was wondering if anyone has a fix/workaround for Lectora buttons not registering clicks until they finish a transition effect.

I have a situation where I walk the user through a flow chart, and I have buttons for each step, which start in a hidden state. Once the user progresses by pressing the step's respective button, the next one will become visible (with a transition effect).

Tying Lectora actions to buttons is fine (if a little annoying for the impatient) because it forces you to wait for the transition effect to finish before working, but if you're also tying JQuery actions to these buttons like I am, then it causes odd behavior to the end-user: in my case, a JQuery-created transition animation draws an arrow to the next step in my process flow chart, but the next step doesn't become visible because it was tied to the Lectora onMouseClick action. JQuery doesn't care if the button is finished with its transition effect, as soon as it is "clickable" the code tied to the click listener will fire if clicked.

I know I can work around the issue by forcing a pause in the JQuery action to account for the button's transition, tying the next step's images and button to that same JQuery code, or by creating my own buttons, but this was just one of those situations where I didn't need anything too fancy as far as the buttons went, and just needed a semi-transparent button to highlight that an image was to be clicked to move on to the next step. I was hoping that it would be possible to make a Lectora-button's onMouseClick action work the moment the transition effect begins.

mnotermans5114

Use a Javascript or CSS transition instead of Lectora's built-in ones.

zliquorman1276

Yeah, that's what I ended up doing. I was just hoping I could get away with being a little lazy hah.

mnotermans5114

If you want lazy ;-) use no transition :-)

zliquorman1276

Yeah, but it still needs to be pretty!

 

And that's sadly just incompatible with lazy, it seems.

mnotermans5114

I know a few that are pretty lazy ;-)

klaatu

I'd skip Lectora for this. Build it with a nice library like Flowchart.js and then embed it, if absolutely necessary.

BTW, I'm kinda lazy. I work smart, not hard. ;-)

I'd be interested to see a sample, Zachary, of what you had before you added external transitions.

zliquorman1276

No problem.

The only thing I changed is the text, replaced with generic placeholder content. The tutorial it comes from pertains to a specific medical-research project and is not yet intended to be publicly viewable.

klaatu

Looks nice, Zachary. I would need the awt to poke around, however. No biggie, I was just looking for something to do before starting the next project. If you're happy with the above solution (A good one, if you ask me) you should go with it. I just wanted to see if I can learn something for the next time something similar pops up (they always do).

zliquorman1276

Whoops, totally uploaded the html files only. Here's the .awt