-
Notifications
You must be signed in to change notification settings - Fork 2
/
Prueba.html
290 lines (280 loc) · 16.6 KB
/
Prueba.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
<!DOCTYPE html>
<html>
<head>
<title>¿Qué me ofreces?</title>
<link rel="stylesheet" href="Prueba.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet">
<meta name="Description" content="Agrupación de propuestas de candidatos a cargos públicos">
<meta name="Keywords" content="política, elecciones, votaciones, alcaldía">
<meta http-equiv=”Content-Language” content=”es”/>
<meta http-equiv="cache-control" content="no-cache"/>
<style></style>
</head>
<body>
<section>
<div class="page">
<div class="page__container">
<a href="#popup-article" class="open-popup">Test Alcaldia</a>
</div>
</div>
<div id="popup-article" class="popup" >
<div class="popup__block" >
<h1 class="popup__title">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit iusto expedita aspernatur facilis sit illum, cupiditate natus aliquid nobis reprehenderit sapiente, porro nostrum neque dolore tempora voluptas magni ducimus quos.</h1>
<h2>Seguridad</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi repudiandae reprehenderit ducimus deserunt rem? Voluptatum iusto exercitationem pariatur ea! Magni repudiandae, voluptates earum possimus voluptatem quod veritatis sit tenetur ipsum.</h3>
<div class="inputGroup">
<input id="radio1" name="preguntas1" type="radio" value="1"/>
<label for="radio1">Implementar un programa de prevención y resocialización enfocado en la atención de jóvenes en conflicto. Crear un servicio de mediación de conflictos y atención al ciudadano para que las comunidades para la resolución pacífica y eficaz sus problemas.</label>
</div><br>
<div class="inputGroup">
<input id="radio2" name="preguntas1" type="radio" value="2"/>
<label for="radio2">Crear programas sociales de becas educativas, deporte y cultura, que desincentive la implicación de los jóvenes en bandas criminales y facilite su acceso al mercado laboral.</label>
</div><br>
<div class="inputGroup">
<input id="radio3" name="preguntas1" type="radio" value="3"/>
<label for="radio3">Crear la Secretaría para la Seguridad Ciudadana, como un ente responsable de la seguridad de nuestra ciudad que sea consecuente con los proyectos y programas que garanticen mejorar los indicadores de homicidios, hurtos, atracos, violencia intrafamiliar, microtráfico y extorsión, entre otros.
</label>
</div><br>
<div class="inputGroup">
<input id="radio4" name="preguntas1" type="radio" value="4"/>
<label for="radio4">Reactivar el vecinalismo y nexos comunitarios para generar una red cívica de apoyo para la seguridad y convivencia. De esta manera, se podrá fortalecer y estimular la justicia comunitaria.</label>
</div>
<br>
<br>
<h2>Movilidad</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi repudiandae reprehenderit ducimus deserunt rem? Voluptatum iusto exercitationem pariatur ea! Magni repudiandae, voluptates earum possimus voluptatem quod veritatis sit tenetur ipsum.</h3>
<div class="inputGroup">
<input id="radio12" name="preguntas2" type="radio" value="1"/>
<label for="radio12">Implementar el proceso de modernización y reorganización del sistema de transporte público colectivo de Barranquilla y su Área Metropolitana con Transmetro en un solo sistema integrado (SITP), con el cual una persona se desplazará con una sola tarjeta y el costo del transbordo será a un bajo precio.</label>
</div><br>
<div class="inputGroup">
<input id="radio22" name="preguntas2" type="radio" value="2"/>
<label for="radio22">Reorganizará el mototaxismo en cooperativas que permitan vincularlos formalmente a sectores de las localidades donde no se preste el servicio público urbano, con la posibilidad de vincularlos como parte del SITM. </label>
</div><br>
<div class="inputGroup">
<input id="radio32" name="preguntas2" type="radio" value="3"/>
<label for="radio32">Para fortalecer el transporte público y masivo promoveremos el tranvía por la calle 30 hasta el aeropuerto mediante una APP que se integrará al sistema de transporte del Área Metropolitana, el cual contará con tres nuevas terminales públicas en las salidas de Barranquilla hacia los municipios.</label>
</div><br>
<div class="inputGroup">
<input id="radio42" name="preguntas2" type="radio" value="4"/>
<label for="radio42">Dar una oportunidad al infractor, y otorgar perdón, por una sola vez, de comparendos y multas a quienes demuestren que su subsistencia depende de su vehículo y puedan compensar la infracción con formación académica y/o trabajo social. </label>
</div>
<br>
<br>
<h2>Educación</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi repudiandae reprehenderit ducimus deserunt rem? Voluptatum iusto exercitationem pariatur ea! Magni repudiandae, voluptates earum possimus voluptatem quod veritatis sit tenetur ipsum.</h3>
<div class="inputGroup">
<input id="radio13" name="preguntas3" type="radio" value="1"/>
<label for="radio13">Hacer una alianza con la Universidad del Sur del Atlántico y con las 12 sedes del Sena que tienen cupo para 10 mil jóvenes al año y la sede del Itsa en Barranquilla con una capacidad para 7 mil jóvenes.</label>
</div><br>
<div class="inputGroup">
<input id="radio23" name="preguntas3" type="radio" value="2"/>
<label for="radio23">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum hic in ducimus impedit, reprehenderit quaerat mollitia dicta debitis numquam alias explicabo eaque quos iure ipsum veniam molestias, iste asperiores accusantium.</label>
</div><br>
<div class="inputGroup">
<input id="radio33" name="preguntas3" type="radio" value="3"/>
<label for="radio33">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum hic in ducimus impedit, reprehenderit quaerat mollitia dicta debitis numquam alias explicabo eaque quos iure ipsum veniam molestias, iste asperiores accusantium.</label>
</div><br>
<div class="inputGroup">
<input id="radio43" name="preguntas3" type="radio" value="4"/>
<label for="radio43">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum hic in ducimus impedit, reprehenderit quaerat mollitia dicta debitis numquam alias explicabo eaque quos iure ipsum veniam molestias, iste asperiores accusantium.</label>
</div>
<br>
<br>
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt fugiat asperiores perspiciatis vel impedit nostrum dolor ab neque odit, repellat debitis ducimus dignissimos amet ad iste consequatur voluptate voluptatem sed?</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi repudiandae reprehenderit ducimus deserunt rem? Voluptatum iusto exercitationem pariatur ea! Magni repudiandae, voluptates earum possimus voluptatem quod veritatis sit tenetur ipsum.</h3>
<div class="inputGroup">
<input id="radio14" name="preguntas4" type="radio" value="1"/>
<label for="radio14">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam libero aliquam, ab quos eveniet suscipit cumque vitae laudantium optio consectetur dolore aspernatur iste quidem perferendis eum architecto nulla molestias laborum?</label>
</div><br>
<div class="inputGroup">
<input id="radio24" name="preguntas4" type="radio" value="2"/>
<label for="radio24">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum hic in ducimus impedit, reprehenderit quaerat mollitia dicta debitis numquam alias explicabo eaque quos iure ipsum veniam molestias, iste asperiores accusantium.</label>
</div><br>
<div class="inputGroup">
<input id="radio34" name="preguntas4" type="radio" value="3"/>
<label for="radio34">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum hic in ducimus impedit, reprehenderit quaerat mollitia dicta debitis numquam alias explicabo eaque quos iure ipsum veniam molestias, iste asperiores accusantium.</label>
</div><br>
<div class="inputGroup">
<input id="radio44" name="preguntas4" type="radio" value="4"/>
<label for="radio44">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum hic in ducimus impedit, reprehenderit quaerat mollitia dicta debitis numquam alias explicabo eaque quos iure ipsum veniam molestias, iste asperiores accusantium.</label>
</div>
<br>
<br>
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt fugiat asperiores perspiciatis vel impedit nostrum dolor ab neque odit, repellat debitis ducimus dignissimos amet ad iste consequatur voluptate voluptatem sed?</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi repudiandae reprehenderit ducimus deserunt rem? Voluptatum iusto exercitationem pariatur ea! Magni repudiandae, voluptates earum possimus voluptatem quod veritatis sit tenetur ipsum.</h3>
<div class="inputGroup">
<input id="radio15" name="preguntas5" type="radio" value="1"/>
<label for="radio15">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam libero aliquam, ab quos eveniet suscipit cumque vitae laudantium optio consectetur dolore aspernatur iste quidem perferendis eum architecto nulla molestias laborum?</label>
</div><br>
<div class="inputGroup">
<input id="radio25" name="preguntas5" type="radio" value="2"/>
<label for="radio25">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum hic in ducimus impedit, reprehenderit quaerat mollitia dicta debitis numquam alias explicabo eaque quos iure ipsum veniam molestias, iste asperiores accusantium.</label>
</div><br>
<div class="inputGroup">
<input id="radio35" name="preguntas5" type="radio" value="3"/>
<label for="radio35">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum hic in ducimus impedit, reprehenderit quaerat mollitia dicta debitis numquam alias explicabo eaque quos iure ipsum veniam molestias, iste asperiores accusantium.</label>
</div><br>
<div class="inputGroup">
<input id="radio45" name="preguntas5" type="radio" value="4"/>
<label for="radio45">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum hic in ducimus impedit, reprehenderit quaerat mollitia dicta debitis numquam alias explicabo eaque quos iure ipsum veniam molestias, iste asperiores accusantium.</label>
</div>
<br>
<button class="button pluse" onclick="displayRadioValue()">Guadar</button>
<br>
<div class="candidatos" style="margin-left: 6%">
<figure class="snip1566">
<img src="pumarejo.jpg" alt="sq-sample14" />
<figcaption>
<i >
<p style="margin-top: 20%;margin-bottom: 0%">Jaime Pumarejo</p>
<p style="margin-top: 0%;font-size: 20px">Cambio Radical</p>
<p id="Form1" style="font-size: 40px"></p>
</i>
</figcaption>
</figure>
<figure class="snip1566 "><img src="diogenes.jpg" alt="sq-sample17" />
<figcaption>
<i >
<p style="margin-top: 20%;margin-bottom: 0%">Diógenes Rosero</p>
<p style="margin-top: 0%;font-size: 20px">Partido Verde</p>
<p id="Form2" style="font-size: 40px"></p>
</i>
</figcaption>
</figure>
<figure class="snip1566"><img src="sanchez.jpg" alt="sq-sample19" />
<figcaption><i >
<p style="margin-top: 20%;margin-bottom: 0%">Rafael Sánchez</p>
<p style="margin-top: 0%;font-size: 20px">ASI</p>
<p id="Form3" style="font-size: 40px"></p>
</i></figcaption>
</figure>
<figure class="snip1566"><img src="bohorquez.jpg" alt="sq-sample20" />
<figcaption><i >
<p style="margin-top: 20%;margin-bottom: 0%">Antonio Bohórquez</p>
<p style="margin-top: 0%;font-size: 20px">Polo Democrático</p>
<p id="Form4" style="font-size: 40px"></p>
</i></figcaption>
</figure>
</div>
<a href="#" class="popup__close">close</a>
<div style="max-width: 600px; margin: 24px auto;">
</section>
<script>
function displayRadioValue() {
var ele = document.getElementsByName('preguntas1');
var ele1 = document.getElementsByName('preguntas2');
var ele2 = document.getElementsByName('preguntas3');
var ele3 = document.getElementsByName('preguntas4');
var ele4 = document.getElementsByName('preguntas5');
var C1=0;
var C2=0;
var C3=0;
var C4=0;
var valor;
for(i = 0; i < ele.length; i++) {
if(ele[i].checked){
switch (i) {
case 0:
C1++;
break;
case 1:
C2++;
break;
case 2:
C3++;
break;
case 3:
C4++;
break;
default:
break;
}
}
if(ele1[i].checked){
switch (i) {
case 0:
C1++;
break;
case 1:
C2++;
break;
case 2:
C3++;
break;
case 3:
C4++;
break;
default:
break;
}
}
if(ele2[i].checked){
switch (i) {
case 0:
C1++;
break;
case 1:
C2++;
break;
case 2:
C3++;
break;
case 3:
C4++;
break;
default:
break;
}
}
if(ele3[i].checked){
switch (i) {
case 0:
C1++;
break;
case 1:
C2++;
break;
case 2:
C3++;
break;
case 3:
C4++;
break;
default:
break;
}
}
if(ele4[i].checked){
switch (i) {
case 0:
C1++;
break;
case 1:
C2++;
break;
case 2:
C3++;
break;
case 3:
C4++;
break;
default:
break;
}
}
}
//document.getElementById("Resil").innerText = ((C1/5)*100)+"%";
document.getElementById("Form1").innerText = ((C1/5)*100)+"%";
document.getElementById("Form2").innerText = ((C2/5)*100)+"%";
document.getElementById("Form3").innerText = ((C3/5)*100)+"%";
document.getElementById("Form4").innerText = ((C4/5)*100)+"%";
}
$(".hover").mouseleave(
function () {
$(this).removeClass("hover");
}
);
</script>
</body>
</html>