Only move on once user has completed 3 actions

[eugener2418576]

I have a query.

I want to create a 'scene' where there are 3 buttons. Once the user has, and only once they have clicked all 3 buttons may they move on to the next segment.

Wondering how I should go about doing this. I'm experienced with javascript so I could write an if/else statement but wondering if there's another way to do it.

Thanks in advance.

[Fumio Nonaka]

How about this way?

var done = 0;

// button 1

done |= 1;

if (done >= 7) {

     console.log('completed')

}

// button 2

done |= 1 << 1;

if (done >= 7) {

     console.log('completed')

}

// button 3

done |= 1 << 2;

if (done >= 7) {

     console.log('completed')

}

[ClayUUID]

https://forums.adobe.com/people/Fumio+Nonaka  wrote

How about this way?

var done = 0;

// button 1

done |= 1;

if (done >= 7) {

     console.log('completed')

}

If your goal is excessively clever, hard-to-maintain code, this would indeed be the way to go.

Come on man, it's 2018. We can afford to use three variables to track three buttons. We're programming for browsers, not embedded microcontrollers.

[Fumio Nonaka]

Simple code vs easy-to-maintain code are sometimes tradeoff.  In this case three buttons are working together.  I don't think using three separate variables is the way to go in 2018.

const buttonTracker = {
    completed: 0,
    buttons: [],
    add(button) {
        this.buttons.push(button);
        return this.buttons.length - 1;
    },
    complete(index) {
        this.completed |= 1 << index;
        this.done();
    },
    done() {
        if (this.completed >= 2 ** this.buttons.length - 1) {
            console.log('completed');
        }
    }
}
this.button0.id = buttonTracker.add(this.button0);
this.button0.addEventListener('click', () => {
     buttonTracker.complete(this.id);
});

[ClayUUID]

Are you familiar with the expression "over-engineered"? That whole thing could be replaced with something much less enterprisey, like:

function checkComplete(btn) {
    this.btnsClicked = this.btnsClicked || [false, false, false];
    this.btnsClicked[btn-1] = true;
    if (this.btnsClicked.every(function(b){return b})) {
        // complete, do the thing
    }
}

Then each button event handler just calls checkComplete(1), checkComplete(2), etc.

Also, your code fails in IE11, which doesn't support fat-arrow functions. IE11 still has almost 12% of desktop browser usage, so web developers can't ignore it.

[Fumio Nonaka]

Your code is equivalent to the following.  The total number of buttons, three, is still fixing.  And the sequential numbers for the buttons should be given.

function checkComplete(btn) {
     this.btnsClicked = this.btnsClicked || 0;
     this.btnsClicked |= 1 << (btn - 1);
     if (this.btnsClicked >= 7) {
          // complete, do the thing  
     }
}

I meant 2018 contains the current syntax.  Arrow functions and shorthand notation of methods are based on ECMAScript 2015.  And the exponentiation operator (**) was added to ECMAScript 2016.

[ClayUUID]

What is your obsession with bitwise operators? Using bitwise operators in JavaScript for anything other than manipulating binary data is Doing It Wrong. Maybe if you had hundreds of thousands of buttons to keep track of it would make sense to pack their states into bit fields, but for three it's pointlessly cryptic.

To an amateur programmer (the target audience for this forum) it is completely non-obvious why the code is comparing btnClicked to 7 when there are three buttons, and they would have no idea what to change that to for higher numbers of buttons. That's why this is a bad solution.

[Fumio Nonaka]

I have no obsession with bitwise operators.  My first code was just an idea of fewer lines.  When I revised it I kept the part which does not need to be changed.  Then I showed functionarity of bitwise operation was the same as an array in your code in this case.

As you insist bitwise operation might be a little complicated for beginners.  But it is not very difficult to see its functionarity.

this.btnsClicked |= 1 << (btn - 1);
console.log(this.btnsClicked.toString(2));

Of course those who do not want to use it may ignore my code.  On the other hand someone might be interested in the operation.  For example it is useful to manipulate color value.  I have no reason to stop them to learn it.

For beginners you had better use if statement instead of the logical operator.

// this.btnsClicked = this.btnsClicked || [false, false, false];
if (!this.btnsClicked) {
     this.btnsClicked = [false, false, false];
}

Anyway further discussion will be no use.

[JoãoCésar · Accepted solution]

Hi.

Two approaches I'd like to suggest.

this.check = function(e)
{
     if (!e.target.selected)
     {
          e.currentTarget.count++;
          e.target.selected = true;
     }
     if (e.currentTarget.count == e.currentTarget.children.length)
          this.gotoAndStop(1);
};
this.stop();
this.container.count = 0;
this.container.on("click", this.check, this);

This one is easier and more dynamic. You can have any number of buttons. But you must put all of your buttons inside of a container and this container cannot have objects other than the buttons.

OR

this.count = 0;
this.totalToGo = 3;
this.check = function(e)
{
     if (!e.currentTarget.selected)
     {
          this.count++;
          e.currentTarget.selected= true;
     }
     if (this.count == this.totalToGo)
          this.gotoAndStop(1);
};
this.stop();
this.button0.on("click", this.check, this);
this.button1.on("click", this.check, this);
this.button2.on("click", this.check, this);

This one you can use if you need to reference each button separately. And you must specify the total number of buttons that have to be selected.

Regards,

JC

[eugener2418576]

Thank you JoãoCésar!

[JoãoCésar]

You're welcome!