Roundtripping with Adobe Photoshop in 2020

Meant for?

This blog is not meant for long-time users of Photoshop (and Captivate)!  I am addressing Captivate developers who are collaborating with graphics designers using Photoshop. Roundtripping with Photoshop is a long existing feature since and (at least to me) one of the best collaborations with CC applications.  I have been using and teaching Photoshop since decades and Captivate since 2005.

Collaboration ibecomes easier with good understanding. This blog aims at improving understanding between the Captivate developer and her/his team mate - Photoshop expert.  You'll start with typical Photoshop terminology, followedby the two import workflows to import source Photoshop files into . Watching some typical examples can help you to make suggestions to your PS expert. 

Goal:  make your Captivate use of their creative work more agreeable, and save time.

Photoshop terminology

Layers

As  Captivate developer you are used to layer, as they appear in the Timeline panel (doubles as Layers panel).  You probably use those layers for selection or for editing the stacking order (z-order) . You may also have locked layers and/or made them invisible on the stage for easy editing if you work with very crowded slides. Each layer in a cptx file can have only one object (in a cpvc-project it is bit different). Have a look at this screenshot of a Layers panel in Photoshop

A layer in Photoshop is always static (not linked to a timeline) but can have multiple objects on a layer (not possible in Captivate cptx files, where each layer is an object timeline as well). They have some added functionality compared with Captivate likes:

  • Mask on a layer can limit a region for applying editing or keeping it from editing.
  • The opacity of a layer can be changed (or part of it if masked).
  • Photoshop can have special type of layers interacting with other layers (you’ll see an example below, where Adjustment layers are used).
  • The way pixels on layers interact can be changed by blending modes. I will not expand on that powerful possibility.

Similar to Captivate, a layer can be locked and made invisible. In the screenshot layer ‘Failure3Trans is visible. Layers Failure1 and Failure2 are locked.

The active layer – like in Captivate – is the one you are busy editing. Grouping of layers is also possible. In the screenshot you see two groups of layers and one individual layer at the bottom.

Flattening

The default meaning in Photoshop is that all layers will be merged into one image (layer).

However in the Captivate dialog box for importing a source Photoshop file (see below) the meaning is slightly different. Only the ‘checked’ layers will be imported as one merged image. You will see a typical example in the last section.

Layer comps

A Photoshop document can have a multitude of layers of all kinds. Not all of them are content layers as mentioned before. This can make the decision on which layers to import for a certain goal in Captivate very difficult. For an easier, workflow the Photoshop expert can define ‘layer comps’. See them as a filter: when you choose a comp, some layers will be made visible and checked off, while the other layers remain invisible. Using a comp you’ll import exactly the right layers just by choosing a ‘comp’ name. You will see examples in the third section of this blog. Very useful!

Import Photoshop Source Document

Default way to import graphic assets is by using the Media button on the Big Button Bar. That is possible both for  (bitmap) Image and SVG. You will not find an option under that button to import a PSD-file (PSD is the extension of a native Photoshop file).  You need to use two possible workflows:

1. File, Import, Photoshop file (Shift-Alt-P)

Using this method will import both to the slide and the Project Library. Similar to importing images with Media button, on the stage it will be centered automatically both vertically and horizontally. In the Library you will see a new folder under the root. The folder has the same name as the Photoshop file, and includes what is imported.

In the screenshot you see the Library with 3 imported Photoshop files: FailureSuccess – the file for which the layer panel was shown in the previous screenshot; CompExampleCP which will be shown as example for use of comps; TemplateFlatten which you’ll discover as an example for flattening and non-flattening in the example section.

2. Import button in Library

Using this workflow only export to the library, not to the stage. In the screenshot the Import button is indicated with a red rounded rectangle.

The result for the Library is the same as with the first workflow. New folders will be created. The level below the folders are all PNG images. You can drag those PNG-images to any slide and location.

Which of the two workflows is better, depends on the situation. Have a look at the example section, where I will indicate which workflow may be better for each example. Photoshop files can be designed for multiple purposes to be used in Captivate.

Examples

1. Photoshop file as ‘Library’

The first screenshot (Terminology, Layersà with the Layers panel of ‘SuccessFailure’ is a typical example of what I mean by ‘Library’. Several images, each on their layer, are in one Photoshop file. In this example they have the same style. The Captivate developer can choose which images she/he likes best for the active project. Some of the images have a version with transparent, and another with white background (multiple background are possible of course).

Another example which I saw several times with clients: Photoshop was used as layout tool, each of the slides were on a layer in Photoshop. That may be considered also as a PSD file of this ‘Library’ type. When you open the Import Dialog box, with one of the two workflows, it will look like the screenshot to the right:

  • There are no comps, you leave it to ‘Simple’ (blue marker)
  • There is only one option in the Dropdown list:’ Last Document state’. It means the state when the Photoshop document was closed in Photoshop.
  • I recommend to check the option to scale (green), unless you have the images created exactly at the wanted size for use in Captivate (which is the best practice).
  • You will see all the layers of the Photoshop document. You can check the layers you need to import.
  • If you have multiple layers selected, you probably will not want them to merge to one image, since the images are choices, not part of a global image (red rectangle: Layers is the default setting).
  • About the workflow: if you want more than one layer Workflow 2 (Import button) is recommended here. If you choose Workflow 1 (file menu) all layers will be converted to PNG images AND inserted all in the center of the slide. Not what you want. Use workflow 1 only when you import one layer.

2. Flattening or not?

The screenshot shows the Layers panel (Photoshop) of the file ‘TemplateFlatten” which you also could see in the Library screenshot.

This file has 3 image layers which were extracted from 1 bitmap image. Each of them is exactly on the location as in the original bitmap image. I added a ‘template’ layer which can eventually be imported and used to restore the original combined image. But in most cases that will not be necessary.

In this case I recommend Workflow 1, whether you want to import the individual layers as PNGs (Layers in the Import dialog box) or the combined image by checking the option ‘Flattened’.

Reason: when the image are imported to the stage, they will in the correct (relative) location. When you import them only to the Library, you’ll need to use the Template to position the individual PNGs in the correct location.

Look back at the Library panel (Captivate) in the section ‘Import’: the four layers were imported as layers, and in a second process the flattened image was imported as well. That flattened image will be posted automatically in the correct library folder, and gets a generic name (FlatImage1) which you can edit of course.

3 Use of Comps

In the second example I used the same image as here for the comps example. In that example 2, each of the images has a text on the head scarf. The color of the images is gold. I wanted to make this file more flexible in two ways:

  • To have another ‘hue’ for the images, so that it better fits with a project color scheme.
  • To be used with the Texts in multiple languages.

That has led to a lot more layers, since text had to be on a separate layer (make it also editable), and to change the hue I used Adjustment layers which are a non-destructive way to change the ‘look’ of the layers below. In the screenshot below you see text layers in two languages (English and Dutch) and 3 adjustment layers on top. To keep it manageable for this blog, I kept only the global image, not the individual ones.  Next to the layers panel you see the Layer Comps panel. Each of those comps defines a situation. Presently ‘DutchSepia’ is active and reflected in the Layers panel: the visible layers (eye icon) are needed for this look, with Dutch text on the scarfs and a Sepia adjustment layers.


Captivate makes it really easy to import the wanted ‘comp’. Kudos to the team! In most instances you will want to import one comp, and it is possible with two different setups of the Import Dialog box.

In the left screenshot, next to ‘Photoshop Layer Comps’ the option ‘ Multiple’ is checked. If the comps were labeled well, you can easily select the wanted comp to import. It will be imported always as Flattened. The options for ‘Import as:’ are dimmed.

The result of comps import is visible in the Project Library screenshot (Import section). You see that I repeated the import process 4 times, because 4 comps are available, each being a merged image from the layers visible in that comp filter.

Second possibility is to keep the Single radiobutton checked next to ‘Photoshop Layer comps’. Have a look at the screenshot to the right which shows that situation.

Open the dropdown list under ‘Last Document State’ and you will see all the available comps.

Advantage of this second workflow is that you can see which Photoshop layers are selected for import. You could eventually edit those selections, but be careful. You can import layers in this case as well, but I would not recommend that if adjustment layers are used. They cannot be imported into Captivate, only the real images.

Since you will mostly import only one comp the choice for the Import workflow is free, whether with File, Import or with the Import button in the Library.

Updating

Not mentioned so far, because you’ll find this in all blogs and video about Photoshop roundtripping.  The ‘green’ checkmark next to the Photoshop folder, which indicates that the original PSD-file is in synch with Captivate. If your Photoshop expert updates that file in any way: adding layers, editing content on one or more layers, correcting typos in the text layers this will be reflected in Captivate by a color change in that round checkmark.  Clicking the red checkmark will allow you to update and have the changes automatically be imported and applied in Captivate.


Images in a Matching question?

Intro

Not so long ago I posted a blog about replacing textual answers in a Multiple Choice Question by images. That worked quite well, by rearranging the embedded objects on the quizzing master slide, and on the quiz slides themselves.

Last week a similar question appeared here in the portal, about using Images in Matching questions. I posted an answer without having tested it out, because Matching questions are rather different. Today I found some time to double-check my answer, and want to post about the possible problems. You’ll get – as usual – an example project as result of the exploration.

Example

This published project uses the packaged ‘City Vibes’ theme (with some editing of course). You will see a Quiz with three Matching questions:
  1. Default Matching Type question: images are in the first column.
  2. Default Matching Type question: images are in the second column.
  3. Drag&Drop custom question slide as alternative.

There is one attempt on question level, and 3 attempts on quiz level. Review Quiz is possible after passing the quiz or having exhausted the attempts. You can use a scalable version using this link, or watch the embedded version below:



Workflow for Matching Type with Images

Similar to the MCQ workflow when using images, part can be done on the Quizzing master slide, part on the quiz slides themselves.

Editing Master slide

You need to make both column areas bigger, which means moving and reducing the space for other objects.  I also needed to create a duplicate Master slide for the second quiz slide, which needed a wider second column, whereas the first master slide has a wider first column. To emphasize the size of the two column areas I have added a dashed stroke.


Editing Quiz slide

It is not possible to re-arrange the individual answer size on the master slide, that has to be done on the quiz slides. Rearranging the answers in the first or the second column can be seen in these screenshots.  The first master slide (small second column) was applied correctly on a quiz slide, for the second one (small first column) I had to correct the size again on the quiz slides. This may be a bug.

Problems – limitations

For Matching type slides it is impossible to take out the numbering, which was possible for a MCQ slide.

You should not activate the Shuffle option, because that will not work if images are present.

Changing the vertical alignment for the numbering leads to problems. Often the numbering just gets lost.

As you may have experienced, it is not always easy to drag the item to the correct one in the second column, especially for the second slide.

Since the added images are custom objects, they are below the embedded objects on the quiz slides (z-order). That makes exact moving difficult, and editing the colors of the SVGs (second slide) as well. Some tips:

  • Do not try to select the custom objects on the stage, select them in the Timeline.
  • To resize a custom object, do not try to use the handles but use the Options tab of the object.
  • To move a custom object use the shortcut keys (with arrows). SHIFT-arrow moves 10px, CTRL-arrow 16px
  • To edit the colors of the SVGs move them to the scratch area. It will be very difficult to double-click while they are on stage. Of course you can use bitmap images.


Editing Ready-to-go slides (Quick Start Projects) - part 2: Interactions

Intro

Many users wanting to take advantage of the Ready-to-go slides available through the Assets panel in 11.5, are blocked when trying to customize those slides. In a previous article I offered a step-by-step workflow to find texts or images you want to replace by your text or images. That was not so hard, and you learned to use several panels (Timeline, Master Slide, Object States, Library).

For Interactions the situation is more complicated. You will not find a complete 'How-to' in this blog. Some interactions are rather easy to understand and customize, other interactions however need an in-depth knowledge of Advanced actions and variables. Those slides never use Shared actions, which would be easily found in the Project Library. This blog will try to help you identify the components (actions) of the interactions, how to 'read' them and tips for customizing. The workflow will be explained using a Knowledge Check slide from the project 'Alliance'. The interaction can be told to be of intermediate level. Understanding this workflow will allow you to customize easy and intermediate level interactions. For more complicated interactions this may not be sufficient. Maybe find help from someone experienced in Advanced actions.

Step 1: Find Interaction components

On the slide with the Interaction to identify, open the Advanced Interaction panel from the Project menu or with the shortcut key F9. The slide will be selected in that panel and with the default setup you will see all the actions in that slide, and the events to which they are attached. Here is an example:
The selected slide is slide 26, labeled Knowledge Check in the Quick Start Project 'Alliance'. You see in the table that the On Enter slide event has no action attached, the field 'On Success' on the slide line mentions 'No Action'. This means that the interaction is only created using Success events of interactive objects, which you can also find in this panel.

The level below slide level shows all interactive objects and their Success actions (when clicked) in the 'On Success' column. In this case 5 Smartshapes have been defined with the option 'Use as button' and they all trigger an Advanced action. From the labeling of the objects and the actions you can suspect that 4 of those advanced actions are similar (on shapes KC1 - KC4) and one is unique (on the unlabeled Smartshape). When you select one of the lines associated with an interactive object, the object will be selected on the slide. 

Step 2: "Read" actions (components of interaction)

Let us continue with the same slide from the Alliance project. Select the object KC_1. Its Properties panel shows up, switch to the Actions tab. Open the Advanced action 'KnowledgeCheck_Select1' by clicking the Browser icon. It shows a list with 5 lines, which I will label as 'commands':

The first command line 'Assign.... true': gives a value 'true' to a user variable 'sales_knowledgeCheck_correct'. The name of this variable indicates that it needs to be true for a correct answer, 'false' for a wrong answer. You can check this by reading one of the actions on the three other objects (KC_2...KC_4), where you will read that the given value is 'false'. 

The other command lines are used to change states for the objects, to indicate which object has been selected (active). You can find more explanations about multi-state objects in the first part which I mentioned in the intro.

Open now the unique action 'KnowledgeCheck', linked to the unnamed Smartshape_337. In the Timeline you can see that it is the Submit shape button.  In the Advanced Actions dialog box you see that this is 'conditional' (marked in red). In that case "reading' will be easier if you switch to the Preview window, which you do with the arrow button top right, which I marked with a green box:

In the Preview window you see that the state of two multistate objects will be changed depending on the value of the user variable sales_knowledgeCheck_correct. Identifying those multistate objects allow you to edit the states as explained in the first blog.

Step 3: Customizing examples/tips

In the example the first answer is deemed to be correct.  You can move the shape buttons KC1-KC4 around, to put the correct answer in another location. No problem, the interaction will continue to work as expected.

Less answers

You can safely delete one of the wrong answers in this particular use case. That may not be the case for all interactions. Here however the final action (Submit button) is in no way checking or taking into account the number of answers. You only need at least one correct and one wrong answers.

More answers

If you want an extra answer, you'll have to decrease the size of the answer shapes KC1-KC4. For the 5th answer you can duplicate one of the answers with the right-click menu or the shortcut key CTRL-D (Cmnd-D on Mac). Use the Align options (or toolbar) in the right-click menu to put everything in place. The name of the duplicate answer will probably start with KC_ as well, but not necessarily be 'KC_5'. You don't need to edit the name but I did so (Properties panel) just to clarify. That duplicate answer will have the same states as the source answer. You can check using the Object State panel.

It is however necessary:

  1. To edit the existing action for the four older answers, because the state change for the new answer needs to be added.
  2. To create and edit a duplicate advanced action for this new answer.

Editing actions KnowledgeCheck_Select1....

Open one of those actions using the Browser icon in the Actions tab (see Step 2 for a screenshot).

The first command line is fine. The Change State lines set the state for the selected answer to Active, the other answers get state Normal. For all those actions a sixth command is necessary to set the state of the new answer to Normal. Steps for KnowledgeCheck_Select1 are indicated in the screenshot below and you'll find the numbers in the explanation:

  1. Select the last command line
  2. Use the Copy button
  3. Move to the next empty command line
  4. Use the Paste button
  5. Double-click the empty third field and type KC: only the items having KC in their name will appear. Remember: I named the new answer 'KC_5'
  6. Choose 'KC_5'
  7. Click the down arrow in the next field.
  8. Choose the state 'Normal'.
  9. Click the button 'Update action' at the bottom and the action is complete now, including the 5th answer.
  10. To save time editing the three remaining actions, use the Copy button again on the last command line which sets the state to Normal for the last answer KC_5..

Switch to the action KnowledgeCheck_Select2 using the top right dropdown list:

Go immediately to the first empty command line and use Paste (step 4), and save the action (step 9)
Repeat step 10 and do the same for KnowledgeCheck_Select3 and KnowledgeCheck_Select4.
Do not close the Advanced Actions dialog box, you still need a fifth action.

Creation of KnowledgeCheck_Select5

The new action will be created as a duplicate of KnowledgeCheck_Select4. Select that action in the Advanced actions dialog box, follow the steps in the screenshot below

  1. Duplicate the action
  2. Edit the name to KnowledgeCheck_Select5
  3. Set the state of KC_4 to Normal instead of Active
  4. Set the state of KC_5 to Active instead of Normal
  5. Save the action and close the dialog box.

You still need to attach this new action to the answer KC_5 and you are ready for testing:

Tip: if you want to explore the Advanced Actions dialog box, you can read this blog.

More?

This is only one example of customizing a Ready-to-go slide. Some interactions are more complicated in those projects, some are easier. If you are in for a challenge, look for the Flipcard interactions, Glossary interaction or some Click/Reveal interactions. 

Do not hesitate to post questions, comments if you are stuck. If possible I will try to help.

Editing Ready-to-go slides (Quick Start Projects) - part 1: Text and Images

Intro

The Quick Start Projects (QSP) available under the Assets button in Captivate 11.5 are popular. It is understandable that new (and other) users look for inspiration and to save some time by using existing design layouts and interactions.

In the past I already posted some articles with tips about inserting Slides from those projects in your project. To customize those slides you often want to edit texts and replace images. If you are new to Captivate, finding an image can be frustrating. You expect to be able to select an image by clicking it on the stage, but that is not always the case. This article will try to help you in your search. Follow the steps in sequence. Depending on the situation you will not need all steps. Meanwhile you may discover some ‘tools’ as well.

Text mostly is not that hard to find, although there are some exceptions which will be mentioned. All steps here, except when indicated, are valid both for non-responsive (blank) and responsive projects. Example screenshots are taken from the available Quick Start Projects.

If you find this helpful, will write another article about customizing interactions. That will be not as easy, and may need more learning about tools.

Steps

Step 1: Timeline panel

In the newbie UI the timeline panel is collapsed at the bottom, and you see only its title bar. Open the Timeline panel by clicking the Title bar. This is your primary tool. You may ignore that this panel can also be used to select objects like images and text containers instead of clicking them on the stage. Especially when you have a lot of objects, which overlap, this may be an easier for selection. Selected objects have a different color (darker blue) than unselected objects.

If you can select the image on the stage or on the Timeline panel, and you want only to replace that particular image, it is easy. Look in its Properties panel, where you’ll see the name of the image. Click that name and point to the new image. I would recommend to have it imported to the Library (see further), but you can also find it on your system. Once it is imported, it will automatically appear in the Project Library.

Screenshot is for the slide ’70/30 Layout with image horizontally’ from the QSP ‘Alliance’.

Tips:

  • Best practice is to have an image with exactly the same size in px as the original image. Click the button Edit image, to see the size of the image.
  • If you have several slides where you want to replace this same image, it is better to find the image in the Library. Use ‘Find in Library’ from the right-click menu on the image. Edit the image in a graphics application, where you can replace it. Keep the original name and all instances of that image will be replaced in your project.

Extra

I didn’t encounter this other possibility yet on a Ready-to-go slide but have not checked all of them. It is possible to have an image as background on a slide. In that case it will be visible on the state, but not on the Timeline. You can only see that image as shown in this screenshot:

You see that a Custom background is used. It is an Image, and under ‘Slide Color’ you see a preview of the image. Clicking the small triangle at the bottom allows you to choose another image.

Step 2: Image on Master slide

If you cannot select the image on the stage, nor in the Timeline it may be on the used Master slide.

Click the Master slide button, and the Filmstrip will be replaced by the Master Slide panel. The master slide on which your slide is based will automatically be selected. It is possible that need to scroll to see that selection, it is a thick blue border.

Keep the Timeline panel, it is also used by master slides. Try to select the image either on the stage or in the Timeline. If you are able to do so, you can replace that image the same way as on a slide. All slides based on this master slide will be updated automatically and show the new image.

Screenshot is for the slide ‘Image 1’ from the QSP ‘Wellbeing’.

Extra:

Similar to slides (and more used) an image can be used as Custom background in a master slide.


For a Fluid Boxes project it is also possible that a Fluid box is filled with an image. Same comment as with the background for master slide. I have not detected this use of images in the QSP-slides which I have screened.

Step 3: Multistate objects

No luck so far, no images on timeline of slide nor master slide? You are able to view that image when previewing the course, but it is not visible in the editing environment on the stage? In that case the mysterious image is probably in a state of a Multistate object. Same can be possible for text, which appears when previewing but is invisible on the stage when editing.

Find the multi-state object for hidden images?

Preview the slide (in browsers) and try out the interaction, mostly by clicking buttons or arrows. Try to remember one of the images which you want to replace.

When back in the editing environment, you probably will have an image on the stage. Use the right-click menu to ‘Find in Library’. The developers of the QSPs will have labeled the images in a consistent way. Try to find the image by scrolling in the neighbourhood of the selected image.

To see if it is used in a multistate object, click the Usage button in the Library. If this confirms that the image is on the same slide, you have found the multistate object.

Screenshot: this is the slide ‘Slideshow Layout’ from the QSP ‘Business’. The image which shows on the stage is labeled ‘photo_1’.  Near that image I found the one needing to be switched ‘photo_4’ and it is confirmed that this image is also used on slide 2., in state4.

Open the Object State panel by clicking the State view button in the Properties panel for the Multistate object.

In the Object State panel, find state4.  You can now follow the same workflow to exchange for another image as described on top for the very first step:

When you are finished editing states, you can return to more editing for the slide after clicking the Exit State button on top (bit far away IMO).

To find a hidden text, it is not so easy because texts are not in the Library. You need to preview. If the hidden text appears after having clicked some interactive object (button, arrow) try to remember its location and size. In that location you may have another text or image, but it can also be an invisible shape. In editing environment try clicking in the remembered location. If you see a selection rectangle with handles, try its State view button.

Typical slides with multistate objects are the Flipcard slides and the Accordion slides.  If you cannot find a text… ask here or in the Adobe forums. I have helped identifying multistate objects for multiple users.

Replay/Reset slide 2 (Captivate tutorial)

Intro

Recently I published a blog about what seems to be 'hot' topic: how to replay a slide, how to reset a slide. That blog didn't include an example file.

When coaching a training I often use Captivate tutorials, more than videos. This particular topic needs such an interactive approach, to allow to experiment, to get a 'feeling' of the difference between Replay and Reset (with or without an On Enter action). For learners I provide the cptx-file. Here I will only share the HTML5 published output. 

You will see that I borrowed design elements from the Quick Start Project 'Safety'. The interactions were created from scratch.

Content and Tools

After a short rehearsal of terminology and the step-by-step workflows you'll be able to see 4 different examples:

  • Slide 5  which is only based on the Timeline: staggered objects and effects. 
    The info button will show you the Timeline and a relevant part of the Advanced Interaction panel
    This slide is followed by a T/F quiz slide to check your observations.
  • Slide 7: click/reveal slide, using multistate objects. The info button shows you the same information as for slide 5
    This slide is followed by a MCQ slide with multiple correct answers, to check what you learned.
    Both quiz slides are Knowledge Check slides. If you want to cheat you can go back to the previous slide. Navigation by TOC is also possible. The TOC is in overlay mode.
  • Slide 9 : flipcard slide (with thanks to the QSP Alliance). Rather simple but worth seeing the difference between Replay and Reset.
  • Slide 10: Drag&Drop slide set up as Knowledge Check slide.

You may detect several techniques like Forced view, which need using some user variables. Quiz slides do not use the default two-step Submit process, but show a Continue button when the Submit button has been clicked. 


Tutorial

You can watch the embedded version, or use this link to play a scalable version. I recommend to use the link. The embedded version seems to have long loading times. 



Animations?

You may have missed animations in the tutorial. There is a reason. While it used to be possible to Reset an animation, that feature is broken in the version 11.5.1. At least for the animated GIF which I created. I have already been searching since a couple of weeks for a workaround without success. I will create an OAM as well, to check if has the same issues. Too bad, it was a fun animation:

Penalty and Partial scoring in Quizzes - Q&A

Why?

This is an basic article because often questions about this specific feature appear on the social media. This week I had another one in this thread. The question was specific for Multiple Choice questions with multiple correct answers. It is a very basic post, not meant for advanced Quizzing users.

Terminology

Penalty

A penalty is a negative score linked to a question (or an individual answer for a MCQ, see below). It is essentially meant to avoid ‘guessing’.  Think about a T/F question where a learner always has 50% chance to choose the correct answer, without proving real understanding. In Captivate you can add a Penalty for each type of question in the Quiz Properties panel. You add it as a ‘positive’ number.  See this screenshot:

The Penalty will appear in the Advanced Interaction panel, column Negative points:

You can have a hands on experience with penalty, when playing with this short quiz (more explanation later on), has only MCQ type of question. The previous screenshot of the Advanced Interaction panel was for this example file. Either you watch this embedded version (fixed resolution) or you use this link to open a scalable version:



For this example I have used design elements from the most recent Quick Start Project ‘Business’.

Partial Scoring

Feature is only available for Multiple Choice Questions with one or multiple answers.  

For all other types of questions a learner gets the score  for a question only when everything is correct.  That can be very frustrating for learners if they just missed something.  That is certainly the case for a MCQ with multiple correct answers, but also for a Fill-in-the-Blank with multiple blanks, or a hotspots question with multiple hotspots. However those other types have no inbuilt  partial scoring.

MCQ with Multiple Correct Answers

To set up partial scores, you need to activate the option ‘Partial score’ and in this case the option ‘Multiple answers’ is of course also needed. If you do not specify the exact score for each answer, both score and eventually penalty will be equally distributed. But it is much better to identify the score and penalty, because each answer can have a different weight: some are more easy to detect than others. 

For that reason you need to:

  • select each answer
  • open its Properties panel
  • go to the Options tab
  • enter the ‘points’
  • for wrong answers you enter ‘negative’ points,

After entering individual score/penalty the score and the penalty on the Quiz Properties will look ‘dimmed’, but they are calculated as sums from the individual positive and negative scores of the answers. I prefer the expert UI because I can have both Properties and Quiz Properties next to each other, or at least both visible at the same time. Here an example for one correct answer, 6 points out of the total score of 15 points, because the two other correct answers have a score of 5 and 4points:

In this screenshot you see the ‘penalty’ or negative score for one of the wrong answers:

This wrong answer has a score of -4p, whereas the second wrong answer is estimated at -3p, which leads to a total penalty of 7points.

MCQ with One Correct Answer

It may be less logical for a MCQ with ONE correct answer, isn’t it?  However the term ‘partial score’ is also valid for ‘partial penalty’ as you could see above.  You may have several wrong answers, and some may considered to need a bigger penalty than other wrong answers. This means really differentiating the penalty which is available for MCQ with one correct answer. The first question slide in the example file was set up that way. The correct answer was rewarded with 10 points, the wrong answers had 3 different penalty scores. Here is an example:

Something is wrong with the ‘total’ penalty in the Quizzing Properties however.  It has been calculated as explained above: sum of all the negative scores. But in this case, the learner can only  mark one of the wrong answers, that penalty of 10 points can never exist.

Possible Issues

LMS reporting

When using SCORM 1.2 the LMS may not accept a score below 0. Just a warning

Attempts on Question level

The reason for the example file was the thread I mentioned in the introduction. In the example file, the Quiz attempts are set to Infinite, but the attempts on question level are limited to:

  • Two attempts for the Single Choice question
  • Three attempts for the Multiple Choice questions

The second and third question are identical, but the second has no partial scoring, the third has partial scoring turned on.  Captivate will see a question with a partially correct answer as a ‘correct’ question, and include it in the system variable cpQuizInfoTotalCorrectAnswers. That has also its consequence for the attempts. If you give only one correct answer, the attempts will be considered to be exhausted, you’ll not have the possibility to add correct answers. Try it out: you will see that you can use the 3 attempts always on the second question (as long as you don’t have all the correct answers), but not on the third question. That is a problem!

Replay or Reset slide?

Update

For a hands-on experience, have a look at the recent post with a Captivate tutorial about this topic.

Replay/Reset Slide tutorial

Intro

A frequently visited post on my blog is ‘Replay (slide) button‘, which was published 5 years ago. Such a button is not available out of the box in Captivate.  In that blog I explain two possible scenarios. The second scenario will be close to what is explained in this new post as a 'Reset' scenario. Since some features have changed, time to refresh. I will focus here more in-depth on the difference between Replay and Reset.

Companion tutorial:  to make this textual post more 'visible', I created a Captivate tutorial, which allows you to explore the difference between Replay and Reset (with or without On Enter action) on several examples. It can also be considered a summary of this blog, since the content slides (and assessment slides) treat this topic Replay/Reset. This is the link:

Replay slide

Many years before I already posted a simple way to replay a slide as well, and often I see users still using this two-line advanced action (which could also be a perfect Shared action, without any parameter):

Expression cpCmndGotoSlide = cpInfoCurrentSlide – 1
Continue

Whether you need the command Continue depends on the setup of the slide. If you leave it out, the play head will remain paused at at the first frame of the slide.

The advanced/shared action is essentially a translation from a still older action. , where more system variables starting with ‘rd’ existed, allowing a simple action instead of the one shown above. Reason: besides the cpInfoCurrentSlide, there was a second system variable rdInfoCurrentSlide. The first one was meant only to show the slide number, and for that reason starts its index with 1. The rd variable, like most system variables, starts its index with 0. , The simple action was:

Assign cpCmndGotoSlide with rdInfoCurrentSlide

Common misunderstanding is that this action will also ‘reset’ the slide which is NOT the case unless for very simple slides. Main reason: the play head never ‘re-enters’ the slide. Re-entering the slide is necessary to restore the original situation, either automatically, and/or by having an On Enter action being done again.

Reset slide

Hope we use the same terminology. Reset slide to me is to restore the slide to the situation it had when you first entered the slide.  During the first visit of the slide lot can have been changed. Here is a not exhaustive list:

  • Some object, originally hidden are now visible, or the reverse situation: originally visible, now hidden.
  • Multi-state objects were changed to another state, both custom state or InBuilt state (think about the Visited state of a button).
  • Effects have been applied to objects or groups, which can have those objects being in a different location if the effect included a motion path.
  • Knowledge Check slides have been answered. I will not talk about regular question slides, because those cannot be reset on slide level, only on Quiz level
  • Drag&Drop slides set up as Knowledge Check slides have been answered. Same restriction for D&D slides setup as scored questions (quiz level needed). I hear you! You can add a Reset button to a D&D slide, indeed, but that will not reset everything if you used Object Actions.

Essential for resetting is to re-enter the slide, to have the playhead revisit the On Enter slide event. For some of the described items that will be sufficient, for others it will be necessary to add an action On Enter. I demonstrated this situation in the recent presentation at Adobe eLearning World. You can find the recording still online in this portal. I will explain how to re-enter the slide (2 workflows).

Re-enter Slide (workflows)

Two workflows are possible (explained only the second one in the old post, but it has failed at least in one of the more recent releases and pushed me at the first workflow):

Dummy slide

Easy workflow, step-by-step:

  • Insert a duplicate of the present slide before the present slide
  • Take out all interactive objects of that slide, it should not have pausing points.
  • If there is an On Enter action, delete it and get back to ‘No action’ or ‘Continue’ (same result)
  • Reduce its duration to 0.1 secs which is the shorted possible duration.
  • Attach this  action to the Reset/Replay button:

Go to Previous slide

The play head will rewind to the dummy slide and since it is so short almost immediately (re)enters the present slide.

Drawback: you increase the number of slides. That may be annoying if you show the number of slides (cpInfoSlideCount) and/or if you use the TOC (where you’ll have to hide the dummy slides). I started using this approach in a version where micro-navigation had problems in HTML5 oiutput.

Tip: to avoid annoying flickering in case of low bandwidth, prefer a similar look for the dummy slide as for the present slide. I mostly use a duplicate, taking out all interactive objects and actions.

Micro-navigation

It is bit more complex but avoids adding slides. Workflow:

  • Create a user variable v_start. It will be used to store the first frame of the slide.
  • Use the On Enter slide event for this command (eventually to be combined with other commands) 
         Assign v_start with cpInfoCurrentFrame
  • For the Replay button use this command:
         Expression cpCmndGotoFrameAndResume = v_start – 1
    The play head will rewind to the frame before the start frame of the slide, which is the last frame of the previous slide. Due to ‘Resume’ in this system variable of the Movie Control category, the play head will continue and re-enter the slide immediately.
    It may prove necessary to increase the '1' to 2 or 3 if you don't get the expected result. It is possible that the value of the first frame is one or two frames wrong. In most cases however it works fine.

The variable and the actions can be reused on all slides.

What is reset?

As mentioned before, some items will reset automatically when re-entering the slide by one of the described workflows. Here a non-exhaustive list from my experience:

  • Multistate objects: if you keep the default setup where ‘Retain state on slide revisit’ remains unchecked. The normal state will re-appear as in the first visit of the slide. I have some blogs around which use that as an alternative for a Show/Hide scenario.  Drawback: if you use the InBuilt state ‘Visited’ it will also disappear in this situation.
  • Knowledge Check slides:  will be completely reset, ready for a new attempt. 
  • Drag&Drop slides: are completely reset, including eventually changes to objects due to Object actions. That is not the case with the generic Reset button which can be added to such a slide.
  • Effects: as you know they can be added with three types of triggers. The easiest one, based on timeline will not need a Reset action, will be reset with a simple Replay action. However both the button triggered Effects and Effects triggered by an advanced or shared action need to re-enter the slide to have them reset to their original situation.
  • Text Entry Boxes:  if you change the value of the associated variable, that change is never visible right away but will now be correct after re-entering. Same for the variables of learning interactions like checkbox and radiobuttons. Not really ‘reset’, more of a ‘refresh’.
  • Web objects: they will be reset to the first web page, which opens with indicated URL. If you use Replay that will not happen.
  • Animations like OAMs

What is NOT reset?

  • Multistate objects: if you check the option ‘Retain state on slide revisit’ for the object.
  • Hide/Show: items that have been shown or hidden during the Play head travel in the first visit will remain in that status.
  • Enable/Disable: if this command has been used for interactive objects, they will remain in that state. I showed this in the presentation ‘Deep dive with Shared and Advanced Actions’ at the Adobe eLearning world conference: if you disable all interactive objects, the pausing points disappear and nothing will stop the play head.
  • Variable values: they will not be reset to their original value.
  • Score: if you have scored objects on the slide, the total score including this score will not be decreased.

How do you reset these items: by creating or editing the On Enter action. That is beyond the scope of this shorter blog. You can see multiple examples in some slides of the Quick Start Projects, or on my blog including the sample project I added to the mentioned presentation. I include that project here as well. Check the On Enter actions (and the consequence of missing such an action on the first slide).

Look out for a Captivate tutorial to illustrate the difference for several of the mentioned items. It will be published soon on this blog.


MCQ slides with images (back to basics)

Intro

Recently another request on the Adobe forums appeared about quiz slides:

"....insert images as the Options/Answers in the Multiple Choice Questions"

I answered within a short time showing a screenshot of such a question slide, quickly designed:
It is not really that difficult, but reminded me of the fact that many newbies have not really an idea about the way quiz slides are created. Although I have already published many articles about quizzes (see overview),  want to explain how I realized that quiz slides in minutes.

I would have posted this in the community as another Tweak post, but since 3 posts I entered since 2nd of July are still not approved, and i wanted to provide a clear answer to the OP on the Adobe forums, will only post in my personal blog.

Quizzing Master slides editing

All question slides are based on a dedicated master slide. One unique master slide is used in any theme for MCQ (one answer and multiple answers), True/false, Fill-in-the-Blank and Sequence questions. Typical for those master slides is that all the items are embedded, they have no individual timeline. You'll find more information in my other blogs. The most important part for this use case is the so-called Answer area:

That particular item is the container for the Question answers. It is however NOT possible to edit the individual question answer captions. 

Even with the default setting in Preferences which prefers Smart Shapes over Text Captions, all items on quiz slides are always captions! Question slides need a long due refurbishing, shape buttons as quiz buttons are also not allowed. 

To make place for images, you need to make the Answer area as big as possible. Move the buttons to the bottom, make the feedback messages as small as possible and move them downwards as well. Move the captions at the top as high as possible (Type of question, Progress indicator in this case as well, Question). Now you'll be able to increase the size of the Answer area:

Question slide editing

Only on quiz slides it is possible to edit the individual answers. I increased the number of answers to 4, and rearranged the answer captions to make them as big as possible. I took out the numbering and the text caption placeholder. You see the four answer captions inside of the (red) answer are:.

As most embedded items on the quiz slides, those answer captions have functionality built in. I would like to compare those captions with 'hotspots'. When you click a caption, the radiobutton will be selected. For a MCQ with multiple correct answers, it will be a checkbox that is selected. 

All embedded objects are always on top of the stack (z-order). If you insert an image in the area defined by the answer caption, it will be below the 'hotspot' and the functionality will be preserved. That is the only trick I used to have the resulting question slide with the maps of some European countries (SVGs). Since it is an original quiz slide, all functionality (Retake, Review) can be used. 

The workflow is also valid for quiz slides in question pools.



How to Rotate a Button when clicked?

Intro

In a recent memory game which I published here last week, second variation of the game shows buttons which seem to rotate when clicked.  Users ask me how I made this possible? The InBuilt states of a button (Rollover, Down, Visited) and the custom states have their location and size locked to the Normal state. You can see this in a screenshot where the Rollover state is selected in a button created from a SVG:

Watch the lock symbol in the bottom right corner of the state on the stage (marked by a red circle). You see  the Properties panel, Options tab: Transform options are all dimmed. That remains the case even if you click the lock symbol a couple of times: it will disappear but you will still not have the Transform possibilities.

It IS possible to replace the image in a state using the style tab, as illustrated in this screenshot:

However using this possibility for a rotating button would mean creating multiple images (in this case in a vector application like Illustrator) for the different states of the button to be rotated. Clicking the button should trigger an action ‘Change State…’ where the appropriate Custom state is replacing the Normal state. You cannot replace the Rollover/Down states, they would have to be taken out or have a ‘neutral’. appearance

That type of cumbersome workflow (for the game 4 images for each button, 3 extra to be created in Illustrator) reminds me of the old processus for creating image buttons, or the old captions where you needed a graphics application and a text editor. That is the reason I looked out for an alternative to be done entirely in Captivate.

Secret = Empty Normal state

Lot of developers escape the problem by using a click box on top of a static (non-interactive) multi-state object. The click box, invisible by definition, is used to trigger the ‘Change State’ command for the multi-state object. That is functional, but why use two objects when it can be done with one. Another use of the ’empty Normal state’ which I will explain in a future blog for static objects.  Here you find the workflow step-by-step used for the rotating buttons in the game.

Step 1: invisible button

The example is for a SVG-button, but this can also be done with a shape or transparent button or eventually with a transparent bitmap image.  As visible in the screenshot below, the SVG (invisible) is in the state with Opacity set to 0%. The default setting ‘Enable click in Bounding box’ was kept, to be sure that the clickable area also covered the rotated versions of the SVG. Same Opacity approach can be used for bitmap image as button. For  a shape (or transparent) button set Opacity for Fill and Stroke width both to zero.

Delete the Rollover and Down states in the Object  State panel using the right-click menu. Don’t be confused by the fact that the Actions tab has disappeared when in Object State view, this SVG was activated as button:

Step 2: Image in Normal state

Make sure you have the SVGs in the Library (you cannot paste from the state in a state). Open the State view, and drag the image you want to be able to rotate to the Normal state. Use Align options (from align toolbar or right-click menu) to resize and align it with the invisible SVG-button. You may need to use the Arrange option to get the image to Front, to be able to recolor it as is the case here; it seems not to appear yet in the state but that is just a lag or refresh issue:

Step 3: Duplicate state and Rotate image

In the Object State panel duplicate the Normal state to a Custom state using the right-click menu.  The generic name will be NewState1, you may rename it but is not really necessary in this particular case. Select the image, not the SVG-button. Since it is unlocked (not a button) you can use the Options tab in its Properties panel to rotate the image.

Repeat this third step as many times as you need until you have all the required states (depends on the wanted rotation angle of course). 

Step 4: action and test

For the button use the simple action ‘Go to next State’ to be triggered by the On Success event of the SVG-button.  Deactivate the option ‘Continue playing Project.

Test using F11, Preview HTML in Browser (non-responsive project). SVG as button is only supported for HTML output. If you want to test in a Fluid Boxes project, you’ll need to use a static fluid box to be able to add the image to states. 

Limitations

You will not see the rotation as effect, because effects are not possible in states. If you really want to mimick such a rotation, make the rotation angle smaller and use a While loop. 

In fact this workflow is similar to using a Click box on top of a multi-state object: the role of the click box is taken over by the invisible SVG, and the static multi-state object is replaced by custom states in the button. It is not really necessary of course to use the same image for the invisible button and the added images. I just find it easier because you have a reference frame which is the bounding box of the invisible SVG. You have to be sure that clicking the SVG image in any position will be in the bounding box of the invisible button.

As you probably already understood, this workflow is only possible when the bounding box requirement is fulfilled. It is not a solution when you move the button to another location using a motion path. If you are on the most recent release (11.5) have a look at the Quick Start projects which have a horizontal accordeon layout. You'll see how complicated the advanced actions are due to the fact that you cannot move a button.

Game: using JavaScript in a Shared action

Intro

Last week I presented at the Adobe eLearning World 2020 “Deep dive into Captivate with Advanced and Shared actions’. I had prepared 3 different scenarios, to be ready for any audience. Due to the poll before the session I decided to go for the ‘newbie’ scenario because the majority was new to Shared actions, and a considerable amount of attendees even to Advanced actions. That means that intermediate and advanced users were perhaps disappointed. To remediate I plan some blogs and examples as illustration. This is the first one.

Javascript and Shared actions

It is possible to have the command ‘Execute Javascript’ embedded in a shared action. When talking about games, randomization is mostly used but not a ready-to-go feature in Captivate. In the session I showed a very simple board game where the tossing of a dice is simulated, and the board cursor advances based on the result of the dice toss. That was realized with one shared action.

This game uses random numbers as well. It is a memory game which can be used in many variations due to the flexibility of shared actions, variables and multistate objects.

Game

You will learn about the game rules in the game. There is an easy and a more complicated way to play the 3 games. Hope you don’t keep only the easy one if you are in for some memory training:

Play with the rescalable version using this link or with the embedded (fixed resolution) version:

Have fun!