Material Example

Product Feedback Survey Example

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@0.5.10/dist/css/bootstrap-material-design.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@0.5.10/dist/css/ripples.css">
<script src="https://unpkg.com/bootstrap-material-design@0.5.10/dist/js/material.js"></script>
<script src="https://unpkg.com/bootstrap-material-design@0.5.10/dist/js/ripples.js"></script>
<script src="https://unpkg.com/survey-knockout@0.12.15"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<div id="surveyElement"></div>

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

SCSS

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

    &:hover, &:focus {
      background-color: #18a689;
      color: #fff;
    }
  }
  
  .my-rating {
    font-size: 12px;
  }
  
  .panel-footer {
      background-color: #fff;
      text-align: right;
  }
}

JavaScript

$.material.init();

var json = {
  title: "Audit Example",
  showProgressBar: "top",
  pages: [{
    questions: [{
      type: "matrix",
      name: "Quality",
      title: "Please score each department below.",
      columns: [{
        value: 0,
        text: "None"
      }, {
        value: 25,
        text: "Isolated"
      }, {
        value: 50,
        text: "Some"
      }, {
        value: 100,
        text: "Widespread"
      }],
      rows: [{
        value: "training",
        text: "Training"
      }, {
        value: "support",
        text: "Support"
      }, {
        value: "safety",
        text: "Safety"
      }, {
        value: "communication",
        text: "Communication"
      }]
    }]
  }
  ]
};

Survey.defaultBootstrapMaterialCss.navigationButton = "btn btn-green";
Survey.defaultBootstrapMaterialCss.rating.item = "btn btn-default my-rating";
Survey.Survey.cssType = "bootstrapmaterial";

var survey = new Survey.Model(json);

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

survey.render("surveyElement");