Forum Discussion

ZsoltOlah's avatar
ZsoltOlah
Super Hero
10 years ago

Changing state directly from JavaScript?

Hello Heroes!

Maybe someone out there can help me out! I've been playing with JavaScript and Storyline, you can see an example here: http://bit.ly/1IjNEKs. 

But, what I can't figure out is how to access an object directly from JavaScript. I would like to change the state of a graphic from JavaScript.

In the example above, if you launch the course with adding ?test=Confused at the end of the URL link, and go to Chapter 3, the character will show the confused state. But essentially, I'm changing a variable first, which leads to a trigger to change the state. If I want ten different states, that's ten more manual triggers. 

What I'd like to do is change the character's state directly. Any thoughts?

storyline 360
  • MathNotermans-9's avatar
    MathNotermans-9
    Community Member
    8 months ago

    Here you can see a video of it working.
    https://www.linkedin.com/posts/mathnotermans_tls-storyline-articulate-activity-7192804804962734080-CuGq?utm_source=share&utm_medium=member_desktop

    This code does the work.
    let baseElement = document.querySelector("[data-acc-text='myElement']");

    let parent = baseElement.parentNode;
    let allDIVS = parent.getElementsByTagName("div");

    showState();


    function showState(){
            for (let i = 0; i < allDIVS.length; i++) {
            let dataModelID = allDIVS[i].getAttribute('data-model-id');

            if(dataModelID != null ){
            if(i==0){
                allDIVS[0].classList.remove('hidden');
                allDIVS[0].classList.add('shown');
            }else{
               allDIVS[i].classList.remove('shown');
                allDIVS[i].classList.add('hidden');
            }
            }

        }
    }

    As said in the video... the way you make your states matters !

Related Content