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!

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 is wiping out the content from masked fields

Here’s something I want to share with you, just to make you aware of how confirmit works when using masking.
I had a open text list with four answers and had the the last element hidden using a code mask script, nset(3);
The forth field I was updating from a script I placed before the question,
f(‘q1’)[‘4’].set(‘test’);

The issue was when checking data, even if the script was running correctly, there was nothing in the last field even if at the time the question was displayed, the “test” was still there, but after submitting (clicking on the next button) the content was wiped out.

So the conclusion is if the elements are masked, their content will be wiped out after you advance to the next question.
As a solution I moved the script after the question, and everything worked well.

Tips to make your survey mobile ready

If you planned to also target the mobile users here are some great tips you may want to follow:

  • First it’s the survey length. Don’t plan for more than 10 questions, who will stay on mobile anyways?
  • Keep the question texts clear and short, no long answers and just a few options
  • Use only basic question types, single, multi, open ends.
  • When it comes to define a survey layout, remove all unnecessary css and javascript, don’t use fixed width and height, or make them 240 x 320. And also, don’t forget to add these two metatags
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
    <meta name="apple-touch-fullscreen" content="YES"/>
    

Custom libraries of functions defined in Confirmit

I bet you have now lots of custom scripts, functions, validations etc. you may have stored in a survey, a survey template or a library (I can’t really see the reason for a “library” besides the different project type)

What worries me and maybe you is that everyone can alter them once they are dragged in a project, and not only…

The alternative is to create your own function libraries.

Here are some pros: You have control so nobody else can change their behavior, they are already loaded, so ready to use, no worries to include folders with libraries of functions in a project.
The usage is transparent for the user, just let them know the class and the available methods like custom.3Dgridvalidation()

I won’t focus now on explaining how to build one, Confirmit has a good documentation for this “Custom Code Library” you can get from their extranet site.

isEmailTaken, isUsernameTaken and two non-standard ways to use them

The two functions are more related to the respondent recruitment surveys and are used to check if any previous respondents have registered with the same email address or user name. They are not really known, but they’re really powerful.

The power comes from the the fact they give you access to the global data, from inside a respondent link. I always wished for some Confirmit internal functions to call and get access to other individuals responses, from inside a script. I know there are all kind of alternatives from a simple API app, or even using a scripting extension, but nothing I know that’s already available in Confirmit. (not sure if there’s anything planned for Confirmit 16).

Anyways, we have these two associated with their question IDs “email” and “username” and as I said, here are two simple scenarios that demonstrate how we can use them in a regular survey.

A first scenario would be an open link survey, let’s say we have it distributed to a number of websites and later in the survey or at the end, we collect their email address for another follow up (right after this first survey) and you don’t have time to collect all the emails and sort/eliminate duplicates and so on.

It’s nothing easier than creating an open end question with “email” as questionID, make it look nice, one row etc
then add a condition node, and call the function

!isEmailTaken( f("email").get())

depending on the logic, you can use a redirect to the second survey or just terminate.

The second example is a little bit more complex and is outlined below:

We want to give 100 free Amazon vouchers or another electronic incentive to the first 100 respondents who complete the study. We can even add a note it in the invitation letter, to boost the response rate… (First 100 respondents get a 5.00$ voucher etc).

The issue is that we need to assign an unique voucher number to a respondent who completes the study. Forget the idea of pre-assigning them when they start, we may or not have enough vouchers to use, and who will stay to sort everything after all?

function vouchers(){
var labelsArr=f("vouchers").domainLabels();
/*the vouchers is a multi randomized question with the vouchers as answers
//if more values are required, you can always create a set, and use a standard randomize script, you can find in any scripting manuals
//vouchers and username are hidden question
*/
f("username").set(labelsArr[0]);
var found = false;
var counter=1;
while (found==false && counter<labelsArr.length){
	if(isUsernameTaken(f("username").get())){
		f("username").set(labelsArr[counter]);
		counter++;
	}
	else found =true;
}
return found;
}

you may call the function from a condition node or script node then redirect/or not the respondent to Amazon and claim their free voucher

As a last note, these are working as global variables, it doesn’t matter what the respondent status is, the functions will check even if the respondent has the incomplete status.

Survey Layouts, WI Templates or both?

In the latest Confirmit versions the WI Template is no longer supported, is this supposed to be good or bad? Wondering what the true reason is, anyways, seems like we should say good bye to WI.

I enjoyed working with WI, for a number of reasons, it was pretty neat, easy to use, and had the option to add the code directly in there. What I didn’t like was the fact that the elements (inputs and all the other primitives) were rendered without a class, name or id (some were) so it was a bit challenging to traverse and work with that structure.

A couple of issues I see with the Layouts:

– The Survey Layouts is more complex, not a bad thing, but I can’t see someone stay and change each of the styles manually, using the interface.

– It allows you to insert your own java scripts, and CSS in clear, directly in the page or even using the external link to JS (only one external link is not always enough) and CSS.

– It may be designed for non-technical users, but not sure what’s the percentage of people that use Confirmit to design and script a survey, without any basic knowledge of CSS, html or JavaScript, and an interface, with predefined values and lists can’t just keep up with all the changes, hacks and all the new properties new browsers are now supporting.
Here's a tip, if you work on creating a theme, need to define some new styles, and plan to use an external CSS file, don't bother defining them in Confirmit, just name them (Style name), and use them in the CSS when defining the associated styles.

-You can’t just add your own meta tags, the system will have them deleted, you have to use the provided “meta tags” tab where you can choose from the existing ones or just define one as you wish. The only difference here is that you only got the option to add a named meta tag. If you want to have a http-equiv or else you can’t, and don’t tell me is it the same as using a named tag, and since HTML5 there are 5 (content, http-equiv, name, scheme and charset)

-You can’t have styles named like “text-anothertext”, if you do so, you get an error saying "Style name contains invalid characters.Remember that a style name must be all lower case, cannot contain white spaces or start with a numeric character."

On the other hand, working with Layouts seems scary in the beginning but after you get used with them you can really enjoy it.

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

Very custom pages in Confirmit

You know what happened these days? I had a request from one of my clients to build a very custom question.

Forget about thinking 3DGrids can work, it was a very custom one, with lots of drop downs, open ends, text areas, and some radio buttons. And everything on the same page!

I thought, using Confirmit default question type I can’t even get close.

So what I did is I took everything offline, built the html structure, with all the elements, css styles and everything, then just put it in a Info question type. Right in the question text area.

OK so now I had it look as my client wished.
Looked good, but then I also had to take care of saving data too.

Right after the info node I placed a script calling the request function from Confirmit.
Request(“custom_variable_name”)

Can do the same with Request.QueryString() parsing the entire string.

So everyone was happy!

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