Sequence Check – Setup

Intro

I have posted an example file where the sequence of clicks is checked, under sample projects.  The workflow started from an old post, created before the switch from SWF to HTML5 output, and having lot of new features added to more recent versions of Captivate. This blog will explain the setup of both example slides.

At the end, for those interested in choice between advanced and shared actions, will explain why shared actions couldn’t be used in this use case.

Setup

Variables

Similar to the old post I used only two user variables (to be created):

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

Multistate Objects

Instead of the hide/show workflow used in the original post, this time replaced it by multi-state objects to display the feedback. Object is labeled Tx_Display (for the Geo-slide) and Tx_DisplayBis (for the Keypad slide). Look at the screenshot of Object states of Tx_Display:

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

SVGs

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

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

Actions and events – Geo slide

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

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

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

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

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

Actions and events – Keypad slide

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

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

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

As explained above, for SVG_Second (number 9) there is a slight difference:

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

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

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

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

Why not use Shared Actions?

Although we have very similar actions for the SVG buttons, both on the Geo slide and on the Keypad slide, this is a typical use case where it is impossible to use shared actions. Problem are the ‘literals’, which should have been converted to parameters. Look at the screenshot of the action SV1_Act posted earlier. Logically these items should be parameters:

  • The SVG button SV_1 – compulsory parameter in the first decision
  • The literal ‘1’ in the condition of the second edition, not compulsory
  • The multistate object Tx_Display, compulsory paraBt_Nextmeter in the second decision
  • The state Wrong in the ELSE part of the second decision
  • The button Bt_Next in the ELSE part of the second decision

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

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

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

The post Sequence Check – Setup appeared first on eLearning.

Change state variable to endlessly select and deselect an image

Dear community,

I have created a slide in an online module where I ask learners to select up to 4 images. The images are inserted in gray scale (state 1) and when selected change state to their colored version (state 2). Now due to their task it is possible that they decide to deselect an image again after having selected it in the first place.

For this to work I created a variable (“clickendlessly”)  and when running the Advanced Action (conditional) the variable “is equal to 0” so that a click on an image changes its state to state 2 (color). The variable is toggled so “if ELSE” by clicking again it changes back to gray (state 1). So far so clear.

Now, when I switch between the 4 images, e.g. I first clicked image 1 and it changed its color to state 2 and I click on image 2, what happens now is that the first click kind of only selects the image and only when selected by clicking it again the advanced action is “released” and change of state therefore needs a second click. Once selected I can change state again and again. But as soon as I move on to another image I need to select the image first (click 1) and change state/color works only with click 2.

Question: Is that how it is and I have to live with it OR is there any way around it? So that whenever clicking on an image it changes color right away, no need for the “pre selection process”?

Help would be great!

Thanks in advance!

Jane

The post Change state variable to endlessly select and deselect an image appeared first on eLearning.

Newbie Quick Captivate Tip: Visiting the VISITED State

I love the VISITED state. Even more, I love how easy it is.

I use the VISITED state a lot.  It offers users a visual clue to keep track of what they’ve clicked on initial visit or on revisit, if you choose that latter option.

Using the VISITED state is a simple workflow.  As Newbies, it’s common to get bogged down in the menus, properties, and actions. You don’t need to worry about those here.

VISITED states require 1 step only. Just add the VISITED inbuilt state and determine what it will look like.  Well… maybe 2 steps.  But you do them in 1 step in the State View.

Let’s take a look at what you don’t have to do first…

1) If you’ve got only 1 object that you want to add a VISITED state to, you don’t have to define that action On Exit.

2) You don’t have to include it in a Shared Action or Advanced Action.

What do you have to do?

1) Add a new VISITED State and determine how it will look. I used a checkmark. But, other choices could be a lower opacity or an “X.”  Captivate’s guides make it easy to align any other objects you want to add.

2) If you want that state to be there when the user comes back to the slide, click “Retain State on Slide Revisit.”

Now, let’s see what things look like when all 5 circles are clicked.

And that’s it! VISITED State is incredibly powerful and an intuitive Captivate 2017 feature!  Have fun adding it to your courses.

The post Newbie Quick Captivate Tip: Visiting the VISITED State appeared first on eLearning.

Changing States vs Animation – (A Reason to Learn JavaScript)

At some point in your life you very well may have heard the phrase – “There is more than one way to skin the cat.” – not sure where or how that originated but I think most of us understand the meaning behind this idiomatic expression.

Creating projects with Captivate is no different. Arriving at your desired result could very well have taken any number of pathways. However, as much as those results might be the same, there can also be some subtle differences that can potentially make an impact on final presentation. I happen to think that it is good for us as developers to learn multiple ways to get the job done and then be able to choose which way provides the better impact. In many cases, there will be no marked difference, and so you may as well go with the method that is the quickest and easiest.

I think one of the areas where differences can be seen is when we compare state changes and animations. Now, you might feel differently and, to be sure, this is a subjective thing without any right or wrong answer per se. We’re merely talking about preferences here. Nonetheless, I find it to be an interesting topic for discussion and I will allow you to decide for yourself.

In my example, I have provided two of the seemingly exact same status indicator. The only difference between them is the manner by which they function.  The indicator on the left uses the native Captivate ability to change states to move the bar while the indicator on the right uses JavaScript to animate the bar.

The premise of the interaction is simple – pick items on the list to take with you that do not exceed 25 pounds. Click on the ‘Check Weight’ button to see where you come in. As you do so, pay attention to how the status indicators respond. Which do you prefer? Here is the link to the working comparison.

**Please note that I have no idea what the weights of these things are. I just picked some values that I thought might be close so try not to hold that against me. ** 

https://s3.us-east-2.amazonaws.com/captivateshare/meterClimb/index.html

Same end result. Subtle difference in presentation. The snap versus the glide.

Don’t get me wrong. I love the ability to do state changes and use them often. However, I always think it is worth the time to learn new skills and develop one’s craft.

If you plan to develop for years to come, I encourage you to take some time to enhance your craft and learn a little JavaScript. It can help you to create some experiences that have a little something extra above your competition.

The post Changing States vs Animation – (A Reason to Learn JavaScript) appeared first on eLearning.

PowerPoint, Meters, and States – Oh My!

PowerPoint sometimes gets a bad rap but I truly believe in the ‘power’ that PowerPoint has available.

In this post, I wanted to share with you one of the ways I use PowerPoint to supplement what I want to accomplish in Adobe Captivate.

Meters

I love using meters in my activities. Whether that is a progress meter or some sort of indication of success, meters can be a great way to inform the learner of how they are doing. There are tons of possibilities with your creative touch – nothing is off the table at this point.

I use PowerPoint regularly as my graphics editor and making meters is a task I do often. I find it to be very simple to create and manipulate the shapes to get the outcome I need. In this example, I will make a simple meter that tracks time in 5 minute increments. These increment images become image states in Captivate which display based on your variable values and logic. This post will address the methodology of creating the images rather than working out the logic.

**Please note that this is not a live timer but a meter that will change based on variables that you assign and are updated as a learner makes choices.

**Also note that I duplicate slides at each step. This helps the creation but also helps when mistakes are made – less things to fix.

 

Creating the Images (Clock Style)

Step 1  –  Make a circle shape. You can ensure the circle is round rather than oval by holding the shift key while you drag it out. Color the circle to your design. In this example I will use a light red color. This is the color that will reveal as “time passes”.

slide1

 

Step 2  –  Make a very thin rectangle shape and center it on the circle. I use a good contrasting color so it is easy to find.

slide2

 

Step 3  –  Make as many copies of the thin rectangle as you need to segment the meter into the number of divisions you desire. Make sure they are all centered. Then rotate all of the rectangles based on the number segments so they are all equal. In this example, I created a total of six rectangles so I could have 12 equal segments representing 5 minutes each. (360 degrees / 12 = 30 degrees) I rotated the remaining 5 rectangles by an increasing 30 degrees for each one.

slide3

 

Step 4  –  Select all of the objects making sure that you select your circle first so that your formatting remains. Then fragment them. You should notice a change to the rectangles based on the formatting of the circle.

fragment

slide4

 

Step 5  –  Make a copy of the first circle and reformat it to the color of the timer. In this example, I am going with a greyish-white. It is important to remind you that I have been duplicating slides at each step. This helps ensure that all my objects stay in the exact same position. This is critical for the next phase of this setup as we will be copying and pasting from one slide to another and that keeps them properly placed.

At this stage you can perform a right-click and ‘Save as Picture’. This will be the starting of your image states in Captivate.

slide5

saveAsPic

 

Step 6  –  Go back to your fragmented slide. Select the first segment and copy it (CTRL-C). Go to the slide with the circle you just made and re-colored. Paste the segment (CTRL-V). It should appear in the same spot. Group them by selecting everything and (CTRL-G) then save as picture again. This will be your next state.

Now ungroup them (CTRL + SHIFT + G) and go back to the fragment slide to grab the next piece. Paste the next one in place, group, and save as picture.

Repeat the procedure until you have created images of each step of the meter.

slide6

slide7

slide8

 

Step 7  –  Now you can import each of the images to Captivate and you could use either the blank circle as a start point or the full circle  where segments disappear. Each image is a state that you can utilize the ChangeState function of Captivate to display them based on parameters that you choose.

 

Here is a pic of my version of this in one of my applications. In the scenario where this is used, I give the learner “two hours” to perform the task. Each decision they make along the way costs them “time”. The meter fills up to show how much “time” has been spent on the task.  As you can see, I added a few additional elements to this one such as the little hand that follows along like a clock and the numbers as well to help read the time.

PowerPoint is a really useful tool that makes creating these sorts of things very easy and is an amazing supplement to Captivate.

Hopefully this was helpful for someone. Feel free to ask questions about this.

85