Captivate 2017 – Chemistry Tic Tac Toe Game

This Chemistry themed tic-tac-toe game allows you to select any position on a tic-tac-toe grid. Once a spot has been selected you are given a chemistry question that must be answered either True or False. Correct questions are given an “O”, incorrect questions are given an “X”. Just like tic-tac-toe if you get 3 correct in a sequence you win.

Play the game here:

Captivate 2017 – Chemistry Tic Tac Toe Game

Game start screen

This game was created in Captivate 2017 using state views, smart shapes, Advanced Actions and JavaScript. I attempted to create this prior to the addition of State Views and found it difficult to layer and work with all items required.

chemistry-1

State views simplified this task of organizing objects – all interactions take place on one slide.

chemistry-3

 

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.

Managing Advanced Actions

When managing Advanced Actions in Adobe Captivate, I recommend that you open the Advanced Actions window from the drop down menu rather than from the Actions tab in the Properties of a slide or object. This way you reduce the risk of accidentally selecting a new Advanced Action in place of what was there from the start. Click on the Project dropdown menu and select Advanced Actions. Alternatively, you can press SHIFT+F9 (which doesn’t always work for me) to open the Advanced Actions window. Once open you can scroll through all the Advanced Actions in your project using the Existing Actions selection drop-down shown below.

2018-01-27 1-26-32 PM

You should become familiar with the toolbar controls just above this drop-down selection box.

toolbar1The first icon is Preview Action. This makes Advanced Actions easier to read and share with others. Normally items like your Else statements are collapsed so using Preview Action will show the entire script in one list. If you want help troubleshooting Advanced Actions on the forum, using the script as it’s written here is helpful to the other users assisting you. Here is an example Conditional Action I have for one of my projects:

2018-01-27 1-20-57 PM

toolbar2The next icon is the plus symbol and allows you to start making a new blank Advanced Action.

toolbar3After that is the import icon which allows you to import Shared Actions. A well created Shared Action is completely reusable and can be shared across more than one project. It also can be used multiple times within the same project just by changing the parameters that reference various objects and variables used throughout your project. Here is a video tutorial I did some time ago on Shared Actions if you would like to learn more: https://youtu.be/uoTe03qcGNs

toolbar4The next icon is to export Shared Actions and will be greyed out if you don’t presently have any Shared Actions in your project. Captivate Shared Actions can be saved as a CPAA file format but they can reside as part of your Captivate Library if you don’t need them to be stored outside of a single project file.

toolbar5This is the delete action icon and its function is self explanatory. I use this when I’m feeling overwhelmed by all the extraneous Advanced Actions I might end up with in an eLearning project. This is mostly due to starting an Advanced Actions and then abandoning it and rewriting it and so on. The good news is that if you try to delete an Advanced Action that is in use somewhere in your project you will get a warning like the following:

2018-01-27 1-46-05 PM

Just be careful when deleting these advanced actions that you don’t delete something you actually need.

toolbar6Lastly is my favourite icon from this section and that’s the Duplicate Advanced Action icon. As the name suggests this icon will make a copy of the currently selected Advanced Action. You will find that there are many sets of advanced actions that are reused. The modern solution for cases where you need a similar version of an advanced action duplicated is to simply use Shared Actions. Duplicating actions and making a few small changes to them was the way things were done before Shared Actions were introduced in Adobe Captivate version 7. Also some people are just more comfortable making a new action from the old action. The duplicate action will be named “Duplicate_Of_” followed by the original name and then a number to make sure that duplicated actions are named something already in use.

Zoom and Pan an Image in Captivate – an Experiment

It’s been a while since I created complex interactions with Captivate. Now that I upgraded to Captivate 2017, I needed to refresh my memory about using Advanced Actions and custom effects. I also wanted to try out the new “While” option that was added to the Advanced Actions tool set. I’m not very good at reading through tutorial pages, so I decided to use an old project as my test case: Take an image that far exceeds the dimensions of a Captivate project file and then find ways to interactively zoom in/out and pan the image right/left/up/down.

Here is the result of my “homework”.

CockPitTWImage

The image I chose is 5616 x 3744, and  the project size is 1100 x 730. The first challenge was to overcome Captivate’s size limit for images (3200 x 3200). I ended up creating two images tiles, imported, resized and grouped them.

One image tile shown at its original size.

Then I added shapes and custom states for each of the buttons to zoom and pan. The Zoom effect was quite easy to set up. An Advanced Action assigned to the Zoom In button increases a custom variable and then applies a ScaleTo effect of 1.1 to increase the size of the image group. I limited the project to 10 zoom levels. The Zoom Out button does the reverse and applies a ScaleTo of 0.9 effect.

Creating the panning functionality turned out to be more complex. While you can apply an effect, like RightToLeft as part of an Advanced Action, there is no way to specify the exact path length. However, you can create a custom effect, e.g. a motion path of any length/direction. Once saved, these custom effects can then be selected from the Apply Effect dropdown list in an Advanced Action. Thanks to @Lilybiri for reminding me of this option.

Custom effects for image panning

I set up four custom effects for panning the image group left/right and up/down. With a bit of math and fairly complex actions, I was able to interactively zoom in on the image and also pan around at each of the ten zoom levels.

That’s where I stopped my experiment. I could have expanded the actions to allow for zooming out no matter what panning position the image is in when the Zoom Out button is clicked. Currently, you can only zoom out if the image is centered, otherwise the Zoom Out button is disabled.

CpExtra – A really Fantastic Captivate Widget. A must have in your Captivate ToolBox

Captivate is really a terrific product for creating E-Learning but often I like to think “Out of the Box” and I need it to do a little more.  And the really great thing about Captivate is Adobe has made ways it can do more with JavaScript.  But JavaScript can be bit cumbersome and tricky to learn.   Well, the good news is there is a 3rd Party Widget called CpExtra which adds all kinds of extra functionality to Captivate without having to learn JavaScript.   CpExtra was developed by Tristan Ward  and sold at Infosemantics Pty Ltd.   Believe me, it’s a tremendous bargain considering all it can do for you.

CpExtra can do something as simple like making sure a user can’t move the timeline scrubber which can be very useful.   And it can do things very complex things like allowing Captivate variables to be passed between Captivate courses with Local Storage and even pass Captivate variables to other non Captivate programs.   With CpExtra an Advanced Action can call another Advanced Action which helps reduce redundancy.   There is functionality which helps make Text Boxes with Captivate variables much more user friendly.    There are CpExtra Event Listeners.  For example when an audio ends, CpExtra can execute an Advanced Action.   And I can go on and on because CpExtra does so much more.  I’m sure your mind is already spinning with the possibilities.

I would not have been able to create my latest Captivate project without CpExtra.   I commend Tristan Ward for creating such a creative, wonderful product.  I am writing this blog as a thank you to Tristan for making me look good as an E-Learning developer and I’m so appreciative I wanted to share my thoughts about CpExtra with the Captivate community.   CpExtra will make you look good too.

My Captivate Project which I created with CpExtra helps people with their daily meditation practice and tracks that they are accountable for doing it.   If you want to try meditation you are welcome to use my product at:  http://mindarrive.com/thespiritofbeing

And now here is the video about my Captivate Project and CpExtra.

 

 

Get Premium Adobe Captivate 2017 Course from Skillshare for FREE!

I’ve added my premium video tutorial to Skillshare.com. Here is a way you can view the full 1 hour and 20 minute course for FREE.

  1. Click the following link http://skl.sh/2iY3hiU
  2. Once you’ve watched the Introduction, click on the Start Your Free Month Today button.
  3. Select the 30-day free trial option
  4. Select your sign in options and payment information
  5. Watch the course.

Of course, if you don’t intend to continue with your Skillshare.com account be sure to cancel before the promo period ends.

Custom Show/Hide Glossary that works in Captivate 8, 9, and 2017

Okay, so I know what you’re thinking. You’re thinking “Hey Paul, you promised to never do a Captivate 8 or 9 tutorial again”, and that’s right. I did say that but this is actually a Captivate 2017 tutorial that just happens to include steps that would work for Captivate 8 or 9 as well. In this video, I show you how you can create a custom interaction that can be used as a glossary page in your Adobe Captivate project. If you found this video useful, please consider subscribing to my YouTube channel at Paul Wilson Adobe Captivate Tutorials. Please share this video with your colleagues.

Zero to Sixty with Advanced Actions

The Question: Just how fast do advanced actions execute themselves?

The Answer: At times, I’ve found myself pondering that same question. And to find the answer, I set out to test it in the real world. My process, and findings are below.

First, I have no doubt that executing a single advanced action would happen too quickly to measure. So, I decided to execute a lengthy list of actions (60 in all, thus the aptly named title of this blog).

  • The image below represents my test project. It consists of 28 identical squares (each with 3 states: normal (black), orange, and blue), a Run button (used to execute the advanced actions), and several variable boxes to capture what happens once executed. It’s important to note that all testing took place on a single screen.

Timing1

  • The next image (below) shows a portion of the straightforward advanced actions that executed (each box changes its state from black to orange, and then from orange to blue – 58 actions in total. In addition to that, I have two actions that capture starting time – Starting Epoch – and ending time – Ending Epoch).

Timing2

  • This next image shows what the screen looks like just before pressing the Run button to initiate the string of advanced actions. Notice all variables properly display their default value of zero.

Timing3

  • And lastly (drum roll, please), the image below displays the results after executing the series of advanced actions.

Timing4

The Debrief: For my first test to execute 60 consecutive advanced actions, it took 37 milliseconds (0.037 seconds) not including the 1 second delay, which I added to allow the passage of enough time to register in the “True Time Lapsed” indicator boxes.

I did a total of 10 identical tests, for which there was a slight variance, but the stats for all 10 are as follows:

  • Average (per test): 48.1 milliseconds
  • Average (per action): 8/10ths of 1 millisecond
  • Fastest test: 15 milliseconds
  • Slowest test: 134 milliseconds
  • So, what is an Epoch? – In terms of Adobe Captivate, it is the time elapsed, in milliseconds, since January 1, 1970. These can be used to establish great unique identifiers in your training! Stay tuned for a post about the power unique identifiers!

The Morel of this Story: When working with a lengthy list of advanced actions, there is no need to worry about a delay in user experience in order for the actions to fully execute. However, the order in which advanced actions are written/placed is incredibly important, because actions execute in a linear fashion (from top, straight down to bottom). Additionally, placing actions in a cohesive order will undoubtedly make it easier for others (and future you) to read and understand them at a later date.

I hope this was helpful, or at least worth pondering. Until next time folks! Go BE the YOND!

-Adam

P.S. I originally posted this on my website at http://www.elearningprose.com/blog