Object Styles in a Theme

Intro

A while ago I posted a blog comparing the use of a Theme for consistent design of a project, with the older Template workflow (which is buggy in the recent versions):

What's in a Theme/Template?

I always start any project by the  creation of  a custom theme, starting mostly from the Blank theme (has the minimum amount of master slides needed for a theme). More recently I offered some tips in Themes Q&A

Due to my past as civil engineer, I see a theme as the structure of a building :

  1. Theme colors palette (see Theme Colors) is the foundation. Palette is independent on type of theme: whether iit is non-responsive, responsive with fluid boxes or with breakpoint views.
  2. Object styles, the topic of this blog are the pillars (vertical structural elements). For Breakpoint views you need slightly different styles for objects containing text.
  3. Master slides are the beams (horizontal structural elements). As in a building there is a lot of interaction between beams and pillars, together they are the structure You will often going back and forth with object styles while creating the master slides. Master slides depend on type of theme.
  4. Can be considered as optional: Recording defaults and Skin, depending on the project if you need them

Now you are ready to complete the building by filling in the walls, floors…. In Captivate we call them slides.and objects.

Captivate’s Object Styles

Contrary to a word processor, Captivate has no Text styles as you know from MS Word:   a bunch of paragraph styles (includes leading, space before and after paragraph, indents, bullets….) and word/character styles. I will post a future blog about the Object Style Manager where you’ll find all object styles used in Captivate’s themes. This blog will show some screenshots taken from the OSM, because you can see what is included in each style:

  • Caption style: includes indeed the font, font size, eventually attributes (bold, italic, light), font color and leading, alignment but also the type of caption, margins within the caption, and the transition type. In the themes packaged with Captivate the caption type is mostly set to transparent, but that was not always the case in older versions and doesn’t need to be always transparent. It comes closes to what you know as text styles, but still... transition is unknown in MS Word..
  • Text Entry Box style: has the formatting of the text but also the Fill (color and transparency) and Transition setting. You cannot edit the stroke, not included.
  • Button style: is more complicated, includes formatting of 3 Inbuilt states (Visited, 4th state is not included).  In the screenshot, which shows a so-called 'Default style' (see later)  you see that when you insert a button (Interactions, Button) in these settings a Transparent button will be inserted. For each state  the text formatting of the label is defined (in case of a Text or a Transparent, button. That setting will not appear for an Image button which cannot have a label. For the transparent button , style includes also the fill (here a gradient, with full opacity), stroke (color, width and style) and the corner radius. Formatting for the two other types is much more limited.
  • Smart Shape style: the most versatile object in Captivate can be a text container, hence the text formatting similar to captions. SInce it can also be used as a button, you can define the formatting of  the same InBuilt states as for the Transparent button. The corner radius is missing  You can choose a rounded rectangle as start for a shape button, and it has a yellow handle to edit the corner radius.

Terminology

It seems useful to list up some important terms concerning Captivate's Object Styles:

Default Style: Previous screenshots showed styles set as ‘Default style’. The checkbox to mark a style as default,  is automatically dimmed in that case.  When you insert an object of that type, it will automatically be inserted with that default style. The other styles, not marked as default style, can be used but you’ll have to change them manually after inserting the object. Here is an OSM  screenshot showing the presence of 3 possible TEB styles. In a previous screenshot I had the Yellow Fill set as default style, this is one of the other styles that can be used:

Overridden Style: If you edit some formatting after inserting an object with its default or manually changed style on the stage, a + sign will precede the style name as you can see in this screenshot (I changed the transparency of the fill and the font size). This is labeled as an ‘overridden style’.

Using overridden styles is considered bad practice in any style-based application. Why? It means that if you have to make changes later on, this object will not be touched anymore. Maybe your client/boss wants to have another font for the TEB? If this is the only TEB in the course, you can find it and edit this TEB in place, thus creating an overridden style. When dealing with more TEB’s it is much easier to edit the object style itself (see later). The edited style will be applied automatically to all TEB’s in the course, exception are those with an overridden style.

Style menu in Properties panel : many sections in the Properties panel have a so-called ‘hamburger’ (or hotdog) menu button. The Styles part has such a mneu button. In this screenshot you see the style menu expanded for theTEB with the overridden style (previous screenshot). You  can choose to create a New style (if I want to keep the default style for later to be inserted TEB’s) or Save the changes to the existing style if you want all the TEB’s in this project to have this edited style. There is also a Reset Style to revert to the original style in this menu.

The option Apply this style to…. is a bit confusing for this situation. Suppose you have another TEB using the Default TEB Blue Fill Style you can use ‘Apply this Style to all objects with Style Default TEB Blue Fill, but it will be the original Yellow style that will be applied, not the overridden style. I would prefer to save first the edited Yellow style.

Creation of a Custom Style

You can create a style in the Object Style Manager, as I will explain in a later blog,  but it is easier to use the ‘from example’ workflow. Step-by-step:

  1. Have a quick look at the Object Style Manager to see what is included in the style for your object type. I showed several screenshots above. It is not always clear from the Properties panel which features are included in the style. Example: Transition is included in some styles, not visible in the Properties panel but in the Timing Properties panel.

  2. Insert an object of that type on the stage. It will be inserted with the style set as Default style.

  3. Edit the features which you detected under 1. until you have the wanted look. That is easier to verify on the stage than with the tiny Preview window in the OSM..  Do not forget the states (Normal, Rollover, Down) for interactive objects. The style field (Properties) will show the +sign to indicate the overridden default style.

  4. Open the Style menu (hamburger) and choose the option ‘Create New Style’

  5. Give the style a significant name and confirm with OK

The style will appear in the Object Style Manager. But you don’t have to use the OSM for these actions

  • Set the style as Default style: is possible from the same Style Menu. Beware: for the example of the shape button, I would not set this as the default style because all shapes would take on that style. Really hope that we can have a default shape button style which is different from the default smart shape style in a future release.

  • Apply this style for all objects with a specific style. This is a workaround I sometimes use: for shape buttons I don’t use the default smart shape style, but one of the other styles (like a hint shape style if I don’t use it in the project) as long as I am not sure about the wanted button style. When I decide to create the definite style for all shape buttons, I can use the Apply this style to replace all those ‘hint’ shape styles by the new shape button style.

This problem only exists for shape buttons. Most other object types are not used for two different goals.

If you want to include features which are not part of the style in a quick way, use the duplicate functionality (CTRL-D). It will keep not only the same style in the copy, but all features, including eventually attached advanced actions.

Third element of your theme (structure) will be the master slides. Advantage of defining object styles before the master slides is that the inserted objects on the master slides will have the new default styles. That can save time.  Just one example: if you use shape buttons on master slides, you will not be able to use 'from example' workflow to create a style for those shape buttons. Reason: the State view cannot be opened when on a master slide, and you need to set up the states. For object styles with a Transition feature, you'll not be able to define them on the master slides neither, because you miss the Timing Properties panel for them.



4 Tips for Interactive Video

Intro

Interactive video is one of the new features in CP2019 (version 11). Over 10 years ago I did choose for Captivate because it had a lot of possibilities for interactivity in any cptx-project, Some users do think that 'interactive video' is the way to go, but to me it is a nice addition especially to make existing passive video a little bit more engaging. To avoid confusion, because already did see a lot of theoretical posts here that talk about normal interactive projects, not about interactive videos, I will continue to point at published cptx- projects as ‘interactive movies’ to show the difference with less interactive 'interactive video'. A standalone interactive video can be nice. However I honestly believe that the combination of interactive video slides with static interactive  slides in a cptx project is more powerful. Later on I will try to show with use cases what I mean. These tips are for 'interactive video' only. 

The first version of interactive video offers the possibility to insert:

  • Bookmarks: which out of the box can be used with the new command ‘Jump to bookmark’ to realize some branching often based on answer to  knowledge check slides.

  • Overlay content  slides: which appear at certain frames of the video on top of the video (can take up part of the screen, with  in a dimmed version of the video in the background). Most Captivate features can be used on those content slides, including advanced/shared actions.

  • Overlay Knowledge Check slides: which are based on the quizzing master slides.  Their appearance is the same as for the content overlay slides. Scored quiz slides are not possible.Contrary to the overlay Quiz slides in a 360 slide, these Knowledge Check slide do honor the used theme, their style can be full controlled. However, you cannot use scored Quiz slides in overlay (which is possible in a 360 slide). 

I will post lin the future a full description of the timeline of interactive video slides, and line up the differences with a normal video. An interactive video is always a slide (synchronized) video, never an event video. Consequence: interactive video is not possible in a fluid box which can only support event video, nor in the state of a multistate object.

In this blog post, I’ll offer some tips for using and enhancing the present functionality of interactive video. I posted an interactive video, as illustration in this article . Explanation of the tips is based on that example, I recommend to watch it if you didn't had time yet.

Tips

Tip 1: Prepare Master Slides for Overlay slides

Interactive video supports two types of Overlay slides; Content overlay slides and Knowledge Check  overlay slides. Both types can have the same size as the project size, but I prefer to have a smaller size for the overlay slides, so that the video itself remains visible in the background (dimmed). That can be done by using a duplicate of the Blank slide, on which you insert a shape with a smaller size than the slide, as background for your content or questions. As with normal content master slides, you can create as many as you need.  Have a look at the 3 master slides used for the example video mentioned before:

Next to the Blank master slide you see two content master slides :

  • OverlayTip: has a bubble shape, semi-transparent as background; the white space surrounding the shape will be ignored in the overlay and show the dimmed video.

  • OverlayWarn: has a different shape, less transparent and also white surrounding space.

The Quiz master slide which I used is a duplicate of the MCQ... master slide. It is necessary to use such a duplicate because you need all the embedded objects with their functionality. I used a rectangular shape as background, not transparent.
Beware: 

  1. use a non-responsive theme, because the Quizzing master slides in a Fluid Boxes theme have a setup with fluid boxes. 

  2. when creating a slides based on this master slide, you need to choose Knowledge Check slides, because normal Quiz slides cannot be used as Overlay slides for an interactive video.

After insertion of 5 overlay content slides and one KC slide, the Filmstrip looks like this (watch the hierarchy symbolized by the smaller size of the overlay slides, and by the icons at the bottom). :

Tip 2:  No fixed duration but a Close button

To me Interactivity means to offer as much control as possible to the learner. Some need more time, some want to proceed quicker. That is why I don’t like the fixed duration for Overlay content slides - which is the default setting.  No problem for the Knowledge Check slides,  the Submit button (with a pausing point at 1,5secs) takes care of keeping the slide available as long as wanted. Same would be the case for a slide with a D&D interaction or when using an interactive learning interaction.

For the static content slides however you need to pause the slide. To achieve that with minimum effort,  I used a shape button on the two master slides OverlayTip and OverlayWarn.:Look at this screenshot, where the Close button is at the bottom left:

For shape buttons on a master slide, the pausing point visible at the end of the Timeline is just an indicator. It will not appear in the Timing Properties because smart master objects have no timing. However, in the default setup, the shape button will pause at the end of each slide, hence the indicator. Look under the Actions tab for the shape button on the master slide. 

The action triggered by the Success event of that button is very simple: ‘Continue‘, to release the paused playhead. Since the pausing point is at the end of each overlay content slide, it will close immediately and the video continues.

Tip 3: Information button

That button is available for the full duration of the project, from the second (video) slide on. . I described the workflow in an older post, which dates from  CP2017: Interactive Video Buttons but is still valid for the present version. It is a simple click/reveal button, which pauses the video and has a close button. That close button takes care of hiding the information and releasing the video playhead.

Tip 4: Navigation Menu

With the Menu button the learner has a TOC to bookmarks available, to review only parts of the video. I described my workflow in this post.

The menu button has a custom state, which is used to close the menu (similar to the Pause/play button of the example video). It triggers this action:

The menu items are hyperlinks triggering advanced actions, which jump to the wanted bookmark and close the menu. As mentioned in the past, for some weird reason the option 'Execute Shared Action' is not available for hyperlinks, or I would have used a Shared action instead of duplicate Advanced actions.

Guides and Fluid Boxes: Best Buddies!

Intro

If you do follow me since a while, you are aware of the fact that I am a big fan of the Rulers and Guides which appeared with version 9.0.1. They have a lot in common with the same feature in other Adobe applications (Illustrator, Photoshop to mention two). Shortly after the release I wrote an article about possible use cases in normal (blank projects): Guides Rule!

Using Fluid Boxes as alternative for Breakpoint views is an added feature with CP2017, about which you'll find a lot of articles, webinars and videos.  I am always stumped because none of them ever shows the use of Rulers nor Guides. This article will try to convince you that Guides are even more important for Fluid Boxes design than for normal projects.

Fluid Boxes and Themes

There are some limitations when using Fluid Boxes. Some objects cannot be used: zoom object, highlight box, click box (if placed over another object), line shape and some possibilities for multistates. You cannot use groups neither. Most of those limitations are linked with the 2-dimensionality of Fluid Boxes. Static Fluid boxes are a workaround, but you'll lose a lot of 'fluiditiy4. I will talk about my personal workarounds for those limitations in a later post.

Less known are the limitations for Themes. I start every project, even a small one, by customizing an existing theme or creating a theme (based on the Blank theme). Such a custom theme will save a lot of time later on, if small design changes have to be done. THe components of a Theme are described in more details here.

Object Styles

Fluid Boxes workflow will save you time when setting up object styles for Text containers: captions and shapes. You don't need to set up the font size for different screen resolutions, as is necessary for Breakpoint views. Text will rescale automatically when the screen resolution changes. Maybe you'll have to decrease the minimum font size which is set to 14p (for Breakpoint Views it used to be 10p, still readable on smartphones). 

Master Slides

All the included themes in Captivate have Fluid Boxes on the master slides (the 'virgin' Blank theme has them only on the quiz/score masters) . Two exceptions: you  will not find Fluid Boxes on the main master slide, nor on the Blank master slide. You'll see a lot of informational stuff where every presenter starts always with a slide based on the Blank master slide because it is also 'virgin'. Be careful when editing the Blank master slide, because it is needed for PPT-import and software simulation slides, edit only a duplicate).

I found it clarifying to explore the Fluid Boxes on the master slides of the included themes. Result of that exploration were two blog posts :

  • Fluid Quiz Slides: describes the setup of Fluid Boxes for the Quiz slides; interesting is the use of the static Fluid Box for feedback messages. The Blank theme has the same setup as the other themes.
  • Fluid Boxes and Master Slides: explores the content master slides in the themes, and how to use them. 

During the research for this post I discovered that it is not possible to insert Fluid Boxes on the Main Master Slide. I am used to have some information on that Main Master slide, which I want to show on all slides. Here is an example of the bottom part of the Main Master slide:

That is not possible within a Fluid Box. I tried to set up the Position Properties (which are available) but often weird positioning showed up when published. It is not possible to have different font sizes: either you let everything rescale proportionally and get very small text on phones, or you have to keep the size in px which will maintain the objects and font size fixed. Not really a workable solution.

Alternative for objects which you want on all slides, is to put them on the first slide and time for the Rest of the Project. However you cannot time objects for the rest of the project when using Fluid Boxes, not a workaround in this case.

My solution: insert the objects on each master slide you'll need in the project in Fluid Boxes. That is where Guides are indispensable to me.

Fluid Boxes and Guides

Turn on the Rulers under the View menu and you'll see that they are in percentage, not in pixels as for normal projects? 

For all to be used master slides, I want a setup, with a Fluid Box at the bottom to accomodate the text and button(s) as shown above. That FB should have a height of 10%. That FB will be divided in two: 70% width to the left (text), 30% to the right (buttons). To achieve that, create two Guides

  1. Horizontal Guide at 10% from the bottom by double-clicking on the 90% mark of the vertical ruler
  2. Vertical Guide at 70% by double-clicking on the 70% mark of the horizotal ruler
  3. Lock the Guides (View, Lock Guides)
  4. Turn on "Snap to Guide" in View menu

The guides will be visible as well in Master Slide as in Filmstrip view. You can change guide color in the Preferences, Be sure to change the Guide% color.

Switch to the Master slide panel. You'll get the step-by-step work flow to add a 10% Fluid Box at the bottom of two master slides (Title and Custom master slide), and have two child fluid boxes in that first FB.

Edit Title Master Slide

All included themes (also the OldPaper theme I use in this example) have one Fluid Box on the Title master slide, filled with one Title Placeholder. It is not possible to add a Fluid Box, the button Fluid Box on the Big Button Bar is dimmed. To solve this and be able to recover the placeholder:

  1. select the placeholder
  2. check the option 'Unlock from Fluid Box' on its Properties panel
  3. drag the placeholder off the stage in the scratch area
  4. uncheck the option 'Unlock from Fluid Box', later on we'll drag it back on the master slide

Select the parent fluid box (drag a rectangle half off the stage). You can now insert two vertical Fluid boxes. You will have to change the setup of the Parent Fluid box. The wrap option 'Squeeze in a column' is fine as are the alignments, but in order to use all available space you need to activate the options Stretch to fit, both Horizontally and Vertically.

Use the horizontal guide to change the height of the bottom Fluid box. This Fluid box needs these settings:

  • Flow: Horizontal
  • Wrap: Squeeze in a Row (to have text and buttons alwas next to each other), 
  • Horizontal: Space Around (eventually define some padding) and Stretch to fit
  • Vertical: Middle Align and Stretch to fit

The top fluid box: I choose vertical Flow, kept all the other default settings.

You can now insert two horizontal Fluid Boxes and change their width using the vertical guide, Flow horizontal for both.

The left Fluid box needs to have Left Align horizontally and the right one Right Align. I choose a horizontal padding for both and a vertical for the right Fluid Box. You can now insert the text (doesn't have to maintain the aspect ratio) and the Next Shape button.

I dragged the Title Placeholder back on the slide and created this Title slide from the edite Title slide:

Custom Master Slide

If none of the content master slides fits your purpose, you can start from a duplicate of the Blank Master slide. Insert two vertical Fluid Boxes. Although that master slide doesn't have a starting Parent Fluid box, it will be automatically created when you insert fluid boxes. The work flow to set up the bottom fluid boxes is pretty much the same as for the main master slide. You can now add a Back button as well. If you want more fluid boxes, go ahead. Here is a example of a custom master slide, which you could try to reproduce: And get a (Belgian) beer after success.

Conclusion

Now it should be clear why I love the Rulers and Guides for designing any project, but especially when using Fluid Boxes workflow. The Guides which you set up are saved with the project, you can hide them from the View menu and they'll always be ready to help you out when necessary :)




Fluid Boxes and Master slides

Intro


A while ago I published a post explaining the setup of the Quizzing Master slides, compulsory parts of each theme, even the almost empty Blank theme. In this article I will try to explain my experiences using Fluid Boxes on Content Master slides. Most themes shipped with Captivate have several content master slides (exception = Blank theme). Let us first start with the master slides that are not behaving like the content or quiz master slides

Main master slide, Blank and Title master slides

Main Master slide

It is not possible to insert Fluid boxes on the main master slide: the button seems active but both options (Vertical and Horizontal) are dimmed. Objects placed on that Main master slide, and inherited by the daughter master slides, are to be set up using the Position Properties panel. Example: the text container with my name and copyright in the example movie.
However after some more testing on iOS devices, the Position properties set up for those objects are not correctly displayed in portrait mode. 
TIP: at this moment avoid putting objects on the Main master slide, since they don't display at the correct location on some mobile devices.

As you probably know, it is not possible to have shape buttons timed for the rest of the project when you use Fluid boxes. You could put a shape button on the main or one of the other master slides but you cannot control it because it has no ID. In the example movie I preferred to have a Next button on the individual slides, because ton most slides it is hidden until the learner has visited everything. However a toggle shape button for Audio, for CC, for the TOC could be on the Main Master slide. They will not behave like objects in a Fluid box however, but act as defined on the Position Properties panel for size and location.

Blank Master slide 

This master slide has no Fluid boxes by default but you could add them. As I have explained in previous articles, you should prefer to duplicate the master slide for editing, don't edit the original slide because it is used for Powerpoint import and for software simulations.

Title Master slide

That master slide has one Fluid box (parent fluid box) but no child fluid boxes. It is set up as 'Squeeze in a Column', and vertically and horizontally centered. Because the title placeholder is inserted directly in that parent fluid box, you are not able to insert child fluid boxes.  Because each new project, using the default theme White will start automatically with a Title slide, this has caused already many frustrations when starting with the use of Fluid boxes. If you want to use fluid boxes on the first slide, you have to change the master slide from Title to Blank (exception Blank theme which starts with a Blank slide).

TIP: if you want to add objects on the Title master slide, first take out the Title Placeholder, to be able to insert child fluid boxes. Then put back the Title Placeholder in one of the child fluid boxes.

Content master slides

It can be a time saver to use a content slide that has already Fluid boxes. In a future next article I'll explain how to create a custom content master slide with the help of Guides, but for now let us focus on an existing master slide, and see how we can tweak it.
In the example movie, the second slide is based on the Content04 master slide from the Theme 'OldPaper'. I didn't customize the theme, just applied the correction explained in my last post

Look at the setup of the Fluid boxes on the master slide: the parent fluid box (FB_15) has two vertcial child FB's (FB_16 and FB_17). The top one is meant for the Title placeholder: 

The bottom Fluid Box has 4 child FB's, (FB_19,FB_20, FB_21, FB_22), which are set up to wrap Symmetrically (when width is too small, two FB's will move to the next row), and have a padding both vertically and horizontally to have some spacing between the FB's. Each of them has a placeholder for an image.

Example movie

Play with this responsive movie (will open in a new window) which has only 3 slides: Title slide (with inserted Next button, and taking over my name from the main master slide), a slide based on Content04 master slide, with a lot of tweaking, and an End slide. The Next button on the second slide will only appear when you have clicked all available shape buttons and seen all the content. 

Refining slide based on Content master slide

The FB setup on the master slides can be tweaked on a slide based on that master slide. You can remove all fluid boxes, but that is has not much sense. To demonstrate I did a lot of tweaking for the second slide of the movie which you just watched:
  • I deleted the image placeholders


  • I decreased the height of the top fluid box (FB_MS2_16) to 10%, originally it was 15% (edited font style as well)

  • I added a third vertical child FB under the parent FB_MS2_15, it is labeled FB_9
    TIP: this will not affect the master slide, if you use Reset Master Slide button in the Properties panel of the slide, you'll get the original layout


  • That last FB_9 got two horizontal FB's, FB_37 (70% of the width) and FB_38 (30% of the width); the last one will be used for the navigation buttons (Back/Next)

  • The setup for FB_38 is visible in this screenshot
  • Each of the four FB's in the center (FB_19,FB_20, FB_21, FB_22) has no longer any object (see 1) and can be divided in two new vertical child FB's


  • As you can see on the screenshot, the top FB will have the button and explanation text (originally hidden, but cannot be grouped in FB's), the bottom one has an example of the style (also initially hidden).

  • Setup for the top FB's here is visible in this screenshot; for the Shape button ('Normal') the option Maintain Aspect Ratio is kept, but not for the Text container, so that it can change for smaller screen sizes (especially in portrait mode).

More questions?

You will have seen that I always had Rulers and Guides activated. My next blog post will focus on the use of that great tool, which almost no one seems to use?

Sure, I have several advanced actions in that movie, but that was not the goal of this post. No explanations here about those actions.


Tips for 'Fluid' Quiz Slides

Intro

When publishing my first reflections on Fluid Boxes work flow versus Breakpoint View work flow I didn't mention my expectations for a smoother creation of Quiz slides using FB's. In my experience with responsive projects in previous versions, the most frustrating part were those (damned?) quiz slides. You are probably aware of the very strict rules to honor for quiz slides: need to be careful with 'embedded' objects which include functionality that can be broken. Styling quiz/score slides is tough even in normal (blank) projects and turns into a nightmare when having to do it for up to 5 breakpoint views. Every post I published about quizzes gets a lot of visitors. Many questions about quizzes are posted on the forums as well. This explains why I listed Quizzes as second most important stumbling block for Captivate users in this article.

The present post is not (yet) the promised upgraded version of the most popular article I ever wrote about questions, only a summary of tips I discovered while exploring the Fluid Boxes work flow for quiz slides (score slide will be subject of a later post). If you are new to Fluid Boxes, please take some time to read the articles posted by Zeeshan. Up till now, he published 3 but promised more on their way:

Using Fluid Boxes - Knowledge Facts 3

Quizzing Master Slides -Setup Fluid Boxes

All quiz slides, and the score slide, are based on a dedicated Master slide. Master slides have embedded objects (no individual timeline): Title, Question, Answer Area with Answers, buttons, feedback messages, progress indicator to mention some. The functionality of the quiz is embedded in those master slides (two-step Submit process, updating quizzing system variables, tracking attempts on question/quiz level, review and retake on score slide, etc). 

if you choose the Fluid Box work flow for a responsive project in Captivate 2017, the included themes will also have Fluid boxes on the quizzing master slides. There is one exception: the Likert master slide has no Fluid Boxes because Likert questions are not supported for responsive projects. Each theme needs to have at least a main master slide and 6 daughter master slides. Besides the Blank master slide which is essential for Software simulations and PPT-import, the other 5 daughter master slides are all about quizzes: MCQ,T/F,FIB,Sequence; Matching; Hotspot; (Likert = not supported in responsive); Result. 

The Setup for the quizzing master slides is common for all included Themes. I will explain extensively the most used master slide (MCQ, T/F...) and summarize only the differences for the other quizzing master slides. The score slide, which causes a lot of issues at this moment, will be explained in a future blog post, hoping that some of the problems will already have dissipated by a patch?

Setup Fluid Boxes in MCQ,T/F,FIB,Sequence Master slide

This is the most used master slide for sure. You have the Root fluid box (ID/ FB_8) containing 6 child Fluid Boxes. The ID's I mention for the Fluid boxes are from the master slides. Apparently the ID has to be unique as usual. When a quiz slide is created based on a master slide the ID will change: 3 characters will be inserted, referencing to the slide number. Example: FB_MS5_10 is the fluid box for a question based on the MCQ master slide, originally on slide 5. Beware: that ID will not change when you reorder the slides, which can make it quite confusing if you are used to reorder a lot. The Root fluid box (ID/ FB_8) is set up this way.

  • Flow: Vertical (has 6 child fluid boxes)
  • Wrap: Squeeze in a column , which means the child fluid boxes will never be rearranged. the 80% has no consequences, because stretch to fit is activated.
  • Horizontal Alignment: Center with Stretch to fit activated
  • Vertical Alignment: Space around
  • Padding: none, which means the space around has no effect on the child fluid boxes

The 6 child fluid boxes, from top to bottom,have this content and setup:

Title Fluid Box (ID: FB_9)

  • Flow: Horizontal - has mostly only one item, the title shape or caption
  • Wrap: Wrap to Next Row
  • Horizontal Alignment: Space around with 'Stretch to fit' activated
  • Vertical Alignment: Middle Align with 'Stretch to fit' activated
  • Padding: none, which means theoretically the title could touch the left and right side of the fluid box/slide. Personally I avoid that by adding a small horizontal padding (5-10px).

Tip: in theme 'Clear' the title overlaps with a design element. You can change the Vertical alignment to Bottom, and eventually increase the height of this first child fluid box to fix that. Another solution is to turn off that design element by unchecking the option 'Show Main Master Slide Objects.

Later on you'll see that the Advanced answers feedback messages will cover up this FB. Be careful when resizing and moving those messages. You could mess up the arrangement of this Title fluid box. Best way is to unlink those messages from the FB before touching them.

Question Fluid Box (ID: FB_10)

  • Flow: Horizontal (but has mostly only one item, the question shape or caption); text in that container is vertically aligned to top, to allow wrapping of longer text questins
  • Wrap: Wrap to Next Row
  • Horizontal Alignment: Space around with 'Stretch to fit' activated
  • Vertical Alignment: Middle Align with 'Stretch to fit' activated; for the inserted text placeholder text is aligned at the top; you could eventually change that to middle as well if you don't have long questions.
  • Padding:  50px horizontal (text placeholder is indented from left and right side of the slide/fluid box). If the focus is on smartphones, this padding could be too big (lot of smartphones have only a width of 320px).

Answers Fluid Box (ID: FB11)

  • Flow: Horizontal 
  • Wrap: Wrap to Next Row
  • Horizontal Alignment: Space around with 'Stretch to fit' activated
  • Vertical Alignment: Middle Align with 'Stretch to fit' activated; 
  • Padding:  50px horizontal (placeholder is indented from left and right side of the slide/fluid box); 20px vertical, the inserted answer area doesn't touch the top and bottom of the Fluid box. Comment about this being maybe too much for small screens is valid here as well.

Tips: the individual answer placeholders cannot be resized in the master slide (as is the case since CP6). They are designed to have only one line (contrary to the question placeholder which has space for multiple lines). If you have answers that are pretty long, font size will be decreased to squeeze the answer in the available space. If answers have different lengths, this could result in  different font size for the answers which is certainly not wanted (see image below). Here are two workarounds:

  1. If you don't mind the font size to be decrease but want the same font size for all the answers on a slide, check the option 'Enable Uniform Text Scaling' in the Properties panel for the slide. Eventually you can decrease the mininum font size which is set pretty high in 2017 (14p, minimum was 10p in previous versions).

  2. If you don't want to have the font decreased, but prefer text wrapping, you have to resize the individual answer containers on the side (not possible on the master slide). Start by increasing the container height for the longest answer, use the Align menu ro resize all to the same height, move them as far away from each other and Distribute vertically. Eventually you can decrease the vertical padding to have more space, and/or make this Fluid Box higher, which will decrease the height of the other boxes. This work flow is certainly necessary if you allow shuffling of the answers. Whenever the answer cannot fit in the container anymore the usual icon 'read more' will appear. 

In this image you'll see the result: Default setup on top, in the middle the result when 'Enable Uniform Text Scaling' is activated and at the bottom the same answers after manually resizing, moving and distributing vertically.

If your goal is a good experience on smartphones, I would recommend to reduce the padding in this Fluid box: 2x50px horizontally is a lot if the browser has only 320px in the width. 

Messages (ID: FB_15)

Since the Feedback messages are all in the same location, this had to be a Fluid Box of the Static type to allow overlapping objects. 

Issues: The usual problem for editing those messages remains: to edit a message you have to get all other messages out of the way, since they are embedded (they don't have a separate timeline). which means you cannot hide them on the stage  If the messages are the same on all quiz slides, you can edit them - before inserting quiz slides - in Preferences, Quiz, Default Labels (same for the button labels).
However if you want individual messages on the quiz slides themselves, I used to move each message to be able to edit the one below. Problem is that they will be moved over another Fluid box, and that means you cannot select them anymore.  I thought to use the Arrange menu but.... it is not available on quiz slides, only on the quizzing master slides! Not available in the right-click menu, dimmed in the Align toolbar. I tried to move the message in the scratch area (horizontally) for editing, but with the focus loss when zooming in, this is a real pain. Best way I detected (time consuming) is:

  • Edit the top most message in place (mostly Correct); since most of the messages are in a (semi) transparent shape/caption, increase the Alpha to cover up the other messages for editing.
  • Move the top message out of the way (I use shortcut keys like Shift-Up)
  • Edit the next message (same for Alpha as for the first one)
  • Move it also out of the way
  • Do not forget the Retry message if you have multiple attempts
  • When finished, use 'Reset Master Slide' to move all the messages back in their Fluid Box (FB_12). Since the object styles will be reset as well, the Alpha of the shapes/captions will be reset to the initial value. Beware: be careful not to override object styles in this case (indicated by + sign next to style name).

Here is some good news: if you choose multiple Failure messages (up to 3 still) because you have multiple attempts, those extra Failure messages (#2 and #3) will appear over the Answer FB. Contrary to messages moved over that box, these can be selected and edited easily. When previewing/publishing the slides all Failure messages will appear in the same location although being in different locations on the stage.

When using Advanced Answer options for MCQ, one correct answer, to show feedback messages for each answer, another problem appears.The text captions for the feedback are very small, and in the top right corner (over the Title Fluid Box), slightly off stage. Depending on the number of answers, some will appear lower, over the Answer Fluid Box.

Buttons Fluid Box (ID: FB_16)

  • Flow: Horizontal 
  • Wrap: Symmetrical, which is almost the same as One Row. Only when the number of buttons is even, will you have a rearrangement in two rows.
  • Horizontal Alignment: Space around with "Stretch to fit" not activated
  • Vertical Alignment: Middle Align with Stretch to fit not activated
  • Padding: 0px horizontal and 2px vertical

The maximum amount of buttons is 6: two Review navigation buttons, Clear, Back, Skip and Submit. If you are used never to insert Back and Skip buttons (which is my normal setup) you can better increase the font size (now 20px) to 28px or even 30px. If the option 'Enable Uniform Text Scaling' enabled, the label will rescale nicely and especially the small symbols << and << on the Review navigation buttons will be readable even on small screens. The buttons don't have the option 'Maintain aspect ratio' enabled, which means that the width only will be resized.

Progress indicator Fluid Box (ID: FB_17)

  • Flow: Horizontal 
  • Wrap: Wrap to next row.
  • Horizontal Alignment: Center Align "Stretch to fit" not activated
  • Vertical Alignment: Middle Align with Stretch to fit not activated
  • Padding: none

This fluid box has only one text caption with the progress indicator, in font size 12p which is smaller than the minimum font size. The text will never rescale even if 'Enable Uniform Text Scaling' is activated.

Setup Fluid Boxes in Matching Master slide

This master slide has one extra child Fluid box for the Column Titles. The Answer Fluid box is bit different. The ID's of the fluid boxes on this master slides are:

Root Fluid Box FB_18

Title Fluid Box FB_19

Question Fluid Box FB_20

Column Title Fluid Box FB_21

  • Flow: Horizontal, has two text placeholders for the column titles
  • Wrap: Squeeze in a row.
  • Horizontal Alignment: Center Align "Stretch to fit" not activated
  • Vertical Alignment: Middle Align with "Stretch to fit" not activated
  • Padding: none
  • Answer Fluid Box FB_22: this Fluid box has now two answer areas, linked by the line indicators
    Messages Fluid Box FB_23
    Button Fluid Box FB_24
    Progress Indicator Fluid Box FB_25

    Setup Fluid Boxes in Hotspot Master slide

    This master slide has only 5 child Fluid boxes, because Question and Answer are now in one box. Moreover it is a Static box, which means overlapping objects are possible. These are the ID's of the boxes:

    Root Fluid Box FB_26

    Title Fluid Box FB_27

    Question Fluid Box FB_28: static fluid box, will contain the image with the hotspots

    Messages Fluid Box FB_29
    Button Fluid Box FB_30
    Progress Indicator Fluid Box FB_31

    General tips

    I would recommend to activate the option 'Enable Uniform Text Scaling' for question slides in most circumstances. Since this option is at slide level, it will be valid for all Fluid boxes on the slide. 

    Avoid to override object styles, that is a general rule but even more necessary for quiz slides. It will happen that you want to reset the Master slide and in that case all styles will be reset to the Default style. If you want to change a style, do not hesitate to save the edits to those default styles. 

    Preview is never WYSIWYG certainly not when you are using the slider during preview to see the changes for other screen resolutions. Example: it often happens during Preview that the text in long answers (even when manually resized and redistributed) seem to be cut off for small screens; when published all looks mostly a lot better. 





    What's in a Theme - a Template?

    Intro

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

    Theme versus Template

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

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

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

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

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

    Components of a Theme

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

    1. Theme colors palette

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

    2. Object Styles - Object Style Manager

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

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

    Some tips:

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

    3. Master slides

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

    Some tips

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

    4. Skin

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

    5. Recording defaults

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

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


    Do you need a Template?

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

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

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


    Conclusion

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





    Customized Progress Indicator

    Intro

    Do you use the Progress Indicator for Quizzes? I'm very frustrated about that indicator: you have the choice between a Relative or an Absolute indicator, you can adjust the style using the Object Style Manager, but... no way to change the phrasing of that indicator. It is always 'Question X of Y'. If you are an unhappy Captivate-user that needs to localize a lot of courses, this is really annoying. My Dutch-speaking students want a Dutch indicator, my French students want a French indicator etc.
     
    It is really not so hard to create your own Progress indicator for Question slides, using rather simple advanced actions and a dedicated Master slide. In this tip I will explain the work flow step by step
     

    Example

    Play this movie to check the result. In this Quiz I do have 6 question slides. The first 3 questions use a master slide with a progress indicator in English, the last 3 use a similar master slide but with an indicator in Dutch. Do not panic: all questions are in English.

    Work Flow

    • User variables: create 2 user variables, I labeled them
      • v_begin  to store the slide number of the last slide immediately before the first question slide 
      • v_current  to store the number of the question; since there is no accessible system variable for this information I will have to detect it from the current slide number

    • Advanced actions: create 2 advanced (standard) actions, I labeled them:
      • IndBegin: to be triggered on entering the last normal slide before the first question. It has only one real statement: to store the current slide number (system variable rdinfoCurrentSlide) in the user variable v_begin. First image in the Gallery shows this action.
      • IndCurrent; to be triggered on entering each question slide, it calculates the question number and stores it in the variable v_current. I do use the system variable rdinfoCurrentSlide again combined with the fixed  number stored in v_begin. Second image in the Gallery shows this action.

    • Attach the actions IndBegin to On Enter for the last slide before the questions and IndCurrent to all Question slides as the same On Enter action (can be done in one operation, select all the Question slides and use the Properties panel, Action accordion)

    • Master slide: create the master slide to be applied to all the Question slides. In this example I created 2 Master slides for the English and the Dutch questions, both based on the General master slide (for the background). Insert the text caption that shows the sentence to be used for the Progress indicator. The used variables in my Progress Indicator (see third image in the Gallery) were:
      • v_current the current question slide number, calculated with IndCurrent action
      • cpQuizInfoTotalQuestionsPerProject is a Quizzing system variable that shows the total number of questions in the project, you can of course also introduce this manually but I do not like to count myself
      • cpQuizInfoPointsPerQuestionSlice this is a bonus, not necessary but extra information for the learner, a Quizzing system variable as well. 

    Conclusion

    Hope you liked this small tip, and will be inspired to use variables on master slides.
     
     
     

     

    Using the button widget: some ideas

    The button widget is no longer available in later versions of Captivate, but can be replaced almost in all use cases described in this article by a shape button.


    Intro

    This is not the promised second part of the use of widgets for customized questions. You know that I find some inspiration in the user forums, and last week I discovered another hidden gem, coming for free with Adobe Captivate 5: the deceptively simple 'Button'-widget. The Adobe team seem to like hiding their gems, and always wonder why? Few people, except the widget wizards of course, do realize that this Button-widget is not an interactive widget at all, but a static widget. Check it out for yourself: in the Widget panel, set the filter to Static and you will be able to verify my statement ((first image in the Gallery). I'm used to tell my students always to verify teacher's statements
     

    Non-interactive button?

    A lot has already been written about the difference between static, interactive and question widgets (a few links on the blog get you to those Widget kings), will not bother you with it. But want to explain why it is great news that this button is a static widget. Being static doesn't mean that the user cannot interact. If you have read the blog post about the use of the (static) widgets for custom questions you will know that. But the fact that is a static widget will allow you:
    • to use it on question slides, where interactive objects cannot be inserted
    • to use it on master slides, that have the same restrictions as question slides
    Isn't that great news?
     

    Configuring the widget

    There are quite a lot of configuration possibilities as you can see in the second image of the Gallery that shows the settings of the buttons I used for the example of the Menu on the master slides. It is pretty straightforward to use, I only lost some time finding out how to put in more than 4 characters on the button. You have to click in the Preview space on the button and you'll see the text box appearing (is visible on the screenshot). There are a lot of small arrows of all kinds that allow you to move the text box, to increase its size and even to increase the size of the text itself. In the list of actions that can be performed you'll find navigation, open File/URL and send email (here I used Jump to slide).
     
     

    Use on Question slides

    Lot of users get frustrated because it is not possible to insert any interactive object on a question slide or on the score slide. If the action you want to trigger by this object is a navigation action, or opening a URL/file, or sending an e-mail than you can use the same Button-widget as used on the Master slide example.
     
    Some ideas:
    • to allow user to get back to an instruction slide when failing on a question
    • to open another file on success/failure of a quiz

    Example Menu on Master slides

    In the example that you can watch here, I used the button widget on a Knockout Master slide (see blog post Create and Use a Knockout Master slide) to create a menu. I do have 2 very similar master slides, the first is used for the introduction slide, the second has also a button (same widget) to go back to the first slide and is used for all other slides.
    I would love to hear how you do use this widget!