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.

Toggle to Slide In/Out

Intro

This post is meant as an answer to a thread posted in the eLearning community. “I want to create a menu that slides on and off the screen, like a door that moves to the left and right, when the user clicks a button.” I invite you to read the comment by Greg Stager who is posting some links to blogs he wrote where JS is used to create slider solutions. As you know, I often try to use only Captivate features to solve similar use cases instead of JS. This is a new example. You’ll find a step-by-step workflow to recreate the example I show. The shape (which I use as ‘box’) is not having a menu, I invite you to (re-)read my post about Hyperlinks for the creation of a Dropdown menu. That way you can avoid creating multiple interactive objects in the ‘box’.

If you don’t feel up to create advanced actions, I have an offer at the end of the post as an alternative 

Example

Watch this short file,  three slides a title slide. The three slides have two buttons (from the Assets panel in 11.5): a Next button on top, and the Slide toggle button below it. You can use the toggle button as many times as you wish on a slide. To restart, refresh the browser.

Play

Step-by-step workflow

Step 0: Next button on master slide

I used only one master slide in this project, which made it easy to put the Next button on that master slide. I kept the default option ‘Pause project until user clicks’ (Actions tab ). That will result in having each slide paused at its last frame.

Step 1: Sliding assets

Two assets have to be created and put on the first slide where you want to use the sliding box:

  • Sliding Box: I used a rectangular shape, labeled SS_slider. You can add content to it, but make sure that you check the Options tab, because you will need both the size and the exact x/y coordinates. Here a screenshot of my setup, since it was in a non-responsive project you see both size and location in px. If it was a responsive project, it would have been in %. Put the box in the wanted position after sliding in.
  • Toggle button: (SB_Slider) will be used both for slide in and out. You need to create an extra custom state for this button, I labeled it Out. Remember that Rollover nor Down state can change when you switch from the Normal to the Out state, hence make those states neutral (I did not add text to them).

Time the Sliding Box and the Toggle button for the rest of the project, rest of the project, with the option ‘Always on top’. Screenshot of Timeline:

Step 2: Custom Out Effect

Create a time-based effect to get the sliding box out of the stage. Do not use an Exit effect, but a simple motion path. I added an AlphaFromTo effect as well (100% to 0%), and reduced the duration of both effects to 1 second.

Workflow to save this effect as a custom effect is described in detail in this post. Do use that method after you have done step 3:

Step 3: Create Guides

Show the Rulers (View menu) and create two vertical guides, through the start and end point of the motion path. See this screenshot:

They will be needed to create the In Effect, to be exactly the opposite of the Out effect. Now you can save the custom effect, and take it out from the slider box.

If you didn’t use a horizontal motion path, you’ll need also horizontal guides. More information about the use of Rulers and Guides in this post.

Step 4: Move slider box in Out position

Use the guide in the scratch area to move the slider box to the correct position. I mostly use shortcut key (SHIFT or CTRL combined with left arrow) to keep that movement horizontal. For a non-horizontal movement, you use vertical and horizontal guide. You’ll see a screenshot of the new position in step 5

Step 5: Custom In Effect

Create this effect using the two guides (or four if you needed also horizontal guides). In the screenshot you see this effect, where I combined a motion path effect with an AlphaFromTo effect (0 to 100%). Save the effect, same as for the Out custom effect.

Step 6: Hide Slider box

Use the On Enter action of the slide to hide the Slider box.

Pause

Next three steps are bit tough,  you could skip them and scroll immediately to the offer at the end.

Step 7: Variable v_slider

Create a user variable, which I named v_slider. It will be used to track the status of the Slider box: in or out? Similar logic you’ll be able to see for all the Toggle buttons in this older post.

Step 8: Advanced Action ResetSlide

Create this (conditional) advanced action :

The highlighted items in this action will be parameters if you convert to a shared action. Beware: the name of the custom effect cannot be a parameter! I used TestIn and TestOut as names, you can replace them by your names if they are different.

Step 9: Advanced Action ToggleSlider

Create this conditional action. Similar to the previous actin, I highlighted the 4 parameters in case of conversion to a shared action.

Step 10: Attach the actions to events

The action ResetSlide has to be triggered by the Success event of the Next button, whereas ToggleSlider has to be linked to the Success event of the toggle button.

Offert

You can obtain the described actions as shared actions for free, including a short explanation of how to use them. You could skip steps 7 to 9, but still have to do the other steps.

How? Visit my website (https://www.lilybiri.com), fill in the contact form with your request, and a small comment on my blogs or website. You’ll get everything by mail. I probably will post more offers in the near future, if you don’t want to hear about them, you can indicate that as well (I am European, honor the GDPR law).

The post Toggle to Slide In/Out appeared first on eLearning.

Conditional Actions

I’ve built a checklist that adds increments to a variable.  So learners will check off the items that relate to them and click ‘results’, this will then display their individualized next step. The desired goal is:

If variable is less than A – show A

If variable is more than A and less than C – show B

If variable is more than C – show C

The only thing I can see is the ability to show 2 of the options (using the else function).  Is the above doable?  Any tips would be great .

Alternatively, I was thinking about a clumsier option using actions to hide/show a different ‘results’ button that then displays A, B or C.

Thanks!

p.s. very new to captivate and self-taught.

The post Conditional Actions appeared first on eLearning.

Drag and Drop Question

I am working on a drag and drop interaction and having some difficulty.  What I want to do:  I want the drag zone to change states when the correct drag source is dropped and I want another state (including a video remediation clip) to show when the incorrect drag source is dropped.  I’m missing a step somewhere and haven’t been able to figure out what I’ve done wrong.  Any help would be greatly appreciated!

Thank you!

The post Drag and Drop Question appeared first on eLearning.

Captive 9 TOC

Hi,

This is what I want the project to look like: I want the TOC to be displayed on the right when the project is first opened. I want the TOC to close after the first slide is played. I want the learner to be able to open the TOC when they want to. I want the learner to be able to navigate the TOC at any time.

These are the settings I made and it is not working as I would like. Any ideas?

First slide:

On Exit: Hide TOC & Continue Playing project

TOC Settings:

Style Separate

Runtime options marked:

Enable Navigation

Status Flag

Issues with the settings above 1) TOC does not close after first slide is played 2) Learner cannot navigate the TOC, nothing happens when it is clicked on

Any ideas?

Thanks!

The post Captive 9 TOC appeared first on eLearning.

Conditional action

I have a question type that goes like this; 6 option and two blanks. I have to make sure that the correct two option are in the correct blanks and to also create a submit button once they chosen the option. Once they submit the answer, if it is correct, i will play an audio saying “correct”. If the two answer or one of the answer is wrong, it will play an audio “wrong”.

how should i proceed to do this kind of question? How many variables do i need and how many conditional action do i need?

I am not very familiar with variables and the assign thing therefore it would be good if someone can explain it in a simple way for me to understand?

The post Conditional action appeared first on eLearning.

Answers to Challenge ‘Sequence in advanced action’

One week ago I posted this challenge

  1. Which action will be functional: A or B?
  2. Why will the non-functional action fail?
  3. Could you ‘fix’ the non-functional action?
  4. Why is using a shared action not considered to be an alternative.
  5. … other ideas?

As promised, here are the answers to those questions (didn’t get any answer to 3 nor 5)

1. Correct action = B

Only action B will be working correctly. Action A will always show the same image, in this case image 4.

2. Why is A failing?

The reason was already ‘hidden’ in the title slide. It is linked to the way advanced (and shared) actions are read and executed in Captivate. All commands will be done, starting with the first decision from top to bottom, then with the second decision (top to bottom) etc until the last command in the last decision is finished. This is different from some programming languages, where a script can be finished before reaching the end, by breaking out of it. Captivate doesn’t support breakout. Hence the importance of screening the sequence of commands in a decision, and the sequence of the decisions themselves. Be also very careful with conditional decisions when using both the THEN and ELSE part! In most cases understanding the logic is easier when you do not use the ELSE part.

Translation of the commands in action A. Remember: the user variable v_click is tracking the number of clicks, there are 4 images to show in sequence and a loop has to be created.

  • First condition: What has to happen when v_click =0? First image has to be shown, and since it is a loop, it could be that the last image 4 has to be hidden. Looks logical. However, the problem is in the change of the variable to 1 with the Assign command!
  • Second decision: What has to happen when v_click =1? But it is 1 after the first condition (Assign), so this is true, and image1 will be replaced by the image2. Again, the variable will be changed, now to 2 (Assign)
  • Third decision: What has to happen when v_click =2? It is 2 after the second condition, image3 replaces image2 and the variable value is changed to 3.
  • Fourth decision: What has to happen when v_click =3? It is 3, result is that image3 is replaced by image 4, and the action ends in this situation. Variable is set back to 0. The next click will repeat all the conditions again and result is the same: image4 remains.

3. Fix the wrong action?

Strange that no one answered this challenge. In 2 you did see the cause of mal functioning: the change of variable within a conditional decision. Let us start by taking it out in a separate decision which is not conditional. You cannot use Assign in that case, because that means filling the variable with a fixed value. So I will replace Assign by Increment.

If I want to keep the decision commands as they are in the original action, with one Hide and one Show command, the sequence of the new (5th) decision is important: it has to be at the end, after the 4 original decisions. Result of the fixed action:

4. Shared action not an alternative

One user mentioned that a shared action was not appropriate because it is used only once. Shared actions are not only useful within one project, but have a lot of other advantages as I have mentioned in previous articles: their appearance in the Library, which can be used as external library to re-use the action in any other project is the main reason.

To be a shared action, that is useful for multiple situations, the number of photos should be variable, not fixed to 4. That means an extra variable (v_max). Both actions at this moment have 5 decisions, which is the number of photos + one for the increment (or eventually decrement). It is not possible to make the number of decisions variable however, which means a possible shared action would not be very flexible. It could be useful as template for a future advanced action, since duplicating a decision is very simple.  To be used as a shared action that can be used out of the box, it is not suited.

5. ..?

No answers. What about an automatic looping of the photos, using a While loop? Wondering if someone would take that challenge?

Or reversing the logic: use Decrement instead of Increment?

The post Answers to Challenge ‘Sequence in advanced action’ appeared first on eLearning.