Multiple Languages

Please read the license agreement if you want to use Survey Creator widget in your app(s). Visit our buy page to find out developer license(s) price.
Make it easy for your users to create multiple languages surveys. Translation tab.

                        //Limited the number of showing locales in survey.locale property editor
Survey.surveyLocalization.supportedLocales = ["en", "de", "es", "fr"];

//Show translation tab.
var creatorOptions = {showTranslationTab: true};
var creator = new SurveyCreator.SurveyCreator("creatorElement", creatorOptions);



creator.text = JSON.stringify({
    locale: "en",
    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"
                    }
                }
            ]
        }
    ]
});
                    
<!DOCTYPE html>
<html>
<head>
    <title>Make it easy for your users to create multiple languages surveys. Translation tab., Survey Creator Example</title>


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://surveyjs.azureedge.net/1.1.11/survey.ko.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
    <!-- Uncomment to enable Select2
    <script src="https://unpkg.com/jquery"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    -->
    <link href="https://surveyjs.azureedge.net/1.1.11/survey-creator.css" type="text/css" rel="stylesheet" />
    <script src="https://surveyjs.azureedge.net/1.1.11/survey-creator.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="surveyContainer">
        <div id="creatorElement"></div>
    </div>

<script type="text/javascript" src="./index.js"></script>

</body>
</html>