1 | {% extends 'consulta.base.html' %} |
---|
2 | {% load staticfiles %} |
---|
3 | {% block title %}Participar en Consulta{% endblock %} |
---|
4 | {% block contenido %} |
---|
5 | <h1 class="text-center">Objetivo # {{id_objetivo}}</h1><hr> |
---|
6 | <h4 class="text-justify"> |
---|
7 | {{objetivo}} |
---|
8 | </h4> |
---|
9 | <button class="btn btn-primary btn-lg center-block" data-toggle="modal" data-target="#consultaModal"> Participar en la consulta </button> |
---|
10 | |
---|
11 | <div class="modal fade" id="consultaModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> |
---|
12 | <div class="modal-content"> |
---|
13 | <div class="modal-header"> |
---|
14 | <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> |
---|
15 | <h4 class="modal-title" id="myModalLabel"> Consulta </h4> |
---|
16 | </div> |
---|
17 | <div class="modal-body"> |
---|
18 | <form action="" role="form" class="form form-horizontal validate-form" method="post" autocomplete="off" id="encuesta_form"> |
---|
19 | {% csrf_token %} |
---|
20 | <div class="row text-center"> |
---|
21 | <h1>Consulta</h1><hr> |
---|
22 | <div class="row center-block" style="width: 90%"> |
---|
23 | <div class="progress non-null" role="progressbar" id="status" > |
---|
24 | <div class="progress-bar progress-bar active" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"> |
---|
25 | <div class="bar" style="width:100%"><span style="color:black;">Progreso</span></div> |
---|
26 | </div> |
---|
27 | </div> |
---|
28 | </div> |
---|
29 | <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false"> |
---|
30 | <!-- Indicators --> |
---|
31 | <ol class="carousel-indicators"> |
---|
32 | {% for key, value in preguntas.items %} |
---|
33 | <li data-target="#myCarousel" class="{% if forloop.counter0 == 0 %}active{%endif%}"></li> |
---|
34 | {% endfor %} |
---|
35 | <li data-target="#myCarousel"></li> |
---|
36 | </ol> |
---|
37 | |
---|
38 | <!-- Wrapper for slides --> |
---|
39 | <div class="carousel-inner" role="listbox"> |
---|
40 | {% for key, value in preguntas.items %} |
---|
41 | <div class="col-md-6 col-sm-6 col-xs-6 col-xs-offset-3 col-md-offset-3 col-sm-offset-3 item {% if forloop.counter == 1 %}active{% endif %}"> |
---|
42 | <div class="row"> |
---|
43 | <label class="control-label"> |
---|
44 | {{ value.label | safe }} |
---|
45 | </label> |
---|
46 | </div> |
---|
47 | <div class="row"> |
---|
48 | {{ value.field | safe }} |
---|
49 | </div> |
---|
50 | </div> |
---|
51 | {% endfor %} |
---|
52 | <div class="col-md-6 col-sm-6 col-xs-6 col-xs-offset-3 col-md-offset-3 col-sm-offset-3 item"> |
---|
53 | <div class="row"> |
---|
54 | <button type="submit" onclick="send_poll(event);" class="btn btn-success"> |
---|
55 | Registrar Participación |
---|
56 | </button> |
---|
57 | </div> |
---|
58 | </div> |
---|
59 | </div> |
---|
60 | |
---|
61 | |
---|
62 | <!-- Left and right controls --> |
---|
63 | <a class="left carousel-control" href="#myCarousel" role="button" onclick="go_back();"> |
---|
64 | <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> |
---|
65 | <span class="sr-only">Anterior</span> |
---|
66 | </a> |
---|
67 | <a class="right carousel-control" href="#myCarousel" role="button" onclick="control_progress();"> |
---|
68 | <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> |
---|
69 | <span class="sr-only">Siguiente</span> |
---|
70 | </a> |
---|
71 | </div> |
---|
72 | </div> |
---|
73 | </form> |
---|
74 | <div class="modal-footer"> |
---|
75 | <a type="button" class="btn btn-info pull-left" href="{% url 'participacion_index' %}">Regresar</a> |
---|
76 | </div> |
---|
77 | </div> |
---|
78 | </div><!-- /.modal-content --> |
---|
79 | </div><!-- /.modal --> |
---|
80 | {% endblock %} |
---|
81 | {% block extraJs %} |
---|
82 | <script src="{% static "js/attrchange.js" %}"></script> |
---|
83 | <script> |
---|
84 | $(document).ready(function(){ |
---|
85 | $('.icheck').each(function(){ |
---|
86 | var self = $(this); |
---|
87 | label = self.prev(), |
---|
88 | label_text = label.text(); |
---|
89 | |
---|
90 | label.remove(); |
---|
91 | self.iCheck({ |
---|
92 | checkboxClass: 'icheckbox_line-blue', |
---|
93 | radioClass: 'iradio_line-blue', |
---|
94 | insert: '<div class="icheck_line-icon"></div>' + label_text |
---|
95 | }); |
---|
96 | }); |
---|
97 | |
---|
98 | // Se chequea el campo de |
---|
99 | $('.iradio_line-blue').attrchange({ |
---|
100 | trackValues: true, // set to true so that the event object is updated with old & new values |
---|
101 | callback: function(evnt) { |
---|
102 | if(evnt.attributeName == "class") { // which attribute you want to watch for changes |
---|
103 | if(evnt.newValue.search("checked") != -1) { // "open" is the class name you search for inside "class" attribute |
---|
104 | var padre = $(this).parent(); |
---|
105 | var just = padre.find('textarea'); |
---|
106 | if (just.length != 0) { |
---|
107 | var option = padre.find('.checked').find('input'); |
---|
108 | if (option.val() == "No") { |
---|
109 | $('#div_justificar_'+option.attr('id')).show(); |
---|
110 | } |
---|
111 | else{ |
---|
112 | $('#div_justificar_'+option.attr('id')).hide(); |
---|
113 | } |
---|
114 | } |
---|
115 | } |
---|
116 | } |
---|
117 | } |
---|
118 | }); |
---|
119 | }); |
---|
120 | </script> |
---|
121 | {% endblock %} |
---|