Playing with Numbers - part 1

Intro

How to use Adobe Captivate to create a course for simple calculations, has been popping up on the forums several times. You can use Text Entry Boxes, MCQ's to reach that goal, but that is pretty limiting. Some examples can be found in this older blog post where the real goal was to have the score being linked to the attempts.

I started using JavaScript in Captivate projects since the release of the common API for JS (version 8) whenever the advanced actions did lack the wanted functionality. For those who want to start using JS, I wanted to explain some very simple use cases in a sequence of 4 articles that will focus on the 4 basic operators that are available in the Expression command: sum, subtract, multiply and divide. Each of the posts will introduce a JS example. The Expression command is not available as a simple command from the dropdown list in the Actions tab, it is only available in advanced/shared actions. 

This article will focus on the Sum operator, and introduce JS to make it possible to generate random numbers. You'll also see how to assign that generated number to a Captivate variable with the function setVariableValue from the API. That will allow to use the same slide for several sum questions. I will use the Multi-state object feature of Captivate 9 several times as well. In the next parts you'll also learn about retrieving a Captivate variable value with getVariableValue, how to format a number to specific number of decimals, how to avoid dividing by 0 (zero).

Scenario Summing slide

User will be allowed to choose for sums consisting of 2 up to 4 terms. The number of terms can be changed after completion of one exercise.

For a correct answer, the stick figure will change to another state, and a star will be added to the progress bar (also a multi-state object). For an incorrect answer the stick figure also changes to a state but no star will be ended to the progress bar.

After completion of 5 correct sums, the stick figure will change to a Next button. The user could still add more questions, but no more 'stars' will be added to the progress bar. 

In this screenshot, from HTML output, you'll see the situation after one successful answer, second sum has been created with 4 terms:

Used objects

Multi-state objects

Stick Character: see image Object States in Library below

OK/New shape button: see image Object States in Library below

Progress bar: see image Object States in Library below 

Special objects

Radio buttons - works perfectly for SWF output but formatting is not preserved for HTML output; labeled "Wd_TermNumber"

Scrolling Text interaction for SWF output, labeled "Wd_SumResult". It is possible to change the shown content in this interaction by changing the associated variable (v_result). However that functionality only works for SWF, not for HTML output. For that reason I needed an alternative which is a  

Text Entry Box, labeled "TEB_result" combined with the CpExtra widget and a specific command variable for HTML output. Since there is a bug in Captivate 9, which prevents using a TEB multiple times on a slide, I used a workaround. The default Submit button was deleted. It was replaced by a custom shape button (SB_CheckSum in the timeline) to trigger an advanced action. In this case an easy workaround, since I used that same shape button for the Scrolling Text Interaction for SWF output. The associated variable for the TEB is the same as for the Scrolling Text Interaction (v_result). Nothing had to be changed to the advanced action 'CheckSum' when replacing the Scrolling Text Interaction by a TEB.

Variables

v_one, v_two, v_three, v_four: will get the values for the (possible) 4 terms of the sum which are generated by the advanced action 'SumTerms'

v_result: will store the result value typed in by the user in the Scrolling Text interaction (SWF) or the TEB (HTML)

v_check: will be calculated and used to validate the result given by the learner in the advanced action 'CheckSum'

v_progress: is a counter for the correct answers, will be used to change the state of the progress bar

v_null: empty variable used to clear the content of the displayed result for a new sum (see Where is Null?)

xprefTEBUpdateFromVariable: only for HTML output, one of the CpExtra variables. When assigning the value 1 to this variable (with CpExtra widget loaded either in the file, or headless) it is possible to change the associated variable of a TEB by an action, and it will be reflected immediately in the TEB. I used this to clear the result when defining a new sum.

Advanced Actions

In this particular case it was not possible to use shared actions. Two advanced actions, both conditional, were needed:

SumTerms, triggered by the OK button (SB_Terms) after choosing the number of terms

This conditional action has 4 decisions, the first 'Always' is a mimicked standard action (will always be executed), prepares for a new sum by clearing the result and the terms. It also resets the state of the sticky character.
The three other decisions will show the correct number of terms, based on the choice made by the user. In these decisions, a Javascript command is used to generate random numbers (see later).

CheckSum, triggered by the Check button (SB_CheckSum) to validate the answer

This conditional action has 7 decisions, the first 'Always' is a mimicked standard action (will always be executed). It will calculate the sum and store the result in v_check. Since non-used terms are cleared for a new sum, it is possible to calculate always the sum of the 4 terms. Three Expressions are needed, because advanced actions have no functions.

The second decision 'Checker', will check the entered value (v_result) with the correct value (v_check). It is the only decision with a Then and Else part. For correct answer, the state of the sticky character is changed, the counter (v_counter) is incremented,  the state of the button SB_Terms is changed to another state and enabled again, while the button SB_CheckSum is disabled. For an incorrect answer, the counter is not incremented, and the sticky character is changed to another state.

The 5 other decisions 'ProgressXxxx' check the value of v_counter and show the appropriate state for the progress bar. The last decision 'ProgressFive' will also change the sticky Character to its state GoNext and enable the click box to proceed to the next slide (subject of the next blog post, with Subtract exercises).

JavaScript for random numbers

In the documentation provide by the Captivate team about using the common JS interface, you'll find a description of creating random numbers:

Common JS Interface

In this example I wanted to generate a random number between 10 included) and 100 (not included). The script window for the decision 'TwoTerms' of the action SumTerms (see above) had to generate two random numbers, to be stored in v_one and v_two; for the decision 'FourTerms' 4 variables had to get a random number:

Short explanation of this code:

The JS method Math.random() generates a decimal number between 0 (included) and 1 (not included).

The multiplication Math.random()*(100-10) will result in a random (decimal) number between 0 (included) and 90 (not included).

The sum Math.random()*(100-10) + 10 will result in a random (decimal) number between 10 (included) and 100 (not included).

The JS method Math.floor(e) will cut off the decimals of the argument e, round iit down to the nearest integer. As a result the full expression used in the JS window  Math.floor(Math.random()*(100-10) + 10) will result in an integer between 10 (included) and 99 (included). 

The method from the common API setVariableValue(x,y) allows to assign the value from the second argument to the variable indicated in the first argument. Beware: the variable name has to be identified as a string (text) by putting it between single or double quotes. For the value, which is a number, you can use the expression explained above. It is a method of the cpAPIInterface which is in the window object. That explains the total line of code, which in JS always ends with a semicolon:
window.cpAPIInterface.setVariableValue("v_one", Math.floor(Math.random()*(100-10) + 10));

Conclusion

You will be able to download the published files - both for SWF and for HTML, when the 4 articles are ready. If you succeeded reaching  this conclusion, you have won your first star!  Three more to go :)











Knowledge Check Slides - tips

Intro

Knowledge Check Slides have been introduced as one of the new quizzing features with version 9. The Help documentation is 'spartan' as usual. You can read this as Features (quote from the Help):

  • Knowledge check slide imbibes similar features of question slide without any results, reporting structure and interaction ids. 
  • Knowledge check slides do not participate in reviews. 
  • Random questions are not applicable to this knowledge check slide. 
  • Master slide and controls usage is similar to question slide. 
  • Knowledge check slides can be used to impart the learning on specific topics. 

I explored those KC slides in preparation for a workshop about new Quizzing features, and want to give you some more tips. Since the KC slides are very similar to normal quiz slides, I'll start with 'Recognizing KC slides'. Then I'll show the differences in default setup, and in some other aspects not mentioned in the Help,  the relationship with the quizzing system variables and - what did you expect? - a tweaking tip.

Recognizing KC slides

This is possible in different locations:
  • in the Filmstrip, KC slides get a special indicator at the bottom right, which the Quiz slides do not have; in this screenshot slides 1&3 are KC slides and have that indicator:
  • in the Quiz Properties panel you see more differences with normal quiz slides, most are due to the fact that KC slides are not scored by default:
  • The mention (KC) next to the type of question
    The lack of the possibility to choose between Graded and Survey (because KC slides are not scored)
    No partial scoring for MCQ slides with multiple correct answers 
    No points
    No penalty

  • in the Advanced Interaction panel you don't see a specific indicator. The score of the KC slides is set to 0,  they are not set to be reported but... contrary to what the Help tells, the KC slides have an individual Interaction ID. This is probably not used. Look at this screenshot:

There is no way to convert a KC slide into a question slide, nor a question slide into a KC slide!

Default setup KC slide

The default settings for a KC slide are bit different from those for a question slide:

  1. For a KC slide only the Incomplete feedback message is activated, not the Correct message as for Quiz slides
  2. For both KC and Question slide only the Submit button is checked off. The Back, Skip and Clear buttons can be activated, but they are not by default.
  3. Attempts are set to Infinite, with the Retry Message enabled. For question slides by default Attempts is set to 1. Because the attempts are set to infinite, you don't have a Failure message enabled for KC slides. You can decrease the attempts and in that case you can provide up to 3 Failure message, same as for Question slides.

You read in the Help that KC slides will not be visited during Review, they are not in the Quiz scope, except of course if they are nested in between normal quiz slides. Contrary to Pretest slides, the KC slides will not prevent navigation by playbar or TOC.

It is not possible to use question pools (see Help), random questions but it is also not possible to use GIFT format to import KC slides. 

Some options in the Quiz Preferences do work for KC-slides: if you check the option to Hide Playbar in Quiz, this will be valid both for question slides and KC slides. Unchecking the option 'Allow Backwards Movement' will only prevent backwards movement on question slides, not on KC slides. However, KC slides do not get a Progress indicator! IIf you want a progress indicator (question X of Y) you can have a look at this older blog post..

When you leave a KC slide, it is reset immediately which is not the case for question slides which are frozen until a new attempt on Quiz level is started. In that way a KC slide behaves like a Drag&Drop slide that is not set to be reported, had no score. There is no possibility to freeze the answer on a KC slide, which may be a game stopper sometimes.

As the Help mentioned, design of the KC slides depends on the same master slides as the normal question slides, with the exception of the new Review buttons which will never appear on KC slides. For navigation on KC slides you can use the Back/Skip buttons or add custom shape buttons.


System variables 

Contrary to the Pretest slides, there are no specific system variables available for Knowledge Check slides. I have been looking for quizzing system variables that do get a value from a KC slide. Here is an overview of the variables that are not used by KC slides:

  • cpInQuizScope and cpInReviewMode, both Booleans will not be toggled from the default 'false' to 'true' when you enter a KC slide. If the KC slide is in between normal question slides, it can be 'true' but that is not due to the KC slides.
  • Variables linked with scoring are not used: cpInfoPercentage, cpQuizInfoLastSlidePointScored, cpQuizInfoNegativePointsOnCurrentQuestionSlide, cpQuizInfoPassFail, cpQuizInfoPointsPerQuestionSlide, cpQuizInfoPointsscored, cpQuizInfoPartialScoringOn, cpQuizInfoTotalProjectPoints, cpQuizInfoTotalQuizPoints 
  • cpQuizInfoAttempts: gives the attempts on Quiz level, as specified in 'Quiz Preferences, Pass or Fail'. Those attempts have no sense for KC slides, since the user can come back as many times as he wants to retake the KC question which is always reset when leaving the slide.
  • cpQuizInfoPassPercent and cpQuizInfoPassPoints: since KC slides have no score, those settings of the Quiz Preferences have no meaning for KC slides.
  • cpQuizInfoTotalQuestionsPerProject: contrary to the Pretest questions which are counted in this variable, as are the normal Question slides, the KC slides are not included in this variable. Same for the variables cpQuizInfoTotalCorrectAnswers, and cpQuizInfoTotalUnansweredQuestions

As you see not many variables are used by KC slides, but some are used! Moreover they can be very useful if you want to do more with KC slides:

  • cpQuizInfoAnswerChoice: one of my favorites as you could read in this old blog postIt can be used to tweak the work flow with KC slides as you'll read more later on. One exception: it is not populated when you use Advanced Answer option.
  • cpQuizInfoMaxAttemptsOnCurrentQuestion: can be useful as well, although having a similar system variable to cpQuizInfoAttempts for current attempt on question level would be even better. You need a user variable as a counter for attempts on question level. If you keep the default setting of Infinite attempts, this variable will have the value 32767 (no idea why?).
  • cpQuizInfoQuestionSlideTiming and cpQuizInfoQuestionSlideType are available for KC slides as well.

Tweaking tips

Here are some tips, which I tried out with success but will not explain in detail.

  1. If you do not want to keep the Attempts set at Infinite, but to a limited number it would be possible to count the number of correctly answered KC slides. Create a user variable v_counter with a default value of 0. Use the Success action of the KC slides to increment that counter. Later on you can show the obtained value for v_counter, and even use that value in a conditional action to offer feedback or navigate the user back to content slides.

  2. There is no Review possibility for KC slides as mentioned. If you offer limited attempts on question level, you could show a custom feedback message on the KC slide for the questions answered correctly, something like 'You have answered this question correctly'. When simulating a 'Review' situation, the user will be invited to answer only the KC questions that do not show that message. Be careful: all embedded question slide objects are always on top of the stack, you don't want the feedback to be hidden by those objects. That can be done by having a shape before the KC slide, timed for the rest of the project and always on top. This tweaking work flow was described in this article: Buttons on Question/Score slides?

  3. The use case described in this thread of the Captivate forums could be solved using the same system variable cpQuizInfoAnswerChoice in conditional actions, combined with a counter to track the number of attemptsl. You cannot leave a normal question slide to a content slide for remediation unless you follow the strict rules for remediation. If you want to limit the attempts to get a correct answer, remediation rules are broken. With a KC slide, the answers are reset every time, which allows a lot more freedom. However: if you need a real score for the slide, you'll have to use the workaround I described in this blog post: Report Custom Questions - part 2









    More is in a... hyperlink - Dropdown Menu

    Intro 

    In my last blog post I demonstrated how a hyperlink can overcome the limitation of states in Captivate, not allowing to add interactive objects to states.
    In older versions of Captivate the widget 'Go to Slide' was available: a dropdown menu with slide names, useful to jump to those slides. That widget has disappeared, is not replaced by a Learning interaction (compatible with HTML5). 
    Although this widget can be reproduced, using the Dropdown interaction, that solution has several drawbacks. The formatting of the interaction is limited (maximum font size is 14pt), and you would need a variable and a conditional advanced action with as many decisions as you have slides in the dropdown list.
    A much easier solution can be found in this article, using hyperlink events. For a consistent behavior of the dropdown effect,  I also used Micronavigation

    Hyperlink commands

    The list with commands, opening the dropdown list in the Hyperlink dialog box is much shorter than the list with simple actions under the Actions tab. 
    Of course the Web page is the first command, since that is what you expect to happen with a hyperlink. 
    These commands are not available for a hyperlink event:
    • Continue: since the hyperlink event has no way to prevent 'Continue Playing Project' as is the case for simple actions, this is not that important
    • Return to Quiz: is meant for remediation, normally to be triggered by a Next button
    • Play Audio/Stop Triggered Audio: can always be done using an advanced action
    • Execute Shared Action: which is really a pity :(
    • Pause: can always be done using an advanced action
    • Exit: can always be done using an advanced action
    • Toggle: can always be done using an advanced action
    • Show/Hide TOC: can always be done using an advanced action
    • Show/Hide Playbar: can always be done using an advanced action
    • Lock/Unlock TOC: can always be done using an advanced action
    • State commands: Go to Next State/Go to Previous State cannot be done by advanced action, Go to State is possible.

    For hyperlink events some commands have been put together in one dialog box, which is the case for the Slide command:


    Example

    Watch the movie: after the title slide the dropdown menu 'Go To' appears. When you click on that shape button, another shape wlll drop down. It has 6 hyperlinks, I left them underlined to emphasize their type.

    When clicking on a hyperlink you'll be navigated to another slide which has a Back button to return to the Menu slide. The content slides are about the same subject as the previous blog post about popups and Close button. Of course it would be possible to have multiple slides in each 'chapter', and have only selected slides in the dropdown list.


    Setup, variables and actions

    Objects on Dropdown menu slide

    The objects on the slide with the Dropdown menu are visible in this screenshot of its Timeline:

    User variable v_start

    The shape button SB_Menu (Caption 'Go To') is on top of the originally hidden Smart Shape SS_DropDown, and pauses at 2,6 secs, after all effects have been accomplishedTo mimick the behavior of a dropdown the Effect 'Stretch From Top' is applied to that shape. The effect starts at time 0 and has a duration of 1 sec. The arrow shape ArrowGoTo has some explanation and the effect EaseInFromLeft is applied. The second arrow ArrowDropDown has a similar effect, starting bit later, but that shape is not visible until the button SB_Menu is clicked.

    One user variable was created: v_start. It will be used to store the frame number of the first frame of the slide with the dropdown menu. I learned from experience that effects are much more consistent when you use micronavigation instead of applying the effect by an advanced action. The content of the variable will be used to send the playhead back to the first frame of the slide, to have the time-based effect being played.

    Events and Actions

    1. On Enter (Dropdown menu slide): standard advanced action EnterDropDown

    The back button on the content slides send the user to this DropDown slide, and the On Enter event of the slide is used to reset everything as it appeared first time: hiding the shape SS_DropDown, the arrow shape ArrowDropdown, and showing ArrowGoTo. Moreover the number of the first frame of this slide is stored in the variable v_start. This is the script:

    2. Success event of the shape button SB_Menu: standard advanced action DropAct

    This action will hide the arrow shape ArrowGoTo, show the shape SS_DropDown and its arrow ArrowDropdown and return the playhead to the first frame of the slide with the system variable cpGotoFrameAndResume which has 'Continue' built in. That way the effects for the dropdown menu and the arrow with explanation will appear as they are timed from the start of the slide.


    3. Hyperlink events

    Contrary to the situation explained in the previous blog post where the hyperlink event was used as Close button, in this case it doesn't matter that the playhead is always released when executing a command by a hyperlink because of the navigation to another slide. The command Slide was used, which opens the dialog box slide. Here the LInk is set to point to the correct content slide. In this screenshot you see the hyperlink setting for the navigation with the item 'Decor':

    More is in a...hyperlink - Close button

    Intro

    A while ago I published a list with events able to trigger an action, whether it is a simple, advanced or shared action. Most commonly used events are the slide events, Success/Failure events for interactive objects, Question slide and Quiz events, D&D events. Both the hybrid rollover slidelet events (now deprecated because it is not supported for HTML output) and the Hyperlinks are 'outsiders' but can be very useful as I want to point out with this article (Closing popup or lightbox) and the next article (creating a dropdown list with Jump to actions, equivalent of the former 'Goto Slide' widget). 

    Example movie

    Watch this two-slide example.

    1. The title slide has a text hyperlink 'Next' to proceed to the next slide.

    2. The second slide has six shape buttons, each opening a popup (it could have been a lightbox as well, work flow is identical). In the popup information you'll find  the text 'Close X' which is a hyperlink  to close the popup.


    States and Hyperlink

    It is not possible to add interactive objects to a custom state: button, click box, shape button, Text Entry Box, all are greyed out. However it is possible to have a hyperlink within a text container, that will be active for all states of that container. This can be a welcome workaround. It is however not possible to have different actions for the hyperlinks in different states. Since the goal here was to close the popup, I created a shape as text container with 7 states as you can see in this screenshot:

    The 'Normal', or default state looks invisible: there is no text in the text container with the exception of the text hyperlink 'Close X'. This was achieved by giving the text hyperlink the color of the background, the text container a Fill with Alpha=0% and no stroke. The other states have a Fill (Alpha=100%), they have information text with a visible color (also for the Text Hyperlink) and an image.

    Actions

    1. Next Hyperlink - Title Slide

    The commands for Hyperlinks look a little bit different than the dropdown list in the Actions tab. For hyperlinks commands 'Go to Next Slide', 'Go to Previous Slide' and 'Jump to Slide' are in one dialog box:

    2. Shape buttons to open popup - Second slide 'ActionProcess'

    Look at the timeline of the second slide: all shape buttons (name starts with SB_) pause the slide at the same time, 15,5 secs. When triggering an action, the playhead should not be released, to allow clicking as many times as wanted, in any sequence on those shape buttons. The number of attempts is left at Infinite.

    The only command to be triggered is to change the state from the default 'Normal' state to one of the custom states. The choice is yours: 

    • you can use a simple action (be sure to uncheck the option 'Continue Playing the Project'
    • you can use a one-line advanced action, create duplicates for each button; playhead will not be released
    • you can use a one-line shared action with two parameters (text container and state).

    3. "Close X" hyperlink - in text container second slide

    Beware: there is NO option to prevent 'Continue Playing the Project' when you assign a command to a hyperlink. That means that you cannot use a simple action, but have to use a standard advanced in this case.It is again the action 'Change state...to Normal.' 

    Another difference for hyperlink events: the command Excecute Shared Action is missing. That is too bad, because if it had been available, one shared action would have been able to achieve both showing popup (with the 6 shape buttons) and close the popup (with the Hyperlink).

    Conclusion

    Hyperlink makes it possible to have an action in a state for an object, although it has to be the same action for each state of the object. You learned about the differences between hyperlink events and other events to trigger an action:

    • There is no way to prevent the playhead from being released if you trigger a simple action; use a standard advanced action.
    • You cannot trigger a shared action with a hyperlink.
    • Some commands have a different look: example is the Slide command (see screenhot in this article).





    Navigation Help Slides

    Intro

    In this thread on the Captivate forums, a user asked how to configure navigation in a course with content slides and two help slides. The Help slides should be accessible from each content slide using a button. There is navigation possible between the two Help slides, and the user should be able to return to the content slide from where he started, from each of the Help slides.

    Although there is a system variable cpInfoLastVisitedSlide, this cannot be used for this use case, because the user can navigate between the two Help slides. I explained shortly a possible work flow with a user variable and a couple of standard actions in the thread. Since the user told that he is a newbie concerning variables and advanced actions, I promised to write out a more detailed tutorial. This is certainly not a complicated use case! If you are an 'expert' in advanced actions, this is not a post to your taste.

    Example project

    This project has a Title slide, 3 Content slides and ends with two Help Slides.

    Instructions are in the movie, try out the buttons.  You don't have a Back button on the content slides, but you can always refresh the browser to restart playing. Click on the Title slide to start playing:

    Interactive objects/events

    • Slide 1 (Title) which uses the master slide 'Title', has a click box covering up the slide. It has the default action
       'Go to Next Slide'. 

    • Master slide 'Content' has the Help button (with the question mark): it is a shape button (no states at this moment in CP9) which triggers a standard advanced action 'ToHelp'. This master slide is used for the content slides.

    • Slide 2 (Content1): has a shape button for Next which pauses the slide at 2.5secs. This shape button is timed for the rest of the project, so that it will show up in all following content slides. A shape button on the master slide is excluded because this Next button has to be hidden on the last content slide. You cannot show/hide an object on the master slide, because it has no ID, no name. This Next button has been labeled 'SB_Next'. For this small example, it can look easier to have a Next button on each slide where it is needed, but if you have a lot of content slides, this approach will save on time and file size.

    • Slides 2,3 (content slides): to be sure that the Next button is visible, even when coming back from the Help slides, the On Enter event of these slides is used for the simple action 'Show SB_Next'. 

    • Slide 4 (last content slide): the Next button has to disappear, which is done with an On Enter action 'Hide SB_Next'.

    • Master slide 'Help': this slide has no interactive object, is used by the Help slides

    • Slide 5 (Help slide 1): has another instance of the Help button (SB_Next_Help) with the action  'Go to Next Slide'.
      This slide has a special shape button 'SB_Back1' to allow going back to the content slide. This button triggers a standard action 'BackToSlide'. This shape button has a bubble added in the Rollover state, which functions as Tooltip.
      The On Enter action for this slide is used to hide the button 'SB_Next' (from slide 2), same way as on the last content slide. Why? That button will already been hidden if the user comes from the last content slide, but not when he is getting here from one of the previous content slides.
    • Slide 6 (Help slide 2): has no need for a Next button, but needs a pausing Back button (to navigate back to the first Help slide) with the action 'Go to Previous Slide'. It has another instance of that special button ''SB_Back2'. I didn't opt to time that button for the rest of the project, because there are only two Help slides and having to hide/show them would have been more work than using two instances.


    Variables and advanced actions

    Variables

    Two system variables are used in this example:

    1. cpInfoCurrentSlide: gives the slide number of the current slide. The index starts with 1, which means that for slide 1 this variable is 1.

    2. cpCmndGotoSlide: will be used to navigate the user back to the content slide. Beware: for this variable the index starts with 0. That means that slide 1 has to be indicated as 0, slide 2 as 1.

    One user variable has to be created: v_last.  This variable will be used to store the value of cpInfoCurrentSlide when the user leaves the content slide to go to the Help slides. You do not have to define a default value for that user variable.

    Standard actions

    ToHelp triggered by the shape button on the master slide 'Content'

    In the first statement, the slide number of the current slide is stored in the user variable v_last. Then the user is navigated to the first Help slide (slide 5), and I added Continue which is not always necessary, depends on the set up of the slides.

    BackToSlide triggered by the buttons SB_Back1 and SB_Back2 on the Help slides

    For the first statement an Expression was needed, because of the different index for the system variables cpInfoCurrentSlide and cpCmndGotoSlide. Example: if the user came to the Help slides from the third content slide, the variables would be:

    • cpInfoCurrentSlide = 4   because the third content slide is slide 4
    • v_last = 4   because the action ToHelp stored the value of the previous system variable in this user variable
    • cpCmndGotoSlide = 3  because this is the indicator for slide 4, since the index starts with 0; for that reason I needed to subtract 1 from the value stored in v_last

    Overview

    In the Advanced interaction you'll find a great overview of all the actions, events of the slides. Too bad: you'll not see the shape button on the master slide, nor its action.



    What's in a Theme - a Template?

    Intro

    When trying to help Captivate users, I often bump onto confusion between themes and templates. Same confusion can be found in many training schedules and books. There has been a lot of evolution in Captivate since versions, slowly but steadily. Those are not the big hype features that were emphasized everywhere. You know that I often appreciate more the hidden gems, which help any developer to save time and frustration. This article will explain how I am creating custom Themes, and also why I am using Templates a lot less than in earlier versions of Captivate (before version 6). 

    Theme versus Template

    The goal of a Captivate theme is to keep a consistent design throughout your project. It can be 'applied' to any project, even after creation. Although most themes will be created for a certain resolution, when designed carefully it is not necessary to apply it only to projects with the same resolution. When you apply a well designed theme to a project, the 'look' will change immediately and you'll not have to edit the design a lot afterwards. A theme is saved in a file with extension cptm. You can have themes for a normal (blank)  or for a responsive theme. Captivate 8 and 9 both have several themes in the box, most of them being responsive themes. They show up as thumbnails when you click on the Big Button 'Themes'. Those Captivate themes are stored in the Public Documents, under the subfolder 'Layouts' of the 'eLearning Assets', at the same level as the Theme Colors palettes.

    You can store your custom themes in this folder or wherever you want. The Thumbnails view (under Themes button) has a Browse button which allows you to navigate to any folder. I will mostly save a custom theme in the project folder when working for a client. But you see in the screenshot that I have a custom theme (CP8Theme) in the default folder. That folder is a copy of the original Layouts folder in the Gallery under the Captivate installation folder. If you ever have messed up one of the themes in the Public documents, you can restore it from that original folder. If you delete the whole Layouts folder in the Public documents, while Captivate is closed, on restarting the application a new copy of the original folder will be installed in the Public documents (see also my article: Keep your Customisation).

    To save a theme you need to use the Themes menu, not the big button 'Themes'. Use the option 'Save Theme as' if you started from an existing Captivate theme.

    template in Captivate has to be chosen before you create a project. You have to use the option File, New Project, Project from Template. This means that a template needs to have exact the same resolution as you want for your project. As for a theme, there is a difference between a template for a responsive, and one for a normal (blank) project. A template file has the extension cptl. When you create a project from a template, it will get the normal extension cptx. You can edit a template, and that will the only reason why you would save it again as a cptl. It is also possible to create a template from a normal cptx-file with the option 'File, Save As'. There is no 'reserved' folder for templates, Captivate has no included 'templates'. The term is often wrongly used: most Captivate 'templates' that you can find on the web, are just cptx-projects, not templates in the Captivate language. 

    When a template is saved, the used theme, preferences etc are saved with the template. However you can always apply another theme later on. 

    Components of a Theme

    It is rather important to know what exactly will be saved in a custom theme. . Remember: if you ever want to use that theme in a responsive project, be sure to create the theme in such a project. I will list up the components in the logical sequence to be followed when editing or creating a custom theme :

    1. Theme colors palette

    The start point for design consistency in a project is guaranteed by the consequent use of a Theme, which starts with the creation of a palette with 10 colors that will be used for object styles, master slides, skin, and within learning interactions. I have written some articles about the creation of a Theme colors palette:  Colorful 2015  and   Theme Colors. Beware: it is no longer possible to save an ASE file with Adobe Color (as described in the first article): that means that the Swatch Manager is not very useful anymore. My recommendation is to ignore the Swatch Manager and focus on the Theme Colors Palette, which is available in any Color Dialog box.
    When saving a theme (using the Themes menu), the used theme colors palette will be saved with the same name. In the mentioned articles you'll find a way to save a theme colors palette independently from a theme as well.

    2. Object Styles - Object Style Manager

    Most design-oriented applications have a work flow for creation and use of styles (Word, InDesign, Framemaker). All experts and good trainers will tell you to use styles, and to avoid overridden styles. Captivate is no exception in that world: it has a great Object Style Manager to be found under the Edit menu (or by using the the shortcut key SHIFT-F7). Object styles can be saved individually, have the extension cps, only useful in case you want to export/import such an individual style. In most use cases you'll save all the object styles necessary for a project in a custom theme, no need to export/import styles anymore as was the case before themes appeared in Captivate.

    If you are working on a responsive theme: first define the breakpoint views you want in the theme, before launching the Object Style Manager. In the styles you will be able to define the look for the breakpoints that are available in the project.
    Make some decisions about which objects you'll be using in the theme as well. Just an example: if you prefer using shapes instead of captions for feedback messages, capture messages etc you do not need to change all the caption styles. A similar situation exists for normal buttons vs shape buttons. 

    Some tips:

    • Use only colors from the palette defined in Step 1.
    • Do not hesitate to change one of the (grayed out) styles between brackets [Default...]. You can overwrite those styles, since you are working on a custom theme. Those are the styles that will be applied immediately when you insert an object. Another approach is to clone a style and set it as Default style. The problem is that you'll end up with tons of custom styles, which makes selecting the proper style in dropdown lists not easier. That is why I always change existing default styles. 
    • For buttons: the InBuilt states Rollover and Down are available together with Normal  for change in the OSM, do not forget to check/edit those states. This is valid for Text Buttons, Image Buttons and Transparent buttons.
    • For shapes: you cannot define a default style for text and another default style for buttons (too bad), but any shape style that you define should include InBuilt states (Normal, Rollover, Down) because any shape can be converted to a button.
    • Quizzing objects are in a separate category. Quiz buttons cannot be replaced by shape buttons (yet), but you can define an individual object style for each quiz button. Feedback captions can be replaced by shapes.
      Feedback captions and shapes not always use theme colors in the default Themes included with Captivate. Be careful: if you want to have consistent colors in your project, you'll need to check those styles.
    • It is not possible to define real Effects in an Object style. Only the 'old' Transitions can be defined.

    3. Master slides

    The Object styles defined in step 2 - at least the default styles - will immediately be applied to the objects on the Master slides.  If it doesn't look well, you can edit the object style and redefine it, while working on the objects in the Master slides (It can be done with the Properties panel). Be sure to make all added objects responsive (check all the breakpoint views) on the master slides. 
    Each theme needs at least 6 master slides (Blank Master slide, 4 Quiz master slides and a Score master slides), besides the main master slide, but you can create as many master slides as you want. You can add different type of placeholders on master slides, but be careful with the 5 master slides for Quiz: the embedded objects (without individual timeline) have a lot of functionality built in!

    Some tips

    • Use the new Rulers to assist you for designing master slides: Guides Rule!
    • If you ever will use the theme for software simulations: keep a real Blank master slide, because it is used both for software simulations and for PPT import. You don't want those slides covered up with other stuff.
    • Remember that shape buttons can be used on master slides, they can have actions. This can be a big time saver for custom buttons like the ones from these posts: Toggle buttons   and Replay slide button
    • Do not forget to label the master slides

    4. Skin

    Use the theme colors palette to customize the skin: playbar, borders and Table of Contents. You can even insert a logo on the TOC and eventually custom expand/collapse icons.

    5. Recording defaults

    This is only necessary for themes (also) to be used for software simulations. Although you have set up Default object styles in step 2, you still have to indicate which styles have to be used when capturing simulations. Just one example:
    • Create a default style for the highlight box in step 2: with a big bright red stroke and outer fill. Set it to display as default highlight box style.
    • Open Preferences, Recording, Defaults and check the default Highlight box style: it will still be set at the original default style in the original theme. Bit annoying, but it also allows you to save two different sets of object styles within a theme: one for normal slides, and one for software capture slides.

    Do not forget to save the theme (using the Themes menu)!


    Do you need a Template?

    I ask this question often everywhere: with all the design power and flexibility of a custom theme, why would you still need a template? Before themes existed, I used templates to be able to reuse variables and advanced actions (see: Template for reusing script). With the present version of Captivate, we have shared actions which I store in a separate project to be used as external library in any project. Variables, used in those shared actions, get copied automatically when the shared action is dragged into the Library of the new project.  When you copy an object, that triggers an advanced action, the action will be copied along when pasted into another project. 

    I used templates to have footnotes on each slide, pointing to the name of the project, showing the slide number and the total amont of slides. But now you can put them on master slides, using system variables or user variables that can be populated later on. 

    When would I use a template in Captivate 9? For courses that have several modules, where you want to have some slides in common, maybe have custom navigation/control buttons that cannot be put on the master slide, but need to be timed for the rest of the project. I would rarely use it to have placeholder slides, unless some team members need to have that assistance. Lot of placeholders have fixed object size, which can just be annoying. If you do have a lot of advanced actions (maybe variables), that cannot be replaced by shared actions, identical entries in Project Info, variables not included in shared actions: those would be situations where I would think about creating a template.


    Conclusion

    I hope this post did clarify the difference between a theme and a template. If you ever see somewhere my question 'Do you need a template', this will no longer be a mystery, right? 





    Guides Rule!

    Intro

    Did you hear me yelling 'Finally' when the last patch for Captivate was released to version 9.0.1.320? We have now Rulers in Captivate and real (Adobe) guides. I am using that name because they are quite different from the existing Smart Guides which are useful when aligning objects. Moreover the implementation of the Rulers and Guides is really very nice,  Kudos to the Captivate engineers!  Just one example: in responsive projects you can choose to have rulers in Percentages instead of pixels, which is the most logical choice! In this article I want to explain you the reasons for my joy, showing you how I use Rulers and Guides.

    Grid

    Maybe you don't remember that old grid, which is still present in Captivate 9. It consisted of tiny points, with a default distance of 16 px. You cannot change color of those points (black), which makes that grid useless on dark backgrounds. You can change the default distance between points from 16px to another value, but always the same horizontally and vertically. Personally I remember that distance mostly because it will define how much an object will move or resize when you use CTRL in combination with arrows as shortcut keys (see my old blog post: Shortcut keys for moving/resizing objects). Since many years I didn't use the feature for what it was meant to be used: as a 'grid'. If you just now discover its exitence: turn on the 'old' grid, using View, Show Grid.There is a snapping linked to it as well, which you can turn on/off.

    A grid can be very useful in some circumstances!  With the new Guides you have now a powerful alternative: create a custom grid, with lines instead of points, maybe with different distances in horizontal/vertical direction, and use a custom color that stands out from the background. It can be especially useful for responsive projects because percentages instead of pixels  I recommend to lock the guides after creation of the grid. Your grid will be saved with the file, you can show/hide the grid whenever you want.

    Here is an example of such a grid, created with the option Multiple Rulers in a blank, normal project:

    You can see that the guides were used to have identical symmetrical arrows to the left/right side, to define a space to be left for CC later on, and a top margin. The settings in Multiple Rulers can be seen in this screenshot:

    For a responsive project, I would mostly limit the grid to vertical guides, because it is the width that is most important for the design of such a project. Here is a screenshot for a responsive project, with guides in increments of 10%, extra guides at the left and right side at 45% (margins). Only one horizontal guide at 50%. I dragged out an extra guide to 10% for the title.

    Theme/Template design

    A grid, as described in the previous section, will help a lot when designing master slides - third step in designing a custom theme (after the color palette and the object styles). Of course you can add extra guides, as I showed already in that same section: to indicate margins, to show the center lines etc, space to keep free for custom navigation, control panel, CC etc.
    Sometimes you'll need a template on top of a custom theme (which provides all necessary design features) because you need a fixed resolution and custom content: recurrent information, variables, advanced actions, assets in the Library, placeholder slides. For such a template rulers and guides can help as well to create a consistent look for all the future modules that will be based on that particular template.

    Motion Paths

    If you ever created custom motion paths, which has become much more interesting in Captivate 9 where we have three types of custom motion paths, you know how difficult it is to adjust start and end points to a specific location. I remember the example that I created for this blog post:

    Reset Effects

    All the cards followed a custom motion paths but had to end up in a stack. My work flow was bit cumbersome:

    • create a "cross hair" using a horizontal and a vertical line object in a group
    • position that group on the exact location, using the X coordinate of the vertical line and the Y coordinate of the horizontal line
    • adding a motion path (no curved, I used the zigzag motion path) to each card, and drag the end point carefully over the crosshair
    • saving that motion path as a custom path
    • applying it in the necessary advanced action

    Now I can use a horizontal and a vertical guide, which I can exactly position without using the Options tab with coordinates. Just double-click on the ruler on the exact coordinate that you want.

    Watch this screenshot: the thee shapes move each along their individual motion path, but they end at the same location (and paths cross at another location). 

    Custom shapes

    SVG are a big new feature, but they don't have (yet) the flexibility of shapes which can be used as text container, as button and filled with a texture, and image, a gradient all on the fly. Although Captivate is not meant to have all the editing features of a vector graphics application like Illustrator, you can create pretty nice custom shapes. Any included shape can be converted to a freeform shape, you just have to edit the points and tangent points. 

    How can guides help with this process? Have a look at this screenshot. The creation of this symmetrical shield (or highway sign) was lot easier with the help of the rulers when editing the points and tangent points.:




    Drag&Drop in 2016 with Captivate 9

    Intro

    As promised in a previous article, I explored the enhancements to Drag&Drop in Captivate 9, more specifically added InBuilt States. In previous versions only buttons and shape buttons had those states. Captivate 9 added multistates to all objects and provided InBuilt states for all objects in a Drag&Drop slide: drag sources and drop targets. Custom states can be added as well. Both InBuilt states and custom states have some limitations similar to the Inbuilt states for buttons. Drag&Drop objects have also limitations for added custom states.

    Example Movie

    Watch this movie, I left the default play bar active to allow you free navigation. You'll find two Drag&Drop slides with different use cases on slides 4 and 5:
    1. The first use case has only two drag sources, one of them being correct, the other incorrect. There is one drop target, the cup. Watch the different InBuilt states both for the two drag sources which have identical states and for the drop target. All states are introduced on slides 2-3. All objects have also one custom state. Because of my manipulation of the states on Submit, the default Reset button will not return you to a fresh start if you have used the Submit button. You'll have to use the custom 'My Reset' button in that case. 

    2. In the second use case you'll see 7 drag sources and 2 target objects: the box and the trashcan. You are supposed to drag all sources to the appropriate target. You'll find the 'My Reset' button here as well.

    Drag Sources: states

    The Drag Sources have 5 InBuilt States (see slide 2 in movie). Common to all those states and to the custom states is that you cannot add any object in a state. All the options on the Big Button Bar (horizontal toolbar) are dimmed with the exception of the Record button (for audio): no Text objects, no Shapes, no Higlight boxes (under Objects), no Media can be added to any state. Here is a short description of each state, of its functionality and limitations. As a visual reminder have a look at the Gallery, which shows those states for the first use case
    1. Normal state (InBuilt): is the Default state. This state will appear before dragging, and will re-appear if a drag source is sent back to its original position as well (for an incorrect object). The size of this state is important, because several states are locked to the same size. You can rotate the Normal state (watch the rotate handle at the top), which will also lock some of the states to the same rotation.
    2. Dragover state (InBuilt): this state appears when the drag source is over a drop target and will remain so until the object is dropped on or moved away from the target. This state is not locked, it can be resized and rotated.
    3. DropAccept state (InBuilt): will appear after dropping a drag source on the drop target, it will replace the Dragover state and become permanent. It is totally locked (watch the lock symbol bottom right): will keep the same size as the Normal state, cannot be rotated. Be careful: if you allow all drag sources, both correct and incorrect, to be dropped on the target, the DropAccept state will also appear for correct and incorrect objects! If you only allow the correct drag sources to be dropped, this state will only appear for them.
    4. DropReject state (InBuilt):  will appear after dropping an incorrect drag source on the drop target if the target is not set to allow All objects to be dropped. It will replace the Dragover state. When the incorrect object is sent back to its original position, the DropReject state is replaced by the Normal state. Like the DropAccept state this state is totally locked: no resizing, no rotation possible
    5. DragStart state (InBuilt): this state appears when you start the dragging movement until you are over a drop target, where it will be replaced by the DragOver state. The state is not locked, it can be resized and rotated.
    6. Custom state: this state is also fully locked to the rotation and size of the Normal state. As written before, you cannot even add objects in this state (which is possible for buttons). That is a limitation, in many cases you'll want to revert to the old method of hide/show objects. For this example it seems as if I added the image of the wings, but I'm just cheating: for all states I used smart shapes. That way I was able to change the form of the shape (Replace shape), to change its fill and stroke. For the InBuilt states I used gradients or solid colors as Fill, for this custom state I used Image Fill. Since a shape can also be used as Text container, it was possible to change the labels of the states as well. If you are not yet member of the Smartshape fan-club, maybe... :)


    Drop Targets: states

    The Drop Targets have 6 InBuilt States (see slide 3 in movie). Three of those states have a name that is identical to an existing state for the drag sources: DragOver, DropAccept and DropReject. For Drop Targets you can add objects to all states, both InBuilt and custom states. Some states appear immediately, other states only appear after Submitting the exercise. Here is the overview, again with a visual reminder from the first use case in the example movie.

    1. Normal state (InBuilt): is the Default state. This state will be the main state before the Submit button is clicked. It can be replaced by another state but that will only be for a short duration. The size of this state is important, because several states are locked to the same size. You can rotate the Normal state, which will also lock some of the states to the same rotation.
    2. Dragover state (InBuilt): this state appears when a drag source is over the drop target and will remain so until the object is dropped on or moved away from the target. This state is not locked, it can be resized and rotated.
    3. DropAccept state (InBuilt): will appear after dropping a drag source on the drop target, it will replace the Dragover state. However this state will remain visible only for a short duration. Then the Normal state will re-appear. The reason is that a drop target can accept multiple drag sources, and has to be ready to 'accept' or 'reject' the next drag source.  It is totally locked: will keep the same size as the Normal state, cannot be rotated. But, as told, you can add objects, which was the case in the example movie (adding the wings).
    4. DropReject state (InBuilt):  will appear after dropping an incorrect drag source on the drop target if the target is not set to allow All objects to be dropped. It will replace the Dragover state. The state will appear for a short duration before reverting to the Normal state. State is  It is totally locked: will keep the same size as the Normal state, cannot be rotated. But, as told, you can add objects, which was the case in the example movie (adding the wings).
    5. DropCorrect state (InBuilt): this state will appear after Submit if the drag source(s) dropped on the target are all correct. It will replace the Normal state permanently. The state is fully locked (to the Normal state): no rotation nor resizing is allowed. You can add objects.
    6. DropIncorrect state (InBuilt): this state will appear after Submit if the drag source(s) dropped on the target are not all correct. It will replace the Normal state permanently. The state is fully locked (to the Normal state): no rotation nor resizing is allowed. You can add objects.
    7. Custom state: this state is also fully locked to the rotation and size of the Normal state which is limiting even though you can add objects.  

    Reset - My Reset

    The default Reset button has been added to both use cases (slide 4-5). This button can only be used to reset before submitting the result. I added an extra button 'My Reset', which is really the Replay2 button described in a previous blog post. If a D&D slide is not included in a quiz, has not score it will be reset when you re-enter the slide. This is what I'm doing, getting back to the last frame of the previous slide, then continue. That may result in some flickering, depending on the bandwidth, but the D&D will be totally reset. The mentioned blog post explains the need for a user variable v_enter to store the first frame number of each slide with an On Enter action. 

    Setup Use Case 1

    Have a look at the Timeline of this slide:
    There is only one correct answer: DragSource1 to Target1. There is an object action for this correct answer, to change the state of the other drag source to the Custom state, as you can see here:
    Setup is almost the default set up: Snap behavior will change the size and the opacity of the dropped object to 70% (size) and 80% (Opacity), and snaps to the center (Anchor). There is one attempt allowed, and the actions on Success and Failure are visible here:

    The advanced action DDSuccess4 has three statements:

    Due to hiding the drag sources with this Success event, the On Enter action of the slide has to 'reset' the situation by showing the group Gr_Draggers again. This was combined with the assignment of the user variable v_enter for this slide in the action:


    Setup Use Case 2

    Have a look at the Timeline of this slide:
    Effects are time-based, starting after the pausing point of the Drag&Drop (1.5secs which is default). Back and Next buttons have no pausing point in this slide. When the playhead is released by the Success event, it has to continue seamlessly to the end slide 6.

    For the correct answer all Christmas balls have to be dropped either in the box (2, 0, 1 and 6) or in the trashcan (3, 4 and 5). There are no object actions in this use case. 

    For setup of both drop targets size and opacity of the drag sources will change to 0% to have them disappear in the target. You can see that the actions on Success and Failure are very simple:
    Even the on Enter action of this slide can be a real 'simple' action to have the correct frame number assigned to the user variable v_enter:





    Replay (slide) Button

    Intro

    This pretty short article will explain several ways to create a button that will replay a slide from its first frame and is functional on that slide only. The reason is that I have been asked about this use case multiple times. 

    Questions

    First thing to check is: does this slide have an On Enter action? The default On Enter action for a slide is 'No action'. On Enter actions are however the way to go if you want to reset a slide to its initial configuration, to clean up the 'mess' that can happen on that slide by the user or by the interactivity on that slide. On example: maybe the user has popped up objects  using a hyperlink on a word or iimage? In that case you'll need an On Enter event. The action needed for a Replay button will have to make sure to 're'- enter the slide, in order to have that On Enter action done. To better understand what I mean, I created a short example movie.

    Example movie

    Watch this movie, which I have been testing both for SWF (version here) and for HTML5 output. You'll see two slides:

    1. Slide 'Title': it has an On Enter action to play an audio clip.

    2. Slide 'Pills': a user variable v_counter is used (and displayed) to store the number of clicks on the 'pills'. The timeline of this slide looks like this

      Each of the pills (shape buttons) triggers a shared action, that will show a state (with explanation), increment v_counter, wait for 2 seconds before releasing the playhead.

    On both slides you'll see two buttons: 'Replay1' will restart the slide from its first frame, without re-entering the slide. That means that the On Enter action is not executed again. The second button 'Replay2' will re-enter the slide. Listen and watch the difference (look at the counter on the second slide). Refresh the browser when you are ready to watch this example. Refreshing will also get you back to the start of the movie.

    'Replay1' - On Enter action is not repeated

    If you do not need a resetting action On Enter, a replay button can be coded very simple. If you are on the slide with the label 'Intro', this simple code will do the trick:

        Jump to slide Intro

    However you'll not find the slide 'Intro' in the dropdown list for the 'Jump to' command in the Actions tab. You need to choose 'Execute Advanced Action', and create a one-line standard advanced action.

    It is simple but I do not recommend to use this work flow. It means creating a new advanced action for each slide. A first alternative would be a shared action, defining the slide name (or number) as a parameter.

    If you need this action for many, even all slides in a project, there is a much better work flow. Create this advanced action:
      
    Why do you need an expression to subtract 1 from the number of the current slide, which is stored in cpInfoCurrentSlide? The index of the system variable cpInfoCurrentSlide starts by 1 That way it can be inserted on a slide indicate the slide number. Its value for slide 3 is '3'. To show the slide number you insert cpInfoCurrentSlide in a text container on the master slide or timed for the rest of the project.

    The index of system variable cpCmndGotoSlide starts not by 1, but by 0 (usual in programming languares). If you want to navigate to slide 3, you have to give a value '2' to cpCmndGotoSlide.  So far the reason for that Expression in the advanced action Replay1.

    This command is functional both for SWF and HTML5 output. I tested this in several browsers.

    This action is triggered by both Replay1 buttons in the Example movie. The On Enter action is not executed with this Replay, which results in:
    1. For slide 'Title': the audio clip will not be heard.
    2. For slide 'Pills': the variable v_counter is not reset to 0, and will continue to increment.
    Watch the variables I inserted top left of the slides: they show the current frame, and the frame number stored in the user variable v_enter.  If you wonder why the frame number never starts with 1, read the explanation under the next subject 'Replay2'.

    TIP

    be sure to create this action as a shared action, no need to define the system variables as parameters. Store that action with much used shared actions in a separate project. In any project you can open the Library of that project as an external Library and drag that Replay action to the library of the new project.

    Replay2 - On Enter action is repeated


    As explained under 'Questions', you'll have to enter the slide in this case, not just jump to the first frame as was done with the Expression in the scenario for 'Replay1'.

    This is a bit more complicated. I had to use 'micro-navigation', a term introduced by me in this old  blog post: navigating between frames. Look at the advanced action created for the 'Replay 2' buttons:
    This is the work flow:
    • Create a user variable v_enter that will be reused on each slide that needs a Replay button of this kind. That variable will store the number of the first frame of the slide. To achieve that I have to add a command to the already existing On Enter actions. Here are the actions for both slides:

    • When the Replay button is clicked, there is first navigation to 2 frames before the first frame of the present slide. Why 2? Theoretically 1 frame should be OK, but for HTML5 output (slower) I learned that it is better to use
    • Although I use the system variable cpCmndGotoFrameAndResume for navigation, which should release the playhead and navigate very quickly to the next slide, I detected that adding the second command 'Go to Next Slide' made the process more fluent (again for HTML5 output). 
    The result is very clear in the Example movie:
    1. For slide 'Title': the audio clip is played
    1. For slide 'Pills': the variable v_counter is reset to 0.

    Frame enigma - TIP

    If you watched the frame number closely, you will have seen that the 'first' frame (on slide 'Title') is not 1 but 3 or 4. Here is the explanation: since I wanted the Replay2 button to be active on this first slide, I needed a slide before that first slide for the micro-navigation. That slide will not be visible to the user because it is only 0,1 sec long. At a frame rate of 30fps, that means ...3 frames.



    1 action = 5 Toggle Buttons

    Intro

    In the past I wrote some posts about creating Toggle buttons. The oldest article explained the use of an Expression and a system variable for a button that kept the same style but could turn on/off a functionality (created for versions 5/5.5). My excitement about shape buttons, appearing in version 6, was the inspiration for several scenarios in which the style of the toggle button changed with the on/off situation. 

    When shared actions appeared with Captivate 7, I posted some articles about the difference with advanced actions. Captivate 8 enhanced shared actions by allowing variables and literals as candidate parameters. Although Captivate 9 seems not to add any improvements to shared actions (had hoped secretly for an easier way to edit them), combining shared actions with the new multistate objects will save a lot of time. The use case described here is a good example. Start by watching the example movie to understand my interpretation of Toggle buttons.

    Example movie

    This movie has 4 slides, the third slide shows the toggle buttons. Try them out, there are two instances of the shape button that toggles the visibility of an image or a group. They use a different user variable. Beware: images do overlap on the slide. The other shape buttons are muting/playing audio, showing/hiding Closed Captioning, Table of Content and Playbar. I choose shape buttons over normal buttons because they offer more freedom for styling the InBuilt states. To navigate to the last slide you have to 'toggle' on either the playbar or the TOC for navigation.

    Concept 

    All toggle buttons have in common to be associated with a variable that can be toggled by the developer: I'm talking about Boolean variables, which can have only two logical values '0' (False/No) or '1' (True/Yes). Both system and user variables are possible. On this screenshot you see the Timeline with the 6 shape buttons, labeled to identify their functionality (SB is my indication for Shape Buttons):

    Variables

    The associated variables are in the same sequence as on the timeline, from top to bottom:

    • v_visgrp (user variable with Default value = 0) for SB_visib_group

    • v_visib (user variable with Default value = 0) for SB_visib

    • cpCmndShowPlaybar (system variable with Default value = 1) for SB_Playbar

    • cpCmndTOCVisible (system variable with Default value = 0) for SB_TOC

    • cpCmndCC (system variable with Default value = 0) for SB_CC

    • cpCmndMute (system variable with Default value = 0) for SB_Audio

    This list shows that one of the system variables doesn't have '0' as default value, cpCmndShowPlaybar. Solution for this discrepancy can be found in switching the states for the associate button, or in switching the variable itself to '0', thus hiding the Playbar. I used the second scenario: with the On Enter action for the third slide I did Hide the Playbar, which toggles cpCmndShowPlaybar to 0

    The shared action can be used for any button with such a, associated Boolean variable, system or user variable. Some examples are shown in the last slide of the example movie: cpLockTOC or a user variable to toggle an audio object.

    States

    The shape buttons have three InBuilt states: Normal, Rollover and Down. For each button I added one custom state. That state will change the shape button to show the 'OFF' state, and if necessary additional objects are added in this state. In this screenshot you see the 4 states for the shape button SB_Audio:

    This shape button has a SVG added in each state. At this moment SVG cannot be used as a Fill image for a shape button (maybe in a next version?), they are separate objects. For some states I also changed the style of the shape itself (Fill):

    1. Normal: has a SVG indicating you can mute  audio (since cpCmndMute has a default value of 0, which means that audio is playing)
    2. Rollover: Speaker only (SVG), Fill different
    3. Down: Speaker only (SVG), Fill different
    4. AudioOn: has a SVG indication to play audio; this will be the state that is visible when audio is muted, cpCmndMute = 1.

    The buttons SB_TOC, SB_CC and SB_Playbar have a similar setup: for the InBuilt states text was inserted in the shape. The custom fourth state adds two line objects (cross) over a duplicate of the Normal state. Look at the screenshot for the SB_Playbar:

    Both instances of the Visibility toggle button use SVG's to change the style of the shape button (similar to SB_Audio), but they add other objects for the 4th custom state as you can see here:

    Shared Action

    The action has to be conditional, checking the value of the Boolean variable. Only two commands are needed, both in Then and Else part: to change the state of the shape button itself and to toggle the variable. Toggling the variable between 0 and 1 will switch the functionality between On and Off. If you write this out as an advanced action, in this case for the Audio button, it would look like this:
    When creating a shared action, it is important to identify the parameters. Compulsory parameters in this action are:
    1. the button itself (SB_Audio in the screenshot above)
    2. the state 'Normal' which is used and
    3. the state 'AudioOn' which is used as well

    Candidate parameters are:

    1. The variable cpCmndMute: it has to be a parameter, because we need other Boolean variables for the other buttons
    2. Literal '1': because I choose the 4 th state (custom) for each button with this action in mind, it is not necessary to define this literal as a parameter

    This leads to the definition of the shared action with 4 parameters, the compulsory and one candidate parameter. In this last screenshot you see the parameters with their values for another button, SB_Playbar. Watch the description of the parameters.

    Conclusion

    In many situations using a Captivate playbar is not a good choice, and with states, one single shared action from your script library it is now really simple to create not only Next and Back buttons, but also every other toggle button needed on the course slides. If using shape buttons (as was the case here) you can put them on the first slide of the course, time them for the rest of the project. They will have each a unique ID, which allows you to take control of those shape buttons, to hide them when they are not needed on some slides. Good luck!