Multiple Surveys (jQuery) inheriting same classes

[scottmmack]

Are you requesting a feature, reporting a bug or asking a question?

Asking a question.

What is the current behavior?

Multiple surveys load in but don't apply the classes for styling to all surveys.

What is the expected behavior?

Requesting to have multiple surveys which load under seperate divs. I am trying to assign the same set of classes for styling to all surveys. And if possible a clear button that will reset eveything back to the start.

How would you reproduce the current behavior (if this is a bug)?

Provide the test code and the tested page URL (if applicable)

Tested page URL:

Test code

your_code_here

var surveyAcneJSON = { title: "Acne", completedHtmlOnCondition: [{ expression: "{DermatologistCurrently} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{TreatmentPrescribed12weeks} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{Pregnant} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{HormonesPeriods} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{ExcessiveHairGrowth} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{BoilsNodulesPustules} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{ScarringMarksSkin} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{DistressEmbarassmentAnxiety} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{DistressEmbarassmentAnxiety} = 'No'", html: "<h1>Speak to Pharmacist</h1>" }], pages: [{ name: "Acne", elements: [{ type: "radiogroup", name: "DermatologistCurrently", title: "Are you known to a dermatologist for your acne currently?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "TreatmentPrescribed12weeks", visible: false, visibleIf: "{DermatologistCurrently} = 'No'", title: "Have you been using a treatment for acne prescribed by a GP for more than 12 weeks?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "MaleFemale", visible: false, visibleIf: "{TreatmentPrescribed12weeks} = 'No'", title: "Are you Male or Female?", isRequired: true, choices: [{ value: "Male", text: "Male" }, { value: "Female", text: "Female" }] }, { type: "radiogroup", name: "Pregnant", visible: false, visibleIf: "{MaleFemale} = 'Female'", title: "Are you (or could you be) currently pregnant?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "HormonesPeriods", visible: false, visibleIf: "{Pregnant} = 'No'", title: "Sometimes this can be linked with hormones, have your periods been regular?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "ExcessiveHairGrowth", visible: false, visibleIf: "{HormonesPeriods} = 'No'", title: "Do you suffer with excessive hair growth on your face, arms or body?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "BoilsNodulesPustules", visible: false, visibleIf: "{ExcessiveHairGrowth} = 'No' or {MaleFemale} = 'Male'", title: "Does your acne include large boils, nodules or pustules?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "ScarringMarksSkin", visible: false, visibleIf: "{BoilsNodulesPustules} = 'No'", title: "Does your acne leave scarring or permanent marks on your skin?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "DistressEmbarassmentAnxiety", visible: false, visibleIf: "{ScarringMarksSkin} = 'No'", title: "Is it causing severe distress, embarassment or social anxiety?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }], description: "Please answer the following questions to determine the suitable outcome for you." }], triggers: [{ type: "complete" }], showNavigationButtons: "none", showPrevButton: false, showQuestionNumbers: "off", goNextPageAutomatic: true }
var surveyAcne = new Survey.Model(surveyAcneJSON);

var surveyAllergiesJSON = { title: "Allergies", completedHtml: "<h3>Thank you.</h3>", completedHtmlOnCondition: [{ expression: "{DifficultyBreathing} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{Swelling} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{CollapseFaint} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{ReactionSevereDistress} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{Under16} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{ReactionSymptoms} = 'Yes'", html: "<h1>Speak to your PharmacistP</h1>" }, { expression: "{NewlyPrescribedMedication} = 'No'", html: "<h1>See your Pharmacist</h1>" }, { expression: "{NewlyPrescribedMedication} = 'Yes'", html: "<h1>See your GP</h1>" }], pages: [{ name: "Allergies", elements: [{ type: "radiogroup", name: "DifficultyBreathing", title: "Have you experienced difficulty breathing because of this reaction?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "Swelling", visible: false, visibleIf: "{DifficultyBreathing} = 'No'", title: "Did you experience swelling of your lips, tongue, throat or face during the reaction?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "CollapseFaint", visible: false, visibleIf: "{Swelling} = 'No'", title: "Did you collapse or faint as a reaction to the allergy?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "ReactionSevereDistress", visible: false, visibleIf: "{CollapseFaint} = 'No'", title: "Was the reaction severe, cause significant problems or distress?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "Under16", visible: false, visibleIf: "{ReactionSevereDistress} = 'No'", title: "Is the patient under 16 years old?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "ReactionSymptoms", visible: false, visibleIf: "{Under16} = 'No'", title: "Did the reaction include any of the following symptoms: Sneezing; Runny or block nose; Red, itchy or watery eyes; Wheezing or coughing; Red, itchy rash; Worsening asthma or eczema", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "NewlyPrescribedMedication", visible: false, visibleIf: "{ReactionSymptoms} = 'No'", title: "Have you recently started a newly prescribed medication?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }], description: "Please answer the following questions to determine the suitable outcome for you." }], triggers: [{ type: "complete" }], showNavigationButtons: "none", showPrevButton: false, showQuestionNumbers: "off", progressBarType: "questions", goNextPageAutomatic: true }
var surveyAllergies = new Survey.Model(surveyAllergiesJSON);

var surveyAthletesFootJSON = { title: "Athletes Foot", completedHtml: "<h3>Thank you.</h3>", completedHtmlOnCondition: [{ expression: "{ToenailsInvolved} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{BlistersUlcerFoot} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{SymptomsFailed} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{SymptomsFailed} = 'No'", html: "<h1>Speak to your PharmacistP</h1>" }], pages: [{ name: "Athletes Foot", elements: [{ type: "radiogroup", name: "ToenailsInvolved", title: "Are your toenails involved?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "BlistersUlcerFoot", visible: false, visibleIf: "{ToenailsInvolved} = 'No'", title: "Do you have blisters or an ulcer on your foot?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "SymptomsFailed", visible: false, visibleIf: "{BlistersUlcerFoot} = 'No'", title: "Has symptoms failed to respond to pharmacy treatment?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }], description: "Please answer the following questions to determine the suitable outcome for you." }], triggers: [{ type: "complete" }], showNavigationButtons: "none", showPrevButton: false, showQuestionNumbers: "off", progressBarType: "questions", goNextPageAutomatic: true }
var surveyAthletesFoot = new Survey.Model(surveyAthletesFootJSON);

var surveyEaracheJSON = { title: "Earache", completedHtml: "<h3>Thank you.</h3>", completedHtmlOnCondition: [{ expression: "{Present7Days} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{BloodPusEar} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{StuckInEar} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{SwellingPain} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{HighTemperature} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{SenseOfBalance} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{HearingAffected} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{HearingAffected} = 'No'", html: "<h1>Speak to your Pharmacist</h1>" }], pages: [{ name: "Earache", elements: [{ type: "radiogroup", name: "Present7Days", title: "Has it been present for more than 7 days?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "BloodPusEar", visible: false, visibleIf: "{Present7Days} = 'No'", title: "Is there blood or pus coming out of the ear?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "StuckInEar", visible: false, visibleIf: "{BloodPusEar} = 'No'", title: "Could there be something stuck in the ear?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "SwellingPain", visible: false, visibleIf: "{StuckInEar} = 'No'", title: "Is there swelling, pain or tenderness around the ear?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "HighTemperature", visible: false, visibleIf: "{SwellingPain} = 'No'", title: "Is there a persistent high temperature or fever?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "SenseOfBalance", visible: false, visibleIf: "{HighTemperature} = 'No'", title: "Is your sense of balance affected?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "HearingAffected", visible: false, visibleIf: "{SenseOfBalance} = 'No'", title: "Is your hearing affected?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }], description: "Please answer the following questions to determine the suitable outcome for you." }], triggers: [{ type: "complete" }], showNavigationButtons: "none", showPrevButton: false, showQuestionNumbers: "off", progressBarType: "questions", goNextPageAutomatic: true }
var surveyEarache = new Survey.Model(surveyEaracheJSON);

var surveySoreThroatJSON = { title: "Sore Throat", completedHtml: "<h3>Thank you.</h3>", completedHtmlOnCondition: [{ expression: "{DifficultyBreathing} = 'Yes'", html: "<h1>See your GP<br>Or call an Ambulance</h1>" }, { expression: "{NeckSwollen} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{More7Days} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{RashBody} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{Cough} = 'Yes'", html: "<h1>Speak to your Pharmacist</h1>" }, { expression: "{NoseRunnyBlocked} = 'Yes'", html: "<h1>Speak to your PharmacistP</h1>" }, { expression: "{HighTempratureFever} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{HighTempratureFever} = 'No'", html: "<h1>Speak to your Pharmacist</h1>" }], pages: [{ name: "Sore Throat", elements: [{ type: "radiogroup", name: "DifficultyBreathing", title: "Are you having difficulty breathing?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "NeckSwollen", visible: false, visibleIf: "{DifficultyBreathing} = 'No'", title: "Is your neck swollen?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "More7Days", visible: false, visibleIf: "{NeckSwollen} = 'No'", title: "Has it been more than 7 days?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "RashBody", visible: false, visibleIf: "{More7Days} = 'No'", title: "Do you have a rash on your body?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "Cough", visible: false, visibleIf: "{RashBody} = 'No'", title: "Do you have a cough?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "NoseRunnyBlocked", visible: false, visibleIf: "{Cough} = 'No'", title: "Is your nose runny or feeling blocked?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "HighTempratureFever", visible: false, visibleIf: "{NoseRunnyBlocked} = 'No'", title: "Do you have a high temperature or fever?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }], description: "Please answer the following questions to determine the suitable outcome for you." }], triggers: [{ type: "complete" }], showNavigationButtons: "none", showPrevButton: false, showQuestionNumbers: "off", progressBarType: "questions", goNextPageAutomatic: true }
var surveySoreThroat = new Survey.Model(surveySoreThroatJSON);

var surveyThreadwormsJSON = { title: "Threadworms", completedHtml: "<h3>Thank you.</h3>", completedHtmlOnCondition: [{ expression: "{AnalPain} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{BloodDischarge} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{LumpsSwellings} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{PainAbdomenTummy} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{UlcersSkinChanges} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{SymptomsMultipleTreatments} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{SymptomsMultipleTreatments} = 'No'", html: "<h1>Speak to your Pharmacist</h1>" }], pages: [{ name: "Threadworms", elements: [{ type: "radiogroup", name: "AnalPain", title: "Do you have anal pain?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "BloodDischarge", visible: false, visibleIf: "{AnalPain} = 'No'", title: "Do you have pus or blood discharge from the anus?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "LumpsSwellings", visible: false, visibleIf: "{BloodDischarge} = 'No'", title: "Are there any new lumps or swellings around the anus?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "PainAbdomenTummy", visible: false, visibleIf: "{LumpsSwellings} = 'No'", title: "Are you suffering with pain in the abdomen/tummy?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "UlcersSkinChanges", visible: false, visibleIf: "{PainAbdomenTummy} = 'No'", title: "Are there ulcers or unusual skin change around the anus?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "SymptomsMultipleTreatments", visible: false, visibleIf: "{UlcersSkinChanges} = 'No'", title: "Have the symptoms come back despite multiple treatments?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }], description: "Please answer the following questions to determine the suitable outcome for you." }], triggers: [{ type: "complete" }], showNavigationButtons: "none", showPrevButton: false, showQuestionNumbers: "off", progressBarType: "questions", goNextPageAutomatic: true }
var surveyThreadworms = new Survey.Model(surveyThreadwormsJSON);

var surveyThrushJSON = { title: "Thrush", completedHtml: "<h3>Thank you.</h3>", completedHtmlOnCondition: [{ expression: "{SexuallyTransmittedInfection} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{VaginalDischarge} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{AbnormalBleeding} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{SymptomsRecurredTreatment} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{TummySwelling} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{UnusualChangesGenitals} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{UnusualChangesGenitals} = 'No'", html: "<h1>Speak to your Pharmacist</h1>" }], pages: [{ name: "Thrush", elements: [{ type: "radiogroup", name: "SexuallyTransmittedInfection", title: "Do you feel you could be at risk of a sexually-transmitted infection?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "VaginalDischarge", visible: false, visibleIf: "{SexuallyTransmittedInfection} = 'No'", title: "Do you have vaginal discharge which smells very offensive?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "AbnormalBleeding", visible: false, visibleIf: "{VaginalDischarge} = 'No'", title: "Do you have new abnormal bleeding associated with the thrush symptoms?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "SymptomsRecurredTreatment", visible: false, visibleIf: "{AbnormalBleeding} = 'No'", title: "Have the symptoms recurred despite repeated courses of treatment?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "TummySwelling", visible: false, visibleIf: "{SymptomsRecurredTreatment} = 'No'", title: "Do you have associated lower tummy swelling or pelvic pain?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "UnusualChangesGenitals", visible: false, visibleIf: "{TummySwelling} = 'No'", title: "Are there unusual changes or ulcers visible on the skin of the genitals?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }], description: "Please answer the following questions to determine the suitable outcome for you." }], triggers: [{ type: "complete" }], showNavigationButtons: "none", showPrevButton: false, showQuestionNumbers: "off", progressBarType: "questions", goNextPageAutomatic: true }
var surveyThrush = new Survey.Model(surveyThrushJSON);

var surveyVerrucasJSON = { title: "Verrucas", completedHtml: "<h3>Thank you.</h3>", completedHtmlOnCondition: [{ expression: "{Bleeding} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{Painful} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{ChangedColouring} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{SpreadingGrowing} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{Recurring} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{DistressEmbrarrassment} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{DistressEmbrarrassment} = 'No'", html: "<h1>Speak to your Pharmacist</h1>" }], pages: [{ name: "Verrucas", elements: [{ type: "radiogroup", name: "Bleeding", title: "Is it bleeding?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "Painful", visible: false, visibleIf: "{Bleeding} = 'No'", title: "Is it very painful?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "ChangedColouring", visible: false, visibleIf: "{Painful} = 'No'", title: "Has it changed colouring lately?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "SpreadingGrowing", visible: false, visibleIf: "{ChangedColouring} = 'No'", title: "Is it spreading or growing?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "Recurring", visible: false, visibleIf: "{SpreadingGrowing} = 'No'", title: "Is it recurring (even after treatment)?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "DistressEmbrarrassment", visible: false, visibleIf: "{Recurring} = 'No'", title: "Is it causing great distress or embarrassment?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }], description: "Please answer the following questions to determine the suitable outcome for you." }], triggers: [{ type: "complete" }], showNavigationButtons: "none", showPrevButton: false, showQuestionNumbers: "off", progressBarType: "questions", goNextPageAutomatic: true }
var surveyVerrucas = new Survey.Model(surveyVerrucasJSON);

var surveyWartsJSON = { title: "Warts", completedHtml: "<h3>Thank you.</h3>", completedHtmlOnCondition: [{ expression: "{Bleeding} = 'Yes'", html: "<h1>See your GP<br>Or call an Ambulance</h1>" }, { expression: "{Painful} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{ChangedAppearance} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{SpreadingGrowing} = 'Yes'", html: "<h1>See your GP</h1>" }, { expression: "{Recurring} = 'Yes'", html: "<h1>Speak to your Pharmacist</h1>" }, { expression: "{DistressEmbrrassment} = 'Yes'", html: "<h1>Speak to your PharmacistP</h1>" }, { expression: "{DistressEmbrrassment} = 'No'", html: "<h1>Usually no treatment needed<br>or see your Pharmacist</h1>" }], pages: [{ name: "Warts", elements: [{ type: "radiogroup", name: "Bleeding", title: "Is it bleeding?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "Painful", visible: false, visibleIf: "{Bleeding} = 'No'", title: "Is it very painful?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "ChangedAppearance", visible: false, visibleIf: "{Painful} = 'No'", title: "Has it changed appearance lately?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "SpreadingGrowing", visible: false, visibleIf: "{ChangedAppearance} = 'No'", title: "Is it spreading or growing?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "Recurring", visible: false, visibleIf: "{SpreadingGrowing} = 'No'", title: "Is it recurring (even after treatment)?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }, { type: "radiogroup", name: "DistressEmbrrassment", visible: false, visibleIf: "{Recurring} = 'No'", title: "Is it causing great distress or embarrassment?", isRequired: true, choices: [{ value: "Yes", text: "Yes" }, { value: "No", text: "No" }] }], description: "Please answer the following questions to determine the suitable outcome for you." }], triggers: [{ type: "complete" }], showNavigationButtons: "none", showPrevButton: false, showQuestionNumbers: "off", progressBarType: "questions", goNextPageAutomatic: true }
var surveyWarts = new Survey.Model(surveyWartsJSON);

//surveyAcne, surveyAllergies, surveyAthletesFoot, surveyEarache, surveySoreThroat, surveyThreadworms, surveyThrush, surveyVerrucas, surveyWarts
    surveyAcne
    .onComplete
    .add(function (result) {
        document
            .querySelector('#surveyResult')
            .textContent = "Result JSON:\n" + JSON.stringify(result.data, null, 3);
    });

//surveyAcne, surveyAllergies, surveyAthletesFoot, surveyEarache, surveySoreThroat, surveyThreadworms, surveyThrush, surveyVerrucas, surveyWarts
   surveyAcne
    .onUpdateQuestionCssClasses
    .add(function (survey, options) {
        var classes = options.cssClasses

        classes.root = "sv_main"; // Whole survey render
        classes.container = "sv_container" // nothing

        classes.title = "sq-title" // Survey question
        classes.item = "sq-item"; // sv_main same
        classes.label = "sq-label"; // Survey answer option

        if (options.question.isRequired) {
            classes.title += " sq-title-required";
            classes.root += " sq-root-required";
        }

        if (options.question.getType() === "checkbox") {
            classes.root += " sq-root-cb";
        }
    });

$("#Restart").on("click", function () {
    survey.clear();
    survey.render();
    document.querySelector('.protocol').textContent.clear();
});

$("#surveyAcne").Survey({
    model: surveyAcne,
});
/*
$("#surveyAllergies").Survey({
    model: surveyAllergies,
});
$("#surveyAthletesFoot").Survey({
    model: surveyAthletesFoot,
});
$("#surveyEarache").Survey({
    model: surveyEarache,
});
$("#surveySoreThroat").Survey({
    model: surveySoreThroat,
});
$("#surveyThrush").Survey({
    model: surveyThrush,
});
$("#surveyThreadworms").Survey({
    model: surveyThreadworms,
});
$("#surveyVerrucas").Survey({
    model: surveyVerrucas,
});
$("#surveyWarts").Survey({
    model: surveyWarts,
});*/

### Specify your

* browser:
* browser version:
* surveyjs platform (angular or react or jquery or knockout or vue):
* surveyjs version:

[andrewtelnov]

@scottmmack I have tried to create a plunker with your code and it doesn't compile. Could you please create a small reproducible example in plunker and we will take a look?

[scottmmack]

@andrewtelnov Ok Andrew thanks, I've put together in a Plunker for you.
https://plnkr.co/edit/TUXIjba8llgl9RIi?open=lib%2Fscript.js&preview Can see all the surveys rendering but only the last one has the classes needed. All the surveys need the classes applied. Thanks

[tsv2013]

@scottmmack You can use CSS scopes:

.Acne .sv_q_title {
  color: red;
}

.Allergies .sv_q_title {
  color: green;
}

.AthletesFoot .sv_q_title {
  color: pink;
}

Here is your updated sample - https://plnkr.co/edit/VuIDtlGGQA3r5Lwe?open=lib%2Fscript.js

[scottmmack]

@tsv2013 Thanks for your reply. Not sure its as simple as that. The classes and css code applies to the various divs and spans for the radio buttons so there might be a lot of code dupication applying "Acne" "Allergies" "AthletesFoot" Was hoping if there was a way append to all in the JS?