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

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)

• 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

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’.

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.

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

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

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

Candidate parameters

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.

Intro

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

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

Why?

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

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

• 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

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:

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.

Intro

Example project

I used some ready-to-go slides from the project ‘Earth’. I didn’t allow Review, and the score slide is not included. As usual, needed to edit the embedded slides. Several slides have a Pause On Enter, which is never a good idea IMO.

Setup

Multistate objects

Both popups triggered by the extra shape buttons labeled ‘Info’ and ‘Score’ are multistate objects with 2 states:

1. Normal state is a shape with Alpha = 0 and Stroke = 0. This means it is invisible to the user
2. State popup exists for both buttons, and has the necessary information to pop up. I used only text, but you can also add images or even event video.. For the Score button I used inserted system variables (cpQuizInfoPointsscored and cpQuizInfoPointsPerQuestionSlide). That way popup will have different values on each quiz slide.
   

   

The  multistate content shape objects (SS_Info and SS_Score) are inserted on the second slide ‘Instructions’ which is the slide preceding the first question slide.  This is very important, don't try to do it on the first question slide itself. I added a button Continue to that slide to replace the Pause On Enter. The multistate object timelines start after the pausing point of the button. They are timed for the rest of the project with the option ‘Place object on top’. Since their Normal state makes them invisible to the learner, no need to mess with Show/Hide.

Variables (Boolean)

Two Boolean variables were created, labeled v_info and v_score.  Their default value = 0, corresponding with the Normal state of the two mulitstate content shapes SS_Info and SS_Score.

Shape buttons

Actions and events

Hide buttons On Enter for Exit slide

Success action buttons SB_Info and SB_Score

A conditional action is needed. I preferred a shared action with 4 parameters. I suppose this is an action which can be used in many projects. If you import the shared action into a new project (from an External Library or with the Import functionality), you do not have to create the variables, only multistate content objects. The shared action is derived from this advanced action:

Each of the four parameters is marked  with a color. One of the big advantages of shared actions over advanced actions are the descriptions which explain clearly what you have to choose, see this screenshot which is for the second button SB_Score:

More?

Here are some possible changes or extensions of the idea, which is basically that you need the popups present on the slide BEFORE the first quiz slide and timed for the rest of the project.

• I used only text in a shape, but the popups can be anything, you can add images, video....
• With the present setup both popups can be visible at the same time. If you don't like that, add an extra command to the shared action (and a parameter) where you change the state for the 'other' popup back to Normal.
• You do not like the way popups have to be closed with the same toggle button? It is not possible to add interactive objects to a state, except to the Normal state. You can also insert a hyperlink like an X to the normal state. But that means you have to switch the content filled state (which is Popup at this moment) and the empty state. Bit more work but doable. About using Hyperlinks to trigger actions, have a look at More is in a Hyperlink
• If you want individual content in the popup, different for each quiz slide, remember you can use a variable to store content. Insert the variable in the content popup and populate it with the On Enter action of the quiz slide.
• ....

Intro

Being able to use SVG’s, for which you can limit the clickable area to the SVG itself, creates a lot of opportunities. In a recent post I explained how you can use them for a custom Hotspot question. 

This time I played with Flags, in Europe a lot of national flags have a cross embedded. Play with this example file. After the title slide which has some explanation, you have to color 5 knowledge check slides, Have fun. 

Small warning: if you are on a small screen, you may have to insist to color the small parts (especially on the UK slide). The part is really clicked when you have seen it shrink. You can play from this link (scalable HTML) or with the embedded version (fixed size):

Setup

You’ll find details about the setup,with topics:

• Objects (including timeline)
• Variables and Events
• Advanced actions
• Shared action (has been used 47 times)

Objects – timeline

From bottom to top you see:

• SS_Proback1: (smart shape) the white background of the progress bar (bottom left). Since the flags have different amounts of parts, I preferred to have an individual background on each flag slide, whereas
• SS_Progress: (smart shape) progress bar is timed for the rest of the project. It has a normal state which is invisible (no Alpha nor stroke), and a state for each added green star, totals 18 states but not all states are used on each slide.
• Gr_Denmark: has all the flag parts, on this slide 5. All parts are SVG’s used as buttons with the default pausing poins at 1.5secs. Each SVG has 3 object states: Normal (with a black pattern), Correct (colored), Wrong (Gray tint). Here is the screenshot with object states for the Cross part of the UK flag:
  

  
• Gr_Colors: group with 5 colors, timed for the rest of the project because same colors are used for all flags. Colors are shape buttons, default pausing point at 1.5s. They have 3 states: Normal, Current and Dimmed. Here a screenshot for the Red smart shape.
  

  
• Country_DK: country name (text)
• SB_Next: shape button timed for the rest of the project, no pausing point, with 3 InBuilt states (Normal, Rollover, Down)
• Title

Variables and events

Three user variables are created for the actions:

• v_color: will store the name of the color chosen from the color shapes; the exact names are needed which are Blue, DarkBlue, Red, White and Yellow.
  
  
• v_counter: will track the number of correct flag parts which have been colored (is equal to the number of stars displayed by the progress bar).
  
  
• v_max: the number of flag parts to be colored. For the first two flag slides this is 5, for the two following slides it is 9 and the last flag slide has 17 parts.

I didn’t provide a replay course button at the end, to limit the number of events and actions. The used events  are:.

• On Enter slide event for all flag slides. They trigger a similar advanced action, depending on the number of flag parts: 'Enter5' (first two flag slides), 'Enter9' (two following slides) and 'Enter17 'for the UK slide.
  
  
• On Enter slide event for the End slide triggers 'EnterEnd'.
  
  
• Success event for the Color shape buttons trigger a similar advanced action 'Blue_Act', 'DarkBlue_Act', 'Red_Act', 'White_Act' and 'Yellow_Act'.
  
  
• Success event of the SVG’s which are the flag parts (used as buttons), trigger all the same Shared Action 'FlagAct'.

Actions

Enter5Act/Enter9Act/Enter17Act (advanced actions)

You see it is mainly a Reset action. Because the color shape buttons are timed for the rest of the project, it is necessary to reset their state to Normal when entering a new slide.  That wouldn’t have been the case if I had repeated the colors on each slide, and left the option ‘Retain state …’ unchecked. However such a setup would have complicated the actions a lot more, than using this advanced action On Enter. The actions for 5 and 17 parts are almost identical, only the value of the variable v_max will change (command marked in red in screenshot). Because of the limited number of actions (3), and the fact that only one command had to be edited,  I prefer duplicate advanced actions over a shared action with multiple parameters.

EnterEnd

This simple action will hide several items which were displayed for the rest of the project and no longer necessary on the Congratulations slide:

Blue_Act, DarkBlue_Act, Red_Act, White_Act, Yellow_Act

These advanced actions are triggered by the success event of the color shape buttons.

The 5 actions are also very similar, here is the screenshot of the Red_Act:

It is very simple to duplicate the actions for the other colors, and change the first command and switch one dimmed and current state to adapt the action to the new active button.

FlagAct

Shared action triggered by the Success event of the flag parts (SVG used as button). In older versions than 11.5 this setup would not have been possible since many bounding boxes are overlapping. The shared action, which I used 47 times, looks like this:

I indicated the 6 parameters by a color code. Four of them are always the same, but they are compulsory, need to be parameters (Progress bar, Next button, Wrong and Correct states). Only the color and the flag part are important to set up correctly. A good labeling system for the flag parts can help. You may have seen that I took care of labeling in a consistent way.

Conclusion

Hope this example releases your creative ideas for similar use cases, both for adult learners and (of course) kids.  It would be great if you commented about that. Or do you have questions, suggestions?

Why?

Recently in this thread user asked how to control the appearance of a hint caption.  It was meant to save some frustrations to the learner: hint should appear automatically after some seconds (to be defined), but should not appear when the learner had performed a certain action before that time. This is clearly not possible with the inbuilt Hint messages for interactive buttons. They only appear when the learner is approaching the place where he should click. A custom solution needed to be found. Three solutions were posted, interesting to have a look and compare them. Personally I always bear in mind that someone would like to use this workflow in a fluid boxes responsive project, and that limits the possibilities because stacking is not allowed in normal fluid boxes. We have multistate objects and since a couple of versions a “Delay Next actions….” command.

Example movie

If you prefer to watch the rescalable version, use this link.

Workflow

Hint = multistate object

Both Hints on slides 2-3 are multistate objects. The normal state is the green text bubble, the second state ‘Void’ is completely empty:

On Enter Shared Action

• Hide the Hint shape
• Wait for a number of seconds
• Show the Hint shape
• Apply an effect (I used an emphasize effect).

Only two items needed to be defined as parameters: the Hint shape itself (compulsory parameter) and the literal used for the Delay, to make it possible to have a variable delay if wanted. The Parameter dialog box will look like this:

Advanced Action ArrowAct

What is the purpose of the Continue command? An advanced action will not release the playhead automatically as is possible with a simple action. On slide 2 a Next button has been added, with a timeline starting after the pausing point of the Arrow shapes acting as buttons. Release of the playhead is necessary to make the Next button visible.

Advanced Action DragAct

Why?

This is not a blog post for intermediate or advanced users. Since CP2019 is released, with the hotspots for 360 images and videos in a VR project or a normal project, I see the same question appearing regularly: why cannot we have that feature for a 2D image? Hence my idea to offer you some possible workflows with a step-by-step explanation and a free downloadable project file. This first post shows a project where the functionality of VR hotspots is being duplicated as close as possible:

• When user clicks a hotspot, text, image and/or audio will appear, and automatically disappear after a specified time (here you can also use video, which is not possible in a VR project)
• The hotspots get a checkmark after having been clicked.

However only the status ‘Exploratory’ is used, not the ‘Guided’ status. I would be able to reproduce that as well, but the workflow will be more complicated.

Example movie

Watch the result in this movie with 3 slides. After the title slide you’ll see the hotspot slide. The last slide lists up the steps explained below, if you want to create the workflow from scratch. I will also offer you the project file, you can also copy/paste the hotspot slide to your project, thus allowing to skip some steps.

Copy/Paste Slide

You can download the project file (created in version 11.0.1.266) from this link.

You can copy/paste the hotspot slide (slide 2) to your project. Replace the image. You can edit the design of the hotspots (names start with HS_), change the content of the states in the Multistate object labeled SS_Info.

Have a look at the Library, folder Shared Actions. You’ll see that it has been used 6 times, once for each hotspot. If you change names of the states in the multistate object, you will have to edit that parameter. Same for the duration. The other parameters are always the same for each hotspot: the name of the multistate object and its Normal state.

Steps, from scratch

Create hotspot

I used a shape button as hotspot. It has several advantages over the older type of buttons. You can choose any shape or create a custom shape (here I used just a circle), you can fil it with any color from your Theme Colors as solid color or in a gradient (I used a gradient) or even fill the shape with any image. Moreover you can type text in the shape. I kept the hotspot very simple: just a question mark. But you can replace the text or the fill as you like. It is important that the shape button – hotspot has at least two InBuilt states: the Normal and the Visited state. You could also use the Rollover and Down state, which I deleted in the example file/movie. This is the state panel of the hotspot:

Duplicate hotspot

I labeled the used style as ‘Hotspot’. However, the Visited state is not part of the style (which I regret a lot). For that reason I did duplicate the hotspots (CTRL-D). In the project the names start with HS_.  In the example movie you’ll see 6 hotspots.

Contrary to the hotspots in a VR project, these hotspots have a timeline. I kept the default setup: duration of  3 seconds and pausing at 1.5secs. That pausing point is where where the playhead will pause, exactly like for the hotspots on a VR slide.

Multistate object for popups

I put all the popups in one multistate object which is also a shape: it has 1 state more than the number of hotspots. The Normal state has to be ‘invisible’ by setting the Alpha for Fill = 0 and the stroke width = 0. Each of the following states has the assets for one popup. You will see that I have states with only a text container (background in any color, partially transparent), but some have also an image, audio and one even has an event video (which is not possible on a 3D slide).  You can choose any location, it is not locked to the Normal state location. In the example file, the Object states for this shape looks like this:

Import Shared Action ‘HotspotWorkflow1’

Use File, Import, External Library and open the file you downloaded. Find this shared action in the floating Library panel which will be opened. Drag that action to the Library of your project in the folder Shared Actions. More info about external libraries in this post.

Add shared action to hotspots

Select a hotspot. In the Actions tab of its Properties panel, for the Success action choose ‘Execute Shared Action’. Click on the tiny button {p} to define the parameters which are:

• Multistate object with the popups (labeled SS_Info) in my example file. That parameter is the same for all hotspots.
• State: having the info to pop up for that particular hotspot
• Time you want to leave the popup on screen, can be different for each hotspot
• Normal state of the multistate object, is same for all hotspots.

Here is one example screenshot for the hotspot referring to the Virtual Reality project:

Conclusion

Maybe you’ll already feel that this workflow could be optimized. I would prefer to give the learner control over the time he needs to watch the popups by adding a close button. Or maybe cover up the distracting background in a lightbox style? What about the next button only appearing when all hotspots have been clicked? Or a warning if not every hotspot has been visited when the learner clicks the Next button? Lot more workflows are possible, let me know which one you would prefer?