Skip to main content
Sandra1981eriksson
Participating Frequently
September 3, 2016
Answered

Help with slider widget control in CP8

  • September 3, 2016
  • 1 reply
  • 1913 views

Hi, everyone!

I am a user of a bought slider widget  control and I've seen some clips of how to get started with it, variables etc. Although, it still seems I would need some further help.

I am trying to create an interaction where the student can drag the slider handle (with number variables set from the widget settings) and different pictures will show depending on which number the handle is pulled to.

For example:

  • when handle is pulled to 1, then a picture X will go from hidden to show,
  • when handle is pulled to 2, then picture X will hide again and picture Y will show and so on.
  • I wish the opposite would happen, when pulling the handle back to start point 0; the pictures will show and disappear but in reverse order. (Perhaps that would be the "Reverse polarity?")

Anyone here who knows how to do this (in exact order)? Would really appreciate it!

Kind regards,

S

This topic has been closed for replies.
Correct answer Widget King

Hi Rod!

Thanks for your reply! My earlier messagw was sent a quite long time ago, but perhaps there was some technical issue with my mail.

Anyway, I will send you my e-mail address and wait for his respond. Hopefully he can help me out!

Thanks in advance!

Kind redgards sandra


Hi Sandra,

For this interaction, first of all you need to configure the widget so that its success action will run continuously. We can then hook in an Advanced Action to read the slider's variable.

First of all in the Widget Properties window's Component menu, make sure the variable has a minimum value of 0 and a maximum value equal to the number of pictures you want to show PLUS ONE. So if you have four pictures, the minimum would be 0 and the maximum would be 5. Set up the rest of the component options as you like. I am going to assume the name of the variable the slider is linked to is named slider. This will become important when we make the Advanced Action.

Go to the Success and Failure menu. By default Evaluate Success or Failure is turned off. Click the switch to turn it on. Under Evaluate Success or Failure select Continually. Under Success Requirements select Value choose Score Greater Than or Equal To and drag the slider all the way to the left so the lowest value is selected. This will cause the widget to trigger its success action on every frame of the movie (that its present on the timeline for). Turn off Failure Requirements and make sure Reset Success Failure Criteria is turned on. The widget is now fully configured. Click OK to save your settings.

In the Captivate design environment, select the widget. In the Properties panel select the Actions submenu. Under the On Success drop down, select Execute Advanced Action and create a new Advanced Action.

You should make a Conditional Action, the name is unimportant but be sure to remember it. In the first decision write the following condition under the Perform action if section: slider [variable] is lesser or equal to 1 [literal]

Under Actions hide all the images you wish to hide, and show the one you want to show when the handle is over the first quadrant.

Save the action and move on to the next decision. Under the new decision you will write one condition: slider [variable] is equal to 2 [literal]

Under the action, hide and show the pictures according to how the interaction should appear when the slider handle is over the second quadrant.

Continue to make new decisions up to the maximum number you set for the slider widget's max value. Each action following the same pattern

slider [variable] is equal to 3 [literal]

slider [variable] is equal to 4 [literal]

slider [variable] is equal to 5 [literal]

So on until the last one which would be (if we had six pictures):

slider [variable] is greater or equal to 6 [literal]

In the action under each decision, hide and show the relevant images.

Save the action. Close out of the Advanced Actions dialog, and make sure the right Advanced Action is selected for the slider's success action.

Also make sure that Pause for Success/Failure Captions is turned off.

I've tested that setup and it works quite well for me.

1 reply

Lilybiri
Legend
September 3, 2016

Are you talking about the Slide component by InfoSemantics?

Sandra1981eriksson
Participating Frequently
September 3, 2016

Yes, exactly!

I've seen their video clips, but I still need step-by-step help with this interaction.

Lilybiri
Legend
September 3, 2016

Did you contact InfoSemantics, Rod or Tristan?

The slider will allow you to populate the associated variable to the slider component, but you'll need another event to trigger an advanced conditional action to show the image corresponding with the value of the variable.