Compatible since AskiaDesign 5.3.3.0
Download the example QEX file and/or click here to access a live demo

Firstly we need to create a language variable and one routing to set the language in the survey. Make sure you tick during and after for the routings Set Language. In the example QEX file, we have two languages, French 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 with the shortcut caption of your language variable. You will also need to modify the option list of the selected variable. The list of options 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 have German, French and English, German will have an id of 1, French 2 and so on. And the value 11 for German, 12 for French 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 response.

Below you can see 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 French is 11 and English is 12.

This piece of code will add a drop down menu on all the screens with the list of Languages 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 you 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 allow it to be blank.

Explanation of the code

The first row creates 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. N.B. 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 sent 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 reads and executes the routing attached to this previous question.
Here we used it to change the Language at anytime, but you can imagine using it for other ways to change the web screens at run time. E.g. you can offer on every screen an option to optimize the presentation for mobile / tablet / web (see the article Create two screen web groups for Desktop and Mobile).