Creating a Correct Order For Buttons To Be Pressed?

Animation
1

Hello! I’m creating a puzzle for an interactive story I’ve created.

My project will be an object with six parts and six corresponding buttons on the page. When each of the six buttons is pressed, one of the six elements will begin to move/rotate.

That part I’ve almost got down (sorry, new user.)

My question… What do I need to do so that the page will redirect/transition to a new animation if the six buttons are pressed in a predetermined correct sequence?

Any advice or direction would be greatly appreciated. Thanks!

2

There might be some ridiculously clever solution to do this without code, but most likely the easiest way is with a little JavaScript. My general approach would be to make an array of the ordering you want, and then a pointer to the index of that array that represent where you are at in the sequence. If the button click corresponds to the item, then you increment the index. It would look like:

	
	// IDs of buttons as assigned in the Identity Inspector and reflects the correct hit order
	if(window.clickOrderIDs == null) {
		window.clickOrderIDs = ["button4", "button2", "button1", "button3"];
	}
	
	// keeps track of which button we're on
	if(window.currentClickIndex == null) {
		window.currentClickIndex = 0;
	}
	
	// saftey check to make sure to do nothing if we're done.
	if(window.currentClickIndex >= window.clickOrderIDs.length) {
		return;
	}
	
	// determine if it was a correct click
	if(element.id == window.clickOrderIDs[window.currentClickIndex]) {
		// increment which item we need
		window.currentClickIndex += 1;
		
		// if there's nothing left, do a specific action
		if(window.currentClickIndex == window.clickOrderIDs.length) {
			// your code goes here... sample:
			alert("combo unlocked, you've saved the world!");
			window.currentClickIndex = 0; // go back to start to do again
		}
	}

I made a little project including this:
ClickOrder.hype.zip (19.0 KB)

2 Likes
3

Based on what you have described, here is a solution for you.

###The logic###

When you click on a button you need to record which button it is and if it's been pressed at the right time i.e in sequence. If it has you need to record some way of keeping that state. You then need to repeat this through all of the button clicks until you have done all six. After all six have been pressed you want to check the sequence and if it's right then play an animation and if wrong .....??

I'm not sure of the reason for this.

###A Solution###
You will need to get your hands a little dirty with Javascript and creating functions in Hype. :slight_smile:
Thinking of the logic above you're gonna want to run some conditionals:
Is this the first button? If it is ... is it in the correct sequence? etc.

What I would do is run the same function on click of each button and store the buttons in an array (a sort of list in Javascript) that I can check against another array (with the right order).

    if (typeof tempOrder == 'undefined'){
		tempOrder = [];
	}
	
	var id = element.id;
	
	if (!tempOrder.includes(id)){
		tempOrder.push(id);
		hypeDocument.setElementProperty(element, 'opacity', 0.5, 0.4, 'easeinout')
		element.style.pointerEvents = "none";
	} else {
		return false;
	}

###Notes###
A little more info is needed in order to be more precise with an answer.

###Update###
Just a document that includes my approach :wink:
ClickOrder-vDBear.zip (20.5 KB)

1 Like
4

This is fantastic, @jonathan, thanks so much. I’m new to Hype but I’m sure this will put me on the road. Much appreciated.

5

Much apprappreciated @DBear. I assumed it would require code, so I just need to get my head around it. Thanks for the guidance!

6

No Worries. I updated the post above with a doc so you could see it in action too. :wink:

1 Like
7

Thanks a lot, I didn’t realize you’d also asked a question in your response. The device is supposed to be a sort of clockwork so that each button triggers a piece to move, but if not in one of the correct sequences the entire moving animation slows down and stops. I’m jumping in the deep end trying to learn Hype as I build something so involved, so your advice and example are very appreciated.

1 Like
8

There maybe be a way to also do this in Hype using the age old method of shielding. This coupled with the button's display ( visible / hidden ).

This Simple project shows 6 buttons.

5 of the buttons have a Ellipse on top of them. The shields. ( kept with a border so you can see them in the demo )

You cannot click a button if a shield is on top of it.

Clicking button 1 moves buttons 2's shield. This allows you to then be able to click button 2.

To stop the user going back and clicking button 1 which in most cases and certainly in this one would interfere with how you want things to work. We simply have button 1's display go from visible to hidden.

This makes it impossible to go back. Because button 1 disappears.

The sequence can then proceed in the sequence you layout on the timeline that controls the moves and display.

This is a single timeline that controls the buttons display and the shield moves at the same time.

Screen Shot 2017-05-13 at 10.40.58.JPG1492×1062 158 KB

Note I have placed the elements in groups. If you do this make sure each group's ignore all pointer events is checked.
( The group object, not the elements inside ).

button_sequence.hype.zip (24.9 KB)

1 Like
9

As with @MarkHunte I sensed a challenge ;->

My approach differs significantly from Mark's... Demo Project: BtnOrder_JHSv2.hype.zip (19.7 KB)
Demo here.

There are four buttons in a group. The buttons themselves are not triggered - the group responds to a click (more on this in a moment).

There is a "hot button" that overlays other grouped (inert) buttons at any given moment in the timeline. This is the "correct answer" button. In the demo this "hot button" is colored as a blue translucent overlay - in actually use this "hot button" would have an opacity of "0".

There are two timelines - the "Correct Order" timeline and the (surprise!) "Incorrect Order" timeline. These timelines have a "pause" every half second (you would want them tighter in actual use for faster response).

The project opens and You will see the "Two" button with the blue overlay "hot button". When this "hot button" is clicked both the "Correct Order" timeline and the "Incorrect Order" timeline advance one half second.

If a wrong button is selected (One, Three, or Four in the grouped buttons) just the "Incorrect Order" timeline advances one half second, the "Correct Order" timeline is not advanced. This repeats with every incorrect choice.

So if You are keeping score at home - the ""Incorrect Order" timeline always advances no matter which button is clicked. The "Correct Order" timeline only advances when a correct (hot) button is selected.

On the last click - if the correct sequence has been chosen (up to that point) there will be a "special overlay button" (in pink - the final choice) that if selected takes You to the "Correct!" text box in the "Correct Order" timeline. As with the blue overlay "hot button" this pink color is used for visual assistance in this demo. In regular use the "special overlay button" would have 0% opacity.

Otherwise wrong choices follow the "Incorrect Order" timeline to the "Incorrect" text box.

This explanation will make more sense when You look at the demo project.

EDIT: I have discovered an inconsistency with a certain click pattern: Clicking the "One" button four times in a row. Other buttons treated this way do not seem to have an issue, nor do any other patterns I have run through. I won't have time in the near future to investigate - but I think You get the principle here.

2 Likes
10

Whoah. Ingenius. Still trying to get my head around all of this but that’s a really interesting way of making this work.

1 Like
11

@comalloy

Glad You appreciate genius! :thumbsup:

I found the solution to the problem click pattern - which I mentioned in the last paragraph (EDIT:) of my first post. No point in going into the solution as words would just convolute matters. Suffice it to say it appears to be working properly and have experienced no issues to date with repeated random trials or the original problem pattern.

BtnOrder_JHSv3.hype.zip (19.7 KB)

12

I think a better solution would have been to use a different scene for each button, with only one button active in each scene.

It’s important when you force a user to have a particular sequence of operations that the user knows what to do and can’t be left to think that it’s possible to press buttons out of sequence. Usually I would accomplish this by dimming inactive buttons.

13

@pauland

Hi Paul!

Actually, this was just a “thought experiment” not intended to be a complete (or even partially complete) UI. Among other things there are not any instructions on this stand-alone page as to its purpose or what the user is supposed to do with these buttons. The idea was to design a non-javascript solution that could track and discern the nature of button clicks and report a result. That’s all.

14

That’s OK. If you segway between scenes using the buttons, it can be a code-less way to achieve the effect that you wanted. Or so I thought.

If buttons have to be pressed in an order you have a sequence and that can lend itself to multiple scenes navigated in order.

I have also done similar things with a single scene and using the timeline - clicking a button advances the timeline to the next stage.

15

Greetings,

I am doing a similar quiz however I do not require the 6 buttons to be press in sequence order.

How do I code so that after all 6 buttons were pressed randomly, an alert such as “well done, you have spot all 6 correct answers” be generated?

Please assist :grimacing:…

16

This is not something you need to code. But if you want to change the clicked elements properties then coding would be more efficient instead of individual timelines.

The initial way is to use a number of Pause timeline actions and use the on click action ‘continue timeline’ with them to continue, pause, continue , pause until the timeline reaches the last timeline action that will run another timeline that runs the alert.

button_none_sequence.hype.zip (20.6 KB)

17

Thank you very much!!! Appreciate the prompt assistance!!

18

What would you do if you wanted a different actions to be enacted when the buttons were clicked in different orders?

So you wouldn’t necessarily have a “correct” response. Instead, you would have a number of “if, then” phrases.

If buttons pressed in x order, then y.
If buttons pressed in a order, then b.

I have attached a “Phoneme Map” Hype as a “proof of concept” literacy app. I’m interested in users pressing “buttons” in a range of sequences. Each valid sequence would prompt an audio recording and/or text prompt of the word that is made up of the sequence of phonemes. This may make sense when exploring the attached Hype document.

E.g. If /b/ + /short a/ + /t/ were pressed, then “bat” audio and/or text would occur.
E.g. If /m/ + /long a/ + /l/ were pressed, then “mail” and/or “male” audio and/or text would occur.

How would I alter the code to allow for different actions to be prompted by buttons being pressed in different orders?

Phoneme-Map.zip (1.5 MB)

19

Have a look at this, It is a solution for multiple answer selection and reactions.