Buttons that know that they've been clicked

[joezeffdesign (Joe Zeff)]

Trying to do something that I think is possible, but I'm looking for help to create the Javascript.

There are eight cards on a page. Each card is a group of stacked PNG files, some of which are not yet visible (0% opacity). The Main Timeline ends with a "black 1" PNG visible in each group.

Each card has its own timeline. Clicking on any card continues that timeline, showing the "red 2" PNG that is on top of what's already visible, then pausing.

Clicking again on any card continues its timeline from its pause state, showing the "gray 3" PNG that is on top of the "red 2."

What I'm looking to do:
Make sure only one "red 2" appears at any time. When a "black 1" is clicked, any current "red 2s" automatically turn into "gray 3s".

How I think I would do it if I knew how to code:
Start each group of cards with class “unclicked."
When a card is clicked, its class changes to "clicked" and its timeline continues to show the "red 2."
At the same time, any other cards that are already "clicked" would continue their timelines, making the "gray 3" visible.

Note, these PNGs are placeholders for content I can't share publicly.

Hype file attached. Looking for help. Thanks in advance . . .

Joe

cardtrick.zip (280.1 KB)

[jonathan (Jonathan Deutsch)]

@joezeffdesign

Trying to do something that I think is possible,

With code, anything is possible .

There's three basic tasks you'll need to tackle to get something like this working:

• getting state
• determining an action
• setting state

Getting State

@joezeffdesign

When a card is clicked, its class changes to "clicked"

Using a class name is definitely way to set/get a specific element state. This is a common web technique because classes are often tied to stylesheets which would modify the element immediately, though in your case you are using timelines. Because of this, other ways to get the state would be to examine the current time in the timeline and compare against a known values for the state, or to use something like the Additional HTML Attributes (data- items).

The bigger question is that you will need to look at all the cards. If you use a class name approach, then you will be looking at individual elements. So some approaches would be to give all these elements another class name that helps identify them to a getElementsByClassName call, or use a Unique Element ID with known numbering semantics such that you could access them by "card" + indexNumber type of code that when looping would result in card1, card2, card3 etc. Likewise you may need this style for looking at or eventually running the timelines.

Determining an action

Ultimately once you have a way to look at the state, you'll need to do basic logic where you look at every element, and determine if it meets your condition.

A simple approach in this very specific case is that you can simply loop through every element, and if it matches a "clicked" state then advance the corresponding timeline. However depending on the needs of your game, it may be required to build up a new array of matches, and then perform an action on this batch.

Setting State

You'll need a correspondence between elements and timelines. In a timeline-only approach or one with unique element IDs, this could simply be an index number.

(If you are using class names, you'll need to store a bit of data somewhere that says what its corresponding timeline name is to advance that one. I'd probably use the Additional HTML Attributes for that.)

The easy part is that you can just use the Hype API to call hypeDocument.continueTimelineNamed(timelineName) and then do the advance.

Anyways, that's the basic primer - let me know if that helps push you in the right direction .