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

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

Part 1 – Introduction

Part 2 – HTML and CSS

Part 3 – Adding File to the Stage

Part 4 – The JavaScript

In this post I just wanted to share the complete project so that you will have something else to play with. The complete project, of course, extends the usage of this idea to two sliders on one screen which control different variables. I also thought I would share some websites that I spent a significant amount of time on in order to get this figured out as well as some other resources I mentioned over the last four postings.

Project Items – zip file contents – approx 650K

The Money HTML File – This is the code for the slider that sets the dollar amount
The Percent HTML File – You will notice that it is exactly the same as the money file but with a different range, step value, and named ID
The JavaScript Text – You should notice that the two sliders have essentially the same code. What changes is the variable name  frame vs frame2  for example, and the addition of the formula for calculating the new price with sales tax added on. Remember – this is placed as an OnEnter action.
The CPTX File – This was made with Captivate 2017 so, I guess, don’t try to open it with an older version. You can, however, use the other files to recreate it in your own version, if different.

Websites and Other Items

I am no expert in this JavaScript stuff. I had to study hard and perform lots of trial and error to get things to eventually work.
Here are some websites that I used pretty extensively to learn stuff during this project. Maybe you can gain from them as well.

W3Schools – Amazing resource! Covers HTML, CSS, JavaScript, jQuery, and more! Like a “One-Stop” shop! I spent most of my time here by far. The little windows to test things is helpful.

jQuery UI – This project did not require anything from the jQuery-UI specifically but did use some jQuery but I learned a great deal from this site.

7-Zip  –  This is the program I use for creating and extracting zip files. The price is right – FREE!

Notepad++  –  This is my editor of choice. I started using it during my undergrad courses in HTML, CSS, PHP, and JavaScript and haven’t switched yet. And again, it is FREE!

Ninite – I did not mention this site in my posts but it is the place I go to get my free downloads. It will automatically pick the right versions and install them with out all the need to go to a million different sites and click NEXT, NEXT, NEXT just as many times. It also strips out any freeware that piggybacks on a lot of free stuff out there.

Also a big thanks to one of my colleagues who spent two hours performing trial and error runs with me.

I had a great time making this and sharing it with all of you.
I hope you will get something out of it and be willing to share your ideas related to their use for us to see.

The post Set Variables With Interactive Sliders – Part 5 Additional Resources appeared first on eLearning.