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>

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.

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

Calling confirmit functions from inside the theme. Part1: respondent statistics

One of the feature I like in Confirmit is that you can call functions you have defined in a survey script node from inside the theme.

When it comes to automate things, they are my favorite. The reason is, calling it from the theme it makes it run every time the page refreshes, (or the submit button (back/next) is pressed).
It’s not time consuming, it’s easy and elegant. (imagine what would be to add a script node calling the function after each question or place it on every question in the validation field..)

There are lots of possible scenarios I could think off, and one good example of using this is to track the questions where the respondents were screened out or dropped out.

So let’s say you have your question IDs named q1, q2 and so on..

you only need to have:

  • two single question type named droppedlist and screenedlist sharing the same list of answers, where you have added all the question IDs. Hidden!
  • a script node with the function below
    function setLastQuestion(){
    	var questionID=CurrentForm().toLowerCase();
    
    	if (questionID.indexOf('internal')==-1){
    		f('droppedlist').set(questionID.substr(1))
    	}
    	else{
    		if (GetStatus()=="screened"){
    			f('screenedlist').set(f('droppedlist').get());
    			f('droppedlist').set(null);
    		}
    	}
    }
    
  • and the function call from your theme
    ^setLastQuestion()^

and some comments:
screenedlist will have the questions where people were screened out only if a stop (screened) node was used in the logic.
droppedlist would be the last questions they’ve answered
If there are more than one question on the same page, only the last Id
is tracked