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

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:

    //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');
    //add an empty tdr/td
    $('.willTrigger').closest('tr').after('<tr><td colspan=2>');
    //and populate with the hidden div
    //test input change, will also hide the error message if the answer was de-selected
        $(this).is(':checked')?, $('.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){
            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


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


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.

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

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

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>

Ugly errors in Confirmit… and what can we do

I’m sure you may already know how “nice” the errors look like especially when you get a long answer grid, unanswered.

Here’s one
confirmit grid error

Just imagine how would look if the answer text is longer and there are even more in the list…

Remember what I said in some earlier posts, don’t let Confirmit run it for you, you take control over it. So now, the first thing would be to remove the default, generic error message, “Please review your responses on this page….etc” You can easily remove it from the theme or from script

Honestly, I don’t see any good reason to have it.

Now let’s make the second one look nicer, or straight to the point, why do we need to tell what answers are missing, I know there’s an option to highlight the missing ones so we can use that to give them a visual.

Anyways, just call these two functions from the inside “Validation” area

 ClearErrorMessage(); //this clears the generic "page" message
 ClearQuestionErrorMessage(); //this removes the question specific error message

The next step would be to define our own error message, something like:

SetQuestionErrorMessage(CurrentLang(),"Please enter one answer for each row");

If you’re looking to automate more you may combine the first two in a custom function and call it as you wish

then for the second one, in case you have plenty of languages you may come with a way to read them from a question label, so you may have everything ready with just one function call

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")
	var row=index+1;
	var last=$(this).find("input:checkbox").length;
				$(".confirmit-grid tr:eq("+row+") input:checkbox").not($(this)).attr("checked", false);
			else $(".confirmit-grid tr:eq("+row+") input:checkbox").last().attr("checked", false);

Treat or Prevent?

It’s a pretty simple question, and most of you can definitely say to prevent is better.

If it’s so obvious preventing is better, I’m then wondering why Confirmit (and other survey software too..) isn’t.
I see internal scripts, masking, validation, throwing errors, etc. everything to make sure there’s no way a respondent will answer wrong, wrong meaning not following our instructions, the humongous text we insert to make sure he will finally get how he’s supposed to answer the question.

But.. Nothing really to prevent it, right? Confirmit has some tries lately, and this means is up to us to find different ways.

What we can do? There`s plenty of room for improvement, means that in the following posts, we will be focusing on how to improve the … of course, the user experience