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:








Interactivity in Captivate (Back to basics)

Intro

Recently I presented a webinar about Interactivity in Captivate. It was not a public webinar, but composed of Adobe Community Professionals. Lot of the attendees were new to Captivate but well versed in other Adobe applications. However there were also some CP-experts. As usual I don’t present with Powerpoint, but with a Captivate presentation.  That makes it possible to publish later as an interactive tutorial, which you'll be able to view. It needed some editing of course to allow full control to the learner. Narration was added as well.

The design is based on the Quick Start Project 'Wired' included in the Assets panel of 11.5.1.499. Based on it I  created a personalized Theme, since that project in its non-responsive version has no master slides. The original fonts were replaced by two Adobe fonts (Termina and Filson Soft family). The interactions were recreated with workflows which I prefer over the embedded ones. 

The goal was to show popular workflows to create interactivity. You will see: Branching (menu), Forced viewing,  Progress bars, Click&Reveal, Drag&Drop, Knowledge Check slides, Games. In the webinar the presentation was used along demonstrations of the used workflows in simple examples, with lot of good practice tips. Lot of multi-state objects were used, Guides, import of source Photoshop files, shared/advanced actions and variables.

The menu slide after the start slide is the pillar. When you see a Back to Menu button appear, you'll be navigated back to this slide. The tooltip for this back button is part of the Rollover state.

Click to see the presentation in a rescalable version or watch the embedded version (fixed resolution) below:

Feedback

Did you like this presentation? Would you like more 'back to basics' blogs, or tutorials? Do you have questions? Are you able to recreate the demonstrated workflows? Lot of questions where I would like to see some answers.


Find the differences (game)

To all readers: best wishes for a healthy and enthralling 2020!

Have some fun with this small game, created from an Adobe Stock image, using Illustrator (for assets) and Captivate 11.5. Again SVGs are used extensively. You can play the embedded game (fixed resolution) but I recommend to play it from this link which is a rescalable version. It may be easier to find the differences, especially if you are using a big screen.


Lot of SVGs, some multistate objects, one shared action, two small advanced actions + two variables. If you follow me since a while you know that I had lot of fun with all my favourite Captivate tools.  I didn't use any Javascript directly (actions are converted to JS on runtime) but I’m sure this can be done with JS as well.

The usual white screen with grey arrow is replaced by a poster image. After the mysterious title slide game, game and end image are all on the second slide.

Setup

Objects and Timeline

SVGs reign as you can see in the screenshot of the Timeline panel of the game slide:

The stacking (z-order) of the objects is important. From bottom to top you see:

  • Two instances of the same image (SV_Correct to the left and SV_NOK to the right.
  • Two text containers which show the two titles (Tx_Correct and Tx_Difference).
  • A click box CB_Wrong: it is important that this click box is below all other interactive objects, and that its pausing point is at the same time as the other ones (here 1.5secs).
  • 7 SVGs functioning as buttons. Those are the correct hotspots (if you want to cheat... look at the labels). They need to be on top of the click box, but the stacking sequence of those SVGs is not important. The Rollover and Down states of those SVGs have been deleted. One custom state 'Down' has been added, which has the Chinese character for 'OK'.
  • A multistate object functioning as progress bar. The Normal state is invisible (Alpha set to 0), and you see all the states in this screenshot:

    Just a note: there are some display problems with SVGs in the present version, and that can make the previous screenshot bit confusing. Although the circles have the same size in all states, they seem to be smaller when more circles are present. Moreover something seems to be wrong with the C4 state: total width seems smaller than for the other states. Reason was that originally that state switched to 'Custom', instead of Original.
    In this case it is very important that the option 'Original' size is forced for each state.
  • A shape 'Cover', which is rectangular filled with Solid dark gray, with Alpha = 70%.
  • Final image 'SV_Eind' (sorry for the Dutch label). 

Variables 

Two user variables were created:

  • v_counter: with a start value of 0, will be incremented when a correct hotspot has been clicked.
  • v_hotspot: will be set to the number of hotspots minus 1; in this case it is set to 6 since there are 7 hotspots.

Advanced Actions

Two advanced actions are used:

EnterGame triggered by the On Enter event of the Game slide

As usual this standard action will prepare the correct situation for the slide:

WrongAct triggered by the Success event of the Click box CB_Wrong

Another rather simple standard action, to let some audio play and have effects with the cover:


Shared Action 'CorrectHotspot' triggered by the SVG buttons (Success event)

The most important script for this game. Several actions happen when a correct hotspot is clicked:

  • An effect is applied to emphasize the clicked SVG, in this example I used a ScaleTo effect.
  • Secondary an audio clip is played (sort of congratulation)
  • The hotspot needs to be disabled, to avoid having it clicked multiple times.
  • To track the number of discovered hotspots, the counter variable needs to be incremented.
  • Progress has to change in the indicator (yellow circles multistate object)
  • When all hotspots have been found, the final image has to appear (with an effect).

This is a Preview of a filled in action, where the 5 necessary parameters are marked in a color rectangle:

None of the candidate parameters need to be a parameter: the two variables (v_counter and v_hotspot) nor the literals. As I have emphasized many times, it can be tricky to define a literal as parameter. In this particular case it could have been possible to indicate the Delay time needed to listen to the audio clip being defined as parameter. That would be necessary if you want to use audio clips with very different lengths for the the individual hotspots. The parameters are visible in this screenshot:

Why shared action instead of duplicate advanced actions?

You can use exactly the same shared action if you have a different number of hotspots (differences). Just edit the action EnterGame to replace the value to be assigned to the variable v_hotspot. It is the reason I replaced the literal '6' by a variable v_hotspot. Several parameters are used multiple times in the shared action: the name of the progress bar, the hotspot, the audio clip. When using duplicate advanced actions you would have to edit quite a lot. 

One of the disadvantages is the fixed status of the applied Effects. If you want another effect, use the shared action as template for an advanced action, replace the effects and save it as a new Shared action. If you are new to shared actions: contrary to advanced actions it is perfectly possible to save a new action with the same name, provided the older one is no longer used.






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.

Prevent Skipping on Drag&Drop quiz slide

Intro

In a recent thread user asked how to prevent that a learner would click the Submit button on a Drag&Drop slide before having performed at least one drag action. Sort of alternative for preventing ‘Skip’ on a normal quiz slide. Such functionality is not available out of the box.  The D&D slide needed to be scored, which made the situation more complicated (easy reset by developer is only possible for Knowledge Check slides).

Like all quiz buttons, the Submit button on a D&D slide is an embedded objects. Consequence: it doesn’t have an individual timeline nor an ID. There is no way to disable that button. You can drag it out to the scratch area, and use Auto Submit, but that was of course no solution for this situation.

Example file

Have a look at this published file.  As usual I used some ready-to-go-slides, in this case from the project ‘Rhapsody’.  All slides were taken from this Quick Start Project, but I deleted the existing Drag&Drop interactions,  just used the design components. After the title slide, you’ll see two Drag&Drop slides. The Submit button is not on the slide when you start, it will only appear after the first drag action.

The Submit button is not on the slide when you start, it will only appear after the first drag action.  To make the slides more similar to quiz slides, I added a second step to the Submit Process.

Check your Captivate knowledge for version 11.5. Either use this link (rescalable) or watch the embedded published file (fixed size):


The trick is to use the Timeline and a motion path effect triggered by any Object action. Not really very complicated, follow the steps below. This workflow, due to stacking of objects, is not that easy in a Fluid Boxes project, the example was a non-responsive project with Scalable HTML output.

Step-by-step Delaying Submit button

1. Pause the timeline before the default pausing point

By default each Drag&Drop slide has a pausing point at 1.5secs, similar to question slides and linked to the Submit process. Too bad, that pausing point is not visible in the Timeline panel, you can only see and edit it in the D&D panel.

You need to pause the timeline at a frame before this pausing point  at 1.5secs by inserting an interactive object which remains invisible to the learner. In this case I inserted a click box, small size (1px for width and height) and located in a place where it is very improbable that learner will try to click. Set it to infinite attempts with the command ‘No action’ to be triggered by its Success event; do not show the Hand cursor. Have a look at this screenshot for the setup of this click box:

The topmost click box which appears later, will be explained the workflow for creating second step Submit process.

Step 2: Drag Submit button off the slide

To make the Submit button invisible you drag it in the scratch area, either to the left (first D&D slide) or to the right (second D&D slide).

Step 3: Timebased motion effect to Submit

Although the Submit button is an embedded object, you can apply an effect to it using the Right-click menu or the Timing properties. The timing of the effect will not be visible in the Timeline panel, because the button has no timeline. The only way to set up the timing is with the numbers in the Timing panel. This motion effect (I used Left-to -right or the opposite one depending on the location) can be very short (used 0.2secs). It is important that it starts at or after the pausing point of the click box (step 1), and ends before the default D&D pausing point (which was kept at 1.5secs.). See this screenshot for one of the Submit buttons:

Step 4: Create User variable 'v_drag'

Create a Boolean variable, labeled it v_drag. Its default value should be 1. It will be toggled to  after the first drag action.

Step 5: Advanced (conditional) action 'ObjectAct'

The purpose of this action is to release the playhead with the first dragging of any drag source to a target. The result will be that the Timebased effect on the Submit button will occur, and the Submit button enters the slide. The playhead will be paused by the default D&D pausing point at 1.5secs. Hence the importance of the timing of the effect described in step 3.  To avoid a same playhead release to happen on subsequent dragging, the tracking variable v_drag is toggled to 0, and the action is conditional:

Step 6: Attach 'ObjectAct' to all Object actions

Since you don't know which will be the first drag action, you need to attach to every drag action. That  is the boring part since there is no easy way to attach the same action to all at once, not even for one drop target. Here are the steps for each drop target:

  • Select the drop target
  • Click the button ‘Object Actions’ in the tab ‘Format’
  • For each of the drag sources open the No action list, choose Execute Advanced Action
  • Choose ‘ObjectAct’ as advanced action.

In the example file you’ll have 3*6=18 object actions in the first D&D slide, and 4*4=16 in the second slide. I really hope one day there will be a way to apply the same action to multiple object actions at once…

Do not forget to test! The actions Success and Last Attempt (wrongly labeled as Failure) were left both to the default command ‘Continue’. That way the learner will have time to watch the feedback. Timing of the feedback shapes (or captions) can be edited as you probably know.

Workflow: adding second step to Submit Process

If you veiwed the example file, there was a second step (click the slide to proceed) added. If you don’t do that, the feedback message will appear and the playhead will be released, out of control for the learner. It is a simple trick, as you may already have seen in the first screenshot of the Timeline for the first click box.

I added a second click box, covering the whole slide, but appearing after the release of the playhead by the Drag&Drop actions on Success of Last Attempt (1.5seconds). This click box triggers the default ‘Go to Next Slide’:

Don’t forget to warn the learner about this second step, The example file had the warning in the feedback messages.

This last extra workflow is NOT possible in a Fluid Boxes project because stacking is not allowed. You can use the first workflow with the motion path in a Fluid Boxes project, but may have to replace the click box by an invisible shape or transparent button (no fill nor stroke) if you want to add them to a normal fluid box.

Popups on Quiz slides?

Intro

This question appeared recently in the Adobe forums from a user wanting to use (shape) buttons to show popups: “….instruction pop-up is appearing under the question content…”. That is indeed a problem: all embedded quizzing objects (those without an individual timeline) have absolute priority in the stacking (z-order). They are always on top.  I have posted an answer to similar questions in the SWF-past years ago. In this short post, you’ll find a new example output, for HTML5  based on the same trick used before: use an object created on a slide before the quiz slides, time it for the rest of the project with the option ‘always on top’. That object will cover the embedded quiz objects. In the past I used Show/Hide to make it visible, but now of course I took advantage of multistate objects and my favorite shared actions.

Example project

Watch this published project. on any device (rescalable), or the embedded one below (fixed resolution). On the quiz slides you’ll find two extra toggle buttons ‘Info’ and ‘Score’ which can be used to open and close a popup (in reality I change the state of an object).


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

On the first quiz slide I created two shape buttons, which have exactly the same look as the Transparent buttons used on the quiz slide (Submit button). These buttons SB_Info and SB_Score are also timed for the rest of the project with the option ‘Place object on top’. In this example Review is not allowed, which avoids the possible overlapping by the Review navigation buttons. Of course it is possible to hide the shape buttons in review mode if necessary. I did take out the pausing point for both Info and Score button. As you can see in the timeline, I moved the slide pausing point towards the end of the quiz slide to avoid waiting after the second step in the Submit process.

Actions and events

Hide buttons On Enter for Exit slide

The buttons SB_Info and SB_Score - timed for the rest of the project -  have to be hidden on that slide, which can be done with a simple action (if you group the buttons) or with a two-command advanced action. It is not necessary to hide the multistate objects. They will always return to their Normal state on each slide, which means they are invisible to the learner.

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


Quiz: Replace Score by 100% or 0%

Intro

Recent question on the Adobe forums is the reason for this blog. User didn't want the score (points or percentage) to be transferred to a LMS. Since the questions were random questions, using pools, it was impossible to use Knowledge Check slides, nor Pretest slides. The requirement to succeed the assessment was to have a minimum amount of correctly answered questions (7 out of 8). If that was the case, the transferred result to be transferred to the LMS should be 100%, and on failure 0%. I designed a workflow based on previous blogs about Random quiz slides and Reporting custom quiz slides. You will be able to check out a published example project, and follow the setup, Step-by-Step. To save some time I used a couple of ready-to-go slides from the project 'Alliance', but had to do edit of course.

Example

You can watch this file either from this link, (scalable)  or in its embedded version (fixed resolution):

Project has 11 slides, one of them (default results slide) is hidden. A pool was used to insert 5 random quiz slides. You need to have at least 4 correctly answered questions to obtain a score of 100%.


Setup

Here is the filmstrip of the example file:

Slides 1-3 are based on ready-to-go slides from the project Alliance.

Slides 4-8 are random quiz slides taken from a pool with 10 questions.

Slide 9 is again taken from Alliance (but with lot of multistate objects, see later).

Slide 10 is the hidden default score slide. It will automatically be moved after slide 9 because of the scored button on this slide (see step 3).

Slide 11,  final slide allowing to be sure that the final result (100% or 0% ) is correctly transferred to the LMS. I inserted the system variable cpInfoPercentage in a shape on this slide (top left).

Step 1: Score random question slides

Supposed you have the question pools ready, insert the required amount of random quiz slides in the project. All slides in a pool have by default the same score (10 points), it is not possible to have partial scores for MCQs with multiple correct answers.  There seems to be a bug for a FIB slide, where the correct answer appears as tooltip in case you have that question. Will log the bug, seems new.

Once the random quiz slides are inserted, it IS possible to edit the score. I took all score out, set them to 0. Just a tip, check the Advanced Interaction panel (F9, or under the Project menu) to see that the total quiz score is now indeed set to zero.  Penalty has no sense in this situation because success doesn't depend on the acquired score of the quiz.

To avoid long waiting time after the submit process for a question, I moved the pausing point near the end of the slides in all the pool questions.

Step 2: Tracking correct questions

To track the number of correctly answered question, you need to create a user variable v_counter, with a start value = 0. 

That variable needs to be incremented with each correct answer.  Number of attempts on question level is set to 1. It is then sufficient to create a simple advanced action to be triggered by the Success event of all random quiz slides:

Step 3: Results slide

I used a ready-to-go slide to show the result, but have converted several objects to multistate objects. The Normal state is the one shown on Success, the Failure (new) custom state will be shown on failure. This is the timeline of that slide:

Moreover I added two interactive objects to the slide, both invisible in output to start with (eye button in Properties):

  • Bt_Failure: is a transparent button similar to the Next button in the Alliance project. It has its default command 'Go to Next Slide'. 
  • SB_Success: is a start shape marked as button. Special is the fact that this button is set to Report (Actions tab ), and to include in Quiz. When you check in the Advanced Interaction panel (F9), this shows:

 Step 4: Conditional action EnterResult 

Use the On Enter action of the Results slide (slide 9) to show the correct state of the 4 multistate objects shown in the Timeline screenshot, and to show either the button SB_Success or Bt_Failure, based on the requirement of having at least 4 answers correct. Of course, the number 4 can be changed (OP wanted 7 correct answers). The action is self-explanatory:

This trick with the two buttons was published in my blog, over 8 years ago. The example file in that article is of course SWF output.  I didn't want to use two identical buttons - same location - in the example of today because that is impossible in Fluid Boxes projects.  This was not such a project, but it is perfectly possible to use the same workflow in a responsive project. It was also the main reason for the multistate objects used on this Results slide.

Extra: Editing Alliances

This is bit off topic, just for those interested

I did edit the ready-to-go slides a lot. Having a pause triggered by the On Exit event is not something  like because it can create problems. All slides have at least one interactive object, which can pause the slide near its end. That project has some quiz slides, but they are NOT based on the quizzing master slides. This means that the theme was not fully realized. When I inserted random quiz slides, which necessarily do use quizzing master slides they looked very different from the nice quiz slides. I have updated the master slides to make them looking approximately like the ready-to-go slides.

There are more problems with this project, which I detected but didn't encounter in this particular project. As I have written in previous posts, never do use the Switch to Destination theme!

Sequence check slides (updated version)

Intro

More than 7 years ago I wrote a similar blog post: how can you check the sequence of clicks. Of course the embedded tutorial was a SWF, since only that type of output was supported at that moment. This post is an update with HTML5 output, and taking advantage of new features (multistate objects, SVGs as buttons). 

Example

Play with this example project. I inserted two examples of sequence checks:
  • Geo slide: alphabetically clicks on countries (used English names, not the original names of the coutnries)
  • Keypad slide typing the pincode on a numeric keypad.

First and last slide are taken from the Quick Start Project 'Aspire'. The images used as button also are from the Assets panel.

You probably will have more ideas where this workflow can be used for Knowledge Check slides. There is a sequence type of quiz slide, you can test a sequence with Drag&Drop slides, but these alternatives are less limited in design. ould love to hear your proposals for sequence checks as well


Setup

Variables

Similar to the old post I used only two user variables (to be created):
  • v_counter: will track the number of clicks on interactive objects. It starts with a default value of 0. It is reused on the second sequence slide, by resetting to the default value using the On Enter action of that slide.
  • v_correct: will track the number of correct clicks, set up with default value of 0 and re-used in the same way as the previous variable.

Multistate Objects

Instead of the hide/show workflow used in the original post, multi-state objects to display the feedback are used. That object is labeled Tx_Display (for the Geo-slide) and Tx_DisplayBis (for the Keypad slide). Look at the screenshot of the Object state panel for Tx_Display:

The Normal state is empty (easy to reset, will automatically reset when returning to the slide if ‘Retain State’ is unchecked). The 6 following states correspond with the correct sequence, hence their labeling. The last state is the Wrong state. The sequence of states is important, because I will be using the ‘Go to Next State’ command in the actions.

SVGs

If you did read some recent posts, you know that I am a big fan of the use of SVGs both for image and interactive objects. In this case I used them mostly because they remain crisp at any resolution and lead to very small file size. The file size of the published project is less than 4MB. ¨Probably half of that size is due to the bitmap images on the ready-to-go slides, and the unique PNG which I used for the Background of the Keypad. Look at the timelines of the sequence slides. SVGs are grouped. Too bad that you cannot recognize the interactive object from the color (should be green), but they all have a pausing point set at 1.5secs (Europe SVG is not a button).

 

The group Gr_Wrong on the Keypad groups all button SVGS which are not used in the pincode. Those buttons are on top of the image, and can be hidden, since the remaining keypad image shows them as well but in a non-interactive version. For the Geo slide, the colored country  SVG buttons are also on top of a big SVG (Europe), but I don’t want the colored ones to disappear, for that reason the buttons will be disabled, not hidden (see advanced actions below).

Actions and events – Geo slide

The colored country SVG buttons trigger an advanced action On Success. There are 6 countries, which means 6 advanced actions (created with the duplicate function). The five first actions are similar to this SV1_Act:

Only the items marked by a red oval have to be switched for the actions SV2….SV5Act: the name of the SVG button in the first decision, and the literal (number) in the second decision. If the clicked country is not fitting in the correct sequence, the learner sees the Wrong state in the multistate shape and the Retry button will appear.

The last country SVG button (SV6) has a slightly different action, derived from the previous one.  Reason: the Next button has to appear if the sequence is correct. That extra command is highlighted by a blue rectangle.

The Next button has the default command ‘Go to Next Slide’ on its Success event.

The Retry button needs to  everything, as you can see in this screenshot. Action is triggered by the Success event:

Actions and events – Keypad slide

Because of the re-use of the variables v_counter, v_correct and the button Bt_Next which is timed for the rest of the project, the On Enter event of this slide is used to reset everything to default values. If you want to allow going back to slides, a similar action would be needed for the Geo slide, but that was not the case in the example file. The On Enter action is pretty simple:

Some explanation may be needed for the Hide command which I highlighted. Since the required pincode (29791) needs the number ‘9’ twice (second and fourth position in the sequence) I have put two SVGs on top of each other: SVG_Two and SVG_Four. By default SVG_Two is visible, but SVG_Four  is hidden and becomes visible With the same action where SVG_Two is hidden. You cannot have two interactive objects on top of each other when both are active at the same location.

The Number buttons trigger an advanced action On Success.  It is similar to the one in the Geo slide, except for using Hiding instead of disabling. Example of the first number button (which is 2):

As explained above, for SVG_Second (number 9) is bit different

Similar to the Geo slide, the last correct button (number 1) will show the Next button if all was correct:

Any wrong number button will trigger this action using its Success event:

The new Retry button, labeled RetryBis is similar to the one on the Geo slide, triggers:

Remember that the SVG button Four  is in the same location as Two, because both have the number 9. That is why SVG_Four has to be hidden and SVG_Two shown.

Why no Shared Actions?

Although we have very similar actions for the SVG buttons, both on the Geo slide and on the Keypad slide, this is a typical use case where it is impossible to use shared actions. Problem are the ‘literals’, which should have been converted to parameters. Look at the screenshot of the action SV1_Act posted earlier. Logically these items should be parameters:
  • The SVG button SV_1 – compulsory parameter in the first decision
  • The literal ‘1’ in the condition of the second edition, not compulsory
  • The multistate object Tx_Display, compulsory parameter in the second decision
  • The state Wrong in the ELSE part of the second decision
  • The button Bt_Next in the ELSE part of the second decision

Why is the literal a problem? Because it is also used in the Increment command. If you replace it by 2 for the second button, this will also be the case in the Increment command. I may have a workaround, but it is not always functional.

Second reason: with the workaround the parameters would increase to 6, which is my limit for a usable Shared action. Whereas using duplicate functionality for the advanced action is lot quicker, since only two items need to be edited.

This blog is already way too long. If you like to hear about my ‘thumb rules’ for choosing between duplicate advanced and shared actions, post a comment. Maybe I’ll dedicate another blog to it.

Avoid frustrations in Pretest.

Why?

More than 7 years ago I wrote a post ‘Quiz and Frustration‘.  It was about a use case,  asked for by a forum user, how to stop an assessment when the learner could never succeed because he lost already too much points. It feels like being kind to the learner, avoiding frustrations. Recently a similar question appeared, this time about a Pretest. Pretest slides as designed since many versions in Captivate, are also frustrating because of their limitations. You need to have all the Pretest slides in sequence at the start of the course, all navigation will be disabled, almost all commands for On Enter events are greyed out. In short: there is almost no possibility to tweak Pretest slides, reason why I don’t remember having used them ever.

In Flanders there is a saying ‘Twee vliegen in één klap’ (killing two flies at once). Let me show a workaround for a Pretest (without the normal limitations) and update  that old post, taking advantage of improvements since …. version 6. Have to refurbish a lot of posts, which are still attracting visitors, with HTML5 output. Here is one of them.

Example file

Explore this published file:


The course starts with a Pretest (7 questions). Based on the obtained scores, 3 situations are possible: Learner gets a passing score on the Pretest. In that case he will see the score slide. Learner answers some questions, but due to the low score, will not be able to finish the pretest with succes even if all remaining questions are answered correctly. In that case the remaining questions will be skipped and the learner will have to view content slides. Learner finishes pretest but at the end didn’t get a passing score, same situation as in the second one: learner will have to view content slides. I didn’t add content slides, just a symbolic one. It is possible that other actions are wanted at the end, but focus of this example is only on the workflow to have questions skipped (second situation).

Setup

It was not possible to use the default Pretest slides because they do not allow advanced actions to be triggered with the On Enter slide event, which is possible with normal Quiz slides. That is why I needed to use those slides for the 'Pretest'. This may lead to a problem if you want to add a final quiz. Quizzing system variables, part of which are transferred to the LMS, will take into account all quiz slides. The easiest way to avoid this is to have the final quiz in a separate file, to which you link from this course. With JS  or with the CpExtra widget by InfoSemantics - Australia, it is possible to change the values of the system variables if you really need the final quiz in the same course. 

I will explain the variables used in this example, and the actions/events in the rest below.


Variables

Several variables were used in the file, both quizzing system and user variables:

System variables

cpQuizInfoPointsPerQuestionSlide: reusable variable, has the max score which the learner can get on the active quiz slide

cpQuizInfoPointsscored: the points scored so far by the learner, is updated after the Submit button is clicked.

cpInfoLastVisitedSlide: is used to check if the learner gets to a slide from the previous slide or from another slide (because getting a passing score has become impossible.

User variables

v_MaxPretest: has to be defined with the maximum score possible for the Pretest. In the example file I could have used the system variable cpQuizInfoTotalQuizPoints. I preferred not to do so. If the developer wants a final quiz in the same course, that variable has to be manipulated with JS or with the CpExtra Widget (InfoSemantics).  The value has to be filled in on definition, in this case it was 40 points. All questions also have penalty, and partial score for MCQ with multiple correct answers.

v_PassPerc: required pass percentage for the Pretest. As explained for the previous variable, I preferred a specific variable instead of the system variable cpQuizInfoPassPercent. The value has to be filled in on definition, in this case it was set to 80  %.

v_PassScore: will be calculated from the two previous variables (is same in the example as cpQuizInfoPassPoints.

v_MaxUntil: will be calculated. What is the maximum score the learner would have gotten until the present question (all answers correct).

v_MaxRemain: will be calculated. What is the maximum score the learner can obtain with the remaining questions? Logically the sum of v_MaxUntil and v_MaxRemain should be equal to v_MaxPretest.

v_Possible: will be calculated, what is the maximum score which the learner can obtain if he/she gives a correct answer to all questions still to be answered.

Advanced Actions – Events

I used 4 advanced actions in the project. Three of them are triggered by On Enter Slide events, and one by all Success and Last Attempt actions for the quiz slides. I had only one attempt in each quiz slide.

EnterFirst

This action is triggered by the On Enter event of the first Question slide.  No condition in this action, just a sequence of commands. It is meant to calculate the values of some system variables as you can see in this screenshot:

The variable v_Passcore is calculated from two other variables having a default value. In this case v_MaxPretest was 40 points  (maximum score) and v_PassPerc = 80% required for passing the test. Result will be 32 points for v_Passscore.

The variable v_MaxUntil will get its first value, which is the score possible to obtain for this first quiz slide.

EnterPre

Is also a simple, non-conditional  action, triggered by all On Enter events of the question slides, with the exception of the first one (used 6 times in the example file). On each slide the variable v_Until is increased with the new value of the question score on that slide.

CheckPre

This action is triggered by both the Success and the Last Attempt action of each quiz slide, in total 14 times.

The trick used is to calculate v_Possible, which is the maximum score a learner can still get after the present question, supposing he/she will give a correct answer to all the remaining questions  (value of v_MaxRemain). Learner already obtained a score stored in cpQuizInfoPointsscored. This calculation happens in the first decision ‘Maths’.

The second decision is conditional, and will navigate the learner out of the Pretest (Jump to Score slide) if he will not be able to pass the test. If it is still possible to acquire the passing score, the test continues.

EnterScore

This is the most complicated action, because it has to take care of three situations.  Each situation results in a conditional decision:

  1. If the learner has finished all questions (last visited slide was slide 8, which is the last question slide), but did fail, (comparing score with v_PassScore).  In that case the appropriate state of an multistate SVG and a multistate text container is shown.  The Next button appears as well.

  2. If the learner has not finished all questions, (last visited slide was not slide 8) another state is made visible for both multistate objects, and the Next button appears.

  3. If the learner has a passing score for the test, another state is shown and not the Next button, but the ‘ToTest’ button appears, which will navigate the learner to the results slide (from which a separate quiz file can be launched).
Next button has the usual ‘Go to Next Slide’, whereas the ToTest’ button jumps to the results slide, which is the last slide in the example file.

Conclusion

Of course the same approach can be used for a normal quiz. It can spare the learner a lot of frustrations if he started the quiz, without mastering the content, and quickly sees that the result will never be sufficient. That was the original reason for the first older post. 

It would be interesting to know if you ever use the default Pretest slides, because I really dislike the many limitations. All Pretest slides need to be at the start of the course and in sequence. All navigation will be disabled, on the playbar as well in the TOC, not only for the Pretest slides but also for content slides which is very annoying. What do you think?

Would it be possible to replace the Pretest slides by Knowledge Check slides? I suspect it would be possible, maybe stuff for another 'anti-frustration' post? The advantage would be that a final quiz will be easier to set up.

Tips: adding Audio to QSP-slides (ready-to-go slides)

Intro

In some previous blogs I have warned to be careful with using the Switch to Destination Theme feature, have demonstrated an alternate but safer workflow to embed ready-to-go slides in a course with a custom theme. Because the themes in the responsive and non-responsive Quick Start Projects are not identical, I added a third post explaining the possible issues in the responsive version. That last post offers a free table with the names of all the master slides (including the most recent Alliance project).  It is an important resource if you want to avoid issues when embedding a ready-to-go slide. Issues occur when your present custom theme and the theme of the embedded slide have identically named master slides.

Only two QSP projects have audio in the Library: Rhapsody and Wired. The clips are used on the Podcast slide, triggered with the Play Audio command. As you all know, adding good Narration (VO) to an eLearning course will enhance the efficiency of that course considerably. Designers of the QSP’s have taken care of an easy replacement of graphical assets for you, but if you want to add narration or other audio to the course, you get no help.  This post will try to help you with some tips. It will not handle the creation of the audio clips, whether you use the TTS feature or a real audio recording. Only tips to avoid frustration when adding audio to the slides. Since the Closed Captioning feature of Captivate is limited to slide audio, the post will not explain how to add other types of audio. At the end you’ll find some more links which could help you in that case.

Adding audio clip

My usual workflow for inserting an audio clip as slide audio is:
  • Import the audio clips to the project Library
  • Drag the audio clip to the timeline of the slide (or to the stage, be careful not to drag to an object on the stage). Originally the slide timeline on most QSP slides is 3 seconds. If the audio clip is longer, a dialog box will appear. Choose the first option to extend the slide timeline.
  • Audio timeline appears below the slide timeline. I will increase the slide timeline duration manually bit more, so that I’m able to move the audio clip to leave a small gap before and after the audio.
  • You see in previous screenshot that all the object timelines have been extended automatically.  Reason is that most - but not all  - slides in the QSP are timed for the 'Rest of the Slide'. Check Timing Properties. Have also a look at Tip 1 below.

  • Test the audio, not by using Play Slide but by using a real Preview. This means for a non-responsive project that you need to use F11, Preview HTML5 in Browser. For responsive projects any Preview is fine. The three following tips are meant to fix problems detected during previewing.

Tip 1: Fix when objects disappear

In many slides, objects are timed for the Rest of the slide. Result: when the slide duration is increased to fit the audio clip, all object timelines will follow that example. However there are some exceptions, as seen in this screenshot:

In this slide (12 from Aspire) some objects have a timeline keeping the original duration of 3secs. When playing that slide in Preview, those objects will disappear after 3 seconds.

How to fix?

Select those objects which are not correctly timed. This can be done by clicking their timelines in combination with CTRL (or SHIFT for sequential timelines) key. TUsing the shortcut key ‘CTRL-E’ will change their timing to ‘Rest of Slide’. You can use the Timing properties of course.

Tip 2: Pause commands on slide events

Many slides in the Aspire project have the setup as shown in this screenshot.

This setup will prevent the audio clip on the slide from playing because the Pause command on the first frame will pause also slide a udio.

You have to take out that pause. You can safely replace it by ‘No action’ which is the default setting both for On Enter and On Exit slide events Result will be that the slide will not be paused, but the playhead will move seamlessly to the next slide when the audio has finished. That is IMO the most logical situation. If you want to mimick a presentation, where each slide is paused at the end and needs learner intervention, you can change the On Exit action to ‘Pause’ or add a button ‘Next’ to pause the slide. However do not forget that this may not be the best practice.

Many slides in the other QSP projects have set the On Exit event to Pause, to imitate  a Powerpoint presentation.  It is a personal liking, of course, but I prefer largely to have the playhead proceed to the next slide without learner action. If you share that idea, just take out the Pause for the On Exit event.

Tip 3: Pausing points

Contrary to the Pause command (see tip 2) a pausing point will not pause slide audio, although the playhead will be paused and so will all graphics assets/effects which are running or appear later.  By default, all pausing points will be set to occur at 1.5secs, either on the slide (for Quiz slides and Drag&Drop), or after the start of the interactive object timeline.

In most cases the increase of the slide duration due to inserting an audio clip will not cause problems, when the pausing point is due to an interactive object like a button. Reason is that the button will often trigger an action jumping to another slide, or revealing some content. The frames after the pausing point (inactive part) are not important in that case.

Possible issues can occur on quiz slides, if you insert an audio clip.  Here is an example (T/F slide 23 in Alliance):

You see the pausing point on the slide timeline at 1.5secs. Some smart shapes are not timed for the rest of the project (see Tip 1). However since the slide is paused at 1.5secs, before the end of those shape timelines, you’ll not be bothered by that while the audio continues playing (not paused). However, if while testing that slide, you have to wait a long time after the Submit process, and you see the shapes disappearing, that is due to the Actions setup in Quiz Properties. They were set in this slide as shown here:

Both actions are set to ‘Continue’, which means that the playhead is released. It will have to move through all frames after the pausing point (inactive part), and only moves to the next quiz slide after reaching the last frame. Not exactly what you want. Two possible fixes:

Fix 1: 

As is the case for other quiz slides in the QSP projects, replace the action ‘Continue’ by ‘Go to Next Slide’. You don’t have to bother about the wrongly timed smart shapes in that case.

Fix 2: 

Move the pausing point on the quiz slide with the mouse (not possible in Timing properties) to place it near the end of the slide. In that case you have to extend the smart shape timelines as explained in Tip 1. This workflow is recommended over the first fix,  if you expect slow connections with the LMS.

Similar problems can occur on Drag&Drop slides but will not expand on that. Know however that the pausing point is not visible on D&D slides in the Timeline panel as is the case for quiz slides.

Some links

If you are want some more information about the tips explained above. Not surprising, they all link to understanding the Timeline (priority 1 for each Captivate user). Maybe this blog (one of a sequence about the Timeline) can help you:

Pausing Captivate’s Timeline

For quiz slides, the Submit Process is explained in detail in this post:

Submit Process

If you want to add audio clips from another type than slide audio:

Pausing Timeline and Audio