Forum Discussion

CharlotteHasler's avatar
CharlotteHasler
Community Member
10 days ago

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 change the status of an object, but not as soon as I have any other element in a status. However, I have a checkmark or a cross for right and wrong (see screenshot). 

Has anyone experienced something similar and by any chance found a solution? 

5 Replies

  • RickMaranta's avatar
    RickMaranta
    Community Member

    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

      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

        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.