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?