Survey.StylesManager.applyTheme("defaultV2");
var json = {
title: "Software developer survey.",
pages: [
{
"title": "What operating system do you use?",
"elements": [
{
"type": "checkbox",
"name": "opSystem",
"title": "OS",
"hasOther": true,
"isRequired": true,
"choices": [ "Windows", "Linux", "Macintosh OSX" ]
}
]
},
{
"title": "What language(s) are you currently using?",
"elements": [
{
"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",
"elements": [
{
"type": "text",
"name": "name",
"title": "Name:"
},
{
"type": "text",
"name": "email",
"title": "Your e-mail"
}
]
}]
};
window.survey = new Survey.Model(json);
survey.onComplete.add(function(sender) {
document.querySelector('#surveyResult').textContent =
"Result JSON:\n" + JSON.stringify(sender.data, null, 3);
});
survey.showProgressBar = 'bottom';
var app = new Vue({
el: '#surveyElement',
data:
{
survey: survey
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Survey Options, Vue Survey Library Example</title>
<meta name="viewport" content="width=device-width" />
<script src="https://unpkg.com/vue@2.6.14/dist/vue.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-vue-ui/survey-vue-ui.min.js"></script>
<link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="./index.css">
</head>
<body style="margin: 0">
<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>
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