anchored header to top of the screen with instructions and selection counter

Many of you may have had long list option questions also long statements making it difficult to show everything on a single screen, even if you try to break it into 2 or 3 columns

This solution allows the user to see the question instructions in a header that stays anchored at the top of the screen as the user scrolls down to see the other available statements

The selection number is also updated as you select or deselect the options, in this particular case when working with a multiple answer question type.

Again I’m using jQuery so don’t forget to add the library in your skin.

In the instruction tab, will include the instruction text and the selection counter as below:

Please select all that apply, but you must select at least 10 statements.
You have selected 0 statements

then we need some styling
So continue adding this, you can also define all these styles right in the Confirmit styles menu.


and finally the javascript, that has two parts, one is to make the header anchored at the top and the other one is for updating the selection counter as you select or deselect the answers.


Here’s a link to see everything together
http://jsfiddle.net/confirmitexpert/GBv58/embedded/result/

It works in all browsers, but the jsfiddle link above doesn’t work in IE, so please fell free to use Firefox, Chrome etc.

Give it a try and let me know what you think!

Twitter like countdown characters for open ends

Since in Confirmit there’s no option to limit the characters in a text area, here’s a simple script that will show a nice countdown, as you type, twitter like, and will also limit the number of characters to a max

Or course, you can set up a custom validation that will check for the open end length in confirmit validation tab, the advantage of this script is that is very visual, and the respondent doesn’t have to hit the next button and get an error message back.

First make sure you include the jQuery library in your skin header.

The script below works with one textarea per page, but it can be easily customized to work with more

In the open end instruction tab, place the following script:



To explain a bit what the script does, the limit here is set to 120 characters, and you can change that,

The span will be updated as you type, when the limit is reached, will truncate the text and re-set it back to the text area.

Also when it gets to the 0 remaining, I'm adding the "errorquestion" class to the countdown span, that's the default confirmit error CSS style class for the error messages, so the respondents will get one more hint to see when they have reached the limit

Happy coding everyone!

Confirmit dynamic questions with a twist

We know Confirmit has the option to trigger a second question (or more) based on a previous question answer, you may find this called dynamic questions.
You need to use a page object and add the questions inside then choose “triggers” on the ones you need to have them triggered.
You can define complex logic and all the other functionality such as text piping, question masking etc. can be controlled by the trigger function, so you can take advantage of all these.

That’s a pretty cool feature that allows you to chain some logic and have it working on the same page.

The downside of this is that the positioning on the screen of the second question is not always easy.
Also the logic is only evaluated when the page is submitted (when the respondent clicks the Next button), and sometime is hard to follow when the logic is complex.

I will present a different alternative for the triggers (or dynamic questions):

The set up will be the same, 2 questions on the same page, the second will be triggered by answering an option from the first question. In this example I’m using 2 multiple questions.
The second question will show up right under the option that triggers it, so its answers will nicely align under it.

In the answer label we need to use for triggering the second question will insert an empty div tag with a class, let`s call it “willTrigger”, this will help us identify which one is the one we will need to check if is clicked (checked) or not.

In my example I have this answer label to trigger the second question

Product ingredients

Here`s the script that makes all this possible, again I`m using jQuery, so don`t forget to include a reference to jQuery library in your skin:

$(function(){
    //the fieldset_q8m below is the second question fieldset name, so if your question is q11 that will change to fieldset_q11
    var trigered = $('#fieldset_q8m').parents('.questionarea');
    trigered.addClass("hidden1").removeClass('questionarea').hide();
    //add an empty tdr/td
    $('.willTrigger').closest('tr').after('<tr><td colspan=2>');
    //and populate with the hidden div
    $('.willTrigger').parents('tr').next('tr').find('td').html(trigered);
    //test input change, will also hide the error message if the answer was de-selected
    $('.willTrigger').closest('tr').find('input').change(function(){
        $(this).is(':checked')?trigered.show():trigered.hide(), $('.error_msg').hide();
    });

    // here will bind a bit of logic checking if the second question was answered
    $('form').bind('submit', function(){
        if($('.willTrigger').closest('tr').find('input').prop('checked') && !trigered.find('input:checked').length>0){
            $('.error_msg').show();
            return false;
        }
        else {
            return true;
        }
    });
});

I also created a custom style in the confirmit css styles, named “hidden1”, I’m adding to the triggered question

.hidden1{
    margin-left:10px;
}

so that its answers will be nicely aligned under, creating the impression of being part of the first question answer, like an inline answer list

Will also create some logic to check if the second question is answered before the form is submitted, so will need to create an error message like

Please select at least one ingredient

and also define this in the confirmit style list

.error_msg{
    display:none;
}

or just add the “display:none” inline


The “errorquestion” class is the default error style already defined in confrmit

The erro message div add it in the first question “instruction” tab, the script can also be placed there.

Here’s a fiddle example to see how it works, click on the “Product ingredients” and try to click next without giving any other answers there, see how the script detects the missing answers and reacts.

http://jsfiddle.net/confirmitexpert/rvPCK/embedded/result/

Do you often use the Confirmit default capabilities, or like to create everything from scratch, and have it fully customized?

Let respondent change the questionnaire language on the fly

After I published the last post I was thinking if the language example I picked was relevant or not, in fact, there’s a simpler way for an user to change the current language, in real time, without so much complex code and option changes I described in the previous post.

Here’s an easier way to let the user change the language.

Everything happens in the theme (main theme)
There`s no need to change any of the options from the “survey Settings”, link security like “unencrypted QID” or allow changing the previous answers etc, this will work with the default settings.

First we need a button or similar element,

<div class="navigationarea">
<input class="navbutton confirmit-nav" onclick="changeLanguage()" alt="" value="Switch to ^CurrentLang()=='9'?'French':'English'^" size="20" type="button"/>
</div>

As you can notice, the onclick event calls this changeLanguage() function, and its content is below:

function changeLanguage(){
    var lang= "^CurrentLang()^";
    location.href="^GetRespondentUrl()^"+String.fromCharCode(38)+(lang=="9"?"l=12":"l=9");
}

So far so good, everything works, but still there’s this screen

You have already completed parts of the questionnaire.
Press OK to continue.

Every time you click the button you get this screen (with the default settings)

To make the process smoother we will detect that page, “Internal_Continue_survey_on_entry_text”, hide its content, (please make sure you use the same wrapper class for the div that surrounds your content if not please replace it with your own), and submit the form

$(function(){
   if( $("#Internal_Continue_survey_on_entry_text").length>0 ) {
       $(".wrapper").hide();
       document.ctlform.submit();
   }
});

So let’s add everything together, please place this let’s say at the end of your main theme, right after the navigation component. In the layout tab use the code editor, not the WYSIWYG.
Don’t forget to include the jQuery library in the external js
“External Javascript Url” like https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js

All added together below


<div class="navigationarea">
<input class="navbutton confirmit-nav" onclick="changeLanguage()" alt="" value="Switch to ^CurrentLang()=='9'?'French':'English'^" size="20" type="button"/>
</div>

Confirmit surveys jQuery lightBox ready

This is something that will make both your clients and respondents happy.

There shouldn’t be too much to say about how this works, I’m sure you already know.

It’s good to have something like this in surveys, where you have to display lots of images, and for a great user experience, just make sure the thumbnails have the same size (height and width).

To make it work, download the plugin, here’s one link http://leandrovieira.com/projects/jquery/lightbox/

Add the lines below inside your theme

 
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">$(function() {$('[rel*=lightbox]').lightBox();});</script>

And use it like below. You can have it working in the question text, or in the answers.

 
<a href="image1.jpg" rel="lightbox" title="Some title here"><img src="thumb_image1.jpg" width="60" height="60" alt="" border="0" /></a>

Script to delay advancing to the next question

If you ever wondered how we make sure a product picture was seen before answering the follow up questions here’s a script you can use:

What it does it’s hiding the “navigationarea” then after 3 seconds, it shows it back, so that the user can click on the next button.
Three seconds, I think it’s enough, if not you can increase the time to whatever seems right for you (if you need 5sec you change below the time to 5 x 1000 = 5000 ms)

$(function() {
	$('.navigationarea').hide();
	setTimeout("showButtons()",3000);
});
function showButtons(){
 $('.navigationarea').show();
}

You may have more alternatives in regards to the navigation area or the buttons. You can, let’s say, just disable them instead..\

3d grids numeric with autosum on rows

Is it again about a 3d-grid, now with numeric open end boxes

Everyone, I suppose, knows that I can have the autosum feature enabled for columns. What if I need an autosum on rows?

Here’s a quick script I wrote that takes care of this.

$(".confirmit-grid tbody tr")
.each(function(index){
	var row=index+1;
	var last=$(this).find("input:text").length;
	$(this).find("input:text")
	.each(function(index){
		$(this).keyup(function(){
			if(index+1!=last){
				var sum=0;
				$(".confirmit-grid tr:eq("+row+") input:text").not(':last').each(function(){sum+=parseInt($(this).val()-0);});
				$(".confirmit-grid tr:eq("+row+") input:text").last().val(sum);
			}
		});
	});
});

3d grids with last column exclusive

I was saying in a previous post it’s always better to prevent than to treat.
Here is a first example having a 3Dgrid with multi questions type. Let’s say I want the last column exclusive with the rest (per row)

Everything will happen on the client side, so we don’t have to be worried about checking data and throwing error messages back.
Plus there would be no confusion when naming a column saying “none” or “none of these” and letting the other checks too.

As usually you have to include a jQuery library and use the script below

$(".confirmit-grid tbody tr")
.each(function(index){
	var row=index+1;
	var last=$(this).find("input:checkbox").length;
	$(this).find("input:checkbox")
	.each(function(index){
		$(this).click(function(){
			if(index+1==last) 
				$(".confirmit-grid tr:eq("+row+") input:checkbox").not($(this)).attr("checked", false);
			else $(".confirmit-grid tr:eq("+row+") input:checkbox").last().attr("checked", false);
		});
	  });
});

Automatically close a project when quota is full using Confirmit APIs (C# .NET) & JSONP – Part2

In the previous post, we’ve covered the .NET application that connects to Confirmit APIs and closes a project.
Let’s see now what we need to do in order to actually call it from a Confirmit survey.

Since the topic is close a project when the quota is reached, we’ll first need a condition node, with a quota check qf(‘quota1’)

In the “then” branch, you continue to use your own scripts, set the respondent status SetStatus(‘quotafull’) and everything else you may have, but not do the redirect yet (if you’re using one)

Add an info question type with the following content. You can use the instruction area as well.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery-jsonp.googlecode.com/files/jquery.jsonp-2.1.4.min.js"></script>

<script>
//hide navigationarea(s)
$(function() {
	$('.navigationarea').hide();
});


function callback(data){
	//if(typeof data.status!="undefined") //you can use the data.status here
	//show navigationarea back...
	$('.navigationarea').show();

	//or redirect them to whatever URL you need
}

$.jsonp({url: "http://your domain to Confirmit Close Project/?projectID=^ProjectID()^",complete: function(data) {}});
</script>

As you can see the only parameter we send is the project ID.

There could be more to add, like showing a div with a message “Please wait!” or an ajax loading gif etc

For a better understanding on how everything works, as soon as the quota is reached, the first respondent who gets in the condition qf(‘quota1’), true now, will trigger the call to the .NET app that closes the study.
After this, it doesn’t mater how many respondents are currently on the link, no one else will made it to the end (of survey). If clicking on the “next” button, the system will answer with the standard message, “Sorry, but this survey has been closed.”

Check an older post, and find out how can you customize it for this particular study (you can also have a redirect right from the theme)