Sith/pedagogy/templates/pedagogy/starlist.jinja

58 lines
1.9 KiB
Django/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>