You should be able to add an “Else If” conditional case to the interaction code you have to test if the cards are correct (a match). By default, when you add a case the condition is “Else If True” so you can just add an action of Set Panel State to State1.
If this doesn’t make sense to you, perhaps you could post your .rp file here. Even an abstracted small sample of how you’ve set this up could help your fellow Axure users help you quicker.
What I’m envisioning you have is something like a bunch of dynamic panel “cards” where State1 is the back of the card (face-down) and State2 is the front (face-up), and the default state for all cards is State1. The goal is to match two cards by clicking two cards with the same front (State2 value) in a row. So each dynamic panel card can have the same Click or Tap interaction code with this basic logic:
- If I am face-down and I am the first card to be clicked, or turned over, turn me face-up and note this fact.
- An easy way to do this is change the value of a global variable.
- Also, if I am the first card turned over, note the value of my “front”.
- You can also use a global variable, and even take care of both facts in one. Let’s say you’ve created a global variable named, “FirstCard” and it could either be null (blank) or have the value of a card’s State2 value. For example, maybe your State2 has a widget with a numerical value, like 1, 2, 3, etc. If the value of FirstCard is null then this is the first card to be turned over and it can set FirstCard to the value of its State2 widget, say “3”. Otherwise, if FirstCard equals “2” then another card must have been already turned over (and this card does not match the first card turned over.)
- Else, if I am the second card to be turned over, compare my value with the first card’s value.
- Compare my widget in State2 with the value of the global variable, FirstCard.
- If the values are equal, I’m a match for the first card. Keep me turned over to State2. (And maybe increase a “match counter”, move us to a “done” pile, etc.)
- Else if the values are not equal, turn me back over to State1. (And maybe turn all other cards over to State1 to reset everything, depending on how you want the game to be played.)
In Axure interaction code it would look something like this:
Click or Tap
Case 1, first card
If state of This equals State1 and value of FirstCard equals “”
Set Panel State of This to State2
Set value of FirstCard to [[LVAR1]]
// …where [[LVAR1]] is a local variable pointing to the text value of a widget in State2
Case 2, second card but error no match
Else if state of this equals State1 and value of FirstCard does not equal [[LVAR1]]
Set Panel State of This to State2
Wait 3000 ms
// …or however long you’d like to wait to show value of second card, where 1000 ms = 1 second
do something else to indicate “not a match” error_
Set Panel State of This to State1
// …and maybe set all cards to State1 to reset to default.
Case 3, second card with a match
Else if state of This equals State1
Set Panel State of This to State2
// …and maybe for good measure:
Case 4, just turning first card face-down again
Else if True
Set Panel State of This to State1
If you have a small amount of cards you could reasonably have each card (dynamic panel widget) use the same interaction code logic, testing itself against the value of “the other” card, via the FirstCard global variable. If you are learning programming I think there is value in trying this first to get a better feel for how it works. But, that’s more typing and/or copy-pasting, and if you discover a bug or need to add/remove certain things (e.g., keeping the first card turned face-up or not on an error, keep track of number of turns, etc.) then you have to change the code for each and every card. The more cards you have the more cumbersome this becomes. It would be nice if you had an executive function (or subroutine) that each card could call, simply saying “I’ve been turned over and here is my value.” Then leave it up to this executive function to keep track of first vs second card turned over, are they a match, how to handle it, etc. such that you have one place only for the “complicated” interaction code. Axure doesn’t have a built-in way to do this, but you can do it fairly easily in a number of ways. The basic approach is to trigger an event of some widget, like the Click or Tap of a hidden button or rectangle, or maybe change the state of an empty dynamic panel. In your situation, making a dynamic panel with two empty states could be an elegant way to handle things. If it is in State1 then no cards turned over, else if it is in State2, a card must already turned over so test value of this new card to first card. Then, clicking a card could simply turn itself over and set the card-checking panel to the next state–using the “Wrap from first to last” option.
Another method is to use a Repeater widget, because when you break this scenario down, you have a set of widgets (dynamic panels as your “cards”) that are repeated–they all have the same basic things: a face value (to be matched), the ability to turn itself over when clicked, the ability to know if it is the first or second card turned over, the ability to test its value against a card already turned face-up. If you’re not familiar with Repeaters, this is a more advanced but more elegant and efficient way to handle sets of repeated things.
I won’t get into the details of these more advanced methods for now, but if you want help with them, reply here and let me know–and again, attaching your .rp file makes it quicker and easier to help.
