Content Rating

v0.0.0

The Content Rating component allows visitor to rate content (be it a post, podcast or video) in several, predefined, categories.

For instance, a visitor can find an article relevant and informative but not reassuring.

In the example, the last button is rendered as an previously rated item. The button has a css class .active and the disabled attribute is set. The data attribute data-endpoint is just an example, see the javascript section.

<!-- Content Rating  -->
<div class="vi-content-rating">
  <ul class="vi-content-rating__list">
    <div class="vi-content-rating__item">
      <!-- Button type: outline  -->
      <button data-endpoint="/api/article/42/vote?type=informative&amp;anonymous_user_id=123xyz" type="button" class="flex-grow-1 vi-btn-outline vi-btn-outline--no-pointer vi-btn"><span aria-label="Informative has 22 ratings" class="vi-content-rating__button-content" data-aria-label="Thanks for voting" role="status">
          <span class="vi-content-rating__label">Informative</span>
          <span class="vi-content-rating__value">22</span>
        </span></button>
    </div>
    <div class="vi-content-rating__item">
      <!-- Button type: outline  -->
      <button data-endpoint="/api/article/42/vote?type=reassuring&amp;anonymous_user_id=123xyz" type="button" class="flex-grow-1 vi-btn-outline vi-btn-outline--no-pointer vi-btn"><span aria-label="Reassuring has 50 ratings" class="vi-content-rating__button-content" data-aria-label="Thanks for voting" role="status">
          <span class="vi-content-rating__label">Reassuring</span>
          <span class="vi-content-rating__value">50</span>
        </span></button>
    </div>
    <div class="vi-content-rating__item">
      <!-- Button type: outline  -->
      <button data-endpoint="/api/article/42/vote?type=relevant&amp;anonymous_user_id=123xyz" type="button" class="flex-grow-1 vi-btn-outline vi-btn-outline--no-pointer vi-btn"><span aria-label="Relevant has 8 ratings" class="vi-content-rating__button-content" data-aria-label="Thanks for voting" role="status">
          <span class="vi-content-rating__label">Relevant</span>
          <span class="vi-content-rating__value">8</span>
        </span></button>
    </div>
  </ul>
</div>

Javascript #

When a button is clicked, it will trigger the rate event on .vi-content-rating.

The callback receives two parameters:

Event Object
Object with all the data- attributes of the clicked button.

<script>
  // Please check your console.
  $('.vi-content-rating').on('rate', function(e, data) {
    console.log('rate!', data.endpoint)
  })
</script>

Stylesheets #

The following stylesheets are required to display this component.

JavaScript #

The following javascript is required to display this component.

Download Content Rating JavaScript

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Changed

  19 Mar 2024 - Updated content rating show single digits instead of ‘00’ format.
  Removed disabling of the button so that the user can opt out to ‘rating’ content.
  Accessibility: data-aria-label="..." added to button contents.
  Accessibility: aria-label="..." added to button contents.
  Accessibility: role="status" added to button contents.


Fix

  Regression related to ‘Wrap long words’ issue core.
  IE11 not understanding specifications.


Added

  RTL support
  Initial draft