Cart Licenses Contact Support Online Creator Login/Register
Try
Buy
v 1.9.38

Multiple Languages


                        

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

const options = { showTranslationTab: true };            
                var creator = new SurveyCreator.SurveyCreator(options);
            
                
                    ReactDOM.render(
                    <React.StrictMode>
                        <SurveyCreator.SurveyCreatorComponent creator={creator} />
                    </React.StrictMode>,
                    document.getElementById("creatorElement")
                    );
                
creator.JSON = {
    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 lang="en">
<head>
    <title>Multiple Languages, Survey Creator Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-react-ui/survey-react-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ace.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/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>
    -->
        <script src="/DevBuilds/survey-creator-core/survey-creator-core.min.js"></script>
        <link href="/DevBuilds/survey-creator-core/survey-creator-core.min.css" type="text/css" rel="stylesheet" />
        <script src="/DevBuilds/survey-creator-core/survey-creator-core.i18n.min.js"></script>
        <script src="/DevBuilds/survey-creator-react/survey-creator-react.min.js"></script>
        <style>
            :root {
                --tab-min-height: 600px;
            }
        </style>
    <link rel="stylesheet" href="./index.css">

</head>
<body style="margin: 0">
    
<div id="surveyContainer">
            <div id="creatorElement" style="height: 100vh;"></div>
</div>

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

</body>
</html>
Dismiss

Tell us what you think

Help us serve you better by taking this brief
survey. We are interested to learn more about
your experience of using our libraries.

We'd really appreciate your feedback.

Approximate time to complete: 2 min.

Start the survey