Create a survey with multi languages support
Open in new window

As you see all string properties can be represented as a json object, where key is a locale. If there is no translation for the selected locale then the 'default' value is used, or the first one, if default doesn't exist as well.

Locale: (default is )

survey.locale = yourvalue;
survey.render();


Survey.Survey.cssType = "bootstrap";
Survey.defaultBootstrapCss.navigationButton = "btn btn-green";

window.survey = new Survey.Model({
 locale: "de",
 pages: [ { name: "page1", elements: [
    {
     type: "matrixdropdown",
     choices: [
      {
       value: 5,
       text: {
        default: "5 (the best)",
        de: "5 (Das beste)"
       }
      }, 4,  3, 2,
      {
       value: 1,
       text: {
        default: "1 (the worst)",
        de: "1 (Das Schlechteste)"
       }
      }
     ],
     columns: [
      {
       name: "rate",
       title: {
        default: "Rating",
        de: "Bewertung"
       }
      }
     ],
     name: "favoriteMovie",
     rows: [ {value: "moonlight", text: "Moonlight" },
      {
       value: "zootopia",
       text: {
        default: "Zootopia",
        de: "Zoomania"
       }
      },
      { value: "water", text: "Hell or High Water" },
      { value: "manchester", text: "Manchester by the Sea" }, {value: "lalaland", text: "La La Land" }
     ],
     title: {
      default: "Please rate these movies",
      de: "Bitte bewerten Sie diese Filme"
     }
    }
   ]
  }
 ]
});
survey.onComplete.add(function(result) {
	document.querySelector('#surveyResult').innerHTML = "result: " + JSON.stringify(result.data);
});


$("#surveyElement").Survey({model:survey});


<!DOCTYPE html>
<html>

<head>
    <title>Welcome to JQuery</title>
    <script src="https://unpkg.com/jquery"></script>
    
    <script src="https://surveyjs.azureedge.net/0.12.22/survey.jquery.js"></script>
    
    
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div id="surveyElement"></div>
    <div id="surveyResult"></div>
    <script src="./index.js"></script>
</body>

</html>

.btn-green {
  background-color: #1ab394;
  color: #fff;
  border-radius: 3px;
}

.btn-green:hover, .btn-green:focus {
    background-color: #18a689;
    color: #fff;
}

.panel-footer {
    text-align: right;
    background-color: #fff;
}