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?

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);
		});
	  });
});