const options = { showLogicTab: true };
var creator = new SurveyCreator.SurveyCreator(options);
ReactDOM.render(
<React.StrictMode>
<SurveyCreator.SurveyCreatorComponent creator={creator} />
</React.StrictMode>,
document.getElementById("creatorElement")
);
creator.JSON = {
"title": "Product/Market Fit Survey Template",
"pages": [
{
"name": "page1",
"elements": [
{
"type": "radiogroup",
"name": "customer_role",
"title": "What best describes your role?",
"hasOther": true,
"choices": [
"Engineering Lead",
"Project Manager",
"Software Developer",
"Designer",
"Product Manager",
"CEO / Founder",
"Customer Support"
],
"otherText": "Other",
"colCount": 3
}, {
"type": "radiogroup",
"name": "start_using",
"title": "How did you start using the product?",
"choices": [
{
"value": "created",
"text": "I created my account"
}, {
"value": "invited",
"text": "I was invited to an account"
}
]
}, {
"type": "radiogroup",
"name": "product_discovering",
"title": "How did you first discover the product? ",
"hasOther": true,
"choices": [
"Friend or colleague", "Search engine", "Facebook", "Twitter", "Blog"
],
"otherText": "Other",
"colCount": 3
}, {
"type": "radiogroup",
"name": "paid_customer",
"title": "Do you currently pay for the product? ",
"isRequired": true,
"choices": ["Yes", "No"]
}
]
}, {
"name": "page2",
"elements": [
{
"type": "radiogroup",
"name": "product_fit",
"title": "How would you feel if you could no longer use the product?",
"isRequired": true,
"choices": [
{
"value": "3",
"text": "Very disappointed"
}, {
"value": "2",
"text": "Somewhat disappointed"
}, {
"value": "1",
"text": "Not disappointed"
}
]
}, {
"type": "comment",
"name": "product_fit_comment",
"visibleIf": "{product_fit} notempty",
"title": "Please help us understand why you selected the answer above"
}
]
}, {
"name": "page3",
"elements": [
{
"type": "radiogroup",
"name": "product_alternative",
"title": "What would you use as an alternative if [the product] were no\nlonger available?",
"hasOther": true,
"choices": [
"Alternative 1",
"Alternative 2",
"Alternative 3",
"Alternative 4",
"Alternative 5",
"Alternative 6"
],
"otherText": "Other (please name)",
"colCount": 3
}, {
"type": "radiogroup",
"name": "product_benefit",
"title": "What is the primary benefit that you have received from the\nproduct?",
"hasOther": true,
"choices": [
"Benefit 1",
"Benefit 2",
"Benefit 3",
"Benefit 4",
"Benefit 5",
"Benefit 6"
],
"colCount": 3
}, {
"type": "radiogroup",
"name": "product_recommend",
"title": "Have you recommended the product to anyone?",
"choices": ["Yes", "No"]
}
]
}, {
"name": "page4",
"elements": [
{
"type": "rating",
"name": "nps_score",
"title": "How likely are you to recommend the product to a friend or\ncolleague? ",
"isRequired": true,
"rateMin": 0,
"rateMax": 10,
"minRateDescription": "Most unlikely",
"maxRateDescription": "Most likely"
}, {
"type": "radiogroup",
"name": "favorite_functionality",
"title": "What's your favorite functionality / add-on for the product?",
"hasOther": true,
"choices": [
"Feature 1",
"Feature 2",
"Feature 3",
"Feature 4",
"Feature 5",
"Feature 6"
],
"colCount": 3
}, {
"type": "comment",
"name": "product_improvement",
"title": "How could the product be improved to better meet your\nneeds?"
}
]
}, {
"name": "page5",
"elements": [
{
"type": "multipletext",
"name": "contact_customer",
"title": "Want us to follow-up? Leave your name and email here:",
"items": [
{
"name": "Name"
}, {
"name": "E-mail",
"inputType": "email",
"validators": [
{
"type": "email"
}
]
}
]
}
]
}
]
};
<!DOCTYPE html>
<html lang="en">
<head>
<title>Product/Market Fit Survey, 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>