Custom Rating Custom Widget
Open in new window

Survey.Survey.cssType = "bootstrap";
Survey.defaultBootstrapCss.navigationButton = "btn btn-green";

window.survey = new Survey.Model({
    questions: [
      {
        type: "radiogroup",
        title: "Customer satisfaction degree",
        name: "radiogroup1",
        choices: [{value: 0, text: "Upset"}, {value: 1}, {value: 2}, {value: 3}, {value: 4}, {value: 5}, {value: 6}, {value: 7}, {value: 8}, {value: 9, text: "Satisfied"}],
      }
    ]
  }
);
survey.onComplete.add(function(result) {
	document.querySelector('#surveyResult').innerHTML = "result: " + JSON.stringify(result.data);
});


var widget = {
    name: "customrating",

    isFit : function(question) { return question.name == 'radiogroup1'; },
    afterRender: function(question, el) {
        el.className = "cr-rating";
        var widget = new RatingWidget(el, question, function(newVal) {
          question.value = newVal;
        });
        question.valueChangedCallback = function() {
          widget.updateValue(question.value)
        }
    }
}
Survey.CustomWidgetCollection.Instance.addCustomWidget(widget);
survey.data = {radiogroup1:"8"};


$("#surveyElement").Survey({
    model: survey
});


function RatingWidget(target, question, valueChangedHandler) {
  var inputs = [];

  this.updateValue = function(newVal) {
    inputs.forEach(function(inputElement) {
      if(inputElement.value === newVal) {
        inputElement.checked = true;
      }
      else {
        inputElement.checked = false;
      }
    });
  }

  question.choices.forEach(function(choice, index) {
    var labelText = index > 0 && index < question.choices.length - 1 ? "" : choice.text;
    var label = document.createElement("label");
    label.className = "cr-item";
    var content = "";
    if(!!labelText) {
      content = content.concat("<div class='cr-label'>" + labelText + "</div>");
    }
    label.innerHTML = content.concat("<input type='radio' name='" + question.name + "' value='" + choice.value + "'>");
    inputs.push(label.childNodes[label.childNodes.length - 1]);
    target.appendChild(label);
  });
  inputs.forEach(function(inputElement) {
    inputElement.addEventListener('click', function(event) {
      valueChangedHandler(event.target.value);
    }, false);
  });
  this.updateValue(question.value);
}

<!DOCTYPE html>
<html>

<head>
    <title>Welcome to JQuery</title>
    <script src="https://unpkg.com/jquery"></script>
    
    <script src="https://surveyjs.azureedge.net/0.12.22/survey.jquery.js"></script>
    
    
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div id="surveyElement"></div>
    <div id="surveyResult"></div>
    <script src="./index.js"></script>
</body>

</html>

.btn-green {
  background-color: #1ab394;
  color: #fff;
  border-radius: 3px;
}

.btn-green:hover, .btn-green:focus {
    background-color: #18a689;
    color: #fff;
}

.panel-footer {
    text-align: right;
    background-color: #fff;
}

.cr-rating .cr-item {
    display: inline-block;
    text-align: center;
    margin: 0 2px;
}

.cr-rating .cr-item .cr-label {
    border: 1px solid green;
    background-color: #1ab394;
    border-radius: 5px;
    padding: 5px;
}