Example of setting the most used properties of the survey, Vue Survey Library Example

Survey Options

Edit in Plunker

Open in new window

Show in Survey Creator

Export Pdf

Result
JavaScript
HTML
QR Code


                        
        
            Survey.StylesManager.applyTheme("default");
        


            
                var json = { 
    title: "Software developer survey.",
    pages: [
        { title: "What operating system do you use?",
            questions: [
                {type:"checkbox", name:"opSystem", title: "OS", hasOther: true, isRequired: true, 
                    choices:["Windows", "Linux", "Macintosh OSX"]}
            ]  
        },
        {   title: "What language(s) are you currently using?",
            questions: [
            {type:"checkbox", name:"langs",title:"Please select from the list",
                 colCount: 4, isRequired: true,
                choices:["Javascript", "Java", "Python", "CSS", "PHP", "Ruby", "C++", "C", 
                    "Shell", "C#", "Objective-C", "R", "VimL", "Go", "Perl", "CoffeeScript", 
                    "TeX", "Swift", "Scala", "Emacs Lisp", "Haskell", "Lua", "Clojure", 
                    "Matlab", "Arduino", "Makefile", "Groovy", "Puppet", "Rust", "PowerShell"]
            }
        ]},        
        { title: "Please enter your name and e-mail",
            questions: [ 
            {type: "text", name: "name", title: "Name:"}, 
            {type: "text", name: "email", title: "Your e-mail"}]
        }]
};

                window.survey = new Survey.Model(json);
            
        
            survey.onComplete.add(function(result) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(result.data, null, 3);
            });
        
survey.showProgressBar = 'bottom';
        
            var app = new Vue({
            el: '#surveyElement',
            data:
            {
            survey: survey
            }
            });

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of setting the most used properties of the survey, Vue Survey Library Example</title>

<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://surveyjs.azureedge.net/1.7.10/survey.vue.js"></script>
<link href="https://surveyjs.azureedge.net/1.7.10/survey.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

</head>
<body>
    
            <div id="surveyElement" style="display:inline-block;width:100%;">
                <survey :survey='survey' />
            </div>
    <div id="surveyResult"></div>

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

</body>
</html>

settings

Question required text:

default is "* ".

survey.requiredText = yourValue; survey.render();

Show question numbers:

default is 'on'. 'onPage' - set question numbers inside one page.

survey.showQuestionNumbers = yourValue; survey.render();

Show survey title: default is true.

survey.showTitle = yourValue; survey.render();

Show page titles: default is true.

survey.showPageTitles = yourValue; survey.render();

Show page numbers: default is false.

survey.showPageNumbers = yourValue; survey.render();

Show progress bar: (default is 'off')

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

Show completed page: default is true. Set it to false to hide the Survey on pressing the 'Complete' button.

survey.showCompletedPage = yourValue; survey.render();

Html for completed page: If empty (default value), the built-in html is used.

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

Survey Options

Example of setting the most used properties of the survey

Why We Use Cookies