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 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.

Simple Stopwatch with While Loop

Why?

Since a while I planned to:

  • explain the use of the Timer (or similar Hourglass) learning interaction
  • create a new example of using the While condition in an advanced or shared action

For some reason every blog I write about Timing (not timeline) seems to attract lot of viewers.  I have been using the Timer interaction several times, in combination with Time system variables. It is one of the rare interactions that allows you to have an action based on the expiration of a set time (jump to another slide) without having to play with variables and JS or advanced actions.

However that Timer interaction has several drawbacks:

  • You cannot pause.
  • You cannot control the start. It starts running whenever its timeline starts, even if it is hidden in output.
  • You cannot restart after a pause, since you cannot pause.
  • You cannot reset it.

Personally I am also bit frustrated by the While loop, because of the time lag between two executions of the command sequence in the loop. I could see a lot more possibilities if I could control that time lag. ‘Delay next actions’ is not always possible. However I suspected an unexplored possibility which I used in this example. Compare the time showed in the Timer interaction and the digital Stopwatch.

Have a look at the example file, it shows two very simple Stopwatches: a digital and an analog version. You are able to start them, to pause, restart after a pause and reset.  They are very simple, show only seconds.  Reason: for this first version I didn’t want to use JS, everything is done with advanced (or shared) actions.

The workflow step-by-step will be explained in a blog post. You’ll learn how to ‘break’ an eternal loop created with a While condition.

Example project

It is not a full course, only to show the created Stopwatches. There are multiple possibilities to include such a stopwatch in a course: to allows the learner to check time spend on slides, questions. Since the time is stored in a user variable it is also possible to use that to calculate total time…  I would appreciate your ideas. You can watch the project from this link (rescalable) or the embedded version:



While loop

Although this feature appeared with the refurbished Advanced Actions dialog post in CP2017, I rarely see projects using the While loop except for some games.  Such a loop can be eternal or limited to a a specific number or repeating commands. It is always based on a condition, but the result is different from the older ‘IF’ condition.
  1. Eternal loop:  uses the condition ‘IF 1 is equal to 1‘ or something similar, which results always in a positive result. The specified commands will repeat continuously. However! Contrary to the default behavior in advanced actions, where all commands run immediately and in sequence (top-down and left to right through the decisions), the commands in a While loop will be delayed for 1 second before the next run. It is this feature which I have used for the stopwatches.
  2. Limited loop: will need at least one variable. The condition ‘IF var is less than 6′ is an example. The variable ‘var’ needs to start with a number which you define in the variable definition or by another action. The variable will also need to be changed inside the commands. In this case it will probably be done with ‘Increment’. If var starts at 0, the commands will be run 6 times. In this case as well there is a delay of 1 second after each run.

Breaking a loop?

To break an eternal (or limited) loop, you need a combination of two conditions with the AND operator. The second condition will probably refer to a variable. I used a Boolean variable as you’ll see below. That variable needs to be changed by another action. Example:

IF 1 is equal to 1 AND
     v_stop is equal to 0

As long as the variable v_stop has the valueo 0, the loop will continue. But if the variable is toggled to 1, the loop will be broken.

Workflow Step-by-Step

Variables

No system variables were used, just 3 user variables:
  • v_time: stores the number of elapsed seconds. It starts with a value of 0, also after Reset.
  • v_stop (Boolean) has a default value of 0 and is used in the combined condition of the While loop. It will be toggled to 1 when the Pause button is pressed.
  • v_start: stores the frame number of the first frame of the slide. It is necessary for the Reset functionality, where I used the workflow described in this recent post ‘Replay or Reset‘.

Events and Actions

EnterAct triggered by the On Enter event

Both v_time and v_stop are reset to their default values (0). The frame number in v_start is needed for the Reset action.

Start actions triggered by the Success event of the Start buttons

These actions are slightly different for both stopwatches. This is the digital version:

The button used in this version has a custom state to replace the Normal state when the Pause button is used. It has the text Restart. The variable v_stop needs to be reset to 0, because it could have been toggled to 1 when the Pause button was used.

The combined condition for the While loop has been explained before.

The version for the Analog stopwatch:

Needle is a shape with a transparent part to be able to apply a rotation effect. The technique has been described in this blog ‘Reference point in Captivate‘.

The rotation effect was defined as a custom effect. If you want more information, have a look at:

How to use a Custom effect in an (advanced) action

ResetAct, triggered by the Reset buttons

As explained in the Replay/Reset blog, this action needs only one command:

In this use case the Continue command is superfluous, since Captivate is waiting from the first frame for a click on a button.


Embed Software Simulations (Knockout slide)

Intro

Over 10 years ago I posted a blog 'Create/Use a Knockout Master slide'. At that moment SWF was the only way to publish a Captivate project, and in versions 5 and 5.5 Themes were not ‘grown up’ yet to their present power. Meanwhile I have pointed many users to that old article, and many claimed it was still useful. However time to clarify the slight differences and offer updated tips., Of course I will use a HTML example. 

Example Tutorial: 'Shared actions as Template'

This is a Captivate tutorial explaining how you can use a Shared action to create variables and as template for advanced actions. There are two versions. Here is a screenshot showing the difference in sim slides between version 1 (Full-size) and 2 (Embedded)

Version 1: Default software simulation

Personally I never use a software simulation in Demo mode, because it is better replaced by a Video Demo for its quality and advanced editor. I created a Training simulation, meant to learn about this Captivate topic. The UI of Captivate is rather complicated, hence my choice of a resolution 1600x900px. The ratio is important, here the common 16:9. In the limited space here, I don't want to embed the simulation because that would be almost useless. I published it as a HTML rescalable project. You can watch it using this link:

Full-size tutorial

In this first version, instructions are given using Audio. The captured Backgrounds (see Library) are filling the slides. Although this tutorial is rescalable, you will realize that using this on the limited space of a smartphone with a phone browser is not appropriate. It may be used on tablets (no incompaté:ible features), but the preferred devices are laptop/desktop. 

Version 2: Embedded in a content slide

I used the workflow explained below to create a second version, where the software sim slides are rescaled and embedded in content slides (1280x720px). On those slides there is space for a logo and more. The narration was replaced by text instrutions on the same slide as the software sim. Published project is also rescalable HTML. Even a tablet will probably be impractial in this version. Use this link:

Embedded tutorial


Setup for Embedded sim slides

For this example the simulation slides need to be embedded in a project  with a resolution of 1280×720 pixels. The captured slides were created with a resolution of 1600x900pixels, which is larger than the final resolution.  

To embed the sim slides, they need to be rescaled. If the original simulation slides have the correct resolution ready for embedding, you can skip Step 0.

Step 0 in Captivate (only if captured resolution is not correct)

Rescaling the software simulation to 2/3, which leads to a resolution of 1066x600px. You choose the resolution needed for your project, but keep 'Maintain Aspect Ratio' and 'Rescale all objects'.  Those are the default settings.

Step 1 (in Photoshop or other app) – create the Knockout image

In Photoshop I created images on two layers: the first one (FullTexture' will be used for normal content slides, the second one is the 'Knockout' image which has a transparent part.  Size of the file is same as the end resolution (1280×720). I used one of the provided textures in Photoshop as Fill. In the second layer I deleted a rectangle of 1066x600px to create a ‘knockout’ part in which the sim slides would fit. You see the size of the margins (with texture) in the screenshot: to the left – a vertical bar with a width of 200pixels, to the right one with a width of 14px; at the top another with a height of 90 pixels and a the bottom a bar with a height of 30 pixels. 

You can import the Photoshop file, and will have both layers as PNG images. See 'Roundtripping with Photoshop'.
You can use another graphics application if you cannot use Photoshop. You could also create a freeform filled shape in Captivate, start with the hexagon, which has 6 points.

Step 2 (in Captivate) 

Some maths to start with:
  1. calculate the difference between the widths of the vertical bars:     200 – 14 = 186 pixels
  2. new width project will be 1066 + 186 = 1252 pixels
  3. calculate the difference between the heights of the horizontal bars:   90 – 30 = 60 pixels
  4. new height project will be 600+ 60 = 660 pixels
Rescale the project using these settings:
  • deselect ‘Maintain aspect ratio’ and introduce the new dimensions
  • under ‘New Size is Larger’, select ‘Keep project the same size and position project Bottom Right; I choose this because the bottom bar and the right bar have the smallest dimension; you can choose another option if your smallest margins are elsewhere.

The result will look like this:


Step 3 (in Captivate)

 Rescale now to the final size, for this example to 1280x720 pixels, with settings:
  •  deselect ‘Maintain aspect ratio’ and introduce the final dimensions
  • under ‘New Size is Larger’, select ‘Keep project the same size and position project Center

After this rescale of the project it will look like this:

Step 4 (in Captivate): Master slides

 In the original blog post it was possible to create a master slide which is partially transparent, but that is no longer possible in the present versions with the Themes (new since Captivate 6).  Here is the master slide panel, where you see some master slides of the custom Theme 'Knockout' which I created:

I used the two imported PNGs from the Photoshop file to create:

  1. The Main master slide, where the FullTexture image is set as background image. You see the setup in the Properties panel:
  2. Based on that Main master slide, I created some content master slides. You see acouple of them in the master slide panel above (Title, Light). The Blank master slide always has to remain Blank, it is not using the Main master slide.
  3. The Knockout master slide. You cannot use the KnockoutTexture image as was done in the Main master slide, it needs to be a separate image as you can see in the Timeline and in the Properties panel. I added some objects and placeholders:

Step 5: Apply Knockout to simulation slides

Up till now the simulation slides used the Blank master slide. Change the master slide to the Knockout Master slide. It is very important that you do NOT check the option 'Master slide objects on top', because you'll lose the textured parts of the image.





Retake (quiz) Tweaks

Intro

In the recent weeks a lot of questions about tweaking Quizzes appeared. 

Themes, Timelines and Shared actions are amongst my favourite topics, and I needed a long sample project, for this blog about combining two tweaks for Retake Quiz:

  1. The quiz slides are not all in sequence, but distributed in the project in between content slides. How can the learner see only the quiz slides during Retake, not the content slides which are in between the quiz slides?
  2. On the score slide on failure, how to offer the learner the choice between Retaking only the quiz, or retake the full course including all content slides?

Sample Project

This project has 3 sequences of quiz slides in between content slides. Question slides have one attempt, on Quiz level you have 6 attempts. On the score slide you have the possibility to Retake quiz, or to choose to retake the course. When passed or after the last attempt on quiz level, you have the Review functionality, using the customized Review message described in an other article Customized Review Message.

In this example project design elements (not interactions) from the Quick Start Project “Wellbeing” have been used. You can watch the embedded version below or use this link to watch a scalable one.


The project was created with:
  • 5 advanced actions
  • 6 shared actions, replacing 45 duplicate advanced actions

In this post I will only explain the actions for the two Retake Tweaks, not the actions for the multiple Forced view cocntent slides.

Workflow

Situations and events

In this course 3 different situations occur for the quiz:
  1. First view: the tutorial will be followed as designed. It is not a linear course, because the slide with the 3 topics is a sort of dashboard, from which branching occurs. Each branch ends with a question slide. The return to the dashboard slide is configured using the Success and Last Attempt action of that last quiz slide.
  2. Not first view with Retake Course: is a Retake but including all content and quiz slides. All quiz slides, and the dashboard (Topics) slide need to be reset to their initial state. Difference with 1: the number of attempts on quiz level.
  3. Not first view with Retake Quiz (only): this is the default Retake situation, but needs actions to skip the content slides situations in between quiz slides.

This screenshot of the Advanced Interaction panel shows the relevant interactions and events needed to cope with those 3 situations; the relevant actions are marked with a colored highlight box:

There is one special Advanced action, invisible in this panel: On Enter event for the first question slide has an advanced action FirstQuestion. On Enter actions for question slides do not show up in this panel, because the Success column is linked with the Success action of the question slide.

Variables

There are several reusable variables (v_1, v_2…. and v_counter) needed for the multiple Forced View content slides, and the system variable (cpInReviewMode) for the custom Review message. For the Retake tweak workflow these variables are used:

  • v_course: has a default value of 0. That value is valid for situations 1 and 2, where content slides need not to be skipped. The variable will be toggled to 1 for situation 3, where content slides need to be skipped.
  • cpQuizInoPassFail and cpQuizInfoAttempts: both quizzing system variables
  • v_themev_timelinev_shared  are used to track the completion of the three topics, on the Topcis slide (3). I mention them because they will appear in the advanced action EnterTopics.

Actions

EnterTopics (Advanced action) triggered On Enter for slide ‘Topics’

This action checks the values of the variables associated with completion of the three chapters. Only when all have been visited, the learner will be navigated to the score slide. That score slide shows the results of the complete quiz.

There was no possibility to use the variables (v_1, ….v_6) on this slide. Since the action is only used once, it made no sense to use a shared action neither. For situation 2, this Topics slide needs to be reset. Reset is happening with the RetakeAct action (see further).

FirstQuestion (Advanced Action) triggered by On Enter  First question slide

Only the second decision (RetakeCourse) is relevan for the Retake tweak, first decision is for the custom Review message. That second decision is required for Situation 2. Since the Retake button is used in that situation, by default the learner will be sent to this slide, the first question slide. But in Situation 2 the learner wants to see the full course. For that reason learner is redirected from the first question slide to the Topics slide.

EndQuestion (Shared action) for Success and Last Attempt of last question in each sequence

Each decision corresponds with a situation (same sequence as situations).

This action skips the content slides in Situation 3 – ‘Decision SecondNormal’. In that situation the last question will be followed by the first question in the next sequence of questions. The two other decisions - situation 1 and 2 - navigate to the Topics slide.

There is one exception: the last question slide of the last sequence needs to navigate to the score slide. I could have used the same shared action and give the second parameter the value of the score slide. However due to my experience with low bandwidth situations, it is better to use Continue for the Success/Last Attempt actions on question slides. For that reason, I used the shared action as template to create one Advanced Action:

EnterScore (Advanced Action) On Enter for score slide

As explained under Variables, the user variable v_course is tracking whether a normal Retake will be done, or a full course Retake. Of course the button to Retake full course is not needed when the quiz is passed. If the learner failed, the value of v_course is toggled to 1. That stands for a normal Retake (no content slides). The start value was 0, which meant that all slides were viewed the first time. That value will be reset to 0 by the RestartAct.

RestartAct (Advanced Action) for Success Event custom button (Bt_Restart)

If the learner fails, Bt_Restart will appear on the score slide. It is a shape button, having the same look (style) as the Quiz buttons. It will trigger this action:

It is a standard action, inviting the learner to click the Restart button.  At the same time it will reset the variables for the course situation (v_course) and for the items on the Topics slide, both variables and states. That slide was the only ‘forced’ slide where the ‘Retain State on Slide Revisit’ was checked, hence the need to reset the states.

The state change for the button is to pop up the explanation text, inviting to click the Retake button. As usual I did drag the Review button under the Retake button. Review button will only appear after the Quiz is Passed or all attempts on Quiz level are exhausted.

Possible extensions

It would have been possible to restrict the Force View on the content slides to the first view. That workflow is described in these two posts presenting yet another Shared action:

Force First View

Advanced to Shared action

Of course Narration could have been added as well. And that same shared action could also improve the second view of a content slide by skipping that narration with the same micro-navigation.


Editing Ready-to-go slides (Quick Start Projects) - part 2: Interactions

Intro

Many users wanting to take advantage of the Ready-to-go slides available through the Assets panel in 11.5, are blocked when trying to customize those slides. In a previous article I offered a step-by-step workflow to find texts or images you want to replace by your text or images. That was not so hard, and you learned to use several panels (Timeline, Master Slide, Object States, Library).

For Interactions the situation is more complicated. You will not find a complete 'How-to' in this blog. Some interactions are rather easy to understand and customize, other interactions however need an in-depth knowledge of Advanced actions and variables. Those slides never use Shared actions, which would be easily found in the Project Library. This blog will try to help you identify the components (actions) of the interactions, how to 'read' them and tips for customizing. The workflow will be explained using a Knowledge Check slide from the project 'Alliance'. The interaction can be told to be of intermediate level. Understanding this workflow will allow you to customize easy and intermediate level interactions. For more complicated interactions this may not be sufficient. Maybe find help from someone experienced in Advanced actions.

Step 1: Find Interaction components

On the slide with the Interaction to identify, open the Advanced Interaction panel from the Project menu or with the shortcut key F9. The slide will be selected in that panel and with the default setup you will see all the actions in that slide, and the events to which they are attached. Here is an example:
The selected slide is slide 26, labeled Knowledge Check in the Quick Start Project 'Alliance'. You see in the table that the On Enter slide event has no action attached, the field 'On Success' on the slide line mentions 'No Action'. This means that the interaction is only created using Success events of interactive objects, which you can also find in this panel.

The level below slide level shows all interactive objects and their Success actions (when clicked) in the 'On Success' column. In this case 5 Smartshapes have been defined with the option 'Use as button' and they all trigger an Advanced action. From the labeling of the objects and the actions you can suspect that 4 of those advanced actions are similar (on shapes KC1 - KC4) and one is unique (on the unlabeled Smartshape). When you select one of the lines associated with an interactive object, the object will be selected on the slide. 

Step 2: "Read" actions (components of interaction)

Let us continue with the same slide from the Alliance project. Select the object KC_1. Its Properties panel shows up, switch to the Actions tab. Open the Advanced action 'KnowledgeCheck_Select1' by clicking the Browser icon. It shows a list with 5 lines, which I will label as 'commands':

The first command line 'Assign.... true': gives a value 'true' to a user variable 'sales_knowledgeCheck_correct'. The name of this variable indicates that it needs to be true for a correct answer, 'false' for a wrong answer. You can check this by reading one of the actions on the three other objects (KC_2...KC_4), where you will read that the given value is 'false'. 

The other command lines are used to change states for the objects, to indicate which object has been selected (active). You can find more explanations about multi-state objects in the first part which I mentioned in the intro.

Open now the unique action 'KnowledgeCheck', linked to the unnamed Smartshape_337. In the Timeline you can see that it is the Submit shape button.  In the Advanced Actions dialog box you see that this is 'conditional' (marked in red). In that case "reading' will be easier if you switch to the Preview window, which you do with the arrow button top right, which I marked with a green box:

In the Preview window you see that the state of two multistate objects will be changed depending on the value of the user variable sales_knowledgeCheck_correct. Identifying those multistate objects allow you to edit the states as explained in the first blog.

Step 3: Customizing examples/tips

In the example the first answer is deemed to be correct.  You can move the shape buttons KC1-KC4 around, to put the correct answer in another location. No problem, the interaction will continue to work as expected.

Less answers

You can safely delete one of the wrong answers in this particular use case. That may not be the case for all interactions. Here however the final action (Submit button) is in no way checking or taking into account the number of answers. You only need at least one correct and one wrong answers.

More answers

If you want an extra answer, you'll have to decrease the size of the answer shapes KC1-KC4. For the 5th answer you can duplicate one of the answers with the right-click menu or the shortcut key CTRL-D (Cmnd-D on Mac). Use the Align options (or toolbar) in the right-click menu to put everything in place. The name of the duplicate answer will probably start with KC_ as well, but not necessarily be 'KC_5'. You don't need to edit the name but I did so (Properties panel) just to clarify. That duplicate answer will have the same states as the source answer. You can check using the Object State panel.

It is however necessary:

  1. To edit the existing action for the four older answers, because the state change for the new answer needs to be added.
  2. To create and edit a duplicate advanced action for this new answer.

Editing actions KnowledgeCheck_Select1....

Open one of those actions using the Browser icon in the Actions tab (see Step 2 for a screenshot).

The first command line is fine. The Change State lines set the state for the selected answer to Active, the other answers get state Normal. For all those actions a sixth command is necessary to set the state of the new answer to Normal. Steps for KnowledgeCheck_Select1 are indicated in the screenshot below and you'll find the numbers in the explanation:

  1. Select the last command line
  2. Use the Copy button
  3. Move to the next empty command line
  4. Use the Paste button
  5. Double-click the empty third field and type KC: only the items having KC in their name will appear. Remember: I named the new answer 'KC_5'
  6. Choose 'KC_5'
  7. Click the down arrow in the next field.
  8. Choose the state 'Normal'.
  9. Click the button 'Update action' at the bottom and the action is complete now, including the 5th answer.
  10. To save time editing the three remaining actions, use the Copy button again on the last command line which sets the state to Normal for the last answer KC_5..

Switch to the action KnowledgeCheck_Select2 using the top right dropdown list:

Go immediately to the first empty command line and use Paste (step 4), and save the action (step 9)
Repeat step 10 and do the same for KnowledgeCheck_Select3 and KnowledgeCheck_Select4.
Do not close the Advanced Actions dialog box, you still need a fifth action.

Creation of KnowledgeCheck_Select5

The new action will be created as a duplicate of KnowledgeCheck_Select4. Select that action in the Advanced actions dialog box, follow the steps in the screenshot below

  1. Duplicate the action
  2. Edit the name to KnowledgeCheck_Select5
  3. Set the state of KC_4 to Normal instead of Active
  4. Set the state of KC_5 to Active instead of Normal
  5. Save the action and close the dialog box.

You still need to attach this new action to the answer KC_5 and you are ready for testing:

Tip: if you want to explore the Advanced Actions dialog box, you can read this blog.

More?

This is only one example of customizing a Ready-to-go slide. Some interactions are more complicated in those projects, some are easier. If you are in for a challenge, look for the Flipcard interactions, Glossary interaction or some Click/Reveal interactions. 

Do not hesitate to post questions, comments if you are stuck. If possible I will try to help.

Replay/Reset slide 2 (Captivate tutorial)

Intro

Recently I published a blog about what seems to be 'hot' topic: how to replay a slide, how to reset a slide. That blog didn't include an example file.

When coaching a training I often use Captivate tutorials, more than videos. This particular topic needs such an interactive approach, to allow to experiment, to get a 'feeling' of the difference between Replay and Reset (with or without an On Enter action). For learners I provide the cptx-file. Here I will only share the HTML5 published output. 

You will see that I borrowed design elements from the Quick Start Project 'Safety'. The interactions were created from scratch.

Content and Tools

After a short rehearsal of terminology and the step-by-step workflows you'll be able to see 4 different examples:

  • Slide 5  which is only based on the Timeline: staggered objects and effects. 
    The info button will show you the Timeline and a relevant part of the Advanced Interaction panel
    This slide is followed by a T/F quiz slide to check your observations.
  • Slide 7: click/reveal slide, using multistate objects. The info button shows you the same information as for slide 5
    This slide is followed by a MCQ slide with multiple correct answers, to check what you learned.
    Both quiz slides are Knowledge Check slides. If you want to cheat you can go back to the previous slide. Navigation by TOC is also possible. The TOC is in overlay mode.
  • Slide 9 : flipcard slide (with thanks to the QSP Alliance). Rather simple but worth seeing the difference between Replay and Reset.
  • Slide 10: Drag&Drop slide set up as Knowledge Check slide.

You may detect several techniques like Forced view, which need using some user variables. Quiz slides do not use the default two-step Submit process, but show a Continue button when the Submit button has been clicked. 


Tutorial

You can watch the embedded version, or use this link to play a scalable version. I recommend to use the link. The embedded version seems to have long loading times. 



Animations?

You may have missed animations in the tutorial. There is a reason. While it used to be possible to Reset an animation, that feature is broken in the version 11.5.1. At least for the animated GIF which I created. I have already been searching since a couple of weeks for a workaround without success. I will create an OAM as well, to check if has the same issues. Too bad, it was a fun animation: