If you have watched my course about Using Shared Actions, you'll already know that this is one of my favorite features. It makes it possible for newbies to create rather complicated tutorials without need of programming skills. 

I already uploaded a game recently, here is another one. You can use this link or play with the embedded one:

Intro

You prefer step-by-step workflow for this second lesson over a video. Great. Let us start with this second lesson,  explaining how to use the shared actions from the first project in your project. Believe me: it is as intuitive as the first lesson.

Workflow: (re)Use shared actions in your projects

Step 1: Preparation

To follow this workflow, you need a project with at least two slides:

1. Content on the first slide is not important, it is meant to allow you to test the project.
2. Second slide needs to have these objects:
   • Two multi-state objects. Content is not important: audio, video, graphics, text or combinations in the states. Only requirement: same number of states in both objects (although you can have some identical states). They are labeled Container1/SVGContainer in the Timeline below.
   •  A shape or caption which will be used to insert the variable v_counter. You will insert the variable later on. Labeled SS_Counter in the Timeline.
   • Two navigation buttons: Next and Back. They are labeled SB_Back and SB_Next in my project (shape buttons)
   • A button to jump back to slide 1, with the action ‘Jump to slide 1’ or ‘Go to Previous Slide’. I used a SVG as button, labeled SVB_Home.

Here is an example of the Timeline of the project I use, the names are mentioned above::

If you are eager to start but do not have time to create a custom project, you can download this one:
Lesson2Start

Please do not use the SVGs from SVGContainer in your projects. They were extracted from a licensed AI file.

Step 2: Variables

Have a look at the variables, using menu Project, Variables.  The default view will show you the two user variables which are added to each project:

Step 3: Open External Library

Use the File menu, option Import, External Library. You have to point to the original project which has the shared actions on board.  In this case that will be the start project which you used in the previous practice; “SlideShow”.

The project will not open, but its library appears as a floating window in the left top corner of your screen. You will probably need to increase its height, and collapse the Images folder to see the Shared Actions folder clearly. 

You can use any object directly from this external Library in your project. I used the Home button (SVG). However for the Shared Actions, it is better to not use this method. It can be done if there is only one independent shared action, but in this example the three actions are somehow linked due to the used variables.

Step 4: Drag shared actions to project Library

Select the three shared actions in the external Library, and drag them to the project library. They will appear in that library with the Usage set to 0. Be sure to drag all the actions  at once. Reason:  they share some variables. which could lead to the creation of multiple instances of the variables. You will check this in step 5.

Step 5: Check variables

Use Project, Variables and… surprise! The variables used in the shared actions have appeared, including their default value and description

You can now insert the variable v_counter  in the text (see Timeline) SS_Counter, using the X button in the Properties panel, Character part.

The text will look like this:

…. $$v_counter$$

Beware: if you see more than one instance of a variable, it means that you didn’t drag ALL the shared actions at once. In that case, please delete the shared actions, delete the variables and retry Step 4.

Step….

You can now repeat what you learned in the previous lesson: drag the shared actions to the slide and to the navigation buttons, and choose a ‘value’ for the parameters.

Do not forget to test if everything is working as expected. Use F11, Preview HTML I Browser for the best preview.

More?

The step-by-step workflows described in this and the previous blog (or in the video and the next video to be published soon)) can be used for all the interactions in the Demo project, provide you have the shared actions. Not only for those rather simple interactions! It is also possible for more complicated projects like the Matchstick game, which I published recently, and for many more use cases.

I sincerely hope that at least some Captivate users will realize possibilities.  Ask an expert to design shared actions which can be used by any Captivate developer,  without having to dive into advanced actions, variables etc. .

I may post an 'epilogue' to this short crash course, listing up some Q&A. If you have a question to contribute, do not hesitate to post it in a comment.

Preparation

In Lesson 1 you started from an existing project, which had created objects for the Slide show AND shared actions in the project Library. Topic of the lesson: workflow to attach the shared actions to a slide event (On Enter) and to buttons (Success event). Lesson ended with the proposal to create a personal project with two slides. First slide is a title slide with only a Start button (Go to Next slide). Second slide needs two multistate objects. Number of states is not important but has to be the same for both objects (you can have identical states if wished).  Two navigation buttons (Back and Forward) and a button to get back to the first slide and your homework is done.

For this video lesson you need:

• The original project, which I provided in Lesson 1. If you lost it, here is another link (dropbox)
  SlideShow
  
  
• Your project. If you are really lazy, you download my project as used in the video. Please, do not reuse the SVGs, they are created from a licensed Adobe Stock file. You can use them only for practice the video workflow.
  StartLesson2

Video

You will transfer the shared actions to your custom project, and reuse them.

After finishing the workflow, you can compare your result with 'Lesson2'

Preparation

SlideShowStart

Step-by-step

Step 1: explore project

1.1 TImeline and setup

Take a look look at the setup of the second slide. In the Timeline I grouped all design elements at the bottom. 

The 5 items on top of the group are:

• ImContainer: a multistate object with 5 photos
• TxContainer: a second multistate object, which has texts in the same sequence to explain the photos
• SS_counter: smart shape with the text having the embedded variable v_counter
• SB_Next: the Next button, a shape button
• SB_Back: the Back button, shape button
• SVB_Home: SVG used as button

1.2 Variables

Open the Variables dialog box, using Project, Variables.  You will see two variables: v_counter and v_max. The latter will store the amount of items in  your show. Their default values are not important, they will be set with the actions.  Just for clarification I set v_counter to start with 0 and v_max to 5 because the example has 5 photos. But they are not important.

1.3 Library

Open the Library panel, and find the subfolder ‘Shared Actions’. You detect 3 shared actions, and their Usage is stil at 0 for the moment: 

Step 2: ‘EnterSlideShow’ to Slide

Double-check in the Properties panel or on the stage that NO object is selected, that you are in the Slide Properties. 

2.2 Link the action to the On Enter event

There are two possible workflows:

1. From the Library: drag the name of the shared action to the slide. You just have to be careful not to drag to an interactive object (the three buttons in this slide). It will automatically be linked to the On Enter event, never to the On Exit event. Moreover the Parameters dialog box (see 2.2) opens directly. This is my preferred workflow.
2. From the Properties: go to the Actions tab, open the dropdown list next to ‘On Enter’, choose ‘Execute Shared Actions’ and choose the action ‘EnterSlideShow’
   

2.2 Define the Parameter(s)

If you used the Library approach, the dialog box ‘Shared Actions Parameters’ will be open. If you used the Properties  panel approach you need to click the {P} button next to the Action field. In this dialog box you’ll see both description of the action and of the parameters. Please give a value to all the parameters needed. You can use filtering (will post a video tutorial for a more complicated parameters set).

Step 3: actions for the buttons

The Home button has the simple action to return to the first slide. This will allow you to test the reset actions in the On Enter action of step 2. Before testing you still have to attach the shared actions to the two navigation buttons. Workflow is exactly the same for both.

3.1 Link the action to the Success event

You can use again two workflows, similar to step 2:

1. From the Library: No need to select the button! Drag the name of the shared action to the button.. It will automatically be linked to the Success event of the button.  Of course, this is my preferred workflow, because the Parameters dialog box (3.2) will open immediately.  Saves a lot of clicks.
2. From the Properties: select the button, go to the Actions tab, open the dropdown list next to ‘On Enter’, choose ‘Execute Shared Actions’ and choose the action ‘EnterSlideShow’

3.2 Define the Parameter(s)

Identical to 2.2. Parameters for both button actions are identical: the two containers. It doesn’t matter if you switch image with text container, sequence is not important.

Step 4: Test

Lesson 2

• with two slides, start slide only navigates to second slide
• second slide needs two multistate objects with the same amount of states
• second slide needs two navigation buttons (back/next) and a home button (jumping to slide 1)

Preparation

You have read the introduction and watched the Demo project. This lesson will explain the interaction 'SlideShow' which you did see in the demo. You may download this start project, which has two slides. Exploration is explained in the video:

SlideShowStart

Video

You will be exploring the start file, discovering the shared actions in the Library, and the variables. You will attach the shared action to  a slide event (On Enter) and to button Success events, in both cases you will choose the parameter values.

The result of the completed lesson should look like you can see under this link. I left the playbar for your convenience.

SlideShowEnd

Preparing Lesson 2

Lesson 2 will show how you can transfer and use the shared actions to your project. If you want tot follow, prepare a project:

• with two slides
• second slide needs two multistate objects with the same amount of states
• second slide needs two navigation buttons (back/next) and a home button (jumping to slide 1)

For any Captivate user, new, intermediate or advanced.

Even if you are very new to Captivate, continue reading!

Contrary to Advanced Actions and JavaScript, Shared actions can be USED without needing to write out or edit scripts, nor to create variables. You don't need to be able to assemble an engine for your car to be able to drive, isn't it? What do you need?

1. One or more shared actions created by a friend/colleague who is more advanced with Captivate
2. To understand what a  'parameter' is (new term in your personal Captivate glossary)
3. To learn how to add shared actions to your project, slides and interactive objects. Description and name of the shared action will help you (contrary to advanced actions).
4. To choose the parameter values based on their descriptions. Automatic filtering by Captivate is a big help.

You read the introduction to a short ourse for adventurous newbies, including:

1. A demo project with 4 useful interactions. All interactions can be realized using shared actions without having to create variables nor scripts.
2. Explanation of the term 'parameter'

The course for newbies has TWO lessons. Each lesson comes in two 'flavors' to adapt to your taste:

• Short video
• Step-by-step text

To facilitate your learning/understanding, you'll get a start project  to practice the workflow.  You will also be able to use your personal project for the second lesson.  Both lessons are about one of the 4 interactions in the Demo project (see below). Depending on the 'welcome' by the community, may repeat this workflow for the other interactions or even for a game like  MatchStick game

Demo project

• Dashboard interaction (menu going to 4 chapters)
• Slideshow
• Click/Reveal
• Toggle buttons

I used design elements from the new Quick Start Project ‘Diverse’. You can open the demo project using this link:

UsingSharedActions

Or watch it below  (fixed resolution):

What is a Parameter (in shared actions)?

1. Command Jump to slide: needs one parameter which is the slide. It is clear that you cannot change to another type of item than a slide.
2. Command Change State of…: needs two parameters, first is the multistate object, second is the state you want to show. The first parameter has to be a multistate object of any type: shape, caption, button (for custom states), image, video, animation… Second parameter needs to be a state of that multistate object.
3. Commands Hide/Show: need one parameter. Anything that can be shown or hidden is possible: shape, caption, button (for custom states), image, video. But also groups are possible! Look at the practice session below to see how this extends shared action functionality beyond what you are used to.

You may skip the explanation about the two types of parameters and go directly to the first lesson if you don’t like definition texts. Knowing the differences between parameters is not so important in this crash course, . BTW: the terms ‘compulsory’ and ‘candidate’ are just my personal choice, not official terms.

Compulsory parameters

Candidate parameters

In a conditional action you can have another candidate parameter, the ‘literal‘. Example: you want to limit a number of attempts by the learner to a maximum of 5. If you want to be able to edit that maximum number, you could define the literal as a parameter. This can be a bit tricky, but is beyond the scope of this basic blog.

Intro

A while ago, with Captivate version 8, I created a SWF version of this game. If you have a browser (such as Internet Explorer) supporting the Flash Player plugin, you can have a look using this link.  With that verrsion I could take advantage of the brand new Shared Actions, which allowed to have variables defined as parameters. In version  CP7 where shared actions were introduced, that was not yet possible.

Today HTML5 output is the standard. Moreover Captivate in recent versions has added some very useful features, which I would like to use to create a new version of this game:

• Multistate objects, making the old Hide/Show workflows unnecessary, sparing time which was needed for resetting. Feature was added with CP9.
• Guides and Rulers make setting up layout so much easier. Feature was added with second release of CP9.
• New commands in Advanced actions: ‘Go to Next State’, ‘Go to Previous State’, ‘Delay Next actions by’  appeared in CP2017 with the new version of the dialog box)
• Effects 2.0
• Bitmap image used as button, new feature in CP2019,  release 11.5. I also used some design elements from the Quick Start Projects.

Why didn’t I use SVGs i this case? The stock image which I used to create the different matchsticks, did lead to smaller file size for PNG than for SVG. I know that they may be blurry when upscaled. There is no problem with the clickable area being the bounding box, due to the shape of the matchsticks. That is often the reason why I prefer SVG, but not the case here.

Have some fun with either the scalable version using this link, or with the embedded version (rules are explained in the file):

Tip: have a look at the end of the blog for a suggestion...

Setup

The example file has 4 slides, using some design elements (and colors) from the Quick Start Project 'Wired':

• Title slide with a 'Play' button, which triggers the default 'Go to Next Slide' command
• Intro slide, explaining the Game rules and a Start button. The On Enter event of this slide has an advanced action. Slide has double action: explaining rules on first visit, dummy slide on next visits. Such a dummy slide is necessary for a Reset action/
• Game slide: On enter event is also used as advanced action trigger. More details below.
• End slide

Slide Game - Timeline and Layout

I set up a grid of guides fo-r the game slide. It will be very useful when adding a second game slide based on another word:

The timeline is used to have the Next button and the final set of matchsticks (with flames) appear when necessary. No Hide/Show actions were needed:

You see on this timeline: 

1. All are PNGs used as buttons, their timeline ends ar 1.6secs and pausing point is at 1.5secs. The Rollover and Down states have been taken out, a custom state 'Burnt' has been added:
   

   

2. Feedback: a multistate smart shape timed for the rest of the slide. Normal state is made invisible, Success, Late and Cheat state were added:
   

   

3. SB_Reset: shape button timed for the rest of the slide, default setting (pausing point not really necessary), timed for the rest of the slide. It triggers the simple action 'Go to Previous Slide'.
4. SB_Next: shape button, appearing at 2.5secs, pausing point at 0.7secs. This means that the button will be invisible while playing the game.
5. Gr_End:  group with burning matchstick images. Timeline starts at 1.6 seconds, till the end of the slide. That group will also remain invisible to the learner during the game.
   

Variables

You'll need a whole bunch of variables (4+15):

v_correct: will track the number of correctly removed matchsticks; start value = 0

v_moves: wil track the number of removed matchsticks; start value = 0

v_max: fixed value, number of matches that may be removed; will be populated in EnterGame action

v_visit: to track the visits to slide Intro;  start value = 0

v_11, v_12....v_35: Boolean variables , one for each matchstick, start value = 0; they track if the matchstick has been removed (value = 1) or not. The labeling is using the same logic as for the Mt_ labels. That makes it easy wen defining parameters.

Events and Actions

EnterIntro

As the name tells, this advanced action is triggered by the On Enter event of the second slide 'Intro'. 

It is an easy to understand conditional action, based on the tracking variable v_visit. On first visit the slide is played normally, on following visits the slide is skipped immediately, and re-enters the Game slide. That is necessary to reset variables for that slide.

EnterGame

Triggered by the On Enter event of the Game slide, is used to reset all the variables. 

Similar to EnterIntro, it could be interesting to convert to a shared action. Explanation in that same future blog post (or webinar?).

Match_NOK (shared action)

This action is triggered by the Success event of the matchstick buttons, for those who should NOT be removed (hence the N in the name of the action). Here are screenshots of the action with indication of the parameters, and the description of the parameters:

The action has three conditional decisions.

1. Second decision  'Checker' compares the number of moves with the allowed maximum, and shows a message (state) when that maximum has been reached. I used the Delay command, to have the message disappear after a while.
   
   
2. Third decision 'Cheat'  will lead to another message (state) if more than the allowed removals have been done. Again Delay command was necessary, ;this time to create an automatic Reset by going to the Intro slide.

This shared action has been used 9 times. Only the first two parameters have to be entered carefully, the other 4 are always the same.

Match_OK (shared action)

This action is triggered by the Success even of the matchstick buttons which need to be removed. Here are screenshots of the action with indication of the parameters,(2 extra compared with the previous shared action: Success state and the Gr_Match):

The first three decisions are similar to those of Match_NOK. Just one exception: this time the variable v_correct needs to be incremented/decremented within the first decision. A last decision 'End' was necessary for the Success situation, where v_max removals  (here 6) resulted in the correct word. 

More?

If you are pretty new to Variables, Advanced and Shared actions, this may seem very complicated. 

What if you want another slide with another word, maybe another number of maximal removals? 

You want to recreate such a game, maybe with other objects than matchsticks? 

It could be done without having to create any variable, just by using shared actions. Wished I could explain this in a workshop . Would you be interested? It is a very nice example of the way shared actions can allow you to create interactions WITHOUT PROGRAMMING SKILLS.   You don't have to believe me, of course... let me know if you want to participate  You can contact me using the mail address, or go to my website and fill in the contact form mentioning this invitation. 

Intro

• Pausing point is at 1.5 seconds, same as for Quiz slides, but that point is not visible in the Timeline.
• Last Attempt action is wrongly indicated as ‘Failure’ action. Same as for normal Quiz slides, D&D slides have NO Failure actions.
• You cannot have a Retry message when you provide more than one attempt.
• There is only one Failure message, you don’t have the possibility of up to 3 different messages as is the case for other quiz slides
• There is no Review status, which indicates if the question was answered correctly, and which answers were wrong or correct.
• There are no Review navigation buttons. That is a problem, because during Review when the learner gets to a D&D slide, he will be stuck without those buttons.

For the problems concerning Try again, or multiple Failure messages I already offered a solution with a dynamic feedback message in a previous blog post. In this post I will try to explain a workflow for the Review issues.

The result of this workflow was visible in the sample project which I posted last week. There is a scored D&D slide as last question in  first part (Timeline).

Setup

Checkmarks

The small versions are used for the individual answer feedback, the normal versions for the global feedback Look at this example

Those checkmarks were used for multistate objects, with an empty Normal state. They are already present in the correct location during the quiz but invisible due to that Normal state. Two more states show either the correct or the incorrect checkmark. This is an example of the Object State panel, for the answer about the Shape button.

Review Navigation buttons

Variables

v_DD: will be toggled to 1 if the D&D slide is correctly done.

v_EffectDD; will be toggled to 1 if the Effect color is correct

v_SButtonDD: will be toggled to 1 if the Shape button color was correct

v_ShapeDD: will be toggled to 1 if the Shape color is correct

The system variable cpInReviewMode was used as well.

Events – Actions

Three events were used, all to trigger advanced actions: Success and Last Attempt event of the Drag&Drop slide (in that panel) and the On Enter event of the slide.

CorrectActDD

Why was it not possible to use the same Correct shared action in this case?  A D&D slide has no two-step Submit process, where the first step will keep the slide paused to allow the learner to read the feedback message.  It is possible to imitate that behavior, but I wanted to keep it simple, by keeping the slide paused for a couple of seconds before proceeding to the next slide. Second reason: for a correct answer need to toggle the variable  v_DD to 1. To achieve this, I used the shared action ‘CorrectAct’ as template to create this advanced action, which has two extra commands:

WrongActDD

EnterDD

If you have problems or suggestions, post a comment please!

Intro

As explained before, showing intermediate score slides, will not affect the reporting to a LMS. It is still a SCORM requirement that each course will transmit only one score, in this case the total score of all parts of the quiz. However showing intermediate scores can be helpful both for the learner and the developer: taking decisions based on the partial results are possible.

Since that old article, the powerful Drag&Drop slides were added to the Quiz toolset. A D&D slide can be scored, results can be added to the total score. They will not completely behave as the other quiz types. Have already posted some tweaking suggestions in previous posts.  The example file includes a D&D slide, which will have a Review status similar to the other quiz slides. The setup for such a Review status will be explained in a separate blog post.

Example file

It has three parts with questions about the three main stumbling blocks for Captivate users: Timeline, Quiz and Theme. You will see the progress (score)  for that part on each quiz slide,. Each part ends with a custom score slide. You can answer the different parts in any sequence, but after finishing all of them, you will be able to go to the final score slide, which  is the default score slide. You are free to explore the Review status using its button on the final score slide.

In the questions you’ll see that penalty, partial scoring etc have been used and are reported correctly.

Check your Captivate knowledge. There is only one attempt both on Question and on Quiz level. You can use this link for a scalable version or watch the embedded version (fixed resolution) here:

Overview and logic

The less-known Advanced Interactions panel offers a good overview.  On the dashboard three click boxes take care of navigation to the parts. You’ll see 5 question slides for the first part (Timeline), 4 for the second part (Quiz) and six for the third part (Theme). I collapsed the Drag&Drop slide, complete setup of that slide will be in the next blog post. You’ll see that I did use the Success and Failure events of the quiz slides (1 attempt) and several On Enter slide events. Both Advanced and Shared actions were used.

On the last quiz slide of each part, a Back button takes the learner back to the first slide, the Dashboard.  The former text ‘Part x’ will be replaced by the score obtained for that part, once it has been done. When all quizzes have been answered, the instruction text ‘Please, select an avatar’ is replaced by a originally hidden button which allows to go to the Final score slide, which is the default score slide of Captivate.

Setup

Variables

Quite a bunch of variables were necessary.

Part 1 (Timeline)

v_TimeCorrect: will track the number of correct answers for the part. Equivalent of the global variable cpQuizInfoTotalCorrectAnswers

v_TimeMax: will be used to calculate the maximum score which can be obtained for this part. Equivalent of the global variable cpQuizIntoTotalQuizPoints

v_TimePerc: will be used to calculate the percentage acquired for this part, equivalent of the global variable cpInfoPercentage.

For the number of questions in each part, I preferred to type in the literal value. It would have been possible to make this also tracked automatically of course.

Part 2 (Quiz)/ Part 3 (Theme)

Other

More variables were needed for the Drag&Drop slide setup, but they’ll be explained in the next blog post.

Events and Actions

Dashboard slide

To prevent the learner to press a click box multiple times, it needs to be disabled after the first attempt. That first attempt is identified by checking the score. There is a minimum chance that the learner had a zero score, didn’t expect that to happen but if it is the case, you would need an extra tracking variable which could be a Boolean.

Click Box Success events trigger: CBTimelineAct, CBQzAct, CBThAct (Advanced actions). This is a preview of the CBTimelineAct:

The Done state of the text object will show the obtained score instead of the default text ‘Part x’.  The two other click box actions are similar, you need to edit the Text object name and the slide to jump to. I preferred a duplicate action instead of a shared action, because it is rather simple, only two lines and used three times.

Shape Button SB_Final Success event: simple action ‘Jump to Slide FinalScore’

Quiz Slides (all)

This shared action is used by all quiz slides (14) except by the Drag&Drop slide (see next post) where I used the shared action as a template for a slightly different Success action:

Last Attempt event in Quiz Properties: WrongAct (Shared action)

Similar to the CorrectAct, used 14 times and once as template for the Drag&Drop Last attempt action:

If you are worried about the + operator for the negative points: the value of that system variable is negative by default.

First Quiz Slides

The avatars identifying the part on the quiz slides (needed to edit the master slides to make place for this custom group) have two extra text fields, one identifying the part, and one with the obtained score.

Last Quiz Slides

Same advanced action is used for all Back buttons:

The second decision checks if all parts have been done and will show the button to jump to the final score slide if that is correct.

Intermediate Score slides

The second decision is meant to skip the score slide during Review. The other advanced actions are similar to this one, just replace the variables. With the JS the percentage is formatted to maximum 1 decimal.

Final Score slide

Reminder: the avatars on the quiz slides are groups – see above.

More?

Lot more is possible of course. I didn’t insert a decision based on the already acquired intermediate scores but it is easy to do. I didn’t provide multiple attempts on quiz level, nor on question level. Comparing with my old article about Intermediate Score slides, the Review functionality is preserved however. Using the shared actions is a big improvement as well. I didn’t insert a progress indicator, because it would need more advanced actions, due to the splitting in parts and the presence of the Drag&Drop slide.

About the integration of the Drag&Drop slide,  especially its custom Review state, you’ll learn in the next blog post.

Intro

I hear some suggesting: use the On Exit event instead of the On Enter event. Logically? However that event is not to be trusted and . Consequence:  the frames in the inactive part of the interactive object are not visited. On Exit event happens after the last frame, which needs to be visited. Too bad, there is no ‘when leaving slide’ event, which would solve the problem. Hence this solution which is a little bit more complicated than the first solution.

Example file

View the example using this link for a scalable project, or this fixes resolution embedded one.

Setup

Progress indicator

This progress indicator has been inserted on the first slide, displayed for the rest of the project, always on top. However it will be hidden on the first slide by the On Enter action 'EnterFirst', because no slides are viewed yet.

Variables

Each slide  needs a slide tracking variable, user defined of the Boolean type. Start value is set to 0. Variable names are not important, I labeled them v_1 v_2,…..v_19 because it is easier to link them to the slides.  Boring work, sure but I always have a shared action ready in an external library with a bunch of variables and import them using the trick 1 explained in Rare tips for Shared Actions. For all slides except the first one,  Boolean will be toggled to 1 when visiting the slide for the first time. First slide doesn’t need a progress indicator on the first visit, since no slide have been viewed yet. The tracking variable v_1 will be used in the another action, to make the indicator visible on later visits.

Total number of visited slides will be stored in another user variable v_total, also starting with 0 as value.

A variable v_last will be used to detect if the active slide is the last slide to be viewed. This variable was not needed in the first solution.

The percentage viewed slides, which is displayed in a text shape (red) inserted on the first slide and timed for the rest of the project, is stored in the user variable v_perc.

The system variable cpInfoSlideCount will be used as well, its value is the total number of slides.

Events and actions

Enter event first slide: EnterFirst (advanced action)

Success event of the Start button on the first slide: StartAct (advanced action)

A short advanced action to make the ProgressIndicator visible after going to the Next slide.

Enter event of all slides (except first): PercCalcLast (Shared action)

This shared action has two decisions:

This calculated variable is used in the second decision. If it is equal to 1, the active slide is the last slide to be viewed. In that case the Normal state of the Progress Indicator is replaced with the Last state (warning about last slide), and the variable v_perc is set to 100%, will not change anymore during the session. The Else part is necessary to reset the state to Normal, so that later visits to any slide will show the progress in % (100%) again. 

Description of the 4 parameters, only the first parameter is different on each slide:

The Javascript, same as for solution 1,  is needed to format the percentage to no decimals.:

var perc = window.cpAPIInterface.getVariableValue(“v_perc”);

window.cpAPIInterface.setVariableValue(“v_perc”,perc.toFixed(0));

More?

The logic behind this solution can also be used to show a progress bar, which takes into account the visited slides instead of the default playbar which is just jumping around when navigation is not sequential. Of course you can also show the number of viewed slides instead of a percentage. Maybe you have more ideas?

Goal

All tutorials about showing progress as a percentage have the same limitation: you need to view the course in a linear way, no branching or other non-linear navigation. Even in the TOC the indicated Time at the bottom is supposing you are in a linearly visited course. In the TOC the checkmarks at the slides are the only way to see which slides have been visited in a non-linear course, there is no real progress indicator. Recently someone asked (again) for a progress indicator (percentage) that would be functional in a non-linear course. 

I have created two possible solutions, All is slide-based, which is the reason for the two solutions:

1. Easiest solution will show the % on each slide, but not after having viewed the slide, but when entering the slide.
2. More perfect solution will show the percentage after having viewed the slides. Bit more complicated.

Example

Progress indicator for non-linear course

Or you can watch the embedded version (fixed resolution):

Setup

Variables

Each slide needs a slide tracking variable, user defined of the Boolean type. Its start value is set to 1. Variable names are not important, I labeled them v_1, v_2,…..v_19 because it is easier to link them to the slides.  Boring work, sure but I always have a shared action ready in an external library with a bunch of variables and import them using the trick 1 explained in Rare tips for Shared Actions. Each Boolean will be toggled to 1 when visiting the slide for the first time.

Total number of visited slides will be stored in another user variable v_total, also starting with 0 as value.

The percentage viewed slides, which is displayed in a text shape (red), inserted on the first slide and timed for the rest of the project, is stored in the user variable v_perc.

The system variable cpInfoSlideCount will be used as well,which stores the total number of slides.

Events – Shared Action ‘CalcPerc’

That shared action is triggered 19 times, with the On Enter event of the slides:

The Shared Action is straightforward and needs only one parameter: the slide tracking variable:

var perc = window.cpAPIInterface.getVariableValue(“v_perc”);  window.cpAPIInterface.setVariableValue(“v_perc”,perc.toFixed(0));

The second solution where the progress will show the percentage viewed slides more correctly will be posted in another article, with its example file.

Intro

• Shared Actions: available since version 7 and improved with version 8. One of my favorite features, much underestimated by most developers for totally unknown reasons. Whereas in the old post I had to create 2 advanced actions for each quiz slide, this new version has only two shared actions, with one parameter.
• New system variable cpInReviewMode (Quizzing category). It is a Boolean variable with a default value=0. That value will automatically be toggled to 1 when in Review mode.

Example file

I used the edited Theme, based on the Quick Start project ‘Alliance’ which I also used in my previous post with the Survey about upgrading legacy projects. HTML5 output is not as smooth as SWF output. You can compare the old post  (see link mentioned before) .

The example has 7 question slides, different types, using partial scoring and penalty. You can play the rescalable version from this link or watch the embedded one here:

Setup

Variables

We need to track the score for each quiz slide. To achieve that, a user variable is needed for each question slide. In this case, we need 7 user variables. No default value needed:

Labels are not so important, you just need to be able to link them to the quiz slides. If you have a shared action ready as in the first item of ‘Rare tips for Shared Actions‘ that is fine as well.

Events

• On Enter event: will be used for a shared action EnterReviewAct. Tip: in the Advanced Interaction panel, this action will not appear (which is a pity). The reason is that the columns Success (which normally has the action for On Enter) and Failure (normally On Exit action) are used for the question actions. You can see the Usage of this action in the Library of course. Logically it has been used 7 times, because of the 7 quiz slides:
  
  

  

  
  
  
• Success event of question (Quiz panel): will trigger a Shared action ‘ScoreQuestionAct’.
  
  
• Last Attempt of question (Quiz panel): will trigger the same Shared action.  This action will be used 14 times. ave a look at this screenshot of the Advanced Interaction panel, where both the Success and Last Attempt events are registered:
  

  

  
  
  

Shared Actions

ScoreQuestionAct

This action is triggered by both Success and Last Attempt events. It happens sometimes that you get an error, because the same parameter is used for both events. That is a bug in Captivate, which I have reported since a while, but the actions will work perfectly.

EnterReviewAct

This conditional action triggered by the On Enter event, checks two conditions:

• Is the learner in Review mode?
• Did the learner have a positive score on this slide? As you can see in the Advanced Interaction panel (screenshot in previous part),  I used penalty and partial scores.   Partial scored questions are counted as ‘correct’ answers in Captivate.

If both conditions are true, the slide will be skipped.

More?

Maybe you have some comments?  I don’t have a crystal ball, but feel like these two questions may pop up:

1. Can this workflow also be used for random questions? 
   Answer is Yes: you need to trigger the shared actions for all quiz slides in the pool(s). Of course, you cannot have partial scoring, not penalty in a question pool.
   
   
2. Can you avoid skipping partial scored questions?
   I see a way to do this, but wait for your suggestions.

Intro

Eight years ago I wrote a blog post about ‘Secrets of cpQuizInfoAnswerChoice’. Of course the embedded published project was SWF at that moment. This specific quizzing variable is very useful when you need to evaluate the results of survey slides in order to make decisions. I created a new example file, partially based on slides from the Quick Start Project Alliance. It is part of a ‘decision tree’ which could be used for those who want/need to convert legacy projects to make them ready for publishing to HTML5.

Example file instructions

1. If you have only the SWF output of the legacy project.
2. If you have the cptx-file but cannot use it directly in the present Captivate version
3. If you have the cptx file which can be opened in the present version.

To explore a new branch, please refresh the browser. There are more than 3 recommended workflows because of sub-branches.

You can watch the embedded movie below (fixed size) or use the link for a rescalable version.

Values of cpQuizInfoAnswerChoice

This system variable belongs to the category Quizzing. Typical for that category is that the variables are read only, you cannot edit them in Captivate directly.

It is a reused variable, gets a different value after the Submit process on each quiz slide. The value you are getting depends on:

• Type of question (see below)
• Numbering (if available) in the question. For several types you can choose between capital characters (A, B, ..), small characters (a, b, …), numbers or None.  None will result in the same value as numbers (my preferred numbering)

In the example file I used three types of questions, which are very common in surveys:

1. True/False. For that type the value of cpQuizInfoAnswerChoice will be either a character or a number, depending on the chosen numbering type.
   Example: if learner choses “True” value will be A, or a, or 1 (also for None as numbering)
2. MCQ with radiobuttons (one answer): value will be the character or number of the chosen answer. No problem when shuffling the answers. Although the numbering on runtime will be changed in that case, the original number, as seen in the editing environment, will be stored in the variable.
   Example: Second slide in the example had three answers. You may shuffle the answers on runtime, but if the learner selected this answer, the value of cpQuizInfoAnswerChoice will be ‘1’.
   

   

3. MCQ with checkboxes (multiple answers possible): all chosen answers will be stored, using a separator (in my case a semicolon). If you use shuffling, the reported value will take the numbers originally assigned in the developing environment:
   Example: first slide in the example file looked like this. With the shown selection, the value of the variable will be ‘2;3;4’ even if due to shuffling the numbering was different on runtime.
   

   

Short description of the other Question types:

• Matching: the chosen corresponding  numbers in the first column, with separator(s) will be reported similar to MCQ with multiple answers.
  Example ‘A;C,B’ indicate that in the first column those were chosen to connect with A, B, C in the second column.
• Sequence: I couldn’t figure out what the meaning was of the reported value, very strange. Look like IDs (like Interaction IDs) separated by semicolumns. Maybe someone can explain?
• Fill-in-the-Blank: the text chosen for the blanks will appear, with separators.
• Short Answer: text entered by the learner.

Due to the fact that Captivate’s variables can store strings as well as numbers, if you choose for numbers you can perform calculations (Expression command). I used that feature in an old post about Graded Surveys. Tha particular technique  has not been used in this example.

Used Techniques

I will not explain every detail in this example file, just some tips about the used techniques.

Decision Tree – Branches

Before starting the development, I did sit down to see how many branches I would provide in this survey. The present example results in three main branches, ending up in three different end slides. Those are the slides surrounded by a red box in the screenshot of the Advanced Interaction panel (will blog about its use ASAP). The Survey slides are included in a blue box:

Example: The branch which will end on slide 12 (SWF_workflows), starts with a value=1 when the learner indicates that the output SWF is the only asset remaining from the legacy file. Based on answers to the other questions, this value can be incremented to 2 or 3. Each of them will lead to different content on slide 12.

Multistate objects

The information on the end slides (12-14) is stored in multi-state containers. The On Enter action of each slide uses the tracking variable for that branch to show the appropriate state. Look at the screenshot of the action triggered On Enter for slide 12:

There are only two decisions  (not 3) because the Normal state is valid for the situation where v_swf==1.

Embedded variables

The result of the poll can navigate to slide 14, with the recommendation to start from scratch. However it is possible that legacy assets can be used: documented/branded theme, assets like graphics files (PS/AI), audio clips, video clips, GIFT or CSV files for questions. To show this information, user variables are inserted in the states on the slide. Their value is either empty, or has a value due to the choices on the very first survey slide. Look at this screenshot, which shows the Normal state (no external library available) for the Scratch slide:

More?

Do you have questions? Please post them in a comment. Maybe we’ll meet at Washington DC, will try to help users struggling with conversion of their legacy projects due to the demise of the SWF player.

Question for you: any idea why a slide seems to be missing in the Advanced Interaction panel (slide 11)?

Intro

More is in a hyperlink – Dropdown menu

More is in a hyperlink – Close button

Later on I used the Dropdown menu workflow in all the interactive videos which I posted here, to create a Bookmark menu. Here is one example: Custom Play/Pause button

Last week, a user asked questions about the same topic. That was the incentive to check out if the described workflows for SWF output were still valid for HTML5 output. 

Example file

• Navigation buttons
• Show/Hide workflow
• Close button for a popup
• Forced view

I did keep the typical Underline for the hyperlinks (but often edited the color). You will find tons of them. The design of the slides was taken from the Quick Start Project included with version 11.5, labeled ‘Rhapsody’. It always reminds me of the epoch of the Hippies…

No audio, sorry.  There is no playbar, nor TOC. Navigation is done with SVGs, which have a tooltip (added in the Rollover state) for those who use a desktop/laptop. It is a rescalable, non-responsive project. I  checked  out the workflows in a Fluid Boxes project as well, because they may be very interesting for that type of project.

Setup

Navigation menu

The list with commands which you can open when clicking the down arrow next to the field 'Web page' looks shorter than the Simple Actions list under the Actions tab for an interactive object:

Some commands are indeed missing, but most Slide commands can be found under the unique 'Slide' command. In this screenshot you see how to translate the Jump to Slide command, which you'll need to create navigation buttons (see Menu slide, second slide in the example project):

Comparing with interactive objects

The big advantage of using hyperlinks is that everything could be done with one text container, in which you mark several items as hyperlinks . Great way for a custom Table of Contents, which you can have sliding in/out. Especially for responsive projects: click box over text is not possible in a normal fluid box; limiting number of objects make setup much easier for Fluid Boxes workflow as well as for Breakpoint Views.

Alternative for buttons? Advantage is that you don't have shrinking of the text when pressed, you don't have to configure InBuilt states. Disadvantage: you miss the Visited state to indicate that an item has been visited.

Show/Hide

The slide with the hyperlinks in ellipses, was created as a 'dynamic' hyperlink (to be compared with Dynamic buttons). Text in the ellips are user variables, used as hyperlink. 

The user variables v_fx and v_KC  have a default value of 'Show', while the text shapes with the info are hidden with the On Enter action of the slide. A simple conditional action (similar for both) is used:

It would also be possible to have all the info boxes in one multistate object (which I use in the next two use cases).

Comparing with interactive objects

Similar to the navigation solution, if you don't like shrinking nor styling of InBuilt states this could be a solution. Again, since a Visited state is missing, that can be a drawback.

Another drawback is that you cannot use shared actions, which I would have done in this case. You need to use duplicate advanced actions.

Close button

Normally it is not possible to add an interactive object to a state in a multi-state object. You cannot create a hyperlink neither. However it is possible to have the same hyperlink available in all states, with the same triggered action. On the Close Box - slide, The info multi-state object is a shape with 6 states. Here is a screenshot:

Just FYI, the second state (QSP) looks different in the Object State panel, but that is just a  glitch. It is exactly the same on the state. To create this multistate object you need to follow carefully this workflow:

• Create the shape (Tx_Info is the label I used) with a close hyperlink (big X), which I aligned to the bottom, centered. That will become the Normal state. You need to choose a command, but will have to edit that command later on. 
• Go into the Object State panel and duplicate the state, the X hyperlink will be included in this second state.
• Close the Object State panel and edit the hyperlink. It need to be 'Change state of Tx_Info to Normal'. 
• Change the color of the X character to a color from the background, so that it will be invisible; if there is a Fill and/or a stroke, set Alpha and Stroke both to 0. The Normal state will now seem 'invisible'.
• Return to the Object State panel.
• Select the second state, style the X hyoerlink to a visible color. Add the necessary text and/or background fill.  Double check by previewing if the hyperlink action is functional.
• Duplicate the second state, and edit the text/fill
• Continue the duplication until you have all needed states.

I have tried with Hide for the hyperlink, but had lot of issues, seemed not to be functional. That is the reason why I switched to an invisible Normal state.

In the ellipses you find more hyperlinks. They change the multi-state object to the appropriate state. Here is an example for the first category 'QSP':

Comparing with interactive objects

As far as I know this is the only way to have an action propagating to other states in a multi-state object. Shared actions are not possible nor are Visited States (although with a more complicated advanced action possible).

The action triggered by the hyperlink can be rather complicated. A not so complicated example follows

Forced View

Setup of the multi-state object is quite the same as in the previous slide. In this case the change of state is triggered by real 'buttons', which seemed logical with this content. That also allowed me to use a Shared action. To track the clicks, a user variable is needed for each of the buttons. The shared action is visible in these two screenshots:

The X hyperlink, which was propagated to all states, triggers an advanced action with two decisions. The Back to Menu button is hidden with the On Enter event of the slide, and made visible when all variables have been toggled to 1. That meant that they all have been clicked:

Intro

Recently I presented a webinar about Interactivity in Captivate. It was not a public webinar, but composed of Adobe Community Professionals. Lot of the attendees were new to Captivate but well versed in other Adobe applications. However there were also some CP-experts. As usual I don’t present with Powerpoint, but with a Captivate presentation.  That makes it possible to publish later as an interactive tutorial, which you'll be able to view. It needed some editing of course to allow full control to the learner. Narration was added as well.

The design is based on the Quick Start Project 'Wired' included in the Assets panel of 11.5.1.499. Based on it I  created a personalized Theme, since that project in its non-responsive version has no master slides. The original fonts were replaced by two Adobe fonts (Termina and Filson Soft family). The interactions were recreated with workflows which I prefer over the embedded ones. 

The goal was to show popular workflows to create interactivity. You will see: Branching (menu), Forced viewing,  Progress bars, Click&Reveal, Drag&Drop, Knowledge Check slides, Games. In the webinar the presentation was used along demonstrations of the used workflows in simple examples, with lot of good practice tips. Lot of multi-state objects were used, Guides, import of source Photoshop files, shared/advanced actions and variables.

The menu slide after the start slide is the pillar. When you see a Back to Menu button appear, you'll be navigated back to this slide. The tooltip for this back button is part of the Rollover state.

Click to see the presentation in a rescalable version or watch the embedded version (fixed resolution) below:

Feedback

Did you like this presentation? Would you like more 'back to basics' blogs, or tutorials? Do you have questions? Are you able to recreate the demonstrated workflows? Lot of questions where I would like to see some answers.

To all readers: best wishes for a healthy and enthralling 2020!

Have some fun with this small game, created from an Adobe Stock image, using Illustrator (for assets) and Captivate 11.5. Again SVGs are used extensively. You can play the embedded game (fixed resolution) but I recommend to play it from this link which is a rescalable version. It may be easier to find the differences, especially if you are using a big screen.

Lot of SVGs, some multistate objects, one shared action, two small advanced actions + two variables. If you follow me since a while you know that I had lot of fun with all my favourite Captivate tools.  I didn't use any Javascript directly (actions are converted to JS on runtime) but I’m sure this can be done with JS as well.

The usual white screen with grey arrow is replaced by a poster image. After the mysterious title slide game, game and end image are all on the second slide.

Setup

Objects and Timeline

SVGs reign as you can see in the screenshot of the Timeline panel of the game slide:

The stacking (z-order) of the objects is important. From bottom to top you see:

• Two instances of the same image (SV_Correct to the left and SV_NOK to the right.
• Two text containers which show the two titles (Tx_Correct and Tx_Difference).
• A click box CB_Wrong: it is important that this click box is below all other interactive objects, and that its pausing point is at the same time as the other ones (here 1.5secs).

• 

• A multistate object functioning as progress bar. The Normal state is invisible (Alpha set to 0), and you see all the states in this screenshot:
  
  

  

  Just a note: there are some display problems with SVGs in the present version, and that can make the previous screenshot bit confusing. Although the circles have the same size in all states, they seem to be smaller when more circles are present. Moreover something seems to be wrong with the C4 state: total width seems smaller than for the other states. Reason was that originally that state switched to 'Custom', instead of Original.
  In this case it is very important that the option 'Original' size is forced for each state.
  

  

• A shape 'Cover', which is rectangular filled with Solid dark gray, with Alpha = 70%.
• Final image 'SV_Eind' (sorry for the Dutch label). 

Variables 

Two user variables were created:

• v_counter: with a start value of 0, will be incremented when a correct hotspot has been clicked.
• v_hotspot: will be set to the number of hotspots minus 1; in this case it is set to 6 since there are 7 hotspots.
  

Advanced Actions

Two advanced actions are used:

EnterGame triggered by the On Enter event of the Game slide

WrongAct triggered by the Success event of the Click box CB_Wrong

Another rather simple standard action, to let some audio play and have effects with the cover:

Shared Action 'CorrectHotspot' triggered by the SVG buttons (Success event)

The most important script for this game. Several actions happen when a correct hotspot is clicked:

• An effect is applied to emphasize the clicked SVG, in this example I used a ScaleTo effect.
• Secondary an audio clip is played (sort of congratulation)
• The hotspot needs to be disabled, to avoid having it clicked multiple times.
• To track the number of discovered hotspots, the counter variable needs to be incremented.
• Progress has to change in the indicator (yellow circles multistate object)
• When all hotspots have been found, the final image has to appear (with an effect).

This is a Preview of a filled in action, where the 5 necessary parameters are marked in a color rectangle:

None of the candidate parameters need to be a parameter: the two variables (v_counter and v_hotspot) nor the literals. As I have emphasized many times, it can be tricky to define a literal as parameter. In this particular case it could have been possible to indicate the Delay time needed to listen to the audio clip being defined as parameter. That would be necessary if you want to use audio clips with very different lengths for the the individual hotspots. The parameters are visible in this screenshot:

Why shared action instead of duplicate advanced actions?

You can use exactly the same shared action if you have a different number of hotspots (differences). Just edit the action EnterGame to replace the value to be assigned to the variable v_hotspot. It is the reason I replaced the literal '6' by a variable v_hotspot. Several parameters are used multiple times in the shared action: the name of the progress bar, the hotspot, the audio clip. When using duplicate advanced actions you would have to edit quite a lot. 

One of the disadvantages is the fixed status of the applied Effects. If you want another effect, use the shared action as template for an advanced action, replace the effects and save it as a new Shared action. If you are new to shared actions: contrary to advanced actions it is perfectly possible to save a new action with the same name, provided the older one is no longer used.

Why?

Recently a Captivate posted a question in the Adobe forums.: ‘How to create a lightbox within a state of an object‘. She was upgrading an older project, where the developer used a slide for each lightbox, by using multistate objects to replace the multiple slides.  After having asked for some extra information, it turned out to be more complicated than just the creation of lightboxes.  It was about a two-step process for extra information:

1. Clicking a ‘question button’ would show the answer to the question as a popup (Click-Reveal workflow). That popup didn’t really need a way to close it, but clicking another question button should replace the content by new content. OP was correct that using a multistate object was the perfect workflow for this first step, with a Normal state which was invisible by setting Alpha (for the Fill) and Stroke both to 0. I have demonstrated this use multiple times in blogs.
   
   
2. The content needed to have a way to open a ‘lightbox’ (in the traditional sense explained before) with more information related to the question/answer already shown. 

Problem

Such an interactive object can be a button, a click box or… a hyperlink. Quite a while ago I wrote a couple of articles to demonstrate the power of hyperlinks which is ignored by many. However, for HTML5 output in the recent version (11.5.1) its use to run advance actions seems not always to be functtional, needs lot of testing. Originally when creating the sample output, I planned to use hyperlinks in most cases, but had to give up for the reason just explained. BTW all actions triggered by hyperlinks worked perfectly for SWF output. So I had to revert to buttons in most cases. I will explain the complete setup in a blog.

Example project

• Clicking a question button will show a popup which should contain the answer, and there is a (image used as) button to open the lightbox. The question buttons shows a ‘Current state’ when clicked.
  
  
• Clicking the button opens a lightbox: cover, shape with content, and a hyperlink used to close the lightbox. When the lightbox is closed, the question button will revert to a ‘Done state’. It is not a Visited state, but a custom state.

You can watch the project below (fixed resolution) or using this link (rescalable output)

Setup

Objects – timeline

See the setup, using this screenshot of the timeline panel:

From bottom to top:

• Five question buttons, which are shape buttons labeled SB_Quest1….SB_Quest5. They have a pausing point at the default 1.5secs. For those buttons I deleted the InBuilt Rollover and Down states, but added two custom states: ‘Current’ and ‘Done’. 
  

  

  .
• A group of shapes used as text container for the answers SS_Answer1…. SS_Answer5. I could have used a multistate object as well. I started using individual texts because I hoped to use a hyperlink for the lightbox switch.
  
  
• A shape used as Cover. Its position in the stack order is important: it needs to be above the answer and question objects, but under the multistate object SS_ExtraInfo. That cover is a shape, filled with dark gray, partially transparent. Beware: it is also used as text container: look for the text ‘Close Lightbox‘ which has been converted to a hyperlink triggering an advanced action.
  
  
• Multistate object SS_ExtraInfo which has a state to appear in the lightbox for each of the answers. The Normal state is empty (Alpha and Stroke shape = 0).
  

  

• Button Bt_Info (used a button from thitOt not necessary to be on top of the stack, Its position in the stack order is not important, because will be hidden when the lightbox appears.

Variable

Events and Actions

On Enter slide event: "EnterAct"

This simple non-conditional action is meant to set the slide to its original situation:

If I had used a multistate object for the Answer popups, with a Normal state that was invisible (like for the SS_ExtraInfo), I would not have needed the second command (Hide Gr_Answer). By hiding the Cover, I also hide the hyperlink since it is a text in the cover. No need to hide SS_ExtraInfo since the Normal state is invisible. Why didn’t I use a hyperlink instead of the button Bt_Info? Because the advanced action was not triggered as it does when using SWF output. Too bad.

Question buttons:  Shared Action "QuestAct"

Another non-conditional action, based on this Advanced action:

I converted it to a Shared action, with these 6 parameters:

Button Bt-Info: Advanced action "ShowLightBox"

This is an action with 6 decisions. The first decision is non-conditional, the five remaining decisions are conditional because a different state has to be shown based on the question number in the variable v_quest.  Those decisions have only one command and can easily be created with the duplicate decision button.

Hyperlink: Advanced action "CloseAct"

The hyperlink in the Cover shape triggers a 6 decision action very similar to the previous one:

More…

You can extend the described workflow to more than 5 questions. The shared action can be used, and you may have to add decisions to the two longer advanced actions.

I didn’t provide a close button on the answer popups, for learners who don’t want to see the lightbox, for whom the answer popup is sufficient. It could be done with a hyperlink or an extra button.

It would be possible to have something happen when all question buttons have been clicked, but that will require the creation of one extra variable for each button, a Boolean to be toggled from 0 to 1 if a button has been clicked.  The check for the extra happening has to be added to the CloseAct.

Intro

In a recent thread user asked how to prevent that a learner would click the Submit button on a Drag&Drop slide before having performed at least one drag action. Sort of alternative for preventing ‘Skip’ on a normal quiz slide. Such functionality is not available out of the box.  The D&D slide needed to be scored, which made the situation more complicated (easy reset by developer is only possible for Knowledge Check slides).

Like all quiz buttons, the Submit button on a D&D slide is an embedded objects. Consequence: it doesn’t have an individual timeline nor an ID. There is no way to disable that button. You can drag it out to the scratch area, and use Auto Submit, but that was of course no solution for this situation.

Example file

Have a look at this published file.  As usual I used some ready-to-go-slides, in this case from the project ‘Rhapsody’.  All slides were taken from this Quick Start Project, but I deleted the existing Drag&Drop interactions,  just used the design components. After the title slide, you’ll see two Drag&Drop slides. The Submit button is not on the slide when you start, it will only appear after the first drag action.

The Submit button is not on the slide when you start, it will only appear after the first drag action.  To make the slides more similar to quiz slides, I added a second step to the Submit Process.

Check your Captivate knowledge for version 11.5. Either use this link (rescalable) or watch the embedded published file (fixed size):

The trick is to use the Timeline and a motion path effect triggered by any Object action. Not really very complicated, follow the steps below. This workflow, due to stacking of objects, is not that easy in a Fluid Boxes project, the example was a non-responsive project with Scalable HTML output.

Step-by-step Delaying Submit button

1. Pause the timeline before the default pausing point

By default each Drag&Drop slide has a pausing point at 1.5secs, similar to question slides and linked to the Submit process. Too bad, that pausing point is not visible in the Timeline panel, you can only see and edit it in the D&D panel.

You need to pause the timeline at a frame before this pausing point  at 1.5secs by inserting an interactive object which remains invisible to the learner. In this case I inserted a click box, small size (1px for width and height) and located in a place where it is very improbable that learner will try to click. Set it to infinite attempts with the command ‘No action’ to be triggered by its Success event; do not show the Hand cursor. Have a look at this screenshot for the setup of this click box:

The topmost click box which appears later, will be explained the workflow for creating second step Submit process.

Step 2: Drag Submit button off the slide

To make the Submit button invisible you drag it in the scratch area, either to the left (first D&D slide) or to the right (second D&D slide).

Step 3: Timebased motion effect to Submit

Although the Submit button is an embedded object, you can apply an effect to it using the Right-click menu or the Timing properties. The timing of the effect will not be visible in the Timeline panel, because the button has no timeline. The only way to set up the timing is with the numbers in the Timing panel. This motion effect (I used Left-to -right or the opposite one depending on the location) can be very short (used 0.2secs). It is important that it starts at or after the pausing point of the click box (step 1), and ends before the default D&D pausing point (which was kept at 1.5secs.). See this screenshot for one of the Submit buttons:

Step 4: Create User variable 'v_drag'

Create a Boolean variable, labeled it v_drag. Its default value should be 1. It will be toggled to  after the first drag action.

Step 5: Advanced (conditional) action 'ObjectAct'

The purpose of this action is to release the playhead with the first dragging of any drag source to a target. The result will be that the Timebased effect on the Submit button will occur, and the Submit button enters the slide. The playhead will be paused by the default D&D pausing point at 1.5secs. Hence the importance of the timing of the effect described in step 3.  To avoid a same playhead release to happen on subsequent dragging, the tracking variable v_drag is toggled to 0, and the action is conditional:

Step 6: Attach 'ObjectAct' to all Object actions

Since you don't know which will be the first drag action, you need to attach to every drag action. That  is the boring part since there is no easy way to attach the same action to all at once, not even for one drop target. Here are the steps for each drop target:

• Select the drop target
• Click the button ‘Object Actions’ in the tab ‘Format’
• For each of the drag sources open the No action list, choose Execute Advanced Action
• Choose ‘ObjectAct’ as advanced action.

In the example file you’ll have 3*6=18 object actions in the first D&D slide, and 4*4=16 in the second slide. I really hope one day there will be a way to apply the same action to multiple object actions at once…

Do not forget to test! The actions Success and Last Attempt (wrongly labeled as Failure) were left both to the default command ‘Continue’. That way the learner will have time to watch the feedback. Timing of the feedback shapes (or captions) can be edited as you probably know.

Workflow: adding second step to Submit Process

If you veiwed the example file, there was a second step (click the slide to proceed) added. If you don’t do that, the feedback message will appear and the playhead will be released, out of control for the learner. It is a simple trick, as you may already have seen in the first screenshot of the Timeline for the first click box.

I added a second click box, covering the whole slide, but appearing after the release of the playhead by the Drag&Drop actions on Success of Last Attempt (1.5seconds). This click box triggers the default ‘Go to Next Slide’:

Don’t forget to warn the learner about this second step, The example file had the warning in the feedback messages.

This last extra workflow is NOT possible in a Fluid Boxes project because stacking is not allowed. You can use the first workflow with the motion path in a Fluid Boxes project, but may have to replace the click box by an invisible shape or transparent button (no fill nor stroke) if you want to add them to a normal fluid box.

Intro

Example project

I used some ready-to-go slides from the project ‘Earth’. I didn’t allow Review, and the score slide is not included. As usual, needed to edit the embedded slides. Several slides have a Pause On Enter, which is never a good idea IMO.

Setup

Multistate objects

Both popups triggered by the extra shape buttons labeled ‘Info’ and ‘Score’ are multistate objects with 2 states:

1. Normal state is a shape with Alpha = 0 and Stroke = 0. This means it is invisible to the user
2. State popup exists for both buttons, and has the necessary information to pop up. I used only text, but you can also add images or even event video.. For the Score button I used inserted system variables (cpQuizInfoPointsscored and cpQuizInfoPointsPerQuestionSlide). That way popup will have different values on each quiz slide.
   

   

The  multistate content shape objects (SS_Info and SS_Score) are inserted on the second slide ‘Instructions’ which is the slide preceding the first question slide.  This is very important, don't try to do it on the first question slide itself. I added a button Continue to that slide to replace the Pause On Enter. The multistate object timelines start after the pausing point of the button. They are timed for the rest of the project with the option ‘Place object on top’. Since their Normal state makes them invisible to the learner, no need to mess with Show/Hide.

Variables (Boolean)

Two Boolean variables were created, labeled v_info and v_score.  Their default value = 0, corresponding with the Normal state of the two mulitstate content shapes SS_Info and SS_Score.

Shape buttons

Actions and events

Hide buttons On Enter for Exit slide

Success action buttons SB_Info and SB_Score

A conditional action is needed. I preferred a shared action with 4 parameters. I suppose this is an action which can be used in many projects. If you import the shared action into a new project (from an External Library or with the Import functionality), you do not have to create the variables, only multistate content objects. The shared action is derived from this advanced action:

Each of the four parameters is marked  with a color. One of the big advantages of shared actions over advanced actions are the descriptions which explain clearly what you have to choose, see this screenshot which is for the second button SB_Score:

More?

Here are some possible changes or extensions of the idea, which is basically that you need the popups present on the slide BEFORE the first quiz slide and timed for the rest of the project.

• I used only text in a shape, but the popups can be anything, you can add images, video....
• With the present setup both popups can be visible at the same time. If you don't like that, add an extra command to the shared action (and a parameter) where you change the state for the 'other' popup back to Normal.
• You do not like the way popups have to be closed with the same toggle button? It is not possible to add interactive objects to a state, except to the Normal state. You can also insert a hyperlink like an X to the normal state. But that means you have to switch the content filled state (which is Popup at this moment) and the empty state. Bit more work but doable. About using Hyperlinks to trigger actions, have a look at More is in a Hyperlink
• If you want individual content in the popup, different for each quiz slide, remember you can use a variable to store content. Insert the variable in the content popup and populate it with the On Enter action of the quiz slide.
• ....

Intro

Example

You can watch this file either from this link, (scalable)  or in its embedded version (fixed resolution):

Setup

Here is the filmstrip of the example file:

Slides 1-3 are based on ready-to-go slides from the project Alliance.

Slides 4-8 are random quiz slides taken from a pool with 10 questions.

Slide 9 is again taken from Alliance (but with lot of multistate objects, see later).

Slide 10 is the hidden default score slide. It will automatically be moved after slide 9 because of the scored button on this slide (see step 3).

Slide 11,  final slide allowing to be sure that the final result (100% or 0% ) is correctly transferred to the LMS. I inserted the system variable cpInfoPercentage in a shape on this slide (top left).

Step 1: Score random question slides

Supposed you have the question pools ready, insert the required amount of random quiz slides in the project. All slides in a pool have by default the same score (10 points), it is not possible to have partial scores for MCQs with multiple correct answers.  There seems to be a bug for a FIB slide, where the correct answer appears as tooltip in case you have that question. Will log the bug, seems new.

Once the random quiz slides are inserted, it IS possible to edit the score. I took all score out, set them to 0. Just a tip, check the Advanced Interaction panel (F9, or under the Project menu) to see that the total quiz score is now indeed set to zero.  Penalty has no sense in this situation because success doesn't depend on the acquired score of the quiz.

To avoid long waiting time after the submit process for a question, I moved the pausing point near the end of the slides in all the pool questions.

Step 2: Tracking correct questions

To track the number of correctly answered question, you need to create a user variable v_counter, with a start value = 0. 

That variable needs to be incremented with each correct answer.  Number of attempts on question level is set to 1. It is then sufficient to create a simple advanced action to be triggered by the Success event of all random quiz slides:

Step 3: Results slide

I used a ready-to-go slide to show the result, but have converted several objects to multistate objects. The Normal state is the one shown on Success, the Failure (new) custom state will be shown on failure. This is the timeline of that slide:

Moreover I added two interactive objects to the slide, both invisible in output to start with (eye button in Properties):

• Bt_Failure: is a transparent button similar to the Next button in the Alliance project. It has its default command 'Go to Next Slide'. 
• SB_Success: is a start shape marked as button. Special is the fact that this button is set to Report (Actions tab ), and to include in Quiz. When you check in the Advanced Interaction panel (F9), this shows:
  

  

 Step 4: Conditional action EnterResult 

Use the On Enter action of the Results slide (slide 9) to show the correct state of the 4 multistate objects shown in the Timeline screenshot, and to show either the button SB_Success or Bt_Failure, based on the requirement of having at least 4 answers correct. Of course, the number 4 can be changed (OP wanted 7 correct answers). The action is self-explanatory:

This trick with the two buttons was published in my blog, over 8 years ago. The example file in that article is of course SWF output.  I didn't want to use two identical buttons - same location - in the example of today because that is impossible in Fluid Boxes projects.  This was not such a project, but it is perfectly possible to use the same workflow in a responsive project. It was also the main reason for the multistate objects used on this Results slide.

Extra: Editing Alliances

This is bit off topic, just for those interested

I did edit the ready-to-go slides a lot. Having a pause triggered by the On Exit event is not something  like because it can create problems. All slides have at least one interactive object, which can pause the slide near its end. That project has some quiz slides, but they are NOT based on the quizzing master slides. This means that the theme was not fully realized. When I inserted random quiz slides, which necessarily do use quizzing master slides they looked very different from the nice quiz slides. I have updated the master slides to make them looking approximately like the ready-to-go slides.

There are more problems with this project, which I detected but didn't encounter in this particular project. As I have written in previous posts, never do use the Switch to Destination theme!

Intro

Example

• Geo slide: alphabetically clicks on countries (used English names, not the original names of the coutnries)
• Keypad slide typing the pincode on a numeric keypad.

First and last slide are taken from the Quick Start Project 'Aspire'. The images used as button also are from the Assets panel.

You probably will have more ideas where this workflow can be used for Knowledge Check slides. There is a sequence type of quiz slide, you can test a sequence with Drag&Drop slides, but these alternatives are less limited in design. ould love to hear your proposals for sequence checks as well

Setup

Variables

• v_counter: will track the number of clicks on interactive objects. It starts with a default value of 0. It is reused on the second sequence slide, by resetting to the default value using the On Enter action of that slide.
• v_correct: will track the number of correct clicks, set up with default value of 0 and re-used in the same way as the previous variable.

Multistate Objects

The Normal state is empty (easy to reset, will automatically reset when returning to the slide if ‘Retain State’ is unchecked). The 6 following states correspond with the correct sequence, hence their labeling. The last state is the Wrong state. The sequence of states is important, because I will be using the ‘Go to Next State’ command in the actions.

SVGs

The group Gr_Wrong on the Keypad groups all button SVGS which are not used in the pincode. Those buttons are on top of the image, and can be hidden, since the remaining keypad image shows them as well but in a non-interactive version. For the Geo slide, the colored country  SVG buttons are also on top of a big SVG (Europe), but I don’t want the colored ones to disappear, for that reason the buttons will be disabled, not hidden (see advanced actions below).

Actions and events – Geo slide

Only the items marked by a red oval have to be switched for the actions SV2….SV5Act: the name of the SVG button in the first decision, and the literal (number) in the second decision. If the clicked country is not fitting in the correct sequence, the learner sees the Wrong state in the multistate shape and the Retry button will appear.

The last country SVG button (SV6) has a slightly different action, derived from the previous one.  Reason: the Next button has to appear if the sequence is correct. That extra command is highlighted by a blue rectangle.

The Next button has the default command ‘Go to Next Slide’ on its Success event.

The Retry button needs to  everything, as you can see in this screenshot. Action is triggered by the Success event:

Actions and events – Keypad slide

Some explanation may be needed for the Hide command which I highlighted. Since the required pincode (29791) needs the number ‘9’ twice (second and fourth position in the sequence) I have put two SVGs on top of each other: SVG_Two and SVG_Four. By default SVG_Two is visible, but SVG_Four  is hidden and becomes visible With the same action where SVG_Two is hidden. You cannot have two interactive objects on top of each other when both are active at the same location.

The Number buttons trigger an advanced action On Success.  It is similar to the one in the Geo slide, except for using Hiding instead of disabling. Example of the first number button (which is 2):

As explained above, for SVG_Second (number 9) is bit different

Similar to the Geo slide, the last correct button (number 1) will show the Next button if all was correct:

Any wrong number button will trigger this action using its Success event:

The new Retry button, labeled RetryBis is similar to the one on the Geo slide, triggers:

Remember that the SVG button Four  is in the same location as Two, because both have the number 9. That is why SVG_Four has to be hidden and SVG_Two shown.

Why no Shared Actions?

• The SVG button SV_1 – compulsory parameter in the first decision
• The literal ‘1’ in the condition of the second edition, not compulsory
• The multistate object Tx_Display, compulsory parameter in the second decision
• The state Wrong in the ELSE part of the second decision
• The button Bt_Next in the ELSE part of the second decision

Why is the literal a problem? Because it is also used in the Increment command. If you replace it by 2 for the second button, this will also be the case in the Increment command. I may have a workaround, but it is not always functional.

Second reason: with the workaround the parameters would increase to 6, which is my limit for a usable Shared action. Whereas using duplicate functionality for the advanced action is lot quicker, since only two items need to be edited.

This blog is already way too long. If you like to hear about my ‘thumb rules’ for choosing between duplicate advanced and shared actions, post a comment. Maybe I’ll dedicate another blog to it.

Why?

In Flanders there is a saying ‘Twee vliegen in één klap’ (killing two flies at once). Let me show a workaround for a Pretest (without the normal limitations) and update  that old post, taking advantage of improvements since …. version 6. Have to refurbish a lot of posts, which are still attracting visitors, with HTML5 output. Here is one of them.

Example file

Setup

I will explain the variables used in this example, and the actions/events in the rest below.

Variables

System variables

cpQuizInfoPointsscored: the points scored so far by the learner, is updated after the Submit button is clicked.

cpInfoLastVisitedSlide: is used to check if the learner gets to a slide from the previous slide or from another slide (because getting a passing score has become impossible.

User variables

v_PassPerc: required pass percentage for the Pretest. As explained for the previous variable, I preferred a specific variable instead of the system variable cpQuizInfoPassPercent. The value has to be filled in on definition, in this case it was set to 80  %.

v_PassScore: will be calculated from the two previous variables (is same in the example as cpQuizInfoPassPoints.

v_MaxUntil: will be calculated. What is the maximum score the learner would have gotten until the present question (all answers correct).

v_MaxRemain: will be calculated. What is the maximum score the learner can obtain with the remaining questions? Logically the sum of v_MaxUntil and v_MaxRemain should be equal to v_MaxPretest.

v_Possible: will be calculated, what is the maximum score which the learner can obtain if he/she gives a correct answer to all questions still to be answered.

Advanced Actions – Events

EnterFirst

The variable v_Passcore is calculated from two other variables having a default value. In this case v_MaxPretest was 40 points  (maximum score) and v_PassPerc = 80% required for passing the test. Result will be 32 points for v_Passscore.

The variable v_MaxUntil will get its first value, which is the score possible to obtain for this first quiz slide.

EnterPre

CheckPre

The trick used is to calculate v_Possible, which is the maximum score a learner can still get after the present question, supposing he/she will give a correct answer to all the remaining questions  (value of v_MaxRemain). Learner already obtained a score stored in cpQuizInfoPointsscored. This calculation happens in the first decision ‘Maths’.

The second decision is conditional, and will navigate the learner out of the Pretest (Jump to Score slide) if he will not be able to pass the test. If it is still possible to acquire the passing score, the test continues.

EnterScore

This is the most complicated action, because it has to take care of three situations.  Each situation results in a conditional decision:

1. If the learner has finished all questions (last visited slide was slide 8, which is the last question slide), but did fail, (comparing score with v_PassScore).  In that case the appropriate state of an multistate SVG and a multistate text container is shown.  The Next button appears as well.
   
   
2. If the learner has not finished all questions, (last visited slide was not slide 8) another state is made visible for both multistate objects, and the Next button appears.
   
   
3. If the learner has a passing score for the test, another state is shown and not the Next button, but the ‘ToTest’ button appears, which will navigate the learner to the results slide (from which a separate quiz file can be launched).

Conclusion

Of course the same approach can be used for a normal quiz. It can spare the learner a lot of frustrations if he started the quiz, without mastering the content, and quickly sees that the result will never be sufficient. That was the original reason for the first older post. 

It would be interesting to know if you ever use the default Pretest slides, because I really dislike the many limitations. All Pretest slides need to be at the start of the course and in sequence. All navigation will be disabled, on the playbar as well in the TOC, not only for the Pretest slides but also for content slides which is very annoying. What do you think?

Would it be possible to replace the Pretest slides by Knowledge Check slides? I suspect it would be possible, maybe stuff for another 'anti-frustration' post? The advantage would be that a final quiz will be easier to set up.

Intro

Adding audio clip

• Import the audio clips to the project Library
  

  

• Drag the audio clip to the timeline of the slide (or to the stage, be careful not to drag to an object on the stage). Originally the slide timeline on most QSP slides is 3 seconds. If the audio clip is longer, a dialog box will appear. Choose the first option to extend the slide timeline.
  

  

• Audio timeline appears below the slide timeline. I will increase the slide timeline duration manually bit more, so that I’m able to move the audio clip to leave a small gap before and after the audio.
  

  

• You see in previous screenshot that all the object timelines have been extended automatically.  Reason is that most - but not all  - slides in the QSP are timed for the 'Rest of the Slide'. Check Timing Properties. Have also a look at Tip 1 below.
  
  
• Test the audio, not by using Play Slide but by using a real Preview. This means for a non-responsive project that you need to use F11, Preview HTML5 in Browser. For responsive projects any Preview is fine. The three following tips are meant to fix problems detected during previewing.

Tip 1: Fix when objects disappear

In this slide (12 from Aspire) some objects have a timeline keeping the original duration of 3secs. When playing that slide in Preview, those objects will disappear after 3 seconds.

How to fix?

Tip 2: Pause commands on slide events

Many slides in the Aspire project have the setup as shown in this screenshot.

This setup will prevent the audio clip on the slide from playing because the Pause command on the first frame will pause also slide a udio.

You have to take out that pause. You can safely replace it by ‘No action’ which is the default setting both for On Enter and On Exit slide events Result will be that the slide will not be paused, but the playhead will move seamlessly to the next slide when the audio has finished. That is IMO the most logical situation. If you want to mimick a presentation, where each slide is paused at the end and needs learner intervention, you can change the On Exit action to ‘Pause’ or add a button ‘Next’ to pause the slide. However do not forget that this may not be the best practice.

Tip 3: Pausing points

Contrary to the Pause command (see tip 2) a pausing point will not pause slide audio, although the playhead will be paused and so will all graphics assets/effects which are running or appear later.  By default, all pausing points will be set to occur at 1.5secs, either on the slide (for Quiz slides and Drag&Drop), or after the start of the interactive object timeline.

In most cases the increase of the slide duration due to inserting an audio clip will not cause problems, when the pausing point is due to an interactive object like a button. Reason is that the button will often trigger an action jumping to another slide, or revealing some content. The frames after the pausing point (inactive part) are not important in that case.

Possible issues can occur on quiz slides, if you insert an audio clip.  Here is an example (T/F slide 23 in Alliance):

You see the pausing point on the slide timeline at 1.5secs. Some smart shapes are not timed for the rest of the project (see Tip 1). However since the slide is paused at 1.5secs, before the end of those shape timelines, you’ll not be bothered by that while the audio continues playing (not paused). However, if while testing that slide, you have to wait a long time after the Submit process, and you see the shapes disappearing, that is due to the Actions setup in Quiz Properties. They were set in this slide as shown here:

Both actions are set to ‘Continue’, which means that the playhead is released. It will have to move through all frames after the pausing point (inactive part), and only moves to the next quiz slide after reaching the last frame. Not exactly what you want. Two possible fixes:

Fix 1: 

As is the case for other quiz slides in the QSP projects, replace the action ‘Continue’ by ‘Go to Next Slide’. You don’t have to bother about the wrongly timed smart shapes in that case.

Fix 2: 

Move the pausing point on the quiz slide with the mouse (not possible in Timing properties) to place it near the end of the slide. In that case you have to extend the smart shape timelines as explained in Tip 1. This workflow is recommended over the first fix,  if you expect slow connections with the LMS.

Similar problems can occur on Drag&Drop slides but will not expand on that. Know however that the pausing point is not visible on D&D slides in the Timeline panel as is the case for quiz slides.

Some links

Pausing Captivate’s Timeline

For quiz slides, the Submit Process is explained in detail in this post:

Submit Process

If you want to add audio clips from another type than slide audio:

Pausing Timeline and Audio

Intro

However yesterday a user asked another similar question on the forums. You can visit the thread here

The title doesn’t really reflect the full question, which was clarified later on. User wants to have survey slides, which each have two statements. The learner should rate each statement with a number between 0 and 10, and the sum of both ratings should always be 10. As usual I have a dislike for the word ‘force’ used in the title. The example you will be watching, is not forcing really. I considered three possible situations:

1. Two ratings have a sum of 10, rating is accepted immediately.
2. Sum of the two ratings is not equal to 10. In that case the second rating will be edited to achieve a sum of 10. Learner can accept this change or if he prefers:
3. Learner gets the opportunity to retry to set correct ratings.

Contrary to my old blog post, where I used a MCQ, for this solution used the Radiobuttons interaction. Likert question was not possible, since I needed a rating scale with 11 dvisions (0-10). Moreover Likert is not supported for responsive projects. Although the example is a non-responsive project, the described workflow would also be possible for responsive projects (some changes needed)..

Example File

Setup

Due to this specific setup, extending the survey to more than 3 survey slides is very easy.  Just duplicate a survey slide and edit the statements. Everything will work fine. I will explain the objects using the timeline, the user variables to be created and the advanced actions.

Timeline Survey slide

Have a look at the screenshot of the timeline of the FIRST survey slide:

• Two statements, labeled SS_XStatement, and SS_YStatement. I didn't create a dedicated master slide with two placeholders for these statements, but that would be possible. Labeling of those statements is not so important, because they are not used in any action.
  
  
• Two instances of the RadioButtons Learning Interaction, used as rating scales. Please don't be confused by their green colored timeline, because these interactions are not interactive, they are static. This is a design bug. The properties of one interaction can be seen in this screenshot:
  

  

  Important fields are marked in Red or Green. Beware: you have to create the variable - here ‘v_X‘ i- n the Variables dialog box.
  
  
• Question1: text above the statements with the warning about the sum (could also be a placeholder on the master slide)
  
  
• Submit button: needs to be a shape button, because it has to be timed for the rest of the project. Eventually you can use a SVG or bitmap image (from 11.5 on). Both can also be timed for the rest of the project.
  
  
• A group Gr_Feedback, including the Accept button, Retry button and the Message which appears when the sum of the rates is not equal to 10.  This group is also timed for the rest of the project, which means that both buttons need to be shape buttons, SVG or bitmap images.

Variables

• v_null: empty variable is used to clear the associated variables to the learning interactions. More details about its functionality in this blog
  
  
• v_start: will store the first frame of each survey slide. For the Retry action, the micro-navigation solution described in Replay Slide (scenario 2) is used, hence the necessity of the variable which can be empty as default value. This variable is reused on each survey slide.
  
  
• v_X: variable associated with the rating scale (interaction) of the first statement, default can be empty. This variable is reused on each survey slide. Default value can be empty.
  
  
• v_Y: variable associated with the rating scale (interaction) of the second statement, default can be empty. This variable is reused on each survey slide. Default value can remain empty.
  
  
• v_sum: will be calculated by adding v_Y to v_X. Default value can be empty.
  
  
• v_XScore: will be calculated after each survey slide, by adding the value of v_X. Default value can be empty.
  
  
• v_YScore: will be calculated after each survey slide, by adding the value of v_Y. Default value can be empty.
  
  

Actions/events

EnterAct

SubmitAct

This action is triggered by the Success event of the Submit button. Because that shape button is timed for the rest of the project, you need only one instance of this two-decision action:

The first decision ‘Always’ is not conditional, calculates the value of v_sum which is used in the condition of the following decision.

Second decision ‘Checkit’ verifies if the sum of the ratings is equal to 10. If that is the case, the ratings for X and Y score can be added to the totals, and navigation to the Next slide is done. If the sum is different from 10, the group (2 buttons + message) shows up. The value of v_Y is corrected (10 – v_Y) which will show immediately on the rating scale. The learner can accept this correction or opt for retaking (Retry) the rating.

AcceptAct

RetryAct

This action is triggered by the Success event of the Retry button. Because that shape button is timed for the rest of the project, you need only one instance of this action:

EnterResults

Conclusion

Hope you liked this solution? For a responsive project with fluid boxes, the workflow will be more cumbersome, not only because of the Fluid Boxes setup but also because:

• You cannot use grouping in fluid boxes.
• The possibility to have objects timed for the rest of the project is limited. It is possible if the slides are based on the same master slide, which could be the case for the survey slides.

Could I have used Shared actions? Of course,  I dragged the Replay action from my external library with Shared actions bit for your convenience converted it to an Advanced action. The other actions can be converted to shared actions as well. However withthe described setup, the advanced actions are used only once. If you have issues with the timing for the rest of the project in a Fluid Boxes project, I would certainly recommend to use shared actions because you’ll need an instance on each survey slide.

Intro

• Warrning;  Switch to Destination theme
• Embed QSP slide
  

All QSP projects have also a responsive version, created with the Fluid Boxes workflow. To embed such a slide, you'll  an extra difficulty: how will the fluid boxes – both on master slides and slides – behave?  In this blog that extra problem is discussed, including tips to avoid problems. Supposed is that you have read the two previous articles – for the basic knowledge. First recommendation ‘NEVER’ use the switch to Destination theme for a Fluid Boxes project when inserting a QSP slide in a custom responsive project.

Master slides – Tips

All responsive QSP projects have a bunch of master slides. Those master slides have fluid boxes setup.  Setup can be totally different from the non-responsive projects with the same name. Look at the 'Wired' projects: lot of master slides in the responsive version, no master slides except the necessary 6 in the non-responsive version. As you may have deducted from my previous posts,  the NAME of the master slide used for an embedded QSP slide is very important. If the same name has been used in the receiving (destination) project, extra care is needed. For your use I have created a table comparing Master slide names used in the 5 available QSPs (at this moment: September 2019).  You can download the pdf (was quite a lot of work to create it, please show respect for the protection built in).

QSP MasterSlides

In the table some cells are identified in a special way:

• If the same master slide name is used twice in the QSP, both numbers  are in the same cell, red font on  a grey background. This is a very worrying situation, not sure why the developers did use dual names.
  
  
• Some master slide names appear in several QSPs. If they are identical they are bolded and red for the projects where it is the case. Italic names point to master slides similar to others, but with a slightly different name.

I didn’t include the quizzing master slides. They rarely have been edited a lot (except for the Results slide) and follow the rules I explained in this older post ‘Quiz Slides and Fluid Boxes‘. You could extend the table with the master slide names in your project if you try to embed QSP slides in a company project with an existing theme.

Even master slides with same name, can have a totally different Fluid Boxes setup. The Master slide 'Objectives' is present in 3 QSPs. Have a look at the fluid boxes setup for this Master slides in the projects Aspire, League and Wired.

Aspire's master slide, as you can see, has a rather simple Fluid Boxes setup. The slide ‘Course Objectives’ which is based on this master slide didn’t add supplementary fluid boxes.  That is the case for most slides in the QSPs, only using the Fluid Boxes defined on the master slide. The slide provides 4 topics (Objectives) all in one Fluid Box to the left.

In this master slide of the 'League' project, a lot more Fluid Boxes have been defined. In the screenshot the boxes FB_956 and FB_957 have been collapsed. Their setup is similar to the one shown under FB_955. This master slide provides 3 topics, each in its Fluid Box. As with the Aspire project, the Slide ‘Objectives’, based on this master slide, doesn’t have extra Fluid boxes.

The 'Wired' master slide has the most complicated setup. It is impossible to show the full setup for this master slides. The collapsed FB’s at the bottom each have 5 vertical fluid boxes. No extra FB’s wer added n the slide ‘Objective’. Aspire had 4 topcis (in 1 FB), League had 3 in an individual FB, but Wired has 5 topics. .

You can imagine what happens when you switch from source to destination theme for an inserted slide where both themes use a master slide with an identical name. Have a look at the mess in this example. After inserting the described master slide from the Aspire project, I applied the Wired theme to it. Result, without any warning:

Not only are the objectives not getting into the appropriate FB, the green topics text is not in a Fluid box at all. You will have to move them manually into fluid boxes, and probably delete a lot of (empty) fluid boxes. That is cumbersome work, especially since the FBs are defined on the master slide. That means they cannot be deleted on the slide itself..

Conclusion

For responsive project to brand embedded QSP slide, please follow the step-by-step plan to add a fitting Master slide to the project theme, as described in ‘Embed QSP slides‘. Double-check the name of the Master slide, if it is an existent name in your project, first edit that name in the  QSP theme. That way you will avoid a disaster like I showed above with master slides using the same name.

Feel free to use the pdf I provided with an overview of master slide names for the present responsive QSPs. Beware: there may still be typos, please report them.

Intro

Recently I posted this article about ‘Destination/Source Theme’  I warned for using the switch button to the Destination theme after insertion of a QSP slide.  Logically you expect now an alternative workflow?  A general scheme for both responsive and non-responsive projects is however not possible. Reason: the present QSPs have a beautiful design but the technical setup is very different, no rules. 

I will try to offer some tips here to make it possible to blend the inserted QSP-slides into your project design which is probably based on a custom theme. Due to the big variation in technical setup, this first post will be limited to:

• non-responsive projects
• Quick Start projects which use master slides in a consistent way

The second condition excludes the project Wired which only uses the Blank master slide.

In a future post I will try to offer similar tips for responsive (Fluid Boxes) QSP-projects

Start situation

The workflow with its screenshots is based on insertion of one QSP slide from the project Aspire.  The receiving project is the DemoProject I mentioned in the previous blog post. Both projects have rather different color palettes:

The DemoProject uses three fonts: Termina, Filson Soft and Trebuchet (rarely), whereas the Aspire project only uses Tahoma.

The inserted slide was the Exit slide of the Aspire project was inserted in the DemoProject as you can see in the screenshot. It really needs branding. If you want to follow along, you can add that Exit slide to one of your projects.

Branding workflow step-by-step

Step 1: Master slide

Open the Master slide panel with the inserted Aspire slide ‘Exit Layout’ selected. You will see all the master slides of the Aspire project, but the used master slide is automatically selected. You see that it is labeled ‘Welcome w/o Sub + CONTENT’. Have a close look at that master slide and its components on the Timeline:

You see from bottom to top: an image placeholder,  a Title (shape) placeholder, a caption placeholder and another shape placeholder meant for a shape button.  Sorry, but the styles used in the master slide are mostly overridden styles, and replaced by other styles on the slide itself. Just for your information, don’t bother about it.

Step 2 Copy master slide

You will copy and paste that master slide to the original course theme (DemoProject) using these steps:

• Use right-click menu (or Edit menu) to copy the selected Aspire master slide described above.
• Return to the Filmstrip
• Select any slide from the original project
• Open the master slide panel again, it will refresh and show the master slides of your project (here the DemoProject).
• Paste the copied master slide from the Aspire master slide panel.

The result in this case is visible on this part of the master slide panel. The new master slide is still selected, and kept its original name. This was possible because that name didn’t exist in the DemoProject theme (more about importance of master slide names in next blog . If the same name exists in the receiving (Destination) project, you need to rename the master slide before the copy/paste

Of course the object styles are not what you want. In the screenshot above, the Title shape placeholder is selected, and you see that the style was overridden (+ sign). If that had not been the case, the Default Title Smart Shape style of the DemoProject would have been applied automatically. Another example of the lack of rules for the QSPs

Step 3: Replace styles

Still on the master slides, apply styles for the original project DemoProject theme to the objects. In this case:

• There is  a Default Title Smartshape Style in the DemoProject theme, needed only to use ‘Reset Style’ for the title. Because the style was centered, changed it to left-aligned but the font (Termina) and the color were applied automatically.
  

  

  You see a + sign, because after resetting the style I added the alignment change, didn’t create a new style for this alignment change. It will only be used on the inserted slide, all other titles in the original project are centered.
• Same workflow is used for the caption, since a Default Caption style exists (Filson Pro and light color)
• For the shape button placeholder, another shape button style was chosen from the DemoProject theme.
  

  

Step 4: Apply Master slide

Open the Filmstrip, and select the inserted Aspire slide. In the Properties panel choose the theme DemoProject and the list with master slides will appear. Choose the ‘Welcome w:o sub…..’ master slide and you should get this result:

You see some remaining problems: the placeholder for the shape button was not used in the QSP, probably deleted and replaced by another button. Either you edit that original button or you keep the placeholder button.

The background has of course not changed. You may need a last step:

Step 5: Final touch

Two more tasks need to be done to have a fully branded slide fitting in your project design:

1. Replace the image. Changing the Hue with the Edit Image features could work in some situations, but not for an image with a blue sky. Of course, editing in Photoshop while masking the sky is possible.
   
   
2. Replace the blueish gradient at the bottom. It is not a gradient created in Captivate but another image. However it could be possible to use Edit Image, and move the Hue slider for this gradient.

Conclusion?

This workflow may seem cumbersome, but it is safe contrary to the switch to Destination theme.  It is only one example slide, of course. Just hoping you would try this out. It may even lead to improving practice for your custom themes.

Intro

Since the release of 11.5 I have written a blog post about Theme enhancements , another one with Tips for the Assets panel, and one for the use of QSP projects.  About the Copy/Paste Appearance I have warned that this can be a great feature in some situations (states, temporary testing, use for text styles) but should never replace Object Styles if you are or professional eLearning developer. Why do I mention this post? You’ll find a similar warning in this blog about using the  switch to destination theme, when inserting (QSP) slides from a project whiif that new slide is inserted after a slide with another theme:

In the screepnshot you’ll see the button which appears in the Timeline under the inserted slide. Default setting is to keep the Source Theme which is the theme used in the project from which you inserted the slide (in this case from the QSP ‘Wired’, non-responsive). For consistent projectt design, it is tempting to switch immediately to the Destination theme which is the main theme of your project (provided you had a one-theme project before inserting the slide).  Believe me: do NOT switch without preparation because the result can be disastrous. I have seen this happening with trainees, and in a webinar presented by Adobe.

This post is meant to give you some insight in the reasons for my warning. I may refer to older posts about themes, which is a topic that is not popular probably because the Theme impact on courses is largely underrated. Too often, when asking on social media about the used theme, I get the answer 'I do not use a theme', something which is impossible!

Let us start with a summary of what happens when you click the option ‘Use Destination Theme’.

Result of switching to Destination theme

All components of a theme can be switched without any warning. Here is an overview:

Theme Colors

Each theme has its theme colors palette. Recently I wrote about using Adobe Capture or Adobe Color to start such a palette, which will mostly be based on the stylesheet of the company. In a well-designed project only colors from that palette are used: 10 main colors + 50 tints. When switching a palette, you have no control over the mapping of the colors. For the present situation this means that  color 1 of the source palette will be replaced by color 1 of the destination palette, etc. That can already lead to strange results, because not every palette keeps dark and light colors in specific locations.  Here is an illustration of two totally different palettes. The first is in my test the destination palette, second the source palette of a QSP theme: can you guess  what happens when the colors are switched?

No Usage button is available for colors - too bad.  After the theme switch you’ll have to manually edit if the colors are not appropriate. If it was possible to map colors between the palettes this would be easier: I could tell that the first color of the source theme had to be replaced by the third color of the destination theme, that color 4 was OK to be replaced by color 4 etc. One of my feature requests.

Theme fonts

Situations is similar.. In most cases you will see three fonts in the Theme Properties. Some QSP’s use the same font for all text whatever the style. If your destination theme uses 3 fonts and the inserted QSP slide uses ony one font, all the text styles after switching to destination theme will be replaced by the first font in your original project theme. This image explains what I mean: the source theme in Wired has only Arial as font. When I insert it in my demo theme, which uses three fonts (Trebuchet is the least  used but for some reason appears as font 1), there is no way for Captivate to know to which styles font 2 and 3 need to be applied. Result: all fonts will be Trebuchet. In this case that font was only used in feedback messages, Filson Pro was the main font for all text, Termina for Titles. There is – same as for colors – no way to change the sequence of the fonts. Mapping wouldn’t help here, a Usage button however would be welcome. My demo theme is fully documented, which is not the case for the QSP projects.

Object Styles

Now it is getting tough, because each of the QSP’s has its way of defining styles. Some use default object styles, others don’t use them (do not understand the reason).  Fonts and colors will be replaced as I explained above. But the remaining components of the object styles will only be replaced by the style of the destination theme if  they use the same style name. For the QSP’s that is rarely the case. Typical example is the [Default Title Smartshape Style]. It exists in my test demo theme, it exists in each of the QSP’s but is never used. Result: the existing object styles in the QSP will be added to the styles in the destination theme. If you use a lot of inserted slides, you’ll end up with a very long list of object styles added to the existing styles in the original project theme. Very hard to manage those styles!

Master slides

Similar to the object styles, if a master slide exists with the same name in the destination theme, that master slide will be applied (have seen this happening several times). That can be really catastrophic, especially for responsive projects because the fluid boxes structure of the destination theme will probably be totally different. It is less dramatic for non-responsive projects but could be frustrating as well.

If the master slide has a name which is not available in the destination theme, it will be added to the master slides. Similar to object styles, there are no common design 'laws' for the QSPs.. I can only post some more details for each individual QSP. One example: the responsive ‘Wired’ QSP has a complete set of master slides with fluid boxes, the non-responsive ‘Wired’ doesn’t use any master slide, all slides are based on the blank master slide which is very weird and not at all user friendly.

Skin

Setup of the skin is not affected by destination or source theme. It will be one skin for the project, based on the original theme which you used to start the project. Only theme component you don't have to worry about!

Conclusion

Hope you understand now why I did introduce this post as a warning post.  In most cases I would recommend never to use the opportunity to switch to the destination theme when inserting a slide, unless you know the themes of the source and destination theme in-depth. That is not easy for QSP-slides. I may post more recommendations for a workflow that can avoid most of the problems when trying to embed those slides with respect of your custom styling.

Intro

Being able to use SVG’s, for which you can limit the clickable area to the SVG itself, creates a lot of opportunities. In a recent post I explained how you can use them for a custom Hotspot question. 

This time I played with Flags, in Europe a lot of national flags have a cross embedded. Play with this example file. After the title slide which has some explanation, you have to color 5 knowledge check slides, Have fun. 

Small warning: if you are on a small screen, you may have to insist to color the small parts (especially on the UK slide). The part is really clicked when you have seen it shrink. You can play from this link (scalable HTML) or with the embedded version (fixed size):

Setup

You’ll find details about the setup,with topics:

• Objects (including timeline)
• Variables and Events
• Advanced actions
• Shared action (has been used 47 times)

Objects – timeline

From bottom to top you see:

• SS_Proback1: (smart shape) the white background of the progress bar (bottom left). Since the flags have different amounts of parts, I preferred to have an individual background on each flag slide, whereas
• SS_Progress: (smart shape) progress bar is timed for the rest of the project. It has a normal state which is invisible (no Alpha nor stroke), and a state for each added green star, totals 18 states but not all states are used on each slide.
• Gr_Denmark: has all the flag parts, on this slide 5. All parts are SVG’s used as buttons with the default pausing poins at 1.5secs. Each SVG has 3 object states: Normal (with a black pattern), Correct (colored), Wrong (Gray tint). Here is the screenshot with object states for the Cross part of the UK flag:
  

  

• Gr_Colors: group with 5 colors, timed for the rest of the project because same colors are used for all flags. Colors are shape buttons, default pausing point at 1.5s. They have 3 states: Normal, Current and Dimmed. Here a screenshot for the Red smart shape.
  

  

• Country_DK: country name (text)
• SB_Next: shape button timed for the rest of the project, no pausing point, with 3 InBuilt states (Normal, Rollover, Down)
• Title

Variables and events

Three user variables are created for the actions:

• v_color: will store the name of the color chosen from the color shapes; the exact names are needed which are Blue, DarkBlue, Red, White and Yellow.
  
  
• v_counter: will track the number of correct flag parts which have been colored (is equal to the number of stars displayed by the progress bar).
  
  
• v_max: the number of flag parts to be colored. For the first two flag slides this is 5, for the two following slides it is 9 and the last flag slide has 17 parts.

I didn’t provide a replay course button at the end, to limit the number of events and actions. The used events  are:.

• On Enter slide event for all flag slides. They trigger a similar advanced action, depending on the number of flag parts: 'Enter5' (first two flag slides), 'Enter9' (two following slides) and 'Enter17 'for the UK slide.
  
  
• On Enter slide event for the End slide triggers 'EnterEnd'.
  
  
• Success event for the Color shape buttons trigger a similar advanced action 'Blue_Act', 'DarkBlue_Act', 'Red_Act', 'White_Act' and 'Yellow_Act'.
  
  
• Success event of the SVG’s which are the flag parts (used as buttons), trigger all the same Shared Action 'FlagAct'.

Actions

Enter5Act/Enter9Act/Enter17Act (advanced actions)

You see it is mainly a Reset action. Because the color shape buttons are timed for the rest of the project, it is necessary to reset their state to Normal when entering a new slide.  That wouldn’t have been the case if I had repeated the colors on each slide, and left the option ‘Retain state …’ unchecked. However such a setup would have complicated the actions a lot more, than using this advanced action On Enter. The actions for 5 and 17 parts are almost identical, only the value of the variable v_max will change (command marked in red in screenshot). Because of the limited number of actions (3), and the fact that only one command had to be edited,  I prefer duplicate advanced actions over a shared action with multiple parameters.

EnterEnd

This simple action will hide several items which were displayed for the rest of the project and no longer necessary on the Congratulations slide:

Blue_Act, DarkBlue_Act, Red_Act, White_Act, Yellow_Act

These advanced actions are triggered by the success event of the color shape buttons.

The 5 actions are also very similar, here is the screenshot of the Red_Act:

It is very simple to duplicate the actions for the other colors, and change the first command and switch one dimmed and current state to adapt the action to the new active button.

FlagAct

Shared action triggered by the Success event of the flag parts (SVG used as button). In older versions than 11.5 this setup would not have been possible since many bounding boxes are overlapping. The shared action, which I used 47 times, looks like this:

I indicated the 6 parameters by a color code. Four of them are always the same, but they are compulsory, need to be parameters (Progress bar, Next button, Wrong and Correct states). Only the color and the flag part are important to set up correctly. A good labeling system for the flag parts can help. You may have seen that I took care of labeling in a consistent way.

Conclusion

Hope this example releases your creative ideas for similar use cases, both for adult learners and (of course) kids.  It would be great if you commented about that. Or do you have questions, suggestions?

Why?

Font groups

I don't mean Font Families, but the way fonts are grouped in Captivate.

Have a look at the dropdown list for Character when you are in the edit mode for a text container, caption or shape. You will see that 4 groups are listed up, from top to bottom: 

1. Theme fonts: new group in version 11.5. If you use only one theme in the project, this group will show the fonts used in that theme, same information as under the Theme Properties. If you have multiple themes in the project, this group will show the fonts for the theme used in the active slide.  You can use this group to switch between the fonts of that particular theme. The active font is highlighted as you can see. Since all fonts of the three other groups can be used in a theme, these fonts do not guarantee that your learners will see them correctly.
   

   

2. Adobe fonts: formerly those fonts were indicated as Typekit fonts. This group may be empty for you, only fonts which you licensed using the CC (Creative Cloud) app, tab Fonts:
   

   

   
   Fonts from this group can be used safely, your learners will see them! When publishing you have to indicate which domains will be added to the license. The number of fonts you can license, and the number of domains, depend on your plan for Adobe Fonts.
3. Web Safe fonts: a limited group of fonts which are safe to use (my screenshots are on a Windows system):
   

   

4. System fonts: this last group shows all fonts installed on your system. That group will likely include the brand font(s), those who are commonly used for print in your company (or your client's company). Problem with using those fonts is that they will only appear in all circumstances if the learner has the same font installed on her/his system. 
   

Static vs Dynamic Text

Shapes and captions are labeled 'static' if there is no variable inserted in the text. 

If the project is a non-responsive project, static text containers will be converted to bitmap images. This has positive and negative consequences:

• Positive is that you can use any font, even a system font without having to embed them. The learner will see an image of the text.
• Negative: if you publish the project to Scalable HTML output, and the project is upscaled you'll have the usual blurriness which occur for all bitmap images. Moreover if you have a mixture of static and dynamic text containers there will be a visible difference between the two types of containers.

If you have at least one variable (system or user) in a text container it becomes dynamic. This means that the text will not be converted to images but has to be generated on runtime. Typical example is the score slide after a quiz: most system variables on that slide get their value only after the end of the quiz.  What are the pro and contra this time?

• Positive is that the font will look crisp at all time.
• Negative: if you use a system font, and that paricular font is not installed on the learner's system, it will be replaced by a generic font (mostly Times New Roman), which looks very unprofessional. 

For responsive, Fluid Boxes project all text will be treated as dynamic text.

Recommendation

Fonts to use

Personally I recommend to avoid System fonts for all courses.  Keep to Adobe fonts or eventually Web safe fonts.

I hear you! How to explain to your manager or client that you cannot use the 'holy' branded fonts in their company style sheet. There may be exceptions, but in most companies those style sheets have been set up for 'printed documents', not for web and certainly not for eLearning. There is a big difference between both: Colors and Fonts are typical examples. This article is not dedicated to colors, but most ignore that CMYK and RGB can be quite different. The Adobe Fonts library has thousands of fonts. It should be possible to find a font which is very close to the 'branded print' font. You can challenge them: show two slides with exactly the same content, but one with their 'brand font' and another with the Adobe font which you found. Will the learners see the difference? 

Blurriness in non-responsive Scalable projects

The ideal solution would be that static text containers were converted to SVG instead of bitmap image, but that is at this moment just daydreaming (have no idea how complicated that is for the Captivate engineers). When I had a stubborn client who couldn't be convinced of using Adobe font, I converted all static text containers to SVG myself. It could still lead to a minor difference between the font look in static and dynamic text, but it was crisp.

A common workaround is to create an empty user variable, which you add at the end of each static text. That will force generation of the text on run time, which means you have to avoid system fonts. With that workaround you'll not see any difference between static and dynamic text.

Another possibility is to develop the project in a very high resolution, so that only downscaling will ever happen. However that has consequences for the file size.

Intro

The Assets panel is a nifty new feature, and I am confident that its use will be enhanced in the future. You could have read my first comments in this post. You find under Tip 2 a special feature concerning the Characters of the Illustrated category. One of the complaints often heard about downloading characters is that you have to do this one by one, which is taking a lot of time. If you like the Illustrated category, and also have access to Illustrator, you can find a tip which could save you a lot of time. It is no secret that the new features in 11.5 for SVG’s are my favorites, and they’ll play a role here as well. What would you think about characters in SVG-format, which means always crisp, never pixelated? With the possibility to edit the colors within 

Workflow

Step 1: Download Illustrated Work File

After the download you’ll be able to open the folder immediately from the popup dialog box. I mentioned already that it is under Others in eLearning Assets (under Public documents\Adobe if you are on Windows).

Step 2 Illustrator – Preparation

Be sure I am not at all an expert in Illustrator, my expertise is more with Photoshop, Captivate, Audition and InDesign.  Three items in the Illustrator environment will be important, try to find them and get acquainted. The active workspace is not  important, I used Essentials:

1. Selector tool (black arrow) which is the first tool in the vertical Toolbox, indicated by a red circle in the next screenshot. It has also a shortcut key V.
2. Properties panel: it may be open, just find it or you can open it from the Windows menu. This panel will be used to identify the nature of a selection (step 3).  It is highlighted in light blue in the screenshot. For this particular selection it indicates as ‘Group’. You are familiar with grouping in Captivate and that knowledge will be useful in step 3. IYou can increase its size both horizontally and vertically.

The characters come with 4x6  poses.  Only face changed in the groups of 6: disappointed, speaking, normal and happy.

Step 3: Identify and change status of character

Choose the Selector (arrow) and drag a rectangle surrounding (or cutting) the character you want to save.  You’ll see a lot of blue lines (paths) appear in the image. If the Properties panel indicates that this is a group, it is great, done with this step! Here is an example (character Sydney):

For the following example, the selected paths are indicated as "Mixed Objects". You need to group them which is possible with the same shortcut key CTRL-G as in Captivate. Alternative is the command 'Group' from the right-click menu , or from the menu Object. Here is an example of a selection which has to be grouped (character Jessica):

Step 4: Drag objects to Asset Export panel

Step 5: choose Export fomat(s) 

You can  indicate to which format you want to export, and multiple formats are possible. In the screenshot below you’ll see that not only  SVG, but also PNG’s in 3 different sizes was chosen. The last option indicated an exact height for the PNG. That way you can increase the quality to what you want exactly, since the original image is vector-based. You know the rule in Captivate: best quality for a bitmap image (PNG is bitmap) needs inserting the character in exactly the size you want. It can also be interesting to increase the size if you want to use only part of the character.

Let us compare with the normal download of characters from the Assets panel. You get only two choices , both with a fixed size (high and low).

Available formats are visible in this screenshot. For the characters, which have a transparent background you should not use JPEG because it will replace  the background by a solid color:.Now click the Export button. You will be asked to indicate the location for the images. You can put them in a subfolder of the eLearning assets or anywhere. They will not show up in the Downloads section of the Assets panel.

Conclusion

I like the Illustrator Export Asset panel a lot. Being able to use SVG format has many advantages: always high quality, and  it is so easy to edit colors in Captivate (or by roundtripping with Illustrator). This article is also meant to provide a possible workaround for having all characters available immediately without having to download them one by one. Too bad that you do not get such an overview image for the normal characters, only for the illustrated ones.

A warning: the downloaded Workfile (see step 1) nor the exported assets will appear in the Downloads section of the Assets panel. You could store them in the Others folder under eLearning Assets, but will have to import them manually to the Library of a project to use them.