SIA Web Design Library

Stat: Likert

No notes defined.

<figure class='c-stat c-stat--rating c-stat--likert'>
    <span class='c-stat__text'>
        <span class='c-stat__figure'>
            <span class='c-stat__number 
                     c-stat__number--active  
                     
                        c-stat__number--negative 
                        c-stat__number--negative--100
                     
                    '><span class='c-stat__number__wrapper'>Very bad</span></span>
            <span class='c-stat__number 
                     
                     
                        c-stat__number--negative 
                        c-stat__number--negative--50
                     
                    ' aria-hidden='true'><span class='c-stat__number__wrapper'>Bad</span></span>
            <span class='c-stat__number 
                     
                     
                    ' aria-hidden='true'><span class='c-stat__number__wrapper'>Neutral</span></span>
            <span class='c-stat__number 
                     
                     
                     
                        c-stat__number--positive 
                        c-stat__number--positive--50
                    ' aria-hidden='true'><span class='c-stat__number__wrapper'>Good</span></span>
            <span class='c-stat__number 
                     
                     
                     
                        c-stat__number--positive 
                        c-stat__number--positive--100
                    ' aria-hidden='true'><span class='c-stat__number__wrapper'>Very good</span></span>
        </span>
        <figcaption class='c-stat__caption'>
            <strong class='c-stat__highlight'>Overall Rating</strong>
            <span class='c-stat__detail'>How was the meeting overall? (i.e. usefulness, flow, outcomes)</span>
        </figcaption>
    </span>
</figure>
 
<figure class='{{ get_component_class( 'stat', display ) }}'>
    <span class='c-stat__text'>
        <span class='c-stat__figure'>
            {% for key, value in scale %}
                <span class='c-stat__number 
                    {% if key == figure %} c-stat__number--active {% endif %} 
                    {% if key < neutral %} 
                        c-stat__number--negative 
                        c-stat__number--negative--{{ 100 / key }}
                    {% endif %} 
                    {% if key > neutral %} 
                        c-stat__number--positive 
                        c-stat__number--positive--{{ 100 / ( max + 1 - key ) }}
                    {% endif %}' 
                    {% if key != figure %} aria-hidden='true' {% endif %}><span class='c-stat__number__wrapper'>{{ value }}</span></span>
            {% endfor %}
        </span>
        <figcaption class='c-stat__caption'>
            <strong class='c-stat__highlight'>{{ caption | raw }}</strong>
            {% if detail %}
                <span class='c-stat__detail'>{{ detail | raw }}</span>
            {% endif %}
        </figcaption>
    </span>
</figure>
 
{
  "figure": 1,
  "suffix": null,
  "caption": "Overall Rating",
  "detail": "How was the meeting overall? (i.e. usefulness, flow, outcomes)",
  "display": {
    "modifiers": [
      "rating",
      "likert"
    ]
  },
  "max": 5,
  "literal": "Very bad",
  "neutral": 3,
  "scale": {
    "1": "Very bad",
    "2": "Bad",
    "3": "Neutral",
    "4": "Good",
    "5": "Very good"
  }
}