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>

Leave a Reply