Material Example

Product Feedback Survey Example

by Kirubel Girma

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/[email protected]/dist/css/bootstrap-material-design.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/ripples.css">
<script src="https://unpkg.com/[email protected]/dist/js/material.js"></script>
<script src="https://unpkg.com/[email protected]/dist/js/ripples.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<div id="surveyElement"></div>
<div id="result"></div>

SCSS

body {
  background-color: #fff;
  
  .btn-green {
    background-color: RED;
    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: "Product Feedback Survey Example",
    showProgressBar: "top",
    pages: [{
        questions: [{
            type: "radiogroup",
            name: "Quality",
            title: "What is your business' most urgent need?",
						choices: ["capital",
                "Valuation",
                "Advertising",
                "Legal",
                "Accounting",
                "Staffing",
                "Media & content"
            ]
        }]
    }, {
    	questions: [{
          type: "checkbox",
          name: "words",
          title: "Which of the words would you use to describe our products?",
          isRequired: true,
          colCount: 2,
          choices: ["Reliable", "High quality", "Useful", "Unique", "Good", "Overpriced", "Impractical", "Ineffective", "Poor quality", "Unreliable", "Not for me"]
      }]
    }, {
        questions: [{
            type: "radiogroup",
            name: "price to competitors",
            title: "Compared to our competitors, do you feel the Product is",
            choices: ["Less expensive", "Priced about the same", "More expensive", "Not sure"]
        }, {
            type: "radiogroup",
            name: "price",
            title: "Do you feel our current price is merited by our product?",
            choices: ["correct|Yes, the price is about right",
                "low|No, the price is too low for your product",
                "high|No, the price is too high for your product"
            ]
        }]
    }, {
        questions: [{
            type: "multipletext",
            name: "pricelimit",
            title: "What is the... ",
            items: [{
                name: "mostamount",
                title: "The maximum amount you would ever pay for a product like ours"
            }, {
                name: "leastamount",
                title: "The minimum amount you would feel comfortable paying"
            }]
        }, {
            type: "text",
   ...