-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
710 lines (591 loc) · 32.6 KB
/
index.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
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
<!DOCTYPE HTML>
<html>
<head>
<title> HMB420 Project</title>
<meta charset="UTF-8">
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./js/app.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
<script src="./js/parallax.min.js"></script>
<script src="./js/jquery.stellar.min.js"></script>
<link href="./js/jsmaps.css" rel="stylesheet" type="text/css" />
<script src="./js/jsmaps-libs.js" type="text/javascript"></script>
<script src="./js/jsmaps-panzoom.js"></script>
<script src="./js/jsmaps.min.js" type="text/javascript"></script>
<script src="./js/canada.js" type="text/javascript"></script>
<link rel="shortcut icon" type="image/png" href="./images/favicon.png"/>
</head>
<body>
<section id="slide-1">
<img src="./images/alcohol.svg" id="mouse">
<div class="title">
<img src="./images/fronttitle.svg" id="fronttitle">
</div>
</section>
<section id="slide-2" class="parallax-window" data-parallax="scroll" data-image-src="./images/neuron.png">
<body>
<div id="m1"></div>
<div id="m2"></div>
<div id="m3"></div>
</body>
<h4> Wanna see what happens when you start drinking now?</h4>
</section>
<section id="slide-3" class="parallax-window2" data-parallax="scroll" data-image-src="./images/back.png">
<div class="row">
<div class="col-xs-4">
<h1>Let the drinking games begin!</h1>
<h5>Click on the drink to take the teen mouse to a fun week of binge drinking!</h5>
</div>
<div class="col-xs-4">
<div class="button"><img src="./images/alcclick.svg"></div>
</div>
<div class="col-xs-4">
<div id="after-drink">
<h5>What happens to you on Saturday?</h5>
<h5>You may have a hangover but you will recover fast because you are young, but does that make you resilent?</h5>
</div>
</div>
</div>
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">Sunday</div>
<div class="divTableCell">Monday</div>
<div class="divTableCell">Tuesday</div>
<div class="divTableCell">Wedneday</div>
<div class="divTableCell">Thursday</div>
<div class="divTableCell">Friday</div>
<div class="divTableCell">Saturday</div>
</div>
<div class="divTableRow">
<div class="divTableCell cell">
<img src="./images/alcoholday.svg" class="alco full" id="alc1">
<img src="./images/alcoholdaydone.svg" class="alco done" id="alc12">
<img src="./images/childmouse.svg" class="active child-mouse kid-mice" id="mice1">
</div>
<div class="divTableCell cell">
<img src="./images/alcoholday.svg" class="alco full" id="alc2">
<img src="./images/alcoholdaydone.svg" class="alco done" id="alc22">
<img src="./images/childmouse.svg" class="child-mouse kid-mice" id="mice2">
</div>
<div class="divTableCell cell"> </div>
<div class="divTableCell cell"> </div>
<div class="divTableCell cell">
<img src="./images/alcoholday.svg" class="alco full" id="alc3">
<img src="./images/alcoholdaydone.svg" class="alco done" id="alc32">
<img src="./images/childmouse.svg" class="child-mouse kid-mice" id="mice3">
</div>
<div class="divTableCell cell">
<img src="./images/alcoholday.svg" class="alco full" id="alc4">
<img src="./images/alcoholdaydone.svg" class="alco done" id="alc41">
<img src="./images/childmouse.svg" class="child-mouse kid-mice" id="mice4">
</div>
<div class="divTableCell cell"> </div>
</div>
</div>
</div>
<div id="after-drink">
<div id="after-drink">
<h5>What happens to you on Saturday?</h5>
<ul>
<li>You may have a hangover but you will recover fast becasue you are young, but does that make you resilent?</li>
</ul>
<h5 style="text-align:center"> Keep scrolling to find out!</h5>
<h5 style="text-align:center; font-size: 30px;"> V </h5>
</div>
<h5 style="text-align:center"> Keep scrolling to find out!</h5>
<h5 style="text-align:center; font-size: 30px;"> V </h5>
</div>
</section>
<section id="slide-4">
<img src="./images/meme.png" class="meme">
</section>
<section id="slide-5">
<div class="happy-right">
<h1>Sad, alcoholic mouse after 7 years</h1>
<img src="./images/adultmousesad.svg">
<div class="chalkboard">
<ul>
<li>higher susceptibility to:</li>
<ul>
<li data-toggle="modal" data-target="#depression" id="info">Depression</li>
<div class="modal fade" id="depression" tabindex="-1" role="dialog" aria-labelledby="depressionTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="depression">Depression</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ul>
<li><b><u>Definition:</b></u> Mood disorder that is both common and life-threatening. Symptoms must be present for a minimum of two weeks for diagnosis. More information on symptoms.</li>
<ul>
<li>Types of Depression:</li>
<li>Seasonal Affective Disorder, Persistent Depressive Disorder</li>
</ul>
<li>Heavy drinking linked to a higher risk of developing Major Depression (higher in females) & those battling depression generally have a higher alcohol intake.</li>
<li>Evidence to suggest alcohol dependence can increase risk of developing depression</li>
<li><b>Both:</b> Short-Term and Long-Term Effects</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<li data-toggle="modal" data-target="#anxiety" id="info">Anxiety</li>
<div class="modal fade" id="anxiety" tabindex="-1" role="dialog" aria-labelledby="anxietyTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="anxiety">Anxiety</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ul>
<li><b><u>Definition:</b></u> - Feeling nervous or worried at times which can be helpful-natural reaction. However, when feelings of anxiety escalate to a point that it affects our lives, like interfering with daily functions, it can be classified as having an Anxiety Disorder.</li>
<ul>
<li>Types of Anxiety Disorders:</li>
<li>Phobias, Panic Disorder, Social Anxiety Disorder Etc.</li>
</ul>
<li>Strong correlation to alcohol use.</li>
<li>Alcohol is a common coping mechanism in relieving anxiety in short-term instances</li>
<li>BUT, Alcohol withdrawal can heighten feelings of anxiety leading to more alcohol intake.</li>
<li><b>Both:</b> Short-Term and Long-Term Effects</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<li data-toggle="modal" data-target="#memory" id="info">Memory loss</li>
<div class="modal fade" id="memory" tabindex="-1" role="dialog" aria-labelledby="memoryTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="memory">Memory Loss</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ul>
<li>Direct Effect</li>
<li>At high amounts, alcohol can adversely affect brain function, including negatively impacting memory</li>
<li>Adolescence who heavily drink, risk having trouble with memory leading to lower academic performances which leads to further consequences.</li>
<li>Both: Short Term and Long-Term Effects</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<li data-toggle="modal" data-target="#tasks" id="info">Low ability to switch between tasks</li>
<div class="modal fade" id="tasks" tabindex="-1" role="dialog" aria-labelledby="tasksTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="tasks">Low ability to switch between tasks</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ul>
<li>Also Referred to as Cognitive Flexibility</li>
<li>Both: Short-Term and Long-Term Effects</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<li data-toggle="modal" data-target="#obesity" id="info">Obesity</li>
<div class="modal fade" id="obesity" tabindex="-1" role="dialog" aria-labelledby="obesityTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="obesity">Obesity</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ul>
<li>Onset and advancement of non-Alcoholic fatty liver disease due to obesity from consistent alcohol use.</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<li data-toggle="modal" data-target="#cytokines" id="info">High levels of cytokines</li>
<div class="modal fade" id="cytokines" tabindex="-1" role="dialog" aria-labelledby="cytokinesTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="cytokines">High levels of cytokines</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ul>
<li>Increased alcohol exposure is linked to higher levels of pro-inflammatory cytokines (TNF-α , HMGB1, MCP1) in the brain</li>
<ul>
<li><b><ul style="padding:0; display:inline;">Cytokines:</ul></b> defines a group of small proteins that affect the interactions of other cells, in a unique way; signaling molecule</li>
<li><b><ul style="padding:0; display:inline;">Pro-inflammatory cytokines:</ul></b> a unique class of cytokines; important in immune responses and promote inflammation (response to harmful stimuli-disease or damage) and is a response for protection</li>
</ul>
<li>Inflammation innate response to repair body from initial cause of injury</li>
<li>High levels of alcohol exposure are linked to possible brain inflammation</li>
<li>Pro-inflammatory cytokines can interfere with neurogenesis via increased cell death</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<li data-toggle="modal" data-target="#flexibility" id="info">Low Cognitive flexibility</li>
<div class="modal fade" id="flexibility" tabindex="-1" role="dialog" aria-labelledby="flexibilityTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="flexibility">High levels of cytokines</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ul>
<li>Increased alcohol exposure is linked to higher levels of pro-inflammatory cytokines (TNF-α , HMGB1, MCP1) in the brain</li>
<ul>
<li><b><ul style="padding:0; display:inline;">Cytokines:</ul></b> defines a group of small proteins that affect the interactions of other cells, in a unique way; signaling molecule</li>
<li><b><ul style="padding:0; display:inline;">Pro-inflammatory cytokines:</ul></b> a unique class of cytokines; important in immune responses and promote inflammation (response to harmful stimuli-disease or damage) and is a response for protection</li>
</ul>
<li>Inflammation innate response to repair body from initial cause of injury</li>
<li>High levels of alcohol exposure are linked to possible brain inflammation</li>
<li>Pro-inflammatory cytokines can interfere with neurogenesis via increased cell death</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<li data-toggle="modal" data-target="#neurogenesis" id="info">Decline in neurogenesis</li>
<div class="modal fade" id="neurogenesis" tabindex="-1" role="dialog" aria-labelledby="neurogenesisTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="neurogenesis">Decline in neurogenesis</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ul>
<li>High levels of alcohol exposure in adolescents can decline neurogenesis in the adult brain: dente gyrus in the hippocampus (learning & memory function) and sub-ventricular zone</li>
<li>Neurogenesis: creation of new brain cells crucial for self-repair and maintenance of healthy brain function; highly important for cognitive function and behavior</li>
<li>Adult Neurogenesis occurs in: dente gyrus (part of the hippocampus) and sub-ventricular zone (layer of tissue in walls of brain ventricles)</li>
<li>Decline in Neurogenesis associated with: learning and memory deficits (seen in elderly) & may be a contributor to Alzheimer’s Disease</li>
<li>**Neurogenesis naturally declines with age**</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</ul>
</ul>
</div>
</div>
<div class="happy-left">
<h1>Happy, alcohol free adult mouse</h1>
<img src="./images/adultmousehap.svg">
<div class="chalkboard hap">
<h2>I've got 99 problems and alcohol ain't one of them</h2>
</div>
</div>
</section>
</section>
<section id="slide-11">
<html ng-app="cards">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="flip.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js" type="text/javascript"></script>
</head>
<body>
<div class="cntr" ng-controller="CardController" style="
margin: 0;">
<div class="timer" ng-class="{critical:isCritical}">
{{timeLimit | date: 'm:ss'}}
</div>
<table class="table-top">
<tr ng-repeat="row in deck.rows">
<td ng-repeat="card in row.cards">
<div class="card_container {{!card.isFaceUp ? '' : 'flip'}}" ng-click="isGuarding || check(card)" >
<div class="card shadow">
<div class="front face"></div>
<div class="back face text-center pagination-center">
<p> {{card.item}} </p>
</div>
</div>
</div>
</td>
</tr>
<div class="hello" id="hello">
<h4>Let's play a memory game</h4>
<p>Alcohol impacts your memory. Check out your time in this memory game and then try again when you are tired. Are the results the same?<p>
<p> Game adapted from <a href="https://codepen.io/collosic/pen/KsfwD">collosic</a>
</div>
</table>
<div class="startbtn">
<button type="button" class="btn btn-default btn-lg" ng-disabled="inGame == true" ng-click="start()">Start</button>
</div>
</div>
</html>
</section>
<section id="slide-12">
<h1> What's going on in the normal brain during your teen/early adolescent years?</h1>
<div class="col-xs-2">
<img src="./images/brain.svg" width="100px">
</div>
<div class="col-xs-3">
<img src="./images/brain.svg" width="130px">
</div>
<div class="col-xs-3">
<img src="./images/brain.svg" width="160px">
</div>
<div class="col-xs-3">
<img src="./images/brain.svg" width="190px">
</div>
<img src="./images/neu.svg" width="100%">
<ul class="slide12">
<li>Neuroplasticity is the change in neural connections in response to environmental factors and it's very high during adolescence. </li>
<li>Neurogenesis occurs throughout our life, however, it undergoes critical stages to develop the brain during adolescence.</li>
</ul>
</section>
<section id="slide-6">
<div class="braindrink">
<img src="./images/braindrink.svg">
<h4>You think you are resilient, or able to handle the effects of alcohol but you are setting yourself up for problems in the future</h4>
</div>
</section>
<section id="slide-13">
<h1> What's going on in the normal brain during your teen/early adolescent years?</h1>
<div class="col-xs-4 one">
<img src="./images/happybraindrink.svg" width="60%">
<img src="./images/dambrain.svg" width="30%">
</div>
<div class="col-xs-4 one">
<img src="./images/happybraindrink.svg" width="60%">
<img src="./images/dambrain2.svg" width="30%">
</div>
<div class="col-xs-4 one">
<img src="./images/damnbrain3.svg" width="65%">
</div>
<img src="./images/neu2.svg" width="100%">
<ul class="slide12">
<li>Remember, neuroplasticity responds to environmental factors. Your highly plastic brain will respond to the toxic effects of alcohol and lower neurogenesis, specifically your Hippocampus and the cells that go on to develop your forebrain.
</li>
</ul>
</section>
<section id="slide-14">
<div class="row">
<div class="col-xs-2">
<img src="./images/smartbrain.svg">
</div>
<div class="col-xs-10">
<h1>Understand that your brain is like a plant. You must feed it the right nutrients for it to nourish and grow. </h1>
</div>
</div>
<div class="row">
<div class="col-xs-6 two">
<img src="./images/braintree.svg" width="40%">
</div>
<div class="col-xs-6 two">
<img src="./images/braintree2.svg" width="40%">
</div>
</div>
<ul class="slide12">
<li>Giving it harmful and toxic chemicals will be detrimental and the effects become difficult to reverse</li>
</ul>
</section>
<section id="slide-15">
<div class="col-xs-5">
<img src="./images/fightbrain.svg" style="float: right">
</div>
<div class="col-xs-6">
<h1>Fight the urge to drink alcohol and protect your brain</h1>
</div>
</section>
<section id="slide-7">
<div class="container2">
<!-- Map html - add the below to your page -->
<div class="jsmaps-wrapper" id="canada-map"></div>
<!-- End Map html -->
</div>
<script type="text/javascript">
$(function() {
$('#canada-map').JSMaps({
map: 'canada'
});
});
</script>
</section>
<section id="slide-8">
<img src="./images/purtitle.svg" id="purtitle">
<div class="row rtop">
<div class="col-xs-4">
<img src="./images/pur1.svg">
<h1>As alcohol is the highest used psychoactive drug in Canada, compared to tobacco, marijuana and other illegal drugs, it is a critical issue based on the listed statistics (Alcohol Consumption in Canada 2015 Report).</h1>
</div>
<div class="col-xs-4 mid">
<img src="./images/pur2.svg">
<h1>Primarily centered on the 2017 paper "Persistent Decreases in Adult Subventricular and Hippocampal Neurogenesis Following Adolescent Intermittent Ethanol Exposure", which stresses adolescent consequences of binge-drinking in the adult brain, our aim is to translate the key conclusion in this paper to inform Ontario adolescents.
</h1>
</div>
<div class="col-xs-4">
<img src="./images/pur3.svg">
<h1>Our goal is to provide an updated and scientifically-based educational resource on alcohol consumption risk, targeted towards the adolescent population for the Toronto District School Board. This paper was published recently in August 2017 and is the first scientific paper to demonstrate the effects of alcohol binge drinking on adolescents.
</h1>
</div>
</div>
<div class="row rbottom">
<div class="col-xs-4">
<img src="./images/pur4.svg">
</div>
<div class="col-xs-8">
<h1>This informative and interactive site, not only displays the neural effects of alcohol on the brain after repeated exposure but also proposes a workshop for educators to discuss the presented information, as well as other educational activities.
Alcohol binge drinking in adolescents has been linked to emotional and behavioural problems. Therefore, we encourage that parents should be involved in the workshop with the students because underage drinking is illegal and parents can be the greatest source for helping their child. </h1>
</div>
</div>
</section>
<section id="slide-9">
<div class="happy-left2">
<div class="insideleft">
<img src="./images/tdsbtitle.svg">
<h1>Due to the high statistics of Ontario students admitting to binge drinking, this website was designed. The goal is to approach the Toronto District School Board (TDSB) and propose to add this website as a fun and educational way to understand what happens to an adolescent’s brain when a lot of alcohol is consumed. The website is created in such a way that it will appeal to a younger crowd and information from recent literature has been explained in several schematics to show how recent studies are depicting the effects of alcohol on the brain. A short and simple quiz attached on the right or <a href="https://docs.google.com/forms/d/e/1FAIpQLSdw461KAcHp30OyK7sgIazRhJVYr_vtSOqMYv850x-ledn9bg/viewform?usp=sf_link">here</a>
should be given to students allowing them to think and recall what they learnt on the website and engrain that information in their brain on a deeper level."
</h1>
</div>
</div>
<div class="happy-right2">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdw461KAcHp30OyK7sgIazRhJVYr_vtSOqMYv850x-ledn9bg/viewform?usp=sf_link" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
</div>
</section>
<section id="slide-10">
<div class="happy-left3">
</div>
<div class="happy-right3">
<h1> Further Knowledge</h1>
<h2>The following studies show only some of the vast amount of research on the general topic of alcohol. Keep in mind that it is up to you whether to decide or not the results presenting in these papers are essential</h2>
<ul>
<li>Crews, F. T., Vetreno, R. P., Broadwater, M. A., & Robinson, D. L. (2016). Adolescent Alcohol
Exposure Persistently Impacts Adult Neurobiology and Behavior. Pharmacological
Reviews, 68(4), 1074-1109. doi:10.1124/pr.115.012138</li>
<li>Desikan, A., Wills, D. N., & Ehlers, C. L. (2014). Ontogeny and adolescent alcohol exposure in Wistar rats: open field
conflict, light/dark box and forced swim test. Pharmacology Biochemistry and Behavior, 122, 279-285.
doi:10.1016/j.pbb.2014.04.011</li>
<li>Gass, J. T., Glen, W. B., Mcgonigal, J. T., Trantham-Davidson, H., Lopez, M. F., Randall, P. K., . . . Chandler, L. J.
(2014). Adolescent Alcohol Exposure Reduces Behavioral Flexibility, Promotes Disinhibition, and Increases
Resistance to Extinction of Ethanol Self-Administration in Adulthood. Neuropsychopharmacology, 39(11),
2570-2583. doi:10.1038/npp.2014.109</li>
<li>Hemel-Ruiter, M. E., Jong, P. J., Ostafin, B. D., & Wiers, R. W. (2015). Reward sensitivity, attentional bias, and
executive control in early adolescent alcohol use. Addictive Behaviors, 40, 84-90.
doi:10.1016/j.addbeh.2014.09.004</li>
<li>Kyzar, E. J., Floreani, C., Teppen, T. L., & Pandey, S. C. (2016). Adolescent Alcohol Exposure:Burden of Epigenetic
Reprogramming, Synaptic Remodeling, and Adult Psychopathology. Frontiers in Neuroscience, 10, 1-16.
doi:10.3389/fnins.2016.00222</li>
<li>Leclercq, S., Matamoros, S., Cani, P. D., Neyrinck, A. M., Jamar, F., Stärkel, P., … Delzenne, N. M. (2014).
Intestinal permeability, gut-bacterial dysbiosis, and behavioral markers of alcohol-dependence severity.
Proceedings of the National Academy of Sciences of the United States of America, 111(42), E4485–E4493. http://doi.org.myaccess.library.utoronto.ca/10.1073/pnas.1415174111
</li>
</ul>
</div>
</section>
<section id="slide-16">
<h1> Citations</h1>
<ul>
<li>Adult neurogenesis. (2017, September 07). Retrieved November 19, 2017, from https://qbi.uq.edu.au/brain-basics/brain-physiology/adult-neurogenesis
</li>
<li>Alcohol Abuse Facts. (n.d.). Retrieved November 8, 2017, from http://www.teenchallenge.ca/GET-HELP/EDUCATIONAL-RESOURCES/ALCOHOL-ABUSE-FACTS</li>
<li>Anxiety Disorders. (2017). Retrieved December 03, 2017, from https://cmha.ca/mental-health/understanding-mental-illness/anxiety-disorders/
</li>
<li>The Chief Public Health Officer’s Report on the State of Public Health in Canada 2015: Alcohol Consumption in Canada (Rep.). (2016, January 4). Retrieved November 10, 2017, from Public Health Agency of Canada website: http://healthycanadians.gc.ca/publications/department-ministere/state-public-health-alcohol-2015-etat-sante-publique-alcool/alt/state-phac-alcohol-2015-etat-aspc-alcool-eng.pdf
</li>
<li>Depression. (2016, October). Retrieved November 19, 2017, from https://www.nimh.nih.gov/health/topics/depression/index.shtml#part_145398
</li>
<li>Dinarello, C. A. (2000). Proinflammatory Cytokines. Chest Journal,118(2), 503-508. doi:10.1007/springerreference_123576</li>
<li>Galvan, V., & Jin, K. (2007). Neurogenesis in the aging brain. Clinical Interventions in Aging, 2(4), 605–610.
</li>
<li>Heavy drinking. (2016, September 28). Retrieved November 7, 2017, from https://www.statcan.gc.ca/pub/82-229-x/2009001/deter/hdx-eng.htm
</li>
<li>
Liu, W., & Crews, F. T. (2017). Persistent Decreases in Adult Subventricular and Hippocampal Neurogenesis Following Adolescent Intermittent Ethanol Exposure. Frontiers in Behavioral Neuroscience,11(151), 1-15. doi:10.3389/fnbeh.2017.00151
</li>
<li>
Meme Generator. (n.d.). Retrieved November 6, 2017, from https://imgflip.com/memegenerator
</li>
<li>Stiles, J., & Jernigan, T. L. (2010). The Basics of Brain Development. Neuropsychology Review, 20(4), 327–348. http://doi.org/10.1007/s11065-010-9148-4 </li>
<li>Williamson, A., & Feyer, A. (2000). Moderate sleep deprivation produces impairments in cognitive and motor performance equivalent to legally prescribed levels of alcohol intoxication. Occupational and Environmental Medicine, 57(10), 649–655. http://doi.org/10.1136/oem.57.10.649
</li>
<li>Zhang, J.-M., & An, J. (2007). Cytokines, Inflammation and Pain. International Anesthesiology Clinics, 45(2), 27–37. http://doi.org/10.1097/AIA.0b013e318034194e
</li>
</ul>
</section>
<section class="footer">
Made with ♥ by Janelle, Mashaal & Taamannae
<br>
University of Toronto, Department of Human Biology
</section>
<script>
// Create cross browser requestAnimationFrame method:
window.requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame
|| function(f){setTimeout(f, 1000/60)}
var bubble1 = document.getElementById('m1')
var bubble2 = document.getElementById('m2')
var bubble3 = document.getElementById('m3')
function parallaxbubbles(){
var scrolltop = window.pageYOffset // get number of pixels document has scrolled vertically
bubble1.style.top = -scrolltop * .4 + 'px' // move bubble1 at 20% of scroll rate
bubble2.style.top = -scrolltop * .6 + 'px' // move bubble2 at 50% of scroll rate
bubble3.style.top = -scrolltop * .5 + 'px' // move bubble2 at 50% of scroll rate
}
window.addEventListener('scroll', function(){ // on page scroll
requestAnimationFrame(parallaxbubbles) // call parallaxbubbles() on next available screen paint
}, false)
</script>
</body>
</html>