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 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? 

7 Replies

  • LucianaPiazza's avatar
    LucianaPiazza
    Staff
    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
      5 months ago

      This is great news! Thanks so much for working on these fixes and improvements. It really helps us be more creative. 

      Take care

      Rick

  • 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.