Get rid of Quiz Feedback messages In New Captivate 12.2

Intro

Multiple users asked me how to get rid of the default Success/Failure messages on quiz slides in the New Captivate version. Especially now that it is possible to have the correct answers hidden during Review, I understand this question. Depending on the situation, you do not always want an immediate feedback after each question.

The two-step Submit process which I have described multiple times on my blog remains the same as in previous versions:

  1. Learner clicks the Submit button, a Success/Last Attempt message appears. That message warns to click the slide or press Y to continue
  2. Learner presses Y or clicks the slide and the pause is released, the specified actions on Success, Last attempt will be done.

That situation is for a question slide with one attempt. If there are multiple attempts in case of Failure a Retry message will appear.

All messages in the new version are now in one multistate object. It replaces the individual messages which were in a static fluid box in the previous versions for a responsive project. 

It is impossible to delete that multistate object, there is no option to get rid of all the messages like was possible in previous versions by the setup in this screenshot:

Consequence of such an edit was that the first step of the Submit process automatically was deleted: no pausing after Submit, no need for the warning for the second step. I didn't succeed to achieve this in the New version, which means that you need to warn the learner to click another time. I have tried many workflows without success: changing the label of the Submit button to 'Continue' is only one of my failed attempts. 

Example output

It is a short quiz with 5 questions. I added an audio clip to the first quiz slide to warn about the extra click. All questions have only one attempt, and there is also one attempt on Quiz level. Review (without seeing correct answers) is possible from the Score slide. I did hide the review messages on that slide as well and added an extra slide (with exit button) after it. Like in previous versions it is still a recommendation not to have the score slide as last slide. You can watch the example below (fixed resolution) or the responsive version by clicking this link. Know that the loading time can be long for this version.

Workflow 1 - all quiz slides

This workflow can be used if you do not want any Success/Failure message. In that case it is important to change the settings before inserting the question slides! It cannot be applied to existing question slides.

Step 1: Default labels

  • Open Quiz Preferences, from the Preferences (Edit menu for Windows, Captivate menu for Mac).
  • Go to Default labels
  • Delete the text for the labels you want to hide. In this example I deleted the Success and Last Attempt message:

Step 2: System colors

You are aware of the fact that this version has no longer object styles. Each of the states in the multistate object with the feedback messages has a solid color at 100% Alpha in the default Themes. Color management has not improved, it is guessing which colors have been used. For the Success message it is the Success System color, and for the Failure message it is the Error System color. I didn't spend (waste) time trying to find by trial and error where those colors were used in other situations, but changed the Alpha for those colors to 0% which makes them transparent.

Result of those two steps: you'll not see a Success or a Last Attempt message, but still have to click the slide to proceed. If you have multiple attempts on quiz level, the Retry message will still appear because you didn't edit that message nor the fill of the box. Same for the message when learner clicks the Submit button without choosing an answer.

Workflow 2 - individual quiz slides

This workflow can be used when you don't want to hide the feedback messages for all question slides, or when you want to hide them on existing  slides.

Step 1: Text color

You cannot delete the text in a state, only edit it to create a custom feedback. You can however change the color of the text. So I changed that color to the background color of the question slide. This screenshot is taken on the Score slide, for the state 'Success' of the Review message. You need to do this for all states with messages you want to hide.

Step 2: Fill colors

This is similar to step 2 in the first workflow. For the states to hide set the Alpha of the Fill color to 0%. In the screenshot of Step 1 of this workflow, you see that this has already been done for the Success state of that area. In the last screenshot of Workflow 1 you have seen where you find the Alpha setting in the Color management dialog box.

Help?

I would be very happy if another expert could find a way to:

  • Style the Back/Next Review buttons the same way as all the other quiz buttons. I really miss the object styles. You cannot use Copy/Paste Appearance on buttons of the quiz/score slide. You cannot apply a new style to all the other objects with same type/style as in previous versions.
  • Avoid the second step of the Submit Process.µ
  • Avoid the weird state change of the images on the T//F questions. I know that you cannot disable the Hover state really, but I changed that state to look exactly like the Normal state. Nevertheless that original Hover state appears after submitting the answer.
  • Getting rid of the dimming or text and state change during Review. Light grey on white background is not very comfortable for people with weak eyes.



Edit SVG in Captivate 11.5

Intro

If you have read my first blog about this major update, you will know that the extended functionality of SVG’s for use as buttons is one of my favorites. I didn' t mention that you get some editing features within Captivate. Thisat means that you don’t have to do a roundtripping with Illustrator (or use another vector editing application) if you just want to change some colors. This post is meant for those who are rather new to vector images, and the way paths are used.  Next post will be about roundtripping with Illustrator for more complicated editing.

You may also ignore that the new Assets Panel (wait for an in-depth exploration in the near future) includes a set of ‘icons’ which are SVG’s. The hotspots used in 360 slides are SVG's as well, the editing functionality was added to make customizing their colors possible. All SVG’s in your project end up in a dedicated folder of the project Library.

Remember: SVG used as button is only possible for HTML5 output, not for SWF output

.

Example slide

The example uses only included  assets from the Assets panel, to be found in the Audio and Icons part. All icons have edited colors (not meant as a design example) to illustrate the workflow I will explain in this post (and later on in an interactive video). The biggest SVG in the center of the slide is configured as a button. You can click it as many times as you want, you’ll be able to listen to some of the audio assets. There is no poster image in this example, just the default Play button.



Step-by-step ‘Edit colors’

I will explain this for the Normal state of the big SVG which you clicked in the example slide.

1. Insert SVG and resize

As I explained in the intro, this SVG is one of the Icons in the new Assets panel. Insert it from that panel (name ‘Cover’). You can resize either by using the Options tab of the Properties panel for the SVG, or by dragging a corner with the mouse while keepoing SHIFT pressed to preserve the width-height Ratio. Since this is a vector image, you’ll see that it remains crisp even when enlarged considerably.  The original icon uses a uniform dark grey. I check the option to use it as a button, and uncheck the option to make the whole bounding box clickable (Enable Click in Bounding box). You can see that the bounding box extends above the image. There is an option to ‘Fit to Bounding box’ but it would have distorted the SVG.

Step 2: Edit mode

To enter edit mode for the SVG double click the SVG. You find the tooltip when hovering over the Fill in the Properties panel. Do not use the button ‘Edit SVG’, which would let you choose an editing application on your system, nor the option Edit with Illustrator.

Step 3: Select a ‘path’

A vector image is composed mostly from several paths, which can have a width (may be variable) and/or a Fill. The image I used as example has 3 paths, all closed and with a fill. You select a path by clicking it. Selected path will have a blue surrounding line as you can see in this screenshot:

Step 4: change color

Click the Fill icon in the Properties panel to open the Color dialog box. For this simple demo slide I used the color wheel to select a color. In a normal project I would have used the Theme Colors palette of course. Click OK to confirm the color change. Repeat that workflow to the remaining shapes.

SVG button states

When you convert a SVG to a button, the InBuilt states Rollover and Down are added automatically. You can use the edit workflow described above for each of those states. I added also the Visited state (with a speech bubble) and the custom state ‘Done’ which appears after you have listened to the 5 available audio clips. Here is the Object state panel of the big SVG button:

The Visited state is selected in this screenshot. Look at the Properties panel: you see that the opacity is reduced to 50%. This always applies to the full SVG, but in this case only to this state of course. You see a user variable inserted in the added speech bubble. That bubble has no reduced opacity, it is not part of the original SVG but an added shape£.

More?

Main topic is finished, you may stop reading if you want. But for the curious fans,  the audio clips are attached to a state in a second multistate object, which is a shape to which I added an icon in the Normal state (no audio) and an audio clip with its name to the other states.

The Advanced action triggered by the big SVG buttone:

No need to trigger the Visited state, it appears automatically after the first click on the SVG button.

Theme Colors

Intro

In my previous post I explained the work flow to create a custom Theme Colors palette, starting from an Adobe Color palette (ase). Theme Colors palettes can be applied to any theme, they are stored in the Layouts folder of the Public documents, they are not project specific. This article will show the consequences of applying a new Theme Colors palette to a theme. As you probably know a theme has three principal components: object styles, master slides and skin. 

Moreover Captivate 8.0.1 allows to apply theme colors to a bunch of learning interactions (not to all yet). That is a big improvement, because most of those interactions have their own themes and it was a lot of work in former versions to edit colors in the interactions to match the theme of the project. 


How are Theme colors used?

You can customize one of the existing themes by changing the Theme colors in the first place, then adding objects, changing styles, master slides etc. For a totally new theme you will probably start with the Blank theme. Maybe in a third article I will offer some tips about using Blank theme. In this post I will only talk about the other themes, and the way a new colors palette will interact with them.
In the dropdown list under Select Theme Colors, you'll see on top the category 'Custom Theme Colors' and to the bottom 'Pretest Theme Colors'. 


For each included theme you'll find two Theme color palettes in Captivate 8: one with the same name as the theme (in 'Preset Theme Colors'), and one with that name followed by Shade (in 'Custom Theme Colors'). Example: Flat color palette, and Flat Shade color palette. Only the Blank theme is an exception. 

When you open the Theme Colors window, and choose Customize for a palette, you'll see 10 colors. A name has been given to each color, but those names are misleading, as I will explain. 

I prefer to label them color 1-10. Why? What do you expect when seeing a name like 'Title', 'Sub-Title', 'Slide BG', 'Fill', Stroke? I naively (or is it my engineer's mind) supposed that the first color (Title) would be applied to the Titles on the Master slides, the second color (Sub-Title) to the subtitles on master slides, Fill and Stroke to shapes or other objects, Slide BG to the background of the slides (project background). But when I explored the themes, included with Captivate, I discovered that this is almost never the case :). If you download this file, you'll see two tables: one for text styles and one for the three states of Shapes. Some conclusions:
  1. Font color of the default Title Smart Shape Style which is used on the Master slides is the first color 'Title' in themes Flat, Green, Nimble, White and Woodgrain. Blackboard uses Text 2 (Color 4), Clean Blue, Clouds and Vivid use Skin 2 (Color 9), Half Tone uses Stroke (Color 6). 

  2. Font color of the default Sub-Title Smart Shape Style, also used on Master slides is never color 2 'Sub-Title' except for the Flat theme. All other themes use another color.

  3. Font color of Caption text uses quite a myriad of colors: Stroke (color 6), Text 1 (color 3), Sub-Title, Sub-Title tint 5 (color 2 - see tints later on), Title (color 1), Skin 2 (color 9).

  4. Same for the three font styles on Question slides: Title, Question and Answer.

The default Shape style in the Object Style Manager has three states (Normal, Down and Rollover) because every shape can be used as a button. In the second table you'll see Stroke color, Font color, Fill color (Solid or Gradient, and Alpha) for the three states. Only the Font color seems to remain the same for each state - not always a good choice (sometimes unreadable because of change in fill). 

Why did I create those tables? If you change the theme colors, some of the object styles, master slides and skin will change based on the new colors and on setup of the colors in the original palette. This means that the same custom color palette will create a different look, depending on the theme for which it is used.  Not all object styles are using theme colors however, some will not change color: this is the case for the new Success/Failure/Hint smart shapes that you can use to replace the captions for interactive objects and question slides (Preferences). Of course, the old Success/Failure/Hint captions cannot apply theme colors neither, but for the shapes this is possible without having to create custom captions in a graphics editor. 

Example

I created the color palette  'Lilybiri' based on my logo (see previous post). Browse this Picture Gallery. You'll see one slide, with that palette applied to the White, Vivid, Flat and Halftone Themes. Watch the colors of the master slides, Title, Subtitle, Caption and the 'rollover' state of an inserted shape button. You see that the result is totally different.

If you want to change just the theme colors for an existing theme you have to check the master slides and the object styles. I would have preferred to have more consistency in the use of the theme colors in the themes. Especially in this version, because to create a custom theme you need to start from an existing theme, certainly for responsive projects. 

Tints 

In the first article I already explained that Captivate will create 5 tints for each of the theme colors, besides the base colors of the palette. Some of those tints are used in the existing themes: on master slides, in object styles and in the skin.
Contrary to the base theme colors, which I indicate now with codes 1.0, 2.0 .... 10.0, you do not have any control over the way those tints are created. I use code 1.1, 1.2 ... 1.5 for the tints based on color 1.0 in my code system. If you apply a custom theme colors palette, Captivate will create those tints, but my curious mind wondered "HOW"? Because the term 'tint' was used, I suspected that looking at the HSB code would be a better idea than the provided Hexadecimal or RGB codes. HSB is used in a lot of Adobe applications to indicate Hue, Saturation and Brightness. I have now a complete table with HSB-codes for all provided theme color palettes. I didn't include it here, it was meant to discover the logic of the tints creation. And there is some consistency, my conclusions (see also the image below):
  1. For gray colors (like 4D4D4D, E6E6E6...) you'll see that Hue and Saturation remain equal to 0 and only the Brightness will decrease from tint 1 to 5.  Same of course for Black (000000) and White (FFFFFF).

  2. For normal colors the Hue remains constant (there are small variations) for all tints.

  3. First tints (1-3 or 1-4) keep high Brightness but start with lower Saturation that will increase

  4. Last tints (4-5 or 5) keep Saturation of previous tints but decrease the Brightness

Depending on the default Theme you are using, the tints can be slightly different, but not in the same way as what I showed about the style colors in the previous point.


Learning Interactions - Theme Colors

Some learning interactions do have their proper themes. Now it is possible to apply the colors of the active Theme Colors palette to the interactions as well. However, they are not applied automatically, you need to use the Custom button. There are two possible work flows:

For the (older) interactions Accordion, Tabs, Process Circle, Pyramid Stack, Timeline, Circle Matrix, Pyramid Matrix, Glossary, Word Search and Certificate

  • The interaction themes are at the left, with default theme selected; use the Custom button at the bottom

  • Default Colors are activated, and you could customize them using the Customize button, but then you'll see the old cold dialog box, which has no link to your theme colors

  • Click on Theme colors: the preview will be changed immediately, and the Customize button now appears under Theme Colors

  • When using this customize button, you'll see the Theme colors with their tints when changing a color.

For the new games Catch AlphaNum, Jeopardy, Memory and Millionaire

  • After setting up the game, go to the second screen (mostly with an red arrow at bottom right) to Customize

  • Look for the button 'Color settings': in some games it is at the top, in other (like in the screenshot) at the bottom

  • Same work flow there: if you click on Theme colors the present color palette will be applied

  • Customize becomes available under Theme colors instead of Default colors and will show you the Theme colors palette with all the tints.

The other interactions do not yet offer the possibility to use theme colors.

Tips

  • Be careful when creating a custom color palette to apply to an existing theme: look at the two default palettes provided for that theme and try to assign bright colors to the same color number as those palettes, same for darker colors. Maybe the table I offered with the use of the theme colors in all themes can help.
     
  • Check the object styles after applying the new color palette, the easiest way is in the Object Style Manager; do not forget that shapes have colors for the three states

  • After checking the object styles, check the master slides: objects and background will have changed colors as well. If you use shapes for Success/Failure/Hint messages, check their style because they will not be changed to the new color palette.

  • I didn't mention the skin, but playbar as well as TOC settings will also get color changes when applying a new color palette, check them as well

  • When using learning interactions, try to change to Theme Colors if they offer that possibility, and double-check the result that you can edit with the Customize button.