Need a little more to understand what’s going on. Like a document or URL. The “prop” is normally for a form so may not work in this case. You may want to change the pointer events to “none” if you want to stop buttons from being clicked.
I want the user to click the number 3 button under the caramels. The other remaining buttons (licorice 4, jaw breakers 4, chocolate bars 5, and lollipops 4) should be disabled.
I cheated by putting a transparent box over the buttons i want to disable. That works fine when using a mouse except when tabbing you can still get to the unwanted buttons, so i really need to disable 7, 4, 5, 4. I hope this provides enough info.
If tab is the only issue you can highlight all your buttons and give them a “tab index” of “-1” in the identity inspector. (CMD-8) or the
This will prevent them from being selected using the tab button.
Failing that, you can run a little javascript that changes the “pointer events” property to none that effectively disables the clicking of the elements. This would take a little more work and using functions to enforce this but I feel the tab index is probably the way to go. If you want to go this route post back and let us know and we’ll post a solution.
Hi. That sounds like a great solution however this needs to be keyboard accessible, so -1 is not an option unless i can set -1 to the other buttons when i click the first one, but restore the tab index when resetting the exercise.
I wouldn’t mind knowing about how to use the pointer event. I am comfortable using functions. That might be the way i must go.
OK. well it may be better to share your doc so it’s quicker to offer the specific solution. If you can’t do that then I could offer something with the hope that you can follow.
quickest is to set all button pointer events to “none” and then change the specific element’s pointer event to “auto” effectively resetting it’s pointer event after the change. Note this will effect all buttons as when created in Hype all buttons have the “role” filled as “button” if you don’t want to include a specific button you can get rid of this attribute in the inspector.
Run this “on click”. Notice the reset button ID. This is an extra button for the reset. Doesn’t have to be a button could be another source.
I tried the code. It works perfectly except i can still tab to the 2nd, 3rd, 4th and 5th buttons. I want to lock down the exercise completely (except for the reset button) after the first button is clicked.
functionality needs:
I am hoping that after the first button (4) is pressed, the other ones to the right cannot be selected. This whole exercise is geared so the student clicks a caramel button and the only other button after that that can be pressed is the reset button (return all candies to bag). The exercise doesn’t need to do anything else.
The part i’m having difficulty with is when clicking the first button, i can still tab to the 2nd one and trigger it’s js. I do need to tab for accessibility reasons though.
p.s. i was able to fake the functionality but it would be nice to know how to do this programatically as i’ll be using Hype a lot. What i did was when button 1 is clicked, the buttons i no longer want are hidden using jquery. I have an identical images of the buttons sitting behind the real buttons i want to disable, so it appears like the buttons are still there, just disabled.
As @MarkHunte has suggested. You can program in the tabIndex to switch also as you disable the pointer events for the buttons. Returning everything back on click of the reset button.
That’s wonderful! thank you for the help. I have learned something new (and hopefully others have too) and can apply it to all my e-learning projects from now on.