Button states - Basics and Tips

Intro

Recently I answered several questions about button states, which proved that some information is missing. For that reason I checked the official Captivate document, and indeed to me it is not at all complete especially for buttons which are the most used interactive objects. You can have a look:

Work with multi-state objects in Adobe Captivate

Some examples: the InBuilt state 'Visited' is not mentioned at all. I couldn't find any information about the lock of InBuilt states for buttons and how to circumvent it. The recent added button types - SVG and Bitmap images - are not even mentioned. What is the meaning of the blue and red selection rectangles in button state objects? Several years ago I published an extensive blog about the InBuilt states for Drag&Drop objects (Inbuilt D&D states) to fill in gaps in the Help document.  With this blog I will try to summarize tips and workarounds for InBuilt states for buttons. After a short recapitulation of typical features of Button states, you'll get some examples.

Typical features

InBuilt states

Buttons of any type have by default three InBuilt states: Normal, Rollover and Down. Those three states are part of the object styles for text buttons, image buttons, transparent buttons and shapes (because they can always be converted to shape buttons). However no object styles can be created for bitmap images and SVGs used as buttons, the most recent types added in version 11.5. 

Less known is the fourth InBuilt state: Visited, probably because you always need to create that state. It cannot be included in the object style for the four mentioned button types neither which is a pity. Audio can be attached to the Visited state and Normal state, while that is impossible for the Rollover and Down state

InBuilt states will appear in specific situations. Rollover when hovering over the button, Down while button is pressed, Visited after the button has been pressed and released. However the Visited state can also be set using the Change State action which is impossible for any other InBuilt state (for buttons and D&D objects). Like with custom states, you can add Audio to the InBuilt states. Here are two tips based on that knowledge:

Tip 1: The Down state will disappear when you release the button. If you want to keep the down state after release, use the Visited state, looking identical to the Down state. This is valid for both responsive and non-responsive projects.

Lock Size/position

The size and position of the button is the same for all InBuilt states, based on what you designed for the Normal state. That is the reason for the lock symbol which you see on the stage when Rollover, Down or Visited are selected. 
The Normal state defines the clickable area, hence the Lock symbol. For all buttons, except the SVG used as button, this will always be the bounding box of the button. You can always edit or replace the content in a state but that content will be rescaled to the bounding box defined in the Normal state. In the example screenshot that content was a SVG where the clickable area was kept to the bounding box. That vector image type always keeps its height/width ratio. If you want to use another SVG in the Rollover or Down state, which needs more space, be sure to create a bounding box which is bigger than what is needed in the Normal state. Here is an example, the SVG in the Rollover state is wider, so the bounding box in the Normal state has a larger width.
In this example a different SVG was used in all the states. You cannot replace a SVG by a bitmap image, each replacement needs to be of the same type.

Tip 2: (answer to this thread in the eLearning community: Word Search) to create a highlight appearing after a click, use a shape button with 2 (or 4, the Rollover and Down are not important) states, one is the Normal state and the shape has no fill nor outline, the second one is a custom state where the shape has an outline. Use the action 'Go to Next State....' for that button. First click will show the custom state (outline), second click will revert to the Normal state.

Extra objects

Contrary to audio which can only be added to the InBuilt states Normal and Visited, you can add extra objects to all InBuilt states. However this is only possible in non-responsive (Blank) projects and in static fluid boxes. Normal fluid boxes do not allow adding extra objects to a state (due to the stack prohibition). 

This aspect opens a lot of tweaking possibilities. Those extra objects are not locked, nor do they need to be of the same type. Contrary to the locked button states which have a blue outline marker, extra objects will have a red outline marker (see screenshot under Tip 3). There is no real limit to the number of objects you can add. Whereas audio cannot be added to Rollover or Down states, you can add extra objects to those states.

Tip 3: Create a tooltip for a button by adding a text (or other object) to the Rollover state.

Tip 4: Quick Click/Reveal workflow, using a button with a custom state derived from the Normal state but with the Reveal objects added to it. Use 'Go to Next State' for that button, and you have a toggle button, which will hide the revealed objects when clicking again. When using a variable as explained here, you have even more control.

Tip 5: Can you increase the size of a shape button in Rollover state, was another recent question? The forementioned trick with a bigger bounding box in the Normal state is not functional in that case. Here is another possibility:

  • In the Rollover state make the shape button invisible. Depending on its setup this means Alpha for Fill set to 0, border width set to 0 and eventually take out the text.
  • Add a bigger image of the shape button to the Rollover state and align it as wanted.

Of course you can this also apply on the Down state and/or with a smaller version of the button, see screenshot:

Tip 6: Starting with an invisible Normal state for a shape button (Alpha and stroke set to 0) and adding an object to that state within the bounding box of the shape button, allows you to create a rotating button. A full description of the workflow can be found in this blog post. Of course this means the clickable area will be greater than the image itself, but most learners will not detect that incongruity.


Conclusion

You'll for sure know about more examples to use button states in a creative way. Feel free to post your ideas in a comment, always appreciated.

Fractioning (custom) motion paths

Intro

Motion effects can be customized in many ways. Pausing Captivate's timeline will also pause automatically any effect if it is not finished. This feature can be used to make boring slides more engaging. To see what I mean, have a look at this example file. It has three slides using that approach:

  • Business Model: has a simple left to right motion path use on a cover shape to deploy an infographic sequentially.
  • Career Steps: uses a custom polygon path to have an animated avatar and discovering states in a multistate object
  • Captivate Hurdles: has a custom curved path, and uses also multistate objects.

You can watch the example file full screen by clicking this link.

Or have a look at this embedded example:


Workflow

Steps

Each of these three steps will be explained in detail below:

  1. Create the motion path, and edit its duration taking into account the number of wanted fractions.
  2. Create the button and its advanced action, which will have two decisions:
    1. Decision 1 will manage the motion and pausing, and a tracking variable if you want a second decision to be done when all parts have been deployed. This decision is non-conditional
    2. Decision 2 will be done when the path has ended and is conditional
  3. Test the interaction, it will probable need tweaking the path length and fraction times. Moreover if you allow to revisit the slide, you may need an On Enter action to reset the situation.

The detailed explanation will be done using the first example ‘Business Model’ . Explore its timeline:

Slide background is a a shape filled with a gradient. That shape was duplicated to be a cover, which is stacked on top of the Infographic (with the images) and the Next button. Motion effect will be attached to that cover shape. On top of the cover you’ll see the Play button (no pausing point), title and instruction text. The Next button has a pausing point which needs to be after the end of the motion effect.

Step 1: Motion path

The effect applied to the cover is a simple Left-to-Right motion path. It has no easing because easing would be applied to the start and/on end of the complete path, but you’ll use it in fractions. This linear path will be cut in 6 parts. I used a vertical guides grid to visualize the 6 fractions, and make sure that each guide is in between two images. Have a look at this screenshot, showing the guides and their setup (using View, Create Multiple Guides):

Motion path  is visible on the stage with end and start points. Those points are always connected to the center of the bounding box of the shape. The start point is at 1024/2px = 512px because the project width is 1024px. You need to extend the length of the path by moving the end point horizontally (keep SHIFT key pressed) to the X coordinate 512+1024px = 1536px. For that reason I added another vertical guide at 1536px. Turning the snap on for the guides helps to position the end point. See screenshot:

For the duration of the Effect, start from the time to use for each fraction. I found that using a time between 1 and 2 seconds is fine. As you can see in the timeline screenshot above, for this slide a duration of 1.5secs was chosen, leading to the Effect duration of 9secs. If you look closer to the Timeline, you’ll see that the effect duration is slightly shorter, because of step 3: tweaking.

Step 2: Action for Play button

Basic setup

At first sight the needed advanced action for the Play button seems to be rather simple.:

  • Pause the slide On Enter.
  • For the Play button use this sequence:
    • Continue      to release the playhead, the motion effect will start
    • Delay Next Actions by 1.5 secs          for the Business model slide 1.5seconds is 9secs/6
    • Pause      to pause the motion effect waiting for the next step (see guides in the first screenshot )
  • The Next button will be uncovered in the last step.

However, there is no way to prevent the learner to click the Play button after the motion effect ended, and the Continue command would then override the pausing point of the Next button, which you probably want to avoid. To prevent this you need a way to track the end of the motion path. Using a variable v_counter for tracking is an easy way. Although you could use one conditional decision, I like to separate the advanced action in two decisions. Have a look at this screenshot of the basic PlayMotion action:

Supposed here is a starting value of 0 for the variable v_counter. When all 6 parts have been ‘discovered’ the Play button will be hidden. It could be possible to replace that Hide action by a pure Pause action, but it would lead to frustrated learners.

If you try out this basic action for the Business Model slide, you’ll have a flickering problem. That has been a pain since many versions. In the Tweaking section of this blog, I will show you how to solve this. Moreover in the video displayed in the previous post, you’ll see that the first part of the effect is deployed immediately. There is also need for an On Enter action on all the slides, to reset everything in the original situation including the value of the counter variable.

Extended Setup

This simple slide didn’t need to have another action to be done besides part of the motion effect. That is not the case for the Steps nor the Hurdles slides. The extra actions need to be inserted before the Delay command in the Always decision. Look at the versions for the Hurdles slide. Multistate objects were used to show explanations. There are 4 parts. At the end the Play button (is in a group with a Tooltip) needs to be hidden, and the group of extra buttons made visible:

Step 3: Tweaking

Timing

When testing the project with F11, Preview HTML in Browser, you'll see that the timing is not perfect: motion effect. There are two ways to tweak this timing, and often both are needed:

  1. Decrease the total time of the motion effect (Timeline panel or Timing Properties). That will speed up the motion, more will be shown with each part. If you look at the first screenshot, Timeline panel for the Business Model slide, you see that the duration of the effect is now 8.9secs instead of the original 9secs. For the Steps slide, I reduced the original 10secs (5steps of 2sec) to 9.7secs, for the Hurdles slide 5secs was reduced to 4.8secs

  2. Decrease the Delay time in the advanced action for the Play buttons. You could see in the Hurdles action the change to 1.8secs. 

On Enter action

You’ll need such an action to reset the situation if the learner is allowed to revisit the slide, and also to be able to reuse the unique variable v_counter.  Whenever possible, avoid to create multiple variables if you can reuse the same variable. Here is a simple On Enter action for the Steps slide:

As promised, here is the On Enter action for the Business Model slide, which is more complicated because it solves the flicker issue, and will show the first part of the image (Hence the Assign to 1 command for the counter variable):

To avoid the flickering of the InfoGraphic image, it is hidden to start with and shown after 0.3secs.  I also added a Fade in Transition The starting value of the variable is now 1 instead of 0. To deploy the first part of the infographics you’ll see the same actions as in the Play button action. The total delay for this first part is 1.6secs.

More?

It would be wonderful to hear how the described workflow could inspire you for your projects.. 

Creating custom paths - curved or polygonal - comes with some issues:

  • For polygons: you cannot create horizontal nor vertical parts for an obscure reason. I have logged this bug multiple times.
  • For curves: realizing cusp points is normally not possible... 

If you want to learn how to overcome those issues, please let me know.



Combining Slide Audio and 'Play Audio'

Intro

This short blog post is meant to answer another question on the Adobe forums. It is at the end of this thread:

https://community.adobe.com/t5/captivate-discussions/pausing-slide-audio/td-p/12312792

This was the goal:

  1. Slide has narration as slide audio
  2. There are multiple shapes used as buttons, which should trigger an audio clip using 'Play Audio' command; those shapes have no pausing point.
  3. When a shape button is clicked the audio clip should play, but the slide audio should pause, and resume after the audio clip ends.
  4. There is at least one more interactive object pausing the slide towards the end. Idea is that the learner can still listen to the audio clips after the slide audio has finished.

This learner tried to solve this with simple actions, using the feature 'Pause slide audio when clicked'. It cannot be solved that way however.

Example project

Watch this short project created to double-check my proposed workflow with a shared action for the shape buttons. After the Title slide you'll see a slide with a Next button to pause the slide, and a shared action triggered by each of the shape buttons. A copy of the Timeline panel can be found on the third slide. I used some slides from the Aspire Quick Start Project.

You can open a rescalable version using this link or watch the embedded version below:



Setup

You could see the slide audio (narration) in the Timeline panel. The audio clips for the shape buttons were imported to the Project library, and their exact duration was checked, because it will be needed in the shared action. Have a look at the shared action with its two parameters (name audio clip and duration clip):

It has two parameters:

The command Pause in the action will pause the slide audio automatically, contrary to a pausing point of an interactive object. You don't have to change any setting in the shape button Properties. The Continue command which will be done at the end of the audio clip will take care of resuming the slide audio.

Do not bother about having two clips playing at the same time. If the learner clicks another shape button before the first audio clip ends, that first clip is stopped automatically. No need to add a command like 'Stop triggered audio' which is only needed when you want to stop a playing clip without playing a new at the same time.

The user is concerned that applying the shared action will take more time than the approach he tried out with simple actions. However, since you don't have to change settings in the shape button Properties panel, the shared action approach needs even less clicks. Check it out. There is no danger of choking Captivate which could happen if you use duplicate advanced actions since you are using instances of one shared action (ecologically).

Problem

The previous solution works fine until the learner has reached the pausing point of the Next button. At that moment, the Continue command in the shared action will override the pausing and the playhead will continue until it reaches the end of the slide and moves to the next slide. It is necessary to cope with that different situation. The Delay command nor the Continue command take into account possible pausing points. 

There are two different situations, each needing a different workflow:

  • Learner clicks a shape button before the narration has ended. In that case the slide audio needs to be paused, and to resume after the end of the triggered audio clip.
  • Learner clicks a shape button after the narration has ended. You need to maintain the pause which occurs at the pausing point of the Next button.

This screenshot shows the Timeline panel, illustrating the two situations. Situation 1 in red, situation 2 in blue.

This needs apparently a conditional action for the shape buttons. You have to figure out which situation is valid. For that reason you need to know when the narration has ended. It is easy to see its duration in the timeline, in this case it was 28secs. To calculate the frame number at the end of the frame I used micro-navigation. If you are new to this type of navigation, please have a look at this blog post:

Intro to Micro-navigation

Solution

Variables

You need two user variables:

  • v_start: will store the frame number of the first frame of the slide with the narration and shape buttons
  • v_stop: will store the frame number at the end of the narration

Contrary to the timeline panel where seconds restart on each slide, the frame numbering continues throughout the project.

Shared Actions

EnterSlideAct

This shared action will be triggered with the Slide Enter event, and is meant to calculate the value of v_stop. Have a look:

The first frame number of the slide is stored in v_start. The duration of the narration is converted to frames, by multiplying with the system variable cpInfoFPS. The only parameter is that duration.

PlayAudio_Act

The former standard action has been transformed to a conditional action:

Same parameters as before. The condition checks if the learner clicked the shape button before or after the end of the narration. Only when the narration hadn't been finished it will need to resume. That has been done with the Delay command and Continue. That is not necessary after reaching the end of the narration, because the pausing point of the Next button needs to be kept pausing, and the narration doesn't need to resume.

This shared action is needed for each of the interactive objects used to play an audio clip.  In the project I used shape buttons. They are visible in the timeline screenshot as SB_Topic1…. SB_Topic4.

By using shared actions instead of duplicate advanced actions, you avoid choking the project if you need lot of those actions which was the case for the user asking the question. Moreover multiple instances of the same shared action also will result in a smaller file size. Of course they are also very easy to transfer to future projects. You can learn more about using shared actions in these videos:

Use Shared Actions: Lesson 1 (crash course)

(re)Use Shared Actions: Lesson 2 (crash course)

Choose and use Personal avatars

Intro

One of the reasons I started using eLearning assets as professor in a university college, was to offer students a more personalized learning experience. In this blog I will not expand on that goal, but show how you can use an ignored feature of advanced actions in combination with multistate objects to offer the choice or a personal avatar. 

Do you know that several simple actions (dropdown list in the Actions tab for a slide or an interactive object) also appear as possible commands in advanced action, but that they are ‘enhanced’? Typical examples are:

  • Show/Hide: as simple action they can only address objects (or groups) on the same slide as where you trigger the action. However when used in an advanced action, you can address all project objects.

  • Change State/Go to Next State/Go to Previous State: when used as simple actions you can only point to multistate objects on the slide of the action, but used in an advanced action you point to all multistate objects in the project.

Example project

Have a look at this example. You can use the Table of Content (custom button) to navigate freely. This project has:

  • Title slide
  • Slide ‘Flashlight’ with timeline staggering, where you see bottom left an avatar
  • Slide ‘AvatarChoice’ where you can change the avatar. It is not the first slide to prove that the avatar change will also be functional on the previous slide (Flashlight)
  • Slide ‘CareerSteps’ which has an avatar outside of the slide, but it will appear in steps if you click the play button (motion path animation triggered partially with each Play button click)
  • Slide KnowledgeCheck where the avatar is used to give a feedback message

Have fun:



Setup workflow

Multistate objects

Lot of multistate objects were used in the project:

Slide AvatarChoice

The four buttons with the avatars are SVGs used as buttons. The InBuilt states Rollover and Down were deleted, but a custom state labeled 'Chosen' was added to show the selected avatar by adding a white-stroked border (shape) to the original avatar image.

Slides Flashlight, CareerSteps, KnowledgeCheck

The images SV_Candidate (Flashlight), and People (CareerSteps) have 4 states. The Normal state shows by default the first male avatar. This screenshot shows the states for SV_Candidate, the one for People is similar. They use the same names for the states.

The image KCMessage (KnowledgeCheck) has 5 states, the Normal state being an empty shape (Alpha and Stroke both set to 0). It is just an alternative, because that message needs to be hidden with the On Enter action of this slide. Reason: the message should pop up only after clicking the Submit button. Same names are used for the states, but M1 is new since it is no longer the Normal state:

Events and Actions

W1Act, W2Act, M1Act, M2Act

Those advanced actions are triggered by the Success event of the the buttons on slide AvatarChoice. Here is an example screenshot for the button SVB_W1, the action W1Act:

The four first commands, changing states, take care of the buttons on the slide itself. Only the clicked button will switch to the second state 'Chosen'.  You can easily adapt those commands for more or less buttons on that slide, in this case there were 4 buttons.

The three later commands switch the multistate objects on the other slides to the appropriate state.  Add similar commands if you have more than 3 slides to propagate the choice.

Beware: it is important to check the option 'Retain state on slide revisit' for the multistate objects on the three slides where the chosen avatar has to be solidified. If you don't do that, the choice will be visible only on the first visit of that slide, not on later visits.

KnowledgeCheck slide

The On Enter slide event is used to hide the multistate object 'KC_Message'. 

For the setup of the actions on the slide, refer to this screenshot:

It is of course possible to have different feedback messages, by using conditional actions, but that was not the goal of this blog post. 

You cannot have any multistate object in a default feedback message (Failure, Success) on a question/knowledge check slide. That is why you need to create a custom solution.

No shared actions?

Why did I not choose for my favourite shared actions in this particular use case? Reason is that such a shared action would need a lot of parameters, even for this short project: 7 for the multistate objects, 4 for the states on the AvatarChoice slide, and 3 for the to be changed state on the other slides. That results in 14 parameters! It is much easier to edit the duplicate advanced actions in this case than applying shared actions with 14 parameters.


Forced view for Tabs Interactions - Shared actions as template

Why?

Recently the question appeared a couple of times in the forums: is it possible to delay the appearance of the Next button until all tabs in the learning interaction Tabs have been clicked.  This ‘Forced view’ request has been documented many times for normal click/reveal interactions and for a branching scenario. However the limitation of all learning interactions to the provided editing functionality prevents an easy way to realize such a scenario. Same is valid for Accordions, Timeline, Pyramid etc… interactions.

My recommendation is to use one of the multiple interaction slides from the Quick Start Projects (version 11.5, Assets panel). They do not offer Forced viewing out of the box, but can be transformed to do the trick. Have a look at the published example.

Warning: This blog contains three short video clips, it may some time to load completely on your system.

Example project

In this example I took 3 ready-to-go slides: one from the Safety, the Alliance and the Earth projects. The existing actions have been edited and you’ll get the Next button only when all tabs on a slide have been clicked:


The embedded example has a fixed resolution. You can also use this link for a scalable version.

How?

All was done using two shared actions, which you’ll be able to download in a Library project:

  1. VarsCreateForceTabs: is used to create the needed user variables, and acts also as reset action On Enter for each slide. In this particular case the same action (one parameter) could be used directly. However if more is used in the On Enter action, the shared action can be used as template for a dedicated advanced action.
  2. ForceTabs: has been used only as template for all the advanced actions on the 14 tab buttons in this project. I will describe the workflow step-by-step in a future blog.

If you want to try the workflow (described below) out, download this project which has the two shared actions in its Library. In an older blog (or video)  I explained how to import those actions in any project using External Library. Download the project from this link:

SA_Library

Workflow

Step 0: Next buttons

Add the Next button to each slide, and hide it in output. I labeled them SB_Next_Earth; SB_Next_Safety, SB_Next_Alliance 

Step 1: import the shared actions to your project

  • Open the Library panel in your project. Scroll to the Shared actions subfolder.
  • Use File, Import, External Library and point to the downloaded project file. It will appear in a floating panel top left of your screen.
  • Find the Shared actions folder in that external library and select BOTH shared actions.
  • Drag them to the Shared actions folder in your project library. They will both appear with a usage of 0. But the variables used in those actions will now appear in the Variables dialog box (Project, Variables). 

You can watch this step in the video below as well.

Step 2: use VarsCreateForceTabs action as Reset action

  • Check the On Enter event for the Quick Start Project slide you want to use. In many case that will be the default action 'No Action'. If that is the case, apply the Shared action 'VarsCreateForceTabs' to the event. It will need only one parameter: the number of tabs. 
  • If the On Enter event triggered another action than 'No action', screen that action. In many cases it is a superfluous action. One example is the 'Horizontal Tabs' layout in the Business project. It has an On Enter action to reset states to the Normal state, but that action is not needed since such a reset happens automatically when you re-enter the slide. Reason: the option Retain State on revisiting slide is unchecked.
  • If the existing On Enter action has to be done, you need to use the Shared action as template to create an advanced action. In that advanced action you'll need to add the existing action, which can be done by copy/paste eventually on a new decision tab. In the available Quick Start Projects the On Enter actions are never conditional. 
  • Using the described workflow, the Next button will remain visible when the slide is revisited. That is mostly the required situation: only on a first visit clicking all the tabs is required to get the Next button, but later on that is no longer the case.

Second step is also shown in this video clip:

Step 3: use ForceTabs as template for Tab action

  • Select a Tab button on the slide. In the following screenshots I selected the first button on the slide from Earth, which will have the name C2R37_BTN_xx  (xx will be a number added by Captivate to make the name unique).
  • Check its action in the Properties panel, Actions. Open that action in the Advanced Actions dialog box.  For all the ready-to-go slides with a similar Tabs interaction, those actions always have one standard decision. No IF conditional decisions, nor While loops
  • Select all the commands in that action, copy them to the clipboard (Edit menu, right-click menu or with CTRL-C).
  • Open the shared action 'ForceTabs' from the dropdown list top left (starts with Blank). You'll need to fill in the two parameters in the dropdown lists. First parameter which appears in the two first decisions is the tracking variable. Second parameter in this case is the Next button, which was hidden in output. A Preview of such a filled in shared action is visible in this screenshot, created for the first tab button in the slide taken from the Earth QSP:
  • Return to the first decision 'Always', on the second line (after the 'Increment' command), paste the commands copied to the clipboard (CTRL-C or from the menu).  Save the advanced action with a unique name. For that same tab button as the previous screenshot, this would result in:
  • Assign the new advanced action (in the example SB1_Earth_act) to the tab tutton.

You will need to repeat this third step for each of the tab buttons. Eventually you could also duplicate the advanced action for the first tab, and edit the duplicates. Do not forget to copy the commands from the original advanced action on the tab to the first decision 'Always' after the Increment command. In that scenario, only the first parameter (tracking variable) needs to be edited, but in the first AND the second decision. If you start from the shared action as template you need to define that parameter only once. However you don't need to edit the last decision, because the Next button will be the same for all the tab buttons if you work with duplicate advanced actions.

Here is the video clip for the third step:

Conclusion

Although this blog was meant in the first place to answer a forum question, I had a hidden agenda (a badass?):

  • Using shared actions as template
  • Using shared actions to avoid creating variables over and over again
  • Combining existing advanced actions with filled in shared actions
  • Understanding and extending the use of Ready-to-go slides from the Quick Start Projects.


Custom MCQ slide with multiple correct answers

Why?

Recently a user posted a request on the Adobe forums, asking for a Multiple Choice question to be used as Knowledge Check, but with possibility of multiple combinations of answers to be correct. Here is the link:

MCQ with more than one correct answer

Example project

I used some slides from the QSP Alliance to create quickly this example project.  It has 3 MCQ slides which are using the same shared actions. For the answers I used placeholder text, so that you can recognize the 'correct' and 'wrong' answers. All questions have 6 possible answers but the workflow is not limited to that specific number of answers. The total number of correct and wrong answers is different on each slide, workflow is flexible enough to cope with those differences. Answer is considered to be correct when no wrong answers are selected and at least one correct answer is chosen. But multiple correct answers are allowed as well. It would be very easy to add scores to the MCQ slides. At this moment they are set up as Knowledge Check slides, with Infinite attempts. You cannot proceed to the next question before having posted a correct answer.

You can watch this project using this link for a scalable version, or the fixed resolution embedded version below:



Workflow Setup

Slide setup/Multistate objects

Have a look at this Timeline screenshot of the most important objects on the MCQ slides:

From bottom to top you see 

  • The 6 shapes (black) which are used as shape buttons, who will trigger either a CorrectAct or a WrongAct shared action. Their names start with SB. They have an extra custom state 'Checked' to indicate when they are chosen:
  • The Submit button. Each slide has its Submit button. A custom 'Retry' was added to replace the Normal state for later attempts than the first attempt. The option 'Retain State on Slide Revisit remained unchecked.
  • A multistate shape SS_Message which has an empty Normal state, two custom states (see screenshot). This object is timed for the rest of the project (and hidden on the End slide with its On Enter action). The option 'Retain State on Slide Revisit remained unchecked.
  • The Next button SB_Next which is also timed for the rest of the project (and hidden on the End slide with its On Enter action).

Variables and events

8 user variables are used:

  • Six tracking variables of the Boolean type, labeled v_1, v_2.....v_6 - one for each possible answer. Their default value is 0, will be toggled to 1 when that answer is chosen. 
  • Two counter variables v_correct and v_wrong which will track the Correct and Wrong answers which are checked.

The used events are:

  • Enter slide event for each MCQ slide, for a reset action 'EnterAct'. 
  • Success event of the answer shape buttons SB_x to trigger either the 'CorrectAct' or the 'WrongAct', which are both shared actions.
  • Success event of the Submit buttons to trigger a specific advanced action 'SubmitActx'.
  • Enter slide event of the End slide to hide the messages shape SS_Message and the Next button. That Next button kept the default action 'Go to Next Slide'.

Actions

EnterAct

This Reset advanced action is triggered On Enter for each MCQ slide, it is self-explanatory. I used an advanced action in this case, based on a shared action CreateVars, which I use all the time to create a bunch of variables. 

CorrectAct (shared action)

This shared action is triggered by the Success events of the answer shape buttons which have the correct answers. Only two parameters are needed: the button itself and its tracking variable. As you may have read in my Tips about Parameters using numbers in the names makes the assignment of the parameters a lot easier:

WrongAct (shared action)

Similar to the previous action, using the same two parameters:

As you may know both shared actions appear in the project Library, easy to check with Usage if they have been assigned correctly:

SubmitActx

Due to the change state needed for this button, there is an individual advanced action for each Submit button:

EnterEnd

A very simple advanced action for the On Enter slide event of the last slide, to hide the Next button and the multistate Message shape, both were set till the end of the project.




Tip 5: Parameters (Shared Actions)

Intro

First 4 tips in this series were valid for both Advanced and Shared actions. 

This blog is only for Shared actions, which are still not very popular amongst the Captivate developers. In my workshop at the Adobe eLearning World Conference I have demonstrated their power, even for unexpected uses. For each action I develop in my projects I always take a little time to reflect on this question 'Will this be useful as Shared action'? Result is that more than half of my actions end up to be Shared, not Advanced actions. My Libraries with useful shared actions are growing all the time, and have saved me already many hours of work.

In this article I will focus on tips for choosing Parameters to make the shared actions as flexible as possible. When saving an action as Shared action, you get a dialog box where compulsory and candidate parameters will appear:

  • Compulsory parameters: include all objects, audio clips, states... which you have in the advanced action dialog box, with the exception of literals and variables. You recognize them by the appearance of a yellow exclamation sign. When you add a description to such a line and indicate something as placeholder for the parameter the yellow sign is replaced by a green checkmark.
  • Candidate parameters: are the literals and variables which you find in a condition, or in commands like Increment. They get a green checkmark, but by using the checkbox you can convert them to parameters as well. 

Here is a screenshot of the dialog box for a toggle button. You'll see the compulsory and candidate parameters.  Description for the compulsory parameters has not yet been typed:

General Tips

Using several instances of one shared action to replace duplicate advanced actions leads normally to smoother projects, less risk of choking Captivate and even lower file size. However it is important to keep the number of parameters to assign on each instance not too high. Personally my goal is to have a maximum of 6-7 parameters. If you really need more of them, but appreciate the ease of transferring shared actions to new projects, remember that you can use each shared action as template for advanced actions. You can use that knowledge to create duplicate advanced actions if the number of parameters is too high. Labeling (see Tip 1) remains very important as well, because of the filtering (Tip 2) which is possible in the dropdown lists for parameters. You'll find some more tips below for the two types of parameters.

Compulsory parameters

Depending on the action using those parameters, they are either very specific (only one type) or they can be flexible and cover more than one type. Examples:

Show/Hide actions: they can aim at lot of object types. All graphics (bitmap or SVG), video, but also audio objects (invisible objects which have audio attached), learning interactions, but also Groups! These are probably the most flexible actions, and you may consider to replace a multistate object approach by Show/Hide for that reason.

Change State: not so flexible, they need always two parameters which are the multistate object and the state. Whenever possible try to use 

Go to Next State/Go to Previous State: you only need the multistate object as parameter

Assign can be used with 0, 1 or 2 parameters. You need 0 parameters if using two variables which are not defined as parameters, 1 if you have a literal which is no parameter or one variable defined as parameter, 2 if you have both literals/variables defined as parameters. 

Toggle: can only be used for Boolean variables, better choice than Assign because you have 0 or 1 parameter (the variable which could be defined as parameter).

Play Audio: needs an audio clip as parameter.

Apply Effect: only the object or group to which you want to apply the effect can be a parameter, not the effect itself. In most cases you'll want to use a custom effect to have the correct setup parameters.

Candidate parameters

Candidate parameters are variables and literals.  They appear in conditions, both for IF and WHILE setup, but also in the commands Assign, Increment, Decrement, Expression. 

Variables

If a variable in a shared action is not defined as a parameter, it will automatically be created when you import the shared action to a new project, including its Default value and description. One of the shared actions in my actions library is meant to avoid having to create much used variables in new projects. See this screenshot:

I also use that action as template for the many Reset actions needed On Enter for slides.

When you define a variable as parameter, this automatic creation will not happen!

Before defining a variable as parameter, you need to check if that variable is used multiple times in the action. Know that when assigning a variable to the parameter, it will replace that variable wherever it has been used in the action. I will try to explain by an example. If you ever created an advanced action for 'Forced View', where the appearance of a Next button is postponed until all clickable objects on the slide have been used at least once, this action for the first clickable object will look familiar:

In this project, the first clickable object is SV_Decision.  That object has a custom state showing Info, and acts as a toggle button. On a second click the Normal state will re-appear. Its tracking variable is v_1, a Boolean, which will get the value 1 on each click. On the slide 4 of those buttons need to be clicked.  For the three other buttons both the name of the button and the tracking variable need to be edited in a duplicate advanced action. The second decision checks the 4 tracking variables, shows the Next button if all have the value 1.

In this setup you cannot convert this action to a shared action. It would need 3 parameters:  the Next button, the button itself and the tracking variable. But if you replace the first variable by the second variable, that will also happen in the second decision, thus leading to a non-functional second decision where only 3 variables are checked. Have a look at this action:

In this action 2 extra variables are used:

  • v_counter: will be incremented only on the first click; that makes the third checking decision easier, and the tracking variable v_1 which appears twice can be replaced by any other tracking variable.
  • v_max: instead of the literal '4' this new variable makes the action more flexible. It can be used for any number of clickable objects on the slide. The value of v_max (4 in this case) can be assigned either directly in the Variables dialog box, or with the On enter action of the slide. You could also define that variable as parameter if you prefer.

Literals

Be very careful with literals as parameters. My replacing it by a variable in the previous example gives you a possible workaround. Especially if you have multiple literals in an action, defining them as parameters can lead to issues.  Look at this variant on the same situation described above:

It could be possible to define the value '4' in the last decision as a parameter, so that you can use the action for any number of clickable objects (alternative for the variable v_max). However, if you should define the '1' as parameter, changing it in an instance of a shared action would lead to changing it in 3 locations of the action! 

My recommendation: avoid defining literals as parameters!




Tip 4: Decisions (Advanced/Shared Actions)

Intro: Decision (tab)

The Advanced Actions dialog box in its default setup for a new action, shows  3 decisions with the generic names 'Untitled-1', 'Untitled-2' and 'Untitled-3'.It is possible to replace the generic names of course. In this screenshot they are marked by a red rounded rectangle. 

On top of the decisions to the left you see three buttons, which allow to Add decisions, Remove or Duplicate a decision.  There is no real limit to the number of decisions within one advanced/shared action. 

In the center above the decision names you find two buttons (blue rounded rectangle in screenshot above) which allow to change the sequence of the decisions by moving them to the right or to the left. That sequence is very important! First rule to remember when starting with Advanced/shared actions:

"All commands (actions) within an Advanced or Shared actions are always executed when the action is triggered. They are done always in the same sequence: top to bottom within a decision, left to right in the decision sequence."

Workflows which exist in most programming language to skip part of a long script do not exist. Forgetting about this first rule often leads to logical bugs!

Each decision can be converted into a conditional one by checking the option 'Conditional tab'. The word 'tab' is used there, but I largely prefer the original name 'decision' because Captivate has tabs in many locations, not only in the Advanced Actions dialog box. For a conditional decision, you have the choice between the classical 'IF-THEN-ELSE' which has two sets of commands (THEN, ELSE). One set be will chosen based on the result of the condition.
The WHILE condition leads to an infinite or finite loop. The set of commands will be executed after 1 second, based on the condition:
I would like to offer some tips now both to avoid problems and to streamline the choice of decisions taking into account the limitations mentioned before.

Tip 1: Combining standard and conditional decisions

This tip is based on my experiences with consultancy jobs and answering on the forums.

When starting to create advanced actions it often happens that too much commands are pushed into one conditional decision. I recommend to reflect: which of the commands (actions) have to be done independently of the condition? Those commands will appear in both  THEN and ELSE sections. In that case, take them out and put them in a separate non-conditional decision. 

Same recommendation when using multiple conditional decisions, if some commands appear in all of those conditions.

Example

This scenario appeared several times for debugging on the forums: 'Looping through a number of images  with their text, and showing a Next button after the first loop'.  The loop in this example is done with show/hide, not with a multistate object (which is easier however). Look at the original advanced action, meant for 3 images:

The second/third image and text are hidden in Output. The first image and text are visible. The result of this action is that the loop will not work, that each click on the button will always show the third image, while the counter will indeed loop and the Next button will appear as wanted. Reason is that the last conditional decision overrides the other decisions. Compare this with this solution:

In this action:

  • Texts and Images were grouped, to allow taking out the Hide actions from the conditional decisions.
  • A non-conditional decision was added before the conditional ones to hide the groups before the showing the text/image corresponding with a specific variable value. Moreover the (absolute) Assign command was replaced by Increment.
  • The conditional decisions show text, image. The last one needs also to show the Next button and reset the counter to its original value, which is 0. In that case you need Assign of course.


Tip 2: Multiple conditional decisions - make them mutually exclusive

When you have multiple conditions decisions in sequence (remember the sequence rule), avoid using the ELSE parts. You'll have less possible problems when using only the THEN part and write a conditional decision for each possible situation. If you use the THEN parts, there is a big chance that a later decision will overrule what has been done in the previous ones.

Eventually it is possible to use an ELSE part, but only for the last decision. You need to double-check if that THEN part will not mess up with previous decisions.

Example:

Using the same situation as for the first tip, there is no way to use the ELSE part of the decision 'Second' to replace the decision 'Third'.  The complete action would then look like this:

The result would be that the First decision would never be done, the second image/text never pops up and the Next button will appear after having viewed only the first and third image.


Tip 3: working with Tracking Variables

The first tip already showed how dangerous it is to change the value of a tracking variable within a conditional decision, if you have more than one of those decisions. In most cases it is safer to keep the value change in a non-conditional decision. You are probably aware of the three ways to attribute or change the value of a variable:

  • Assign: which I label as the 'absolute' way, and is valid for both strings and numerical values.
  • Increment/Decrement: often used when you also need a counter.
  • Toggle: typical for a Boolean variable, which is used for an On/Off situation. 

Here are two situations where you will need to have the variable value change within both parts of a conditional action (THEN and ELSE):

3.1 Toggle button action

Such an action will often have only one conditional decision and uses a Boolean variable for tracking. Have a look at this script, which will show/hide an object:

3.2 Non-eternal loop (WHILE)

Such a loop needs to have a way to stop looping. That is done with a tracking variable which needs to be changed within the actions which need repetition. Here is an example from a dice game. The dice number (random) is stored in a variable, and another variable stores the number of stairs which need to be climbed. The screenshots shows only the While decision of the action.




Tip 3: Show/Hide or Multistate object? (Advanced/Shared actions)

Intro

When talking about Advanced/Shared actions most developers think immediately about rather complicated scripts, with conditional branching. However the first reason to start using those actions replacing simple actions (from the dropdown list under the Actions tab) is that the commands have less restrictions when used in advanced/shared actions. Typical examples:
  • Show/Hide commands: when using those in a simple action you can only address objects residing on the same slide as the action. It doesn't matter which event you use as trigger: Success event of a button, On Enter event of the slide. That is not the case when using those commands IN an advanced/shared action.
  • State commands: are also restricted in a similar way. You can only point to multistate objects on the same slide. Another limitation which disappears when used IN advanced/shared actions.
  • Jump to slide command: when used as simple action it is impossible to point to the same slide as where the action is triggered. That is a show stopper when trying to Replay a slide. See the blog Replay/Reset Slide.

This blog will focus on the two first command groups. Although they are both used often for Click/Reveal actions, it is in a branching scenario, with a dashboard branching to chapters that the extended commands are especially useful.

Due to being able to access objects on other slides than the active slide, the dropdown lists can become very long. That is the reason why my first two tips were about Filtering and Labeling of course. 

In most courses the learner will be allowed to revisit slides. To allow that it is important to include that situation when setting up actions. 

Dashboard Setup

Situations

  1. The dashboard or menu slide has interactive objects - mostly buttons - branching to the different chapters in the course. 
  2. On the last slide of each chapter another interactive object will navigate back to the dashboard slide.
  3. The progress is made clear to the learner by adding an indicator to the dashboard slide for completed chapter. That indicator can be a checkmark, a different look to the chapter button, a progress bar... 
  4. Tracking full completion of the course is often required. After having taken all the chapters something will occur: a new button appears, navigation to a congratulations or recommendations slide,...

Show/Hide workflow

Add the checkmarks (or other objects) to the Dashboard slide, and hide them in output (eye button on Properties panel). Label them with a referenced to the chapter they belong to. I will use Check1, Check2, Check3....

Use these events and actions:

  • Buttons on the Dashboard slide (Success event) need a simple action 'Jump to....' pointing to the first slide of each chapter. Do NOT create a Visited state for those buttons, because such a state will appear immediately after the button has been clicked, not after finishing a chapter. This refers to situation 1.
  • Return button on the last slide of each chapter t(Success event). That will need an advanced or shared action with these commands:
       Assign v_1 with 1                                a Boolean user variable will be set to 1 to track completion of chapter (situation 4)
       
    Show Check1                                      to make the previously hidden checkmark visible (situation 3)
       
    Jump to Dashboard                             situation 2
    A similar action is needed for each return button. If you choose a shared action, the tracking variable (v_1), checkmark (Check1) and Dashboard slide will be the parameters.
  • On Enter event of the Dashboard slide will need a conditional action to complete situation 4:
       IF v_1 is equal to 1 AND
           v_2 is equal to 1 AND
           v_3 is equal to 1 ....
        DO.....                                               whatever you want to happen when all chapters are done at least once.
    This example is for a dashboard with 3 buttons/chapters. You can of course extend this for any amount of chapters.

This is the easiest setup, better than having a much more complicated script On Enter for the dashboard slide, which will check all chapters. I often see that still appearing during consultancy jobs.

If you want to allow resetting the dashboard slide (taking out checkmarks and toggling the tracking variables back to 0) during one  session, start by grouping the checkmarks in Gr_Checks. Use this action for the Reset button:
                 Hide Gr_Checks
                 Assign v_1 with 0
                 Assign v_2 with 0  
                 Assign v_3 with 0
                 Hide.....                      whatever you had popping up after course completion

Multistate object workflow

Add a custom state to each button on the dashboard slide, which includes the checkmark and eventually has a different style forr the button. Make sure to check the option 'Retain state on slide revisit'.

The same events are used as in the Show/Hide workflow. Even the same actions, except for the Return button on the last slide of each chapter:

  • Buttons on the Dashboard slide (Success event) same as in Show/Hide (situation 1).
  • Return button on the last slide of each chapter t(Success event). That will need an advanced or shared action with these commands:
       Assign v_1 with 1                                a Boolean user variable will be set to 1 to track completion of chapter (situation 4)
     
    Change state of Button1 to Done       to show the custom state (situation 3)
       
    Jump to Dashboard                            situation 2
    A similar action is needed for each return button. If you choose a shared action, the tracking variable (v_1), state (Done)/button (Button1) and Dashboard slide will be the parameters.
  • On Enter event of the Dashboard slide: same as for Show/Hide (situation 4)

If you need to reset the dashboard slide within the same session, the Reset button action will be bit longer:
                 Change state of Button1 to Normal
                 Change state of Button2 to Normal
                 Change state of Button3 to Normal
                 Assign v_1 with 0
                 Assign v_2 with 0 
                 Assign v_3 with 0
                 Hide.....                      whatever you had popping up after course completion


Next?

The choice of decisions, and its sequence are very important when creating advanced/shared actions. It will be the topic of the next tip.

Tip 2: Filtering (Advanced/Shared actions)

Intro

This second tip is closely related to the first tip about labeling. If you have read that post you'll have seen that good labeling could facilitate filtering for dropdown lists, using this screenshot. It shows the Parameters dialog box (Shared Actions) where filtering is used to limit the choices in a dropdown list.

Time to explain what I mean by the term 'Filtering'. Dropdown lists are all over Captivate's UI, not only in the Advanced/Shared actions domain. Some of those lists are sorted alphabetically, some are sorted chronologically (very annoying: most recent added item appears on top). They may show all items, but can have an automatic filter of items. That is the case within the Advanced Actions dialog box: when setting up a condition or a While loop, if you need to choose a variable, you'll only see variables in the dropdown list, for operators you only  operators. However, even when filtered and sorted alphabetically the lists can be very long and it takes time to find the proper item. Being able to reduce a list by manual filtering based on the names is a big timesaver! I remember older versions where searching was reduced to typing the first character, to scroll to the items starting with that character. That used to be the case for the variable dropdown list, reason why I started labeling user variables with v_ as first character, to differentiate from the system variables which started either with 'rd' or 'cp' (the first types disappeared from the lists).

Filtering workflow

It consists in typing a sequence of characters, resulting in displaying only items which have that sequence in their name. It doesn't matter where that sequence appears: at the start, at the end, in the middle. There is no case sensitivity, which is rather exceptional. Although names cannot start with a number, if you include a number in the name it will be very easy to use the number as part of the filter sequence. This will become easier to understand with some examples:

Show (Hide)

The dropdown list for those commands in advanced actions will show all objects on all slides, leading to a very long dropdown list. Using a filter and proper labels is very useful as you can see comparing these two screenshots of such an action before and after applying a filter. In this case the filter shows all groups, which are labeled as Gr_xxx

Change State

This screenshot (from the Memory game project) simplifies how to find the correct multistate object. In this case there were many multistate objects in the project:

Parameters

Although many dropdown lists are already filtered on the type of item needed, look at this example. You need to know that in the field here you need to click twice to be able to type in a filter: first click selects the field,  second click gets it in Edit mode (like with a text container). I added the Properties panel, because the label of the active button is used as reference for the 'active' button. Same example was shown at the start of this blog.

Availability of Filters

As you have seen the filters are available for all dropdown lists in:

  • Advanced Actions dialog box
  • Parameter dialog box

Too bad that it is not available for other dropdown lists:

  • Simple action (tab Actions)
  • Object actions (Drag&Drop)
  • Advanced actions list in the Advanced Actions dialog box (which would be very useful if you need to clean up)

Next tip?

It will compare the use of  Grouping (when using Show/Hide workflows) and multistate objects for similar goals.