-
Notifications
You must be signed in to change notification settings - Fork 99
/
de.html
1679 lines (1331 loc) · 54.6 KB
/
de.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
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!--
THE WISDOM AND/OR MADNESS OF CROWDS
by Nicky Case | apr 2018
- - - - - - - - - - -
FAN TRANSLATION GUIDE:
https://github.com/ncase/crowds#how-to-translate-this-thing
Hello fan-translaters! Thank you so, so much for your help.
I hope you know what you've gotten yourself into.
There's about 3600+ WORDS to translate, including
the Bonus Boxes and References.
To make things easier (or less painful, anyway) I've marked
what needs to be translated and how with big "TRANSLATE" comments.
Ctrl+F for "TRANSLATE" in uppercase to see what needs to be translated!
BUT BEFORE YOU TRANSLATE ANYTHING, DO THIS:
1) Look up the two-letter code of the language you're translating to:
https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
2) *COPY* index.html, and name the copy [two-letter-code].html
For example: de.html, ar.html, zh.html, etc...
3) Translate *THAT* page. Do NOT modify the original index.html!
And once you're done, go to "translations.txt", and follow the
instructions there to let this game "know" your translation exists.
Good luck, and thanks again!
<3,
~ Nicky Case
-->
<!DOCTYPE html>
<html>
<head>
<!-- Meta Info -->
<title>Die Weisheit und/oder der Wahnsinn der Massen</title> <!-- <title>(TRANSLATE this part only)</title> -->
<meta name="description" content="eine interaktive Anleitung zu menschlichen Netzwerken"/> <!-- content="(TRANSLATE this part only)" -->
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta charset="utf-8">
<link rel="icon" type="image/png" href="favicon.png">
<!-- Sharing -->
<meta itemprop="name" content="Die Weisheit und/oder der Wahnsinn der Massen"> <!-- content="(TRANSLATE this part only)" -->
<meta itemprop="description" content="eine interaktive Anleitung zu menschlichen Netzwerken"> <!-- content="(TRANSLATE this part only)" -->
<meta itemprop="image" content="http://ncase.me/crowds/social/thumb.png">
<meta name="twitter:title" content="Die Weisheit und/oder der Wahnsinn der Massen"> <!-- content="(TRANSLATE this part only)" -->
<meta name="twitter:description" content="eine interaktive Anleitung zu menschlichen Netzwerken"> <!-- content="(TRANSLATE this part only)" -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ncasenmare">
<meta name="twitter:creator" content="@ncasenmare">
<meta name="twitter:image" content="http://ncase.me/crowds/social/thumb.png">
<meta property="og:title" content="Die Weisheit und/oder der Wahnsinn der Massen"> <!-- content="(TRANSLATE this part only)" -->
<meta property="og:description" content="eine interaktive Anleitung zu menschlichen Netzwerken"> <!-- content="(TRANSLATE this part only)" -->
<meta property="og:type" content="website">
<meta property="og:url" content="http://ncase.me/crowds/">
<meta property="og:image" content="http://ncase.me/crowds/social/thumb.png">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="css/index.css?v=3">
</head>
<body>
<!-- THE SLIDESHOW -->
<div id="container">
<!-- Simulation(s) in background -->
<div id="simulations_container">
<div id="simulations"></div>
</div>
<!-- Slideshow: words & buttons -->
<div id="slideshow_container">
<div id="slideshow"></div>
</div>
<!-- Scratch Transition -->
<canvas id="scratch" width="711" height="400"></canvas>
<!-- Skip -->
<div id="skip">überspringen ></div> <!-- TRANSLATE -->
<!-- Modal -->
<div id="modal_container">
<div id="modal_bg"></div>
<div id="modal">
<div id="modal_close">⨯</div>
<div id="modal_content_container">
<div id="modal_content"></div>
</div>
</div>
</div>
</div>
<!-- Navigation: Audio, Contents, Share, Translations -->
<div id="navigation_container">
<div id="sound" mute="no">
<div id="sound_icon"></div>
<span id="sound_on">AN</span> <!-- TRANSLATE -->
<span id="sound_off">AUS</span> <!-- TRANSLATE -->
</div>
<div id="sharing">
<a id="fb" target="_blank" href="TODO"></a>
<a id="tw" target="_blank" href="TODO"></a>
<a id="em" target="_blank" href="TODO"></a>
<span id="share_title">
Die Weisheit und/oder der Wahnsinn der Massen <!-- TRANSLATE -->
</span>
<span id="share_desc">
<!-- TRANSLATOR: keep this on ONE LINE or the social sharing will break! -->
Warum verhalten sich Gruppen schlau, dumm, freundlich, grausam? Eine interaktive Anleitung zu menschlichen Netzwerken: <!-- TRANSLATE -->
</span>
</div>
<div id="navigation">
<!-- The chapters -->
<!-- TRANSLATE all the Chapter names! -->
<div chapter="Introduction">
<span>0</span>
<span>0. Einleitung</span>
</div>
<div chapter="Networks">
<span>1</span>
<span>1. Verbindungen</span>
</div>
<div chapter="Simple">
<span>2</span>
<span>2. Ansteckungen</span>
</div>
<div chapter="Complex">
<span>3</span>
<span>3. Komplexe Ansteckungen</span>
</div>
<div chapter="BB">
<span>4</span>
<span>4. Verbinden & Überbrücken</span> <!-- note: & is html for the "and" sign -->
</div>
<div chapter="SmallWorld">
<span>5</span>
<span>5. Die Welt ist klein</span>
</div>
<div chapter="Conclusion">
<span>6</span>
<span>6. Zum Schluss...</span>
</div>
<div chapter="Credits">
<span>7</span>
<span>7. Danksagungen</span>
</div>
<div chapter="Sandbox">
<span>★</span>
<span>★ Sandkasten-Modus! ★</span>
</div>
<!-- A divider -->
<span class="nav_divider"></span>
<!-- Bonus Notes & References -->
<div modal="bonus">
<span>?</span>
<span>Bonus-Boxen!</span> <!-- TRANSLATE -->
</div>
<div modal="references">
<span style="margin-top: 7px; font-size: 35px;">*</span>
<span>Links & Literatur</span> <!-- TRANSLATE -->
</div>
<div modal="translations">
<span style="margin-top:5px; position:relative;"><span style="
position: absolute;
top: -8px;
left: 6px;
">A</span><span style="
position: absolute;
font-size: 16px;
top: -1px;
left: 16px;
">あ</span></span>
<span>Übersetzungen</span> <!-- TRANSLATE -->
</div>
<!-- The hover bubble -->
<span id="nav_bubble"></span>
</div>
<div id="translations"></div>
<div id="social"></div>
</div>
<!-- The Pencil -->
<div id="pencil_container">
<canvas id="pencil"></canvas>
</div>
<!-- Preloader -->
<div id="pre_preloader">
<div>laden ...</div> <!-- TRANSLATE -->
</div>
</body>
</html>
<!-- - - - - -->
<!-- SCRIPTS -->
<!-- - - - - -->
<script src="js/lib/helpers.js"></script>
<script src="js/lib/minpubsub.src.js"></script>
<script src="js/lib/howler.min.js"></script>
<script src="js/lib/Key.js"></script>
<script src="js/lib/Mouse.js"></script>
<script src="js/lib/Sprite.js"></script>
<script src="js/slideshow/Slideshow.js"></script>
<script src="js/slideshow/Pencil.js"></script>
<script src="js/slideshow/Boxes.js"></script>
<script src="js/slideshow/Scratch.js"></script>
<script src="js/slideshow/Navigation.js"></script>
<script src="js/slideshow/SimUI.js"></script>
<script src="js/slideshow/SandboxUI.js"></script>
<script src="js/slideshow/Modal.js"></script>
<script src="js/slideshow/Preloader.js"></script>
<script src="js/slideshow/Translations.js?v=2"></script>
<script src="js/sim/Peep.js?v=2"></script>
<script src="js/sim/Connection.js"></script>
<script src="js/sim/ConnectorCutter.js"></script>
<script src="js/sim/Simulations.js"></script>
<script src="js/chapters/A_Preloader.js"></script>
<script src="js/chapters/B_Introduction.js"></script>
<script src="js/chapters/C_Networks.js"></script>
<script src="js/chapters/D_Simple_Contagion.js"></script>
<script src="js/chapters/E_Complex_Contagion.js"></script>
<script src="js/chapters/F_Bonding_And_Bridging.js"></script>
<script src="js/chapters/G_Small_World.js"></script>
<script src="js/chapters/H_Conclusion.js"></script>
<script src="js/chapters/I_Credits.js"></script>
<script src="js/chapters/J_Sandbox.js?v=2"></script>
<script src="js/main.js"></script>
<!-- - - - - - - - - - - - -->
<!-- THE SLIDESHOW'S WORDS -->
<!-- - - - - - - - - - - - -->
<!--
This is the bulk of what you need to TRANSLATE!
Translate just the text that's within the <tag></tags>
If you're using a code editor (like Sublime Text https://www.sublimetext.com/),
it should automatically highlight what the text is (usually in white).
-->
<span style="display:none">
<!-- Preloader -->
<words id="preloader_title">
<div style="font-size: 30px; position: relative; top: -15px;">
<span>die</span>
<br>
<span style="font-size: 60px;letter-spacing: 4px;">WEISHEIT</span>
<span style="position:relative;top: -10px;">und/oder</span>
<span style="font-size: 60px;">WAHNSINN</span>
<br>
<span style="position: relative;top: -11px;">der</span>
<br>
<span style="font-size: 100px;line-height: 80px;position: relative;top: -25px; display:block;">Massen</span>
</div>
<div style="color:#999; position: relative; top: -30px;">
<!-- TRANSLATE note: comment out the line below... -->
<!--playing time: 30 min • by nicky case, april 2018-->
<!-- ...and UN-comment + TRANSLATE this line! -->
Spielzeit: ca. 30 Minuten • von Nicky Case • übersetzt von Thomas Kluth (Korrekturen von Peter Nerlich, Bernd Fiedler) • <a href='/'>das englische Original</a>
</div>
</words>
<words id="preloader_button">
<next></next>
</words>
<words id="preloader_loading">
laden ...
</words>
<words id="preloader_play">
Los geht's! <div class="rarr"></div>
</words>
<!-- Introduction -->
<!--
TRANSLATE note: to make the text stay in a circle, I added lots of <br> breaks.
You may have to re-arrange the <br>'s in order to do your translation.
It shouldn't look too bad if they're slightly off, though!
Also, <b></b> bolds a word/phrase, and <i></i> italicizes a word/phrase.
-->
<words id="intro">
Sir Isaac Newton war sich
<br>
ziemlich sicher, ein kluger Kopf zu sein.
<br>
Nachdem er die Infinitesimalrechnung und eine
<br>
Gravitationstheorie erfunden hatte, müsste er wohl schlau
<br>
genug sein, etwas Geld zu investieren, oder? Falsch gedacht,
<br>
er verlor 4.600.000 $ (in heutigen US-Dollars) in der landesweiten
<br>
Spekulationswelle, die als „South Sea Bubble“ von 1720 bekannt ist.
<br><br>
Wie Herr Newton später sagte: <i>„Ich kann die Bewegung der
<br>
Himmelskörper berechnen, aber nicht den Wahnsinn der Menschen.“</i>
<next>tja, doof für ihn<div class="rarr"></div> </next>
</words>
<words id="intro_2">
<div style="height:0.5em"></div>
Das ist natürlich nicht das erste Mal, dass
<br>
Märkte, Institutionen oder ganze Demokratien
<br>
verrückt spielten — der <i>Wahnsinn</i> der Massen. Aber
<br>
gerade dann, wenn du die Hoffnung in die Menschheit verlierst, siehst
<br>
du Bürger, die zusammenarbeiten, um sich gegenseitig in Naturkatastrophen
<br>
zu retten, Gemeinschaften, die Lösungen für Probleme schaffen,
<br>
Menschen, die für eine bessere Welt kämpfen — die <i>Weisheit</i> der Massen!
<div style="height:0.9em"></div>
<b>Aber <i>warum</i> entwickeln manche Gruppen Wahnsinn oder Weisheit?</b>
<br>
Keine Theorie kann alles erklären, aber ich glaube, dass ein neues
<br>
Forschungsgebiet, die <b>Netzwerkwissenschaft</b>, uns weiterhelfen kann!
<br>
Der Kerngedanke ist folgender: Um Menschenmassen zu verstehen,
<br>
sollten wir nicht <i>Individuen</i> betrachten, sondern ...
<next>... ihre <i>Verbindungen.</i> <div class="rarr"></div> </next>
</words>
<!-- Networks -->
<words id="networks_tutorial_start">
<b>Lass uns ein Netzwerk zeichnen!</b>
Jede Verbindung repräsentiert eine Freundschaft zwischen Menschen:
</words>
<words id="networks_tutorial_connect">
ziehe, um zu verbinden
</words>
<words id="networks_tutorial_disconnect">
kratze, um zu trennen
</words>
<words id="networks_tutorial_end">
Wenn du mit Kritzeln und Herumprobieren fertig bist,
<next wiggle>dann lass uns fortfahren<div class="rarr"></div> </next>
</words>
<words id="networks_threshold">
Soziale Verbindungen sind mehr als schöne Bildchen.
Menschen <i>nutzen</i> ihre sozialen Verbindungen, um ihre Welt zu verstehen.
So beobachten Leute ihre Altersgenossen, um beispielsweise herauszufinden,
<b>wie viel % ihrer Freunde</b> (sich selbst nicht mitgezählt),
Komasäufer sind. <icon name="yellow"></icon>
</words>
<words id="networks_threshold_instruction">
<b>Zeichne/lösche Verbindungen und schaue, was passiert! <div class="rarr"></div> </b>
</words>
<words id="networks_threshold_end">
<next>cool, verstanden</next>
</words>
<words id="networks_pre_puzzle">
Netzwerke können Menschen aber auch <i>in die Irre führen</i>.
So wie die Erde flach aussieht, weil wir auf ihr stehen, können auch
Menschen falsche Ideen über die Gesellschaft bekommen, weil sie <i>in ihr drinstecken</i>.
</words>
<words id="optional_reading">
<div style="position:absolute; top:5px;">
<i>optionale</i> Extra-Bonus Anmerkungen! ↑
</div>
<div style="position:absolute; left:216px; top:10px;">
↓ Links und Literatur
</div>
</words>
<words id="networks_pre_puzzle_2">
<bon id="books"></bon>
<br>
Zum Beispiel fand eine Studie aus dem Jahr 1991<ref id="drunk"></ref> heraus, dass
„im Prinzip alle Studenten erzählen, dass ihre Freunde mehr als sie selber trinken“.
Das scheint aber doch unmöglich!
Wie kann das sein?
Okay, Du bist dabei, die Antwort selber herauszufinden, indem Du ein Netzwerk zeichnest.
Es ist Zeit ...
<next>alle in die Irre zu führen <div class="rarr"></div> </next>
</words>
<words id="networks_puzzle">
<b style="font-size:2em">Rätselzeit!</b>
<br>
Führe <i>alle</i> in die Irre und zwar so, dass jeder
denkt, dass die Mehrheit seiner/ihrer Freunde (50% Grenzwert) Komasäufer <icon name="yellow"></icon> sind.
(obwohl die Komasäufer nur ein Drittel der Gruppe stellen!)
</words>
<words id="networks_puzzle_metric">
<b>Reingelegt:</b>
</words>
<words id="networks_puzzle_metric_2">
von 9 Leuten
</words>
<words id="networks_puzzle_end">
Glückwunsch! Du hast eine Gruppe von Studierenden so manipuliert, dass sie glauben
eine unglaublich ungesunde soziale Norm sei weit verbreitet! Weiter so!
<next wiggle>... ups. Danke?</next>
</words>
<words id="networks_post_puzzle">
Du hast gerade eine „Mehrheits-Illusion“<ref id="majority"></ref> kreiert.
Diese Illusion erklärt auch, warum Menschen denken, dass ihre politischen Ansichten
Konsens sind oder aber warum Extremismus sehr viel verbreiteter scheint als er tatsächlich ist.
<i>Wahnsinn.</i>
<bon id="connections"></bon>
Aber Menschen <i>beobachten</i> nicht nur passiv die Ideen und das Verhalten anderer.
Sie <i>kopieren</i> sie auch aktiv.
Also, lass uns anschauen was Netzwerkwissenschaftler
<next>„Ansteckungen“ nennen! <div class="rarr"></div> </next>
</words>
<!-- Simple Contagions -->
<words id="simple_simple">
<i>Lass uns diesen „Grenzwert“ für eine Weile beiseite tun.</i>
Unten haben wir eine Person <icon name="red"></icon> mit ein paar Informationen.
Einigen <i>Falsch</i>informationen. „Fake News“, wie die coolen Leute sagen.
Und jeden Tag verbreitet diese Person diese Gerüchte wie einen Virus weiter an Ihre Freunde.
Und die Freunde verbreiten sie weiter an <i>ihre</i> Freunde. Und so weiter.
<br>
<b>
Simulation starten <div class="darr"></div>
(PS: Du kannst nicht zeichnen, <i>während</i> die Simulation läuft)
</b>
</words>
<words id="simple_simple_2">
Hinweis: Trotz des negativen Namens können „Ansteckungen“ gut oder schlecht sein (oder neutral oder uneindeutig).
Es gibt starke statistische Belege<ref id="contagion"></ref> dafür, dass
Rauchen, Gesundheit, Glück, Wahlverhalten und Kooperationswillen
alle „ansteckend“ sind --
und sogar Belege dafür, dass Selbstmorde<ref id="suicides"></ref> und Amokläufe<ref id="shootings"></ref> „ansteckend“ sind.
</words>
<words id="simple_simple_end">
<next wiggle>ok, das ist deprimierend <div class="rarr"></div> </next>
</words>
<words id="simple_cascade">
Ja, das ist es.
Wie auch immer, <b>RÄTSELZEIT!</b>
<br>
Zeichne ein Netzwerk & starte die Simulation so,
dass <i>jeder</i> mit der „Ansteckung“ infiziert wird.
<br>
(neue Regel: Du kannst keine <i>dicken</i> Verbindungen trennen)
</words>
<words id="simple_cascade_end">
<next wiggle>fantastisch <div class="rarr"></div> </next>
</words>
<words id="simple_post_cascade">
Diese Verbreitung des Wahnsinns wird <b>„Informationskaskade“</b> genannt.
Isaac Newton ist 1720 Opfer einer solchen Kaskade geworden.
Die Finanzinstitutionen der Welt sind 2008 Opfer einer solchen Kaskade geworden.<ref id="subprime"></ref>
<br><br>
Aber: <i>Diese Simulation ist falsch.</i>
Die meisten Ideen verbreiten sich <i>nicht</i> wie Viren.
Um von den meisten Überzeugungen und Verhaltensweisen „infiziert“ zu werden, musst Du der Ansteckung
mehr als einmal „ausgesetzt“ sein.
Also haben sich Netzwerkwissenschaftler eine neue, bessere Art überlegt,
mit der sie das Verbreiten von Ideen/Verhalten beschreiben können.
Und sie nennen das ...
<next wiggle>„<i>komplexe</i> Ansteckungen!“ <div class="rarr"></div> </next>
</words>
<!-- Complex Contagions -->
<words id="complex_complex">
Lass uns die „Grenzwerte“ und das Komasaufen-Beispiel <icon name="yellow"></icon> wieder ins Spiel bringen!
Beim ersten Mal haben die Leute ihr Verhalten nicht geändert.
<br><br>
Jetzt simulieren wir, was passiert, wenn die Leute anfangen zu trinken,
<i>wenn mehr als 50% ihrer Freunde das auch tun!</i>
<b>Bevor Du die Simulation startest, denk darüber nach, was du denkst, was passieren <i>sollte</i>.</b>
<br><br>
<b>Ok, starte die Simulation und schau was wirklich passiert! <div class="rarr"></div> </b>
</words>
<words id="complex_complex_2">
<span style="line-height:1.3em; display:block;">
Anders als die „Fake News“-Anteckung <icon name="red"></icon>
verbreitet sich diese Ansteckung <icon name="yellow"></icon> <i>nicht</i> auf alle.
Die ersten paar Leute werden „infiziert“, obwohl sie nur einen Komasäufer als Freund haben.
Das liegt daran, dass dieser eine Komasäufer 50% ihrer Freunde ausmacht. (ja, sie sind einsam)
Im Gegensatz dazu wird die Person am Ende der Kette <i>nicht</i> „infiziert“, obwohl sie
einen Komasäufer als Freund hat. Aber: Insgesamt sind weniger als 50% ihrer Freunde Komasäufer.
<div style="height:0.75em"></div>
Die <i>relativen</i> % von „infizierten“ Freunden ist wichtig.
<i>Das</i> ist der Unterschied zwischen der Theorie der <b>komplexen Ansteckungen</b><ref id="complex"></ref>
und unserer naiven es-verbreitet-sich-wie-ein-Virus Theorie der <b>einfachen Ansteckungen</b>.
(man könnte sagen, dass „einfache Ansteckungen“ Ansteckungen mit einem „mehr als 0%“ Grenzwert sind)
<div style="height:0.75em"></div>
Ansteckungen sind aber nicht notwendigerweise schlecht —
also, genug über den <i>Wahnsinn</i> der Massen, was ist mit ...
<next>... der <i>Weisheit</i> der Massen?</next>
</span>
</words>
<words id="complex_complex_3">
Hier haben wir einen Freiwilligen, der ... Ich weiß nicht, Leute aus Naturkatastrophen rettet,
Nachhilfe für unterprivilegierte Kinder in deren Umgebung gibt oder irgendetwas ähnlich cooles.
Der springende Punkt ist: Es ist eine „gute“ komplexe Ansteckung.
Dieses Mal aber sagen wir, dass der Grenzwert nur 25% ist —
Leute wollen freiwillig helfen, aber nur wenn 25% oder mehr ihrer Freunde das auch machen.
Hey, Ehrenamt braucht ein bisschen soziale Unterstützung.
<br><br>
<b>← „Infiziere“ alle mit den positiven Ideen!</b>
</words>
<words id="complex_complex_3_end">
<span style="line-height:1.3em; display:block;">
<b>Hinweis:</b> Freiwilligenarbeit ist nur <i>eine</i> von vielen komplexen Ansteckungen!
Ein paar andere: Wahlbeteiligung, Alltagsgewohnheiten,
deine Übereugungen anzweifeln,
sich Zeit nehmen, ein Thema komplett zu durchdringen —
alles, dem man mehr als einmal „ausgesetzt“ werden muss.
Komplexe Ansteckungen sind nicht <i>notwendigerweise</i> vernünftig,
aber vernünftig zu sein ist eine komplexe Ansteckung.
<div style="height:0.75em"></div>
(Ok, und was ist eine <i>einfache</i> Ansteckung aus dem echten Leben?
Normalerweise unnütze Fakten, wie z.B. „das Opossum hat 13 Nippel“<ref id="possum"></ref>)
<bon id="contagions"></bon>
Um nun <i>wirklich</i> die Macht und Verrücktheit von komplexen Ansteckungen zu zeigen, lass uns ...
<next>... ein früheres Rätsel erneut anschauen <div class="rarr"></div> </next>
</span>
</words>
<words id="complex_cascade">
Erinnerst du dich? Dieses Mal wird es mit einer <i>komplexen</i> Ansteckung <icon name="blue"></icon> allerdings etwas schwieriger ...
<br>
<b>Versuche jeden mit komplexer Vernunft „anzustecken“! <div class="darr"></div></b>
</words>
<words id="complex_cascade_feel_free">
(Drück einfach „Start“ und <i>probiere</i> so viele Lösungen wie du möchtest)
</words>
<words id="complex_cascade_end">
<next wiggle>KABUMM-TSCHAK <div class="rarr"></div> </next>-
</words>
<words id="complex_post_cascade">
Jetzt glaubst du vielleicht, dass man nur ein paar Verbindungen hinzufügen muss,
um jede Ansteckung zu verbreiten, „komplex“ oder „einfach“, gut oder schlecht,
vernünftig oder verrückt. Aber ist das wirklich so? Lass uns erneut ...
</words>
<words id="complex_post_cascade_end">
<next wiggle>... ein früheres Rätsel anschauen.<div class="rarr"></div> </next>
</words>
<words id="complex_prevent">
Wenn Du unten auf „Start“ drückst, wird sich die komplexe Ansteckung <icon name="blue"></icon> einfach
zu jedem verbreiten. Keinerlei Überraschung.
Aber jetzt tun wir das <i>Gegenteil</i> von dem, was wir vorher getan haben:
<b>Zeichne ein Netzwerk, das das Verbreiten der Ansteckungen auf alle <i>verhindert</i>! <div class="darr"></div></b>
</words>
<words id="complex_prevent_2">
Alles klar?
Mehr Verbindungen helfen immer der Verbreitung von <i>einfachen</i> Ideen,
<b>mehr Verbindungen können aber der Verbreitung von <i>komplexen</i> Ideen schaden!</b>
(jetzt zweifelst du am Internet, was?)
Und das ist nicht nur ein theoretisches Problem. Es kann über Leben entscheiden ...
</words>
<words id="complex_prevent_end">
<next wiggle>... oder Tod. <div class="rarr"></div> </next>
</words>
<words id="complex_groupthink">
Die Leute bei der NASA waren kluge Küpfe.
Immerhin haben sie Newtons Theorien benutzt, um uns zum Mond zu bringen.
Wie auch immer, lange Rede, kurzer Sinn: 1986
<i>trotz Warnungen von Ingenieuren</i>
haben sie die <i>Challenger</i> gestartet,
die explodierte und 7 Menschen tötete.
Die direkte Ursache:
Es war zu kalt an diesem Morgen.
<div style="height:0.9em"></div>
Die indirekte Ursache: Die Manager haben die Warnungen der Ingenieure ignoriert.
Warum? Aufgrund von <b>Gruppendenken</b> <ref id="groupthink"></ref>.
Wenn eine Gruppe <i>zu</i> eng gestrickt ist (wie es üblich ist auf institutioneller Leitungsebene),
dann wird sie immun gegenüber komplexen Ideen, die ihren Glauben oder ihr Ego angreifen.
<div style="height:0.9em"></div>
Ok, so können Institutionen dem Massenwahnsinn verfallen.
Aber wie sieht ein „Design“ für Massen<i>vernunft</i> aus?
In zwei kurzen Wörtern:
<!--TODO bonding? als Verknüpfen übersetzen? Verbindung wäre vll besser, aber ist schon für connections benutzt worden. -->
<next>Verknüpfen & Überbrücken <div class="rarr"></div> </next> -->
</words>
<!-- Bonding & Bridging -->
<words id="bonding_1">
← Zu wenige Verbindungen und eine Idee kann sich nicht verbreiten.
<br>
Zu viele Verbindungen und du bekommst Gruppendenken. <div class="rarr"></div>
</words>
<words id="bonding_2">
<b>
Zeichne eine Gruppe, die genau das Optimum hat:
gerade verbunden genug, um eine komplexe Idee zu verbreiten!
<div class="darr"></div>
</b>
</words>
<words id="bonding_end">
Ok, das war einfach, oder?
Die Anzahl von Verbindungen <i>innerhalb</i> einer Gruppe wird <b>soziales Verknüpfungskapital</b><ref id="social_capital"></ref> genannt.
Was aber ist mit Verbindungen ...
<next wiggle>... <i>zwischen</i> Gruppen?</next>
</words>
<words id="bridging_1">
Wie du vielleicht schon erraten hast, wird
die Anzahl an Verbindungen <i>zwischen</i> Gruppen
<b>soziales Überbrückungskapital</b> gennant.
Das ist wichtig, weil es Gruppen dabei hilft aus ihren inselmäßigen Echokammern auszubrechen!
<br>
<b>Baue eine Brücke, um alle mit komplexer Weisheit zu „infizieren“:</b>
</words>
<words id="bridging_end">
Genauso wie fürs Verknüpfen gibt es auch fürs Überbrücken ein Optimum.<ref id="bridge"></ref>
(Bonusaufgabe: Versuche eine Brücke zu zeichnen, die so dick ist, dass die
komplexe Ansteckung <i>nicht</i> durchkommen kann!)
Jetzt, da wir wissen, wie wir Verbindungen <i>innerhalb</i> und <i>zwischen</i> Gruppen „designen“ können, lass uns ...
<next wiggle>... BEIDES auf einmal machen!</next>
</words>
<words id="bb_1">
<b style="font-size:2em">LETZTES RÄTSEL!</b>
<br>
Zeichne Verbindungen innerhalb Gruppen (Verknüpfungen) und zwischen Gruppen (Überbrückungen),
um in der gesamten Masse Vernunft zu verbreiten:
</words>
<words id="bb_2">
Gratulation, Du hast gerade ein sehr spezielles Netzwerk gezeichnet!
Netzwerke mit der richtigen Mischung aus Verknüpfungen und Überbrückungen
sind ungemein wichtig und sie heißen ...
<next wiggle>„Kleine-Welt-Netzwerke“ <div class="rarr"></div> </next>
</words>
<words id="bb_small_world_1">
<i>„Einheit ohne Gleichmacherei“. „Vielfalt ohne Aufteilung“. „E Pluribus Unum: Aus vielen eines“.</i>
<br>
Völlig egal, wie es genannt wird,
Menschen in allen Zeiten und Kulturen sind oft zur selben Einsicht gelangt:
<b>
eine gesunde Gesellschaft benötigt ein Optimum an Verknüpfungen
<i>innerhalb</i> von Gruppen und Überbrückungen <i>zwischen</i> Gruppen.
</b>
Also:
</words>
<words id="bb_small_world_2">
Nicht das hier ...
<br>
(weil Ideen sich nicht verbreiten können)
</words>
<words id="bb_small_world_3">
auch nicht das hier ...
<br>
(weil du dann Gruppendenken bekommst)
</words>
<words id="bb_small_world_4">
... sondern <i>DAS HIER:</i>
</words>
<words id="bb_small_world_5">
Netzwerkwissenschaftler haben nun eine mathematische Definition für diese uralte Einsicht:
das <b>Kleine-Welt-Netzwerk</b><ref id="small_world"></ref>.
Diese optimale Mischung aus Verknüpfungen+Überbrückungen beschreibt, wie
unsere Neuronen miteinander verbunden sind<ref id="swn_neurons"></ref>,
Kollektive Kreativität<ref id="swn_creativity"></ref>
und Problemlösen gefördert wird<ref id="swn_social_physics"></ref>
und hat sogar einmal US-Präsident John F. Kennedy (knapp) geholfen einen Atomkrieg zu verhindern!<ref id="swn_jfk"></ref>
Also, ja, kleine Welten sind eine große Nummer.
</words>
<words id="bb_small_world_end">
<next>Ok, lass uns zusammenfassen ... <div class="rarr"></div> </next>
</words>
<!-- Sandbox -->
<words id="sandbox_caption">
(Psst, ... möchtest Du ein Geheimnis hören?<ref id="sandbox"></ref>)
</words>
<words id="sandbox_contagion">
Ansteckung:
</words>
<words id="sandbox_contagion_simple">
einfach
</words>
<words id="sandbox_contagion_complex">
komplex
</words>
<words id="sandbox_color_chooser">
Die Farbe der Ansteckung:
</words>
<words id="sandbox_tool_chooser">
Wähle ein Werkzeug ...
</words>
<words id="sandbox_tool_pencil">
Netzwerk zeichnen
</words>
<words id="sandbox_tool_add">
Person hinzufügen
</words>
<words id="sandbox_tool_add_infected">
"Infizierten" hinzufügen
</words>
<words id="sandbox_tool_move">
Person verschieben
</words>
<words id="sandbox_tool_delete">
Person löschen
</words>
<words id="sandbox_tool_clear">
<b>ALLES LÖSCHEN</b>
</words>
<words id="sandbox_shortcuts_label">
(... oder Tastenkombinationen benutzen!)
</words>
<words id="sandbox_shortcuts">
[1]: Person hinzufügen [2]: "Infizierten" hinzufügen
<br>
[Leertaste]: Verschieben [Backspace]: Löschen
</words>
<!-- Conclusion -->
<words id="conclusion_1">
<div style="font-size: 30px;">
ZUSAMMENGEFASST: Es geht um ...
</div>
<div style="
width: 100%;
position: absolute;
font-size: 88px;
top: 20px;
line-height: 100px; display:block;
">
Ansteckungen & Verbindungen
</div>
<div style="
width: 710px;
position: absolute;
top: 125px;
left: 250px;
">
<b>Ansteckungen:</b>
So wie Neuronen Signale im Gehirn verbreiten,
so verbreiten Menschen ihren Glauben und Ihr Verhalten in einer Gesellschaft.
Wir beeinflussen nicht nur unsere Freunde,
sondern auch die Freunde unserer Freunde und sogar die Freunde unserer Freunde unserer Freunde!<ref id="three_degrees"></ref>
(„Sei der Wandel, den Du in der Welt sehen willst” etc. etc.)
Aber, wie bei Neuronen, sind es nicht nur die Signale, die wichtig sind, sondern auch ...
</div>
<div style="
width: 710px;
position: absolute;
top: 275px;
left: 250px;
">
<b>Verbindungen:</b>
Zu wenig Verbindungen und komplexe Ideen können sich nicht verbreiten.
Zu <i>viele</i> Verbindungen und komplexe Ideen werden vom Gruppendenken zerstört.
Der Trick ist es, Kleine-Welt-Netzwerke zu kreieren, also den optimalen Mix aus
Verknüpfungen und Überbrückungen: <i>e pluribus unum.</i>
</div>
<div style="
width: 350px;
position: absolute;
top: 410px;
left: 220px;
text-align: center;
color: #999;
">
(Willst du eine eigene Simulation erstellen?
Schau dir den Sandkasten-Modus an, indem Du unten auf den (★) Knopf klickst!)
</div>
<div style="
width: 400px;
position: absolute;
top: 395px;
right: 0px;
text-align: right;
">
Also, was ist nun mit unserer Frage ganz vom Anfang?
Warum entwicklen Massen <i>tatsächlich</i> ...
</div>
<div style="
width: 300px;
position: absolute;
top: 460px;
right: 0px;
">
<next>... Vernunft und/oder Wahnsinn?</next>
</div>
</words>
<words id="conclusion_2">
<span style="line-height:1.4em; display:block;">
<div style="height:0.5em"></div>
Von Newton über die NASA bis zur
<br>
Netzwerkwissenschaft, wir haben jede Menge geschafft
<br>
heute. Lange Rede, kurzer Sinn: Der Wahnsinn der Massen
<br>
passiert nicht notwendigerweise wegen <i>Individuen</i>, sondern
<br>
er liegt daran, wie wir in einem klebrigen Netz-werk gefangen sind.
<div style="height:0.9em"></div>
Das <i>bedeutet NICHT</i>, persönliche Verantwortung abzuschaffen, weil
<br>
wir genauso auch das Netz selber <i>weben</i>. Also, verbessere deine Ansteckungen:
<br>
Sei skeptisch zu Ideen, die dich begeistern. Investiere Zeit, um komplexe Ideen zu verstehen.
<br>
Verbessere deine Verbindungen: Verknüpfe dich mit ähnlichen Leuten
<br>
aber baue auch Brücken über kulturelle/politische Gräben hinweg.
<div style="height:0.9em"></div>
Wir können ein vernünftiges Netz weben. Klar, es ist schwieriger als
<br>
ein paar Linien auf dem Bildschirm zu kritzeln ...
<next>... aber es ist lohnt sich so so sehr.</next>
</span>
</words>
<words id="conclusion_3">
<i>
„Die größten Triumphe und Tragödien der Geschichte gehen nicht
etwa auf Menschen zurück, die vollkommen gut oder vollkommen böse sind,
sondern darauf, dass Menschen einfach Menschen sind.”
</i>
<br>
<span style="position:relative; top:5px">~</span> Neil Gaiman & Terry Pratchett
<div style="height:0.8em"></div>
<next small><3</next>
</words>
<!-- Credits -->
<words id="credits">
<div style="text-align:center; color:#fff; letter-spacing: 1px; font-size: 24px; line-height: 27px;">
<span style="color:#777; position:relative; top:5px;">
erstellt von</span>
<div style="font-size: 3em; line-height: 1.0em;">
NICKY CASE</div>
<a target="_blank" href="http://ncase.me" style="text-decoration:none">
spiele meinen anderen Krahams</a> ·
<a target="_blank" href="https://twitter.com/ncasenmare" style="text-decoration:none">
folge mir auf Twitter</a>
<br><br>
<span style="color:#777; position:relative; top:5px; display: inline-block; margin-top: 15px;">
ganz viel Liebe und Dank an</span>
<div style="font-size: 3em; line-height: 1.0em;">
MEINE UNTERSTÜTZER AUF PATREON</div>
<a onclick='publish("reference/show", ["supporters"]);'>
schau dir Namen & und Zeichnungen von Unterstützern an</a> ·
<a onclick='publish("reference/show", ["playtesters"]);'>
zeige Spieltester</a>
<br>
<a target="_blank" href="https://www.patreon.com/ncase" style="text-decoration:none">
Hilf mir, mehr solcher Dinge zu machen! <3</a>
<br><br>