Survey.StylesManager.applyTheme("modern");
var json = {
pages: [
{
name: "page1",
elements: [
{
type: "text",
name: "firstname",
title: "Please type your First Name",
isRequired: true
},
{
type: "text",
name: "lastname",
startWithNewLine: false,
title: "Last Name",
isRequired: true
},
{
type: "text",
name: "birthdate",
title: "Please type your Birth date:",
isRequired: true,
validators: [
{
type: "expression",
text: "You should be 14 years old or older",
expression: "{age} > 13"
},
{
type: "expression",
text: "You should be 90 years old or younger",
expression: "{age} <= 90"
}
],
inputType: "date"
}
]
},
{
name: "page2",
elements: [
{
type: "checkbox",
name: "options",
title:
"Dear {fullname}. Based on your age ({age}), we can recommend you the following options. Please choose at least one:",
isRequired: true,
choices: [
{
value: "option 1",
text: "Option 1, age < 18",
visibleIf: "{age} < 18"
},
{
value: "option 2",
text: "Option 2, age < 18",
visibleIf: "{age} < 18"
},
{
value: "option 3",
text: "Option 3, age < 18",
visibleIf: "{age} < 18"
},
{
value: "option 4",
text: "Option 4, age >= 18 and age < 50",
visibleIf: "{age} >= 18 and {age} < 50"
},
{
value: "option 5",
text: "Option 5, age >= 18 and age < 50",
visibleIf: "{age} >= 18 and {age} < 50"
},
{
value: "option 6",
text: "Option 6, age >= 18 and age < 50",
visibleIf: "{age} >= 18 and {age} < 50"
},
{
value: "option 7",
text: "Option 7, age >= 50",
visibleIf: "{age} >= 50"
},
{
value: "option 8",
text: "Option 8, age >= 50",
visibleIf: "{age} >= 50"
},
{
value: "option 9",
text: "Option 9, age >= 50",
visibleIf: "{age} >= 50"
}
]
}
]
}
],
calculatedValues: [
{
name: "fullname",
expression: "{firstname} + ', ' + {lastname}"
},
{
name: "age",
expression: "age({birthdate})",
includeIntoResult: true
}
]
};
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>Use calculated values, 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 href="/DevBuilds/survey-core/modern.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="surveyElement" style="display:inline-block;width:100%;">
</div>
<div id="surveyResult"></div>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>