Sith/pedagogy/templates/pedagogy/starlist.jinja

<div>
    <style>
        .checked {
            color : orange;
        }
        .unchecked {
            color : gray;
        }
        .star input[type="radio"] {
            display : none;
        }
        .star {
            display: inline;
        }

    </style>

    {# Do not vote button #}
    <label class="star">
        <input type="radio" name="{{ widget.name }}" value="-1" onclick='
            var stars = document.getElementsByClassName("{{ widget.name }}");
            for (var i = 0; i < stars.length; i++){
                var attrs = stars[i].getAttribute("class");
                attrs = attrs.replace("unchecked", "");
                attrs = attrs.replace("checked", "");
                stars[i].setAttribute("class", attrs + " unchecked");
            }
        ' checked>
        <span class="fa fa-times-circle"> {{ translations.do_not_vote }}</span>
    </label>

    {# Star widget #}
    {% for i in number_of_stars %}
    <label class="star">
        <input type="radio" name="{{ widget.name }}" value="{{ forloop.counter0 }}" onclick='
            var stars = document.getElementsByClassName("{{ widget.name }}");

            for (var i = 0; i < stars.length; i++){
                var attrs = stars[i].getAttribute("class");
                attrs = attrs.replace("unchecked", "");
                attrs = attrs.replace("checked", "");
                if (i > {{ forloop.counter0 }}){
                    stars[i].setAttribute("class", attrs + " unchecked");
                } else {
                    stars[i].setAttribute("class", attrs + " checked");
                }
            }
        '>
        <i class="{{ widget.name }} fa fa-star unchecked"></i>
    </label>
    {% endfor %}

    {# Restaure previous (-1 is default) #}
    <script type="text/javascript">
        document.querySelector("input[name='{{ widget.name }}'][value='{{ widget.value }}']").click()
    </script>

</div>