Survey.StylesManager.applyTheme("default");
var json = {
"checkErrorsMode": "onValueChanged",
"pages": [
{
"name": "page1",
"elements": [
{
"type": "matrixdynamic",
"name": "relatives",
"title": "Please enter all blood relatives you know",
"columns": [
{
"name": "relativeType",
"title": "Relative",
"cellType": "dropdown",
"isRequired": true,
"choices": [
"father",
"mother",
"brother",
"sister",
"son",
"daughter"
]
},
{
"name": "firstName",
"title": "First name",
"cellType": "text",
"isRequired": true
},
{
"name": "lastName",
"title": "Last name",
"cellType": "text",
"isRequired": true
}
],
"detailElements": [
{
"type": "radiogroup",
"name": "isalive",
"startWithNewLine": false,
"title": "Alive?",
"isRequired": true,
"choices": [
"Yes",
"No"
],
"colCount": 0
},
{
"type": "dropdown",
"name": "liveage",
"visibleIf": "{row.isalive} = 'Yes'",
"startWithNewLine": false,
"title": "Age",
"isRequired": true,
"choicesMin": 1,
"choicesMax": 115
},
{
"type": "dropdown",
"name": "deceasedage",
"visibleIf": "{row.isalive} = 'No'",
"startWithNewLine": false,
"title": "Deceased Age",
"isRequired": true,
"choices": [
{
"value": -1,
"text": "Unknown"
}
],
"choicesMin": 1,
"choicesMax": 115
},
{
"type": "radiogroup",
"name": "causeofdeathknown",
"visibleIf": "{row.isalive} = 'No'",
"startWithNewLine": false,
"title": "Cause of Death Known?",
"isRequired": true,
"choices": [
"Yes",
"No"
],
"colCount": 0
},
{
"type": "text",
"name": "causeofdeath",
"visibleIf": "{row.isalive} = 'No' and {row.causeofdeathknown} = 'Yes'",
"startWithNewLine": false,
"title": "Cause of Death",
"isRequired": true
}
],
"detailPanelMode": "underRow",
"rowCount": 1,
"addRowText": "Add a blood relative",
"removeRowText": "Remove the relative"
}
]
}
]
};
window.survey = new Survey.Model(json);
survey.onComplete.add(function(result) {
document.querySelector('#surveyResult').textContent =
"Result JSON:\n" + JSON.stringify(result.data, null, 3);
});
survey.data = {'relatives':[{'relativeType':'father'},{'relativeType':'mother'}]};
var app = new Vue({
el: '#surveyElement',
data:
{
survey: survey
}
});