JSFiddle - React, Tailwind, and code Playground
by Ed Fabre
HTML
<link rel="stylesheet" href="https://surveyjs.azureedge.net/1.0.16/survey.css">
<script src="https://surveyjs.azureedge.net/1.0.16/survey.ko.min.js"></script>
<div id="surveyContainer"></div>JavaScript
var surveyJSON = {pages:[{name:"page1",elements:[{type:"panel",name:"panel1",elements:[{type:"multipletext",name:"question1",title:"Tell us a bit about your company:",items:[{name:"text1",title:"Company Name"},{name:"text2",title:"Adddress"},{name:"text3",title:"Postal Code"},{name:"text4",title:"Mobile Number"},{name:"text5",title:"Email"}]},{type:"comment",name:"question2",title:"What does your company do?"}],title:"Website Questionnaire"}]},{name:"page2",elements:[{type:"panel",name:"panel2",elements:[{type:"text",name:"question3",title:"Do you have a URL in mind for your website?"},{type:"radiogroup",name:"question4",title:"Do you need us to buy your domain?",choices:[{value:"item1",text:"Yes"},{value:"item2",text:"No"}]},{type:"text",name:"question6",title:"What is your deadline for this project?",inputType:"date"},{type:"text",name:"question5",title:"Could you give us a ballpark figure for your available budget for the website project?"}],title:"Lets get down to business"}]},{name:"page3",elements:[{type:"panel",name:"panel3",elements:[{type:"checkbox",name:"question7",title:"I want this site because: (Check all that apply)",hasOther:true,choices:[{value:"item1",text:"I need to build awareness for my brand"},{value:"item2",text:"I need my company to have a better image online"},{value:"item3",text:"I need to use it to build customer loyalty"},{value:"item4",text:"I need somewhere to promote my latest product/service"},{value:"item5",text:"I need to offer a contact point to my clients"},{value:"item6",text:"I need to sell my product/service through my site"},{value:"item7",text:"I need to reach people in many languages"}],otherText:"I have my own reasons:",colCount:2},{type:"checkbox",name:"question8",title:"My site will be built to target: (Check all that apply)",hasOther:true,choices:[{value:"item1",text:"Kids & teens"},{value:"item2",text:"People in their 20s"},{value:"item3",text:"People in their 30s"},{value:"item4",text:"People in their...