-
Notifications
You must be signed in to change notification settings - Fork 0
/
plantilla_03.html
184 lines (139 loc) · 8.03 KB
/
plantilla_03.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Plantilla con control de audio</title>
<link rel="stylesheet" href="assets/css/reveal.css">
<link rel="stylesheet" href="assets/css/plantilla_02.css">
<script src='assets/js/jquery.min.js'></script>
</head>
<body>
<div class="audio">
<audio id="entrevista" controls="controls">
<source src="assets/audios/audioslide_craft_espanol.wav" type="audio/wav">
</audio>
</div>
<div class="reveal">
<div class="slides">
<section class="slide-aligned-left" data-background-image="file:///Users/MariaCamilaMontatnez/Documents/craftii/repos/cuny17/audio/bianca/ejercicios/parte_2/plantillas/assets/images/bianca.jpg">
<h1>Sufrir en <br>Silencio</h1>
<p class=intro>“Sabes, hablas de la salud mental y muchas veces es como <br> si estuvieras usando malas palabras.<br></p>
<a href="#" class="navigate-next" id="comenzar">Comenzar</a>
</section>
<!-- Cada slide se cambia automáticamente utilizando segundos, en el siguiente caso, 5 segundos (expresado 5000 milisegundos) -->
<section class="slide-aligned-center">
<h2>No fue nada premeditado. No me desperté ese día sabiendo que iba a intentar suicidarme. </h2>
</section>
<section class="slide-aligned-center">
<p>This is Bianca Mercado. She was born in the Bronx, New York when her mom was 16 years old and her dad 15. Her family is from Puerto Rico. </p>
</section>
<section class="slide-aligned-center">
<p>She is one of the many teenage Latinas who have attempted to commit suicide.</p>
</section>
<section class="slide-aligned-center">
<h2>She is now 28 years old and finally is willing to share her experience.</h2>
</section>
<section class="slide-aligned-center">
<h2>yo pienso que en tu mente de nina, tomas una pastilla y asumes que algo va a pasar. </h2>
</section>
<section class="slide-aligned-center">
<p>Creo que pasó un tiempo y todavia no sentia nada entonces tome mas pastillas y cuando menos lo pensé, me las había tomado todas. </p>
</section>
<section class="slide-aligned-center">
<p></p>
</section>
<section class="slide-aligned-center">
<p>The issues began because Bianca and her stepfather did not get along. She felt rejected by him and his family. They criticize her because she was the only Mercado in the Gonzalez family</p>
</section>
<section class="slide-aligned-center">
<p></p>
</section>
<section class="slide-aligned-center">
<p>Creo que una de las cosas que me provocó hacerlo fue como la familia de mi padrastro se burlaba de mi.</p>
</section>
<section class="slide-aligned-center">
<p>Solo recuerdo ir al baño y yo ya estaba vomitando. Estaba vomitando de color fosforescente. Y estaba vomitando profusamente.</p>
</section>
<section class="slide-aligned-center">
<p>Estaba vomitando mucho...ya la manera de que trataron de salvar la situación fue dándome carbón.</p>
</section>
<section class="slide-aligned-center">
<h2> Entonces tomé carbón y recuerdo lo difícil que era tragarmelo por lo espeso y arenoso que se sentía para que absorbiera las drogas que estaban en mi el torrente sanguíneo. </h2>
</section>
<section class="slide-aligned-center">
<p>La ironía, en retrospectiva, fue que las pastillas eran para quitar el dolor. Y en muchos sentidos, eso es exactamente lo que trate de hacer.</p>
</section>
<section class="slide-aligned-center">
<p></p>
</section>
<section class="slide-aligned-center">
<p> When she left the hospital, she went to psychiatric clinic. She stayed there for a few months with other teenagers who were going through similar situations.</p>
</section>
<section class="slide-aligned-center">
<p> She could not walk for a while. Bianca says it took her time to talk with the psychologists about her issues.</p>
</section>
<section class="slide-aligned-center">
<p>It was her first time expressing everything she had inside. </p>
</section>
<section class="slide-aligned-center">
<h2>Sabes, hablas de la salud mental y muchas veces es como si estuvieras usando malas palabras.</h2>
</section>
</div>
</div>
<script src="assets/js/head.min.js"></script>
<script src="assets/js/reveal.js"></script>
<script>
$(document).ready(function() {
// Array para guardar el tiempo en el momento que cambiamos cada slide.
// Cada valor en el array esta expresado en segundos acumulados.
var tiempoTransicion = [6,14,18,22,29,40,44,55,59,73,80,90,102,113,117,123,130,136];
// Posición del array tiempoTransicion
var marcaActual = 0;
// Selecciono el objeto de audio.
var entrevista = $('#entrevista');
// Extraigo la duración.
var duracion = entrevista.prop('duration');
// Extraigo la posición actual del audio.
var posicion = entrevista.prop('currentTime');
// Inicio haciendo click en el botón comenzar, para darle "Play" al audio. El slide se ejecuta vía Reveal.js, class="navigate-next"
$('#comenzar').on('click', function() {
entrevista.trigger('play');
});
// Listener o evento que detecta si hubo un cambio en slide.
Reveal.addEventListener( 'slidechanged', function(event, setTime) {
// Si accidentalmente me cambio de slide sin usar el botón comenzar, entonces ejecuto el audio.
// Caso contrario, pongo el audio en pausa y lo vuelvo a cero.
if (Reveal.getState().indexh === 0) {
entrevista.trigger('pause');
entrevista.prop('currentTime',0);
} else {
entrevista.trigger('play');
}
});
// Función para ejecutar siguiende slide.
function cambiarSlide() {
Reveal.next();
marcaActual += 1;
}
// Listener o evento que extrae el tiempo actual del audio.
// Sin función actualmente.
entrevista.on('timeupdate', function() {
posicion = entrevista.prop('currentTime');
if (posicion > 0 && posicion >= tiempoTransicion[marcaActual]) {
cambiarSlide();
}
});
});
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
history: false,
controls: false,
center: true,
progress: false,
width: "100%",
height: "100%"
});
</script>
</body>
</html>