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, then set a watch on the variable within storyline to set the state of the matching object when the variable is set a certain way (e.g. goes from 0 to 1)? Because that will get complicated fast.
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!
I think, as is often the case, after a couple of days of fiddling and talking about these problems, I come back to intending to never using buttons again. I keep falling into the trap of using their shorthands when fleshing out ideas and then trying to fix the shortcomings - rather than just building things directly. So much of my interfaces is now built on javascript/gsap/css hacks injected to address Storyline shortcomings that I start to wonder if it's the right tool for me anymore. But it integrates better with Rise - and I use that integration a lot.
That all said, when you have to build certain interactions like "Show layer X when the state of these 5 buttons is all Visited, unless condition Y has already occurred", and the state of some of those buttons only changes after Javascript executes a lookup in a LRS to see if a peice of data exists, then I have to juggle watched variables to trigger the state changes. This is when I wish I could just change object states directly from javascript. And then I step back and say "Why am I making this so complicated?"
I wish there was an Articualte technical community forum.
Completely agree with you....and i seldom use default buttons in my projects. Most of the times make them as i want/need them from images or SVGs.
As i donot use Rise due to lack of flexibility in Rise, at some point i switched to Lectora. Similar problems exist in that tool, but alltogether i prefer it above Storyline. Combo of Javascript/GSAP/CSS and several third party JS-libraries makes switching back and forth between Lectora and Storyline for projects not too hard. Biggest difference is the element selectors and SVG implementation.
Tim, I don't know of anyway to do this via javascript. From Javascript, we can alter a lot of the actual Player buttons etc, but not the content buttons within our courses directly.
...I think variables are you're only hope! Argh! :)
Yeah so far the only way I've got is to make a variable and use Player.SetVar() from javascript, and put a trigger in (change state of .. set state to .. when variable changes). I can kind of "bus" the variables to multiple states by using an if condition to check for specific values in the variable, but i was really hoping to be able to grab a reference to the object, e.g. setting an object identifier, which I can set through the accessibility option, then refer to from javascripting using document.querySelector("[data-acc-text='my-object-id']"); ... but there aren't any methods that I can find that tell the object to change its state directly.
I'll consider the answer to my own question as "No, set and watch Variables".
