Forum Discussion
Change state of button from Javascript?
Is it possible to change the state of a button to 'visited' or 'hidden' from Javascript (e.g. execute javascript when timeline starts on this slide).
Or do I need to set a variable for each object...
As i show here in this video posted on LinkedIN, this is the approach you can take to change states of buttons and images directly.
https://www.linkedin.com/posts/mathnotermans_tls-tilburguniversity-states-activity-7192818872926773248-79Xm?utm_source=share&utm_medium=member_desktop
As we are working on a tutoring app/website with these kind of advanced tutorials on it. A setup for multiplayer games will be on it too. As will this sample.
Hi Math. That's interesting, though it only works with objects with states, not buttons unfortunately. You can edit the states on a button and set individual accessibility texts for the button on each state (normal, hover, down, etc) but they don't render to the DOM when it comes time to play the story file - a hover on a button for instance won't re-render the button, but change the svg inside it dynamically somehow.
I was able to follow your example and get a non-button based to hide and show. If the states have objects with animations/emphasis, or their own timeline, these things aren't played. So it's hiding/showing , but not changing the actual internal object state.
let base = document.querySelector("[data-acc-text='target-button']");
let divs = base.parentNode.querySelectorAll('div');
for (div of divs) {
if (div.hasAttribute('data-model-id')) { ...Clear, and actually obvious. The internal actions that happen when clicking a normal button probably miss and somehow should be triggered by Javascript. I suspect some CSS class is set when clicking/hovering/enabling a button and that particular class will trigger some action. When diving deep into the buttons i think you can find those classes...and set them to your element, thus making a button of it. ( Hopefully ;-))
A quick test showed that indeed buttons are treated as SVG elements. 2 actually... a SVG-shape for the button as is and a SVG text element for the text. Those are manipulated based on the changes you make in your states. As is...it is good possible to trigger this with the use of Javascript and GSAP. The actions set on the trigger also can be done that way. The question arises though.. whats the plus of doing this...as it complicates things. Easier to create custom buttons then, as you can do anything with them you want ;-)
In some discussion with Jurgen we already noted that default buttons and buttons made by using custom images are quite different setup in Storyline. Why we never found out ;-)
Love this Math!
I should have known that of all us developers... you would have the best chance at a solution! ;)Well done, and thanks for sharing!
