This is the third part of the series for adding a slider to your project that will update your variables.

If you have not seen the first two, you may want to get caught up.

Part 1 – Introduction

Part 2 – HTML and CSS

In this post we are going to add the HTML file we created in Part 2 to the Captivate stage as an HTML5 Animation. I will give a short textual overview of this  but I also put together a real short video walk-through as well so that you could see it played out.

Make A ZIP File

The HTML5 Animations require a zip file to be loaded so our first step to getting this on the stage is to find a way to zip up the file. You can use whatever zip tool you prefer. If you do not have a zip tool, I would recommend 7-Zip because it is free and does not require any fancy “know-how” to use it.

Add The File To The Stage

Once the zip file is created, we can go back to Captivate. Under the Media icon is an option called HTML5 Animation. Select that one and a window will pop up for you to browse to the location of your zip file. Highlight the zip file and click open. You should see the web object appear on your screen.

Clean Up The Web Object

The object on your stage may not match the dimensions of your slider so resize it and position it as you see fit.
I also removed the border and the scrolling options.

Preview As HTML5 In Browser

You will want to test this, right? Check it out an make sure that it works!

See the video below and stay tuned for the next post where we will add some JavaScript in order to view the value of the slider.

The post Set Variables With Interactive Sliders – Part 3 Adding The HTML File To The Stage appeared first on eLearning.