Launching an action after buttons are selected in a particular sequence

Hi Hype Community,

I’m interested in creating an interactive experience in which a users can do the following:

  • press a sequence of buttons followed by “submit” which launches an action.
  • press a different sequence of buttons following by “submit” which produces a different action;
  • and so on …

Therefore, I’d need to have a library, then I’d need to have the following options:

  • if A + B + C + Submit is pressed, then X action is launched;
  • if C + D + A + M + Submit is pressed, then Y is launched.

The attached image provides some context. It provides a map of all possible sounds/phonemes in English.

If the sequence of

  • If /b/ + /a/ + /t/ + SUBMIT is pressed, then an overlay with audio + text + images is presented
  • If /b/ + /a/ + /t/ + /m/ + /a/ + /n/ + SUBMIT is pressed, then a different overlay with audio + text + images is presented.

In sort … if I define each button as a unique identifies, is there a way for a sequence of button pushes to be remembered, which can launch a different action based on the sequence of button selections?

Have you search the site , there are already a few example …

Thanks, Mark,

I’ll have another search. I have solutions for actions launched by single-button pushes as well as drag events, but not a sequence of button pushes (of varying lengths) that launch an action.

Cheers

A couple, there will be more..

( using cascading timelines only )

first set a data-attribute -> data-key for each button. The attributedata should be its key (A,B;C and so on …)

then …

two small scripts.

onsceneload:

hypeDocument.customData.possibleResults = [
	'ABC',
	'BCA', 
	'CAB',
	'AA',
	'BB'//and so on ...
	
	];
	
	hypeDocument.customData.toCheck = '';

onclick for the button:

let currKey = element.getAttribute('data-key');
hypeDocument.customData.toCheck += currKey;

if (hypeDocument.customData.possibleResults.indexOf(hypeDocument.customData.toCheck) != -1){
hypeDocument.triggerCustomBehaviorNamed(hypeDocument.customData.toCheck);
hypeDocument.customData.toCheck = '';
	}

this will execute a custombehaviour whose name is equal to the sequence …

should work :slight_smile:

3 Likes

Hi Eric!

I have used Hans’ above code as the basis for the following -
with a few changes & additions “here and there”…

Project Demo: SequencerDataKey_Hans-JHSv1.hype.zip (29.9 KB)

Live link here.

@h_classen : one thing I could not get to work as written in your code was the following line:

let concatString = hypeDocument.customData.toCheck + currKey;

It always gave just a single character (as per the “data-key”) but not for a whole sequence of clicked buttons. I moved this line to another function “sequenceSetup” where it was simply initialized.

1 Like

Thanks, Hans and Jim,

I’ll work with both solutions and report back.

Eric

1 Like

sry there’s been a mismatch in my code … should have tested before posting :slight_smile: it’s corrected

AND thanks for the detailed example! @JimScott

1 Like

@JimScott @h_classen

Are Custom Behaviours a new feature of Hype 4.0?

I see this ability in my trial version of 4.0, but not in 3.0.

well it seems to be pro version feature:
https://tumult.com/hype/documentation/#behaviors

to explain:
the feature will allow you to do most of your setup without scripting.

of course it’ll be also possible to script such whole workflow/project, but i assumed you’re not a scripter …

That’s correct to assume. While I have some scripting experience, the Custom Behaviours is easier for me to grapple with.

I have the solution working in a proof-of-concept form, but I’ll continue working through it before sharing.

Thank you for all the help.

2 Likes