-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
202 lines (174 loc) · 10.3 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
<!DOCTYPE html>
<html>
<head>
<title>Röstigraben</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="apple-touch-icon" sizes="57x57" href="img/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="img/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="img/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
<link rel="manifest" href="img/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="img/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-114276353-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-114276353-1');
</script>
</head>
<body>
<div id="intro">
<h1 class="heading1">Prost und Santé! <br> Wer trinkt mehr, Hans oder Jules?</h1>
<p class="text text--light">Den Röstigraben gibt es wirklich, aber nicht so, wie man denkt. Oder etwa doch?</p>
<p class="text text--light">
Alle lieben Apéro! Dafür brauchen wir keine statistischen Beweise. Apéro ist etwas was uns Schweizer und Schweizerinnen ausmacht und jeder von uns in irgendeiner Variante gerne mag. Aber zwischen uns verläuft auch ein tiefer Graben – der Röstigraben! Gibt es ihn wirklich? Diese Grenze welche die Deutschschweizer und die Romands trennt?
</p>
<img id="image-roestigraben" src="img/Roestigraben.svg" class="image">
<p class="text text--light">
Was unterscheidet uns? Was verbindet uns? Vorurteile über die jeweils anderen gibt es genug – dafür muss man zum Beispiel nur den Chatverlauf von Jules, aus dem Kanton Waadt, und Hans, aus Bern, anschauen. Sie schlagen mit Vorurteilen nur so um sich, Freunde dürfen das aber, n’est-ce pas? Zum Glück lösen sie die Vorurteile dann auch auf, mit überprüfbaren Ergebnissen aus der Vorurteilsforschung. Zum wöchentlichen Apéro-Treff überwinden sie den ominösen, bösen Graben und treffen sich in der Krone in Murten. Eine bilinguen Stadt, da wird Französisch und Deutsch gesprochen. Prost! Et Santé!
</p>
<p class="text text--light">
Wobei… Das Wort Apèro ist schliesslich französisch, ist da was dran? Finde es heraus!
</p>
</div>
<header id="header" class="header">
<div class="inner-header">
<div class="names" id="test">Jules 🥂</div>
<div class="names">🍻 Hans</div>
</div>
</header>
<div id="main">
<div class="bubble bubble--right bubble--visible">
<p class="text">
Tschou Jules, trinkst du ein Apéro mit mir? Ich habe gehört ihr Romands säuft so gerne, HAHA! Stimmt doch, oder? 🥂🍷🍺😜
</p>
</div>
<div id="question-work" class="bubble bubble--question bubble--visible">
<div class="btn">👍</div>
<div class="btn">👎</div>
</div>
<div class="bubble bubble--left bubble--true" style="display:none">
<p class="text">
Kein Wunder denken alle immer, wir saufen so viel! Es stimmt nämlich tatsächlich – In der Französischen Schweiz trinken 17.7% der Leute täglich Alkohol! Das hat eine statistische Erhebung des BFS in 2012 ergeben. Bei den Deutschschweizern sind es nur knapp 10.8% der Leute, die täglich trinken. Also in der Romandie gönnt sich fast jeder Fünfte jeden Tag ein Gläschen … oder mehr! Santé!
</p>
<div class="chart" style="background-image: url(img/Alkoholkonsum.svg);"></div>
<a href="https://www.bfs.admin.ch/bfs/de/home/statistiken/gesundheit/determinanten/alkohol.assetdetail.302773.html" target="_blank" class="data-source">Quelle: BFS</a>
</div>
<div class="bubble bubble--right" style="display:none">
<p class="text">
Also, kommst du auch in die Krone? Oder musst du noch lange arbeiten? Ihr schöggelet doch eh den ganzen Tag da drüben.
</p>
</div>
<div id="question-alcohol" class="bubble bubble--question" style="display:none">
<div class="btn">👍</div>
<div class="btn">👎</div>
</div>
<div class="bubble bubble--left bubble--true" style="display:none">
<p class="text">
Hast du gewusst, dass eigentlich fast alle Schweizer ähnlich lange arbeiten pro Woche? Es gibt bei 41.8 Stunden pro Woche im Schweizweiten Durchschnitt in 2016 nur einen Unterschied von plus/minus einer halben Stunde. Die Genfer sind jedoch die, die am wenigsten arbeiten mit ca. 40.9 Stunden pro Woche, das sind die wahren Schöggeler der Schweiz. Spannend, was das BFS alles weiss oder?
</p>
<video loop muted autoplay class="video">
<source src="video/cat_hustling.mp4" type="video/mp4">
</video>
<a href="https://www.bfs.admin.ch/bfs/de/home/statistiken/arbeit-erwerb/erhebungen/bua.assetdetail.2967274.html" target="_blank" class="data-source">Quelle: BFS</a>
</div>
<div class="bubble bubble--right" style="display:none">
<p class="text">
Jaja, also fährst du bald los? Mach keinen Unfall, so schlecht wie du Auto fährst, LOL!💥🚗
</p>
</div>
<div id="question-accidents" class="bubble bubble--question" style="display:none">
<div class="btn">👍</div>
<div class="btn">👎</div>
</div>
<div class="bubble bubble--left bubble bubble--false" style="display:none">
<p class="text">
Die Unterschiede der pro Kopf Unfälle zwischen den Welschen und den Deutschschweizern sind eigentlich wirklich minim! Wenn wir 97 Unfälle bauen, knallt es bei den Deutschschweizern 100 Mal. Wir Romands sind zwar nicht die besten Autofahrer, aber nicht ganz so schlimm wie die Zürcher. Sie machen total die meisten Unfälle, nämlich pro Jahr über 3400! Das ist zwar nicht pro Kopf gerechnet aber trotzdem viel, oder? Am zweitmeisten Unfälle machen dann die Berner und dann kommen die Genfer und wir Waadtländer… Da habe ich letztens eine Statistik von 2016 des BFS gesehen. Voilà!
</p>
<div class="chart" style="background-image: url(img/Accidents.svg);"></div>
<a href="https://www.bfs.admin.ch/bfs/de/home/statistiken/mobilitaet-verkehr/unfaelle-umweltauswirkungen/verkehrsunfaelle/strassenverkehr.assetdetail.2683737.html" target="_blank" class="data-source">Quelle: BFS</a>
</div>
<div class="bubble bubble--time" style="display:none">
<p class="text">
6 Stunden später…
</p>
</div>
<div class="bubble bubble--left" style="display:none">
<p class="text">
Hey Hans, war super heute Abend! Morgen können wir uns ja vor dem Museum treffen? Um 11 Uhr, ok?
</p>
</div>
<div class="bubble bubble--time" style="display:none">
<p class="text">
Am nächsten Morgen
</p>
</div>
<div class="bubble bubble--right" style="display:none">
<p class="text">
Du Jules, ich glaub nicht dass ich es schaffe heute. Das Zeug was du mir gestern gegeben hast war ja voll krass!😵
</p>
</div>
<div class="bubble bubble--left" style="display:none">
<p class="text">
Was?? LOL Du verträgst ja auch gar nichts!😂🤣
</p>
</div>
<div id="question-drugs" class="bubble bubble--question" style="display:none">
<div class="btn">👍</div>
<div class="btn">👎</div>
</div>
<div class="bubble bubble--right bubble--false" style="display:none">
<p class="text">
Ja, ich bin halt nicht so trainiert wie du. Die Romands nehmen im Vergleich mehr harte Drogen. 6.9% von ihnen haben schon harte Drogen konsumiert, in der Deutschschweiz sind es nur 5.4% der MenschenLeute. Aber die ganz schlimmen Finger sind vor allem die Genfer und die Zürcher mit je 8%. Das war in 2007. Das hat auch das BFS rausgefunden.
</p>
<div class="chart" style="background-image: url(img/Drogenkonsum.svg);"></div>
<a href="https://www.bfs.admin.ch/bfs/de/home/statistiken/kataloge-datenbanken/tabellen.assetdetail.106250.html" target="_blank" class="data-source">Quelle: BFS</a>
</div>
<div class="bubble bubble--right" style="display:none">
<p class="text">
Aber das was du mir gegeben hast, shiit… <br>
Du musst wohl allein ins Museum, aber das macht dir ja nichts aus, ihr seid ja eh viel kultivierter als wir!
</p>
</div>
<div id="question-museum" class="bubble bubble--question" style="display:none">
<div class="btn">👍</div>
<div class="btn">👎</div>
</div>
<div class="bubble bubble--left bubble--true" style="display:none">
<p class="text">
Hehe, wir sind schon ein bisschen kultivierter als ihr Deutschschweizer! Pro Jahr gehen wir öfter ins Museum als ihr, nämlich 3,5% öfter! Von euch Deutschschweizern gehen 71.6% der Leute mindestens einmal im Jahr ins Museum. Diese Erhebungen haben die Schweizerischen Museen und Galerien zusammen mit dem BFS vorgenommen in 2014.
</p>
<div class="chart" style="background-image: url(img/Museumsbesuche.svg);"></div>
<a href="https://www.bfs.admin.ch/bfs/de/home/statistiken/kultur-medien-informationsgesellschaft-sport/kultur/kulturverhalten.assetdetail.3402422.html" target="_blank" class="data-source">Quelle: BFS</a>
</div>
<div class="bubble bubble--left " style="display:none">
<p class="text">
Mais oké, dann geh ich eben alleine, dir gute Besserung… Cornichon, toi 😉
</p>
</div>
<div class="bubble bubble--right" style="display:none">
<p class="text">
Danke 🙄
</p>
</div>
</div>
<footer id="footer">
Eva Wittwer & Vinzenz Leutenegger, ZHdK 2018 Data Mining
</footer>
<script src="js/script.js"></script>
</body>
</html>