JavaScript when scene is loaded but is not active anymore if another function is played

Using JavaScript with Hype
1

Hi

I have a JS that is waiting so that a condition is met while users are playing with the interactive animation.

bm-capture- 2021-02-06 à 17.15.27

The users may click some buttons that will trigger some actions. But if they click a series of buttons, then a function will make a logo appear.

It turns out that because a button triggers an action, the JS loaded with the scene that I wanted to monitor the situation (and is triggered once a condition is met) becomes not active anymore.

Trying to solve the problem, in each button's function we added a call to the monitoring function but it does not work.

So what we did is that for EACH button of the scene, we added a second function and it's the monitoring function. That way, when people are clicking on buttons, each time the monitoring function is loaded.

bm-capture- 2021-02-06 à 17.15.39

Is there a way to have a JS being active all the time, not forcing us to add this monitoring function for each button?

Thank you.

2

i guess you just mixed things up... could be scopeproblem ... means you setup a variable in one function that is not accessible in another function
a samplefile would bring more info as the description does not really explain what has been done ...

3

I can't share the file. An email where I can send the file?

4

If it is the reason Hans is mentioning it is a good way to thinking of variable scopes like a directory/folder structure (and in the beginning Flash ActionScript 1 was like that). If you define a variable with var or modern with const or let (like var a=1;) it is only valid in the function itself (and descendants declared there). If you don't define a variable directly (a=1;) it will be created in the global scope called window in the browser. If you want to create a variable that is present across Hype functions use the hypeDocument object ("folder") to add them in. The hypeDocument Object ("folder") is passed into every Hype function. But there is a small problem … you could be overwriting hypeDocument API functions if you pick some of the few keywords ("subfolder") that it reserves. But mainly if you are aware of them your good to go, and you can "extend" Hype with your Hype document wide functions and variables. Tumult has also introduced a predefined object in hypeDocument called customData ("subfolder") that is always completely empty, and you can define variables in there as you please without even considering any reserved words.

hypeDocument.myVariable = 0;

or the even safer

hypeDocument.customData.myVariable = 0;

1 Like
5

I'm not sure why your current approach doesn't work (probably specific to the code), but in general if I were to add an automatic monitoring function, I'd probably do by adding a mousedown or mouseup handler on the document object. (click probably won't correctly as Hype's Mouse Click events aren't don't use the click event type). This must also match on the element. Then this method can filter on the element and do something. If you want to prevent it from continuing the event, you would use stopPropagation().

Basic idea to put in the head html:


<script>
function monitor(e) {
  if(e.target.id == "someID") {
    if(something == true) {
       e.stopPropagation(); // don't send it to the element
    } else {
       // do something else
    }
  }
}

document.addEventListener('mousedown', monitor, true); // last true is useCapture to make sure it happens before it goes to the element
</script>
1 Like