Tip 2: Filtering (Advanced/Shared actions)

Intro

This second tip is closely related to the first tip about labeling. If you have read that post you'll have seen that good labeling could facilitate filtering for dropdown lists, using this screenshot. It shows the Parameters dialog box (Shared Actions) where filtering is used to limit the choices in a dropdown list.

Time to explain what I mean by the term 'Filtering'. Dropdown lists are all over Captivate's UI, not only in the Advanced/Shared actions domain. Some of those lists are sorted alphabetically, some are sorted chronologically (very annoying: most recent added item appears on top). They may show all items, but can have an automatic filter of items. That is the case within the Advanced Actions dialog box: when setting up a condition or a While loop, if you need to choose a variable, you'll only see variables in the dropdown list, for operators you only  operators. However, even when filtered and sorted alphabetically the lists can be very long and it takes time to find the proper item. Being able to reduce a list by manual filtering based on the names is a big timesaver! I remember older versions where searching was reduced to typing the first character, to scroll to the items starting with that character. That used to be the case for the variable dropdown list, reason why I started labeling user variables with v_ as first character, to differentiate from the system variables which started either with 'rd' or 'cp' (the first types disappeared from the lists).

Filtering workflow

It consists in typing a sequence of characters, resulting in displaying only items which have that sequence in their name. It doesn't matter where that sequence appears: at the start, at the end, in the middle. There is no case sensitivity, which is rather exceptional. Although names cannot start with a number, if you include a number in the name it will be very easy to use the number as part of the filter sequence. This will become easier to understand with some examples:

Show (Hide)

The dropdown list for those commands in advanced actions will show all objects on all slides, leading to a very long dropdown list. Using a filter and proper labels is very useful as you can see comparing these two screenshots of such an action before and after applying a filter. In this case the filter shows all groups, which are labeled as Gr_xxx

Change State

This screenshot (from the Memory game project) simplifies how to find the correct multistate object. In this case there were many multistate objects in the project:

Parameters

Although many dropdown lists are already filtered on the type of item needed, look at this example. You need to know that in the field here you need to click twice to be able to type in a filter: first click selects the field,  second click gets it in Edit mode (like with a text container). I added the Properties panel, because the label of the active button is used as reference for the 'active' button. Same example was shown at the start of this blog.

Availability of Filters

As you have seen the filters are available for all dropdown lists in:

  • Advanced Actions dialog box
  • Parameter dialog box

Too bad that it is not available for other dropdown lists:

  • Simple action (tab Actions)
  • Object actions (Drag&Drop)
  • Advanced actions list in the Advanced Actions dialog box (which would be very useful if you need to clean up)

Next tip?

It will compare the use of  Grouping (when using Show/Hide workflows) and multistate objects for similar goals.


Tip 1: Labeling (Advanced/Shared actions)

Intro

Many Captivate developers use advanced actions, which is an easy way to extend the functionality of the application without need for learning the rules of a programming language. After publishing the project, those actions are converted to JavaScript. This is also the case for the more flexible (underestimated) shared actions.

However the  ‘point-and-click’ approach for scripts has rules and limitations.  If you start using advanced/shared actions,  understanding those rules will avoid frustrating situations.  This first Tip is all about the importance of customizing labels, the reasons for establishing a labeling discipline (especially when working with a team). Last week two questions in the Adobe forums about issues with advanced actions were due to lack of knowledge about correct labeling.

The terminology used in this blog is the same as in the Adobe documentation. You can check the in-depth exploration of the Advanced Actions dialog box in one of my previous blogs meant also for starters with actions: 

Advanced Actions Outfit since CP2017 – eLearning (adobe.com.

This article will first explain Generic names (labels) attributed by Captivate, continue with Custom labeling. At the end you'll see also an explanation of 'Smart labeling', term used by Adobe when copy/paste is used on items with a custom name.

Generic names (labeling) - Uniqueness

Almost all items in Captivate get a generic name when they are created in a course: objects, placeholders, groups, slides, states, decisions (in actions)... There are a few exceptions:

  • User variables: you need to define a custom name except for the variable associated with a Text Entry Box.
  • Advanced/Shared actions: they also need a custom name 

The first global ruleis fully respected in those generic names. 

 'Each name needs to be unique'
Names are case sensitive, so it is easy to use similar names, by changing one or more characters to uppercase from lowercase. Uniqueness applies also to items from different type: do not use the name for a button, which has already been used for a variable (common mistake), or the name of an action for an advanced action (another common mistake). There are some minor exceptions:

  • Generic name for a Text Entry Box and its associated variable are the same. I don't really like this, and tend to create a new user variable with a custom name, using the X button next to the generic variable name:
    It is not wrong to keep the generic name, but it bumps on the general rule.

  • If you define the name of a button, and use the same name for the action to be triggered by the Success event, it will not be flagged as an error. But if you do the reverse (first action, later the button) you do get an error. I would avoid doing this. 

  • States can have the same name for multiple multistate objects, because as identifier the combination of the object name and the object will be unique if the object has a unique name.

  • Similar for decisions within an advanced/shared action. Although years ago I had issues with an advanced action using the same name as a decision in another advanced action. But decisions can have same name in multiple advanced actions.

When using Generic names, and duplicating the item, the duplicate will have a similar name but ending on another number. Check this screenshot, showing the timeline of a slide with multiple objects and of a duplicate slide:

Custom names (labeling)

Why and when is replacing generic names worthwhile, because it takes time?

  • It will be easier to understand, especially for your clients and collaborators. Referring to the screenshots of the Timeline posted above, if you replace the name of the TEB which will ask for a name by 'TEB_name', and the button is named 'Bt_Next' reading the timeline is more comfortable. Have a look at this Timeline, which is from the Stopwatch tutorial to understand better.
  • When using the items in advanced or shared actions, where you often will need to choose from dropdown lists, it is almost impossible to identify the right item for your choice when working in a project with tons of items.
  • To take advantage of the filtering (see Tip 2) provided by Captivate, custom names can save you lot of time. Look at this screenshot from the Memory Game tutorial where a parameter needs to be chosen for the shared action. There are lot of shape buttons in this game. By typing out one or two characters (here _2) the long list is filtered to facilitate the choice.

Setting up a custom labeling 'system' is also a timesaver, not only when you are collaborating with a team. The global rule of Uniqueness will have to be respected. Names cannot start with a number, nor have strange characters. Try to keep to short names, avoid spaces and remember that names are case sensitive! Here is a short summary of my personal labeling system, however this is just an example. Over a decade ago I started labeling for user variables. At that moment the only way to find a variable in the dropdown lists was by using the first character, because they were sorted alphabetically. To have the group of user variables separated from the system variables (which started with r or c at that moment) user variables started with v_. The first character indicating the type of item, followed by an underscore (replacing a space). This meant the item was also identified by that first character, and I continued to follow the same logic for other items. Some examples:

  • Bt_: first characters of buttons of the three old types (text, transparent, image)
  • SS_: smart shape
  • SB_: shape used as button
  • Im_: bitmap image
  • Ib_: bitmap image used as button
  • SV_: SVG image
  • SVB_: SVG used as button
  • Gr_: group both for object groups and slide groups (Table of Contents)
  • Tx_: text caption
  • CB_: click box
  • ...

For advanced actions I don't have a fixed system. One exception: if an action is meant to be used On Enter for a slide, I will start its name with Enter. I am a frequent user of shared actions whenever possible, which avoids the need for names for multiple duplicate advanced actions,  since you need only one name for a shared action that can be applied multiple times with different parameters. 

For the other characters in the name I will use camel notation. The system allows you to have the second part identical for items which are linked. Example: SVB_Reset can be linked with an advanced action ResetAct, and a variable v_reset.

Maybe I'll add an extra extension to multistate objects in the future, because they are not easily identifiable.

Tip: for much used variables create a shared action as explained in Rare tips (tip 1). By importing that action in a new project you avoid lot of typing.

Smart labeling

When you copy/paste an item with a custom name, the custom name will be preserved, but an extra number is added to the name. This is indicated as 'smart labeling', was introduced some versions ago. 

Example: Duplication of the Next shape button (from the Timeline screenshot for the Stopwatch slide), will lead to this:

The duplicate gets the original name followed by an underscore and a number. In this case the duplicate of SB_Next, became SB_Next_20. It means that the numbers 1-19 had already been used. Same would happen if you copy that button to another project, but the number will be different. If I copy this button to a almost empty new project, the name becomes SB_Next_2, because only one object already existed ending on 1. Keeping at least part of the custom name can be very useful. However it can also become a problem as I learned when importing Shared actions using the same variables. If you don't import (or drag) those actions in one workflow, but in steps, you will end up with duplicate variable bearing another name. You also need to be careful when copying interactive objects which are triggering actions using variables.

Conclusion

I hope this article convinced you of the importance of consistent labeling. Be sure I do not label every item, but I will when they will be needed in an advanced or a shared action. For slides the names do not need to be unique, because internally they are identified by cpInfoCurrentSlide which is a number. However slide names are important if you want to use a Table of Content.

Next tip about Filtering is closely linked to this first tip, and will save you time when developing advanced and shared actions. You will get an overview of the locations where filtering is possible, and those where - saddening - it is not available.

Memory game setup - version 2021

Intro

As new year's blog I offered a simple memory game in this portal

Let 's Play and Dream

The setup however is not explained in the blog. Since another user asked about the creation of such a memory game, this blog will explain shortly the workflow. It will be limited to the game itself, not to the consequences of having succeeded it.

Setup slide

Besides the use of ONE shared action and ONE advanced reset action, all is based on using multistate objects, groups and variables. It can easily be extended to more than 6 pairs as in the example file. The background image, which in this case is only a static image of all the small images, can be replaced by another image (or a random image if you use JS), which can be included in the game itself. To see what I mean, I have to refer to my first version of this game, 10 years ago: 

Concentration game created exclusively with Captivate

If you want to play that old game, I warn that it is a SWF.

Timeline

Have a look at the timeline of the game slide

The two buttons with the same back image are in a group. There are 12 buttons, so you end up with 6 groups. The buttons themselves indicate where they are. The expanded group Gr_6 has the second button on the third row and the fourth button on the second row.  However you can set up labels as you want.

Each button is a multistate object. Normal state is the symbol for the virus, the Back state has the image. 

Variables

Each group has a tracking variable: v_1 - v_6. Their default value is 0.

The variable v_click starts with a default value of 0. It will track the button clicks (first or second).

The variable v_counter will track the number of correct paired images. It starts at 0, and the game is finished when reaching 6.

The variable v_first is needed to reset the slide, will store the frame number of the first slide frame. For more information check: Replay or Reset?

Shared action 'ButtonAct'

This action is triggered by the 12 buttons, and has only 3 parameters as you can see in the preview of the action:

You see 4 decisions:

Always  is a standard action, it shows the back state of the clicked button and disables it. The tracking variable for the group and v_click are both incremented by 1.

WrongAct (conditional) checks if this is a second click, and it didn't match the first click (because v_1 is equal to 1). In that case the Reset workflow is used. The advanced action 'EnterGame' (see below) will reset what is necessary.

CorrectAct (conditional) if both clicks pointed to the same image, the variable v_counter is incremented. The group with the two buttons will be hidden, to reveal the background image. 

Done: (conditional) checks the value of the variable v_counter and navigates to the conclusion slide if it reaches the value 6, which means the game has been completed successfully.

Advanced action EnterGame

This action is essentially resetting the slide. 

 Since buttons can have been disabled (see ButtonAct) all buttons need to be enabled. A group tracking variable can have a value 1, needs to be reset to 0. The variable v_click needs to be reset to 0 as well. The only variable keeping its value is v_counter.

Extension tips?

More possibilities will not need a lot of work. If you want to reuse the workflow in more projects a shared action has a lot of advantages.  If you import that action in a new project, the variables v_counter, v_first and v_click will be created automatically including their default value and description. Personally I would use the present advanced action ‘EnterGame’ to create a new shared action, keeping only the variables to reset, not the buttons. If you import that new shared actions at the same time as the first shared action, you don’t have to create the group tracking variables neither. You only have to set up the multistate objects and the groups in the slide.

Want less or more groups? 

It is logical that you’ll need to edit the EnterGame action. What about the Shared action ButtonAct?  Since I wanted to make the workflow simple, I kept the literal ‘6’ for the number of groups. Two possibilities for editing:

Use the Shared action to create an advanced action. Delete the shared action in the Library. Edit the literal to the wanted number, and recreate the shared action. You can even use the same original name.

If you want to reuse this action in multiple projects, replace the literal by a variable (v_max) which you can edit in the variables dialog, or by adding an Assign command on a slide preceding the game slide. 

Background image can be replaced, as I mentioned above.

It is also possible to create a more complicated game, maybe with groups of 3 buttons to match. 

Have fun!

Custom review text for Random questions.

Intro

Another Quiz tweak blog, answering a question in the Adobe forums found under this ‘link‘.

None of my previous blogs about tweaking quiz slides (like Custom feedback) or using Random question slides (Do’s and Don’ts) could answer this question directly. But the workflow below did use some of the ideas of older blog posts, and addressing the limitations of random questions.

Goal: show a custom review message for random question slides. Follow this step-by-step workflow. Of course I used a shared action since it is a repetitive process. You’ll see a short example project.

Example project

Watch this quiz, either the embedded version (fixed resolution) or a rescalable version using this link. This short project has 3 random slides which will be selected from a question pool with 8 question slides. There is a score slide at the end, where you can click the Review button. There is no slide after the score slide, which means the Continue button has only the functionality to pause the score slide.



Problems to be solved

Three limitations/problems need to be addressed by the workaround:
  1. In the default Review design of Captivate the Review area is only used for questions which have not been answered.  The default messages which you can still define under  Quiz Preferences, Settings, button ‘Question Review messages’ do not appear anymore since the design with checkmarks has been introduced. You will need to create custom text messages.

  2. Although you can add custom objects to question pool slides, you cannot address those objects using an action.  It is possible to use an Advanced or Shared action for the On Enter event, but you cannot hide/show custom objects.

  3. A random question cannot have any triggered action in a Captivate project.

My first conclusion:  the custom text container cannot be in the question pool slides nor in the random question slide. It needs to be outside of them. But the message itself needs to be different for each quiz slide, somehow it needs to be attached to each question in the pool.

Workaround summary:

  • Text container will be a shape, timed for the rest of the project. It needs to be on a normal content slide immediately before the first random question slide. That ‘dummy’ slide can be very short (I used 0.1 secs) and even set to fade so that it will barely be visible to the learner. The shape will be the custom text container and it is outside of the question slides. This workflow has an extra advantage: it will be on top of the embedded objects of the quiz slides if you activate 'Place object on top' in its Timing Properties.

  • The shape is not filled with a text feedback message but with a user variable set up to show sufficient characters (I used 250). Text style and size of the shape are edited so that those characters can be displayed.

  • The value of the variable (feedback) is assigned with a Shared action On Enter for each quiz slide in the question pool(s). 

Step-by-step workflow

Step 1 (question pool): in scratch area

Use the scratch area for each quiz slide to add the feedback message.  By using copy/paste the text to fill in a parameter in the shared action. That is a lot more comfortable than having to type the (long) text in the small parameter field. Here is a screenshot of one pool question slide:

Step 2: import the Shared action

You can download the Shared action here:

https://shared-assets.adobe.com/link/f63df322-5037-479a-42b8-86506a7f1b7e

Import this shared action to your project library. If you have already created a library to be used as external library in any project, add it to that library as well. I will explain the action functionality later. Importing this action in this early step,  results automatically in the creation of the user variable v_review which you’ll need in the next step.

Step 3: create dummy slide

Create a short slide immediately before the first random slide. On that slide you insert a shape (labeled Tx_Review). Time it for the rest of the project. in Timing Properties.

Go into Text Edit mode (F2 or double-click) and use the X button in the Character part to insert the user variable v_review. Be sure to increase the default duration. I used 250 characters which was sufficient for the feedback messages created under step 1. Here is a screenshot of that slide and its Timeline. You see the double arrow at the end of Tx_Review timeline, indicating it is timed for the rest of the project, and the very short duration.

Because you don’t want to show the text container Tx_Review from the start, use the On Enter event of this dummy slide to ‘Hide Tx_Review’.

Step 4: Shared action On Enter in Question pool

On each slide In the question pool add the Shared action (downloaded in step 2) to the On Enter slide event.  This is the preview of this action, with indication of the two parameters:

The functionality is self-explanatory. In the first decision 'Always' the variable v_review gets the feedback text (first parameter). Use copy/paste from the message in the scratch area (step 1) to define this parameter. The second parameter is always Tx_Review.  

Step 5: Hide Tx_Review

you don't need the text container, timed for the rest of the project, on the following score slide and/or content slides.You’ll need to hide Tx_Review similar to the dummy slide (step 3). In the example project that was done on the Score slide.

Step 6: testing!

Use only F11, Preview HTML in Browser, and preferably test in multiple browsers.

(SWF to HTML) Replacing Rollover Caption/Image

Intro

From what I learned on the forums in  2021, many developers are still busy with conversion of legacy courses (SWF output) to HTML5 output. That can be very boring and time consuming.  This blog gives a quick overview of three solutions for a common issue: the HTML Tracker (under Project) will detect all Rollovers and flag them as incompatible. That means for Rollover Slidelet, Rollover Caption, Rollover Image.

In reality non-compativility is only true for Rollover slidelets: those are SWF-based and are useless. However Rollover caption/image can still be used in courses provided they are accessed only from devices with rollover events: desktop, laptop (either with mouse or trackpad).  They will not be functional on mobile devices (tablet, phone) because those do not have rollover events. You don't have a click event, but a tap event. 

This article will give you 3 possible workflows to replace Rollover images or Rollover captions. They will not be an exact replacement. Rollovers typically have two 'events':

  • Roll over event: triggers the appearance of the image/text.
  • Roll out event: triggers the disappearance of the image/text.

Consequence: the learner has full control over the duration of the image/text screen using movements of mouse or trackpad.  The mouse movement needs to be replaced by a tap event (click). Tap events exist for interactive objects (and hyperlinks). 

To explore the three possible workflows (Success image, Two-state object, Shared action) you can choose between an interactive Captivate course (audio included) or reading a textual summary.

Captivate tutorial

In the tutorial I used some design elements from the Quick Start Project 'Earth'. All interactions are custom. You can watch the embedded version, but I recommend to use this link because it will give you a scalable version. To see the original rollovers, you need to use a laptop or desktop (with mouse or trackpad). Here is the link:

Converting Rollovers for HTML5 output

Embedded version:



Step-by-step workflows

1. Using Success feedback shape

An interactive object (button, click box, shape button) has the possibility for a Success and a Failure message. The Success message appears automatically when the object is clicked or tapped for a fixed duration. Default duration is 3 seconds. In recent versions those messages by default use Shapes, not captions  (see Preferences, Defaults).

Rollover Caption replacement (step-by-step)

  1. If possible, convert the object used to be 'rolled over' to a button. In version 11.5 that is possible for all images. Since version 6 that is possible for shapes and a shape can be used as text container and can be filled with an image. 
    If this is not possible, put a click box (or a shape with Alpha and Stroke set to 0) over the object. This may also be necessary if you want multiple rollover objects in one text container.
  2. In the Properties panel activate the 'Success' message on the Actions tab.
  3. Edit the text in the Success message on the stage to the text you want to appear.
  4. (optional) Go to the Timing Properties, and edit the duration if you estimate 3 seconds not to be sufficient.

Rollover Image replacement (step-by-step)

  1. Identical as for the Caption replacement
  2. Ditto
  3. Import the image to the Library. It needs to be a bitmap image, SVG is not possible.
  4. Check the size of the image
  5. Select the Success message on the stage. Delete the default text and use the Options tab (Properties panel to resize the shape to the exact size of the image.
  6. In the Properties panel for the message, Style tab, switch Fill to 'Image' and select the image to fill the shape.
  7. (optional) Edit timing if necessary in the Timing Properties.

Advantage: very simple solution since you use existing design with feedback messages.  The workflow to have a shape size fitting for the image can take some time but for text, no problem. This solution works for all versions supporting HTML5 output.

Drawback: problem with this very simple solution is that the learner has no control over the duration of the text/image which appears when they tap the rollover object.  You can add audio to the Success shape if wanted (options), it will play when the shape appears.

2. Using Two-state object (toggle)

This solution has been described in detail in this post.  Same workflow can be used to replace Rollover text and image. It is even possible to have both text and (multiple) image(s), and audio. In short:
  • Convert the text container or image to a button. For images that is only possible if you are on version 11.5.
  • Take out the InBuilt rollover and down states
  • Create a custom state where you add the items you want to show when tapping the button
  • Add the command 'Go to Next State' to the button. That will convert it into a toggle button: first click will show the items (as rollover event does), next click will hide them again because you return to the Normal state (as a Rollout event would do) since you have only two states.

Advantage: learner has control over the duration of the appearance, same as for the old Rollover items. You can add as many items as wanted in the second state: image, text, audio, even video.

Drawback: you need to instruct the learner about the toggle functionality. It may take bit more time than the first solution.

3. Shared action with flexible duration

Both previous workflows have some drawbacks, although they seem rather simple. Do not be afraid of this third workflow, because it may even be the quickest solution to replace rollover captions/images.  Once you have a functional shared action, adding it to replace rollovers in any project is a breeze.  Especially when you work in a team, you don't need to be an expert in actions to apply a shared action.

If you didn't watch the Captivate tutorial, watch this one-slide project. It  has been taken out of the complete tutorial. You will see three buttons to reveal popups. The popup will disappear automatically after a certain duration (like in Workflow 1). That duration is stored in  a user variable v_duration. In the example you'll see the default duration, but you can increase or decrease that duration with two small buttons.


You may have seen that an Entrance effect was applied, something what is impossible with the two other workflows.

The duration in the variable for the popup can be set:

  • by the developer (default duration or by using an On Enter action for the slide); 
  • default duration by developer, but ability for the learner to change (as in the example)
  • ask the learner the preferred duration using a Text Entry Box or a Scrolling Text Interaction.

Using Shared Action (step-by-step)

  1. Convert the rollover area to a button to be tapped/clicked. If that is not possible use a click box.
  2. Insert the content you want to pop up when the button is clicked. If you need more than one item, group them (CTRL-G).
  3. Make the group invisible in output (eye icon in Properties panel).
  4. Assign the shared action 'ShowItems' to the Success event of the button. You can download the one I used from this link:
    ShowItems
  5. The parameter is the name of the group you want to show.
  6. Set the value of the variable: either you use the definition of the variable (Project, Variables) or you can use the On Enter event of the slide with an Assign command.
  7. (Optional): If you want to replicate the setup of the example file, add two extra buttons with respectively the commands:
       Decrement v_duration by 1
       Increment v_duration by 1

Advantage: learner has some control over the duration of the appearance depending on the setup. You can group as many items of all nature: images, texts, video, audio.... You can add effects, and even sequencing the appearance with the Delay command.

Drawback: complete control of the duration is not possible. 

Conclusion

The tutorial was created with the most recent version (11.5.5.553) of Captivate, but the workflows can be used in Captivate 11, 10 and 9. That is also valid for the shared action. If you never used a shared action, you can find a short course in this blog. Look for 'Who is afraid of Shared Actions?'. 

All Click/Reveal workflows are a possible replacement for rollover text/image. My choice for these particular ones was made based on their timesaving features. With exception for the second workflow, the learner will not have total control over the duration of the reveal information which they have with a rollover. On the positive side, the second and third workflow allow to have multiple texts and images pop up which was not possible with rollover Caption/Image. It was possible with Rollover slidelets, but they died with the demise of the Flash Player.

The workflows suppose that you are able to open the legacy projects in your present version of Captivate, and that you still have access to the raw files (cptx). If that is not the case, have a look at this blog:

Conversion from SWF to HTML5


Tweak Remediation: get out of the eternal loop

Intro

The Remediation feature was introduced with Captivate 6. There are many YouTube videos explaining the setup. I still prefer the original one by Shameer Ayyappan. 

The idea is that a learner when failing a Question will be navigated back to a content slide. When clicking the Next button on that content slide learner will return to the Question, and be able to change the answer. That is not a normal behavior for quiz slides, by design answers are blocked and attempts considered to be exhausted when leaving such a slide. 

There are some issues with the feature:

  • The learner will need to give a correct answer before being able to continue to the next slide. Result is an ‘eternal’ loop until the correct answer is given.
  • Each learner will have a 100% score at the end. Not always what you want as developer.

Quite a while ago I designed a workaround to break the ‘loop’. Yesterday a user in the Adobe forums asked for such a workflow. This is the thread.

As usual I checked if the workflow still is functional on the most recent release (I am on 11.5.5.553) and if it could be improved.  You can guess that I replaced the former advanced actions by the much more useful and flexible shared actions.

Example 

Watch this example: it has two content slides, and two quiz slides. For the first question (T/F) remediation feature is used, but after a second failed attempt the learner will proceed to the next question. Remediation for the first slide is using the first content slide. Similar for the second quiz slide (MCQ): remediation is using the second content slide, and learner will go to the next slide (score) after the third attempt. Watch it using this link (rescalable) or the embedded fixed resolution version below:



Step-by-step workflow

The limitation for the workaround is the same as for the default Remediation feature: you cannot use partial scoring for the MCQ slides, because a partially correct answer is considered to be correct by Captivate.

Sort summary of the default Remediation setup:

  1. The next button on the content slide has the command ‘Return to Quiz’ for its Success event. That command will only be done when the slide is visited from a quiz slide. If that is not the case, the Next button uses the action ‘Go to Next Slide’.
  2. Attempts for the question slide is set to 1.
  3. The Last Attempt action for the Quiz slide has the action ‘Jump to Slide, pointing to the appropriate Content slide

To break the eternal loop:

1. User variables

Create two user variables:

  • v_attempt: starts with a default value of 0 and is reusable for each quiz slide (will be reset to 0). It tracks the number of attempts on question level. There is no system variable possible. Only on quiz level you can use cpQuizInfoAttempts.
  • v_max: will get assigned the number of attempts allowed for each question. In the example file, for the first question it has the value 2, for the second one the value 3. That makes it flexible.

Once you have the shared actions in an external library, no need for this first step. Just drag the shared actions (together) from the external library to the project library and they will be created automatically. Since they are in both shared actions, even if you replace the EnterQuest action by an advanced action, it will still be done by importing the second shared action FailureAct.

2. EnterQuest (Shared action)

This (standard) action is triggered by the On Enter event of the quiz slide.

For each quiz slide you’ll need this action to set the value for v_max and to increment the value of v_attempt by 1 to track attempts. This shared action has only 1 parameter: the literal which is the value of v_max for this particular quiz slide. If you want the same number of attempts for all the quiz slides, you can replace this shared action by an advanced action of course.

3. FailureAct (Shared action)

This (conditional) action is triggered by the Last Attempt event of each quiz slide. 

It has one parameter as well: the content slide which needs to be used for remediation.

4. Next buttons

Similar to the default Remediation, you need a Next button on each content slide with the action ‘Return to Quiz’.


Let's Play and Dream

Intro

I want to try to keep the tradition to offer a special blog at the start of a new year. Like last year it is a game, hiding my greetings card. There is some nostalgia here as you will read.

On my personal blog you can still find the very first game I every created exclusively with Captivate: no Javascript, no use of widgets nor other applications. That was almost a decade ago. Since that  game used Captivate 5 , it took me quite a number of hours to get a satisfactory result. If you still have a browser with Flash Player plugin enabled, you can even watch the embedded game in this post:

http://blog.lilybiri.com/concentration-game-created-exclusively-with-c

With version 11.5, all interactive learning interactions were taken out (lack of use), including the games. You will recognize the former ‘Memory game’ in this game which I offer as an interactive Greetings card for 2021. Last year I also offered a game for the Chinese New Year.

Using version 11.5,  this version took me only about 20% of the time I spent in 2011 for the original version. This game uses only one shared action with 3 parameters, one advanced action for reset (and another one to restart the game). It is also much more flexible than the original game. Creating another game with more or less pairs will be a breeze due to the shared action. Finding or creating the images will take lot longer than adding the actions. It is possible to create 'pairs' that are not identical images: for language learning you can pair an image with a word (and maybe even audio), you could pair words in different languages, acronyms with their description etc...

Personally I would have used CpExtra to reduce the statement lines in the Advanced actions, because that wonderful widget allows to Assign, Show, Hide, Disable multiple objects in one statement. However, for the sake of consistency I have created the advanced actions  in the default way.

Have fun in 2021!

Game

As usual, I provide both a link to a rescalable version, and an embedded one with a fixed resolution.



Invite

I want to organize a webinar about this topic:

Remodeling Advanced actions to flexible Shared actions

This would be for developers with some experience about variables and  Advanced actions. If you are interested, please add a comment. From exploring Shared actions I learned to use a different mindset and could offer practical tips. You can even send me an advanced action you estimate to be appropriate to convert to a shared action.


Who is afraid of ... Shared Actions - Crash course Introduction

For any Captivate user, new, intermediate or advanced.

Even if you are very new to Captivate, continue reading!

Contrary to Advanced Actions and JavaScript, Shared actions can be USED without needing to write out or edit scripts, nor to create variables. You don't need to be able to assemble an engine for your car to be able to drive, isn't it? What do you need?

  1. One or more shared actions created by a friend/colleague who is more advanced with Captivate
  2. To understand what a  'parameter' is (new term in your personal Captivate glossary)
  3. To learn how to add shared actions to your project, slides and interactive objects. Description and name of the shared action will help you (contrary to advanced actions).
  4. To choose the parameter values based on their descriptions. Automatic filtering by Captivate is a big help.

You read the introduction to a short ourse for adventurous newbies, including:

  1. A demo project with 4 useful interactions. All interactions can be realized using shared actions without having to create variables nor scripts.
  2. Explanation of the term 'parameter'

The course for newbies has TWO lessons. Each lesson comes in two 'flavors' to adapt to your taste:

  • Short video
  • Step-by-step text

To facilitate your learning/understanding, you'll get a start project  to practice the workflow.  You will also be able to use your personal project for the second lesson.  Both lessons are about one of the 4 interactions in the Demo project (see below). Depending on the 'welcome' by the community, may repeat this workflow for the other interactions or even for a game like  MatchStick game

Demo project

Watch this project, which includes 4 typical interactions:
  • Dashboard interaction (menu going to 4 chapters)
  • Slideshow
  • Click/Reveal
  • Toggle buttons

I used design elements from the new Quick Start Project ‘Diverse’. You can open the demo project using this link:

UsingSharedActions

Or watch it below  (fixed resolution):



What is a Parameter (in shared actions)?

This is my definition: a parameter is an ‘item’  replaceable by another item when you (re)use the shared action either in the same or in another project. That ‘item’ doesn’t always have a fixed type! It depends on the used command. Look at a some examples for clarification:
  1. Command Jump to slide: needs one parameter which is the slide. It is clear that you cannot change to another type of item than a slide.
  2. Command Change State of…: needs two parameters, first is the multistate object, second is the state you want to show. The first parameter has to be a multistate object of any type: shape, caption, button (for custom states), image, video, animation… Second parameter needs to be a state of that multistate object.
  3. Commands Hide/Show: need one parameter. Anything that can be shown or hidden is possible: shape, caption, button (for custom states), image, video. But also groups are possible! Look at the practice session below to see how this extends shared action functionality beyond what you are used to.

You may skip the explanation about the two types of parameters and go directly to the first lesson if you don’t like definition texts. Knowing the differences between parameters is not so important in this crash course, . BTW: the terms ‘compulsory’ and ‘candidate’ are just my personal choice, not official terms.

Compulsory parameters

All the items mentioned in the previous examples are compulsory: you will always have to choose them in any shared action.  Even though some will be the same in all instances of that shared action.

Candidate parameters

You probably know the command ‘Assign’ to store a value in a user variable or a system variable of the category ‘Movie Control’. A variable when used in a shared action can be a parameter, but it is not compulsory. If it is not a parameter, here is a rather unknown secret: importing the shared action in a new project will automatically create that variable, with the same name, description and value as designed originally. 
In some circumstances it is necessary to define the variable as parameter. You will see an example in the practice session for the toggle action.

In a conditional action you can have another candidate parameter, the ‘literal‘. Example: you want to limit a number of attempts by the learner to a maximum of 5. If you want to be able to edit that maximum number, you could define the literal as a parameter. This can be a bit tricky, but is beyond the scope of this basic blog.

Use Hyperlinks as Interactive Object.

Intro

Quite a while ago i have blogged about using Hyperlinks as interactive objects. Those blogs included examples. However the articles were written in the SWF era… which is almost over.  I'm talking about these posts::

More is in a hyperlink – Dropdown menu

More is in a hyperlink – Close button

Later on I used the Dropdown menu workflow in all the interactive videos which I posted here, to create a Bookmark menu. Here is one example: Custom Play/Pause button

Last week, a user asked questions about the same topic. That was the incentive to check out if the described workflows for SWF output were still valid for HTML5 output. 

Example file

You can have a look at this example file, where I show 4 use cases; or watch the embedded version below (fixed resolution, whereas the link goes to a rescalable HTML output):
  • Navigation buttons
  • Show/Hide workflow
  • Close button for a popup
  • Forced view

I did keep the typical Underline for the hyperlinks (but often edited the color). You will find tons of them. The design of the slides was taken from the Quick Start Project included with version 11.5, labeled ‘Rhapsody’. It always reminds me of the epoch of the Hippies…

No audio, sorry.  There is no playbar, nor TOC. Navigation is done with SVGs, which have a tooltip (added in the Rollover state) for those who use a desktop/laptop. It is a rescalable, non-responsive project. I  checked  out the workflows in a Fluid Boxes project as well, because they may be very interesting for that type of project.


Setup

Navigation menu

The list with commands which you can open when clicking the down arrow next to the field 'Web page' looks shorter than the Simple Actions list under the Actions tab for an interactive object:

Some commands are indeed missing, but most Slide commands can be found under the unique 'Slide' command. In this screenshot you see how to translate the Jump to Slide command, which you'll need to create navigation buttons (see Menu slide, second slide in the example project):

Comparing with interactive objects

The big advantage of using hyperlinks is that everything could be done with one text container, in which you mark several items as hyperlinks . Great way for a custom Table of Contents, which you can have sliding in/out. Especially for responsive projects: click box over text is not possible in a normal fluid box; limiting number of objects make setup much easier for Fluid Boxes workflow as well as for Breakpoint Views.

Alternative for buttons? Advantage is that you don't have shrinking of the text when pressed, you don't have to configure InBuilt states. Disadvantage: you miss the Visited state to indicate that an item has been visited.

Show/Hide

The slide with the hyperlinks in ellipses, was created as a 'dynamic' hyperlink (to be compared with Dynamic buttons). Text in the ellips are user variables, used as hyperlink. 

The user variables v_fx and v_KC  have a default value of 'Show', while the text shapes with the info are hidden with the On Enter action of the slide. A simple conditional action (similar for both) is used:

It would also be possible to have all the info boxes in one multistate object (which I use in the next two use cases).

Comparing with interactive objects

Similar to the navigation solution, if you don't like shrinking nor styling of InBuilt states this could be a solution. Again, since a Visited state is missing, that can be a drawback.

Another drawback is that you cannot use shared actions, which I would have done in this case. You need to use duplicate advanced actions.

Close button

Normally it is not possible to add an interactive object to a state in a multi-state object. You cannot create a hyperlink neither. However it is possible to have the same hyperlink available in all states, with the same triggered action. On the Close Box - slide, The info multi-state object is a shape with 6 states. Here is a screenshot:

Just FYI, the second state (QSP) looks different in the Object State panel, but that is just a  glitch. It is exactly the same on the state. To create this multistate object you need to follow carefully this workflow:

  • Create the shape (Tx_Info is the label I used) with a close hyperlink (big X), which I aligned to the bottom, centered. That will become the Normal state. You need to choose a command, but will have to edit that command later on. 
  • Go into the Object State panel and duplicate the state, the X hyperlink will be included in this second state.
  • Close the Object State panel and edit the hyperlink. It need to be 'Change state of Tx_Info to Normal'. 
  • Change the color of the X character to a color from the background, so that it will be invisible; if there is a Fill and/or a stroke, set Alpha and Stroke both to 0. The Normal state will now seem 'invisible'.
  • Return to the Object State panel.
  • Select the second state, style the X hyoerlink to a visible color. Add the necessary text and/or background fill.  Double check by previewing if the hyperlink action is functional.
  • Duplicate the second state, and edit the text/fill
  • Continue the duplication until you have all needed states.

I have tried with Hide for the hyperlink, but had lot of issues, seemed not to be functional. That is the reason why I switched to an invisible Normal state.

In the ellipses you find more hyperlinks. They change the multi-state object to the appropriate state. Here is an example for the first category 'QSP':

Comparing with interactive objects

As far as I know this is the only way to have an action propagating to other states in a multi-state object. Shared actions are not possible nor are Visited States (although with a more complicated advanced action possible).

The action triggered by the hyperlink can be rather complicated. A not so complicated example follows

Forced View

Setup of the multi-state object is quite the same as in the previous slide. In this case the change of state is triggered by real 'buttons', which seemed logical with this content. That also allowed me to use a Shared action. To track the clicks, a user variable is needed for each of the buttons. The shared action is visible in these two screenshots:

The X hyperlink, which was propagated to all states, triggers an advanced action with two decisions. The Back to Menu button is hidden with the On Enter event of the slide, and made visible when all variables have been toggled to 1. That meant that they all have been clicked:








Lightbox setup

Why?

Lightbox is a popular technique to make extra information (text, images, video…) stand out. Traditionally that information will appear on a background of an object which hides or dims the original objects on the slide. A way to close the lightbox is necessary, and will also make those objects visible again. In a way, the overlay slides in an interactive video are sort of lightbox as well. It is evident that such a lightbox is rather easy to create in a non-responsive project, but several limitations (like stacking) in Fluid Boxes project make it almost impossible. The example shown here, and the setup, was for a non-responsive project.

Recently a Captivate posted a question in the Adobe forums.: ‘How to create a lightbox within a state of an object‘. She was upgrading an older project, where the developer used a slide for each lightbox, by using multistate objects to replace the multiple slides.  After having asked for some extra information, it turned out to be more complicated than just the creation of lightboxes.  It was about a two-step process for extra information:

  1. Clicking a ‘question button’ would show the answer to the question as a popup (Click-Reveal workflow). That popup didn’t really need a way to close it, but clicking another question button should replace the content by new content. OP was correct that using a multistate object was the perfect workflow for this first step, with a Normal state which was invisible by setting Alpha (for the Fill) and Stroke both to 0. I have demonstrated this use multiple times in blogs.

  2. The content needed to have a way to open a ‘lightbox’ (in the traditional sense explained before) with more information related to the question/answer already shown. 

Problem

States in a multistate object, with the exception of the Normal state cannot have interactive objects! In both steps such an object is necessary. In the first step it is needed to open the proper lightbox, in the second step to close the lightbox.

Such an interactive object can be a button, a click box or… a hyperlink. Quite a while ago I wrote a couple of articles to demonstrate the power of hyperlinks which is ignored by many. However, for HTML5 output in the recent version (11.5.1) its use to run advance actions seems not always to be functtional, needs lot of testing. Originally when creating the sample output, I planned to use hyperlinks in most cases, but had to give up for the reason just explained. BTW all actions triggered by hyperlinks worked perfectly for SWF output. So I had to revert to buttons in most cases. I will explain the complete setup in a blog.

Example project

Watch this project. There is no real content for questions, answers nor lightboxes. Focus is only on the structure and workflow. There is one slide after the title slide, which has 5 question buttons:
  • Clicking a question button will show a popup which should contain the answer, and there is a (image used as) button to open the lightbox. The question buttons shows a ‘Current state’ when clicked.

  • Clicking the button opens a lightbox: cover, shape with content, and a hyperlink used to close the lightbox. When the lightbox is closed, the question button will revert to a ‘Done state’. It is not a Visited state, but a custom state.

You can watch the project below (fixed resolution) or using this link (rescalable output)


Setup

Objects – timeline

See the setup, using this screenshot of the timeline panel:

From bottom to top:

  • Five question buttons, which are shape buttons labeled SB_Quest1….SB_Quest5. They have a pausing point at the default 1.5secs. For those buttons I deleted the InBuilt Rollover and Down states, but added two custom states: ‘Current’ and ‘Done’. 
    .
  • A group of shapes used as text container for the answers SS_Answer1…. SS_Answer5. I could have used a multistate object as well. I started using individual texts because I hoped to use a hyperlink for the lightbox switch.

  • A shape used as Cover. Its position in the stack order is important: it needs to be above the answer and question objects, but under the multistate object SS_ExtraInfo. That cover is a shape, filled with dark gray, partially transparent. Beware: it is also used as text container: look for the text ‘Close Lightbox‘ which has been converted to a hyperlink triggering an advanced action.

  • Multistate object SS_ExtraInfo which has a state to appear in the lightbox for each of the answers. The Normal state is empty (Alpha and Stroke shape = 0).
  • Button Bt_Info (used a button from thitOt not necessary to be on top of the stack, Its position in the stack order is not important, because will be hidden when the lightbox appears.

Variable

One user variable v_quest was created. Default value can be empty. It will store the number of the question chosen by clicking the question button. That number is necessary for two advanced actions. as you’ll see below.

Events and Actions

On Enter slide event: "EnterAct"

This simple non-conditional action is meant to set the slide to its original situation:

If I had used a multistate object for the Answer popups, with a Normal state that was invisible (like for the SS_ExtraInfo), I would not have needed the second command (Hide Gr_Answer). By hiding the Cover, I also hide the hyperlink since it is a text in the cover. No need to hide SS_ExtraInfo since the Normal state is invisible. Why didn’t I use a hyperlink instead of the button Bt_Info? Because the advanced action was not triggered as it does when using SWF output. Too bad.

Question buttons:  Shared Action "QuestAct"

Another non-conditional action, based on this Advanced action:

I converted it to a Shared action, with these 6 parameters:

If you prefer a multistate objects over a group for the answers, you will still have 6 parameters, but the Group will be replaces by the name of the multistate object, and the Answer object by the wanted state.  I already explained my choice for a group.

Button Bt-Info: Advanced action "ShowLightBox"

This is an action with 6 decisions. The first decision is non-conditional, the five remaining decisions are conditional because a different state has to be shown based on the question number in the variable v_quest.  Those decisions have only one command and can easily be created with the duplicate decision button.

Hyperlink: Advanced action "CloseAct"

The hyperlink in the Cover shape triggers a 6 decision action very similar to the previous one:

More…

You can extend the described workflow to more than 5 questions. The shared action can be used, and you may have to add decisions to the two longer advanced actions.

I didn’t provide a close button on the answer popups, for learners who don’t want to see the lightbox, for whom the answer popup is sufficient. It could be done with a hyperlink or an extra button.

It would be possible to have something happen when all question buttons have been clicked, but that will require the creation of one extra variable for each button, a Boolean to be toggled from 0 to 1 if a button has been clicked.  The check for the extra happening has to be added to the CloseAct.