Change state variable to endlessly select and deselect an image

Dear community,

I have created a slide in an online module where I ask learners to select up to 4 images. The images are inserted in gray scale (state 1) and when selected change state to their colored version (state 2). Now due to their task it is possible that they decide to deselect an image again after having selected it in the first place.

For this to work I created a variable (“clickendlessly”)  and when running the Advanced Action (conditional) the variable “is equal to 0” so that a click on an image changes its state to state 2 (color). The variable is toggled so “if ELSE” by clicking again it changes back to gray (state 1). So far so clear.

Now, when I switch between the 4 images, e.g. I first clicked image 1 and it changed its color to state 2 and I click on image 2, what happens now is that the first click kind of only selects the image and only when selected by clicking it again the advanced action is “released” and change of state therefore needs a second click. Once selected I can change state again and again. But as soon as I move on to another image I need to select the image first (click 1) and change state/color works only with click 2.

Question: Is that how it is and I have to live with it OR is there any way around it? So that whenever clicking on an image it changes color right away, no need for the “pre selection process”?

Help would be great!

Thanks in advance!


The post Change state variable to endlessly select and deselect an image appeared first on eLearning.

Newbie Quick Captivate Tip: Visiting the VISITED State

I love the VISITED state. Even more, I love how easy it is.

I use the VISITED state a lot.  It offers users a visual clue to keep track of what they’ve clicked on initial visit or on revisit, if you choose that latter option.

Using the VISITED state is a simple workflow.  As Newbies, it’s common to get bogged down in the menus, properties, and actions. You don’t need to worry about those here.

VISITED states require 1 step only. Just add the VISITED inbuilt state and determine what it will look like.  Well… maybe 2 steps.  But you do them in 1 step in the State View.

Let’s take a look at what you don’t have to do first…

1) If you’ve got only 1 object that you want to add a VISITED state to, you don’t have to define that action On Exit.

2) You don’t have to include it in a Shared Action or Advanced Action.

What do you have to do?

1) Add a new VISITED State and determine how it will look. I used a checkmark. But, other choices could be a lower opacity or an “X.”  Captivate’s guides make it easy to align any other objects you want to add.

2) If you want that state to be there when the user comes back to the slide, click “Retain State on Slide Revisit.”

Now, let’s see what things look like when all 5 circles are clicked.

And that’s it! VISITED State is incredibly powerful and an intuitive Captivate 2017 feature!  Have fun adding it to your courses.

The post Newbie Quick Captivate Tip: Visiting the VISITED State appeared first on eLearning.

Changing States vs Animation – (A Reason to Learn JavaScript)

At some point in your life you very well may have heard the phrase – “There is more than one way to skin the cat.” – not sure where or how that originated but I think most of us understand the meaning behind this idiomatic expression.

Creating projects with Captivate is no different. Arriving at your desired result could very well have taken any number of pathways. However, as much as those results might be the same, there can also be some subtle differences that can potentially make an impact on final presentation. I happen to think that it is good for us as developers to learn multiple ways to get the job done and then be able to choose which way provides the better impact. In many cases, there will be no marked difference, and so you may as well go with the method that is the quickest and easiest.

I think one of the areas where differences can be seen is when we compare state changes and animations. Now, you might feel differently and, to be sure, this is a subjective thing without any right or wrong answer per se. We’re merely talking about preferences here. Nonetheless, I find it to be an interesting topic for discussion and I will allow you to decide for yourself.

In my example, I have provided two of the seemingly exact same status indicator. The only difference between them is the manner by which they function.  The indicator on the left uses the native Captivate ability to change states to move the bar while the indicator on the right uses JavaScript to animate the bar.

The premise of the interaction is simple – pick items on the list to take with you that do not exceed 25 pounds. Click on the ‘Check Weight’ button to see where you come in. As you do so, pay attention to how the status indicators respond. Which do you prefer? Here is the link to the working comparison.

**Please note that I have no idea what the weights of these things are. I just picked some values that I thought might be close so try not to hold that against me. **

Same end result. Subtle difference in presentation. The snap versus the glide.

Don’t get me wrong. I love the ability to do state changes and use them often. However, I always think it is worth the time to learn new skills and develop one’s craft.

If you plan to develop for years to come, I encourage you to take some time to enhance your craft and learn a little JavaScript. It can help you to create some experiences that have a little something extra above your competition.

The post Changing States vs Animation – (A Reason to Learn JavaScript) appeared first on eLearning.

PowerPoint, Meters, and States – Oh My!

PowerPoint sometimes gets a bad rap but I truly believe in the ‘power’ that PowerPoint has available.

In this post, I wanted to share with you one of the ways I use PowerPoint to supplement what I want to accomplish in Adobe Captivate.


I love using meters in my activities. Whether that is a progress meter or some sort of indication of success, meters can be a great way to inform the learner of how they are doing. There are tons of possibilities with your creative touch – nothing is off the table at this point.

I use PowerPoint regularly as my graphics editor and making meters is a task I do often. I find it to be very simple to create and manipulate the shapes to get the outcome I need. In this example, I will make a simple meter that tracks time in 5 minute increments. These increment images become image states in Captivate which display based on your variable values and logic. This post will address the methodology of creating the images rather than working out the logic.

**Please note that this is not a live timer but a meter that will change based on variables that you assign and are updated as a learner makes choices.

**Also note that I duplicate slides at each step. This helps the creation but also helps when mistakes are made – less things to fix.


Creating the Images (Clock Style)

Step 1  –  Make a circle shape. You can ensure the circle is round rather than oval by holding the shift key while you drag it out. Color the circle to your design. In this example I will use a light red color. This is the color that will reveal as “time passes”.



Step 2  –  Make a very thin rectangle shape and center it on the circle. I use a good contrasting color so it is easy to find.



Step 3  –  Make as many copies of the thin rectangle as you need to segment the meter into the number of divisions you desire. Make sure they are all centered. Then rotate all of the rectangles based on the number segments so they are all equal. In this example, I created a total of six rectangles so I could have 12 equal segments representing 5 minutes each. (360 degrees / 12 = 30 degrees) I rotated the remaining 5 rectangles by an increasing 30 degrees for each one.



Step 4  –  Select all of the objects making sure that you select your circle first so that your formatting remains. Then fragment them. You should notice a change to the rectangles based on the formatting of the circle.




Step 5  –  Make a copy of the first circle and reformat it to the color of the timer. In this example, I am going with a greyish-white. It is important to remind you that I have been duplicating slides at each step. This helps ensure that all my objects stay in the exact same position. This is critical for the next phase of this setup as we will be copying and pasting from one slide to another and that keeps them properly placed.

At this stage you can perform a right-click and ‘Save as Picture’. This will be the starting of your image states in Captivate.




Step 6  –  Go back to your fragmented slide. Select the first segment and copy it (CTRL-C). Go to the slide with the circle you just made and re-colored. Paste the segment (CTRL-V). It should appear in the same spot. Group them by selecting everything and (CTRL-G) then save as picture again. This will be your next state.

Now ungroup them (CTRL + SHIFT + G) and go back to the fragment slide to grab the next piece. Paste the next one in place, group, and save as picture.

Repeat the procedure until you have created images of each step of the meter.





Step 7  –  Now you can import each of the images to Captivate and you could use either the blank circle as a start point or the full circle  where segments disappear. Each image is a state that you can utilize the ChangeState function of Captivate to display them based on parameters that you choose.


Here is a pic of my version of this in one of my applications. In the scenario where this is used, I give the learner “two hours” to perform the task. Each decision they make along the way costs them “time”. The meter fills up to show how much “time” has been spent on the task.  As you can see, I added a few additional elements to this one such as the little hand that follows along like a clock and the numbers as well to help read the time.

PowerPoint is a really useful tool that makes creating these sorts of things very easy and is an amazing supplement to Captivate.

Hopefully this was helpful for someone. Feel free to ask questions about this.