const options = { };
var creator = new SurveyCreator.SurveyCreator(options);
creator.toolboxLocation = "right";
const templatesPlugin = {
activate: () => {},
deactivate: () => {return true;}
};
//Add plug-in. We do nothing on activate/deactivate. Place it as first tab and set to "svc-tab-template" the component name
creator.addPluginTab("templates", templatesPlugin, "Survey Templates", "svc-tab-template", 0);
const templateBtnClick = (json) => {
creator.makeNewViewActive("designer");
creator.JSON = json;
};
class TabTemplateComponent extends React.Component
{
render() {
var renderButton = (text, json) => {
text = "Load " + text;
var className = "sd-btn sd-btn--action";
return (<button className={className} onClick={() => templateBtnClick(json)}>{text}</button>);
};
var templates = loadedSurveyTemplates();
var list = [];
for (var i = 0; i < templates.length; i++) {
var template = templates[i];
var btn = renderButton(template.name, template.json);
list.push(<ui key={i+1}><div>{btn}</div><br /></ui>);
}
var mainDivStyle = {
padding: "7px",
width: "100%"
};
var titleClassName = "sd-title sd-page__title";
return (<React.StrictMode>
<div style={mainDivStyle}>
<h3 className={titleClassName}>Templates list</h3>
<ui>{list}</ui>
</div>
</React.StrictMode>);
}
}
SurveyReact.ReactElementFactory.Instance.registerElement(
"svc-tab-template",
(props) => {
return React.createElement(TabTemplateComponent, props);
}
);
ReactDOM.render(
<React.StrictMode>
<SurveyCreator.SurveyCreatorComponent creator={creator} />
</React.StrictMode>,
document.getElementById("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": "Which 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 do you like about our product?"
},
{
"type": "comment",
"name": "disappointed_experience",
"visibleIf": "{nps_score} notempty",
"title": "What do you miss or find disappointing in your experience with our products?"
}
]
}
],
"showQuestionNumbers": "off"
};
}
function getDummyCheckboxJSON() {
return { elements: [
{ type: "checkbox", name: "car", title: "What car are you driving?", isRequired: true, hasNone: true,
choices: ["Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota", "Citroen"] }
]};
}
