Intro

This is the fifth blog post about default Quizzing slides. Five of the compulsory master slides in any theme are linked with Quizzing. For this article the type of project is important: non-responsive project, responsive project with Fluid Boxes, Responsive project with Breakpoints. Same master slides are used for Pretest and Knowledge Check slides.

With CP2019 Overlay Knowledge Check slides are available in an Interactive Video. Those slides also use the master slides in the chosen theme. The Quiz slides in a VR project however cannot be formatted using master slides at this moment. You have to accept the default styling. It is possible to edit the text containers (mostly shapes) but that has to be done on each slide individually. I sincerely hope that formatting functionality will be extended in next versions.

As for the object styles, for master slides editing depends on the type of project: non-responsive (can be published as scalable HTML output), responsive with Fluid boxes, responsive with Breakpoints. Between those types master slides are not interchangeable.

Non-responsive project

In the previous posts Terminology and Submit Process I explained the meaning of Embedded Objects on the quizzing master slides as being objects without an individual Timeline. You find them on the four master slides for Quizzes. They appear as placeholder on inserted Quiz slides. Each of them is using a dedicated Object style from the Quizzing Category (see Object Style Manager). As I wrote in Preferences it is a bit confusing that for the included Captivate themes, the default feedback messages use shapes as container, not captions which means you cannot change them directly for the Default Labels dialog box where only caption styles are available.

The background of the quizzing master slides can be set up like any other master slide. Since they have a lot of placeholder objects (mostly shapes) which can be styled individually you will mostly see either:

• Master Slide Background: this means that the background of the Main Master slide is inherited. Often that will be a solid color, a gradient or eventually a not invasive texture image.
• Custom: if the Main Master slide background is not suited, you need to use this option where you’ll find again a solid color, a gradient or a texture.

However feel free to use an image as background. Or you can override the background on individual quiz slides by inserting an image. Since the embedded objects are always on top of the stack, that image will automatically  be below the quiz objects.

Tips

1. Use Guides (see Guides Rule) if you want to edit the layout of the placeholders, if you need a Matching, Hotspot and/or Likert question for your course to have a consistent design with the more common MCQ,T/F… questions sharing the same master slide.
2. If you have a dark background, you can have issues with Matching slides: the link lines between the two columns are black, not possible to edit that color. Moreover since you probably would want a light color for text, the dropdown list will be unreadable. Solution is to create a duplicate master slide, where you put a light shape under Answer Area, and change font color to a dark color (new object style).
   

   
3. If you expect to have multiline answers, the Answer area can be too small. It is not possible to edit the individual answer shapes n the master slides (which is a pity), that has to be done on the quiz slides. Increasing the height of the Answer area will make the workflow easier. Decrease the height of the other placeholders. That is possible for the Question title, the Feedback messages. Be careful with the Question placeholder: questions can also need more than one line. Eventually you can move the Progress indicator next to the Question title, to free up more space for the Answer Area.
4. If you want some quiz slides including an image, create another duplicate of the master slide. Decrease the width of the Answer area and insert an image placeholder as shown in this screenshot:
   

   
5. In any custom theme I create, I will always edit the results master slide: drag the Retake button over the Review button. It will avoid that the learner is confused when quiz is set up with multiple attempts, and Review is enabled. Design of Captivate’s quiz means that all attempts are considered to be exhausted  if the learner clicks the Review button. Moving that button will not cause any problems. If there is only one attempt, the Retake button is not appearing, and the Review button is visible immediately. If there is no Review functionality, no problem neither.
   If you want to override the design, and allow Review before a Retake, but without showing the correct answers, you could use the workflow described in Review before Retake.

Responsive project – Fluid Boxes

An in-depth exploration of the quizzing master slides in the Fluid Boxes themes is described in this article.

Every embedded object is in its (normal) fluid box, with the exception of the feedback messages sharing a static fluid box.  That is necessary to save space, they are stacked which is not possible in a normal fluid box.

Some of the tips mentioned for non-responsive projects are also valid for this type of project:

1. Use of Guides is strongly recommended. For responsive projects rulers are in %. I know that CP2019 allows to use Position Properties panel for fluid boxes, but I find setting up a grid with Guides much quicker.
2. For Matching questions using a dark background: fill the fluid box of the Answer area with a lighter (semi-transparent) color, and change the font color to avoid the mentioned problems. Do this on a duplicate master slide (MCA, T/F…).
3. In the article mentioned above, I described the workflow for long answers in the Answer area. Instead of resizing the placeholders you need to resize the fluid boxes.
4. For the duplicate master slide allowing adding an image, you’ll have create two fluid boxes in the present fluid box for the Answer area. That means taking out first the content by unlocking from Fluid box, dragging it into the scratch area. Create two horizontal child fluid boxes. Relock the answer area to FB and redrag it into one of the new child fluid boxes. You can insert a placeholder in the second child fluid box.
5. The easy workflow described for a non-responsive project is not possible. The buttons are in a normal fluid box, stacking is not possible. Here a real tweak is needed. Tweaks and special situations will be explained in later blog posts.

Responsive project with Breakpoints

I have to confess that the toughest part of this type of projects is getting the quiz slides behave properly on all mobile devices. Although in some cases I prefer this type of responsive project for content slides because of the real freedom of design allowing to reduce layouts for small screens to the bare minimum by replacing items, quiz slides are a real pain.

It is very important to set up the object styles properly, especially those where fonts are included. Full explanation is to be found in ‘Object styles for Responsive Projects’.

The problem has become bigger, because Captivate no longer has included themes for Breakpoints as was the case until CP9. I still continue to use those themes, especially for the Quizzing master slides. At least they provide a start for setting up the responsiveness. For the rest a lot of testing (trial and error) is needed.

Most of the tips mentioned for non-responsive projects are fully valid, taken into account that you need to use the Position Properties to make all items responsive. No limitations however as for Fluid boxes: stacking is allowed, grouping is allowed etc… You can drag the Review button under the Retake button.

Next?

This fifth post was supposed to be the last one in the sequence about default quiz slides. However I will add another one explaining partial scores and penalties, after seeing several questions in the social media. You should now have a pretty complete overview now. Next articles will be about tweaking the default design (submit process, use of feedback images, use of audio…) and special situations like Branch aware, Pretest setup, Remediation. custom quiz slides, …

I also strongly recommend to get acquainted with the category 'Quizzing' of the system variables.

Intro

This second part refers to the responsive versions of the Quick Start Projects. It is a relief to see that the situation is better for the used themes. You will be able to download a table, with the same indications as in the first post.

Table

The number of Quick Start Project with a responsive (fluid boxes) set up is more limited than for the non-responsive projects. You can find a similar overview like the one provided for the non-responsive projects in this downloadable table:

QuizQSPResp

Items marked in red need some explanation, have a look at the Tips below

TIPS

The project Aspire  has several example MCQ slides, only one of them is using a dedicated master slide. It has also an incomplete Results master slide. The project League has incomplete quiz master slides.

The situation for the score slide is different. As told before, you cannot insert a score slide as a standalone slide. It will be inserted automatically after you have inserted a question slide of the same theme, or when you select the option ‘Show score at the end of the Quiz’ in Quiz Preferences, Settings.

The tips for the question slides, mentioned in the previous post, are valid here as well. For that reason, focus in the TIPS is only on the Results (score) slide. If you want to learn more about the Fluid Boxes layout for question slides, and about editing the feedback messages, have a look at:

Tips for Fluid Boxes quiz slides

Feedback Messages in Fluid Boxes question slides

Score slide

Group 1: Safety, Wellbeing, Alliance

These projects have a Results master slide consistent with the global Theme design. The content (inserted fields) is similar to Results slides in all themes packaged with Captivate. That means that you can use choose the to be inserted fields, using Quiz Preferences,  Settings, button ‘Quiz result messages. The screenshot below shows an example, where two fields (Max. Score and Attempts) have been unchecked. The Fluid boxes layout will adapt to those changes.

No problems with this group at all. When you insert any question slide from one of these QSPs the results slide will automatically be inserted and have the design of the master slide of that same QSP.

If you insert a question slide directly (using Quiz menu) the theme of the project will have priority and the project Results master slide will be used. This is due to the fact that version 11.5 supports the use of multiple themes.

Group 2: Aspire and Rhapsody

The first master slide (Result) is the default master slide used when the Results slide is inserted (due to insertion of a question slide). It has only partially adapted the Theme design.

The second master slide (Custom Result) is used in the Alliance project for the example results slide.  You can switch the existing Results slide to this master slide if you want. BUT! the big problem is that you’ll miss the Advanced action used for this results slide, and the text content for some text captions.  This is a big problem if you are not familiar with those features.

Group 3: Wired, Earth and League

This is a problem: when you insert a question slide from one of these projects, the companion Results slide will be that custom slide. That means that you will have to find the advanced action and attach it, after having filled in the missing information.

Two possible solutions: either you will replace the custom Results slide by the default Results slide from the project theme. These two screenshots may illustrate the workflow. It is a project using the ‘Cement and Steel’ theme packaged with Captivate.  A T/F question slide was inserted from the QSP ‘Earth’, which resulted also in the Results slide of ‘Earth’, and you can see the result here (missing Text, advanced action). You see the results slide at the back (with part of the missing fields in the scratch area), the Filmstrip and the Properties panel of the results slide. You see that the Results slide belongs to the ‘Earth’ theme:

To replace the Results slide by the one belonging to the theme ‘Cement and Steel’, use the dropdown list (showing Earth) to switch, and you’ll get only one possible master slide: the Results Master slide of ‘Cement and Steel.’ Select that master slide, and you’ll get all the fields back, no advanced action needed, although the design may need some editing.

Post a comment, if you want to learn how to recover the advanced actions for the custom results slides in groups 2 and 3.

Intro

If you choose to set up a responsive project with Fluid Boxes workflow, it is compulsory that you leave the layout to be monitored by Fluid Boxes control as primary. Only for specific situations Fluid Boxes should be overridden by using Position properties. It is similar to the use of Static fluid boxes: their use should also be limited as much as possible or you lose most of the fluidity which is typical for Fluid Boxes.  Besides object stacking, one of the excluded items in a normal fluid box is Interactive video. This blog tries to explain best practice for such a slide, which will not have any fluid boxes. 

Position Properties panel can also be used for objects which are unlocked from any fluid box. 

Interactive video slide

Recommendation: use the Blank master slide to insert an interactive video. That is the case for the example screenshots. The video was taken by night, hence very dark. For that reason I changed the background color of the Blank master slide to black instead of the default white. That way it could blend more easily with the video if it is not filling the slide (setup 1). This has consequences for the overlay slides as you'll see later.

In a normal fluid box you cannot have slide video.  Similar to bitmap images it is very important that the width/height ratio is maintained whatever the browser resolution on the device. That is where Position Properties are important. Two possible setups, to have the video adapting to any browser resolutions will be described.. 

The images are for a video in 4:3 format. The desktop resolution is 1024x627 as you can see in this screenshot. The width of the video is 1024, which means that part of the height (765) is outside. 

I turned on the feature ‘Preview Height’ under the Style tab, which results in the yellow surrounding box and the indication of the device size.  When the resolution changes, there are two ways to keep an acceptable view, while not distorting the video. The setup is realized using the Position Properties panel. If you don't see that panel, turn it on using the Window menu.

Setup 1: Width = 100%, Height = Auto

Setup 2: Width = Auto, Height = 100%

This will result in cropping the video as you can see in the setup and the screenshot of the same iPad situation as in the first setup:

The choice between both setups  depends on the video and whether you need to preserve it to be fully visible or not. For the second setup, if you want to keep another part than the central part, you can add specific setting for the X and Y position of the video, instead of using the center horizontally option.

How do you treat the overlay slides? They need to be created individually, should you use a master slide with or without fluid boxes? Read on.

Content overlay slides

After a lot of exploration, I detected that you get the best result when creating Overlay slides without using Fluid Boxes as well. For the layout, use a similar approach as you used for the video with the Position Properties.  Using Fluid boxes could mess up the slides when they appear in the interactive video. Here is a screenshot of such an overlay slide, when using Setup 1 (Width set to 100%):

This screenshots shows the same overlay slide for setup 2:

Knowledge Check  Overlay slides

Similar use cases

Background images for slides or master slides can be treated the same way. 

Position properties panel can also be useful when taking out objects from a fluid box, to attach it to the one of the slide edges, or to another item. A company logo is a typical example. 

Those use cases have been treated in many videos, but I never found one about the workflow for an interactive video. since you have to deal with the overlay slides as well, suspected this could be a useful blog.

Using SVGs instead of bitmap images in or out of fluid boxes in a responsive project can lead to weird situations. Stuff for another blog.

The example project is not provided. If you want to play with it, contact me by mail or through my website. It is just a trial and error project, not an example of a nice interactive video.

Intro

• Warrning;  Switch to Destination theme
• Embed QSP slide
  

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

Master slides – Tips

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

QSP MasterSlides

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

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

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

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

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

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

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

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

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

Conclusion

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

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

Intro

The second post explored in depth the Object Style Manager, for creation and management of Object Styles.

In this last article the focus is on Responsive projects: tips and tricks to keep in mind for Object Styles in a responsive theme. Since CP2017 Captivate offers two workflows for responsive projects: first is using Fluid Boxes, second older using Breakpoint Views. Tips will be specific for each of those workflows. If you want to re-read the advantages/limitations of both workflows, may I recommend reading this post. I also mention the workflow of  Rescalable HTML project as alternative for responsive projects.

Fluid Boxes project

Objects not allowed in normal Fluid Boxes

What are the limitations of real fluid boxes? Many objects cannot be used. For the Object styles, that means you don’t have to bother about styling those objects. They all are in the category of the Standard objects:

• Rollovers are not possible in any fluid box (not even in a static fluid box): Rollover Area, Rollover Slidelet, Slidelet.
  
  
• Zoom object cannot be used for the same stacking rule: Zoom Source and Zoom Destination

Font size in Fluid Boxes

No need to bother about the other browser resolutions. After publishing fonts will decrease in size smoothly until the minimum font size is reached. At that moment the famous ‘icon’ will appear to indicating text doesn’t fit in the available text container (shape or caption). Just one tip: set the minimum font size to 10p if you expect to have learners on small browser resolutions.

Breakpoints

Objects not allowed in Breakpoints

Font size in Breakpoints

It is no secret that the Adobe team is promoting the Fluid Boxes workflow over the Breakpoints (which mean more work but offer more control to the developer). For that reason, there are no real Breakpoint views themes packaged with Captivate 11 (CP2019) anymore. A responsive project will always start with a Fluid Boxes, where you can use a packaged or custom theme. When switching to Breakpoints that theme loses all fluid boxes, but the object styles for fonts are not changed: all breakpoint views keep the same font size which is the maximum font size set up for Desktop (or higher Custom size) in the Fluid Boxes.

This is a situation where I use the Object Style Manager to start with the tedious work, eventually to be edited later on while designing the master slides. The OSM will now have a dropdown list for the activated Breakpoints, whenever font size is needed. That is the case for the Captions and Shapes under Standard Objects and for most of the Quizzing Objects. Of course, you don’t have to bother about Captions if you only use shapes and vice versa. Look at this screenshot, for the Title shape, common style in most themes:

When you check the font size for the 4 Breakpoints below the Desktop, you’ll see that the size is fixed. You need to decrease the size gradually. Minimum font size is 10pt. It is a bit guessing at the start to find a good distribution between the maximum and that minimum font size (which is for Mobile Portrait). My workflow:

• I look for the smallest used font size on Desktop, that will have to be 10pt for the Mobile Portrait.
  
  
• Once you have chosen Mobile Portrait in the dropdown list, that resolution will remain for the other styles until you change again. Edit all mobile font sizes at once, related to that smallest size.
  
  
• Landscape Tablet doesn’t have to be much smaller than Desktop, unless you use a really big resolution for the desktop breakpoint. So I’ll set up all the font sizes for that breakpoint.
  
  
• etc.

Here is a check list of the objects I usually edit. Know that I never use captions, only shapes as text containers. As for the buttons, only shapes and transparent buttons (compulsory for quiz slides) are used.  They appear in the same sequence as in the OSM.

• Buttons: I edit the style(s) for the Transparent button and for the Quiz button here (both will also appear for Buttons in the Quizzing category)
• Text Entry Box: edit only one style which I set as default style.
• Text Entry Box button:  switch to Transparent button whose default style has already been edited
• Smart Shape: for use as text container.
• Title: often start with 16p for the lowest breakpoint
• Subtitle: often start with 14p for the lowest breakpoint
• Success/Failure/Hint Shape: all need same font sizes. Beware some included themes use same style (Success), you’ll want different styles but with same font size in breakpoints.
• Quizzing Partial Correct Shape: all other shapes use a default style which has been edited under the Standard objects.
• Quizzing Progress indicator
• Quizzing Review Area: is only used on the score slide to store the text about passing/failing
• Short Answer

IMPORTANT:  Do not forget to save the theme when you have finished. Indicate clearly that it is a Breakpoint Views theme. That way you will be able to apply the theme when you have converted another project to a Breakpoint views workflow. If you change the design a lot throughout , it may be worthwhile to create a Blank project with edited font sizes for Breakpoint Views projects.

If you do use Breakpoint views because you have learners using a lot of devices and want to have a simple look for the smallest screens instead of having the same layout fluidized, please log feature requests. It should be possible to choose which workflow to prefer when creating a responsive project: Breakpoints or Fluid Boxes. Fluid Boxes should not be imposed by default  as is the case at this moment in CP2019.

Intro

One of the type of objects that is indicated by the tracker as not compatible with HTML output are rollovers: rollover caption, rollover image, rollover slidelet, rollover shape. However if you ignore that warning for a non-responsive project, the rolloverrs will work fine when used with a mouse on a desktop or laptop screen (with the exception or the slidelet, which you should avoid at all times). Its functionality will not work on a mobile device, even not when using a stylus. But the 'mouse' users have that functionality.

However when you create a responsive project using Fluid Boxes, the options for inserting a rollover are greyed out. There is no way to add them. Is there a workaround to have rollovers for desktop/laptop users? That question appears once in a while in forums or social medai. In this post I will talk about my tentavies to mimick a rollover..

Example Movie

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

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

First Mimick: Hint Messages

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

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

There are some problems with this solution:

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

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

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

Second Mimick: Rollover State

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

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

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

Shared Action for Red buttons

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

Goal

Today this question appeared on the forums:  "Easy way to give better feedback in Fluid boxes in the Quiz"

So for the second time in a couple of days a blog post based on such a question. If you missed my workflow to tweak Feedback messages for Drag&Drop, here is the link.

That question is related with a blog post I have been writing about the setup of Fluid Boxes in Quizzing Master slides. If you have read that post, it explained that all feedback messages on those master slides are stacked on top of each other, and for that reason that Fluid Box needed to be converted to a Static Fluid Box. I didn't mention in that post the workflow I am using to create individual feedback messages on the quiz slides which is the purpose of this short article. You can see it as a add-on for the article about fluid boxes in Quizzing master slides, and maybe also show some features of that static Fluid Box, which are not very well documented but which I discovered when trying to find the easiest workflow.

Workflow

Before starting the work flow described below, check the quizzing master slide. Make sure the used styles for the messages are correct and that all the message containers have the same size and are aligned. For the packaged themes that is not always the case.

You have to know that it is NOT necessary to unlock an object from a static fluid box before moving it! That is only the case for the normal, non-static fluid boxes. In static fluid boxes the objects are not glued to the fluid box in the same level. You can even move them out of the fluid box.

Remember: if you screw up something when trying out the workflow, you can always return to the normal situation by clicking the button 'Reset Master Slide' in the Properties panel of the slide.

Step 1

Select the top message. In the default stacking order it will be the Success message. Edit the text. If you are seeing the text of the other images below, check the opacity of the fill, and increase it. 
After editing keep the message selected and move it out of the way. I mostly use the shortcut key CTRL-UP in this case. With each use of that shortcut the message will move up 16px (which is the default size in the grid). Be careful: the message will be over the fluid box containing the answer area. It will not snap to that fluid box, but you'll not be able to select it anymore. That doesn't matter.

In the used theme shape for this message had an Opacity = 0. I changed it to 80% to be able to read and edit the text. No need to  reset the style, will be done in the last step.

Step 2

Edit the next message, in default setting it will be the Incorrect message. 

Step....

If you have more messages, move the second message up, edit the third etc..

Last Step

Pretty easy: reset the master slide as shown in the first screenshot.

Conclusion

It remain a cumbersome workflow, but at least you don't have to unlock from the fluid box as many tell, nor getting them back into the fluid box. If you looked at the thread you see those unnecessary steps mentioned by the Adobe chat and another user. Probably misunderstanding the differences between static and normal fluid boxes. It is still a new workflow, Fluid Boxes, and really quite different from designing a non-responsive project or even a responsive project with Breakpoints.

Intro

Overview Workflows 

1. Scalable Projects: you can publish a blank (normal) project to HTML5 with the option 'Scalable HTML Content' activated. 
   This will not result in a real 'responsive' project, because the layout will be the same on all screens. Another word sometimes used for this type of project is 'adaptive'.
   

   
   Advantage of this workflow is that the development time will not increase compared with a project that is meant only for desktop/laptop. It can be a good choice for courses that will rarely be viewed on smartphones, and you don't mind to have only landscape mode. I just wanted to mention this easy workflow, but the rest of this post has its focus on the two other workflows.
   
   
2. Responsive Project with Fluid Boxes which is the work flow introduced with CP2017. I see the result as a solution between the Scalable HTML projects (same layout on all screens) and a  esponsive project developed with Breakpoint views. Such a full responsive project can  have different layouts for diferent screen sizes corresponding with the Breakpoints. When using Fluid boxes the layout will be rearranged by the application depending on the screen size and the settings.  Some items can be left out for small screens but you will not have full control over the design for each size. Moreover there are some limitations which I will explain later on (with possible workarounds and tips). Developing time for this type of project will be in between time needed for scalable project and for a  Breakpoint Views project. Fluid boxes have a great way to make font size changing in a 'fluid' way.
   
   
3. Responsive Project with Breakpoint Views is available since version 8. It is no longer the default approachn when starting a responsive project.  You have to switch to this workflow from the Project menu.
   

   
   This workflow allows fully responsive projects: you have control over the design for a maximum of 5 resolutions. You can not only leave out items, but also replace them by other items, like replacing an animation or video by a static image or even an icon to cope with smaller screens. Control over the design means control over size and position of each item in each breakpoint. However developing time for such a fully responsive project will be much larger.

Example Movies

• Titlee: not all  images which in the Breakpoint example could be used on the Fluid Boxes version because you cannot stack items. I could have combined the images in a graphical application to have one image for Fluid Boxes, but the different effects and timing didn't have a workaround.
  The images used for the mobile screen (Breakpoint) are different and smaller than for the other breakpoints. Not so for the Fluid Boxes example.
  
  
• Buddies: similar: the ruler cannot be used for Fluid Boxes, at least not when stacked with other images. 
  
  
• Content: different items can be clicked to show more information. For the Breakpoint version that information is stacked and Hide/Show is used. Text and images are combined in a group. For the Fluid Boxes I used the workaround by creating one object with different states. Grouping is not possible here.
  
  
• Comparison: maybe less apparent, but I used an effect on a group (image + shape with text) for the Breakpoint view version, since grouping is not possible for Fluid Boxes I had to use separate effect on the items. 

Breakpoint Views

Comparing setup Theme Breakpoints vs Fluid Boxes

Object Styles

Master Slides

Limitations and workarounds - Fluid boxes

• Grouping of objects is impossible
  That is not only disappointing for management of crowded timelines, but it also means that group effects are impossible. THse group effects can be very useful, look at this article.
  A widespread workflow consists in having different texts, grouped and  stacked in the same location. Based on a click to show one out of the group can be done with a shared action with two commands: first hides the group, second  shows one text. That work flow is impossible in fluid boxes. You'll have to create duplicate advanced actions with a lot more commands.
  Lightboxes are also impossible with fluid boxes. 
  In many cases a workaround is possible by using one multistate object instead of the group. In the movies for which I posted the links, that approach has been used on slides 3 and 4. Compare both movies. A multistate object can also be an alternative for objects appearing staggered on the timeline, but in the same location. Using an On Enter action with the command Delay Next actions can be a workaround (see Autolists).
  
  
• It is not possible to have an object timed for the rest of the project
  This is often used as alternative for objects like toggle shape buttons or a logo on the master slide. Since such a object has a unique ID, it can be controlled, hidden on some slides and shown on other slides. Controlling objects on master slides is not possible because they do not have an ID. You'll need perhaps more master slides when working with Fluid Boxes as workaround.
  
  
• Some types of objects cannot be used: Zoom object, mouse object, highlight box, click box over another object and line object.
  Many users still stick to the the old work flow of putting click boxes over images to create a hotspot. Workaround is to  use a shape filled with the image, a workflow that is available since many years but apparently not well-known.
  For a highlight box: use a shape as well with multistates, one having a thick border and eventually a semi-transparent fill. No workaround however for the outer fill which exists only for a normal highlight box.
  The Line shape is a rebel, often causes issues (only shape that cannot be rotated in Options). You can replace it by a rectangle with a minimum width of 4 px which is the minimum.

Conclusion

Do not misunderstand my post, because it sometimes looks like I don't like Fluid Boxes workflow. It is a great way to create responsive projects in much less time than with Breakpoint views, but you need to be aware of what is possible. I am confident  that some of the present limitations will disappear in future releases. Use your design skills and knowledge to judge if a project is suitable to be developed with Fluid Boxes or if you need Breakpoint Views workflow. 

If you like Fluid Boxes, do not hesitate to enter feature requests for those present limitations that bother you most of all. It will be a big help for the Adobe Captivate team.

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 :)

Intro

Main master slide, Blank and Title master slides

Main Master slide

Blank Master slide 

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

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

• 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?

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