Playing a dice game, using While loop

Intro

In a previous blog post I explained the ins and outs of the new Advanced Actions dialog box. If you feel confused about my terminology in this more practical blog post, please read that first article. A decision block of type 'While' is totally new in version 2017. It has some similarities with the Conditional decision block (IF, Then, Else) but offers new possibilities as you'll see in this simple game.  The While loop can be used to create a looping sequence of commands. That loop can be infinite, or limited in number of executions, based on one condition or a combination of conditions.  Mohana Das from the Adobe team published recently this article demonstrating the infinite While loop. Please read that article, for users familiar with advanced actions the used condition 'IF 1 is equal to 1' will be easily recognized, since this was the condition needed to create a mimicked standard action decision in older versions. It means that the sequence of commands will continue to be done, since that condition always results in True. In a future blog post, I will offer some tips about breaking such an infinite loop.

The present article  will focus on using the While loop, based on a condition which results in having the commands sequence repeated a limited number of times. It is a very simple game, every object was created within Captivate. One exception: the color shift in the Characters was achieved using roundtripping with Photoshop.

It is not a responsive project, to avoid a too long article (should have to explain setup in fluid boxes with logic of the variables and advanced actions). Maybe in a next article?

Play first!

Download this published folder (HTML5). Sorry, cannot embed it in this post (allows only SWF's and it is not playing well in Flash output). Unzip the folder, launch the index.html file to start playing.  It is a small game: when you click on the Play button, a dice will be rolled and you'll see one of the faces of the dice, indicating a (random) number. The girl is supposed to climb the stairs, she will go up as many steps as the number you won. The goal is to reach the top. When the girl reaches the top of the stairs, clicking on the Play button will result in another scenario, and a Reset button will appear. 
On entering the Game slide you'll see two looping animations, with added randomness and a possibility to stop the the looping. You'll see this action in Preview, but I will not provide details. 

Slide setup - preparations

Have a look at the timeline of the Game slide:
I created the stairs as a freeform shape. That was pretty easy with Guides (see Guides Rule) and Snapping to guides. Of course a better approach would be to create that shape in Illustrator with export to SVG, but it is always a challenge to use only the available Captivate tools.

Dice: this is a multistate object, the normal state is a square shape, for each of the sides circular shapes with a gradient fill are added. Look at  the Object state panel for this object. 
The 3D animated dice has also been created as a group from a lot of shapes.

Effects - Characters
Two custom motion effects were created for the climbing girl. Default effects couldn't be used in the advanced action, because the path had to be edited. Here are two screenshots of the custom effects: Impatience (before starting game) and StepUp  (during play).

The original Character (climbing the stairs) will disappear with a default Exit effect 'Zoom out'. when the top is reached.
The Sticky image that replaces the original one climbing the stairs, will get a default Entrance effect 'Drop in and Bounce'. The text panel in that image is covered with a click box, functioning as a Reset button.
Play button: is a simple transparent button. 

Variables (for game only - more are needed for the start animation)

I created 5 user variables:  
  • v_dice: starts with an empty value, will get a random number between 1 and 6 (using JavaScript, see Playing with Numbers)
  • v_counter: starts with a value=0 and will be used in the condition for the While loop to fix the number of repetitions to match the random number in v_dice
  • v_stair: is a second counter, that will be used to keep track of the total number of steps done. It is needed to know when top is reached. The staircase has 16 steps. It also starts with a value=0.
  • v_null: empty variable (see...) used to reset the v_dice variable after each use of the Play button
  • v_roll: starts with a value=0, will track the number of dice rolls needed to complete the steps; that number appears after the top of the stairs is reached. It is a third counter.

For the EnterGame action a 6th variable v_anim is used.


Events and actions

The three used events for the game are:
  1. Success event of the Play button, it will trigger an advanced action PlayAct
  2. Success event of the Click box (Reset) it will trigger the advanced action ResetAct
  3. On Enter event of the Game slide, which triggers the animations: EnterGame

ResetAct triggered by Click Box

I couldn't use Scenario 2 of the Replay Slide blog post.  There are a couple of reasons, one being that the Game slide was originally the only slide. It is never a good idea to start a project with a complicated On Enter action (as is necessary for the looping animation). The workaround is to have a short dummy slide (mine is 0,2 secs) before the game slide and use this Reset action:
Due to the command 'Continue', the On Enter action of the game slide (second slide) is always executed. At this moment for HTML5 output this is not the case when using micronavigation (as in the blog post about Replay slide).

PlayAct triggered by Play Button

The PlayAct has 3 decision blocks, one of each type: the first decision is a standard action (sequence of commands), the second is a While loop based on a condition and the last decision is an IF condition, in previous versions labeled as a conditional action. Here is the Preview:

Decision 1 'Random'  (standard action)

With this sequence, the 3D dice (animated On Enter) will be hidden and replaced by the static dice in its Normal state.
The one line JavaScript will generate a random number between 1 and 6
  window.cpAPIInterface.setVariableValue("v_dice",Math.floor(Math.random()*(7-1))+1);
I explained the construction of this line in detail in this blog post

The variable v_counter is reset to 0. It is important that this is done before the While loop in the third decision.

Decision 2 'EndCheck' (conditional IF action)

This decision checks if the character has reached the top by comparing the user variable v_stair with the total number of steps (16). Contrary to v_counter, v_stair is only reset to 0 when re-entering the Game slide (using ResetAct).

The Play button is hidden (to avoid disturbing the rest of the sequence) and the static multistate dice.

The original character disappears, is replaced by a group (character + click box + text balloon) with some default effects.

If the condition is not fulfilled (ELSE), which means the top has not yet been reached, the variable v_roll is incremented by 1. 

Decision 3 'ShowNumber' (While loop)

The condition used to limit the execution of the commands in this loop, is a combination of these two (AND):
  1. The number of steps taken by the image cannot go beyond the random number stored in v_dice (see first decision) and
  2. The total number of steps done, stored in v_stair, cannot be greater than 16, number of steps in this staircase.

The commands to be done while that AND combination results in True are:

  • Switching the static dice to the next state (see image of the Object states for this static dice above)
  • Character gets on the next step (using custom effect StepUp, but that name has been changed by Captivate to the name of the effect it was based on 'RightToLeft'.
  • The variable v_counter is incremented, it is this variable which is used in the first condition
  • The variable v_stair is incremented; that variable is not reset by clicking on the Play button, is necessary to check if the top is reached (decision 2 'EndCheck').

EnterGame triggered by the On Enter event

Here is the Preview, let me know if you need more details

Questions?

Fire away. Creating this game was a lot of fun, 'while' exploring 'while' loops. Let your creative juices surge!

Matchstick Game - shared actions

Intro

This post is inspired by a question on the Captivate forum, have a look at this thread: 'Advanced actions for a Matchstick Game'. After reading the question, I accepted the challenge. Some advanced actions are used, mostly to reset the game, but the two 
most important actions are shared actions. It is also a good example for a lot of tips I have offered in this blog:
  • Setup of a labeling system that makes it easier to choose parameters when applying a shared action.
  • Sequence of statements and decisions in a conditional action is very important because Captivate will always evaluate each statement and decision in sequence.
  • Choice of optional parameters for a shared action.
  • Using On Enter Slide events to reset variables and objects.
  • Using groups to simplify advanced/shared actions.

Game - rules

You can play the game:
  • goal is to create a word from the initial set of matchsticks by removing some of them;
  • clicking on a matchstick will remove it and a ghost image will appear instead of the original matchstick
  • you can reset the matchstick by clicking on the ghost image
  • maximum number to be removed is 6; you will be warned when you reach that number
  • you can try to remove a seventh matchstick, but I consider that as cheating :)
  • you have a Restart button

Objects - Labeling

The game is on one slide after the intro-slide. This is the Timeline panel:

From bottom to top you see:

  1. Gr_Match: group with the images of the matchsticks. For labeling I divided them in 3 groups. I_MS_11 is the most left matchstick of the first group, I_MS_22 is the upper matchstick of the second group, I_MS_35 is the bottom one in the third group, etc. Those numbers will also be in the names of the Outlines, the Click boxes and the associated variables. This group is initially visible.

  2. Gr_Outline: group with the grey ghost images (outlines). Same labeling discipline: I_OL_11, I_OL_22, I_OL_35,...This group is initially invisible

  3. Gr_Txt: which is expanded on the screenshot has the three messages that are used in the game. This group is initially invisible.

  4. Gr_CB: group with click boxes over the matchstick images+outlines. They follow same labeling system: CB_11, CB_22, CB_35...

  5. Bt_Restart:  the button to restart, reset everything

  6. Tx_Task: the title

  7. Tx_Rules: the explanation

Variables

To track the status of each matchstick, I created a boolean variable with initial value of 0 for each of them. Labeling is similar to those for the images, outlines and click boxes: 

  • v_11, v_12, v_13, v_14, v_15   for the first group

  • v_21, v_22, v_23, v_24, v_25   for the second group

  • v_31, v_32, v_33, v_34, v_35   for the first group

Three extra variables were needed:

  • v_moves: will track the number of removed matchsticks

  • v_correct: will track the number of correctly removed matchsticks

  • v_visit: needed to track if the intro slide is visited for the first time; a jump to that slide is used in an advanced action to reset the game

Actions

Advanced actions

I will not explain the simple and the 2 advanced actions, article would be too long. In a planned cookbook for shared actions I will explain everything in depth:
  • EnterIntro: conditional advanced action with two decisions that is triggered by the On Enter Slide event for the first slide 'Intro'. It will check the value of the variable v_visit and jump to the second 'Game' slide if it is not a first visit. 

  • ResetGame: a standard advanced action is triggered by the Restart button Success event, and by the On Enter Slide event for the second slide 'Game'. It will reset all the variables and restore the initial view of this slide (no outlines, only images).

  • Simple action 'Go to Previous Slide' is triggered by the On Exit event of the second slide 'Game'.

Shared Actions

Two shared actions are used:
  1. MatchStickNOK: to be triggered by a click box over a matchstick that should NOT be removed. This shared action is used  9 times. It is a conditional action with 3 decisions: 'Doing', 'Checking' and 'Cheating'. In the screenshot you'll see this action, with as an example parameters are set to the '11' matchstick. That is a matchstick that should in this case trigger the second shared action.
    This shared action has 6 parameters. The only optional parameter is highlighted in this screenshot, it is the tracking variable v_x associated with the matchstick. No need to define the other variables (v_moves, v_correct) nor the literals as a parameter.



  2. MatchStickOK: to be triggered by a click box over a matchstick that should be removed. This shared action is used 6 times in this particular example. The first three decisions 'Doing', 'Checking', 'Cheating' are pretty much the same as for the previous shared action, with one exception: increment or decrement for the variable v_correct. This shared action has a fourth decision 'End' that will display a Success message if all correct matchsticks are removed. Since this can only happen when the user removes a correct matchstick, this decision was superfluous for MatchStickNOK action. The sequence of decisions is very important: the condition 'IF v_moves is equal to 6' (decision 'Checking') will also be True if 6 correct matchsticks have been removed, but the commands in 'End' will override those of 'Checking' because of the sequence. There are two screenshots here:

    This shared actions has 7 parameters since the Success Message has to be added. Only optional parameter that was upgraded to a real parameter is again v_x, the tracking variable associated with the matchstick.


Enhancements

I hear you! How will it be possible to use those shared actions for a Matchstick Game with another setup? I have some ideas, what about you? Please post your suggestions in a comment.





Captivate 6 - Advanced Actions

Intro

If you did read some of my posts, you'll know that I focus often on using Advanced actions in Captivate to extend its functionalities. And if you look at the just released version 6, like me, at first sight you will be disappointed because apparently nothing much has changed about Advanced actions: no enhancements in the user interface, only two possible new statements (play and stop an audio clip), still not possible to export/import/print/comment those advanced actions, etc. To re-use them you'll have to create a template, and here is a first positive note: it is now possible to save an existing cptx-file as a template.

Same as with the release of Captivate 5.5 I'll leave it to the Evangelists and other Captivate friends to talk about the big new features like new video demo, interactions, shapes, quiz enhancements, themes, shapes etc. Those more visible features, even though they are exciting, have never been targeted by this blog and I'm a focussed person. Hoping to find time to publish more in the near future, planning to use the new video feature to publish some YouTube videos about.... advanced actions. Let me know if you find that useful?

Favourites

On this release day, I want to tell you how two new features (my first favs) will save you a lot of time when scripting advanced actions:
  • object grouping
  • shapes used as buttons
For this purpose I recreated in CP6 a Game, explained in a previous post: Concentration Game. Can you have a look there and play the game if you do not remember about it? The CP6 version is a bit simplified, has less cards and only one image to discover. But the differences due to those new features will be very clear.

Later on, after having explored more in the released version (for the moment I'm still using an prerelease version) I will try to publish a list with my likes and dislikes, in the same sense as this one: What I (dis)like in Captivate 5.5.

Shape buttons

In the original game, each part of the image was covered up with three objects:
  1. a mnemonic-image to be disclosed on click, set for the rest of the project so that it has only one ID
  2. another image with the back of the card, visible before the mnemonic is disclosed, set for the rest of the project for the same reason
  3. a click box to trigger an advanced action:  this cannot be set for the rest of the project
In Captivate 6 I replaced the objects 2 and 3 by one Shape button. Contrary to other interactive objects, a shape button can be set for the rest of the project, to preserve its unique ID. Since now only two instead of three objects have to be addressed, advanced actions will be shorter.

Object Grouping

Long awaited feature: being able to group objects on the Timeline, to label the groups, to collapse/expand them, to make them visible/invisible on the stage for editing reasons. Less known: you can use the group label in advanced actions as well, to execute a statement on all the objects of the group. That is great for show/hide or for enable/disable actions. In the new game I choose to create a group with all the Mnenomics, and another group with the Shape buttons. When entering the last slide (Congratulations) all those objects have to be hidden. In Captivate 5.5 this resulted in a long list with Hide statements, 3 for each card (since I had three objects per card). In Captivate 6 you only need two statements: one for each group, whatever the number of objects in that group. That is really a great time saver.

Video

Do not judge me too harsh, this is my first try at the new video demo feature, have still a lot to learn by practice. If the video doesn't show up on your page, please watch it on YouTube: Advanced actions Captivate 6.
Watch the differences between the two games, and how both the shape buttons and the object grouping made the scripting easier in Captivate 6. Be sure, will blog more about actions triggered by Shape buttons! They cannot only be displayed for the rest of the project, but also be added to master slides and question slides. This opens new possibilities.

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.