{% extends "base.html" %}
{% load opros_tags %}
{#{% block content-aside %}#}
{#<aside class=""><ins></ins><p>#}
{#Пожалуйста, поставь свою отметку передвинув мышью ползунок в нужное положение (от 1 до 5).#}
{#Значения ответов показаны для наглядности под ползунком</p>#}
{#</aside>#}
{#{% endblock %}#}
{% block content-article %}
<style>
.opros-c {
display: none;
}
.opros-a select {
display: none;
}
.slider-value {
height: 20px;
}
.opros-item {
display: none;
}
</style>
<article class="clearfix"><ins></ins>
<form action="" method="post">
<ul class="oprosnik">
{% for form in formset %}
{# <li class="opros-item q-{{ forloop.counter }}">#}
{# {{ form.errors }}#}
{# <p class="opros-q">{% show_question form.question.value opros %}</p>#}
{# <div class="opros-a">#}
{# <p class="slider"></p>#}
{# <p class="slider-value"></p>#}
{# {{ form.value }}#}
{# </div>#}
{# <p class="opros-c">Если ты у тебя есть комментарий - оставь его в форме ниже.</p>#}
{# <p class="opros-c">{{ form.comment }}</p>#}
{# {{ form.question }}#}
{# </li>#}
<li class="opros-item q-{{ forloop.counter }}">
{% show_question form.question.value opros %}<br/>
{% for i in form%}
{{ i.value }} <br/>
{% endfor %}
{{ form.comment }}
</li>
{% endfor %}
</ul>
<p class="buttons-holder">
<button type="button" id="next_btn" class="success">Следующий вопрос</button>
<button type="submit" id="submit_btn" class="success">Готово</button>
{% csrf_token %}
{{ formset.management_form }}
</p>
</form>
</article>
{% endblock %}
{% block scripts %}
<script>
var current_form = 1,
has_answer = false;
function hide_comments($el) {
var $div = $el.parent();
$div.parent().find('.opros-c').show();
$div.find('.slider-value').html($div.find('select option:checked').html());
}
function test_answer() {
var answer = parseInt($('.q-'+ current_form +' select').val());
return has_answer;
}
$(function() {
$('.opros-a select').change(function(){
hide_comments($(this));
});
$( ".opros-a .slider").slider({
min: 1,
max: 5,
step: 1,
slide: function( event, ui ) {
var $div = $(event.target).parent();
$div.find('select').val( ui.value );
hide_comments($div.find('select'));
},
change: function() {
has_answer = true;
}
});
$('.opros-a select').each(function(){
hide_comments($(this));
$(this).parent().find('.slider').slider("value", $(this).val());
});
$('.q-' + current_form).show();
$('#submit_btn').hide();
$('#next_btn').click(function(){
if (test_answer()){
$('.q-' + current_form).hide();
current_form++;
has_answer = false;
$('.q-' + current_form).show();
if (current_form == parseInt($('#id_answers-TOTAL_FORMS').val())) {
$('#next_btn').hide();
$('#submit_btn').show();
}
} else {
}
});
$('#submit_btn').click(function(){
if (!test_answer()){
return false;
}
})
})
</script>
{% endblock %}