Power Pages Content Snippet: 5 Star Rating

What is this?

This is a content snippet allows for the easy implementation of a 5 star rating display on their power pages. It can display an integer value from 0 to 5 in the form of stars.

To use this content snippet you will need to write a small bit of liquid syntax, a very handy language that can surface Dataverse data on your power pages.

                <h3>Quality Rating</h3>
                {% if deliverableAssignment.str_showqualityratingonportal %}

                <p>Your quality rating for this deliverable is: </p>
                <h3>Quality of Contents</h3>
                {% include 'snippet' snippet_name:'StarRating' rating: deliverableAssignment.ciarank_qualityofcontents %}

                <h3>Balance in reporting</h3>
                {% include 'snippet' snippet_name:'StarRating' rating: {{deliverableAssignment.ciarank_balanceinreporting}} %}

                <h3>Style and presentation</h3>
                {% include 'snippet' snippet_name:'StarRating' rating: {{deliverableAssignment.ciarank_styleandpresentation}} %}

                <h3>Excellent command of English</h3>
                {% include 'snippet' snippet_name:'StarRating' rating: {{deliverableAssignment.ciarank_excellentcommandofenglish}} %}

                <h3>Timely delivery and responsiveness</h3>
                {% include 'snippet' snippet_name:'StarRating' rating: {{deliverableAssignment.ciarank_timelydeliveryandresponsiveness}} %}

                <h3>Reviewer Comments</h3>
                {{ deliverableAssignment.ciarank_reviewercomments}}

                {% else %}

                <p>The quality assessment has not yet been published for this deliverable.</p>
                {% end

<style>
.checked {
  color: orange;
}
</style>

<span class="fa fa-star {% if rating >= 1 %} checked {% endif %}"></span>
<span class="fa fa-star {% if rating >= 2 %} checked {% endif %}"></span>
<span class="fa fa-star {% if rating >= 3 %} checked {% endif %}"></span>
<span class="fa fa-star {% if rating >= 4 %} checked {% endif %}"></span>
<span class="fa fa-star {% if rating >= 5 %} checked {% endif %}"></span>