Surveys can be a useful way to obtain knowledge about your users. However if you are a user, or potential client, they can often be a hindrance, if you are not interested in leaving feedback. Surveyable is a simple plugin which enables you to create a more user friendly experience by remembering your users wishes, using cookies in jQuery. Surveys can be triggered on key pages and expirey dates can also be applied.
Usage
To use this plugin you will need to call in the jQuery framework. This plugin also depends on the jquery cookie plugin. Call the files like so:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript" src="jquery.survey.js"></script>
To initiate the plugin simply call like so on the page you wish to display the survey on:
$(function(){
$('#survey').surveyable();
});This will call in the surveyable plugin to act on the id of Survey. The div with the ID ‘survey’ will then contain all the information about your survey. This will follow the standard format as shown below. This method means you can extend the plugin to add the survey within the dialoge box, or alternately you could link to your survey on a different page.
<div id="survey"> <a href="#"></a> <h2>Please take my survey</h2> <p>I am currently conducting a survey, your help would be greatly appreciated.</p> <p> <a href="#">Take survey</a> </p> </div>
Parameters
You can also add extra parameters to the plugin. name sets the name of the plugin and duration sets how long the cookie is enabled for. This can also be set as an integer for the number of days from now . For example 7 would set a cookie for 1 week.
$('#survey').surveyable({
name: 'surveyTaken',
duration: 'today'
});This is a first release and I feel there is a lot of scope to add more functionality and features to the plugin. If you have any thoughts or encounter any bugs, please feel free to feedback. I am always looking to improve.
January 15th, 2010
The demo isn’t working for me in FF 3.5 or Safari. The “Take Survey” link doesn’t do anything, and, once I’ve closed the object, successive reloads of the page don’t even show the link to take the survey.
« Reply
February 2nd, 2010
A disgrace, really. It doesnt work in 4 browsers I tried with, IE8, Opera 10, 2 versions of Firefox. Not sure how one could progress to a 3 page post with a custom ‘demo’ page for something that doesnt work… no one proof reads or tests anymore?
Good thing I use ADBLOCK so I can rest assured I didnt burn my eyes on any ads!
Dont reinvent the wheel, just use a Wizard plug in and any of the light box plugins to do the trick..1hr, tops!
« Reply
philipbeel Reply:
February 2nd, 2010 at 9:11 am
@steve, I have checked the plugin on the browsers you mentioned and I cant see any issues. I am going to assume you actually read the post before clicking the demo and making your own assumptions on what this plugin actually does. I offer this solution to less technical people who would like to implement a free feature on their site. It’s great to know you could do this better in 1 hour, but it does beg the question why you found this page. Happy coding
« Reply
February 13th, 2010
Hello Philip,
Thank you for the script. I’ve been attempting to implement it, however I’ve ran into a few issues. One being, after I hit the “X” (close) and refresh the page, it goes to a blank page. To me, it should popup again. I understand when you hit the “take survey” button it goes to a blank page because you’ve set it to # in the code. Any suggestions? Thnx, H
« Reply
philipbeel Reply:
February 13th, 2010 at 3:21 pm
@Heath, The demo will show you the page that you are on, The reason that you won’t see the survey popup again if you refresh the page is because when you initially closed the popup the plugin stores a cookie so it knows the user has already interacted with the survey, this is done as not to annoy your users. It should be quite easy to change the link, you can do this in the HTML of the download. Many Thanks
« Reply
November 8th, 2010
Looks like a good start. A few things that could make this really useful for web intercept surveys. Current functionality I need on the web surveys I run…
- Ability to set frequency of invitations, e.g. 1 in 10, 1 in 20, etc chance of invite
- Ability to pop-under rather than pop-up the survey URL (probably easy to customise but I’m not a programmer)
- Ultimate would be for a pre-survey window to load on agreement to take part that monitors whether they are still on the same domain. The survey would only launch when they leave the domain to ensure the feedback is based on their visit.
Thanks
« Reply
November 9th, 2010
@Chris, thanks for the very valuble suggestions. Some of these should be quite easy to action. I will update this post as and when I include them.
« Reply
January 23rd, 2011
hello,
people should read the post before commenting yet the title of (“survey plugin”) may be misleading…
to me, it’s a great script for some situations, thanks for sharing.
This feature suggested by @Chris “- Ability to set frequency of invitations, e.g. 1 in 10, 1 in 20, etc chance of invite” would be awesome.
« Reply
philip beel Reply:
January 23rd, 2011 at 2:31 pm
@pol, I named the plugin after what I perceived its benefits to be. That said, if you feel I could make it clearer and improve upon it by name or functionality I am happy to listen
« Reply
February 17th, 2011
Hi,
Correct me if i’m wrong but shouldn’t the code be:
if ( !$.cookie(defaults.name) ) {
$(this).css(“display”,”block”);
} else {
$(this).css(“display”,”none”);
}
not
if ( !$.cookie(defaults.name) ) {
$(this).parent().css(“display”,”block”);
} else {
$(this).parent().css(“display”,”none”);
}
Using parent() hides the parent of the Selector (In your demo, the body). Good work though.
« Reply
philip beel Reply:
February 17th, 2011 at 4:30 pm
@Tetley, I will need to look at this in more detail. Thanks for rasing this.
« Reply
March 20th, 2011
Hi Philip, I tired the demo and clicked “Take Survey” in both Safari & FF but it goes to this URL:
http://theodin.co.uk/tools/tutorials/jqueryTutorial/plugins/surveyable/?#
No pop-up block warnings. No next screen. Just the original white page with the black box. Is the demo perhaps broken or do I need to turn something on/off in Safari and FF for this to work?
I know Steve posted something similar earlier but never replied back so I am not sure my issue is similar.
I saw a really cool survey on a website recently and checked the code (page source) and saw it was jQuery based so am looking for the script. Maybe its yours? ; )
Thanks
William
« Reply
August 23rd, 2011
If you need to see more of jquery, jquery ui and jquery mobile in action, check out http://mobosurvey.com/survey/designer
« Reply