extends base html load opros_tags block content-aside aside class ins

{% 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 %}