SVGs for color-based quiz

Intro

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

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

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

Setup

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

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

Objects – timeline

Have a look at the Timeline of slide 2 which is the first quiz slide (flag 1, Denmark):

From bottom to top you see:

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

Variables and events

Three user variables are created for the actions:

  • v_color: will store the name of the color chosen from the color shapes; the exact names are needed which are Blue, DarkBlue, Red, White and Yellow.

  • v_counter: will track the number of correct flag parts which have been colored (is equal to the number of stars displayed by the progress bar).

  • v_max: the number of flag parts to be colored. For the first two flag slides this is 5, for the two following slides it is 9 and the last flag slide has 17 parts.

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

  • On Enter slide event for all flag slides. They trigger a similar advanced action, depending on the number of flag parts: 'Enter5' (first two flag slides), 'Enter9' (two following slides) and 'Enter17 'for the UK slide.

  • On Enter slide event for the End slide triggers 'EnterEnd'.

  • Success event for the Color shape buttons trigger a similar advanced action 'Blue_Act', 'DarkBlue_Act', 'Red_Act', 'White_Act' and 'Yellow_Act'.

  • Success event of the SVG’s which are the flag parts (used as buttons), trigger all the same Shared Action 'FlagAct'.
I will explain why I choose for advanced or shared actions for those events.

Actions

Enter5Act/Enter9Act/Enter17Act (advanced actions)

Those very similar actions are triggered On Enter of the flag slides, depending on the number of flag parts. Here is a screenshot of 'Enter9Act':

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

EnterEnd

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

Blue_Act, DarkBlue_Act, Red_Act, White_Act, Yellow_Act

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

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

I could have used a shared action, but preferred duplicate advanced actions. Four of the color buttons need their state to be changed to Dimmed, the active clicked button to Current and its color has to be entered as value for v_color.

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

FlagAct

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

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

Conclusion

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

Forced view - special use case

Intro

Another blog and example output, due to a question by a user today. 

“I have groups of slides. Each group consists of a handful of slides that has event video on each slide and nothing else. The videos autoplay. The user can enter these groups at any point and must watch each video before being redirected back to a main menu. “

After I had gotten all details, I created this example file. The assets panel in 11.5 was very useful as you can see. Only Chapter 1 has been worked out with 4 slides containing event videos. For Chapter 2 and 3 only one slide is available with a back to menu button. Try it out: you can start with any video, but then the sequence will be linear: 1-2-3-4, 2-3-4-1, 3-4-1-2 and 4-1-2-3 are all possible. You can use the Chapter 1 button on the main menu as many times as you wish. It should be foolproof. However… you have to watch the videos from start till end.

The embedded movie is at a fixed resolution. The project is published as Scalable HTML and you can also play it directly in any resolution from this link.


Setup

Variables

Four Boolean variables were created: v_one, v_two, v_three, v_four. They are meant to track each if a video has been viewed completely. Only when all variables are toggled to 1, will the learner being returned to the main menu slide. The default value is 0 and will be set by a shared action (see later).

Events and actions

Enter event of video slides 1-2-3-4

This event is used to trigger an advanced action which will check the value of the 4 variables. If they have all the value 1, the learner will be navigated back to the menu slide. Have a look at  the Preview of this action:


Exit event of video slides 1-2-3

For the first three video slides this event is used to trigger a simple action, similar to this one for the first slide:

Assign v_one with 1

Only the variable is different for the second and third slide. Since the sequence is linear, after that event the playhead will continue to the next slide. There is no pausing point on the slide, which makes it possible to use this event.

Exit event of video slide 4

The action is now more complicated, because two situations are possible:
  1. All video slides are viewed (learner started with first video)
  2. Not all video slides are viewed (learner did not start with first video)

The first situation means that the learner will be navigated to the main menu slide, the second that he still has to view video 1 and maybe more. This means we need a conditional advanced action. Here is the screenshot:

Since the exit event has also to toggle the variable v_four, I used two decisions. The first one ‘Always’ is toggling that variable. The second decision is the conditional one described above.

Success event of the Video buttons (Chapter 1 slide)

You would expect them to trigger a simple ‘Jump to Slide’ action. However, since the learner will return to the menu slide, and can restart viewing Chapter 1, there is a need to reset the variables. This event was used for that purpose as well. It is a perfect example of an action where a shared action can save a lot of time, because it will have only one parameter: the slide to jump to. All variables, and the literal ‘0’ do not have to be parameters. Here is the screenshot of a filled in action for the first video button:

Since both remaining chapters will have a similar group of video slides, this approach can be used there as well, to reuse the same variables. The advanced actions described before, can be duplicated and edited. The shared action can be used as it is without any change.

Power of SVG Buttons

§Intro

In previous posts I have talked about the advantages and disadvantages of the 6 button types, and how you can edit the colors of SVG’s, even in states and when they are used as buttons. SVG’s, being vector images are excellent for use in projects to be viewed on multiple devices, whether it is a scalable non-responsive or a responsive project (fluid boxes or breakpoint views).

Unique about SVG’s used as buttons, is the fact that you have control over the clickable area, which is not the case for other  button types. In the example below you’ll see buttons which would have been impossible to realize with any other button type.

Example file

Watch this two-slide project. The Title slide is taken from the QSP ‘Legacy’ (non-responsive), but I have changed fonts (not fan of Arial). The second slide uses an edited master slide from that same QSP. Click the buttons in circular image in any sequence, and you can also reset the slide (used the Scenario 2 technique described in Replay Slide)

Setup Clickable Area

Six Buttons

The 6 buttons in the circular arrangement have overlapping bounding boxes. Have a look at this screenshot:


By unchecking the option ‘Enable Click in Bounding Box’ the clickable area will be limited to the space within the colored shapes, and those do not overlap. 

I kept only the Normal and Visited InBuilt states of the buttons . In the Visited state I added an icon (also SVG) from the Assets panel,  colored in the same color of the button (which was dimmed). That icon also covered up the number, which was part of the button SVG. Here is the Object state panel for button 6:

Reset Button

For this button I used an icon from the Assets panel. and added a text caption close to this button. The bounding box of the SVG is encreased so that the Reset text looks to be inside of the box. In this case The default option under the Style tab ‘Enable Click in Bounding Box’ remained checked. It now looks as if the learner can click both text and icon. I didn't use the padding option, which would make the icon smaller inside the bounding box.

Other Items

The information is stored in a multistate shape, where the Normal state is invisible (Alpha and Stroke set to 0). A two state shape is used for the final image, which is in a custom state of a circular shape. That circular shape also has an invisible Normal state. 

For the multistate objects the option ‘Retain State on Slide Revisit’ remains unchecked. Since the Reset button is re-entering the slide, all multistate objects will automatically revert to their Normal states.

Actions and variables were custom made, I didn’t use any of the click-reveal interactions from the QSP’s. Sorry about that, but I’m so used to create that type of interactivity that it comes almost naturally. One tracking variable for each buttons was needed to have the final image appear after all buttons have been clicked. 

Scrolling Text Interaction to replace Text Entry Box

Intro

Although I have already posted about one Submit button for multiple TEB’s, recently users tried to apply that blog to non-validated TEB’s, which was not the goal of that original post. Moreover giving another attempt to a TEB where the Submit has been done has become less easy with HTML5 output. SWF output had so many advantages (rewinding the playhead a couple of frames was simple), but that is the past.

Instead of writing long answers to the most recent thread, to explain why choosing Scrolling Text Interactions was a better choice for non-validated fields, I created a short example file. The workflow explanation will be in this article..

This example was created with version 11.5.0.476, the most recent version of Captivate. I uses some image and button assets from the new Assets panel. However, nothing has changed for interactions in this major update to version 11. I am confident that the solution will work for every version since 8, meant for HTML output.

Example

File has two slides. Only the first slide is relevant for the workflow, the second is meant to test the Continue button (with action "Go to Next Slide").

The first slide has three fields to fill.  If any field remains empty, a textual warning will appear and you can retry. The Continue button appears when all fields have an entry. Project has no poster image, just the default play button. It is not rescalable. Here is the link


Setup

Variables

For three fields you need 3+1=4 user variables, none of them needs a default value in its definition:
  • v_one, v_two and v_three will be used witl be associated with the Interactions
  • v_null is needed for the advanced conditional action to test if the field is blank; more info in ‘Where is Null’

Scrolling Text Interactions

Next to each Text container (used a shape) an instance of the Scrolling Text interaction. Here is a screenshot of the setup of the first of them. Important is to link one of the variables and to uncheck the option ‘Read only’:

You see in the dialog box that I edited the font (used an Adobe font), the font size and attribute.  Just a reminder: it is not sufficient to type in a variable name to define it, you need to define it in the Variables dialog box. 

Although I resized the interactions to the same height as the Text containers with the questions, the height is decreased in the output file. Be careful with copy/paste to duplicate an interaction, prefer the Duplicate functionality within Captivate (CTRL-D).

Advanced Action

This action is triggered by the Submit button. I used the On Enter event of the slide to hide the warning that will pop up if at least one field is empty. This is the Preview dialog box. The operator 'is equal to' is replaced by the JS equivalent needed '=='. The logical operator OR is replaced also by its JS equivalent |  As you perhaps know, an advanced action will be converted to JavaScript on Runtime.

The replacement of the grayscale image by the color image, disappearing items on the slide: all is achieved using  the timeline. For those interested, here is a screenshot of that timeline, I didn't group any items, but their label clearly shows what they are.

Conclusion

As usual I appreciate any comment, whether to add an alternative or to ask questions. You are welcome on my website as well.

Answer key for Survey

Intro

Once in a while a question like in this thread pops up:

“….students will need to answer short answer questions.  They will not be right or wrong, they will be their thoughts.  Is there a way to have all their answers compile into a final screen at the end?”

It seems logical to use short answer quiz slides, in Survey mode, for this use case. However I prefer to use one of the Learning Interactions, ‘Scolling Text’ for reasons I want to explain in this article, by describing both workflows with their specificities. It is up to you to decide which you’ll use. In both workflows variables will be important, hope you are familiar with them.

Short Answer quiz slides, Survey mode

Setup quiz slides

No right/wrong answer means that scoring has no sense, change the stqtus of the quiz slide to ‘Survey’. Nevertheless a score slide will be inserted but you can hide it easily.

Answers to quiz slides are stored in a reusable variable, cpQuizInfoAnswerChoice.After a short answer question the variable will contain the text typed in by the learner in the short answer field. Reusable means that the value will change after each short answer slide. Since we need to store each answer safely (for reusing on the slide at the end), you will need:

  • to create a user variable for each short answer question; I will label them v_First, v_Second, v_Third for the example you’ll see in the demo movie;
  • the default answer area is pretty small (one line), if you expect longer answers, make sure to increase the height of the answer area. It is not possible to edit the used master slide because it applies to multiple types of quiz slides;
  • the content of the system variable cpQuizInfoAnswerChoice is updated when the Submit button is clicked; it has to be transferred to the appropriate user variable, using the After Survey event; for that purpose I created a shared action with two commands:
    Assign v_First with cpQuizInfoAnswerChoice
    Go to Next Slide
    only parameter is the user variable (here v_First)
  • apply this shared action to each of the question slides, with the appropriate parameter.

Setup Answer Review slide

In the example movie I created one text container (shape or caption) and inserted the three user variables in it. Be careful to increase the number of characters to be shown when inserting the variables. You’ll also have to leave enough space for each variable. Of course you could create multiple text containers and/or have the answers distributed over multiple slides.

Using Scrolling Text interactions

A limitation of Short Answer quiz slide is that you can have only one answer per slide. When using a Scrolling Text interaction you can have several question on a slide as you can see in the example movie.

Setup interaction

Setup of the first answer box can be seen in this screenshot:

Two important items are indicated  in the screenshot:

  1. You have to type in the name of the variable to be used. There is no way to use a dropdown list. Beware: you have to create the variable, it is not created uatomatically.
  2. To allow text to be typed in by the user, the checkbox ‘ReadOnly’ has to be unchecked. By default it is checked.

It would have been possible to enter the question in the interaction, instead of having it in a separate text container. I preferred not to do it. Reason: if the user adds the answer, instead of overwriting the question, the variable will contain html tags, like <br>.

The Submit button, which you’ll see on the slide, triggers  the (default) action ‘Go to Next Slide’.

Since I reused the three user variables in this part of the example, I have created an advanced action triggered on Enter to empty the user variables with the technique described in this article.:

Setup Answer Review slide

Very easy: duplicate the slide with the interactions, and take out the On Enter action to reset the variables. The interactions are now populated with the given answers. Moreover the learner can still edit those answers, because of the option ‘ReadOnly’ being unchecked. If you don’t want it, check the option ‘ReadOnly’ on this duplicate slide.

It is also possible to use a similar slide for the first workflow with short answer quiz slides. That will be useful if you want indeed to allow editing the answers.

Example movie


D&D Feedback messages

Intro

Yesterday an interesting question appeared on the forum concerning Drag&Drop

The second question is answered in that thread, was about setting up the Accept for the drop target as I have already explained in previous blog posts. The first question however is at the base of this short article. I quote:

"Is it possible to show separate messages for cases such that the user not selecting the answer (Choose an answer msg) and selecting the wrong answer (Incorrect answer msg).  It currently shows 'Incorrect Answer' msg for both cases."

I asked for some details about the setup: 

  • Several drag sources, only one was correct
  • One drop target, based on my answer to the other question, it accepted all drag sources but only one by one. When dragging another source it would replace the first one.
  • Infinite Attempts

Drag&Drop confusions

Drag&Drop slide have some limitations such as: all drag sources and drop targets have to be on the slide from the first frame.  You can define it as a score slide or as a KC slide (see Drag&Drop Tips).  It has a lot of the behavior of a quiz slide, but it is not a full-blown quiz slide or KC side. Here are some points in its UI that I find really confusing and would love to see changed (logged feature requests about that since version 6):

  1. D&D slides are automatically pausing at 1.5secs but that is NOT visible on the Timeline, only in the Timing properties, whereas for quiz slides the pausing point is visible on the Timeline but NOT in the Timing Properties. This is confusing.
  2. D&D slides have an On Enter event and an On Exit event, whereas quiz slides only have an On Enter event. That is OK.
  3. Submit button both for D&D slides and for Quiz slides have one or two events, depending on the number of allowed attempts. For quiz slides, the actions triggered by those events will happen after the first step of the Submit process (where feedback messages appear), for D&D slides there is only one step in Submit process. That is OK, you just have to realize that.
  4. I talked about one or two events:
    1. If the number of attempts is limited you have two events: you allwasy have the Success event. That event and its linked action occur when the answer is validated and correct. That is fine, works the same for quiz and D&D slides. If you want to give the learner the time to read a Success message, which can appear automatically you have to leave some time to the learner by choosing the correct action On Success. Example: if you set the Success action to 'Go to Next Slide', learner will not be able to see a Success message. Change to 'Continue', and eventually increase the duration of the slide. Works fine, just that slight difference.
    2. If the number of attempts is limited, the second event is the Last Attempt event. That is indeed the indication in the Actions part of  the Quiz Properties.  The Failure message will always pop up with every Failure attempt, but the event that triggers an action only occurs when all attempts are exhausted. However in the Actions tab of a D&D slide it is wrongly labeled as Failure event. Many users  believe that the specified Failure action will occur for each Failure attempt which is NOT the case. This is confusing 
    3. If the number of attempts is unlimited you have only one event, the Success event. It is logical because you are supposed to try until you get the correct answer. For quiz/KC slides this is very clear because the Last Attempt event is dimmed when you choose for unlimited attempts. However for D&D slides the (alreadly wrongly labeled) Failure event is not dimmed, although it will never happend. This is very confusing IMO.

Sorry for this long explanation, needed to understand the workflow I explored to answer the question mentioned in the intro. I hope some of you, readers, will support my feature requests to 'repair' the UI and avoid confusion.

Workflow for  messages

User wanted to see a different message popping up:

  1. When the submit button is clicked but no drag action has been done
  2. When the submit button is clicked and the drag action was wrong

Both situations are considered Failures, but Failure doesn't generate an event until the last attempt. Since it is set to Unlimited Attempts, there will never be a Failure event. No way to replace the messages by custom text containers, if you cannot trigger advanced/shared  action on Failure.

The popup messages (Success, Failure) cannot be controlled, they don't have an ID.  You can create states for such a message, but since you cannot address the message, you cannot change the state by an action.

A possible solution is to replace the text in the Failure message by a variable, in this case I labeled it v_failure. It is possible to change the value of a variable. This is the screenshot in editing phaes of an example slide:

As default value on defining the variable I used the text to show when the learner has clicked the Submit button without doing any drag action:

The value of the variable has to change when at least one drag action has happened, which was not the correct action. Besides the events occurring after clicking the Submit button, D&D slides have also Object Actions. I will use those actions to assign another value to the variable v_failure. Open the dialog box in the Format tab for the selected drop target. In this very simple example, I used an Assign command as you see in this screenshot. I only needed it for the two wrong drag sources. For the correct source, no need to change the Failure message, since the Success message will appear. Since I used a simple action, needed to uncheck the box 'Continue Playing the Project'.

If you need to change a lot of those actions, and it is OK to have always the same Failure message, please create an advanced (oneline) action, will save you time when applying in the Object Actions. If you want a different feedback message for each wrong source, use either the Assign command (as above) or use a shared action.

 

 

 

 

 

Advanced to Shared Action: Step-By-Step (micro-navigation showcase)

Intro 

After the introduction to Micro-Navigation I explained how to use it for forcing the first view of a slide, and for playing an audio file on first visit. When looking at the resulting advanced actions they are pretty similar in both posts. Moreover you probably will want to use the action on multiple slides in the course, and maybe also in future courses. That sounds like a perfect scenario for conversion of the action to a Shared action. I have been blogging already several times about Shared actions. In the present article I try to explain how to reflect on the use of parameters. Static objects need to be parameters as are states and groups, I label them as 'compulsory'. But Variables and Literals are 'candidate parameters', a well-founded choice for change them in parameters,  can save you lot of time later on. Consider it a good practice example.

Analysis

When comparing the two advanced actions created in the mentioned articles, there is a small difference: the first decision (which is a standard action) has one command extra in the second advanced action (for Audio). For the ForceAct, the number of seconds to be jumped over is directly entered in the Expression command, for the SkipSlideAudio, Assign is used to store the number of seconds in the user variable v_skip. Both versions work well, but personally for a shared action I prefer the one with the extra Assign command.

What are the parameters for the shared action?

For the first decision (labeled Always in both advanced actions):

  •  'Assign v_skip with 16.5': this first command has two candidate parameters, the variable v_skip and the literal 16.5. The variable can be reused on each slide where the action is needed. Both advanced actions used the same variable in the interactive movie. There is no need to promote that variable to a parameter in that case. However the literal '16.5'  is the number of seconds to be jumped, will have a unique value on each slide, it has to be promoted to a parameter. Parameter 1 = literal. You have to be careful with literals: double-check that the same numerical value is not used anywhere else in the action. In this example there is a second literal '1' in the second decision, Increment command. It has to be different from the first parameter, which is the case.

  • 'Expression v_skip = v_skip * cpInfoFPS': the user variable v_skip is no parameter (see above). The system variable cpInfoFPS has never to be replaced by another variable, will be no parameter neither.

  • 'Increment v_visit by 1': the user variable v_visit has to be unique for each slide, as you can see in the action SkipSlideAufio where another variable has been used. This means that we have to promote that variable to a parameter, parameter 2. The literal '1' however will always be the same, no need to turn it into a parameter. We already double-checked that the literal in the first decision was different from 1.

The second decision is conditional:

  • 'IF v_visit is greater than 1': has two candidate parameters as well. We already indicated that v_visit is a parameter. The literal in this case will always be 1, will never be changed and need not to be a parameter.

  • 'Expression cpCmndGotoFrameAnd Resume = cpInfoCurrentFrame + v_skip': has 3 candidate parameters. Above was already decided that v_skip can be reused on each slide, and the system variables will always be the same.

Shared action Skip_Frames

When you choose to save any of the advanced actions used to skip frames as a Shared Action you'll see that all possible parameters are marked as OK. The reason is that there is no compulsory parameter in this action:

As a result of the analysis above, we need to mark to items as parameters: the tracking variable and the number of seconds to be jumped on later visits. The result will look like this. It is important to give a good description not only for the shared action but also for the marked parameters:

You can assign the shared action to all the slides where you want to jump frames on a later visit. You only have to define a tracking variable and estimate the number of seconds to be jumped. Here is one example setup for the slide where audio had to be jumped on later visits:

You can check in the Library for the Usage of the Shared action, much easier than for advanced actions.

Using Skip_Frames in future projects

Want to reuse this action in other projects? The workflow is described in an older blog post. Short summary:

  1. Use File, Import, External Library and point to the project where you created the shared action.
  2. Library will be opened in a floating panel. Look for 'Skip_Frames' in the Shared Actions subfolder and drag it to the Library of the new project.
  3. Because v_skip is not a parameter in the shared action, it will be created automatically, including the description.
  4. You have to create a tracking variable for each slide to which you want to assign the shared action, and define the duration in seconds to be skipped. Ready!








Force First View (micro-navigation)

Intro

This question appears often: how can I force the user to view the slide completely before the Next button appears; but when revisiting the slide the Next button should appear immediately. From a pedagogical point of view, I don't think this will improve the efficiency of the learning, but that is off topic. 

Watch this movie: forcing view is used on the slide with the animated dices. The workflows for the audio slides will be explained in a future blog post.



I will explain my analysis and how to create the needed variables and advanced action.

Analysis

Look at the timeline of the animated dices slide from the movie.

This particular slide is just an example. You see that the Next button (a shape button) appears after the last animation has finished, the learner is forced to watch everything that happens on this slide before the Next button becomes available and learner can proceed. We don't want to put him/her throught the same ordeal when revisiting the slide. Here are three possible workflows:

  1. Create two Next buttons: the one at the end (visible at first visit) and another hidden button, with a timeline that starts from the start of the slide. That second button has to be made visible on second and later visits, whereas the first button will be hidden. Advantage: learner can watch the animations if he wants to, but also skip them by clicking the Next button.
    Problem: this will not be possible in responsive projects with Fluid boxes if you want the two buttons in exactly the same location. Even though they are not timed to appear at the same time, a normal fluid box doesn't allow this.

  2. One Next button, timed from the start of the slide, to be shown/hidden. Use the On Enter event to check tf it is a first visit. If that is the case, hide the Next button, use the command 'Delay Next Actions by....' and enter the time that you want to keep the Next button invisible, then Show the Next button. This looks a good workflow but you have to avoid to offer the possibility to the learner to pause the slide. The Delay command takes not into account any pausing. If  you cannot figure out how to script this solution, send me a note.

  3. Use what you learned about Micro-navigation:  except for the first slide visit, jump directly to the start frame of the Next button's timeline. That means that everything will be in place, animations are finished in this case. Check to have all objects timed for the rest of the slide (CTRL-E).  Since there is no stacking in this workflow, this workflow is also functional for responsive projects developed with Fluid Boxes. Focus of this article  is on this last workflow. Check the Timeline screenshot: the jump should be equivalent with 10secs , start of the Next Button timeline.

All workflows need to track if the learner visits the slide for the first time or not. That can be done by a user variable. We could use a Boolean, or a variable that is incremented with each visit. It is the increment approach that will be used here.

Advanced Action + Variables

The variable that will track the visits got the name v_visit, and a default value of 0. It will be incremented by 1 on each visit. Eventually you can show the number of visits by inserting that variable in a text container:

We have to jump 10secs ahead, which has to be converted to frames.You can use the system variable cpInfoFPS. We'll use another variable v_skip to store the number of frames (that variable could be reused on several slides):

v_skip = cpInfoFPS * 10

The advanced action will have two decisions, as you can see in this Preview:

In the first decision 'Always' which is not conditional, the number of frames is calculated and the tracking variable v_visit is incremented. The second decision 'JumpFrames' is conditional: if it is not the first visit, the playhead will jump as many frames ahead as calculated in v_skip. Since this action is triggered On Enter of the slide, the system variable cpInfoCurrentFrame corresponds with the first frame of the slide.

Afterthoughts

How will you manage if you have a lot of slides that need to get this 'Forced view' action?  What can be reused? Will you duplicate and edit the actions? What has to be edited? Try to find an answer to those questions. Look out for my reflections in two future posts: next one will show that a similar advanced action can be used for another use case, and in a third post I'll explain why this perfect to be converted to a Shared action, how to convert the present advanced to a Shared action to make it as flexible as possible.




Where is Null in CP2017?

Intro

One of my most visited blog posts published 7 years ago (Captivate 5, 5.5)  is Where is Null?

Beware: the embedded movie is a SWF, you need a browser with enabled Flash Player to watch that movie. Everything worked fine for SWF output also in later versions. However it is now partially broken for HTML output in CP9 and CP2017. Several users contacted me to ask for a solution, hence the reason for this new post.

Use Case

The use case can be split up in two phases:

  1. Checking the entry in the Text Entry Boxes): user has to enter something, but it is not to be validated, cannot be empty. Because the way Captivate is treating the value of variables, you need to create an empty variable, which I use to label 'v_null'. If the TEB field(s) is (are) empty, a warning should appear for the user.
    That part described in the old blog post is still valid!  For that reason I will restrict the explanation in this post to one TEB on the slide.
  2. Reactivating the Text Entry Boxes) to allow a new attempt for the learner. Once the Submit button is clicked the TEB is deactivated by default. It is this second part that is no longer functional in recent versions for HTML output.  Focus will be on this second part.

Example Movie

You can watch the example movie by clicking this link

CheckTEB

Workarounds for Reactivating TEB

I propose two workarounds: the first workaround uses the dummy slide as described for another use case in a recent post as Tip 2 (Reset Slide). Since you will re-enter the slide, you can use the On Enter event to restore the initial settings. The second workaround uses micronavigation, which was also used in the original setup. But in this case micronavigation will be not be used to move the playhead before the pausing point of the TEB, but to re-enter the slide.

Solution 1: Using Dummy slide

In the movie this solution is on slide 3, the dummy slide (duration 0,1sec) is slide 2. You see the slide numbers at the bottom in the movie. That is the biggest drawback of this solution, you will have extra slide(s). Three events are used on slide 3:

  • On Enter event triggers the advanced action EnterEmpty which resets the situation when re-entering the slide: clears the TEB associated variable v_MyName, hides a Group Gr_Retry (message + button) which will be shown when the TEB is empty and hides another group Gr_OK (message + Next button) which will be made visible when the TEB has an entry.

  • Success event of the TEB triggers the shared action Check_TEB which is also used in the second workflow. It has 3 parameters: the variable associated with the TEB, what (group or object) has to be shown when the TEB is empty, and what (group or object) has to be shown when the TEB variable has a value. In this case the two last parameters are groups: Gr_Retry and Gr_OK.
  • Success event of the Retry button has the simple action 'Go to Previous Slide'.

Solution 2: Using micronavigation

You see this solution on slide 4. This solution needs one more user variable v_start to store the first frame number of the slide, using the On Enter event of the slide. The Retry button will use this number in combination with the system variable cpCmndGotoFrameAndResume to navigate the playhead to one of the last frames in the previous slide. This will avoid the creation of extra slides as with the first solution But the workflow is a little bit more complicated.  The used events and actions are now:

  • On Enter event triggers the advanced action EnterEmptyBis which resets the situation when re-entering the slide: clears the TEB associated variable v_myName, hides a Group Gr_RetryBis (message + button) which will be shown when the TEB is empty and hides a message  Tx_Welcome_20 (kept the generic name) which will be made visible when the TEB has an entry. It also defines the value of v_start with the current frame number, which will be the first frame of the slide. 

  • Success event of the TEB triggers the shared action Check_TEB  used in the first workflow. It has 3 parameters: the variable associated with the TEB, what (group or object) has to be shown when the TEB is empty, and what (group or object) has to be shown when the TEB variable has a value. In this case third parameter is not a group but the message Tx_Welcome_20.

  • Success event of the Retry button triggers an advanced action RetryAct with two commands: clears the variable v_myName, and calculates the frame number that is 2 frames less than the start frame of the slide. I prefer 2 instead of 1 frame because there could be a small delay which makes v_start equal to the second frame number of the slide.

Roundup

Drawback of both proposed workarounds, compared with the original solution (broken now) is possible flickering when the slide is re-entered. I have tried a lot of ideas to avoid that flickering which is an annoying issue since many versions (if my memory is correct since version 6): transitions (not slide transition which is unsupported for HTML output), Delay command, delay on timeline etc.. 

Drawback of the first workaround is that the total number of slides (cpInfoSlideCount) and the current slide number (cpInfoCurrentSlide) cannot be used directly to indicate slide progress due to the inserted dummy slides.

For the second workaround: if you want to apply this to multiple slides, it is possible to reuse the variable v_start which stores the first frame of each slide. If you use the shared action, the variable v_null is not defined as parameter. That means it will be automatically created when import or drag this action to the Library of a new project. As you probably know I am a big fan of shared actions. Maybe I will post some of my tricks to save time with shared actions. in a future post.





Power of Shared Actions in Captivate

Intro

Shared actions were a new feature in Captivate 7 several years ago. They were improved with Captivate 8.  I never understood why almost no one talks about them, even self-labeled experts seem never to use them. This is a real pity because their power is much underestimated. In most projects I open an external library (have a look at Internal and External Libraries) which has frequently used shared actions. It saves me a lot of time in each project. I will try to summarize in this blog post the results of my almost 5 years of experience with Shared actions. As usual my goal is to get more CP-users to understand when and how to use them.   More users could mean getting enhancement feature requests on the priority list of the developers :)

Example movie (CP2017)

Please watch this movie, one of the examples I will explain at the Adobe Learning Summit, session 202 'Make the most of Captivate's Timeline for Advanced Workflows'. You will see in this movie how one shared action can be used both to skip slide audio on revisiting a slide, or to force to view the entire slide on first visit. This is a use within one project. That action certainly has its place in a common external Library. To have an explanation of the shared action, you'll have to be patient, because I want to give 'First View' to the participants of the session in Las Vegas, 24 October.

Published Tutorials Shared Actions

These posts were published 4 years ago (yes, have over 4 years experience with SA :-)). If you are on CP2017, the screenshots may be a little bit different because of the change to the Advanced Actions dialog box (see AA Dialog in 2017). However the work flow and terminology for Shared actions is still the same.

Use cases

Following on those tutorials I explained a bunch of use cases where shared actions were used. Examples are the way to explore new features, and you'll find a list with links here:

1 (shared) Action  = 5 Toggle Buttons

This blog post has a unique shared action that you'll be ablefor several toggle button in all your projects. The post was written  for Captivate 8. If you are using Fluid Boxes work flow (responsive projects) in CP2017, you can have the toggle buttons in a fluid box on master slides, not timed for the rest of the project (unless in a static fluid box):


Dashboard, using shared actions

The advantage of shared actions when setting up a menu or dashboard

Drag&Drop Tips

When using object actions for Drag&Drop slides, shared actions can be an excellent choice over duplicate advanced actions


Custom Hotspot Questions

Using shared actions to create a custom controlled hotspot question which has lot of advantages over the default type of Hotspot question.


Forcing First View

This is an older version of the Example that you watched above. It did already use Shared actions.

Matchstick Game

Games often need repetitive actions and that means that shared actons are the way to go.


Playing with Captivate 9

Another version of a dashboard created with shared actions, to celebrate the arrival of CP9.

Myths and tips

Strange myths exist about Shared actions. Lot of users believe they are only useful  between projects, not in the same  project. Personally, with the exception of the external library mentioned at the beginning, I always give priority on shared actions within one project over advanced actions if appropriate. If an action is used at least twice in a project, and it is possible to use a shared action, I will not use duplicate advanced actions.

Half-myth is that you cannot edit a shared action. That is partially true. You cannot edit a shared action which is already assigned to events and have it changed automatically. However you can use the original shared action as template to create a new shared action. You will have to assign it to all events after completing the new shared action. At that moment you will appreciate the fact that the shared action appears in the Library and has a Usage button  -  like any other asset. Contrary to advanced actions you can even reuse the same name for a shared action, provided the older action is no longer present in the file. That is one of those annoying things, that you can never reuse a name for an advanced action, even if it has been deleted. Keeping track of Usage of advanced actions is also very cumbersome.

Shared actions cannot replace advanced actions in all circumstances, and they need a different set of mind when preparing the actions. You have to be very careful with the candidate parameters: variables and literals.  I could tell a lot about spectacular results when replacing advanced by shared actions that are set up in an efficient way: courses that couldn't be published anymore because of the number of variables and advanced actions that now run very smoothly, decrease of file size and loading time when using shared instead of advanced actions. Once lot of Captivate users gave me the title 'Queen of Advanced Actions'. At this moment I feel more like the defender of Shared Actions, not the first ignored and underestimated stepchild of Captivate.  Too often I hear comments like: 'I cannot see any advantage in using shared over advanced actions'.  Sorry, but that means you never tried them out. This article proves that I have explored them.... and they are on my top feature list of Adobe Captivate.

Conclusion

I would love to organize an online training with focus on use of shared actions. If you would consider such a course a valuable add-on to your skillset, please send me a message using info@lilybiri.com.