April 9, 2020
Adding a Slider to Captivate
Comments
(8)
April 9, 2020
Adding a Slider to Captivate
I've been developing eLearning in a variety of formats since 1983
Master 38 posts
Followers: 75 people
(8)

If you have been using Captivate for a while, you’ll know that there is no slider object. There isn’t a way that one can easily be built within Captivate. So, if your project would benefit from having a slider, you have to build it using another tool.

In this video, I’ll show the basics of a web page that has two sliders. These sliders display values by using some JavaScript. Also in this video you will be shown how to insert the HTML5 sliders into Captivate. In order to get the slider values into Captivate, a bit more JavaScript is added within Captivate.

Don’t let code worry you. This video will step through the code in small steps.

The project files can be downloaded here: http://www.pjrules.com/adobe/slider-in_captivate_project.zip

I hope you enjoy learning about sliders.

Cheers

8 Comments
2022-01-21 13:23:34
2022-01-21 13:23:34

Hi Phil,

I used your example to make Volume slider. It was quiet esay. But I found some problem.

From slider is used value to set variable cpCmndVolume. But it doesnt work.

I set it like this: window.cpAPIInterface.setVariableValue(“cpCmndVolume”, iFrameSlider.volume);

or I set: window.cpAPIInterface.setVolume(iFrameSlider.volume). It doesnt work too.

If I set it using value, for example 50 it works: window.cpAPIInterface.setVariableValue(“cpCmndVolume”, 50); but it keeps volume on 50% level.

Could you help me? Sholud I change iFrame.value to integer?

Like
()
2021-07-23 20:42:38
2021-07-23 20:42:38

The file cannot be used i I get all sorts of warnings like it might be in use or damaged or I don’t have enough space – all of which is not the case. please help – I really need a slider marked with liters to help my young learners calculate how many 500ml cups are in a certain amount of liters.

Like
()
2021-06-25 11:24:17
2021-06-25 11:24:17

There is an additional function addAll() in the actual zip file used in captivate, this is different from the one in the example. Correct zip with file attached.

This function updates the values when they change.

Love this Craptivate thing. If possible I wouldn’t use it even if it’s free.

Like
()
2020-12-03 22:06:13
2020-12-03 22:06:13

Game changer. Thanks.

Like
()
2020-05-10 22:29:01
2020-05-10 22:29:01

Thanks for this Phil had fun with it! I wish Captivate would get off its butt though and add sliders and dials such as found in Storyline 360. I use dials and sliders all the time with projects to create stimulating activities in Storyline.

 

Like
(2)
(1)
>
David Burnham HBA
's comment
2020-05-11 20:16:36
2020-05-11 20:16:36
>
David Burnham HBA
's comment

I hear what you’re saying David. It would be nice to have it built in. The advantage of this is you can customise the sliders almost endlessly. You can also add as many as you need. So it’s more work but at least it works well when it’s imported.

Cheers

Like
(1)
2020-04-13 08:43:28
2020-04-13 08:43:28

Bit of Captivate history: we used to have a Slider and a Rotator widget (both from InfoSemantics) in the good old times of SWF output…

Thanks for this workflow, Phil.

Like
(1)
2020-04-13 07:39:11
2020-04-13 07:39:11

Simply amazing !… Thanks a lot for sharing and explaining in depth this project !… (There is no cure for the virus but you could have saved the world with this !…)

More seriously, I have no idea so far how to put html coding in Captivate before, even though I knew it was an option !… I may be wrong, but it’s the first time I see such an example !…

PS : And I also didn’t know the Canadians have such a funny spirit !… I’m still laughing !!!…

Stay safe and happy Captivating !…

Like
(2)
Add Comment