Only move on once user has completed 3 actions

Participant ,
Sep 04, 2018 Sep 04, 2018

Copy link to clipboard

Copied

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.

Views

790

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Sep 05, 2018 Sep 05, 2018
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 contain...

Likes

Translate

Translate
Most Valuable Participant ,
Sep 04, 2018 Sep 04, 2018

Copy link to clipboard

Copied

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')

}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 05, 2018 Sep 05, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Most Valuable Participant ,
Sep 05, 2018 Sep 05, 2018

Copy link to clipboard

Copied

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);

});

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 05, 2018 Sep 05, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Most Valuable Participant ,
Sep 05, 2018 Sep 05, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 05, 2018 Sep 05, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Most Valuable Participant ,
Sep 06, 2018 Sep 06, 2018

Copy link to clipboard

Copied

LATEST

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 05, 2018 Sep 05, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 05, 2018 Sep 05, 2018

Copy link to clipboard

Copied

Thank you JoãoCésar!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 05, 2018 Sep 05, 2018

Copy link to clipboard

Copied

You're welcome!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines