More is in a... hyperlink - Dropdown Menu

Intro 

In my last blog post I demonstrated how a hyperlink can overcome the limitation of states in Captivate, not allowing to add interactive objects to states.
In older versions of Captivate the widget 'Go to Slide' was available: a dropdown menu with slide names, useful to jump to those slides. That widget has disappeared, is not replaced by a Learning interaction (compatible with HTML5). 
Although this widget can be reproduced, using the Dropdown interaction, that solution has several drawbacks. The formatting of the interaction is limited (maximum font size is 14pt), and you would need a variable and a conditional advanced action with as many decisions as you have slides in the dropdown list.
A much easier solution can be found in this article, using hyperlink events. For a consistent behavior of the dropdown effect,  I also used Micronavigation

Hyperlink commands

The list with commands, opening the dropdown list in the Hyperlink dialog box is much shorter than the list with simple actions under the Actions tab. 
Of course the Web page is the first command, since that is what you expect to happen with a hyperlink. 
These commands are not available for a hyperlink event:
  • Continue: since the hyperlink event has no way to prevent 'Continue Playing Project' as is the case for simple actions, this is not that important
  • Return to Quiz: is meant for remediation, normally to be triggered by a Next button
  • Play Audio/Stop Triggered Audio: can always be done using an advanced action
  • Execute Shared Action: which is really a pity :(
  • Pause: can always be done using an advanced action
  • Exit: can always be done using an advanced action
  • Toggle: can always be done using an advanced action
  • Show/Hide TOC: can always be done using an advanced action
  • Show/Hide Playbar: can always be done using an advanced action
  • Lock/Unlock TOC: can always be done using an advanced action
  • State commands: Go to Next State/Go to Previous State cannot be done by advanced action, Go to State is possible.

For hyperlink events some commands have been put together in one dialog box, which is the case for the Slide command:


Example

Watch the movie: after the title slide the dropdown menu 'Go To' appears. When you click on that shape button, another shape wlll drop down. It has 6 hyperlinks, I left them underlined to emphasize their type.

When clicking on a hyperlink you'll be navigated to another slide which has a Back button to return to the Menu slide. The content slides are about the same subject as the previous blog post about popups and Close button. Of course it would be possible to have multiple slides in each 'chapter', and have only selected slides in the dropdown list.


Setup, variables and actions

Objects on Dropdown menu slide

The objects on the slide with the Dropdown menu are visible in this screenshot of its Timeline:

User variable v_start

The shape button SB_Menu (Caption 'Go To') is on top of the originally hidden Smart Shape SS_DropDown, and pauses at 2,6 secs, after all effects have been accomplishedTo mimick the behavior of a dropdown the Effect 'Stretch From Top' is applied to that shape. The effect starts at time 0 and has a duration of 1 sec. The arrow shape ArrowGoTo has some explanation and the effect EaseInFromLeft is applied. The second arrow ArrowDropDown has a similar effect, starting bit later, but that shape is not visible until the button SB_Menu is clicked.

One user variable was created: v_start. It will be used to store the frame number of the first frame of the slide with the dropdown menu. I learned from experience that effects are much more consistent when you use micronavigation instead of applying the effect by an advanced action. The content of the variable will be used to send the playhead back to the first frame of the slide, to have the time-based effect being played.

Events and Actions

1. On Enter (Dropdown menu slide): standard advanced action EnterDropDown

The back button on the content slides send the user to this DropDown slide, and the On Enter event of the slide is used to reset everything as it appeared first time: hiding the shape SS_DropDown, the arrow shape ArrowDropdown, and showing ArrowGoTo. Moreover the number of the first frame of this slide is stored in the variable v_start. This is the script:

2. Success event of the shape button SB_Menu: standard advanced action DropAct

This action will hide the arrow shape ArrowGoTo, show the shape SS_DropDown and its arrow ArrowDropdown and return the playhead to the first frame of the slide with the system variable cpGotoFrameAndResume which has 'Continue' built in. That way the effects for the dropdown menu and the arrow with explanation will appear as they are timed from the start of the slide.


3. Hyperlink events

Contrary to the situation explained in the previous blog post where the hyperlink event was used as Close button, in this case it doesn't matter that the playhead is always released when executing a command by a hyperlink because of the navigation to another slide. The command Slide was used, which opens the dialog box slide. Here the LInk is set to point to the correct content slide. In this screenshot you see the hyperlink setting for the navigation with the item 'Decor':

Navigation Help Slides

Intro

In this thread on the Captivate forums, a user asked how to configure navigation in a course with content slides and two help slides. The Help slides should be accessible from each content slide using a button. There is navigation possible between the two Help slides, and the user should be able to return to the content slide from where he started, from each of the Help slides.

Although there is a system variable cpInfoLastVisitedSlide, this cannot be used for this use case, because the user can navigate between the two Help slides. I explained shortly a possible work flow with a user variable and a couple of standard actions in the thread. Since the user told that he is a newbie concerning variables and advanced actions, I promised to write out a more detailed tutorial. This is certainly not a complicated use case! If you are an 'expert' in advanced actions, this is not a post to your taste.

Example project

This project has a Title slide, 3 Content slides and ends with two Help Slides.

Instructions are in the movie, try out the buttons.  You don't have a Back button on the content slides, but you can always refresh the browser to restart playing. Click on the Title slide to start playing:

Interactive objects/events

  • Slide 1 (Title) which uses the master slide 'Title', has a click box covering up the slide. It has the default action
     'Go to Next Slide'. 

  • Master slide 'Content' has the Help button (with the question mark): it is a shape button (no states at this moment in CP9) which triggers a standard advanced action 'ToHelp'. This master slide is used for the content slides.

  • Slide 2 (Content1): has a shape button for Next which pauses the slide at 2.5secs. This shape button is timed for the rest of the project, so that it will show up in all following content slides. A shape button on the master slide is excluded because this Next button has to be hidden on the last content slide. You cannot show/hide an object on the master slide, because it has no ID, no name. This Next button has been labeled 'SB_Next'. For this small example, it can look easier to have a Next button on each slide where it is needed, but if you have a lot of content slides, this approach will save on time and file size.

  • Slides 2,3 (content slides): to be sure that the Next button is visible, even when coming back from the Help slides, the On Enter event of these slides is used for the simple action 'Show SB_Next'. 

  • Slide 4 (last content slide): the Next button has to disappear, which is done with an On Enter action 'Hide SB_Next'.

  • Master slide 'Help': this slide has no interactive object, is used by the Help slides

  • Slide 5 (Help slide 1): has another instance of the Help button (SB_Next_Help) with the action  'Go to Next Slide'.
    This slide has a special shape button 'SB_Back1' to allow going back to the content slide. This button triggers a standard action 'BackToSlide'. This shape button has a bubble added in the Rollover state, which functions as Tooltip.
    The On Enter action for this slide is used to hide the button 'SB_Next' (from slide 2), same way as on the last content slide. Why? That button will already been hidden if the user comes from the last content slide, but not when he is getting here from one of the previous content slides.
  • Slide 6 (Help slide 2): has no need for a Next button, but needs a pausing Back button (to navigate back to the first Help slide) with the action 'Go to Previous Slide'. It has another instance of that special button ''SB_Back2'. I didn't opt to time that button for the rest of the project, because there are only two Help slides and having to hide/show them would have been more work than using two instances.


Variables and advanced actions

Variables

Two system variables are used in this example:

  1. cpInfoCurrentSlide: gives the slide number of the current slide. The index starts with 1, which means that for slide 1 this variable is 1.

  2. cpCmndGotoSlide: will be used to navigate the user back to the content slide. Beware: for this variable the index starts with 0. That means that slide 1 has to be indicated as 0, slide 2 as 1.

One user variable has to be created: v_last.  This variable will be used to store the value of cpInfoCurrentSlide when the user leaves the content slide to go to the Help slides. You do not have to define a default value for that user variable.

Standard actions

ToHelp triggered by the shape button on the master slide 'Content'

In the first statement, the slide number of the current slide is stored in the user variable v_last. Then the user is navigated to the first Help slide (slide 5), and I added Continue which is not always necessary, depends on the set up of the slides.

BackToSlide triggered by the buttons SB_Back1 and SB_Back2 on the Help slides

For the first statement an Expression was needed, because of the different index for the system variables cpInfoCurrentSlide and cpCmndGotoSlide. Example: if the user came to the Help slides from the third content slide, the variables would be:

  • cpInfoCurrentSlide = 4   because the third content slide is slide 4
  • v_last = 4   because the action ToHelp stored the value of the previous system variable in this user variable
  • cpCmndGotoSlide = 3  because this is the indicator for slide 4, since the index starts with 0; for that reason I needed to subtract 1 from the value stored in v_last

Overview

In the Advanced interaction you'll find a great overview of all the actions, events of the slides. Too bad: you'll not see the shape button on the master slide, nor its action.



Dropdown Interaction - tips

Intro

Recently I published some tips about learning interactions, including an explanatory table. The use case in that post showed how to use checkbox and radiobutton interactions. Last week, a user asked a question about the dropdown interaction, which he used for a custom question slide: How can I check if the user has chosen an item? That is not difficult for checkbox and radiobutton, because their associated variable will be empty, but the situation is different for the dropdown interaction, hence this tutorial.
The most common failure that I detect on debugging advanced/shared actions with multiple decisions are due to a wrong understanding of the validation of those actions:
  • all decisions will be checked from left to right
  • there is no way of jumping out of the action when a correct condition is met.
In the use case from the example movie, that sequence behavior is very important!

Dropdown interaction

The properties dialog box is pretty limited:

In this example you see that:
  • entries are separated by commas
  • formatting allows to choose a font, font style and attribute (faux style), but font size is limited to 14pt maximum
  • the color dialog box doesn't show theme colors
  • the update button allows to see a preview of the look after formatting
  • if you want to validate the choice in the list, you need an associated variable (here v_drop); beware: you have to create the variable in the Variables dialog box
  • the first sentence mentions 'combobox' but as I understand the word combobox this is not correct: in a combobox you can not only choose from a list but you can type in a word (there was an older combobox widget), this learning interaction doesn't allow that.
Maybe you are bit puzzled by the first entry 'Choose a language'? Contrary to the radiobutton/checkbox interactions, the variable associated with a dropdown is never empty! By default it has a value equal to the first item in the list. In the example movie, you will see before choosing, and after resetting that v_drop is equal to 'Choose a language'.

Resetting: it is indeed possible since this latest version of Captivate not only to change the value of a variable by an action, but also to have this change reflected in the Display of the interaction. This new feature is used for the Clear button in the example movie.

Beware: for some reason, the first time you use the interaction you will have to click twice, first click to put focus on the interaction, second click to select item. Strange :)

Example Movie

This movie has only 4 slides. After the 'Intro'-slide you can choose a language on slide 'Drop'. Watch the variable v_drop that is visible in a text caption next to the learning interaction. You get 3 attempts to guess the correct language, reason for the variable v_attempts. The 'Drop' slide has two interactive objects: Submit and Clear. Try out Clear to see how the interaction is reset to its initial state. You can click Submit without choosing a language, you can choose a wrong language or the correct one. The third slide you'll only see when your answer is correct. If you exhaust the three attempts without correct result, you will end up at the 4th slide 'Retry', where you are able to get back to the 'Drop' slide and start guessing again.

Variables

Here is a screenshot of the user variables

As explained before v_attempts tracks the number of attempts and starts with value=3, v_drop is the associated variable for the dropdown interaction.

I used v_dummy, a variable containing the text  'Choose a language' out of laziness, to avoid having to type that text over and over again. Be careful: it has to be exactly the text in the first item, it is not possible to use a variable in the item list.

The variable v_groet is used on the third slide, to customize the text based on the current time of the user (cpInfoCurrentHour). The variable v_wrong is a Boolean (value=0) that will be set to 1 when the attempts are exhausted without finding the correct language.

Events and Actions

EnterDrop, triggered On Enter for slide Drop

This standard action resets everything on the second slide 'Drop': the group Gr_Feedback with empty, wrong and correct feedback messages (empty, wrong, correct) is hidden, group Gr_Bt with the two interactive objects made visible, variables v_drop and v_wrong are reset to the default values.

ResetAct, triggered by the Success event of the Clear interactive object

A standard action that restores v_drop to its default value and hides the group Gr_Feedback.

CheckSubmit, triggered by the Success event of the Clear interactive object

This conditional action has 5 decisions, one for each possible situation:
  1. EmptyDone if the user clicked on Submit without making a choice and it was the last attempt
  2. Empty if the user clicked on Submit without making a choice and there are still attempts left
  3. Correct
  4. WrongDone if the user choose a wrong language and it was the last attempt
  5. Wrong if the user choose a wrong language and there are still attempts left

The Sequence is important: if you put Empty before EmptyDone, it goes awry if it is the second attempt, because Empty would have decremented v_attempts and that means that EmptyDone would result also in a True condition, and user will lose an attempt. Same for WrongDone and Wrong, they cannot be switched. 

ExitDrop, triggered by On Exit event of slide Drop

Exceptionally I use the On Exit event, because in this case it will function perfectly. 
A simple conditional action, based on the value of v_wrong.

More...

There is a simple Jump to slide 'Drop' on the last slide. Resetting will happen with EnterDrop action.

The third slide has an On Enter action, to show the right caption based on the system variable cpInfoCurrentHour. 
Do you accept the challenge to figure out that (conditional) action? No need to use my tongue :)

Force first view - Captivate 8

Intro

As a former college professor I don't like to push students/trainees to watch everything in an eLearning course. After all, you can watch without really seeing as well, that doesn't prove anything about the real 'learning' process. Apparently not everyone agrees with my personal opinion and again a question popped up on the Captivate forums in this thread: Force navigation upon FIRST view....

Problem

The course was totally linear, which is a requirement for the simple work flow I will propose here. To force the student the first time to have the slide played totally before being able to continue is simple: use a custom Next button, timed at the end of each slide, do not use a playbar but a TOC for navigation to previous slides. And set up the TOC settings to allow navigation only to already visited slides.
To improve the user experience, when he is coming back to an already visited slide, the Next button should appear from the start of the slide. That way he can skip part of the slide if wanted. The easiest way to solve that problem is by using an extra, replacement Next button. Because timing from start till end of a slide is the same for all slides, this can be a shape button put on the first slide that is timed for the rest of the project, always on top. It is not possible to use a shape button on the main master slide because such a button has no ID, which means it cannot be controlled, shown/hidden which is necessary for our use case.
The initial buttons can also be shape buttons and for a seamless user experience I'd recommend to use the same look for both the initial and the replacement Next button. However those initial buttons need to be individual buttons on each slides because not all slides will have the same duration, especially when they have VO attached as slide audio.

Example movie

Watch this movie to check the solution. To make the switch between the initial Next buttons and the replacement Next button clear I used a different style. Moreover I inserted a text container with two variables: the system variable cpInfoCurrentFrame and a user variable v_frames (see later) that are used to solve the problem. To navigate back to already visited slides, open the TOC with the red curved arrow top left. The TOC close button has a similar look. Refresh the browser to start the movie again. I didn't check AutoPlay, you'll have to click on the (ugly) arrow in the middle of the slide.


Events and Variables

I created one user variable: v_frames. The system variable cpInfoCurrentFrame will be used as well.
This variable will be used to store the current frame number when the user clicks on an initial Next button. Example: on the first slide the initialNext button Bt_One will appear at 5 secs and pause at 5.5 secs. When you click that button, you'll see that on the second slide the variable has the value '166' which is about the frame number of 5.5 secs at a speed of 30FPS. It is never totally exact (should be 5.5*30 which is 165, but index starts at 0, the exact number should be 164). But for the purpose it will be used, this is OK.

The used events are:
  1. Success event for the initial Next buttons: rBt_One, Bt_Two, Bt_Three, Bt_Four. I don't need a Next button on the last, fifth slide. Those button will trigger the same advanced action NextAction:
  2. On Enter event of slides 1-4 will trigger a shared action Show_Next:
  3. Success event for the replacement Next Shape button SB_Next executes a simple action: "Go to Next Slide"
  4. On Enter event of slide 5 (last slide) will trigger a simple action: "Hide SB_Next"

Advanced/Shared Actions

Advanced Action "NextAction"

This action, triggered by the initial next buttons on each slide except the last slide, has only two statements:
The frame number of the pausing point (which is where the action is executed by design) will be stored in the user variable v_frames. Then the Go to Next Slide command is done. 
Why did I prefer to use an advanced action over my favorite shared action? I don't need to change this action when applying to another button. You could create a shared action if you expect this action to be used in other projects because it is easier to transfer them using the library. In that case the shared action will not need any parameters. When you transfer it to another project, the user variable v_frames will be created automatically. That is certainly an advantage!

Shared Action "Show_Next"

This is the action that does the trick! It is a conditional action: 
When a user enters a slide for the first time, the frame number of the first slide frame will be greater than the frame number stored in the user variable v_frames. That user variable has in that case the frame number of the Next button pausing point that was on the previous slide. But if the user comes back to this slide, v_frames will store a frame number of a similar Next button pausing point on a later slide. In that case the condition in this shared action will be correct, v_frames will be greater than the cpInfoCurrentFrame. The appropriate button is shown or hidden. It is necessary, for an unknown reason (was not the case in CP6, when I blogged about toggle buttons), you also have to enable/disable as well. This is probably due to the buttons being in exactly the same location, but it was not necessary in a previous version. 
I defined only two parameters in this shared action:
It is not necessary to define the user variable v_frames as a parameter because it is always reused. It is a pity that objects have always to be a parameter, because in this particular case it would have saved some time to be able to deselect SB_Next (the replacement Next button, timed for the rest of the project) as a parameter. Maybe in a future version? Some will prefer advanced actions and duplicates to be edited for each button but remember: multiple instances of a shared action do not increase the file size, whereas multiple duplicates of an advanced action do increase file size. And I like the presence of the shared actions in the Library, and easy way to use them in other projects.

Conclusion

I love to solve this kind of problems, trying to find an easy solution that can be reused over and over again. If you ever are stuck with such a problem, please contact me. I am available as a freelance consultant, and having taught for many years in college, be sure to get some training on top.






Tips - Learning Interactions

Intro

Captivate 8 has included several learning interactions, that are not well documented in the official Help. You'll be able to download a descriptive table at the end of this article. In the past I have been blogging quite a few times about using Widgets. And there was a similar article 'Using Captivate Widgets? Some tips'. Learning interactions is the name used by Adobe to indicate widgets that are compatible with SWF and HTML5 output, whereas the former Widgets were meant for SWF output. Some of the widgets are still available, others have been replaced by a learning interaction. Widgets can be found in the Gallery\Widgets under the installation folder of Captivate. Learning interactions can be found also in the Gallery, but you'll use them from a duplicate folder in Public Documents, which is easier to access if you don't have full administrative rights. 

In this article I'll offer some general tips. You will see an example movie, using the Radiobutton and Checkbox interactions but I will not explain in depth the advanced actions used for that example. 

Inserting Learning Interactions

There are two possible work flows:

  1. In the Big Button Bar, use the button Interactions, last option. A dialog box with thumbnails of all interactions will be opened. You'll see a badge 'New' or 'Updated' sometimes, when a new version has been pushed to your system.
  2. From the Insert menu, choose Widget and if necessary browse to the appropriate folder. I'm on Win7, you see the folder in top of the screenshot:

The second work flow is also valid for Widgets, and can be used also if you have problems with the Thumbnails dialog box not showing up. I also prefer it because scrolling through a list with names is more efficient than with the other dialog box. Which work flow you prefer, you'll see the the dialog box to edit the properties and parameters for the interaction popping up. In this screenshot you see the dialog box for a simple radiobutton interaction with 2 options (True/False). I unchecked Highlight because that puts a rectangle behind the words 'True' and 'False'. This is one of the interactions that has an associated variable, labeled v_one in this case.


Associated Variables

As you'll see in the table, several interactions have one or more associated variables. In combination with advanced/shared actions this gives you lot of possibilities for using the interactions. You can have a look at the example movie, using both the radiobutton and checkbox interaction. 
As I warned already in the article Tips about widgets, mentioned above, those variables are not created automatically because you type their name in the Properties dialog box, you have to create them in the Variables dialog box as well. The type of the variable is mentioned in the reference table that you can download from the link at the end of this article. 

Example Movie

After the title slide you'll see a slide with 3 Radiobutton interactions to create T/F questions. The Next button triggers a rather complicated conditional advanced action that covers all possible situations:
  • if the user clicks without answering any question
  • if all questions are answered with False (they are mutually exclusive)
  • if more than one answer is True

If you want to test all possibilities you'll have to refresh the browser several times.

I'm using the new possibility to control the display of the radiobuttons, they can now be cleared by controlling the variable.

On the third slide I use the Checkbox interaction, and if you choose the first option (Captivate 8.0.1) on the radiobutton slide, the first option will already be checked for you, another application of controlling the display, in this case using the same user variable for the first T/F radiobutton and the first option of the Checkbox interaction. The advanced action triggered by the Next button will navigate you to another slide, either slide 4 or 5 as you'll find out.

I added a text container with the four user variables v_one...v_four to show how they are changed in the movie.

Resizing - Refresh Widget

When using the interactions Radiobutton, Checkbox, Dropdown and Scrolling Text you'll often need to resize the interaction on the stage to make everything visible. The placeholder on the stage then can look very distorted, discover the Resize Widget button in the Properties that will appear after each resizing to have the placeholder adapt to the new size:


Customizing - Theme colors

All learning interactions can be customized, at least concerning the colors used. New in Captivate 8 is the possibility to have the Theme Colors palette applied to the interactions. I mentioned this already in the article about: Theme Colors. In the table I indicate which interactions do have that new feature. It is not the case for the Checkbox, nor the Radiobutton interaction. You can see the option in this screenshot of a Glossary interaction:


Improvements for Responsive Projects

Some interactions recently got an update to improve the user's experience when used in Responsive projects. You'll also find indication about that in the table. Whenever you see the option 'Scale Text for Responsive Projects'. On the screenshot of the Glossary interaction that option is visible.

Static versus Interactive interactions

In the former Widgets panel, which disappeared in the new UI of Captivate, you could see that widgets existed in three types: Static, Interactive and Question. Interactions have only two types: Static and Interactive. The difference is the same as for the standard objects: an interactive object (shape button, click box, button, Text Entry Box) has events that can trigger an (advanced/shared) a action and can have a score that can be added to the Quiz total. Non-interactive or static objects do not have those two features.

Most learning interactions are Static. Only the Games (with exception of the old Word Search interaction) are Interactive. Beware: although the score for some Games is stored in the associated user variable, you cannot add that score to the Quiz total. The points attributed to a Game in the Reporting section, are granted to the user in the same way as most questions in Captivate (with exception of the MCQ): black-white. If the game has been played, the user will be awarded the points, whatever the score of the game was.

Table - categories

You can download the table here. The categories are my personal choice:

  1. Interactions without variables
    1. Objects: several small interactions
    2. Display: interactions like accordion, tabs... that allow you to show a lot of info on one slide
  2. Interactions with variables: most of my favourites are here like the checkbox, dropdown, radiobutton and scrolling text
  3. Games (with or without variables)

Drag&Drop is to me also an interactive interaction, but because of its importance and different work flow it is not in this table.

Waiting for your comments :)