-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
616 lines (603 loc) · 36 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
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="de"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="de"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="de"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="de"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Wie Dortmund bist du?</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="img/favicon.png">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"><a href="#" class="underlay">Start</a></li>
<li>
<a href="#block1">Menschen
<span id="ok1" class="glyphicon glyphicon-ok pull-right"></span></a>
</li>
<li>
<a href="#block2">Politik
<span id="ok2" class="glyphicon glyphicon-ok pull-right"></span></a>
</li>
<li>
<a href="#block3">Bier
<span id="ok3" class="glyphicon glyphicon-ok pull-right"></span></a>
</li>
<li>
<a href="#block4">Fußball
<span id="ok4" class="glyphicon glyphicon-ok pull-right"></span></a>
</li>
<li>
<a href="#block5">Autos
<span id="ok5" class="glyphicon glyphicon-ok pull-right"></span></a>
</li>
<li>
<a href="#block6">Lieblingstier
<span id="ok6" class="glyphicon glyphicon-ok pull-right"></span></a>
</li>
<li>
<a href="#score" id="okscore">Dein Ergebnis</a>
</li>
</ul>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<!-- Top nav bar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">
<img alt="Ruhrnachrichten.de" src="img/RN_Online_Logo_4c.png" id="rn-img">
<ul class="share-buttons">
<li>
<a href="https://www.facebook.com/sharer/sharer.php?u=rn.de%2FWieDortmundBistDu&t=Wie%20Dortmund%20bist%20du%3F" title="Share on Facebook" target="_blank">
<i class="fa fa-facebook-official" style="color:#4862A3"></i>
</a>
</li>
<li>
<a href="https://twitter.com/intent/tweet?source=rn.de%2FWieDortmundBistDu&text=Wie%20Dortmund%20bist%20du%3F%20Teste%20dich%20selbst%20und%20finde%20heraus%20wie%20viel%20Dortmund%20in%20dir%20steckt.%20rn.de%2FWieDortmundBistDu" target="_blank" title="Tweet">
<i class="fa fa-twitter" style="color:#55ACEE"></i>
</a>
</li>
<li>
<a title="More Info" id="info-btn">
<i class="fa fa-info-circle" style="color:#E41C3B"></i>
</li>
</ul>
</a>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close"><i class="fa fa-times"></i></span>
<h2>So funktioniert das Quiz</h2>
<p><br>
Sobald du deine Antwort abschickst, zeigt unser Quiz dir, wie die Dortmunder und die Menschen in ganz Deutschland geantwortet haben. Die Daten dafür stammen aus Online-Umfragen des Marktforschungsinstituts <a href="https://www.yougov.de/" target="_blank">YouGov</a>.
</p><p>Das Institut gewichtet die Antworten, die es bekommt, nach Faktoren wie Alter, Geschlecht und Ähnlichem, damit die Zahlen die Realität möglichst repräsentativ abbilden. Trotzdem kann es zu Abweichungen kommen. Über den Grafiken siehst du jeweils, wie viele Dortmunder YouGov zu diesem Thema befragt hat.
</p>
<p>
Zusätzlich zu den Grafiken siehst du, wieviel Prozent der befragten Dortmunder genauso geantwortet haben wie du. Danach richten sich auch die Punkte, die du für deine Antwort erhälst.</p><p>Fünf von zehn Punkten bekommst du zum Beispiel, wenn deiner Antwort 20% der Dortmunder zugestimmt haben, der beliebtesten Antwort aber 40%. Kurz: Je typischer deine Antwort für Dortmund ist, desto besser schneidest du ab.
</p>
<p>
Deine Eingaben bleiben anonym und werden von uns weder gespeichert noch weiter verarbeitet.
</p>
</div>
</div>
<div class="jumbotron" id="intro-header">
<div class="container" id="intro-header-text" style="vertical-align: middle">
<h1>Wie Dortmund bist du?</h1>
<p><b>Rund 600.000 Menschen leben in Dortmund - vom waschechten Ruhrpöttler bis zum frisch Zugezogenen. Wie viel Dortmund steckt in dir? Teste dich selbst und finde es heraus.</b></p>
</div>
</div>
<div class="jumbotron" style="padding-bottom:0">
<div class="list-group-item disabled">
<p>
Das Meinungsforschungsinstitut <a href="https://www.yougov.de/" target="_blank">YouGov</a> hat per Umfragen die Daten zahlreicher Dortmunder erfasst. Daraus haben wir einen Fragebogen zusammengestellt. Sobald du eine Frage beantwortest, kannst du sehen, wie die Menschen in Dortmund und ganz Deutschland geantwortet haben. Du erhälst umso mehr Punkte, je mehr Dortmunder die gleiche Antwort gegeben haben wie du. Die volle Punktzahl bekommst du, wenn deine Antwort die gleiche ist wie die des größten Teils der Dortmunder.
</p>
<p>
Mehr Hintergründe zur Systematik findest du <a id="info-link">hier</a>.
</p>
</div>
</div>
<!-- FRAGENBLOCK 1 -->
<div class="jumbotron" style="padding-top:24px">
<div class="container" id="block1"><h2>Menschen</h2></div>
<!-- FRAGEN 1 -->
<div class="container">
<div id="frage1">
<!-- Geschlecht -->
<div class="list-group">
<div class="list-group-item disabled">Was ist dein Geschlecht?</div>
<div class="list-group-item">
<div class="btn-group" role="group" aria-label="...">
<button type="button" id="w" class="btn btn-secondary">weiblich</button>
<button type="button" id="m" class="btn btn-secondary">männlich</button>
<button type="button" id="geschlechtNA" class="btn btn-secondary">keine Angabe</button>
</div>
</div>
</div>
<!-- Alter -->
<div class="list-group">
<div class="list-group-item disabled">Wie alt bist du?</div>
<div class="list-group-item">
<div class="btn-group" role="group" aria-label="...">
<button type="button" id="alter1" class="btn btn-secondary">18-29 Jahre
</button>
<button type="button" id="alter2" class="btn btn-secondary">30-44 Jahre
</button>
<button type="button" id="alter3" class="btn btn-secondary">45-54 Jahre
</button>
<button type="button" id="alter4" class="btn btn-secondary">55 Jahre und älter
</button>
<button type="button" id="alterNA" class="btn btn-secondary">keine Angabe</button>
</div>
</div>
</div>
<div class="row">
<!-- Sexuelle Orientierung -->
<div class="col-lg-4">
<div class="list-group">
<div class="list-group-item disabled">Was ist deine sexuelle Orientierung?
</div>
<div class="list-group-item">
<input type="radio" name="sexuality" value="heterosexuell"> heterosexuell
</div>
<div class="list-group-item">
<input type="radio" name="sexuality" value="bisexuell"> bisexuell
</div>
<div class="list-group-item">
<input type="radio" name="sexuality" value="homosexuell"> homosexuell
</div>
<div class="list-group-item">
<input type="radio" name="sexuality" value="sonstige"> sonstige
</div>
<div class="list-group-item">
<input type="radio" name="sexuality" value="weiß nicht"> weiß nicht
</div>
<div class="list-group-item">
<input type="radio" name="sexuality" value="keine Angabe"> keine Angabe
</div>
</div>
</div>
<!-- Schulabschluss -->
<div class="col-lg-4">
<div class="list-group">
<div class="list-group-item disabled">
Was it dein höchster Schulabschluss?
</div>
<div class="list-group-item">
<input type="radio" name="schulabschluss" value="Noch in schulischer Ausbildung"> Noch in schulischer Ausbildung</div>
<div class="list-group-item">
<input type="radio" name="schulabschluss" value="Ohne Schulabschluss"> Ohne Schulabschluss</div>
<div class="list-group-item">
<input type="radio" name="schulabschluss" value="Haupt-(Volks-)schulabschluss"> Haupt-(Volks-)schulabschluss</div>
<div class="list-group-item">
<input type="radio" name="schulabschluss" value="Realschul- oder gleichwertiger Abschluss (POS, Mittlere Reife)"> Realschul- oder gleichwertiger Abschluss (POS, Mittlere Reife)</div>
<div class="list-group-item">
<input type="radio" name="schulabschluss" value="Abitur, Fachhochschulreife"> Abitur, Fachhochschulreife</div>
<div class="list-group-item">
<input type="radio" name="schulabschluss" value="keine Angabe"> keine Angabe</div>
</div>
</div> <!-- /col-lg-4 -->
<!-- Religion -->
<div class="col-lg-4">
<div class="list-group">
<div class="list-group-item disabled">Was ist dein Glaube?</div>
<div class="list-group-item">
<input type="radio" name="religion" value="islamisch"> islamisch
</div>
<div class="list-group-item">
<input type="radio" name="religion" value="evangelisch-lutherisch"> evangelisch-lutherisch
</div>
<div class="list-group-item">
<input type="radio" name="religion" value="orthodox-christlich"> orthodox-christlich
</div>
<div class="list-group-item">
<input type="radio" name="religion" value="evangelisch-freikirchlich"> evangelisch-freikirchlich
</div>
<div class="list-group-item">
<input type="radio" name="religion" value="röm.-katholisch"> römisch-katholisch
</div>
<div class="list-group-item">
<input type="radio" name="religion" value="jüdisch"> jüdisch
</div>
<div class="list-group-item">
<input type="radio" name="religion" value="ich habe keinen"> ich habe keinen
</div>
<div class="list-group-item">
<input type="radio" name="religion" value="sonstiger Glaube"> sonstiger Glaube
</div>
<div class="list-group-item">
<input type="radio" name="religion" value="keine Angabe"> keine Angabe
</div>
</div></div>
</div> <!-- /row -->
<button type="button" id="abschicken1" class="btn bluebtn">Antworten abschicken</button>
<div id="alert1" class="customalert hide" role="alert">
Die Ergebnisse werden angezeigt, sobald du die Frage beantwortest.
</div>
</div> <!-- /#frage1 -->
<!-- Antworten 1 -->
<div id="results1" class="results hide">
<div id="antwort1"></div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 underlay">
<div id="antwort11" class="col-md-12"></div></div>
<div class="col-lg-6 col-md-6 col-sm-6 underlay">
<div id="antwort12" class="col-md-12"></div></div>
</div>
<div class="row underlay">
<div class="col-lg-4 col-md-4 col-sm-4">
<div id="antwort14" class="col-md-12"></div></div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div id="antwort15" class="col-md-12"></div></div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div id="antwort16" class="col-md-12"></div></div>
</div>
<!-- CHARTS -->
<div class="btn-group" role="group" aria-label="...">
<button type="button" id="do1" class="tglbtn btn btn-secondary active">DO</button>
<button type="button" id="de1" class="tglbtn btn btn-secondary">DE</button>
</div>
<span><span class="glyphicon glyphicon-arrow-left aria-hidden='true'"></span> Hier klicken, um zwischen den Daten für Dortmund und Deutschland zu wechseln.</span>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="row chart-title">Geschlecht (befragte Dortmunder=463)</div>
<div class="row"><div id="chart11"></div></div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="row chart-title">Alter (befragte Dortmunder=463)</div>
<div class="row">
<div id="chart12"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="row chart-title">Sexuelle Orientierung (befragte Dortmunder=248)</div>
<div class="row"><div id="chart14"></div></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="row chart-title">Schulabschluss (befragte Dortmunder=413)</div>
<div class="row"><div id="chart15"></div></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="row chart-title">Glaube (befragte Dortmunder=286)</div>
<div class="row"><div id="chart16"></div></div>
</div>
</div>
<div>
<br>Auch heute noch zeigen es die Umfragen: Dortmund ist <a href="http://www.ruhrnachrichten.de/staedte/dortmund/Daten-Spezial-Starker-Rueckgang-immer-weniger-Christen-in-Dortmund" target="_blank">traditionell protestantisch</a>. Während die Katholiken und die Evangelen deutschlandweit nach YouGov fast gleichauf liegen, hat der evangelisch-lutherische Glaube in Dortmund noch immer einen Vorsprung.<br>
Wie alt die Dortmunder sind, die einem auf der Straße begegnen, hängt außerdem ganz vom Viertel ab: Im Univiertel Eichlinghofen sind <a href="http://www.ruhrnachrichten.de/staedte/dortmund/44137-Dortmund~/Daten-Serie-Heimatkunde-Wo-Dortmunds-Studenten-und-Rentner-wohnen;art930,2920760" target = "_blank">über ein Viertel der Bevölkerung zwischen 18 und 25</a>, während es in Brünninghausen nur knapp über sieben Prozent sind. <br>
Die Daten, die für dieses Quiz verwendet wurden, können unter Umständen von der Realität abweichen. Mehr zu den Erhebungsmethoden findet ihr unter <a href="https://www.yougov.de/" target="_blank">YouGov.de</a> und oben rechts in unserem Infokasten.
</div>
</div>
</div>
</div>
<!-- FRAGENBLOCK 2 -->
<div class="jumbotron">
<div class="container" id="block2"><h2 id="p2">Politik</h2></div>
<div class="container">
<div id="frage2">
<div class="list-group">
<div class="list-group-item disabled">
Neigst du einer bestimmten Partei zu? Und wenn ja, welcher?
</div>
<div class="list-group-item">
<input type="radio" name="partei" value="SPD"> SPD</div>
<div class="list-group-item">
<input type="radio" name="partei" value="CDU/CSU"> CDU/CSU</div>
<div class="list-group-item">
<input type="radio" name="partei" value="Die Linke"> Die Linke</div>
<div class="list-group-item">
<input type="radio" name="partei" value="Piratenpartei"> Piratenpartei</div>
<div class="list-group-item">
<input type="radio" name="partei" value="Bündnis 90/Die Grünen"> Bündnis 90/Die Grünen</div>
<div class="list-group-item">
<input type="radio" name="partei" value="FDP"> FDP</div>
<div class="list-group-item">
<input type="radio" name="partei" value="AfD"> AfD</div>
<div class="list-group-item">
<input type="radio" name="partei" value="NPD"> NPD</div>
<div class="list-group-item">
<input type="radio" name="partei" value="Freie Wähler"> Freie Wähler</div>
<div class="list-group-item">
<input type="radio" name="partei" value="Andere Partei"> Andere Partei
</div>
<div class="list-group-item">
<input type="radio" name="partei" value="ich neige keiner Partei zu"> ich neige keiner Partei zu</div>
</div>
<button type="button" id="abschicken2" class="btn bluebtn">Antworten abschicken</button>
<div id="alert2" class="customalert hide" role="alert">
Die Ergebnisse werden angezeigt, sobald du die Frage beantwortest.
</div>
</div>
<div id="results2" class="results hide">
<div><span id="antwort2"></span></div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" id="do2" class="tglbtn btn btn-secondary active">DO</button>
<button type="button" id="de2" class="tglbtn btn btn-secondary">DE</button>
</div>
<span> (befragte Dortmunder=400)</span>
<div id="chart2"></div>
<div style:'font-size=150%'>
Seit 1946 ist die SPD die stärkste Kraft in Dortmund – <a href="http://www.ruhrnachrichten.de/staedte/dortmund/44137-Dortmund~/Ratswahl-Spezial-So-hat-Dortmund-seit-1946-gewaehlt;art930,2348376" target="_blank">bei fast jeder Wahl</a>. Nur einmal, bei der Ratswahl 1999, überholte die CDU die SPD um ganze 0,7 Prozentpunkte.<br>
<a href="http://www.ruhrnachrichten.de/staedte/dortmund/44137-Dortmund~/Interaktiver-Rueckblick-Dortmunds-Oberbuergermeister-der-Nachkriegszeit;art930,2348530" target="_blank">Die Bürgermeister Dortmunds</a> stammen bisher jedoch ausnahmslos aus der SPD. Fritz Henßler, der erste Dortmunder Bürgermeister nach dem zweiten Weltkrieg, war außerdem Widerstandskämpfer gegen das Nazi-Regime. Acht Jahre lang saß er dafür im Konzentrationslager Sachsenhausen.</div>
</div>
</div>
</div>
<div class="jumbotron">
<div class="container" id="block3"><h2 id="p3">Bier</h2></div>
<div class="container">
<div id="frage3">
<div class="list-group">
<div class="list-group-item disabled">
Welche Biersorten trinkst du zumindest gelegentlich? Du kannst maximal drei Sorten auswählen.
</div>
<div class="list-group-item">
<input type="checkbox" name="bier" value="Altbier"> Altbier</div>
<div class="list-group-item">
<input type="checkbox" name="bier" value="Export"> Export</div>
<div class="list-group-item">
<input type="checkbox" name="bier" value="Helles/Export"> Helles/Export
</div>
<div class="list-group-item">
<input type="checkbox" name="bier" value="Kölsch"> Kölsch</div>
<div class="list-group-item">
<input type="checkbox" name="bier" value="Pils"> Pils</div>
<div class="list-group-item">
<input type="checkbox" name="bier" value="Schwarzbier"> Schwarzbier</div>
<div class="list-group-item">
<input type="checkbox" name="bier" value="Starkbier"> Starkbier</div>
<div class="list-group-item">
<input type="checkbox" name="bier" value="Weißbier/Weizenbier"> Weißbier/Weizenbier</div>
<div class="list-group-item">
<input type="checkbox" name="bier" value="Alkoholfreies Bier"> Alkoholfreies Bier</div>
<div class="list-group-item">
<input type="checkbox" name="bier" value="Sonstige Biersorten"> Sonstige Biersorten
</div>
<div class="list-group-item">
<input type="radio" name="bier" value="trifft nicht zu"> trifft nicht zu</div>
<div class="list-group-item">
<input type="radio" name="bier" value="weiß nicht"> weiß nicht</div>
<div class="list-group-item">
<input type="radio" name="bier" value="keine Angabe"> keine Angabe</div>
</div><!-- /list group -->
<button type="button" id="abschicken3" class="btn bluebtn">Antworten abschicken</button>
<div id="alert3" class="customalert hide" role="alert">
Die Ergebnisse werden angezeigt, sobald du die Frage beantwortest.
</div>
</div> <!-- /#frage3 -->
<div id="results3" class="results hide">
<div><span id="antwort3"></span></div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" id="do3" class="tglbtn btn btn-secondary active">DO</button>
<button type="button" id="de3" class="tglbtn btn btn-secondary">DE</button>
</div>
<span> (befragte Dortmunder=144)</span>
<div id="chart3"></div>
<div><br>Nach den Daten dieser Umfrage zu urteilen, sind die Dortmunder nicht wählerischer als der Rest von Deutschland, was die Sorte ihres Bieres angeht. Hauptsache, die Größe stimmt. Dabei darf es ruhig auch mal etwas kleiner sein: Das Dortmunder Stößchen fasst stolze 0,1 Liter Bier und hat hier eine lange Tradition. Ursprünglich wurde es für die Arbeiter auf dem Heimweg erfunden. Sie mussten oft lange an der Bahnschranke warten, die das Industriegebiet von den Wohnvierteln trennte. Gerade genug Zeit für ein kleines Wegbierchen.</div>
</div>
</div>
</div>
<div class="jumbotron">
<div class="container" id="block4"><h2 id="p4">Fußball</h2></div>
<div class="container">
<div id="frage4">
<div class="list-group">
<div class="list-group-item disabled">
Welcher ist dein Lieblings-Fußballverein?
</div>
<div class="list-group-item">
<div class="input-group">
<input type="text" class="form-control" id="input4" list="fussballteams" placeholder="Vorschläge durchsuchen...">
<datalist id="fussballteams">
<select id="block4_list"></select>
</datalist>
<span class="input-group-btn">
<button class="btn btn-secondary bluebtn" id="abschicken4" type="button">Antworten</button>
</span>
</div><!-- /input-group -->
</div><!-- /list group item -->
<div class="list-group-item">
<input type="radio" name="fussball" value="Andere/kein Fußballfan">
Andere/kein Fußballfan
</div>
<div class="list-group-item">
<input type="radio" name="fussball" value="weiß nicht"> weiß nicht</div>
<div class="list-group-item">
<input type="radio" name="fussball" value="keine Angabe"> keine Angabe
</div>
</div><!-- /list group -->
<div id="alert4" class="customalert hide" role="alert">
Bitte wähle eine Antwortmöglichkeit aus den Suchvorschlägen aus.
</div>
</div> <!-- /#frage4 -->
<div id="results4" class="results hide">
<div><span id="antwort4"></span></div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" id="do4" class="tglbtn btn btn-secondary active">DO</button>
<button type="button" id="de4" class="tglbtn btn btn-secondary">DE</button>
</div>
<span> (befragte Dortmunder=188)</span>
<div id="chart4"></div>
<div>
<br>
Hier trennt sich die Spreu vom Weizen, ähm, der Dortmunder vom Stadtfremden. Denn Dortmund ist Fußballstadt, daran besteht kein Zweifel: Während in ganz Deutschland fast 40 Prozent angeben, sich gar nicht für Fußball zu interessieren, sind es in Dortmund nicht einmal 15.
Wer bei dieser Frage Punkte machen will, hält natürlich zum BVB: Nach den YouGov-Schätzungen ist er der Lieblingsverein von 7 von 10 Dortmundern.<br>
Selbst Bayern München schafft in Dortmund nicht einmal die Fünf-Prozent-Hürde, obwohl der Rekordmeister in ganz Deutschland als einziger Verein mehr Fans hat als Dortmund.<br>
Außerdem wenig überraschend: Schalke 04, der ohnehin Lieblingsverein von weniger als 3 Prozent der deutschen Bevölkerung ist, büßt in Dortmund zusätzlich ein und kommt nur auf magere 2 Prozent.
</div>
</div>
</div>
</div>
<div class="jumbotron">
<div class="container" id="block5"><h2 id="p5">Autos</h2></div>
<div class="container">
<div id="frage5">
<div class="list-group">
<div class="list-group-item disabled">
Von welchem Hersteller ist dein hauptsächlich genutzter PKW?
</div>
<div class="list-group-item">
<div class="input-group">
<input type="text" id="input5" class="form-control" list="automarken" placeholder="Vorschläge durchsuchen...">
<datalist id="automarken">
<select id="block5_list"></select>
</datalist>
<span class="input-group-btn">
<button class="btn btn-secondary bluebtn" id="abschicken5" type="button">Antworten</button></span>
</div><!-- /input-group -->
</div><!-- /list group item -->
<div class="list-group-item">
<input type="radio" name="auto" value="Sonstige"> Sonstige</div>
<div class="list-group-item">
<input type="radio" name="auto" value="ich fahre kein Auto"> ich fahre kein Auto</div>
<div class="list-group-item">
<input type="radio" name="auto" value="weiß nicht"> weiß nicht</div>
<div class="list-group-item">
<input type="radio" name="partei" value="keine Angabe"> keine Angabe</div>
</div><!-- /list group -->
<div id="alert5" class="customalert hide" role="alert">
Bitte wähle eine Antwortmöglichkeit aus den Suchvorschlägen aus.
</div>
</div> <!-- /#frage5 -->
<div id="results5" class="results hide">
<div><span id="antwort5"></span></div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" id="do5" class="tglbtn btn btn-secondary active">DO</button>
<button type="button" id="de5" class="tglbtn btn btn-secondary">DE</button>
</div>
<span> (befragte Dortmunder=191)</span>
<div id="chart5"></div>
<div>
<br>VW ist nicht nur in Dortmund, sondern auch in ganz Deutschland der beliebteste Autohersteller. Die Dortmunder verzichten aber deutlich öfter ganz aufs Auto als der durchschnittsdeutsche. Schließlich ist man im Ruhrgebiet so gut angebunden, das Bus und Bahn auch eine solide Alternative bilden.
</div>
</div>
</div>
<div class="jumbotron">
<div class="container" id="block6"><h2 id="p6">Lieblingstier</h2></div>
<div class="container">
<div id="frage6">
<!-- Hunde oder Kazen -->
<div class="list-group">
<div class="list-group-item disabled">
Bist du eher...
</div>
<div class="list-group-item">
<input type="radio" name="hundkatze" value="Hundefreund"> Hundefreund</div>
<div class="list-group-item">
<input type="radio" name="hundkatze" value="Katzenfreund"> Katzenfreund</div>
<div class="list-group-item">
<input type="radio" name="hundkatze" value="Weder noch"> Weder noch</div>
<div class="list-group-item">
<input type="radio" name="hundkatze" value="weiß nicht/keine Angabe"> weiß nicht/keine Angabe
</div>
</div>
<button type="button" id="abschicken6" class="btn bluebtn">Antworten abschicken</button>
<div id="alert6" class="customalert hide" role="alert">
Die Ergebnisse werden angezeigt, sobald du die Fragen beantwortest.
</div>
</div> <!-- /#frage6 -->
<div id="results6" class="results hide">
<div><span id="antwort6"></span></div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" id="do6" class="tglbtn btn btn-secondary active">DO</button>
<button type="button" id="de6" class="tglbtn btn btn-secondary">DE</button>
</div>
<span> (befragte Dortmunder=107)</span>
<div id="chart6"></div>
<div>
<br>In Dortmund sind die Hundefreunde in der Überzahl, mehr noch als im deutschen Durchschnitt. Doch egal, ob ihr Hundeliebhaber, Katzenmensch oder doch etwas ganz anderes seid: Bei dieser Frage ist jede Wahl die richtige.</div>
</div>
</div>
</div>
<div class="jumbotron">
<div class="container" id="score">
<h2>Dein Ergebnis</h2>
</div>
<div class="container">
<div id="notyet" class="list-group-item disabled">
Beantworte alle Fragen und finde heraus, wie viel Dortmund in dir steckt!
</div> <!-- /#notyet -->
<div id="done" class="results hide list-group-item disabled">
<div align=center style="font-size:150%;font-family: 'Open Sans Condensed', sans-serif">
<span style="vertical-align: top"><br>Du hast </span>
<b id="endscore" style="font-size:250%">XX/100</b>
<span style="font-size:150%">Punkten erreicht</span>
</div>
<div style="font-size:150%" id="score_low" class="hide">
<br>Sicher, dass du nicht aus Gelsenkirchen bist?!?<br>
Nein, jetzt mal ernsthaft: Sie haben zwar relativ wenige Gemeinsamkeiten mit dem typischen Dortmunder. Aber wer will schon gewöhnlich sein? Unsere Stadt lebt schließlich von der Vielfalt ihrer Bewohner!
</div>
<div style="font-size:150%" id="score_middle" class="hide">
<br>Du passt schon ganz gut in die Stadt, doch ein typischer Dortmunder bist du – statistisch gesehen – noch nicht. Aber: Es wäre ja auch schlimm, wenn wir alle gleich wären!
</div>
<div style="font-size:150%" id="score_high" class="hide">
<br>Herzlichen Glückwunsch, in dir steckt ein ganzer Dortmunder! Dir macht niemand ein X für einen U-Turm vor. Diese Stadt ist genau die richtige für dich!
</div>
<div align=center style="font-size:150%" id="share">
<br><b>Teile dein Ergebnis mit Freunden:</b><br><br>
<a href="https://www.facebook.com/sharer/sharer.php?u=rn.de%2FWieDortmundBistDu&t=Wie%20Dortmund%20bist%20du%3F" title="Share on Facebook" target="_blank" id="facebook-result">
<i class="fa fa-2x fa-facebook-official" style="color:#4862A3"></i>
</a>
<a href="https://twitter.com/intent/tweet?source=rn.de%2FWieDortmundBistDu&text=Wie%20Dortmund%20bist%20du%3F%20Teste%20dich%20selbst%20und%20finde%20heraus%20wie%20viel%20Dortmund%20in%20dir%20steckt.%20rn.de%2FWieDortmundBistDu" target="_blank" title="Tweet" id="twitter-result">
<i class="fa fa-2x fa-twitter" style="color:#55ACEE"></i>
</a>
<a href="mailto:?&subject=Wie Dortmund bist du?&body=Teste%20dich%20selbst%20und%20finde%20heraus%20wie%20viel%20Dortmund%20in%20dir%20steckt.%20rn.de%2FWieDortmundBistDu" target="_blank" title="Tweet" id="mail-result">
<i class="fa fa-2x fa-envelope" style="color:#5a5a5a"></i>
</a>
</div>
</div>
</div>
</div>
<hr style="margin-top: 70px">
<div class="jumbotron">
<div class="container" align=center>
<br><b>Impressum</b><br><br>
Ein Internetauftritt der Verlag Lensing-Wolff GmbH & Co. KG<br><br>
Verlag Lensing-Wolff GmbH & Co. KG<br>
Westenhellweg 86-88, 44137 Dortmund<br>
Sitz Dortmund, Amtsgericht Dortmund, HRA 12780<br><br><br>
Komplementärin: Verlag Lensing-Wolff Verwaltungsgesellschaft mbH<br>
Sitz Dortmund, Amtsgericht Dortmund, HRB 13619<br><br><br>
Geschäftsführer:<br>
Lambert Lensing-Wolff, Christoph Sandmann, Hans-Christian Haarmann<br><br><br>
Verantwortlich i.S.v. § 55 RStV:<br>
Dr. Wolfram Kiwit<br><br><br>
Telefon (0231) 9059 - 0<br>
Telefax (0231) 9059 - 8707
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="data/data.js"></script>
<script src="js/vendor/highcharts.js"></script>
<script src="js/vendor/highcharts-more.js"></script>
<script src="js/vendor/treemap.js"></script>
<script src="js/main.js"></script>
<script src="js/charts.js"></script>
</body>
</html>