SurveyHost Category

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.

How to create a quick Poll with Results in SurveyPro.

Description:

A tutorial about how to make Pop-up web polls with SurveyPro. It includes a sample file to download and the steps to create one from scratch. These are useful for getting visitor participation on your website and helping engage your audience.

Demo

Download SP4 File

Requirements:

The survey programming is pretty straight-forward. The coding of the pop-up aspect, however, requires some knowledge of HTML and basic web-programming. We don’t cover the pop-up part other than to mention which tools where used in the Demo.

Overview:

Essentially, we need to create a survey which contains a single page.  On that page we would have the question(s) and the “Vote” button.  Exiting from that page would pull up the “Instant Online Report” page to show the results of the poll.

Steps:

Pop-up poll questionnaire

Pop-up poll questionnaire


Create a questionnaire - Usually, polls are a single question, though there is no limitation in SurveyPro regarding this. It is important to keep dimensions in mind since iframes should have defined dimensions and the survey AND report will need to fit within whatever you set. Depending on which options you set for the Instant Report, 300px is about the minimum width you should use. You will likely need to experiment with this since you can set the width of the questionnaire, but not the report. You may also want to change the “start new” button text to “Vote!” or “Submit” (Document -> Properties -> Buttons Tab).

Page List Dialog

Page list dialog

Remove extra pages – This survey should be a single page, so remove any others (including “thanks” page) in the Document -> Edit Page List dialog.

Report login dialog

Report login dialog

Create the report – Go to Document -> Web Survey Setup, and click the “Edit” button next to Online Reports. Edit the Login Page (or create a new one) and make sure “No Password” is selected.

In the Edit Report dialog, select what stats you want to show.

Exit settings dialog

Exit settings dialog

Change exit settings – Document -> Web Survey Setup, and click the “Edit” button next to “Embedded Operation”. The report url will vary based on where your survey is hosted.

Pop-Up:

The “pop-up” aspect involves some knowledge of HTML. For our demo, we used a JavaScript library called jQuery and a plugin for jQuery called Thickbox. The intent is to pop up a modal window (i.e. an ‘iframe’) containing the survey. The survey itself could be hosted on QuestionWeb or your own server.

Another method, that is a little less “standards compliant”, is to pop-up an actual new window with javascript. We don’t recommend this method, though it is available.

Finally, another popular option is simply embedding an iframe in your HTML page and having the survey appear there.

One important thing to note – certain users’ networks disallow iframe content, particularly when the content comes from a different base url or server. This may be an issue if you use a survey hosted on questionweb.

Using Load Balanced Servers with NetCollect 3.1

Information for NetCollect 3.1 users who want to host their surveys on load balanced server arrays.

Resolution

Open Server Load Balancing Document

More Information

Note: This document is a supplement to the server configuration information in Chapter 4 of the NetCollect User Guide. Please be familiar with configuring a stand-alone server before looking at the load balanced setups. For the latest NetCollect documents, go to: http://www.apian.com/downloads/

Why does SurveyPro slow down when I try to open a file with a large database?

As you develop multiple reports, and the SurveyPro database grows in complexity, you may start to notice some slow down in processing.

SurveyPro must re-tabulate all open reports when saving, or upon opening the file. By closing individual report documents that are not in use before saving or closing SurveyPro, you should see an improvement in system speed and performance when you save or next open the file.