Problem With Triggering A Group

1

I’m having a lot of trouble figuring out something that I know is relatively simple. I have 3 colored boxes each with their own timeline where they individually fade out. The problem is that I want, after each box has been tapped (faded out) that it would then trigger a fade out of a group of circles. I want the user to choose which ever box they feel like tapping on and then following the user, tapping on all 3 boxes it would then trigger the disappearance (fade out) of all circles. See Hype doc attached.

Any help would be greatly appreciated! Square and Circles.hype.zip (22.1 KB)

2

Hi Mark!

One possible solution…

Attached Hype Project: Square and Circles_JHSv1.hype.zip (19.1 KB)

In the “Head HTML” of this document I’ve added the following code:

<script> fullCount = 0; </script


Next I added a JavaScript function “checkCount”:

fullCount = fullCount + 1;
	if (fullCount == 3) {
	hypeDocument.startTimelineNamed('circlesFade', hypeDocument.kDirectionForward);
	}

When the Hype document opens, the script in the “HTML Head” runs and the variable “fullCount” is initialized with a value of “0”.

Each time You click on one of the squares it runs the appropriate timeline to make it fade, and then runs the function “checkCount” which adds “1” to the variable “fullCount”. When the third square is clicked (doesn’t matter which one) the variable fullCount is set to 3 and the timeline “circlesFade” starts to run.

Note: I did not use the “Main Timeline” for fading the circles, but rather its own unique timeline (“circlesFade”). You could though run the “Main Timeline” instead if You rather have that way.

Also, if You wanted to have four (or more) elements required before running a timeline just adjust the number in the “checkCount” function to “4” (or whatever) instead of “3”.

1 Like
3

Thanks for your detailed answer. I tried to import the html and java code over to a different project but it didn’t work. I retitled the group name and info to match the code and still didn’t work for some reason. Is there a simpler way to do this without having to use code? I don’t have much experience with html and java code unfortunately.

4

you can duplicate the buttongroup twice. on each click show an upper one and the third buttongroup would run the circletimeline. more elements, more work, but should do …

5

Another non JS possible way by adding a new timeline called ‘ticks’. Each square-click continues this timeline where it pauses until it hits the action that starts the fade-out timeline.

Square and Circles_non_js.hype.zip (24.5 KB)

1 Like