Need help with Creating Random 'Cards' to display complete on a slide in no particular order

Oct 11, 2016

Hi there.

I am in the middle of creating a game type module where the user is presented with 8 'cards' that has a question on each card.  The user needs to click on a card to display the answer (whether correct or incorrect).  Feedback is presented on the same card (used with a layer).  Once the user reads the feedback, the user would then click on the next card until all the cards are read.  This works in a linear fashion (going from Cards 1-8) however I would like to create the ability for users to be able to click the cards randomly or in any particular order (e.g., cards 2,7,3). 

I cannot for the life of me can get this to work.  Originally, I created one slide with multiple layers then tried to simply things and created 8 separate slides that duplicates the 8 cards, so the user can navigate through the different cards.  I created a 9th slide where I began creating variables (True/False) for each card.  Once a user clicks on each card, visits the 3 hidden layers on each slide, the card image would change to complete.  That worked, but if I start at a random card other than card 1, my card one is displayed along with the random card I originally selected.

I've attached the file to give you an idea and started playing with the variables for card 1 and 7.  The variables work and I have created a 'complete' state to display/overlay the original card.  Now, the question is still displaying. 

Hoping someone knows what to do with this sort of thing.  I've been searching for hours and had no luck and my dev window is closing.

 

19 Replies
Tracy Parish

One other way you could create this is the use of states.  Each card could have a normal, complete, feedback, state all on one slide with no layers used at all.  Once each box has been "flipped" to complete then the slide woudl be finished.  

Or each card once clicked shows the feedback layer, then then changes to a complete state.  Still on one slide.

Maybe I'm oversimplifying the problem though?

Dave Cox

Are you just looking for people to go through and click each card to view the correct answer, or is this supposed to be a quiz? 

If this is not a quiz, you can do this on just one slide. To do this, I would put the different states of each box into a State instead of a layer. Then you can update what is displayed by updating the states of the item. Track if each item has been visited by using a variable.

By using states, it won't matter what order the cards are clicked. 

Ben Hunter

I definitely agree with the State changes on a single slide. If you don't need that information to be gathered for future slides then set up some triggers to change stages of whichever aspects you want to change.

I noticed you are using Hotspots. I might recommend trying buttons with or without fill and borders to get the same effect, and you can set your buttons to change states between Normal and Hidden. I use this effect often if I want the "same" button on a slide to have different functions. I will stack hidden buttons and as the states change it seems to the user that a single button has changed functions based on their interaction with the slide. (this can be as simple or complex as you like by getting your timeline order right and incorporating variables)

Good luck!

Ryan Parish

I'm going to echo the sentiment above. I added an example slide to the story file you provided as an example. Using a state/variable combo, you have some super powerful options at your disposal.

Here's the basic idea: 

First, create all of the interaction possibilities as states on each object.

On your first question, "What am I saving for?", you want to provide the response "I want to buy a property" once they click "Select", and then "This question identified your customer's need" once they click "Feedback". Finally, once the learner clicks "OK", you want the card to return to its initial state of "What am I saving for?"

In the attached example, I created states for the Text Box AND for the button. The text box contains states for each possible response, and the button states contain options for each of the interaction types (Select, Feedback, OK).

Next, add a variable to control how and when the states change.

Add a numeric variable and set it to 0. I named that first variable, "Save". 

We know that when the interaction is in the "What am I saving for?" state (the normal state), the button should say "Select". Since this is the default state, this should appear when "Save" equals 0.

When the interaction is in the "I want to buy a property" state, the button should say "Feedback". We want these to appear when the "Save" variable equals 1.

When the interaction is in the "This question identified your customer's need" state, the button should say "OK". We want these states to appear when the "Save" variable equals 2. 

Finally, when the learner clicks on "OK", we want the interaction to reset to the initial states. (The variable should equal 0 again.)

To get all of these changes to occur, we need to add some a trigger to the button associated with the "What am I saving for?" item that will adjust the value of the "Save" variable. 

Add 1.00 to Save when the user clicks.

Then, we need to add a way to reset the value of the variable at a certain point to keep our logic from breaking.

Set Save equal to 0.00  when the user clicks, if Save is greater than or equal to 3.00.

Finally, add triggers to each object to associate the variable with object states.

Here are the triggers that I used, but you may be able to get other variations to work as well:

Question States

Change state of Save Question to Chosen (object state) when Save changes (variable) if save is equal to 1.00.

Change state of Save Question to Feedback (object state) when Save changes (variable) if save is equal to 2.00.

Change state of Save Question to Normal (object state) when Save changes (variable) if save is equal to 0.00.

Button States

Change state of Save - "Select" (button) to 2-Feedback Save (state) when "Save" changes (variable) if save is equal to 1.00.

Change state of Save - "Select" (button) to 3-OK Save (state) when "Save" changes (variable) if save is equal to 2.00.

Change state of Save - "Select" (button) to Normal (state) when "Save" changes (variable) if save is equal to 3.00.

 

____________________________________________________________________________________________________

The cool thing about this is that once you have it the way you want it with one object and button, all you have to do is copy and paste the objects to retain their state properties. That makes it easier build subsequent parts of the interaction. Getting that first object and button right took about 15 minutes (I've done this before), but each of the subsequent objects only took 2 or 3 minutes each to set up the new triggers. 

I hope this helps! Have fun building, and good luck to you!! I'm happy to answer any other questions you have!

 

eLearning Development

The only thing I would add is it depends if you want people to be able to leave and come back and only have to carry on where they left off.  I have found that if I keep things on one slide then resume means that they have to repeat everything.  As I develop for Paramedics who are constantly coming and going in their elearning this is a big issue.  They do not like it when they have to repeat something that they have previously completed.

Jackie Van Nice

Hi Amy!

Thanks so much. :) 

Andre's question above says (about his project): "This works in a linear fashion (going from Cards 1-8) however I would like to create the ability for users to be able to click the cards randomly or in any particular order (e.g., cards 2,7,3)." 

Since the game I created allows users to click on cards in any order, I thought I'd offer it up as an idea. But for what you're looking for, you are absolutely correct: Mine does not randomize the locations of the cards. 

This discussion is closed. You can start a new discussion or contact Articulate Support.