Shared Actions in Drag&Drop

Why?

Shared actions were a new feature in Captivate 7 and were improved in Captivate 8. Nevertheless I rarely see examples of shared actions, and there is also lot of misunderstanding.  Some users think they can only be reused in other projects. I did see experts claiming that they are totally useless, that it is much easier to duplicate advanced actions. I don’t agree with that opinion, about 90% of all the project I have developed do include shared actions. They are especially useful for responsive projects as well. In a recent article you can find links to tutorials about shared actions.

A problem that still remains is that you cannot edit an existing shared action, had hoped that would have been solved in 9 in a recent version but it didn’t happen. The reason is probably that since they are not much used, this improvement doesn’t get on the priority list. If you want to learn more about how to create shared actions and see some examples, have a look at this recent article in which I summarized several older posts. This post is a showcase, where I’ll try to explain when to use a shared action, and when you cannot use them. The origin of this showcase is due to this question in the forums. The answer I gave there is working, but has a serious drawback, I will explain both this first simple answer, followed by a second version that will work in all situations. I hope you learn from that workflow: test out all possible situations, even though they seem to be improbable. As a trainer/coach never underestimate how trainees will explore courses.

Problem

User did look for a solution to apply to this use case:

  • Drag&Drop slide with two drag sources and two drop targets
  • Each drag target should accept only one drag source
  • Depending on the sequence of the dragged items, one out of two texts should appear.
  • Learner can switch the drag sources
  • Auto submit for the answer.
  • Slide needs a reset button

Example movie

It is not possible to embed an iFrame here, you will have to use this  link to see the two proposed solutions.

You can test the problem with the first solution as well. Everything works fine if you switch only once, like first dragging the First text to the Top target, than drag the Second text to the Top target. However if you switch a third time, First text to the Top target, you’ll see that the functionality is lost. This will not happen with the second solution

Setup Drag&Drop slide

The setup is the same for both solutions. Drag sources are shapes and labeled SS_DragOne and SS_DragTwo. The shapes acting as drop targets are labeled SS_DropTop and SS_DropBottom. The feedback will appear in another shape SS_Feedback, which has 3 states: Normal, OneTop (first scenario with SS_DragOne in SS_DropTop) and TwoTop (second scenario (SS_DragTwo in SS_DropTop).

Since Auto Submit is turned on in the Actions tab of the Drag&Drop panel, I dragged the Submit button out of the way to the scratch area.

That means that both possible answers have to be defined as Correct answers. This can be done with the button ‘Correct Answers’ on the Options tab of the Drag&Drop panel.

Each drop target should accept only one drag source, but the learner can switch them if wanted, as long as no correct answer has been defined. For that reason editing the dialog box ‘Accepted Resources’ is necessary, because the default setup is that each Drop target accepts all drag sources. This dialog box can be opened from the Format tab of the Drag&Drop panel, when a drop target is selected. It has to be repeated for both targets. Rest of the setup like snapping behavior is not important for the rest of the workflow, do what you like.

First solution

This solution is using two variables: v_first and v_second. They are related to the first scenario (SS_DragOne in SS_DropTop and SS_DragTwo in SS_DropBottom) and the second reverse scenario. Default value of the variables is 0.

I used the same shared action for all object actions, for both targets. It is pretty simple, conditional with one decision. It has three parameters:

  1. First parameter is the variable associated with the scenario, v_first or v_second.
  2. The multistate feedback object is the second parameter
  3. The state to be shown, which fits the scenario is the third parameter.

This was the original idea:

  • When the first drag action occurs, it fits into either scenario 1 or scenario 2; the appropriate variable is set to 1.
  • If the drag source is replaced on that same target nothing happens.
  • When the second drop target is filled with the other drag source, it has to be in the same scenario. Checking if that associated variable has a value=1, means that both targets are filled, and the feedback is shown, depending on the scenario variable.

What is the problem with this action? It works fine until the user changes the object twice on the first target: in that case the feedback will be shown to early. That was the reason for the second solution which does avoid this problem.

Second solution

Besides the two scenario variables, a third variable to track the number of drag actions was created: v_counter. It started also with a default value of 0. The shared action now has 3 decisions as you can see in this Preview:

The first decision ‘Always‘ is a mimicked standard action. The increment command for both v_counter and the associated scenario variable (v_first or v_second, depending on the object action) will always be done.

The second decision ‘Complete‘ checks if both targets are filled, which is the case when both v_counter and the associated scenario variable have the value = 2. In that case the correct feedback is shown (similar to first solution).

The third decision ‘Incomplete‘ is the one that solves the problem with solution 2. If there has been 2 drag actions (v_counter is equal to 2) but the associated variable for the active object action is still set to 1, that means that the user has switched the drag sources on one target two times. In that case the variable for the other scenario (which probably has already a variable different from 0) is reset to 0.

It is not necessary to define v_counter as parameter, since it will be used as counter whatever the scenario. This action needs 4 parameters, because both v_first and v_second are used in the action; whereas in solution 1 only one of them was used..

Reset

This is not the default Reset from Drag&Drop, because it will not reset the variables nor the state of the feedback container. I used the usual workaround (micronavigation as explained in ‘Replay Slide‘ is not possible yet due to a HTML5 bug in CPwhere the On Enter action is not executed) to reset the variables and that feedback container. Two dummy slides with a duration of 0,1sec are inserted: one before each D&D slide. The reset button triggers the command ‘Go to Previous Slide’, thus forcing the playhead to re-enter the D&D slide.

The On Enter action ‘EnterDD‘ is also a shared action and looks like this:

I used that action for both D&D slides, even though v_counter is not used in the the first solution.

I hear you! Why a shared action, you only need it twice, and the only edit to make to a duplicate advanced action is the label of the feedback container. If you were one of my college students, you would know that ‘Weymeis never acts without a reason….’. I will try to explain why I preferred a shared action with two parameters, instead of two advanced actions.

When you import this shared action in a new project by dragging it to the Library from this project opened as External Library (see Libraries) the variables v_counter, v_first and v_second are created automatically in that new project, with their definition and default value. That is a time saver, something to take into consideration when creating shared actions. This happens only for variables that are not defined as parameters.

Offer

Do you want to try out those actions? Send me a mail (info@lilybiri.com) and tell me if you use shared actions, or will use them in the future?  As a 2018 offerI will send you a project that you can use as external library with the two shared actions (EnterDD and DragSequence) described in this blog post, and instructions how to use them.

Master those Fluid Boxes!

Intro

A while ago I published a post explaining the setup of the Quizzing Master slides, compulsory parts of each theme, even the almost empty Blank theme. In this article I will try to explain my experiences using Fluid Boxes on Content Master slides. Most themes shipped with Captivate have several content master slides (exception = Blank theme). Let us first start with the master slides that are not behaving like the content or quiz master slides.

Main master slide, Blank and Title master slides

Main Master slide

It is not possible to insert Fluid boxes on the main master slide: the button seems active but both options (Vertical and Horizontal) are dimmed. Objects placed on that Main master slide, and inherited by the daughter master slides, are to be set up using the Position Properties panel. Example: the text container with my name and copyright in the example movie.
As you probably know, it is not possible to have shape buttons timed for the rest of the project when you use Fluid boxes. You could put a shape button on the main or one of the other master slides but you cannot control it because it has no ID. In the example movie I preferred to have a Next button on the individual slides, because ton most slides it is hidden until the learner has visited everything. However a toggle shape button for Audio, for CC, for the TOC could be on the Main Master slide. They will not behave like objects in a Fluid box however, but act as defined on the Position Properties panel for size and location.

However after some more testing on iOS devices, the Position properties set up for those objects are not correctly displayed in portrait mode.

TIP: at this moment avoid putting objects on the Main master slide (except background of course), since they don’t display at the correct location on some mobile devices.

Blank Master slide

This master slide has no Fluid boxes by default but you could add them. As I have explained in previous articles, you should prefer to duplicate the master slide for editing, don’t edit the original slide because it is used for Powerpoint import and for software simulations.

Title Master slide

That master slide has one Fluid box (parent fluid box) but no child fluid boxes. It is set up as ‘Squeeze in a Column’, and vertically and horizontally centered. Since the Title Placeholder is inserted directly in this Parent Fluid Box, you are not able to add child fluid boxes.  Because each new project, using the default theme White will start automatically with a Title slide, this has caused already many frustrations when starting with the use of Fluid boxes. If you want to use fluid boxes on the first slide, you have to change the master slide from Title to Blank (exception Blank theme which starts with a Blank slide).

TIP: if you want to add objects on the Title master slide, first take out the Title Placeholder, to be able to insert child fluid boxes. Then put back the Title Placeholder in one of the child fluid boxes.

Content master slides

It can be a time saver to use a content slide that has already Fluid boxes. In a future next article I’ll explain how to create a custom content master slide with the help of Guides, but for now let us focus on an existing master slide, and see how we can tweak it.
In the example movie, the second slide is based on the Content04 master slide from the Theme ‘OldPaper’. I didn’t customize the theme, just applied the correction explained in my last post

Look at the setup of the Fluid boxes on the master slide: the parent fluid box (FB_15) has two vertcial child FB’s (FB_16 and FB_17). The top one is meant for the Title placeholder:

The bottom Fluid Box has 4 child FB’s, (FB_19,FB_20, FB_21, FB_22), which are set up to wrap Symmetrically (when width is too small, two FB’s will move to the next row), and have a padding both vertically and horizontally to have some spacing between the FB’s. Each of them has a placeholder for an image.

Example movie

Play with this responsive movie (will open in a new window) which has only 3 slides: Title slide (with inserted Next button, and taking over my name from the main master slide), a slide based on Content04 master slide, with a lot of tweaking, and an End slide. On the content slide you are supposed to click each of the 4 buttons in the top. The Next button on that slide will only appear when you have clicked all available shape buttons and seen all the content.

Refining slide based on Content master slide

The FB setup on the master slides can be tweaked on a slide based on that master slide. You can remove all fluid boxes, but that has not much sense. To demonstrate I did a lot of tweaking for the second slide of the movie which you just watched:
  • I deleted the image placeholders
  • I decreased the height of the top fluid box (FB_MS2_16) to 10%, originally it was 15% (edited font style as well)
  • I added a third vertical child FB under the parent FB_MS2_15, it is labeled FB_9

    TIP: changes like this will not affect the master slide. You can get the original layout from the master slide back by using the ” Reset Master Slide” button in the Properties panel of the slide.

  • That last FB_9 got two horizontal FB’s, FB_37 (70% of the width) and FB_38 (30% of the width); the last one will be used for the navigation buttons (Back/Next)
  • The setup for FB_38 is visible in this screenshot
  • Each of the four FB’s in the center (FB_19,FB_20, FB_21, FB_22) has no longer any object (see 1) and can be divided in two new vertical child FB’s
  • As you can see on the screenshot, the top FB will have a shape button and explanation text (originally hidden, but cannot be grouped in FB’s what would make the advanced actions a lot easier), the bottom one has an example of the style of that state in a shape (also initially hidden).
  • Setup for the top FB’s here is visible in this screenshot; for the Shape button (‘Normal’) the option Maintain Aspect Ratio is kept, but not for the Text container, so that it can change for smaller screen sizes (especially in portrait mode).

More questions?

You will have seen that I always had Rulers and Guides activated. My next blog post will focus on the use of that great tool, which almost no one seems to use?

Sure, I have several advanced actions in that movie, but that was not the goal of this post. No explanations here about those actions.

Built in States for Drag&Drop objects

Intro

With Captivate 9 multistate objects was one of the most welcome new features. In previous versions only buttons and shape buttons had states like ‘Rollover’ (hover) and ‘Down’. Interactive objects like buttons/shape buttons have InBuilt States: ‘Normal’, ‘Rollover’, Down and with Captivate 2017 a fourth InBuilt state was added: ‘Visited’. For all objects, static or interactive, you can create custom states..

Less known is the presence of InBuilt states for all objects in a Drag&Drop slide, both for drag sources and for drop targets. Custom states can be added as well. Both InBuilt states and custom states have some limitations similar to the Inbuilt states for buttons. Drag&Drop objects have also limitations for extra custom states.

Example Movie

Watch this movie. Beware: it will open in a separate browser window. When closing that window you’ll be back in this post. After watching interactive explanation slides about all the InBuilt State, you’ll be able to play with two Drag&Drop  use cases:

  1. The first use case has only two drag sources, one of them being correct, the other incorrect. There is one drop target, the cup. Watch the different InBuilt states both for the two drag sources which have identical InBuilt states and for the drop target. All objects also have one extra custom state. Because of my manipulation of the states on Submit, the default Reset button will not return you to a fresh start if you have used the Submit button. You’ll have to use the custom ‘My Reset’ button in that case.
  2. In the second use case you’ll see 7 drag sources and 2 target objects: the box and the trashcan. You are supposed to drag all sources to the appropriate target. You’ll find the ‘My Reset’ button here as well.

Drag Sources: states

The Drag Sources have 5 InBuilt States (see slide 2 in movie). Common to all those states and to the custom states is that you cannot add any object in a state. All the options on the Big Button Bar (horizontal toolbar) are dimmed with the exception of the Record button (for audio): no Text objects, no Shapes, no Higlight boxes (under Objects), no Media can be added to any state. Here is a short description of each state, of its functionality and limitations. As a visual reminder have a look at the Gallery, which shows those states for the first use case

  1. Normal state (InBuilt): is the Default state. This state will appear before dragging, and will re-appear if a drag source is sent back to its original position as well (for an incorrect object). The size of this state is important, because several states are locked to the same size. You can rotate the Normal state (watch the rotate handle at the top), which will also lock some of the states to the same rotation.
  2. Dragover state (InBuilt): this state appears when the drag source is over a drop target and will remain so until the object is dropped on or moved away from the target. This state is not locked, it can be resized and rotated.
  3. DropAccept state (InBuilt): will appear after dropping a drag source on the drop target, it will replace the Dragover state and become permanent. It is totally locked (watch the lock symbol bottom right): will keep the same size as the Normal state, cannot be rotated. Be careful: if you allow all drag sources, both correct and incorrect, to be dropped on the target, the DropAccept state will also appear for correct and incorrect objects! If you only allow the correct drag sources to be dropped, this state will only appear for them.
  4. DropReject state (InBuilt):  will appear after dropping an incorrect drag source on the drop target if the target is not set to allow All objects to be dropped. It will replace the Dragover state. When the incorrect object is sent back to its original position, the DropReject state is replaced by the Normal state. Like the DropAccept state this state is totally locked: no resizing, no rotation possible
  5. DragStart state (InBuilt): this state appears when you start the dragging movement until you are over a drop target, where it will be replaced by the DragOver state. The state is not locked, it can be resized and rotated.
  6. Custom state: this state is also fully locked to the rotation and size of the Normal state. As written before, you cannot even add objects in this state (which is possible for buttons). That is a limitation, in many cases you’ll want to revert to the old method of hide/show objects. For this example it seems as if I added the image of the wings, but I’m just cheating: for all states I used smart shapes. That way I was able to change the form of the shape (Replace shape), to change its fill and stroke. For the InBuilt states I used gradients or solid colors as Fill, for this custom state I used Image Fill. Since a shape can also be used as Text container, it was possible to change the labels of the states as well. If you are not yet member of the Smartshape fan-club, maybe…

Drop Targets: states

The Drop Targets have 6 InBuilt States (see slide 3 in movie). Three of those states have a name that is identical to an existing state for the drag sources: DragOver, DropAccept and DropReject. For Drop Targets you can add objects to all states, both InBuilt and custom states. Some states appear immediately, other states only appear after Submitting the exercise. Here is the overview, again with a visual reminder from the first use case in the example movie.

  1. Normal state (InBuilt): is the Default state. This state will be the main state before the Submit button is clicked. It can be replaced by another state but that will only be for a short duration. The size of this state is important, because several states are locked to the same size. You can rotate the Normal state, which will also lock some of the states to the same rotation.
  2. Dragover state (InBuilt): this state appears when a drag source is over the drop target and will remain so until the object is dropped on or moved away from the target. This state is not locked, it can be resized and rotated.
  3. DropAccept state (InBuilt): will appear after dropping a drag source on the drop target, it will replace the Dragover state. However this state will remain visible only for a short duration. Then the Normal state will re-appear. The reason is that a drop target can accept multiple drag sources, and has to be ready to ‘accept’ or ‘reject’ the next drag source.  It is totally locked: will keep the same size as the Normal state, cannot be rotated. But, as told, you can add objects, which was the case in the example movie (adding the wings).
  4. DropReject state (InBuilt):  will appear after dropping an incorrect drag source on the drop target if the target is not set to allow All objects to be dropped. It will replace the Dragover state. The state will appear for a short duration before reverting to the Normal state. State is  It is totally locked: will keep the same size as the Normal state, cannot be rotated. But, as told, you can add objects, which was the case in the example movie (adding the wings).
  5. DropCorrect state (InBuilt): this state will appear after Submit if the drag source(s) dropped on the target are all correct. It will replace the Normal state permanently. The state is fully locked (to the Normal state): no rotation nor resizing is allowed. You can add objects.
  6. DropIncorrect state (InBuilt): this state will appear after Submit if the drag source(s) dropped on the target are not all correct. It will replace the Normal state permanently. The state is fully locked (to the Normal state): no rotation nor resizing is allowed. You can add objects.
  7. Custom state: this state is also fully locked to the rotation and size of the Normal state which is limiting even though you can add objects.

Reset – My Reset

The default Reset button has been added to both use cases (slide 4-5). This button can only be used to reset before submitting the result. I added an extra button ‘My Reset’, which is really the Replay2 button described in a previous blog post. If a D&D slide is not included in a quiz, has not score it will be reset when you re-enter the slide. This is what I’m doing, getting back to the last frame of the previous slide, then continue. That may result in some flickering, depending on the bandwidth, but the D&D will be totally reset. The mentioned blog post explains the need for a user variable v_enter to store the first frame number of each slide with an On Enter action.

Setup Use Case 1

Have a look at the Timeline of this slide:
There is only one correct answer: DragSource1 to Target1. There is an object action for this correct answer, to change the state of the other drag source to the Custom state, as you can see here:

Setup is almost the default set up: Snap behavior will change the size and the opacity of the dropped object to 70% (size) and 80% (Opacity), and snaps to the center (Anchor). There is one attempt allowed, and the actions on Success and Failure are visible here:

The advanced action SuccessDD4 has three commands:

  • Change State of Target1 to AfterDD
  • Hide Gr_Draggers
  • Continue                                            to release the playhead

Due to hiding the drag sources with this Success event, the On Enter action of the slide has to ‘reset’ the situation by showing the group Gr_Draggers again. This was combined with the assignment of the user variable v_enter for this slide in the action:

  • Assign v_enter with cpInfoCurrentFrame        for the Replay action
  • Show Gr_Draggers

Use Case 2 ?

I hope you can figure out the setup of this slide. This article is a refurbished version of an older article which I wrote for Captivate 9. Feel free to visit that original post. This second use case has been modified: I edited the SVG’s by roundtripping with Adobe Illustrator, and the surprise at the end is no longer a Xmas surprise.

My plans are to upgrade important older blog posts to CP2017 and HTML5 output. At least if you let me know if this would be appreciated 

$25 off Adobe Captivate 2017 Udemy Course

I wanted to let my friends on the Adobe eLearning Community know that I’ve posted my first premium tutorial on Adobe Captivate 2017 through Udemy. In this course, you will learn how to…

  • create a responsive design interface for your question slides in Adobe Captivate 2017 using fluid boxes
  • setup variables to keep track of the selections made by the users of your eLearning course
  • write advanced actions that will form the basis of the interaction for your users
  • write conditional actions that will validate if your user has submitted the correct answers to your questions
  • convert your questions to become scored final quiz questions

The regular price for this course is $50 USD, however, If you are willing to provide me feedback on this first course I would like to offer the first 20 Adobe eLearning Community members a $25 USD discount by using the link for the coupon below:

Adobe Captivate 2017 – Responsive Custom Quiz Questions

 

Have fun with.. While loop

Introduction

In a previous blog post I explained the ins and outs of the new Advanced Actions dialog box. If you feel confused about my terminology in this more practical blog post, please read that first article. A decision block of type ‘While’ is totally new in version 2017. It has some similarities with the Conditional decision block (IF, Then, Else) but offers new possibilities as you’ll see in this simple game.  The While loop can be used to create a looping sequence of commands. That loop can be infinite, or limited in number of executions, based on one condition or a combination of conditions.  Mohana Das from the Adobe team published recently this article demonstrating the infinite While loop. Please read that article, for users familiar with advanced actions the used condition ‘IF 1 is equal to 1’ will be easily recognized, since this was the condition needed to create a mimicked standard action decision in older versions. It means that the sequence of commands will continue to be done, since that condition always results in True. In a future blog post, I will offer some tips about breaking such an infinite loop.
The present article  will focus on using the While loop, based on a condition which results in having the commands sequence repeated a limited number of times. It is a very simple game, every object was created within Captivate. One exception: the color shift in the Characters was achieved using roundtripping with Photoshop.
It is not a responsive project, to avoid a too long article (should have to explain setup in fluid boxes with logic of the variables and advanced actions). Maybe in a next article?

Play first!

Dice Game

It is a small game: when you click on the Play button, a dice will be rolled and you’ll see one of the faces of the dice, indicating a (random) number. The girl is supposed to climb the stairs, she will go up as many steps as the number you won. The goal is to reach the top. When the girl reaches the top of the stairs, clicking on the Play button will result in another scenario, and a Reset button will appear.
On entering the Game slide you’ll see two looping animations, with added randomness and a possibility to stop the the looping. You’ll see this action in Preview, but I will not provide details.

3 New Knowledge Check Interaction Templates now available!

Guest Blog by: Thomas Reyes-Cairo, Community Manager at eLearning Brothers Adobe Captivate 9 is filled to the brim with amazing functionalities, all of which pool together to make intuitive eLearning courses. Some of the great, commonly-used features include Advanced Actions (and the perhaps lesser-known Shared Advanced Actions) and variables. We’re always excited to dive into […]

Training: Designing Captivate-ing Games using JavaScript, Advanced Actions, and Variables

Topic: Designing Captivate-ing Games using JavaScript, Advanced Actions, and Variables Description: Did you know that you can create interactive games by using Adobe Captivate? Join Sreekanth Chakravarthy, Lead Learning Designer at IBM India, for an interesting session on how to create the classic Snakes and Ladders game by using JavaScript, custom effects and advanced actions […]

Training: The exciting new features and enhancements in Adobe Captivate 7.0.1

Topic: The exciting new features and enhancements in Adobe Captivate 7.0.1 Description: Join Dr. Pooja Jaisingh, Adobe eLearning Evangelist, to learn about the new features and enhancements in Adobe Captivate 7.0.1. She will demonstrate the enhancements related to HTML5, Advanced Actions, Variables, Color Swatches, new Millionaire interaction, and a few more enhancements. Recording Link