Randomizing in Captivate


Randomizing exists in some limited situations in Captivate:

  • Question pools allow to add randomized quiz slides to a project.
  • Shuffle feature for several question types can be seen as randomizing.

However in all other situations you need to use JavaScript to get a randomized number (or text). This short blog is meant as an answer to a user request in the eLearning community, to be found under this link. In my blog you will find multiple examples of randomizing for games. This is a very simple example since the user only wants to have a random card chosen from a deck on clicking the deck. A second click on the deck needs to flip back to the cover of the cards.

Example file

There is only one slide in this project besides the Title slide. The three (tarot) decks are identical, have 14 cards. Try it out. You may get some ideas how to use this workflow for games. In the future I will post more examples of this workflow in a bigger tutorial project. 

This example can be watched below (fixed size) or you can click this link for a rescalable version.

Step-by-step workflow

The timeline of the tarot slide shows the three decks. Each deck has a Click box on top of the deck, which will trigger an advanced action with embedded JavaScript. I hear you exclamations! Why not use the deck itself (PNG image) as interactive object. It is impossible because JS is used to change the state of the object, and it is impossible in that case to use the image itself as button. Of course that is annoying, because a responsive project with Fluid Boxes will not allow stacking of the click box with the multistate object in the same location. You would need a button in another location. For a non-responsive project (like this example) it is not a problem.

Multistate object (deck)

Decks are multistate objects with 15 states. The Normal state shows the cover. Due to the script the labeling is important for the other custom states. They are all labeled Cardx  where x is a number corresponding with the rank of the card. The three decks in the example are identical, but you can have decks with a different number of cards, just use the same logic for the numbering. Look at the Object state panel for Deck1:


In Captivate I need only one variable for each deck to follow up the status: is it showing the cover, or a random card? Two possibilities means that I can use a Boolean variable. When the cover is visible, the variable has the value 0, for a random card it has the value 1.

Advanced Actions

Click boxes trigger a conditional advanced action. Here is the action for the first click box (CB_1) over Deck1:

The Boolean variable v_1 is checked. If it has the value 0, a random card needs to be shown which is done by a JS script (see below), and the variable is toggled to 1. If it has the value 1, the cover (which is the Normal state) is shown. 

For the second and third deck, the variable and the name of the deck need to be edited.


The used trick is to create the name of the state by concatenation of two strings:

  • First string is always 'Deck1'.
  • Second string is a random number between 1 and 14, converted to string.

I have explained in depth the use of Math.floor(Math.random()*(max-min))+min) in an older blog post:


That random number is converted to a string with a JS method. Result of the concatenation is the name of one of the states in the deck multistate object. 

For the second and third deck, the deck name need to be changed in this script. If you do have more or less cards in those decks you need to edit the maximum number (here set at 15).

More ideas?

This basic example may have ignited your creativeness? What about creation of a jackpot game? A funny mathematics exercise for your kids? A board game where you use a dice? 

For this use case it is impossible to create a shared action. One of my long-standing feature requests for actions is the possibility to generate a command using concatenation. A second one: being able to change a state based on a variable.