SurveyCreator.StylesManager.applyTheme("bootstrap");
var options = { };
//create the SurveyJS Creator, but do not render it yet.
var creator = new SurveyCreator.SurveyCreator(null, options);
//Show toolbox in the right container. It is shown on the left by default
creator.showToolbox = "right";
//Show property grid in the right container, combined with toolbox
creator.showPropertyGrid = "right";
//Make toolbox active by default
creator.rightContainerActiveItem("toolbox");
//Add a new tab as the first one
creator.tabs().unshift({
name: "survey-templates", //the unique tab name
title: "Survey Templates", //the tab title
template: "custom-tab-survey-templates", //you will see the knockout template in the HTML tab
action: function() {
//change the active tab to this one on clicking the tab
creator.makeNewViewActive("survey-templates");
},
data: {
title: "Survey templates list",
surveys: loadedSurveyTemplates(), //to make code clean, get the array of templates name and jsons from another function
load: function(item) {
//load the item json into creator
creator.JSON = item.json;
//make the 'designer' tab active
creator.makeNewViewActive("designer");
}
}
});
//Render Creator in div with id equals to "creatorElement"
creator.render("creatorElement");
function loadedSurveyTemplates() {
return [
{
name: "NPS",
json: getNPSJSON()
},
{
name: "Dummy checkbox survey",
json: getDummyCheckboxJSON()
},
{
name: "Empty Survey",
json: {}
}
];
}
function getNPSJSON() {
return {
"completedHtml": "<h3>Thank you for your feedback.</h3><h5>Your thoughts and ideas will help us to create a great product!</h5>",
"completedHtmlOnCondition": [
{
"expression": "{nps_score} > 8",
"html": "<h3>Thank you for your feedback.</h3><h5>We glad that you love our product. Your ideas and suggestions will help us to make our product even better!</h5>"
},
{
"expression": "{nps_score} < 7",
"html": "<h3>Thank you for your feedback.</h3><h5> We are glad that you share with us your ideas.We highly value all suggestions from our customers. We do our best to improve the product and reach your expectation.</h5><br/>"
}
],
"pages": [
{
"name": "page1",
"elements": [
{
"type": "rating",
"name": "nps_score",
"title": "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
"isRequired": true,
"rateMin": 0,
"rateMax": 10,
"minRateDescription": "(Most unlikely)",
"maxRateDescription": "(Most likely)"
},
{
"type": "checkbox",
"name": "promoter_features",
"visibleIf": "{nps_score} >= 9",
"title": "What features do you value the most?",
"isRequired": true,
"validators": [
{
"type": "answercount",
"text": "Please select two features maximum.",
"maxCount": 2
}
],
"hasOther": true,
"choices": [
"Performance",
"Stability",
"User Interface",
"Complete Functionality"
],
"otherText": "Other feature:",
"colCount": 2
},
{
"type": "comment",
"name": "passive_experience",
"visibleIf": "{nps_score} > 6 and {nps_score} < 9",
"title": "What is the primary reason for your score?"
},
{
"type": "comment",
"name": "disappointed_experience",
"visibleIf": "{nps_score} notempty",
"title": "What do you miss and what was disappointing in your experience with us?"
}
]
}
],
"showQuestionNumbers": "off"
};
}
function getDummyCheckboxJSON() {
return { questions: [
{ type: "checkbox", name: "car", title: "What car are you driving?", isRequired: true, hasNone: true,
colCount: 4, choices: ["Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota", "Citroen"] }
]};
}