How to add multi-language content to Discover surveys

Last Updated: 10 Oct 2019Hits: 2664
I am using Discover. I know it is a lite version of Lighthouse Studio, which can easily handle multi-language surveys, but can I customize Discover to do multi-language surveys?

Yes, it is possible, but it will require some knowledge of HTML, CSS, and JavaScript programming.

Start by creating a select question called "language" where the user chooses the language they desire. For this example, let's assume the survey is in either English and Spanish. Add two radio select options, "English" and "Spanish". As a result of their answre to this question, for the rest of your survey questions, you will provide both an English and a Spanish translation for the question and options.

Here is an example. Let's assume the next question is called "welcome". It is a text question. It will simply say, "Welcome to the survey!", in the preferred langauge. Here's how you code that up using HTML:

<span class="english language">Welcome to the survey!</span>
<span class="spanish language">Bienvenido a la encuesta!</span>

Whenever you insert custom code, make sure you insert it using the </> Code Editor option in the toolbar. If you just paste it in the normal dialog box, it will display the code. Placing it into the Code Editor section will execute the code.

Each line contains a <span> tag. Spans appear on the same line. Notice that each span has two CSS classes applied to it, "english" and "language", or "spanish" and "language". Next, we will target those classes with some JavaScript and some Cascading Style Sheets (CSS) code to hide or show the desired span. Place this custom code in your survey's global footers section (Survey Settings > Page Layout > Page Footer > </> (Code).

<script type="text/javascript">
$(document).ready(function() {
 var language_id = "[%language%]";
 var language = "english_survey";

 if (language_id == "1") {
  language = "english_survey";
 } else if (language_id == "2") {
  language = "spanish_survey";
 }

 //Remove all classes from HTML tag
 $("body").removeClass();
 $("body").addClass(language);
});
</script>

<style type="text/css">
 .language {display: none;}
 .english_survey .english {display: block;}
 .spanish_survey .spanish {display: block;}
</style>