Edit in JSFiddle

var json = {
  pages: [{
    elements: [{
      type: "rating",
      isRequired: true,
      maxRateDescription: "Completely satisfied",
      minRateDescription: "Not Satisfied",
      name: "satisfaction",
      title: "How satisfied are you with the Product?"
    }, {
      type: "rating",
      maxRateDescription: "I will recommend",
      minRateDescription: "Will not recommend",
      name: "recommend friends",
      title: "How likely are you to recommend the Product to a friend or co-worker?",
      visible: false,
      visibleIf: "{satisfaction} > 3"
    }, {
      type: "comment",
      name: "suggestions",
      title: "What would make you more satisfied with the Product?",
      visibleIf: "{satisfaction} == 3"
    }, {
      type: "comment",
      name: "improve",
      title: "What don't you like in the Product?",
      visibleIf: "{satisfaction} < 4"
    }]
  }],
  focusFirstQuestionAutomatic: false,
  completedHtml: "<p><h4>Thank you for the sharing information wiht us!</h4></p><p>Your satisfaction level is: <b>{satisfaction}</b></p>"
}

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

var survey = new Survey.Model(json);

survey.onComplete.add(function(result) {
  document.querySelector('#result').innerHTML = "result: " + JSON.stringify(result.data);
});

var data = {satisfaction:"3"};

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

<div id="surveyElement"></div>

<div id="result"></div>

.btn-green {
  background-color: #1ab394;
  color: #fff;
  border-radius: 3px;
  
  &:hover, &:focus {
    background-color: #18a689;
    color: #fff;
  }
}

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