ratings/index.html

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://www.contentstack.com/sdks/contentstack-ui-extensions/dist/latest/ui-extension-sdk.js"></script>
    <link href="https://www.contentstack.com/sdks/contentstack-ui-extensions/dist/latest/ui-extension-sdk.css" rel="stylesheet" type="text/css" media="all">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"></link>
    <style>
        #wrapper {
            position: relative;
        }
        .user-rating {
            direction: rtl;
            font-size: 20px;
            unicode-bidi: bidi-override;
            padding: 9px 18px;
            display: inline-block;
        }
        .user-rating input {
            opacity: 0;
            position: relative;
            left: -15px;
            z-index: 2;
            cursor: pointer;
        }
        .user-rating span.star:before {
            color: #777777;
            content:"";
            /*padding-right: 5px;*/
        }
        .user-rating span.star {
            display: inline-block;
            font-family: FontAwesome;
            font-style: normal;
            font-weight: normal;
            position: relative;
            z-index: 1;
        }
        .user-rating span {
            margin-left: -15px;
        }
        .user-rating span.star:before {
            color: #777777;
            content:"\f006";
            /*padding-right: 5px;*/
        }
        .user-rating input:hover + span.star:before, .user-rating input:hover + span.star ~ span.star:before, .user-rating input:checked + span.star:before, .user-rating input:checked + span.star ~ span.star:before {
            color: #ffd100;
            content:"\f005";
        }

        .selected-rating{
            color: #ffd100;
            font-weight: bold;
            font-size: 3em;
        }
    </style>
    
</head>

<body>

<div id="wrapper">
    <form id="user-rating-form" onchange="ratingChange()">
        <span class="user-rating">
            <input type="radio" name="rating" value="5"><span class="star"></span>
            <input type="radio" name="rating" value="4"><span class="star"></span>
            <input type="radio" name="rating" value="3"><span class="star"></span>
            <input type="radio" name="rating" value="2"><span class="star"></span>
            <input type="radio" name="rating" value="1"><span class="star"></span>
        </span>
    </form>
</div>

<script>
        // initialise Field Extension 
        var extensionField;
        
        // Initialize and set the default or saved value for extension
        ContentstackUIExtension.init().then(function(extension) {
            // make extension object globally available
            extensionField = extension;
            // Get current Rating value from Contentstack and update the Rating element
            var initialValue = (extension && extension.field && extension.field.getData()) ? extension.field.getData() : 3;
            $("input[name='rating'][value="+initialValue+"]").attr('checked', true);
            extension.window.updateHeight();
            ratingChange();
        })
        
        // On Rating change event, pass new value to Contentstack
          function ratingChange(){
            var ratingval = parseInt($('[name="rating"]:checked').val());
            extensionField.field.setData(ratingval).then(function(){
    	    }).catch(function(error){
    	    })
        }
</script>

</body>
</html>