-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
397 lines (363 loc) · 20.4 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
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Mobil-O-Mat</title>
<meta name="description" content="Mobil-O-Mat zur Kommunalwahl Ulm 2019 - Mit dem Mobil-O-Mat kannst du deine Standpunkte zum Thema „Mobilität in Ulm“ mit denen der Kandidat:innen der Kommunalwahl 2019 abgleichen.">
<meta itemprop="name" content="Mobil-O-Mat zur Kommunalwahl Ulm 2019">
<meta itemprop="description" content="Mit dem Mobil-O-Mat kannst du deine Standpunkte zum Thema „Mobilität in Ulm“ mit denen der Kandidat:innen der Kommunalwahl 2019 abgleichen.">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Mobil-O-Mat zur Kommunalwahl Ulm 2019">
<meta name="twitter:description" content="Mit dem Mobil-O-Mat kannst du deine Standpunkte zum Thema „Mobilität in Ulm“ mit denen der Kandidat:innen der Kommunalwahl 2019 abgleichen.">
<meta name="twitter:creator" content="@ulmAPI">
<meta name="twitter:image:src" content="https://www.ulmapi.de/mobil-o-mat/assets/images/mobilomat-og.png">
<meta name="og:title" content="Mobil-O-Mat zur Kommunalwahl Ulm 2019">
<meta name="og:description" content="Mit dem Mobil-O-Mat kannst du deine Standpunkte zum Thema „Mobilität in Ulm“ mit denen der Kandidat:innen der Kommunalwahl 2019 abgleichen.">
<meta name="og:image" content="https://www.ulmapi.de/mobil-o-mat/assets/images/mobilomat-og.png">
<meta name="og:locale" content="de_DE">
<script src="assets/data/data.js" defer></script>
<script src="assets/js/mustache.min.js" defer></script>
<script src="assets/js/zepto.min.js" defer></script>
<script src="assets/js/index.js" defer></script>
<link type="text/css" rel="stylesheet" href="assets/fonts/icomoon/font.css">
<link type="text/css" rel="stylesheet" href="assets/fonts/raleway/font.css">
<link type="text/css" rel="stylesheet" href="assets/fonts/open-sans/font.css">
<link type="text/css" rel="stylesheet" href="assets/css/style.css">
<link type="image/png" rel="icon" href="favicon.png">
</head>
<body>
<header id="header">
<a aria-label="Hamburger-Menü-Icon" href="javascript:;" id="burger"><i class="icon-menu"></i></a>
<div class="logo">
<div tabindex="0" id="logo"></div>
</div>
<div id="menu">
<ul>
<li class="sub-pages"><a href="#dom" data-show="dom">Über den Mobil-O-Mat</a></li>
<li class="sub-pages"><a href="#orgs" data-show="orgs">Über uns</a></li>
<li class="sub-pages"><a href="#impressum" data-show="impressum">Impressum</a></li>
<li class="sub-pages"><a href="#privacy" data-show="privacy">Datenschutz</a></li>
</ul>
</div>
</header>
<div class="wrapper">
<div id="app" class="show-intro">
<div class="app-item" id="intro">
<div class="row">
<h2>Mobil-O-Mat</h2>
<h3>zur Kommunalwahl Ulm 2019</h3>
<p>
Mit dem Mobil-O-Mat kannst du deine Standpunkte zum Thema „Mobilität in Ulm“ mit denen der Kandidat:innen der Kommunalwahl 2019 abgleichen.
</p>
<noscript>
<h2>Bitte JavaScript aktivieren</h2>
<p class="noscript-message">
Der Mobil-O-Mat benötigt JavaScript.
</p>
</noscript>
<button class="activate"><span class="btn-icon">→</span> Jetzt Mobilitäts-Positionen vergleichen!</button>
<p>
Er ist selbstverständlich nur als Automat ohne Hirn zu verstehen und spricht keine Wahlempfehlungen aus – kann und soll aber gern als Anhaltspunkt und Gedankenanreger dienen.
</p>
<p>
Für ihre Stellungnahmen zu den Thesen sind die Kandidat:innen selbst verantwortlich. Alle 22 Thesen wurden von Bürgerinnen und Bürgern der Stadt Ulm generiert.
</p>
<p>
Die Thesen wurden den Kandidat:innen des ersten Listenplatzes zugesendet, sowie an die allgemeine Funktionsmailadresse der Parteien. Der Mobil-O-Mat hat alle bis zum 23.04.2019 eingetroffenen Antworten erfasst. Ob die Antwort für eine Person oder eine gesamte Partei steht, ist entsprechend markiert.
</p>
<p><strong>Update 20. Mai:</strong> Es wurde im Nachgang die Position der Piratenpartei Ulm hinzugefügt. <a href="#dom" target="_blank">Mehr erfahren</a></p>
</div>
<div class="row">
<!--<img class="image-margin" src="assets/images/Digital-o-Mat_Europakarte_v03.svg" alt="Europakarte">-->
</div>
</div>
<div class="app-item" id="questionnaire">
<h2>Mobilitäts-Themen zur Kommunalwahl 2019 in Ulm</h2>
<p>
Einfach jeweils »stimme zu«, »neutral« oder »stimme nicht zu« auswählen und erfahren, wie die Kandidat:innen dazu stehen und mit welchen die Übereinstimmung am größten ist:
</p>
<form id="questions" method="post" action="javascript:;"></form>
<button id="calculate">Übereinstimmung berechnen</button>
<div id="result"></div>
</div>
<div class="app-item" id="dom">
<h2>Informiert eine Wahlentscheidung treffen</h2>
<p>
Die Kommunalwahl in Ulm steht vor der Tür und wie bei jeder Wahl stellt sich die Frage, wer denn eigentlich welche Position einnimmt und für was steht. Kaum ein Thema spaltet die Ulmer:innen dabei mehr als die Fragen der Mobilität.
</p>
<p>
Interessierte Bürgerinnen und Bürger haben sich daher zusammengesetzt, um im Rahmen des <a href="https://verschwoerhaus.de/mobilitaetsmontag-2-kommunalwahl-edition/">Mobilitätsmontags</a> Thesen zu formulieren und an die lokalen Politiker:innen auf Listenplatz 1 der jeweiligen Parteien zu senden sowie an die allgemeine Parteien-Mailadresse.
</p>
<p>
Als Antwort bekamen wir <s>sechs</s> sieben<sup>*</sup> unterschiedliche Meinungsbilder, welche entweder für die Meinung der Partei oder die eigenen Position der Kandidat:innen stehen.
</p>
<p>Folgende Personen sprechen in Ihrem Namen:</p>
<ul>
<li>Birgit Schäfer-Oelmayer (eigene Antworten, nicht generalisierte Sichtweise der CDU)</li>
<li>Erik Wischmann (eigene Antworten, nicht generalisierte Sichtweise der FDP)</li>
</ul>
<p>Folgende Personen sprechen im Namen Ihrer Partei:</p>
<ul>
<li>Eva-Maria Glathe-Braun (im Namen der LINKEN Ulm)</li>
<li>Martin Ansbacher (im Namen der SPD Ulm)</li>
<li>Denise Niggemeier (im Namen des Bündnis für lebenswerte Ortschaften Ulm)</li>
<li>Michael Joukov-Schwelling (im Namen der GRÜNEN Ulm)</li>
<li>Stefan Baur (im Namen der Piratenpartei Ulm)<sup>*</sup></li>
</ul>
<p>
Der Mobil-O-Mat soll dabei als Anreiz dienen, sich intensiv mit der Kommunalwahl zu befassen und sich mit den Positionen der Kandidat:innen auseinanderzusetzen. Er ersetzt keine intensive Auseinandersetzung mit einzelnen Positionen und Vorhaben von Kandidat:innen.
</p>
<p>
* <strong>Update 20. Mai:</strong> Der <em>Piratenpartei Ulm</em> und <em>Ulm für alle</em> wurden die Fragen nicht zugestellt, da zum Zeitpunkt der Abfrage unklar war, ob eine Kandidat:innenliste zugelassen wird. Die Piratenpartei Ulm hat die Fragen des Mobil-O-Maten im Nachgang hierzu beantwortet. Ihr war damit bei der Beantwortung der Fragen die Position der anderen Kandidat:innen bereits bekannt.
</p>
<h3>So funktioniert der Mobil-O-Mat</h3>
<p>
Du kannst dich auf dieser Website per Klick zu Mobilitätsthemen zustimmend, neutral oder ablehnend positionieren. Der Mobil-O-Mat vergleicht anschließend die gewählten Positionen mit der Meinung der Partei bzw. der eigenen Position der Kandidat:innen. Zusätzlich erklärt die Seite die Streitthemen kurz und bietet weiterführende Informationen.
</p>
<button class="activate"><span class="btn-icon">→</span> Jetzt Mobilitäts-Positionen vergleichen!</button>
</div>
<div class="app-item" id="orgs">
<h2>Über uns</h2>
<p>
Im Herbst 2009 liefen langsam die Fäden zusammen, aus denen zunächst Ende 2010 ein Wiki mit Datenquellen in Ulm und Anfang 2011 die datalove-Hochschulgruppe an der Uni Ulm wurden. Damals war noch überhaupt nicht klar, dass wir alle 2014 Teil eines deutschlandweiten Netzwerks werden würden, oder gar, dass am Ende ein Verschwörhaus entstehen könnte.
</p>
<div class="org">
<h3><a href="https://www.ulmapi.de">ulmAPI</a></h3>
<img alt="Logo ulmAPI" src="assets/images/ulmapi.svg">
<p>
Eins zog sich aber immer wie ein roter Faden durch fast alles, was in Ulm geschah: Immer gab es irgendetwas zum Thema Mobilität und öffentlichem Nahverkehr. Das OK Lab Ulm (so heißt es seit einigen Jahren) ist seit Eröffnung des Verschwörhauses 2016 immer ein wenig in allen Projekten mitgeschwebt; die Team- und Arbeitstreffen rückten dabei zuletzt ein wenig in den Hintergrund.
</p>
<p>
Zum Beinahe-10-jährigen haben wir das geändert und treffen uns im etwa-monatlichen-Zyklus wieder um uns ganz besonders mit offenen Daten rund um Mobilität zu beschäftigen. Doch nicht nur offene Daten stehen im Fokus, sondern auch aktuelle politische und wirtschaftliche Themen, welche die Mobilität in Ulm (und um Ulm herum) beeinflussen. Dabei treffen sich am <a href="https://verschwoerhaus.de/mobilitaetsmontag-2-kommunalwahl-edition">Mobilitätsmontag</a> eine ganze Reihe neuer Interessierter aus Ulm und Neu-Ulm, die sich für die Verknüpfung von IT und Mobilität begeistern – aus der Forschung aus Uni und Hochschule, aus der Civic-Tech-Bewegung, und auch aus diversen Verwaltungsteilen und der Zivilgesellschaft. Allen gemeinsam: Sie treffen sich nicht, weil sie müssen, sondern weil sie wollen – und der Fokus liegt auf dem Machen, nicht dem Wollen.
</p>
<p>
<a href="https://www.ulmapi.de" title="Link zu ulmAPI">https://www.ulmapi.de</a>
</p>
</div>
<button class="activate"><span class="btn-icon">→</span> Jetzt Mobilitäts-Positionen vergleichen!</button>
</div>
<div class="app-item" id="impressum">
<h2>Diensteanbieter</h2>
<p>
ulmAPI, vertreten durch:<br/>
Open Knowledge Foundation Deutschland e.V.<br/>
Singerstraße 109<br/>
10179 Berlin
</p>
<p>
E-Mail: data<!-- ! -->love@<!-- at -->uni-ulm<!-- .example -->.de
</p>
<p>
Eintragung im Vereinsregister<br/>
Vereinsregister-Nummer: VR 30468 B<br/>
Vereinsregister-Gericht: Amtsgericht Charlottenburg (Berlin) Steuernummer: 27/674/52428<br/>
Umsatzsteuer-Identifikationsnummer: DE278022128
</p>
<h3>Haftung für Inhalte</h3>
<p>
Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit,
Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als
Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den
allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht
verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen
zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der
Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche
Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei
Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.
</p>
<h3>Haftung für Links</h3>
<p>
Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb
können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der
verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten
wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige
Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar.
</p>
<h3>Urheberrecht</h3>
<p>
Sofern nicht anders angegeben und mit Ausnahme der hier verwendeten Logos, stehen die Inhalte dieser Seite unter der
Creative-Commons-Lizenz Namensnennung 4.0 International (<a href="https://creativecommons.org/licenses/by/4.0/legalcode">CC
BY-SA 4.0</a>). Die Software des Mobil-O-Maten wurde von <a href="https://dsst.io/">Data Science &
Stories</a> entwickelt, von <a href="https://gitlab.com/jengeb/digital-o-mat">Jennifer Gebske</a> weiterentwickelt und <a href="https://github.com/UlmApi/mobil-o-mat">für Ulm angepasst</a>. Es befindet sich unter der <a href="https://gitlab.com/jengeb/digital-o-mat/blob/master/LICENSE.md">MIT
License</a>.
</p>
<p>
<a href="https://icomoon.io/">Icomoon Free</a> von <a href="http://keyamoon.com/">KeyaMoon</a> (<a href="https://creativecommons.org/licenses/by/4.0/">CC
BY 4.0</a>);
<a href="http://www.entypo.com/">Entypo+</a> von <a href="http://www.danielbruce.se/">Daniel Bruce</a> (<a href="https://creativecommons.org/licenses/by-sa/4.0/">CC
BY-SA 4.0</a>);
<a href="http://www.opensans.com/">Open Sans</a> (Apache License 2.0);
<a href="https://github.com/impallari/Raleway">Raleway</a> (SIL OFL 1.1);
<a href="http://zeptojs.com/">Zepto.js</a> (MIT License);
<a href="https://github.com/janl/mustache.js">Mustache.js</a> (MIT License).
</p>
</div>
<div class="app-item" id="privacy">
<h2>Datenschutzerklärung</h2>
<p>
Personenbezogene Daten werden auf dieser Webseite nur im technisch notwendigen Umfang erhoben. In keinem Fall werden die erhobenen Daten verkauft oder aus anderen Gründen an Dritte weitergegeben. Im Folgenden erhältst du einen Überblick über die von uns im Rahmen dieser Website erhobenen Daten:
</p>
<h3>Keine Speicherung deiner Auswahl und des Vergleichsergebnisses</h3>
<p>
Deine inhaltliche Auswahl zu den Positionen im Mobil-O-Maten und das Ergebnis deines Vergleichs werden nicht an den Server zurückübermittelt; vielmehr läuft der Mobil-O-Mat einschließlich des Vergleichs vollständig im Arbeitsspeicher deines Endgeräts. Entsprechend sind für uns weder individuelle noch aggregierte Analysen der Nutzung des Mobil-O-Maten möglich. Diese möglichst datensparsame Umsetzung ist der Grund, warum wir technisch auf JavaScript zurückgreifen, welches entsprechend in deinem Web-Browser aktiviert sein muss, um den Mobil-O-Maten verwenden zu können.
</p>
<h3>Nicht-personenbezogene Server-Logs</h3>
<p>
Bei Laden der Webseite des Mobil-O-Maten werden zwangsläufig von deinem Web-Browser bestimmte Daten an den Server übermittelt. Diese Daten werden vorübergehend in sogenannten Log-Files gespeichert. Dies umfasst üblicherweise Informationen über den Typ und die Version des verwendeten Browsers, das verwendete Betriebssystem, die Referrer URL (die Webseite, von der aus du zu dieser Website gelangt bist), die IP Adresse des zugreifenden Rechners sowie die Uhrzeit der Serveranfrage. In der Regel lassen sich diese Daten nicht bestimmten Personen – und damit auch nicht Dir – zuordnen. ulmAPI hat keinen Zugriff auf den Inhalt dieser Log-Files.
</p>
</div>
</div>
</div>
<footer>
<div class="wrapper">
<p>
Ein unsere-Stadt-is-ned-Deppert-Projekt von <a href="https://www.ulmapi.de"><img src="assets/images/ulmapi.svg" alt="ulmAPI" /></a>
</p>
</div>
</footer>
</body>
<script id="tmpl-questions" type="x-tmpl-mustache">
{{#question}}
<div class="question-wrapper" data-q="{{id}}" id="q{{id}}">
<div class="question-title">
<span class="question-big-number">{{num}}</span>
<h3 class="question-label"><span class="question-small-number">{{num}}</span> {{label}}</h3>
<p>{{&question}}
{{#anyInfo}}
<p>
<button class="more-info-button">Mehr Info</button>
<button class="less-info-button">Info zuklappen</button>
</p>
<div class="questions-info">
{{#terms}}
<p><b>{{#term}}{{term}}{{/term}}</b>: {{&explanation}}</p>
{{/terms}}
{{#hasInfotext}}
<p class="margin-backgroundinfo"><b>Weitere Hintergrundinformationen</b></p>
{{/hasInfotext}}
{{#links}}
{{#link}}
<p>
<a class="questions-info-link" href="{{link}}" target="_blank">
{{#title}}{{title}}{{/title}}
{{#date}}({{date}}){{/date}}
</a>
</p>
{{/link}}
{{/links}}
{{#infotext}}
{{#link}}
<p>
<a class="questions-info-link" href="{{link}}" target="_blank">
{{#title}}{{title}}{{/title}}
{{^title}}{{link}}{{/title}}
{{#date}}({{date}}){{/date}}
</a>
</p>
{{/link}}
{{^link}}
{{#title}}
<p>{{title}}</p>
{{/title}}
{{/link}}
{{/infotext}}
</div>
{{/anyInfo}}
</p>
</div>
<div id="radio-button-wrapper" class="radio-button-wrapper">
<div class="radio-button-group">
<input type="radio" id="q{{id}}a0" name="q{{id}}a" value="2">
<label for="q{{id}}a0">
<span class="radio-button-group-label">stimme zu</span>
</label>
</div>
<div class="radio-button-group">
<input type="radio" id="q{{id}}a1" name="q{{id}}a" value="1">
<label for="q{{id}}a1">
<span class="radio-button-group-label">neutral</span>
</label>
</div>
<div class="radio-button-group">
<input type="radio" id="q{{id}}a2" name="q{{id}}a" value="0">
<label for="q{{id}}a2">
<span class="radio-button-group-label">stimme nicht zu</span>
</label>
</div>
</div>
</div>
{{/question}}
</script>
<script id="tmpl-result" type="x-tmpl-mustache">
<div id="comparison">
<h2>Dein Ergebnis im Überblick</h2>
<p>Die folgenden Prozentzahlen geben an, zu wieviel Prozent deine Position mit den Positionen der Parteivertreter:innen übereinstimmt.</p>
<p>Nicht bei allen Vertreter:innen steht ihre jeweilige Position für die gesamte Partei. In diesen Fällen wird statt des Parteinamens zuerst der Name der Person genannt.</p>
<p><strong>Update 20. Mai:</strong> Es wurde im Nachgang die Position der Piratenpartei Ulm hinzugefügt. <a href="#dom" target="_blank">Mehr erfahren</a></p>
<ol class="comparison-wrapper">
{{#comparison}}
<li>
{{#personal_statement}}
<h4>{{person_name}}</h4>
<p class="percentage">
<span class="percentage-bar" style="width: {{width}}%;"></span>
<span class="percentage-label">{{percent}} %</span>
</p>
<small class="person" title="{{party_long}}">{{party_short}}</small>
{{/personal_statement}}
{{^personal_statement}}
<h4 title="{{party_long}}">{{party_short}}</h4>
<p class="percentage">
<span class="percentage-bar" style="width: {{width}}%;"></span>
<span class="percentage-label">{{percent}} %</span>
</p>
<small class="person">{{person_name}}</small>
{{/personal_statement}}
</li>
{{/comparison}}
</ol>
</div>
<div id="detail">
<h2>Die Positionen der Parteivertreter:innen im Detail</h2>
<p>Nicht bei allen Vertreter:innen steht ihre jeweilige Position für die gesamte Partei. In diesen Fällen wird statt des Parteinamens zuerst der Name der Person genannt.</p>
<ul class="detail-table">
{{#detail}}
<li id="detail-{{id}}">
<h3><span>{{num}}</span> {{label}}</h3>
<p>{{&question}}</p>
<ul class="answers">
{{#answers}}
<li class="answer{{#selected}} selected{{/selected}}">
<h4 class="type-{{answer_type}}">{{answer_label}}</h4>
{{#selected}}
<span class="you">Deine Position</span>
{{/selected}}
<ul class="parties">
{{#parties}}
<li class="party explanation">
{{#personal_statement}}
<h5>{{person_name}}</h5>
<small class="person">{{party_short}}</small>
{{/personal_statement}}
{{^personal_statement}}
<h5 title="{{party_long}}">{{party_short}}</h5>
<small class="person">{{person_name}}</small>
{{/personal_statement}}
</li>
{{/parties}}
{{^parties}}
<li class="party no-party">
<em>Niemand vertrat diese Position.</em>
</li>
{{/parties}}
</ul>
</li>
{{/answers}}
</ul>
</li>
{{/detail}}
</ul>
</div>
</script>
</html>