Concentration Game - created exclusively with Captivate

Intro

Another challenge popped up on the user forum:
"I am trying to recreate the Classic Concentration game. Does any one have any ideas how I would do this in Captivate?"
You can read the full thread here: How would I create the Classic Concentration Game?

And I tried to realise this exclusively with Captivate functionalities: no widgets, no ActionScript. There are of course limited functionalities as I will explain at the end. I have been using the possibilities of hiding/showing objects a lot in this example. For this reason I recommend reading a previous post about this subject: 

In this blog post you'll find the global concept of the sample movie. Later on I will publish a companion article that will explain the advanced actions in depth.

Example movie

Play with this SWF to get the feeling of the game. Only two games are available but the number of images can easily be extended without too much trouble. Have fun.
 

Work Flow

You'll find here the same subjects I explained in my previous post Look before you leap where I tried to give you a detailed view of my preparing brainstorming; the 'Leap' portion (construction of the advanced actions) will be treated in the article:

Situations - Slides - Events

Here are the situations that can occur in the game:
  1. Choice of a challenge: either Europe or North America will have consequences later on, so I'll need a variable
  2. Clicking a first card, content of card will be showed, has to be remembered (by user and by the game), so I'll need a variable
  3. Clicking second card, content will be showed and remembered (variable)
  4. Game has to compare the content of both cards (duo): correct/incorrect will have different consequences/branching
    1. correct: cards are removed (image visible based on choice), game has to remember this 'duo' was correct, next action of user 
    2. incorrect: cards are again turned, next action of user
  5. User can choose to guess: answer can be correct/incorrect
    1. correct: congratulations, game ended
    2. incorrect: next action of user

This game has only 5 slides (see also Advanced Interaction View in Gallery),and you can check the timeline of the slides in the Gallery images:
  1. Intro: is the welcome screen, where the user can choose between North America and Europe (for the hidden image) using two buttons. This slide is reused, after a wrong guess of the user (situation 5) he is navigated again to this slide (hence two text captions).

  2. Game: is the most complex slide, with tons of objects, and most objects are timed 'For rest of project' which leaves them with one unique ID; the click boxes on the 'cards' are triggering advanced actions that will show the cards, and there is a Guess button that navigates to slide 4. This slide will be explained more in detail later on.

  3. Second: to have more events for triggering actions I used this second Game slide that will appear after the user has chosen two cards to reveal and with the timing 'For rest of project' it has the same game objects; the user will be able to read the Success/Failure captions, and proceed with a Next button which returns him to the second slide Game.

  4. Guess: when the user has clicked the Guess button on slide 2, this slide is presented; it has the same game objects as on the two previous slides, and a Text Entry Box that will be validated. If the answer is correct, navigation is to the last slide, if it is wrong, navigation is to slide 1 Intro.

  5. End: shows the image totally even if not all cards have been removed, a relevant text caption depending on the image and a Text animation; this slide will only be reached when the user has guessed the answer correctly.
Events used to trigger actions, slide and object events:
  • Enter of first slide Intro to show/hide buttons and Text Captions: advanced action EnterIntro
  • Buttons on slide Intro (Europe/North America): advanced actions Bt_EU Bt_NA
  • Button 'Next' on slide Intro (only visible on second visit) triggers simple navigation to next slide
  • Enter of second slide Game: advanced action EnterGame
  • Click boxes (12) on slide Game: advanced actions CB_11, CB_12.... CB_34   (location in label: 34 = 3rd line, 4th position)
  • Button 'Guess' on slide Game triggers a simple navigation action to slide 4 
  • Enter of third slide Second: advanced action CheckSecond
  • Button 'Next' on slide Second is set to Continue, because exceptionally I used the next event (Exit) and have to be sure the playhead reaches the last frame
  • Exit of third slide Second: advanced action ExitSecond
  • TEB on fourth slide Guess navigates to slide 5 End if validation is correct, to slide 1 Intro if it is incorrect
  • Enter of last slide End: advanced action EnterEnd

Variables

  • v_void: empty variable to check if variable v_one is empty
  • v_choice: to store the choice of Europe (E) or North-America (A)
  • v_current: very important variable to save time when editing, it will store the content of the last chosen card (AE, DW, Fl, FW, ID or PR) 
  • v_one: stores the choice of the card if it is empty (first card of duo) by using the variable v_current
  • v_two: stores the choice of the card if v_one is not empty (second card of duo) by using the variable v_current
  • v_AE, v_DW, v_Fl, v_FW, v_ID, v_PR will get the value=1 if that duo was discovered
  • v_counter will increment by 1 with each new discovered duo; I didn't use it in this example, but could be used to have a different score at success depending on the number of duos that had been discovered before guessing the image
  • v_first: gets the value=1 after the first slide has been visited, because that slide is reused and has to show different objects on the subsequent visits.


Objects

The timelines in the Gallery provide information on the objects and are pretty simple for slides Intro, Guess and End. 

On slide Game you have a lot of objects (not all are visible in the Timeline image). The stacking order is here very important, as is the timing of those objects. And I really hope that next version of Cp will offer us the ability to group objects, to have them in collapsible folders on the Timeline. From bottom to top this slide has:
  • the two images to be discovered, one for North America, one for Europe; this could be extended to more choices or even more images from those two continents; images are set to display for 'Rest of Project', so when discovered (partially) this will show up in slides Second, Guess; on slide End they will be uncovered totally
  • for each card you'll find a trio of objects (highlighted for first card on the first row), for this example: 
    • PR1_Fr image of the content of the card (here the mnemonic for Premiere), needs to be the bottom one; I choose this label because it tells me about the content (first card with Premiere, Fr); this image is also timed for Rest of Project
    • PR1_Bk the 'back' of the card that is visible when the game starts (used a gradient for those, but you can of course use whatever image you want), timed for Rest of Project
    • CB_PR_11 click box over the card, that will trigger the advanced action CB_11; I used this longer label to be able both to identify the content and the place to make it easier to attach the advanced actions (and edit the duplicates)
  • Text Caption for the button Guess ("If you want to guess....")
  • Button Guess
On slide Second all the objects set to display for rest of project (from slide Game) will be visible as well as its proper objects:
  • Button Next, left to the default action 'Continue' 
  • Text Captions Correct/Incorrect: the proper caption will be visible based on the action On Enter for this slide; when exiting the slide both Text Captions will be hidden and user is returned to the previous slide Game

Actions

As mentioned before, I will not explain the actions in detail here (post would be too long), just the general idea of each action

EnterIntro
This action checks if the Intro slide has been visited already, if this is the case the choice buttons (North America/Europe) are replaced by the Next button, and the Welcome caption is replaced by the Sorry caption. After that check the user variable v_first is set to 1.

Bt_EU/Bt_NA
Action will populate the user variable v_choice and go to the next slide

EnterGame
Complex conditional action, that first resets the user variables v_one/v_second to empty (v_void). It will set the proper image to visible, based on the user variable v_choice. Then for each of the duos it will check if they have been discovered and display that situation (hiding the back and fore images of the cards to display that part of the image if duo was discovered), using the variables v_AE.....v_PR.

CB_11.... CB_34
Those actions will populate the user variable v_current and hide the back of the chosen card. Then either v_one or v_two will get the value stored in v_current, depending on the fact that it is the first or the second card.

CheckSecond
Action will compare the content of v_one and v_two to check if they are equal. If not, the incorrect caption will get invisible. For the correct duos this has to be checked for each possible duo (combined condition) because of the need to set the user variables v_AE....v_PR that are used for the action EnterGame. The correct caption will be visible, the appropriate user variable is set to 1 and v_counter will be incremented.

ExitSecond
Correct and Incorrect captions are hidden, navigation to the previous slide

EnterEnd
All cards are hidden (foreground and background), which will reveal the total image. The appropriate text caption relating to the image is made visible based on the user variable v_choice


Conclusion

Captivate is not Flash, and I'm perfectly aware that for this kind of games programming in ActionScript is better suited. I limited the number of cards to 12, but it can be extended to more cards and duos. More images to discover is easily possible as I explained before. But if you want to change the content of the cards, this will be a lot more work. It is possible to have a differentiated score depending on the number of duos that are displayed before trying/succeeding a guess. You can report easily the score to a LMS (attach it to the TEB on the fourth slide Guess) but if you want a differentiated score to report you'll get stuck like with other question slides (customized or not) because you cannot attach different scores to an interactive object based on a conditional action.


Anyway it was fun to try to create this simple game, it allowed me again to refer to the workflow and the hide/show functionalities that I explained in previous posts. Your comments are, as usual, very welcome.
 

Update

Yesterday eLearnDesigner posted a comment to tell me that she discovered a bug in the game: when a user clicks twice on the same card, it will be considered as a success and both parts of the image will be revealed. Thanks a lot!

Of course I had overlooked this possibility, and solved this by changing some actions:
  • CB11...CB24  here I added a statement to disable the click box that had just be clicked.
  • EnterGame both click boxes for the pair of cards were enabled again if there was no match.

 

25 responses
This is an awesome #AdobeCaptivate article. Once again Lieve has given us gold.
cool! someday maybe I can get to playing with this stuff... and I will of course refer back to your blog Lieve! :)
Thanks Allen and Meg for your nice feedback. This was a fun project, and allowed me to prove that Captivate has become an very flexible tool, suited for a different types of projects. Too often I read in discussions and 'expert' answers that Captivate is only fit to create cool software demonstrations/trainings and this is a statement that was perhaps true a couple of years ago but not with versions since 4 anymore.
Awesome! I like this game that you were created. But it looks hard to guess the image.. But it's cool. :)

Letters from Nowhere 2

Thanks, Helena, this was fun. Did you choose Europe, perhaps? That was not as easy as the other image. I visited Valencia several times, and as a civil engineer love the architecture a lot.
Yes, and i have tried a lot more guess. hehe! Good for you.. I'm sure you find a hard time to create this right? Congrats!
Not that hard, a bit tedious and lot of testing, but now I do know the correct combinations by heart :-) Happy to prove that this is possible without real programming.
Wow, I will need to give this a try!
Wow, I will have to give this a try!
Very nicely done; however, one monkey wrench in the gears: if you click a hidden image square twice, it registers as a match. (Found that out entirely by accident!) It takes away the square you double-clicked plus the matching square you DIDN'T click. Just an FYI for those who might be replicating this game for their own purposes.
Great, didn't detect that glitch, thanks to let me know. Will certainly try to work out a corrected version and post what was the issue. Only one excuse: this was my first game :-) Can you check my latest blog post that has a game as well?
Hey, great job. Thanks for sharing. Opens up a few possibilities in my mind.
That is why I'm blogging, trying to offer some ideas that can be used or explored. You made my day!
Game developers often find other strategies in making these games more realistic and lively. They constantly find more ideas in making car games more fun to play and at the same time, unique from others. Although these are tasks not easy for developers, it is quite rewarding for them to have their games appreciated by its users.

bubbles

I approved your comment, but do not really see the link with this post, in which I created a simple game to show the possibilities of advanced actions and variables without having to code in a programming language. Captivate is not meant to be a game developing application at all, I'm very much aware of that, and would never use if for very realistic games. Simple games like this, or the use of the Jumbled Word widget can enhance eLearning courses, nothing more.
It can't really have effect, I believe this way.
cornerofhope
Sorry, but do not understand your comment or did you not want a reply?
Great post! I've been trying this for a while now and but I don't follow how the variables work so I had to add another button after two tiles are selected to say "Is this a match?" then Captivate evaluates if v_one=v_two the congrats text appears and the cards are removed from the slide. Even though this is cumbersome compared to how nice your version is, it's okay. What I cant get past is how to reset the click boxes for the next try. The click boxes are set to "Infinite", in my conditional action if it is not a match I am reassigning the variable to 0 and I re-enabled the click boxes but after I have click on a pair incorrectly - when I click on it again, it makes the clicking sound but doesn't reveal the other side of the card. Please help! Thanks
Not to seem weird or anything... I just wanted to say I figured it out! I was using the wrong variable in my expression for cpCmndGotoSlide = cpInfoCurrentSlide -1. Your blogs are SO helpful. Now, I may even be able to figure out how you got Captivate to evaluate the pair without using a "Is this a match?" button. :)
Great post Lieve !!! Thanks for sharing you knowledge. If you still have this project in your captivate archives, would it be possible for you to take screen shots of your conditional advanced actions concerning EnterGame and one of your click boxes pretty please... I have been reading your post on this area and trying out different stuff but need a few more hints to get to the finish line... Keep up the outstanding work :-)
@Matt, did you look at all the screenshots? With Captivate 9 my approach would be totally different, this game will certainly be included in the ebook that I'm writing at this moment: First cookbook for Actions in Captivate
Hi Lieve, Thanks for getting back to me !! (This post has not had any comments in the past 2 years !!)In answer to your question, yes I did. As far as I can see on this post you have 6 sceenshots. 5 of those contain timeline screenshots. The first is an overview of all the advanced interaction. It would be amazing if you could post a few more screenshots of the individual advanced actions for CB_11 for example and CheckSecond :-)... I am feeling my way to success but need a little inspiration in the form a few more screenshots :-).. Thanks again Lieve !
Oh Yes... I am in Captivate 8 :-)
2 visitors upvoted this post.