Explore the community Forums Lectora Lectora Questions & Answers Fix for buttons not working during transitions?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #392056 Score: 0
    Profile photo of Zachary Liquorman
    Zachary Liquorman
    Member
    beginner
    intermediate
    friend finder
    profile
    curious george
    wise owl
    contributor
    picture perfect
    8 pts
    @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.

    #392075 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    119 pts
    @mnotermans5114

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

    #392082 Score: 0
    Profile photo of Zachary Liquorman
    Zachary Liquorman
    Member
    beginner
    intermediate
    friend finder
    profile
    curious george
    wise owl
    contributor
    picture perfect
    8 pts
    @zliquorman1276

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

    #392084 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    119 pts
    @mnotermans5114

    If you want lazy 😉 use no transition 🙂

    #392101 Score: 0
    Profile photo of Zachary Liquorman
    Zachary Liquorman
    Member
    beginner
    intermediate
    friend finder
    profile
    curious george
    wise owl
    contributor
    picture perfect
    8 pts
    @zliquorman1276

    Yeah, but it still needs to be pretty! 😉

     

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

    #392103 Score: 1
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    119 pts
    @mnotermans5114

    I know a few that are pretty lazy 😉

    This post has received 1 vote up.
    #392105 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    200 pts
    @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.

    #392161 Score: 0
    Profile photo of Zachary Liquorman
    Zachary Liquorman
    Member
    beginner
    intermediate
    friend finder
    profile
    curious george
    wise owl
    contributor
    picture perfect
    8 pts
    @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.

    #392164 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    200 pts
    @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).

    #392166 Score: 0
    Profile photo of Zachary Liquorman
    Zachary Liquorman
    Member
    beginner
    intermediate
    friend finder
    profile
    curious george
    wise owl
    contributor
    picture perfect
    8 pts
    @zliquorman1276

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

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.