Adding a range slider to Captivate

May 16, 2019

James Kingsley Follow

(3)

Comments

(4)

May 16, 2019

Adding a range slider to Captivate

James Kingsley Follow

(3)

(4)

(3)

Hey all,

I presented this at the 2018 Adobe Conference and thought I would share it here.

I used jQuery UI to add a slider to a course. When learners operate the slider it updates a Captivate variable.

You can view it here: https://gforce.courseportfolios.com/

And here is the code I used:

$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', '//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css'));
$.getScript("//code.jquery.com/ui/1.12.1/jquery-ui.js");

setTimeout(function() {
varhandStates= [“Normal”, “one”, “two”, “three”, “four”]
varcustomSlider=$(“#sliderArea”).append(“<div id=’customSlider’style=’z-index: 1000;’></div>”);
$(“#customSlider”).slider({
min:0,
max:4,
range:”min”,
value:0,
slide:function(event, ui) {
window.cpAPIInterface.setVariableValue(“sliderValue”, ui.value)
cp.changeState(“hand”, handStates[ui.value]);
}
});
}, 500)

Adobe Captivate

JavaScript

showcase

Tips and Tricks

(3)

Comments

(4)

James Kingsley Follow

I have worked in the eLearning industry for over 15 years. I enjoy making tools/applications/web apps do things they were not meant to do. I have launched several tools to help develop better eLearning. CoursePortfolios.com: Explore demos from the world's best eLearning designers and developers. Where the most creative eLearning professionals share demos of their craft. ReviewMyElearning.com : The is the best way to collect feedback from SMEs, Team Members, Clients, etc. Plus it's all in the cloud. I use my skills to create custom solutions for Web, Mobile, and Desktop. Primarily in the eLearning arena but we provide solutions for many other industries.