jQuery Sliders and SurveyPro

For this function we are going to use the jQuery Javascript Library

Step 1: Set up SurveyPro Survey

In order to create a slider, you are going to need to set up a question in SurveyPro that we can manipulate after we have published the survey.  The slider is just a fancy way for the user to put in a number in a text box, so slider questions will need to be set up with a scale of short written answer.  We’ll add the slider and adjust it’s placement after we’ve published our survey.

On page two of my survey I will create a question “How much do you like Ice Cream?” and give it the scale of “Short Countable written answer”.

Save and publish your survey per usual.

Step 2: Download jQueryUI

After you have published your survey, we will need to install the jQuery UI Library and place it on your server.

First download jQuery UI (User Interface) from their website: http://jQueryui.com/download.  This is a library of code that works with the main jQuery JavaScript file. This library contains code that will easily allow us to create animations, widgets, and other effects.  This is where the code for our slider exists.

By default have all of jQuery UI elements selected to download.  You can download all of them (we will use some of them later), or just download the ones we need for the slider, “UI Core” and “Slider”.  These will download as a zip file.

Open and extract the files in the zip.

For ease, go ahead and rename the folder you downloaded (it will default to something long, like “jQuery-ui-1.7.1.custom”).  Let’s just call it “jQuery”.

Go to the area of your server where you store the “Content” or front end of your survey of your projects.  This is where we are going to place the jQuery UI folder we just downloaded.  Copy the entire folder you just named “jQuery” and place it at the same level as the content side of your survey.

Step 3: Make Edits to SurveyPro ASP files:

Now we will need to make alterations to the asp page that contains the question(s) you will need to turn into a slider.

First we will need to call three files (Core, Slider and the main jQuery javascript files) from the JQuery UI bundle.

In the header of the asp page indicate the directory of your jQuery folder.  In Surveyhost surveys the directory looks as follows:

<script src=”http://www.surveyhost.com/jQuery/development-bundle/jQuery-1.3.2.js”></script>
<script src=”http://www.surveyhost.com/jQuery/development-bundle/ui/ui.core.js”></script>
<script src=”http://www.surveyhost.com/jQuery/development-bundle/ui/ui.slider.js”></script>

Next you’ll need to attach the style sheets to the asp page.  These make the slider look like a slider.  These style sheets are contained in the development bundle folder (jQuery > development bundle)

<link rel=”stylesheet” href=”http://www.surveyhost.com/jQuery/development-bundle/themes/hot-sneaks/ui.slider.css” type=”text/css”>
<link rel=”stylesheet” href=”http://www.surveyhost.com/jQuery/development-bundle/themes/base/ui.all.css” type=”text/css”>

Before we call the javascript function, include this small amount of styling to for the placement of your slider.

<style type=”text/css”>
#demo-frame > div.demo { padding: 10px !important; };
</style>

Then we will place the code for the slider function, also in the head of the asp page:

<script type=”text/javascript”>
$(function() {
$(“#slider”).slider({
value:100,
min: 0,
max: 500,
slide: function(event, ui) {
$(“#amount”).val(‘$’ + ui.value);
}
});
$(“#amount”).val(‘$’ + $(“#slider”).slider(“value”));
});
</script>

This function is for a basic horizontal slider.  For further documentation on steps, minimum and maximum values, and ranges feel free to go to the jQuery documentation on their website:

http://www.jQueryui.com/demos/slider/

Now, go down to the question that you want to add the slider to.  In my survey, the code for my question looks like this:

<td width=”350″ valign=”top” class=”pad-bkgnd-2″>
<span class=”question-1″>How much do you like Ice Cream?</span>
</td>
<td width=”300″ class=”pad-bkgnd-2″>
<div align=”center”><input name=”Q0002S001W” type=”text” size=”9″ maxlength=”200″ class=”ncauto-input-text”<%=NC_TextHidden(“Q0002″)%>></div>
</td>

What we want to do is add the slider (<div id=”slider “></div>), and make it so that the slider will report a number to our input field (id=”amount”)

<td width=”350″ valign=”top” class=”pad-bkgnd-2″>
<span class=”question-1″>How much do you like Ice Cream ?</span>
</td>

<td width=”250″ colspan=”3″ class=”pad-bkgnd-2″>
<div id=”slider “></div>
</td>

<td width=”100″ class=”pad-bkgnd-2″>
<div align=”center”><input name=”Q0002S001W”  id=”amount” type=”text” size=”9″ maxlength=”200″ class=”ncauto-input-text”<%=NC_TextHidden(“Q0002″)%>></div>
</td>

That’s it!  Give your survey a test, and feel how a creative user interface can effect the quality of your survey data.