Forum Discussion

CharlotteHasler's avatar
CharlotteHasler
Community Member
6 months ago
Solved

Change states with JavaScript API

Hey, I have some self-made quiz slides with what feels like 1000 triggers. Now I wanted to tidy things up a bit with the new JavaScript API. The problem: If I have figured it out correctly, I can...
  • LucianaPiazza's avatar
    LucianaPiazza
    5 months ago

    Hi, all!

    I have some great news to share! We just released a new version of Storyline 360 (Update 100), which included a fix for changing object’s state with a JavaScript trigger that didn’t work if any of its states had more than one object.

    To take advantage of this update, launch the Articulate 360 desktop app on your computer and click the Update button next to Storyline 360. You'll find step-by-step instructions here.

    Please let us know if you have any questions by posting here or reaching out to our Support Engineers directly.

RickMaranta's avatar
RickMaranta
Community Member
6 months ago

Hi Charlotte, can you clarify what you mean by this: "but not as soon as I have any other element in a status". Maybe you can also paste in the code you are using to change the states?

  • CharlotteHasler's avatar
    CharlotteHasler
    Community Member
    6 months ago

    Hi Rick,

    I mean that it works when the states are simple, e.g just different colors of a rectangle. But not with my object (as you can see in the screenshot) where the states are combinitions of the original element (big circle image) and any other elements (the circle with the dot/checkmark/cross). 

    The code I'm using is

    const element = object('5h3uWmD8bag');

console.log("before: " + element.state);
element.state = "Richtig";
console.log("after: " +element.state);


    And the result is very interesting because it seems like the state is changed internally but doesn't show:

     

    • RickMaranta's avatar
      RickMaranta
      Community Member
      6 months ago

      Interesting. Here is what I suspect is going on. It looks like you have additional graphics in the state (for example the checkmark under "Richtig". It's possible that Storyline is ignoring the additional graphics beyond the main one in the state (which could be a bug). I would try combining it into one image in the state and see if that fixes it. If it does, I would report a bug and see if they can improve that feature to show all graphics when you change the states using JavaScript. 

      (Update)

      I tried it out and you can see that the second and third buttons don't work but the first one does because it has only one image in it. I have also noticed that states made from shapes don't work either. You can see it here. https://360.articulate.com/review/content/cb7c5ed8-4855-478a-8693-a8749f10bc7c/review. I have attached my source file so you can see. I have submitted a bug report, but the workaround is to create only one image (PNG) for the states.

      • CharlotteHasler's avatar
        CharlotteHasler
        Community Member
        6 months ago

        Thank you for testing and for submitting the bug report :) 

        I also tried with states made from shapes and it worked. So, I just looked in your file and found a typo (reactangle instead of rectangle). 

        I will think about using the workaround. The problem is that I'm designing a template for my team and it's way more work to use that template when having to create and upload 4 images for each of the elements. But it might still be better than having 1000 triggers with many chances to fail something :D