How to create a phone passcode interaction

Dec 01, 2021


I'd like to create an interaction where users must press a specific combination of buttons to reveal a layer. If they input the incorrect password, a different layer is shown.

I'm sure this is possible but it's got me stumped. It would be great if the buttons are required to be selected in the correct order but that's not a deal breaker.

I'd like the interaction to look like a phone passcode screen (see attached image for a rough mock-up).

Thank you for any help  anyone may be able to provide.


5 Replies
Phil Mayor

if you don't need a 0 the you could create a numeric variable (passcode) then for each button add the triggers

multiply passcode by 10

add the value of the button to passcode (e.g. if button one add 1)

Then if you have a submit button you add a trigger to do your action on condition it is equal to the passcode (could be stored in a variable).

Or if you want to do it after 4 presses, then you need a count variable as well (buttonPresses) and add a trigger to each button to add one to buttonPresses

Then add a trigger to do something when button presses if button presses is equal to 4 and passcode is equal to your value.

I would also store the value to be checked in a variable so it is easy to repurpose.

However if you want a 0 in the passcode in particular the first value then you would need to use javascript to concatenate the value and use a text string instead.


Stuart Samuels

Hi Phil.

Thank you for such a detailed explanation. I followed your guidance and thought I'd cracked it but unfortunately the submit button doesn't behave as expected. I've attached the story file  with a hope that you may have time to investigate where I've gone wrong.

Thanks again,