Basic Examples

Simple select rating with default options

Simple clickable rating

HTML
              
                <div id="myBasicRating"></div>
JavaScript
              
                var div = document.getElementById("myBasicRatingDefault");
                var amtRating = new Askmethat.AskmethatRating(div, 2);

Simple select rating with custom options

Simple clickable rating

HTML
              
                <div id="myBasicRating"></div>
JavaScript
              
                var options = {
                    backgroundColor : "#e5e500",
                    hoverColor: "#ffff66",
                    fontClass: "fa fa-star",
                    minRating: 1,
                    maxRating: 5,
                    readonly: false,
                    step: Askmethat.AskmethatRatingSteps["OnePerOneStep"],
                    inputName: "MyRating"                                    
                    };

                var div = document.getElementById("myBasicRating");
                var amtRating = new Askmethat.AskmethatRating(div, 2, options);

Multiple select rating

Multiple independant rating

HTML
              
                <div id="myFirstMultipleRating"></div>
                <div id="mySecondMultipleRating"></div>
JavaScript
              
                  var options = {
                      backgroundColor : "#e5e500",
                      hoverColor: "#ffff66",
                      fontClass: "fa fa-star",
                      minRating: 1,
                      maxRating: 5,
                      readonly: false,
                      step: Askmethat.AskmethatRatingSteps["OnePerOneStep"]
                      };

                  var div = document.getElementById("myFirstMultipleRating");
                  var amtRating1 = new Askmethat.AskmethatRating(div, 1, options);   
                  var div = document.getElementById("mySecondMultipleRating");
                  var amtRating2 = new Askmethat.AskmethatRating(div, 2, options);

Different fonts example

Rating using different fonts

HTML
              
                <div id="myFirstMultipleRating"></div>
                <div id="mySecondMultipleRating"></div>
JavaScript
              
                  var options1 = 
                  {
                    fontClass: "fa fa-cloud"           
                  };

                  var options2 = 
                  {
                    fontClass: "octicon octicon-clippy",
                  };

                  var div = document.getElementById("myFontAwesomeRating");
                  var amtRating1 = new Askmethat.AskmethatRating(div, 1, options1);   
                  var div = document.getElementById("myOcticonRating");
                  var amtRating2 = new Askmethat.AskmethatRating(div, 1, options2);

Working with options

Different rating steps

Using the three differents step available for rating

HTML
              
                <div id="minimalStepRating"></div>
                <div id="halfStepRating"></div>
                <div id="fullStepRating"></div>
JavaScript
              
                  var decimalOpt = 
                  {
                    step: Askmethat.AskmethatRatingSteps["DecimalStep"]
                  };

                  var halpOpt = 
                  {
                    step: Askmethat.AskmethatRatingSteps["HalfStep"]
                  };

                  var FullOpt = 
                  {
                    step: Askmethat.AskmethatRatingSteps["OnePerOneStep"]
                  };

                  var div = document.getElementById("minimalStepRating");
                  var amtRating1 = new Askmethat.AskmethatRating(div, 1.8, decimalOpt);   

                  var div = document.getElementById("halfStepRating");
                  var amtRating2 = new Askmethat.AskmethatRating(div, 1.5, halpOpt);    

                  var div = document.getElementById("fullStepRating");
                  var amtRating3 = new Askmethat.AskmethatRating(div, 1, FullOpt);

Readonly rating

Rating at readonly have events disabled

HTML
              
                <div id="readonlyRating"></div>
JavaScript
              
                var options = 
                {
                    readonly: true,
                };

                var div = document.getElementById("readonlyRating");
                var amtRating = new Askmethat.AskmethatRating(div, 3.2, options);

Working with events

On change event

Event fired when the value of the rating change

HTML
              
                <div id="changeEventRating"></div>
                <span id="changeEventRatingValue">0<span>
JavaScript
              
                var options = {
                    backgroundColor : "#e5e500",
                    hoverColor: "#ffff66",
                    fontClass: "fa fa-star",
                    minRating: 0,
                    maxRating: 5,
                    readonly: false,
                    step: Askmethat.AskmethatRatingSteps["HalfStep"]                                       
                    };

                var changeDiv = document.getElementById("changeEventRating");
                var amtRating = new Askmethat.AskmethatRating(div, 0, options);

                 changeDiv.addEventListener("amt-change", function(e){
                  document.getElementById("changeEventRatingValue").innerHTML = e.detail;
                });
0

Popover

Display popover

If you want to display rating statistics, you can use the rating popover to display them

HTML
              
                <div id="popoverRating"></div>
JavaScript
              
                //popover
                var options = {
                 backgroundColor : "#e5e500",
                 hoverColor: "#ffff66",
                 fontClass: "fa fa-star",
                 minRating: 0,
                 maxRating: 5,
                 readonly: true,
                 step: Askmethat.AskmethatRatingSteps["HalfStep"],
                 popover: {
                   color: "#e5e500",
                   fontClass: "fa fa-star",
                   direction: 0,
                   values : [20,20,20,20,20]
                 }                                       
                };
         
                var changeDiv = document.getElementById("popoverRating");
                var amtRating = new Askmethat.AskmethatRating(changeDiv, 0, options);