JSFiddle - React, Tailwind, and code Playground

by peterbenoit

HTML

<script src="http://www.cdc.gov/primarycare/js/math.uuid.js"></script>
<script src="http://www.cdc.gov/primarycare/js/gov.hhs.cdc.cs.ratings.ext.js"></script>
<script src="http://www.cdc.gov/primarycare/js/jquery.cookie.js"></script>
<link rel="stylesheet" href="http://www.cdc.gov/primarycare/local/b/css/csratings.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">
<h5 style="margin-bottom:5px;">Click to rate these materials</h5><div class="ratingBlock" itemurl="http://www.cdc.gov/primarycare/materials/medication/index.html"><!-- --></div>

CSS

.cs-ratings {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.ratings {
    display:none;
}
.ratings ul {
    list-style-type: none
}
.ratings li {
    line-height: 40px;
    border-bottom: 1px solid silver;
}
.star {
    background-image: url('http://www.cdc.gov/primarycare/images/5stars.png');
    height: 18px; 
    display:inline-block;
}

.five {
    width: 100px;
}
.four {
    width:80px;
}
.three {
    width:60px;
}
.two {
    width:40px;
}
.one {
    width:20px;
}


@media (max-width: 400px) {
    .ratings {
        display:block;
}

JavaScript

$(".ratingBlock").each(function () {
    $(this).csRatings({                    
        appID: 'DAE5A5C5-C3C5-4EB8-B24D-FEBE0C4A55D6',
        restfulServiceUrl: 'http://tools.cdc.gov/RatingFeedbackService.svc/rest/',
        ratingMechanismId: 1
    });
});
    
var intervalId = window.setInterval(
function () {
    if ($.fn.csRatings != 'undefined') {  
        clearInterval(intervalId);
        $('.ratingContainer').after('<div>...</div><div class="ratings"><ul><li ratingvalue="5"><span class="five star"></span> 5 star</li><li ratingvalue="4"><span class="four star"></span> 4 star</li><li ratingvalue="3"><span class="three star"></span> 3 star</li><li ratingvalue="2"><span class="two star"></span> 2 star</li><li ratingvalue="1"><span class="one star"></span> 1 star</li></div>');
        $('.ratingContainer li').on('click', function(){
            submitRating($(this).attr('ratingvalue'));
        });
    }
}, 100);


var submitRating = function(rating) {

$.getJSON(                        
                    'http://tools.cdc.gov/RatingFeedbackService.svc/rest/RecordFeedbackforUrl?method=?',
                    {        
                        url: 'http://www.cdc.gov/primarycare/materials/medication/index.html',
                        feedbackvalue: rating,
                        comment: '',
                        feedbackmechanismid: '1',
                        feedbackvalueid: '',
                        applicationid: 'DAE5A5C5-C3C5-4EB8-B24D-FEBE0C4A55D6',
                        userid: Math.uuid()
                    }
                )
            .success(function (response) 
                    {         
                        console.log(response);                            
                    }
                )
            .error(function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            });

}