JSFiddle - React, Tailwind, and code Playground
HTML
<div id="Slides">
</div>
JavaScript
var engagementTest=[
{
"question": "Data: Does your business collect the contact details of customers/drop-ins",
"type": "Radio",
"options": [
{ "No": 0 },
{
"Yes": [
{
"question": "What kind of reviews are collected",
"type": "Check",
"options": [
{ "Mobile App": 3 },
{ "EMail": 1 },
{ "Phone Number": 2 },
{ "Facebook Login": 4 },
{ "Twitter Login": 3 },
{ "Other Social media": 3 }
]
},
{
"question": "How frequently does your organization reach out to customers",
"type": "Radio",
"options": [
{ "Few times a year with Season's greetings": 1 },
{ "Several times a year with announcements and information updates": 2 },
{ "Several times a month with monthly offers and updates": 4 },
{ "Few times a week with weekly offers, discounts, blogs etc. ": 10 },
{ "Almost Daily updates about offers, blogs, offers, discounted products": 6 }
]
},
{
"question": "How personalized is your outreach towards your customers",
"type": "Radio",
"options": [
{ "All customers and other subscribers get the same email or notification": 0 },
{ "Customers get different emails from other subscribers who are not customers": 2 },
{ "Customer's get emails according to their segment": 8 },
{ "Each customer gets personalized email customized according to their individual preference": 10 }
]
}
]
}
]
},
]
$.each(engagementTest, function() {
var Ques=$('<label>'+this.question+'?</label><br/>').appendTo(Slides);
var html=
"<input type='"+this.type+"' value='1' name='Radbtn'/>Yes</input><br/>"+
"<input...