Update:
A new version of this game, taking advantage of more recent features and published to HTML5, can be found in this blog:
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:
- Choice of a challenge: either Europe or North America will have consequences later on, so I'll need a variable
- 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
- Clicking second card, content will be showed and remembered (variable)
-
Game has to compare the content of both cards (duo): correct/incorrect will have different consequences/branching
- correct: cards are removed (image visible based on choice), game has to remember this 'duo' was correct, next action of user
- incorrect: cards are again turned, next action of user
-
User can choose to guess: answer can be correct/incorrect
- correct: congratulations, game ended
- 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:
-
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).
-
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.
-
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.
-
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.
- 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.
- 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.
