Scroll

Change language at realtime for web screens

Change language at realtime for web screens

Follow
Summary This article describes how to change the language of the survey at realtime for web screens in askiadesign by using Javascript.
Applies to askiadesign
Written for Scriptwriters and survey authors
Keywords language; screen; web; script; design; askiadesign

Compatible since askiadesign 5.3.3.0

Download the example qex file and/or click here to access a live demo

First we need to create a Language variable and one routing Set Language per languages in the survey. Make sure to tick during and after for the routings Set Language. In the example qex file, we got two languages, Français and English.



In your Internet Settings, add the following code in Before Content of the Contents tab:

<input type ="hidden" id="_Language" name ="_Language" value=""> 

<select style="float:right;" onchange="getComboValue(this)">
  <option id="1" value="11">Francais</option>
  <option id="2" value="12">English</option>
</select>

<script>

function selectOption()
{
	document.getElementById("!!??Language??!!").selected=true;
}

function getComboValue(sel) {
	var value = sel.options[sel.selectedIndex].value;
	document.getElementById("_Language").value = value;
	document.getElementsByName("askiaStay")[0].click();
}

selectOption();
</script>

Modify the code:

You will need to change the reference of your Language question in the code so if it's named differently, replace Language by your Shortcut caption of your language variable. You will also need to modify the option list of the select. The list of option should be the same as your list in the definition of your Language variable and the id and value should be equal to the order of your item in the definition for the id and to the internal response code for the value. So if you got German, Français and English, German will have an id of 1, Français of 2 and so on. And the value 11 for German, 12 for Français and so on.

To know the value to use, in the Language screen, click on the HTML code tab and check the value applied to each responses.

Below the code generated for the responses in the HTML code tab:

<table cellspacing="0" cellpadding="0" style="width:100%;"><tr ><td width="100%" style="height:25px;" class="myresponse"><input type="radio" name="U0" value="11" /><span id="cpt0_11">Francais</span></td>
</tr><tr ><td style="height:25px;" class="myresponse"><input type="radio" name="U0" value="12" /><span id="cpt0_12">English</span></td>
</tr></table>

As we can see the value to use for Français is 11 and 12 for English.


This piece of code will add a drop down menu on all the screen with the list of Language available and when you will select another language, the system will update the screen with the relevant language selected.



Finally, if you show the Language question (you make it visible for the respondents). Make sure to hide the drop down menu of the languages. To be able to do this, go to the properties of the Language screen and in the Contents tab, untick use default for the Before content and let it blank.

Explanation of the code:

The first row create a hidden input which will be used to modify the value of a previous question (here the Language variable). The name's parameter should be started with an underscore and then the shortcut of the variable. Attention, it doesn't work for variables inside a loop.

<input type="hidden" id="_Language" name="_Language" value="">

Then we use Javascript to populate the input hidden with the selected language and click on the askiaStay element which is generated automatically on all the pages of an askia surveys. The askiaStay element is an input image so the effect is the data stored in the input hidden is send to the variable and the page is refreshed with the new language (Note: when we use the input hidden with the _shortcut name to modify data of a previous question, the system read and execute the routing attached to this previous question).

Here we used it to change Language at anytime but you can imagine using it for others stuff as change web screens at run time. You offer on every screen to optimize the presentation for mobile / tablet / web (see the article Create two screen web groups for Desktop and Mobile).

Have more questions? Submit a request

Comments

  • Avatar
    Ashok Nagaraj

    When i am running the script, if i choose the ‘Francais’ as language, in middle of test if i close the survey. The language in askia design is set to French.

    Is there any setting or script in askia design to set back to the default language[English] after closing survey in the testing in middle.

  • Avatar
    Jérôme Duparc

    Hi Ashok,

    Unfortunately, no there is no settings for this.

    Best Regards