Survey.StylesManager.applyTheme("bootstrap");
Survey.defaultBootstrapCss.navigationButton = "btn btn-green";
var json = {
"completeText": "Finish",
"pageNextText": "Continue",
"pagePrevText": "Previous",
"pages": [
{
"elements": [
{
"type": "panel",
"elements": [
{
"type": "html",
"name": "income_intro",
"html": "<article class='intro'> <h1 class='intro__heading intro__heading--income title'> Income </h1> <div class='intro__body wysiwyg'> <p>In this section, you will be asked about your current employment and any other way you and your partner currently receive income.</p> <p>It will be handy to have the following in front of you:</p> <ul> \t<li> \t\tPayslip (for employment details) \t</li> \t<li> \t\t<p>A current Centrelink Schedule for any account based pension from super, annuities, or other income stream products that you own</p> \t\t<p> \t\t\tIf you don't have a current one you can get these schedules by contacting your income stream provider \t\t</p> \t</li> \t<li> \t\tLatest statement from any payments (from Centrelink or other authority) \t</li> </ul> </div> </article>"
}
],
"name": "panel1"
}
],
"name": "page0"
},
{
"elements": [
{
"type": "panel",
"elements": [
{
"type": "radiogroup",
"choices": [
"Married",
"In a registered relationship",
"Living with my partner",
"Widowed",
"Single"
],
"name": "maritalstatus_c",
"title": " "
}
],
"name": "panel13",
"title": "What is your marital status?"
}
],
"name": "page1"
},
{
"elements": [
{
"type": "panel",
"elements": [
{
"type": "panel",
"elements": [
{
"type": "radiogroup",
"choices": [
{
"value": "1",
"text": "Yes"
},
{
"value": "0",
"text": "No"
}
],
"colCount": 2,
"isRequired": true,
"name": "member_receives_income_from_employment",
"title": " "
},
{
"type": "checkbox",
"name": "member_type_of_employment",
"visible": false,
"visibleIf": "{member_receives_income_from_employment} =1",
"title": " ",
"isRequired": true,
"choices": [
"Self employment",
"All other types of employment"
]
}
],
"name": "panel2",
"title": "You"
},
{
"type": "panel",
"elements": [
{
"type": "radiogroup",
"choices": [
{
"value": "1",
"text": "Yes"
},
{
"value": "0",
"text": "No"
}
],
"colCount": 2,
"isRequired": true,
"name": "partner_receives_income_from_employment",
"title": " "
},
{
"type": "checkbox",
"name": "partner_type_of_employment",
"visible": false,
"visibleIf": "{partner_receives_income_from_employment} =1",
"title": " ",
"isRequired": true,
"choices": [
"Self employment",
"All other types of employment"
]
}
],
"name": "panel1",
"startWithNewLine": false,
"title": "Your Partner",
"visible": false,
"visibleIf": "{maritalstatus_c} = 'Married' or {maritalstatus_c} = 'In a registered relationship' or {maritalstatus_c} = 'Living with my partner'"
}
],
"name": "panel5",
"title": "Do you and/or your partner currently receive income from employment?"
}
],
"name": "page2"
},
{
"elements": [
{
"type": "panel",
"elements": [
{
"type": "panel",
"elements": [
{
"type": "paneldynamic",
"minPanelCount": 1,
"name": "member_arrray_employer_names",
"valueName": "member_arrray_employer",
"title": "Please enter all your employers",
"panelAddText": "Add another employer",
"panelCount": 1,
"templateElements": [
{
"type": "text",
"name": "member_employer_name",
"valueName": "name",
"title": "Name of employer"
}
]
}
],
"name": "panel2",
"title": "You",
"visible": false,
"visibleIf": "{member_type_of_employment} contains 'All other types of employment'"
},
{
"type": "panel",
"elements": [
{
"type": "paneldynamic",
"minPanelCount": 1,
"name": "partner_arrray_employer_names",
"valueName": "partner_arrray_employer",
"title": "Please enter all your partner employers",
"panelAddText": "Add another employer",
"panelCount": 1,
"templateElements": [
{
"type": "text",
"name": "partner_employer_name",
"valueName": "name",
"title": "Name of employer"
}
]
}
],
"name": "panel8",
"startWithNewLine": false,
"title": "Your Partner",
"visible": false,
"visibleIf": "{partner_type_of_employment} contains 'All other types of employment'"
}
],
"name": "panel6",
"title": "Who are you employed by?"
}
],
"name": "page3.1",
"visible": false,
"visibleIf": "{member_type_of_employment} contains 'All other types of employment' or {partner_type_of_employment} contains 'All other types of employment'"
},
{
"elements": [
{
"type": "panel",
"elements": [
{
"type": "panel",
"elements": [
{
"type": "paneldynamic",
"renderMode": "progressTop",
"allowAddPanel": false,
"allowRemovePanel": false,
"name": "member_arrray_employer_info",
"title": "Your employers",
"valueName": "member_arrray_employer",
"panelCount": 1,
"templateElements": [
{
"type": "panel",
"name": "panel_member_employer_address",
"title": "Address",
"elements": [{
"type": "text",
"name": "member_employer_address",
"valueName": "address",
"title": "Address"
},
{
"type": "text",
"name": "member_employer_phone",
"valueName": "phone",
"title": "Phone number:"
},
{
"type": "text",
"name": "member_employer_abn",
"valueName": "abn",
"title": "ABN"
}
]
},
{
"type": "panel",
"name": "panel_member_employer_role",
"title": "What is your role?",
"elements": [
{
"type": "radiogroup",
"choices": [
"Full time",
"Part time",
"Casual",
"Seasonal"
],
"name": "member_employer_role",
"title": "Your role",
"valueName": "role"
}
]
},
{
"type": "panel",
"name": "panel_member_employer_hours_work",
"title": "What hours do you work?",
"elements": [
{
"type": "text",
"inputType": "number",
"name": "member_employer_hours_worked",
"valueName": "hours_worked",
"title": "Hours:"
},
{
"type": "dropdown",
"name": "member_employer_hours_worked_frequency",
"title": "Worked Frequency:",
"valueName": "hours_worked_frequency",
"startWithNewLine": false,
"defaultValue": "Year",
"choices": [
"Day",
"Week",
"Fortnight",
"Month",
"Year"
]
}
]
},
{
"type": "panel",
"name": "panel_member_employer_income",
"title": "What income do you receive?",
"elements": [
{
"type": "text",
"inputType": "number",
"name": "member_employer_income",
"valueName": "income",
"title": "Income:"
},
{
"type": "dropdown",
"name": "member_employer_income_frequency",
"title": "Income Frequency",
"valueName": "income_frequency",
"startWithNewLine": false,
"defaultValue": "Year",
"choices": [
"Day",
"Week",
"Fortnight",
"Month",
"Year"
]
}
]
}
],
"templateTitle": "Employer name: {panel.name}"
}
],
"name": "panel17",
"title": "You",
"visibleIf": "{member_type_of_employment} contains 'All other types of employment'"
},
{
"type": "panel",
"elements": [
{
"type": "paneldynamic",
"renderMode": "progressTop",
"allowAddPanel": false,
"allowRemovePanel": false,
"name": "partner_arrray_employer_info",
"title": "Your partner employers",
"valueName": "partner_arrray_employer",
"panelCount": 1,
"templateElements": [
{
"type": "panel",
"name": "panel_partner_employer_address",
"title": "Address",
"elements": [{
"type": "text",
"name": "partner_employer_address",
"valueName": "address",
"title": "Address:"
},
{
"type": "text",
"name": "partner_employer_phone",
"valueName": "phone",
"title": "Phone number"
},
{
"type": "text",
"name": "partner_employer_abn",
"valueName": "abn",
"title": "ABN"
}
]
},
{
"type": "panel",
"name": "panel_partner_employer_role",
"title": "What is your role?",
"elements": [
{
"type": "radiogroup",
"choices": [
"Full time",
"Part time",
"Casual",
"Seasonal"
],
"name": "partner_employer_role",
"title": "Your role",
"valueName": "role"
}
]
},
{
"type": "panel",
"name": "panel_partner_employer_hours_work",
"title": "What hours do you work?",
"elements": [
{
"type": "text",
"inputType": "number",
"name": "partner_employer_hours_worked",
"valueName": "hours_worked",
"title": "Hours"
},
{
"type": "dropdown",
"name": "partner_employer_hours_worked_frequency",
"valueName": "hours_worked_frequency",
"title": "Worked Frequency:",
"startWithNewLine": false,
"defaultValue": "Year",
"choices": [
"Day",
"Week",
"Fortnight",
"Month",
"Year"
]
}
]
},
{
"type": "panel",
"name": "panel_partner_employer_income",
"title": "What income do you receive?",
"elements": [
{
"type": "text",
"inputType": "number",
"name": "partner_employer_income",
"valueName": "income",
"title": "Income:"
},
{
"type": "dropdown",
"name": "partner_employer_income_frequency",
"valueName": "income_frequency",
"title": "Income frequency:",
"startWithNewLine": false,
"defaultValue": "Year",
"choices": [
"Day",
"Week",
"Fortnight",
"Month",
"Year"
]
}
]
}
],
"templateTitle": "Employer name: {panel.name}"
}
],
"name": "panel18",
"startWithNewLine": false,
"title": "You partner",
"visibleIf": "{partner_type_of_employment} contains 'All other types of employment'"
}
],
"name": "panel16",
"title": "Tells us about your employer(s)"
}
],
"name": "page3.2",
"visibleIf": "{member_type_of_employment} contains 'All other types of employment' or {partner_type_of_employment} contains 'All other types of employment'"
},
{
"elements": [
{
"type": "panel",
"elements": [
{
"type": "panel",
"elements": [
{
"type": "radiogroup",
"choices": [
{
"value": "1",
"text": "Yes"
},
{
"value": "0",
"text": "No"
}
],
"colCount": 2,
"isRequired": true,
"name": "member_receive_fringe_benefits",
"title": " "
},
{
"type": "panel",
"elements": [
{
"type": "text",
"name": "member_fringe_benefits_type"
},
{
"type": "text",
"name": "member_fringe_benefits_value"
},
{
"type": "radiogroup",
"choices": [
"Grossed up",
"Not grossed up"
],
"name": "member_fringe_benefits_grossing"
}
],
"name": "panel11",
"visible": false,
"visibleIf": "{member_receive_fringe_benefits} = 1"
}
],
"name": "panel2",
"title": "You",
"visible": false,
"visibleIf": "{member_type_of_employment} contains 'All other types of employment'"
},
{
"type": "panel",
"elements": [
{
"type": "radiogroup",
"choices": [
{
"value": "1",
"text": "Yes"
},
{
"value": "0",
"text": "No"
}
],
"colCount": 2,
"isRequired": true,
"name": "partner_receive_fringe_benefits",
"title": " "
},
{
"type": "panel",
"elements": [
{
"type": "text",
"name": "partner_fringe_benefits_type"
},
{
"type": "text",
"name": "partner_fringe_benefits_value"
},
{
"type": "radiogroup",
"choices": [
"Grossed up",
"Not grossed up"
],
"name": "partner_fringe_benefits_grossing"
}
],
"name": "panel12",
"visible": false,
"visibleIf": "{partner_receive_fringe_benefits} = 1"
}
],
"name": "panel1",
"startWithNewLine": false,
"title": "Your Partner",
"visible": false,
"visibleIf": "{partner_type_of_employment} contains 'All other types of employment'"
}
],
"name": "panel9",
"title": "Do any of your employers provide you with fringe benefits?"
}
],
"name": "page4",
"visible": false,
"visibleIf": "{member_type_of_employment} contains 'All other types of employment' or {partner_type_of_employment} contains 'All other types of employment'"
},
{
"elements": [
{
"type": "panel",
"elements": [
{
"type": "panel",
"elements": [
{
"type": "radiogroup",
"choices": [
{
"value": "1",
"text": "Yes"
},
{
"value": "0",
"text": "No"
}
],
"colCount": 2,
"isRequired": true,
"name": "member_seasonal_intermittent_or_contract_work",
"title": " "
}
],
"name": "panel2",
"title": "You",
"visible": false,
"visibleIf": "{member_receives_income_from_employment} = 1"
},
{
"type": "panel",
"elements": [
{
"type": "radiogroup",
"choices": [
{
"value": "1",
"text": "Yes"
},
{
"value": "0",
"text": "No"
}
],
"colCount": 2,
"isRequired": true,
"name": "partner_seasonal_intermittent_or_contract_work",
"title": " "
}
],
"name": "panel1",
"startWithNewLine": false,
"title": "Your Partner",
"visible": false,
"visibleIf": "{partner_receives_income_from_employment} =1 "
}
],
"name": "panel10",
"title": "In the last 6 months, have you done any seasonal, intermittent or contract work?"
}
],
"name": "page5",
"visible": false,
"visibleIf": "{member_receives_income_from_employment} = 1 or {partner_receives_income_from_employment} =1 "
}
],
"requiredText": "",
"showQuestionNumbers": "off",
"storeOthersAsComment": false
};
window.survey = new Survey.Model(json);
survey.onComplete.add(function(sender) {
document.querySelector('#surveyResult').textContent =
"Result JSON:\n" + JSON.stringify(sender.data, null, 3);
});
survey.render("surveyElement");
<!DOCTYPE html>
<html lang="en">
<head>
<title>Income Survey, Knockoutjs Survey Library Example</title>
<meta name="viewport" content="width=device-width" />
<script src="https://unpkg.com/knockout@3.5.1/build/output/knockout-latest.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-knockout-ui/survey-knockout-ui.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./index.css">
<style>
.intro__heading--income {
margin-top: 0.83em;
}
</style>
</head>
<body style="margin: 0">
<div id="surveyElement" style="display:inline-block;width:100%;">
</div>
<div id="surveyResult"></div>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
Help us serve you better by taking this brief
survey. We are interested to learn more about
your experience of using our libraries.
We'd really appreciate your feedback.
Approximate time to complete: 2 min.
Start the survey