<!DOCTYPE html>
<html>
<head>
<title>One choice - Radio Group question, jQuery Survey Library Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/jquery"></script>
<script src="https://surveyjs.azureedge.net/1.0.64/survey.jquery.js"></script>
<link href="https://surveyjs.azureedge.net/1.0.64/survey.css" type="text/css" rel="stylesheet"/>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="surveyElement"></div>
<div id="surveyResult"></div>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
Survey
.StylesManager
.applyTheme("default");
Survey
.JsonObject
.metaData
.addProperty("question", {name: "score:number"});
Survey.JsonObject.metaData.addProperty("itemvalue", {name: "score:number"});
var json = {
questions: [
{
"type": "boolean",
"name": "myboolean",
"label": "ten",
"score": 10
},
{
type: "radiogroup",
name: "myradiogroup",
title: "Radio question with the score",
colCount: 4,
choices: [
{
value: "one",
score: 1
},
{
value: "two",
score: 2
},
{
value: "three",
score: 3
}
]
}
]
};
window.survey = new Survey.Model(json);
survey
.onComplete
.add(function (survey) {
var totalScore = 0;
var data = survey.data;
Object.keys(data).forEach(function(qName) {
var question = survey.getQuestionByName(qName);
var qValue = data[qName];
if (question.choices) {
question.choices.forEach(function(choice) {
if (choice.value === qValue) {
totalScore += +choice.score;
}
});
} else {
totalScore += +question.score;
}
});
document
.querySelector('#surveyResult')
.innerHTML = "total score: " + JSON.stringify(totalScore);
});
$("#surveyElement").Survey({model: survey});