Sequence check slides (updated version)

Intro

More than 7 years ago I wrote a similar blog post: how can you check the sequence of clicks. Of course the embedded tutorial was a SWF, since only that type of output was supported at that moment. This post is an update with HTML5 output, and taking advantage of new features (multistate objects, SVGs as buttons). 

Example

Play with this example project. I inserted two examples of sequence checks:
  • 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

Similar to the old post I used only two user variables (to be created):
  • 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

Instead of the hide/show workflow used in the original post, multi-state objects to display the feedback are used. That object is labeled Tx_Display (for the Geo-slide) and Tx_DisplayBis (for the Keypad slide). Look at the screenshot of the Object state panel for Tx_Display:

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

If you did read some recent posts, you know that I am a big fan of the use of SVGs both for image and interactive objects. In this case I used them mostly because they remain crisp at any resolution and lead to very small file size. The file size of the published project is less than 4MB. ¨Probably half of that size is due to the bitmap images on the ready-to-go slides, and the unique PNG which I used for the Background of the Keypad. Look at the timelines of the sequence slides. SVGs are grouped. Too bad that you cannot recognize the interactive object from the color (should be green), but they all have a pausing point set at 1.5secs (Europe SVG is not a button).

 

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

The colored country SVG buttons trigger an advanced action On Success. There are 6 countries, which means 6 advanced actions (created with the duplicate function). The five first actions are similar to this SV1_Act:

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

Because of the re-use of the variables v_counter, v_correct and the button Bt_Next which is timed for the rest of the project, the On Enter event of this slide is used to reset everything to default values. If you want to allow going back to slides, a similar action would be needed for the Geo slide, but that was not the case in the example file. The On Enter action is pretty simple:

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?

Although we have very similar actions for the SVG buttons, both on the Geo slide and on the Keypad slide, this is a typical use case where it is impossible to use shared actions. Problem are the ‘literals’, which should have been converted to parameters. Look at the screenshot of the action SV1_Act posted earlier. Logically these items should be parameters:
  • 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.

Avoid frustrations in Pretest.

Why?

More than 7 years ago I wrote a post ‘Quiz and Frustration‘.  It was about a use case,  asked for by a forum user, how to stop an assessment when the learner could never succeed because he lost already too much points. It feels like being kind to the learner, avoiding frustrations. Recently a similar question appeared, this time about a Pretest. Pretest slides as designed since many versions in Captivate, are also frustrating because of their limitations. You need to have all the Pretest slides in sequence at the start of the course, all navigation will be disabled, almost all commands for On Enter events are greyed out. In short: there is almost no possibility to tweak Pretest slides, reason why I don’t remember having used them ever.

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

Explore this published file:


The course starts with a Pretest (7 questions). Based on the obtained scores, 3 situations are possible: Learner gets a passing score on the Pretest. In that case he will see the score slide. Learner answers some questions, but due to the low score, will not be able to finish the pretest with succes even if all remaining questions are answered correctly. In that case the remaining questions will be skipped and the learner will have to view content slides. Learner finishes pretest but at the end didn’t get a passing score, same situation as in the second one: learner will have to view content slides. I didn’t add content slides, just a symbolic one. It is possible that other actions are wanted at the end, but focus of this example is only on the workflow to have questions skipped (second situation).

Setup

It was not possible to use the default Pretest slides because they do not allow advanced actions to be triggered with the On Enter slide event, which is possible with normal Quiz slides. That is why I needed to use those slides for the 'Pretest'. This may lead to a problem if you want to add a final quiz. Quizzing system variables, part of which are transferred to the LMS, will take into account all quiz slides. The easiest way to avoid this is to have the final quiz in a separate file, to which you link from this course. With JS  or with the CpExtra widget by InfoSemantics - Australia, it is possible to change the values of the system variables if you really need the final quiz in the same course. 

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


Variables

Several variables were used in the file, both quizzing system and user variables:

System variables

cpQuizInfoPointsPerQuestionSlide: reusable variable, has the max score which the learner can get on the active quiz slide

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_MaxPretest: has to be defined with the maximum score possible for the Pretest. In the example file I could have used the system variable cpQuizInfoTotalQuizPoints. I preferred not to do so. If the developer wants a final quiz in the same course, that variable has to be manipulated with JS or with the CpExtra Widget (InfoSemantics).  The value has to be filled in on definition, in this case it was 40 points. All questions also have penalty, and partial score for MCQ with multiple correct answers.

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

I used 4 advanced actions in the project. Three of them are triggered by On Enter Slide events, and one by all Success and Last Attempt actions for the quiz slides. I had only one attempt in each quiz slide.

EnterFirst

This action is triggered by the On Enter event of the first Question slide.  No condition in this action, just a sequence of commands. It is meant to calculate the values of some system variables as you can see in this screenshot:

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

Is also a simple, non-conditional  action, triggered by all On Enter events of the question slides, with the exception of the first one (used 6 times in the example file). On each slide the variable v_Until is increased with the new value of the question score on that slide.

CheckPre

This action is triggered by both the Success and the Last Attempt action of each quiz slide, in total 14 times.

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).
Next button has the usual ‘Go to Next Slide’, whereas the ToTest’ button jumps to the results slide, which is the last slide in the example file.

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.

Tips: adding Audio to QSP-slides (ready-to-go slides)

Intro

In some previous blogs I have warned to be careful with using the Switch to Destination Theme feature, have demonstrated an alternate but safer workflow to embed ready-to-go slides in a course with a custom theme. Because the themes in the responsive and non-responsive Quick Start Projects are not identical, I added a third post explaining the possible issues in the responsive version. That last post offers a free table with the names of all the master slides (including the most recent Alliance project).  It is an important resource if you want to avoid issues when embedding a ready-to-go slide. Issues occur when your present custom theme and the theme of the embedded slide have identically named master slides.

Only two QSP projects have audio in the Library: Rhapsody and Wired. The clips are used on the Podcast slide, triggered with the Play Audio command. As you all know, adding good Narration (VO) to an eLearning course will enhance the efficiency of that course considerably. Designers of the QSP’s have taken care of an easy replacement of graphical assets for you, but if you want to add narration or other audio to the course, you get no help.  This post will try to help you with some tips. It will not handle the creation of the audio clips, whether you use the TTS feature or a real audio recording. Only tips to avoid frustration when adding audio to the slides. Since the Closed Captioning feature of Captivate is limited to slide audio, the post will not explain how to add other types of audio. At the end you’ll find some more links which could help you in that case.

Adding audio clip

My usual workflow for inserting an audio clip as slide audio is:
  • 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 many slides, objects are timed for the Rest of the slide. Result: when the slide duration is increased to fit the audio clip, all object timelines will follow that example. However there are some exceptions, as seen in this screenshot:

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?

Select those objects which are not correctly timed. This can be done by clicking their timelines in combination with CTRL (or SHIFT for sequential timelines) key. TUsing the shortcut key ‘CTRL-E’ will change their timing to ‘Rest of Slide’. You can use the Timing properties of course.

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.

Many slides in the other QSP projects have set the On Exit event to Pause, to imitate  a Powerpoint presentation.  It is a personal liking, of course, but I prefer largely to have the playhead proceed to the next slide without learner action. If you share that idea, just take out the Pause for the On Exit event.

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

If you are want some more information about the tips explained above. Not surprising, they all link to understanding the Timeline (priority 1 for each Captivate user). Maybe this blog (one of a sequence about the Timeline) can help you:

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

Graded Surveys (Radiobuttons Interaction)

Intro

Several years ago I created a blog about a Graded Survey, which still attracts viewers regularly. Some visitors complain that the embedded example is SWF.  You may underestimate the amount of work which is needed for that type of blogs which are all offered for free. Impossible for me to convert all blogs to the present versions and for HTML5 output.

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

Watch this example.  You’ll see three survey slides after the title slide. Each survey slide has two statements with a rating scale. After finishing the survey slides, you’ll see the X_Score and Y_Score on a results slide. You can open the example from this link or watch the embedded movie with a fixed resolution:

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:

From bottom to top you see:
  • 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

The use variables to be created are:
  • 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

This action is assigned to the On Enter event of all the Survey slides. It is meant to reset everything as is visble  in this screenshot:

The frame number of the first frame is stored in v_start, the variables v_X and v_Y are cleared. The group with the Accept button, Retry button and Feedback message is hidden, and the Submit button is shown.

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

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

You see exactly the same commands as for the THEN part of the SubmitAct.

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:

As described before, I use a Replay action with re-entering the slide to reset the survey slide for a new attempt. Although it has only one command, it is necessary to create an advanced (or shared action) because the command ‘Expression’  is not available as simple action.

EnterResults

This action is assigned to the On Enter event of the Results slide. It is necessary to get rid of the objects displayed for the rest of the project:

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.

Embed responsive QSP slides (Ready-to-go slides)

Intro

My two previous posts about QSP slides, the focus was on non-responsive projects:

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.

How to embed QSP-slides (Ready-to-go slides) in your course?

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.

Warning! Source/Destination Theme switch?

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.

SVGs for color-based quiz

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

Have a look at the Timeline of slide 2 which is the first quiz slide (flag 1, Denmark):

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'.
I will explain why I choose for advanced or shared actions for those events.

Actions

Enter5Act/Enter9Act/Enter17Act (advanced actions)

Those very similar actions are triggered On Enter of the flag slides, depending on the number of flag parts. Here is a screenshot of 'Enter9Act':

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:

I could have used a shared action, but preferred duplicate advanced actions. Four of the color buttons need their state to be changed to Dimmed, the active clicked button to Current and its color has to be entered as value for v_color.

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?

Fonts in Captivate

Why?

Since the most recent release (11.5) of CP2019 there has been a lot of noise and questions about Fonts in Captivate. You probably heard about the Replace Fonts issues which many users experience (not me, sorry). From those discussions and the multiple times I tried to explain the different fonts possible in Captivate, I concluded to write this short article.  It is not really about the science of font use - Typography - nor about design. Just some down-to-earth explanations, and practical recommendations based on my experiences with clients and their sometimes irrational requests (sorry for that word).

Normal expectation of any designer is that the 'clients' (in this case the learner) will see your course looking totally the same as you see it while developing. Captivate is by default NOT embedding fonts. For that reason you may get in problems, as you'll read here.

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.






Characters in SVG format?

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

Open the Assets Library in Captivate. Go to the Discover tab, and open Characters. Choose Illustrated, and eventually the wanted category and find you favorite character. Look under the (often 25) images for the Illustrated Working File. It is sometimes at the end, sometimes at the start. The sticky characters do not it. Download the file, while choosing the format AI (Adobe Illustrator), not EPS. It will be saved automatically in the Others subfolder under eLearnng Assets.

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

This sound terrifying, but it is not. Problem is that apparently the files for the characters were not created/finished all the same way (different teams). The ideal situation would be that each character instance was one group (of paths). You will have to check if that is the case, and if not, group manually.

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

Drag all the assets you want to export to that panel. Verify that you see the complete character. If by accident, you drag a character which is not grouped, you’ll get all assets separately as asset. That may be interesting for other situations (like the post I created about the Geographical Hotspot question, or a planned scored Color question).

In the panel assets get a generic name Asset1…. but you can double-click that name and edit to a more meaningful name.  See screenshot under Step 5.

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.