Ensuring that 2 (or more) buttons are clicked before something happens

#1

Hello!
I have worked on several projects in Edge Animate using the below code for setting a condition where something happens only if 2 or more buttons are clicked (in any order).

In the stage I would have add:
sym.myButton1 = 0;
sym.myButton2 = 0;
sym.buttonsAllClicked = false;
sym.totalCheckAll = function () {
if (sym.buttonsAllClicked == false) {
if (sym.myButton1 > 0 && sym.myButton2 > 0
) {
sym.buttonsAllClicked = true;
sym.$(“Something”).show();
}
}
}

And on click of each button I would have added:
sym.getComposition().getStage().myButton1 += 1;
sym.getComposition().getStage().totalCheckAll();

My question is how to implement this in Hype? I can load the code at the start in a script that runs on page load, but am not sure how to change the “getStage” code for each button.

Any help would be greatly appreciated!!!

#2

On Scene load

myButton1 = 0;
myButton2 = 0;
buttonsAllClicked = false;
totalCheckAll = function(){
    if(buttonsAllClicked == false){
        if(myButton1 > 0 && myButton2 > 0){
            buttonsAllClicked = true;
            hypeDocument.getElementById('Something').style.display = "inline"; // display must be hidden
        }
    }
}

on Mouse Click of buttons

myButton1 += 1;
totalCheckAll();
#3

works! Thanks!

#4

Hi DBear,
Thanks for your help above for only displaying an element if certain buttons were all clicked. Now I have another question I am hoping to get some help with. Using the same code above for scene load and button click, I would like something to display if a button is NOT clicked. this is what I have tried but without luck:

myButton1 = 0;
myButton2 = 0;

totalCheckAll = function(){
    if(myButton1 = 0){
 hypeDocument.getElementById('SomethingShows').style.display = "inline";  
    if(myButton2 = 0){ hypeDocument.getElementById('SomethingElseShows').style.display = "inline";  
        if(myButton1 > 0 && myButton2 > 0){
hypeDocument.getElementById('SomethingFinalShows').style.display = "inline";        }
    }
}

Then on click for Button 1 or 2 I would have:

myButton1 += 1;

And on another button click I would run the function:

totalCheckAll();

Any idea how to get this to work?
Thanks!

#5

Actually I figure it out. Here is my solution:
This goes at Scene load:

myButton1 = 0;
myButton2 = 0;
button1Clicked = false;
button2Clicked = false;

totalCheckAll = function(){

 if(button1Clicked == false){
 if(myButton1 < 1){
              button1Clicked = true;
hypeDocument.getElementById('ShowSomething').style.display = "inline"; }
}

 if(button2Clicked == false){
 if(myButton2 < 1){
              button2Clicked = true;
hypeDocument.getElementById('ShowSomethingElse').style.display = "inline"; }
    }
}
#6

actually this did not work…

Anyone have a solution??

#7

Hi Babs!

You’ve shown us code but no context.

e.g. If a button is not clicked but something is going to be displayed - what is the trigger for the display?

Seeing your project would really be helpful! You do not have to present the whole thing - just the part (or an example) that is giving you an issue.

#8

Hi @Babs

Your first set of code is fine but you have an error in the conditional statement.

if (something is equal to something else) {
do something
}
Would be written

if (myButton1 == 0){
	element.style.display = "inline";
}

Also, by adding an @ symbol in front of any users name. We would get notified. Just an FYI

@JimScott he kinda mentions the context in his post. He would have buttons that increase the integer and another that calls the function

Also @Babs, your second code logic seems fine but we wouldn’t know why it’s not working without seeing it in action as there is likely something else that is causing the problem