User Variables – Dynamic buttons


All the best for 2019 to all Captivate users!

A couple of years ago i wrote a short blog about dynamic buttons

I use the term to indicate a shape button where the label has at least one user variable inserted.  Today a question appeared on the forums about the InBuilt states Rollover/Down not showing the value of the variable when using Preview HTML5 in Browser, nor when published. I first thought this to be a limitation of HTML5 (first article was for SWF output) and tested it out. It is important to know that I am using version (CP2019), Windows version and tested in Chrome/Edge and Firefox. This is the link to the forum thread.

As a follow up for my posts about using System variables (Part 1   and  Part 2), this will be my first post about User variables.

Workflow Dynamic Button

I wanted this to be close to the use case from the forum question.  For that reason i wanted to create a button that has two embedded variables. The variables are populated by Text Entry Boxes. You can download the cptx-file which I created as illustration, to see the result of this workflow. Here is the download link;  DynButton

1. Text Entry Boxes and associated Variables

The demo file has two TEB’s on the second slide. They are labeled: TEB_Name and TEB_Label. I never keep the generic names for important objects.  All TEB’s get a default associated user variable with the same generic name as the Text Entry Box. However, it is very easy to replace that generic variable by a user variable with a meaningful name. You have to click on the X button next to the variable name field. A small dialog box will open, in which you can type the wanted variable name. Have a look at this screenshot:

Under the dialog box where I typed the new variable name ‘v_label’ you still see the generic name (Text_Entry_Box_2). Clicking on the X button opened this dialog box. If you did reed the articles about System variables, you will remember that a similar X button appears in the Properties panel of a text container, Character part, to allow the insertion of a variable.

I used a similar user variable name for the second TEB: ‘v_name‘.

Check the Variables list under Project, Variables. You will find the new user variables but the old generic variables are still there as well. However since they are not used, you can easily delete those old variables. Some cleaning at the start of 2019 may be a good idea. I don’t use the automatically generated cpQuizInfoStudentID/cpQuizInfoStudentName neither. Use the Remove button:

2. Dynamic Shape Button

On the last slide of the file you will see a Shape (rounded rectangle) which I converted to a Shape button. The long label has two inserted user variables in the Normal state,  as you can see in this screenshot:

If you are not familiar with embedding variables in a text, please read this blog.

The label will automatically appear in the Rollover and Down states. I formatted them with different font size and colors:

3. Testing HTML5 in Browser

Since it is a non-responsive (blank) project, you need to test by using Preview HTML5 in Browser (F11) or after publishing and uploading to a webserver.  You’ll see that the variable placeholder is replaced by its value in the three InBuilt states. Based on the user experience from the forum question, this seems not to have been the case in the first version of CP2017. I have asked to update to the recent version but didn’t have any feedback yet.

More questions?

Some tips, but do not hesitate to ask more questions which I didn’t see in my crystal ball:

  • I unchecked ”Show button’ for the TEB’s. An associated variable is immediately populated. The Submit button is only compulsory when you have a validated TEB which is not the case here.
  • I kept the default length (50) for insertion of the user variables in the shape button label. If you expect longer entries, you have to edit this and maybe even resize the shape button.
  • For the action triggered by the Dynamic shape button, I didn’t use an advanced action to avoid that complexity but timed the appearance and effects on the timeline. The shape button has a pausing point, and triggers the action ‘Continue’, which means releasing the playhead. That results in having everything appear after that pausing point. More information in my sequence of articles about the Timeline.
  • The Next (shape) button on the first slide is timed for the rest of the project. I didn’t need it on the last slide, hence the Hide action triggered with the On Enter event of that last slide.
  • I did not create a poster image in the example file.
  • You do not have to use TEB’s to make a dynamic buttons. You can define a default value of the variables when defining them, which would result in the first version of the shape button label. During the course you can edit that value, using an Assign command (as simple action) or with Assign in an advanced/shared action. That will result in a real dynamic button whose label changes during the course.
  • You can use the back button on the last slide to return to the TEB-slide to re-enter the TEB-fields to change the button label on the last slides.

The post User Variables – Dynamic buttons appeared first on eLearning.

Custom Play/Pause button (Use case system variables)


Many years ago I did write this blog about a custom Play/Pause button.  Meanwhile lot has changed in Adobe Captivate: new simple actions were added, multistate objects appeared, shape buttons became possible with InBuilt states and custom states. Due to a question on my personal blog, due to the recent posts about using System Variablees, time to write out a short article with a step-by step workflow to create a custom Play/pause button using a Shape Button.

Why Shape Button?

I wrote about States in this  article: States and State Commands. 

Captivate has 4 types of buttons, they all have the 4 InBuilt states: ‘Normal’, ‘Rollover’, ‘Down’, and ‘Visited’. They can all have supplementary custom states, which allows to create nice toggle buttons showing the situation at that moment. Examples: TOC open/closed, Audio playing/muted, CC visible/invisible etc.  The three first states are included in the object style of the button or the shape, the Visited state is not included. Custom states are neither included in the style.

Text buttons, Transparent buttons (which are not necessarily transparent), Image buttons can NOT be used on master slides, can not be timed for the rest of the project.  A shape button can be used on master slides, can be timed for the rest of the project. For a toggle button Play/oause this is a big advantage: you need only one shape button for your project. If you choose for one of the older button types, you would need a button on each slide.


Shape Button – creation

You have to know what the start situation is in your course. By default (after having launched the course) everything will be in ‘Play’ situation. In that case the start look of the Shape button has to be ‘Pause’. You have to create that button on a slide, you cannot create states on a master slide.

  • Create a shape and check off the option ‘Use as Button’.
  • Open the State panel, using the button ‘State View’ in the Properties panel.
  • In the Normal state, fill the shape with an image or text you want to show when the course is playing, to pause the course.
  • Delete the InBuilt states ‘Rollover’ and ‘Down’, using the right-click menu on those states (you cannot use a simple Delete key).
  • Add a Custom State, and label it (I use Play as label)
  • In this custom state fill the shape with an image or text you want to show when the course is paused, to resume Playing.

Here is a screenshot of the states I created:

Location Shape button

Once the button is ready, you have to decide where to put it, and take out the Pausing point. Reason: you want this button to be available all the time, but not a pausing point like you need for a Submit or a Next button. There are two possibilities for its location;

1. On master slides

If you want to use the Play/pause button on all slides, and you are creating a non-responsive project or a responsive project with breakpoint views, the easiest way is to copy/paste the button to the Main master slide. The daughter master slides can inherit the button. Careful: in some themes the Title master slides is not using the main master slide objects, you’ll need the button also on that master slide in that case.

For a fluid boxes responsive project, you cannot use the main master slide (cannot have fluid boxes). You will need to insert the button on each used master slides where you want that functionality.

To turn off the pausing point: open the Actions tab of the button, and uncheck the option ‘Pause project until user clicks’.

Timed for the rest of the project

The alternative for the master slides, is to have the Play/pause button on the first slide, and time it for the rest of the project, always on top. That has to be done in the Timing Properties of the button. At that same place you can also turn off Pausing:

Advanced Action

The success event of the button has to trigger a rather simple advanced action. Check the ‘Conditional Tab’ and create this action:

Explanation: I am checking the value of the Boolean variable cpCmndPause (see article). If that value = 0, the course is playing.

In that situation I will use the command ‘Pause’ (‘Pause’ is exactly the same as ‘Assign cpCmndPause with 1) and change the state of the button SB_PausePlay to the Play state.

If the course is paused however, that variable would not have the value = 0 (but = 1) and the ELSE commands are done: the state of the button is reset to Normal, and the playhead is released by the command ‘Continue’ (which is the same as Assign cpCmndResume with 1, which is also setting cpCmndPause back to 0).

Warning: not everything is ‘paused’!

As I explained more in detail in my sequence of blogs about the timeline, even an absolute pause (‘Pause’) will not pause everything.  Here in short the most important:

  • Animations of all type (animated GIF, SWF, OAM….).
  • Event video if it is playing
  • Audio which was started with the command ‘Play Audio’

For more information:

How and Why Pause Timeline

Pausing Timeline and Audio

Same would happen with the Pause button on the default Captivate playbars. It is not due to the fact that this is a custom button.

The post Custom Play/Pause button (Use case system variables) appeared first on eLearning.

What is Branch Aware?


Branch aware feature appeared with Captivate 6.  I created a blog post to explain it, but I regularly meet users who are still unaware of its existence, or its possibilities. So I decided to refurbish that old post, and create a new example movie with CP2019. You have seen a first version of that movie in my recent post about localisation with CSV import. That post discusses the workflow to create quiz slides in different languages in the same project. The example did use the Branch aware feature, but some of the features were not fully localised: the score slide was the default score slide which is in English since I am using a version in that tongue.

In this post I will also talk a lot about the quizzing system variables. If you didn’t download my explanatory table yet, please do so. You’ll find a link in this blog post: Creative with Quizzing variables.

What is Branch Aware?

Look at the Advanced Interaction panel of the example movie. It gives you a lot of information, not only about the events and the triggered actions, but also about all scored objects, including question slides.

You see that the total score is set at 60 points, result of the 9 graded questions in the file. For each of those graded slides both the individual score and the penalty are shown. There are also 3 Survey slides, without a score. Those values are also stored in quizzing system variables:

  • Total score in cpQuizInfoTotalQuizPoints
  • Score per question in cpQuizInfoPointsPerQuestionSlide (reusable variable)
  • Penalty per question in cpQuizInfoNegativePointsOnCurrentQuestionSlide (reusable variable)

If you don’t activate the option ‘Branch Aware in Quiz Preferencesn Settings (see screenshot later on), the default score slide will show 60 as maximum score. If the learner takes only one branch (language) of the quiz, the percentage (cpInfoPercentage) will be calculated as the obtained score (cpQuizInfoPointsscored) divided by that maximum score of 60. Same with the number of correct answers and total number of answers. This means the learner would be very confused, and never succeeds in that case. Reason is that those system variables are fixed when the course starts, I label them as being ‘static’.

When turning on Branch Aware, the system variables become ‘dynamic’, they will be changed on runtime based on the branch, thse slides visited by the learner. In this example movie that has been my choice: if the learner succeeds in one branch (maybe Dutch) the maximum possible score will be changed to 20, the percentage will be calculated with that maximum and the obtained score and the learner will see correct data on the score slide, can reach the passing score. No problem if a trilingual learner did visit the three branches, since the variables are dynamic, he will be judged on the maximum score of 60. This is the setup of Quiz Preferences, Setting for the example movie:

Example Movie


Setup Project

The project has 16 slides: Title slide, Dashboard slide, 3 groups each with 4 questions, the default score slide and a custom score slide. This is the Filmstrip, I expanded the group ‘Dutch questions’:

Dashboard slide (slide 2)

I will not explain the effects on the dashboard slide, where I used a loop action (While) triggered by the On Enter event.

I created a user variable v_all The four buttons on this slide trigger a shared action which has two parameters: which value has to be assigned to the variable (1=All, E=English, D=Dutch, F=French) and the slide to jump to. Here is the instance for the button ‘Nederlands’ (Dutch):

Start slide of question groups Dutch/French

On all quiz slides a shape is displayed with info about the obtained score and correct answers so far. That shape, labeled SS_Info is a multistate object. In the Normal state the English version is displayed, there are two more states:  Dutch and French. Switching to the appropriate state is done with the On Enter event of the start slide of the Dutch and the French group. It is a simple action:

Because the project is pure linear, and there is no opportunity to go back, this setup is sufficient.

Last slide of each group (Survey slide)

The event ‘After Survey’ is used to navigate to the appropriate score slide. For the learners who did take the three branches, the default score slide (ScoreDefault = slide 15) is used, for the others the custom score slide 16. The same advanced action ‘LastAct’ can be used for the last slide in each group. If that last slide was a normal quiz slide, not a Survey slide, the same action could be used but for both Success and Last Attempt events.

Custom Score slide (16)

On this slide I used several multistate objects: where I added two states (Dutch/French) to the Normal state which has the English text. The On Enter event of this slide is used to trigger this action which will take care of showing the correct language information, and of the appearance of the Tropy image if the learner has passed.

One warning: the maximum score on the custom score slide is not created by using a system variable, but typed in (can also be calculated, as I explained in an older post about intermediate score slides). The variable cpQuizInfoTotalQuizPoints will not have changed from the original 60 points which took into account all quiz slides. It is strange because cpInfoPercentage where that maximum score is used, is correctly displayed as is  cpQuizInfoPointsscored.


I know that more improvements are possible, but blog post is already pretty long. If you really want to show a custom progress indicator on the quiz slides, maybe you’ll find some inspiration in this old post. 

If you allow backwards navigation, even give the opportunity to choose another branch on the dashboard, there will be some more editing needed. This article was meant to explain what happens when using the Branch Aware feature. Hope it helps some people.

The post What is Branch Aware? appeared first on eLearning.

Water and Fire? Fluid Box with Rollovers


A type of objects that is mentioned by the HTML tracker for non-responsive projects, is the rollover type: rollover caption, rollover image, rollover slidelet, rollover shape. However if you ignore that warning in such a  project, the rolloverrs will work fine when used with a mouse on a desktop or laptop screen (with the exception or the slidelet, which you should avoid at all times). However even when using a stylus, those rollovers will not appear on mobile screens.

However when creating a responsive project using Fluid Boxes, the options for inserting a rollover are greyed out, there is no way to add them. Is there a workaround to have rollovers for desktop/laptop users? This question appears once in a while all over social media/forums. In this post you’ll see how a rollover could be mimicked, and how to deal with them.

Example Movie

I cannot insert a responsive movie in a blog post. Use this link to have access to it. Try it out on a laptop or desktop screen: roll over the buttons in the left and in the right most Fluid box. You’ll see rollovers for the big Blue buttons which do not have a real button functionality. The red buttons on the right are active, a hint message appears when rolling over the buttons. You can click those red buttons. This is a static screenshot of that slide (which appears after the poster image and the first slide):

If you try this on a tablet or a smartphone, rollovers will not appear. I tested on iPad and on an Android (HTC) phone.

First Mimick: Hint Messages

You did see the Hint messages for the red buttons when hovering over them. If you use a tablet or a phone they will not show up. Those buttons have the InBuilt States ‘Rollover’ and ‘Down’, but only the Down state will be visible on those mobile devices. This is the Object state panel for the second button:

For interactive objects it is possible to check the option ‘Hint message’ in the Actions tab. In all themes included with Captivate those messages are no longer in a caption but in a shape. The hint message appears wh

There are some problems with this solution:

  • Buttons and Hint messages will share the real estate in the (normal) Fluid Box.

    That is a waste of space especially for mobile screens where those hints never appear. and the buttons may shrink too much as you can see here:

  • I tried to use a static fluid box for each button+hint to be able to stack the Hint message over the button but that leads to very ugly flickering and is excluded.
  • You don’t have control over the exact size of the buttons, and certainly not over the HInt messages (look at the screenshots above). This may be not so important since you’ll only watch on a big screen, but nevertheless.

Second Mimick: Rollover State

With the blue shape buttons I demonstrated that you can fill the Rollover state with Text (mimicking a rollover caption), with an image (mimicking a Rollover Image) and with both. Here is a screenshot of the second shape button, having an image and text:

The effect is quite nice, provided you use rather big shape buttons as was the case here:

There is a possible problem when using images: they can be distorted if the option ‘Maintain Aspect ratio’ is unchecked. That was the case in the example, and can lead to distortion:

Shared Action for Red buttons

The active red buttons trigger a shared action which will change the state of a shape (showing explanations), add a star to a progress indicator and have it animated. If you have read blog posts written by me, you know that I am a big fan of Shared Actions.

The post Water and Fire? Fluid Box with Rollovers appeared first on eLearning.

Review before Retake?


This question recently appeared on the forum (thread):

“I’d like to customize the results page at the end of a quiz to display the numbers 1 to 20 (representing the 20 questions in the quiz) and indicate if each question was answered correctly or incorrectly.”

Although I posted an answer, the user never returned to check it. Since I have spent some time to work out that solution, I also discovered that it could be very useful in two situations that are often mentioned as failing in the normal Captivate design:

  • To show the user an oveview of answers on a test with Knowledge Check slides: which anwsers were  correct/incorrect? If you are not sure about the differences between KC slides and normal quiz slides, have a look at this article.
  • To create a Review slide, where the learner would see the same information for normal quiz slides. Captivate has a great Review feature for quiz slides (not for KC slides) but it has some shortcomings. It will not only show the answers by the learner but also the correct answers. Moreover, clicking the Review button will cancel all remaining attempts on Quiz level for apparent reasons. With the solution I propose the user would not see the correct answers, only which questions were answered correctly or incorrectly, and the Retake attempts would still be available.

The work flow is based on a couple of easy shared actions, use of multistate objects (for the feedback checkmarks) and some advanced actions.

Example movie

Watch this movie  which I cannot embed in this location. You can use any device to open this link (it is a rescalable, non-responsive HTML5 project).

You will first see a test with two Knowledge Check slides, followed by a ‘Review’ slide. You will be able to retake this test, or to continue.

Second part is a realy quiz, with 5 question slides. Question slides are followed by a Review slide. In Quiz Preferences I provided 3 attempts. When the attempts are exhausted or you succeeded passing the test, the Next button (was formerly a Retake button) will take you to the official Score slide.

Set up

Checkmark – multistate object

The checkmarks, both on the Review slide for the KC question and for the real quiz, are shapes with 3 custom states:

  1. Normal state: shape is invisible because Alpha for Fill and Stroke for Width are both set to 0.
  2. Correct state: shape is filled with a PNG representing a green tick symbol. This can of course be all you want: text, text + image, text + image + audio. I kept it simple.
  3. Wrong state: shape is filled with a PNG that is the Cross symbol.

Here is a screenshot of the Object styles for the checkmark:

The checkmarks are labeled: Check_KC1 – Check_KC2 for the KC slides, and Check_1, Check_2…. Check_5 for the Quiz slides. The numbers make it easier to select them by filtering in the Parameters dialog box, because they are used in the shared actions.

Retake button Quiz Review – multistate object

That button on the Review slide for the Quiz, is used to start a new attempt because the user will not see the Score slide. I had to reproduce he functionality of that Score slide, where the Retake button automatically disappears in two situations: either the learner has passed the quiz, or the Quiz attempts are exhausted. I solved that by adding a custom state to the Retake button, where the label changes to ‘Next’. To have a non-confusing Rollover and Down state, which would be valid for both the Retake and Next button, I used the text ‘>>’. This is the Object state panel of this button, type Transparent button like the Quiz buttons and buttons on the Score slide: The advanced action (see below) EnterReview will take care of switchnng beteen the Normal and Passed state.

The Review slide for the KC questions doesn’t need that type of button. It has two buttons: Retake for those who want to retry the KC test (answers are always reset for KC slides when leaving them) and a Continue button.

KC/Question Slides – variable v_KC

I changed the default setup to only one attempt for the KC-slides (default =  Infinite attempts). That change made the Last Attempt event availalbe. Contrary to Quiz slides the results of the KC-slides are not stored in exposed system variable. I wanted to show a ‘trophy’ on the Review slide to learners who correctly anwered all KC-questions. To track the correct answers, I created a user variable, labeled v_KC  which starts with a default value of 0 and is incremented for each correct answer. For the same reason, the shared action triggered by the Success event is different from the one used for normal quiz slides. If you import the shared action to another project, the variable will automatically be created.

Quiz slides kept the default setup: only one attempt allowed.

Events for Actions

On KC-slides Success event (Quiz Properties) is used for Shared Action ‘CorrectAnswerKC

On KC-slides Last Attempt  event (Quiz Properties) is used for Shared Action ‘WrongAnswer

ReviewKC slide On Enter event triggers Advanced Action ‘EnterReviewKC

Continue button Success event (on ReviewKC slide) is set to simple action ‘Go to Next Slide’

Retake button Success event (on ReviewKC slide) is set to simple action ‘Jump to slide  KC1’ (first KC slide)

On Question slides Success event (Quiz Properties) is used for Shared Action ‘CorrectAnswer

On Question slides Last Attempt  event (Quiz Properties) is used for Shared Action ‘WrongAnswer

Review slide On Enter event triggers Advanced Action ‘EnterReview

Retake button Success event (on Review slide) is set to simple action ‘Go to Next Slide’

Score Slide On Enter event triggers Advanced Action ‘EnterScore

Shared actions

WrongAnswer triggered by Last Attempt event (KC slides and Quiz slides)

It is a very simple action with two commands: changing the state of the associated checkmark to the Wrong state and going to the next slide. There are two parameters: the checkmark (which is different for each slides) and the state. Although the state always has the same name (Wrong), there is no way to turn it into a ‘fixed’ parameter (one of my feature requesnts). Here is the action with filled in parameters

I like the way it is possible to track shared actions in the Library, look at the Usage panel for this action/ You see that this shared action is used both for the two KC slides and for the 5 Quiz slides.

CorrectAnswer triggered by Success event Quiz slides

It is a similar action, now showing the state Correct in the first command:

CorrectAnswerKC triggered by Success event KC slides

I used the CorrectAnswer from Quiz slides as template to add an extra command that will increment the variable v_KC.

Advanced Actions

EnterReviewKC triggered by the On Enter event of the ReviewKC slide

This is a simple conditional action, to decide if the trophy will show up or not.

EnterReview triggered by the On Enter event of the Review slide

This conditional action has two decisions. The first decision will change the state of the Retake button to have a Next button if the quiz has been passed or the Quiz attempts are exhausted. The second decision is about showing an image if the quiz has been passed. It also shows or hides the text mentioning the number of the present attempt.

EnterScore triggered by the On Enter event of the Score slide

This is the ‘trick’. To have the functionality of a Retake button on the previous slide, which is the Review slide, the playhead visits to the score slide, but will immediately jump back to the first question slide. All quizzing system variables are reset in that case. Only when all attempts are exhausted or the learner passed the quiz, will the score slide become visible to the learner.

More is possible…

Several enhancements are possible based on this approach:

  • You can have multiple review slides, if there is not enough space on one slide
  • You can have a review side after a chapter which has some question slides or KC slides; in that case you’ll have to tweak the advanced actions; if you want to track different bunches of KC slides you can either reuse the variable v_KC or use several variables. In the last scenario you’ll have to turn the variable in the shared action into a real parameter.
  • I used a simple checkmark to indicate correct/wrong answers. It is not limited to that: in custom states you can also have audio, text etc…

More ideas? Suggestions?

Built in States for Drag&Drop objects


With Captivate 9 multistate objects was one of the most welcome new features. In previous versions only buttons and shape buttons had states like ‘Rollover’ (hover) and ‘Down’. Interactive objects like buttons/shape buttons have InBuilt States: ‘Normal’, ‘Rollover’, Down and with Captivate 2017 a fourth InBuilt state was added: ‘Visited’. For all objects, static or interactive, you can create custom states..

Less known is the presence of InBuilt states for all objects in a Drag&Drop slide, both for drag sources and for 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 extra custom states.

Example Movie

Watch this movie. Beware: it will open in a separate browser window. When closing that window you’ll be back in this post. After watching interactive explanation slides about all the InBuilt State, you’ll be able to play with two Drag&Drop  use cases:

  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 InBuilt states and for the drop target. All objects also have one extra 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 SuccessDD4 has three commands:

  • Change State of Target1 to AfterDD
  • Hide Gr_Draggers
  • Continue                                            to release the playhead

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:

  • Assign v_enter with cpInfoCurrentFrame        for the Replay action
  • Show Gr_Draggers

Use Case 2 ?

I hope you can figure out the setup of this slide. This article is a refurbished version of an older article which I wrote for Captivate 9. Feel free to visit that original post. This second use case has been modified: I edited the SVG’s by roundtripping with Adobe Illustrator, and the surprise at the end is no longer a Xmas surprise.

My plans are to upgrade important older blog posts to CP2017 and HTML5 output. At least if you let me know if this would be appreciated 

Custom Quiz Results Slide Using Fluid Boxes

With the release of Adobe Captivate 2017 edition, I’ve decided to revisit some of the earlier tutorials that I have made for you in the past, especially tutorials that were created with Adobe Captivate 8. Several years ago I made a tutorial on creating a custom quiz results slide using a simple advanced action. In this video, I will show you how to create such a slide but this time using Fluid Boxes, multi-state objects, and Adobe Captivate (2017 Release).

Recorded LIVE STREAM – Adobe Captivate 2017 Key Features

This morning I ran a live stream on my YouTube channel and walked my viewers through some of the key features in Adobe Captivate 2017. I’ve saved the recording for all of you to watch and get some first-hand tutorials on how to use the new features in Adobe Captivate 2017. Check it out.