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?

Easy real-time survey interaction

Today’s subject is about a nice technique that allows you, I mean the respondent, to interact with almost anything from inside the survey in a very transparent way, whenever they want and are allowed, of course.

You may find this helpful if you do iPad/mobile surveys on-site as well.

This can go from changing the theme UI (don’t think about setting up any cookies though!), the language, till changing or going into a specific module then come back and complete the rest.

The example I picked is to let the respondent change the questionnaire language in real time (you need to have the language and the corresponding texts added already in Confirmit) and this can be extended to anything else you may think about.

The set up is easy, and as you can see in the image below we need some variables:

setup folder

“language” is the background “language”, and let’s say we’ve got English and French, precodes 9 and 12.
“l” we’re using to control the current language, this reflects in the language the questionnaire is displayed in.
the “set language” script has the following content:

if(! f('l').toBoolean()) f('l').set(f('language').get());

the “qleft” is an open end that stores the survey current question ID (is updated every time the page loads)
and below is the “scripts” node content, I’ve added it here to quickly see how “qleft” gets updated with the questionID, the function setQLeft being called from the theme

function setQLeft(){
  var currentForm=CurrentForm();
  
  if (currentForm!="lch") f('qleft').set(currentForm);
}

function langDisplay(){
  return f('l').get()=='9'?"French":"English";
}

Notice the test if currentForm!=”lch” so we don’t set it if this question, otherwise we end up in a loop

The langDisplay helps in the survey theme, returning the language string you want to switch into

next there’s a condition node set to false, meaning this will be never executed in the normal flow

“lch” is an info question type with the content as follows

wait...

The next script node is setting the new language, and then redirects them where they left

f('l').get()=='9'?f('l').set('12'):f('l').set('9');

Redirect(GetRespondentUrl()+"&__qid="+f('qleft').get(),true );

and lastly, the script to redirect back where they left

if ( f('q1').toBoolean() && f('qleft').toBoolean() ) {
  Redirect(  GetRespondentUrl() + "&__qid=" + f('qleft').get(), true);
}

Next step is to add and call some of these function from inside the theme since we need to make them visible and allow the respondents interact with them somehow.

main theme layout custom change language button

As you can notice -red square- setQLeft is called every time the page loads, and once it’s executed it writes the questionID (currentForm) so the last question id if there are multiple per page

the second – green square- is a javascript function that will change the location url and sends him to the specific questionid lch (language change)
Tips String.fromCharCode(38), I used this instead of simple adding the “&” character, Confirmit always replaces the “&” with “& amp;”

and third – blue square- a button that runs at on click the function above, and also notice its value is defined as a function call from langDisplay that returns the language you want to change into

^setQLeft()^


Last you need to make some changes in the Survey Settings tab
“General Options”
Uncheck “Disable unencrypted QID request parameter (recommended to prevent respondents from tampering with the survey urls to skip to specific questions)”
“Web Options”
Check “Allow respondents to change their original answers”

The reason I used the question id as the solution to jump between questions was because you can control exactly where and how.

I learned you can do something similar now using the blocks and calling them when you jump, but didn’t have the opportunity to test everything, maybe you guys are already using this approach?

Calling confirmit functions from inside the theme. Part2: dynamic content

One other possible usage of calling functions from a theme is to actually display a piece of html code dynamically created inside the survey.

Here is one example of a function that based on a question answer returns an image string:

function content(){
var content="";

if (f("q1").get()=="1") content="<img src=\"images/top1.png\" />";
else content="<img src=\"images/top2.png\" />";

return content;
}

Just place the function call in the theme,

^content()^

What will happen is that if the answer with precode 1 is selected it will return the first image if not it’s the second image returned

Based on this simple example you can come with more complex content, depending on your needs, you can also have the logic based on background variables, like language, or gender etc.

And don’t forget to deselect the option “Html encode output of piping expressions” before compiling