Background object appearing in front of "Selected" state

Hello, I am trying to create a flashcard interaction with four cards that appear on a slide. When each card is clicked, I have a "Selected" state created for each that enlarges the card and shows the back of it with the term's description. I am running into an issue where the first two cards are appearing in front of the selected state of the third card. I've selected to "Dim background objects" for the state and it appears as it should when previewing it in the States panel.

I've attached a few screenshots of the set up and issue I am running into.

Is this as designed? Any insight would be much appreciated!
3 Replies
Alyssa Gomez

Hey Jennifer!

First off, I love the design of that slide! Those colors are šŸ‘ŒšŸ‘Œ.

TheĀ 5LĀ andĀ OCL cards are appearing on top of the selected state ofĀ 7TL because they are higher on the timeline.Ā 

To avoid this problem, I would use layers instead of states. Add the enlarged card and the transparent gray background to a layer, and show the layer when the user clicks the card.

You can even add a trigger to hide the layer when the user clicks theĀ transparent gray background (anywhere outside the card).

Let me know if you'd like some more help with that set-up!

Jennifer Choe

Thanks so much for your response Alyssa and forĀ the positive feedback :)

I was going to initially use layers to display theĀ back of the card, but I have a total of 20 cardsĀ that I'd like to keepĀ on the same slide displayed on 5Ā separate layers. The reason for this is that, I need a way to indicate whether aĀ card is "mastered" or needs more practice which I am doing by adding the checkbox below each card. I've associated a variableĀ to each cardĀ with an intial value of "False" and changes to "True" if the checkbox is selected. After all sets of cards are viewed, the learner will click the "Submit" button on the last layer which takes them to a duplicate slide with all of the cards/checkboxes displayed with an initial state of "Hidden". The cards/checkboxes are changed to a "Normal" state if the variable for that card is equal to "True" when the timeline for the duplicate slide starts.

Would something like this still work if I had a total of 25 layers on one slide?

I've adjusted the cards to display only three to a slide and set up the initial slide/duplicate slide with the appropriate variables/triggers as an example.

Would love any additonal thoughts/ideas on how to set this up as well, thanks!