forked from ncase/crowds
-
Notifications
You must be signed in to change notification settings - Fork 0
/
vi.html
1678 lines (1324 loc) · 55.7 KB
/
vi.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>Sự khôn ngoan và/hay sự điên cuồng của đám đông</title> <!-- <title>(TRANSLATE this part only)</title> -->
<meta name="description" content="Một trò chơi tương tác giải thích về mạng lưới xã hội của con người"/> <!-- 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="Sự khôn ngoan và/hay sự điên cuồng của đám đông"> <!-- content="(TRANSLATE this part only)" -->
<meta itemprop="description" content="Một trò chơi tương tác giải thích về mạng lưới xã hội của con người"> <!-- content="(TRANSLATE this part only)" -->
<meta itemprop="image" content="http://ncase.me/crowds/social/thumb.png">
<meta name="twitter:title" content="Sự khôn ngoan và/hay sự điên cuồng của đám đông"> <!-- content="(TRANSLATE this part only)" -->
<meta name="twitter:description" content="Một trò chơi tương tác giải thích về mạng lưới xã hội của con người"> <!-- 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="Sự khôn ngoan và/hay sự điên cuồng của đám đông"> <!-- content="(TRANSLATE this part only)" -->
<meta property="og:description" content="Một trò chơi tương tác giải thích về mạng lưới xã hội của con người"> <!-- 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">bỏ qua ></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">Bật</span> <!-- TRANSLATE -->
<span id="sound_off">Tắt</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">
Sự khôn ngoan và/hay sự điên cuồng của đám đông <!-- TRANSLATE -->
</span>
<span id="share_desc">
<!-- TRANSLATOR: keep this on ONE LINE or the social sharing will break! -->
Vì sao các nhóm người lại cư xử thông minh, ngu ngốc, tốt bụng hoặc độc ác? Một trò chơi về mạng lưới con người: <!-- TRANSLATE -->
</span>
</div>
<div id="navigation">
<!-- The chapters -->
<!-- TRANSLATE all the Chapter names! -->
<div chapter="Introduction">
<span>0</span>
<span>0. Giới thiệu</span>
</div>
<div chapter="Networks">
<span>1</span>
<span>1. Kết nối</span>
</div>
<div chapter="Simple">
<span>2</span>
<span>2. Sự lây lan</span>
</div>
<div chapter="Complex">
<span>3</span>
<span>3. Sự lây lan phức tạp</span>
</div>
<div chapter="BB">
<span>4</span>
<span>4. Liên kết & bắc cầu</span> <!-- note: & is html for the "and" sign -->
</div>
<div chapter="SmallWorld">
<span>5</span>
<span>5. Đó là một thế giới nhỏ bé</span>
</div>
<div chapter="Conclusion">
<span>6</span>
<span>6. Kết luận...</span>
</div>
<div chapter="Credits">
<span>7</span>
<span>7. Credits</span>
</div>
<div chapter="Sandbox">
<span>★</span>
<span>★ Sandbox Mode! ★</span>
</div>
<!-- A divider -->
<span class="nav_divider"></span>
<!-- Bonus Notes & References -->
<div modal="bonus">
<span>?</span>
<span>Bonus Boxes!</span> <!-- TRANSLATE -->
</div>
<div modal="references">
<span style="margin-top: 7px; font-size: 35px;">*</span>
<span>Links & References</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>Các ngôn ngữ</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>đang tải...</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;">
<span>Sự</span>
<br>
<span style="font-size: 60px;letter-spacing: 4px;">KHÔN NGOAN</span>
<span style="position:relative;top: -10px;">,</span>
<span style="font-size: 60px;">ĐIÊN RỒ</span>
<br>
<span style="position: relative;top: -11px;">của</span>
<br>
<span style="font-size: 100px;line-height: 80px;position: relative;top: -15px; display:block;">ĐÁM ĐÔNG</span>
</div>
<div style="color:#999">
<!-- TRANSLATE note: comment out the line below... -->
thời gian chơi: 30 phút •
<!-- ...and UN-comment + TRANSLATE this line! -->
by nicky case • translated by [Nghia Le] • <a href='.'>original in English</a>
</div>
</words>
<words id="preloader_button">
<next></next>
</words>
<words id="preloader_loading">
loading...
</words>
<words id="preloader_play">
let's play! <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">
<br><br>
Ngài Issac Newton khá chắc rằng mình là 1 người
<br>
thông minh. Ý tôi là, sau khi sáng tạo ra giải tích và
<br>
luật vạn vật hấp dẫn, ông có đủ thông minh để
<br>
thực hiện vài vụ đầu tư tài chính, phải không? Dù sao thì, tóm tắt lại, ông
<br>
mất $4,600,000 (đổi ra đồng $ hiện tại) trong vụ
<br>
bùng nổ tài chính với tên gọi bong bóng South Sea (tên công ty) năm 1720.
<br><br>
Theo như Newton nói: <i>“Tôi có thể tính được chuyển động
<br>
của một người trên thiên đàng, những không tính được sự điên cuồng của con người.”</i>
<next>quá buồn cho ông <div class="rarr"></div> </next>
</words>
<words id="intro_2">
<div style="height:0.5em"></div>
Tất nhiên, đó không phải lần duy nhất
<br>
mà các thị trường, các cơ quan, hay cả nền
<br>
dân chủ trở nên rối tung — sự <i>điên cuồng</i> của
<br>
đám đông. Và vào lúc đó, cái lúc bạn vừa mất niềm tin vào nhân loại,
<br>
bạn lại thấy mọi người phối hợp để giúp đỡ nhau trong
<br>
những khó khăn, công đồng nghĩ ra hướng giải quyết cho các vấn đề,
<br>
con người đấu tranh vì một thế giới tốt đẹp hơn — sự <i>khôn ngoan</i> của đám đông!
<div style="height:0.5em"></div>
<b>Nhưng <i>tại sao</i> một số đám đông lại trở nên điên cuồng, hoặc khôn ngoan?</b> Không một lý thuyết
nào có thể giải thích mọi thứ,
<br>
nhưng tôi tin một lĩnh vực nghiên cứu mới
<b>khoa học mạng lưới</b>, có thể chỉ dẫn cho ta! Và ý tưởng chính của nó như sau:
<br>
để có thể hiểu về đám đông, ta không nên nhìn vào những <i>cá thể
<br>
độc lập</i>, mà nên nhìn vào...
<next>...các <i>kết nối</i> của họ. <div class="rarr"></div> </next>
</words>
<!-- Networks -->
<words id="networks_tutorial_start">
<b>Hãy vẽ 1 mạng lưới!</b>
Mỗi một kết nối biểu thị một tình bạn giữa 2 người
</words>
<words id="networks_tutorial_connect">
Vẽ 1 kết nối.
</words>
<words id="networks_tutorial_disconnect">
gạch để xóa
</words>
<words id="networks_tutorial_end">
mời bạn nghịch ngợm thoải mái, khi nào xong thì
<next wiggle>tiếp tục nào <div class="rarr"></div> </next>
</words>
<words id="networks_threshold">
Bây giờ, các quan hệ xã hội đem lại nhiều hơn là chỉ làm bức tranh đẹp hơn.
Con người <i>nhìn từ</i> các mối quan hệ của họ để thấy thế giới của họ.
Ví dụ, mọi người nhìn vào bạn bè, đồng nghiệp để
tìm ra <b>bao nhiều % trong số bạn bè của họ</b> (không tính bản thân) là,
thế nào nhỉ, những kẻ say xỉn. <icon name="yellow"></icon>
</words>
<words id="networks_threshold_instruction">
<b>Vẽ/xóa kết nối, và quan sát điều gì xảy ra! <div class="rarr"></div> </b>
</words>
<words id="networks_threshold_end">
<next>Tốt, đã hiểu.</next>
</words>
<words id="networks_pre_puzzle">
Tuy nhiên, mạng lưới có thể <i>đánh lừa</i> con người.
Cũng như việc Trái đất có vẻ là phẳng vì chúng ta sống trên nó,
con người có thể hiểu sai về xã hội bởi vì họ ở <i>bên trong</i> nó.
</words>
<words id="optional_reading">
<div style="position:absolute; top:5px;">
<i>tùy ý</i> tài liệu tham khảo! ↑
</div>
<div style="position:absolute; left:216px; top:10px;">
↓ links and references
</div>
</words>
<words id="networks_pre_puzzle_2">
<bon id="books"></bon>
<br>
Ví dụ, 1 nghiên cứu năm 1991<ref id="drunk"></ref> chỉ ra rằng
“Hầu hết mọi sinh viên khai rằng bạn bè của họ uống rượu nhiều hơn họ.”
Nhưng điều đó là không thể!
Làm sao có thể như vậy?
Well, bạn chuẩn bị tìm ra câu trả lời, bằng cách vẽ một mạng lưới.
Đã đến lúc để
<next>ĐÁNH LỪA MỌI NGƯỜI <div class="rarr"></div> </next>
</words>
<words id="networks_puzzle">
<b style="font-size:2em">GIỜ GIẢI ĐỐ!</b>
<br>
Lừa <i>mọi người</i> vào trong suy nghĩ rằng
phần lớn bạn bè của họ (ít nhất đạt ngưỡng 50%) là những kẻ say xỉn <icon name="yellow"></icon>
(mặc dù những người bình thường đông gấp đôi!)
</words>
<words id="networks_puzzle_metric">
<b>Đã lừa:</b>
</words>
<words id="networks_puzzle_metric_2">
trong số 9 người
</words>
<words id="networks_puzzle_end">
Chúc mừng! Bạn đã thao túng một nhóm học sinh tin vào
sự phổ biến của một xã hội thiếu lành mạnh! Làm tốt lắm!
<next wiggle>...uh. thanks?</next>
</words>
<words id="networks_post_puzzle">
Cái bạn vừa tạo ra được gọi là Ảo tưởng số đông<ref id="majority"></ref>,
điều cũng dùng để giải thích cho việc mọi người nghĩ tư tưởng chính trị của họ được ủng hộ,
hoặc tại sao chủ nghĩa cực đoan lại có vẻ phổ biến hơn những gì thực sự xảy ra.
<i>Điên rồ.</i>
<bon id="connections"></bon>
Nhưng người ta không chỉ đứng đó <i>nhìn</i> ý tưởng và hành vi của người khác,
họ chủ động <i>làm theo.</i>
Nên bây giờ, hãy nhìn vào thứ mà các nhà khoa học mạng lưới gọi là...
<next>“Sự lây lan!” <div class="rarr"></div> </next>
</words>
<!-- Simple Contagions -->
<words id="simple_simple">
<i>Hãy gác lại các "ngưỡng" thống kê một lúc.</i>
Ở bên dưới: chúng ta có 1 người <icon name="red"></icon> với một số thông tin.
Một số thông tin <i>sai lệch</i>. "Tin vịt", theo giới trẻ ngày nay.
Và mỗi ngày, người đó loan tin, như 1 con virus, đến bạn của người đó.
Rồi những người đó lại báo cho <i>bạn của họ</i>. Cứ như vậy.
<br>
<b>
Bắt đầu sự mô phỏng! <div class="darr"></div>
(p.s: bạn không thể vẽ <i>khi</i> quá trình mô phỏng đang thực hiện)
</b>
</words>
<words id="simple_simple_2">
Lưu ý: mặc dù cái tên khá tiêu cực, "sự lây lan" có thể tốt hoặc xấu (hoặc trung lập hoặc mơ hồ).
Có bằng chứng thống kê rõ ràng<ref id="contagion"></ref> rằng
hút thuốc, sức khỏe, hạnh phúc, xu hướng biểu quyết và mức độ hợp tác
đều là "sự lây lan" --
và ngay cả một vài dẫn chứng về tự sát<ref id="suicides"></ref> và xả súng hàng loạt<ref id="shootings"></ref> cũng vậy.
</words>
<words id="simple_simple_end">
<next wiggle>à thì, thật không hay <div class="rarr"></div> </next>
</words>
<words id="simple_cascade">
Thật sự thì đúng là vậy.
Dù sao thì, <b>GIỜ GIẢI ĐỐ!</b>
<br>
Vẽ một mạng lưới & chạy mô phỏng,
để cho <i>mọi người</i> bị ảnh hưởng bởi "sự lây lan".
<br>
(luật mới: bạn không thể xóa các kết nối <i>dày</i>)
</words>
<words id="simple_cascade_end">
<next wiggle>Quá tuyệt luôn! <div class="rarr"></div> </next>
</words>
<words id="simple_post_cascade">
Sự lây lan điên cuồng này được gọi là <b>"thác thông tin"</b>.
Newton thất bại vì việc đó vào 1720.
Khủng hoảng tài chính thế giới năm 2008 xảy ra cũng vì thế.<ref id="subprime"></ref>
<br><br>
Tuy nhiên: <i>việc mô phỏng này không đúng.</i>
Hầu hết ý tưởng <i>không</i> phát tán như virus.
Với nhiều tín ngưỡng và hành vi, bạn cần "tiếp xúc" với sự lây lan nhiều hơn một lần
để bị "nhiễm".
Vì vậy, các nhà khoa học mạng lưới đã nảy ra một mô tả mới, tốt hơn
cho việc phát tán ý tưởng/hành vì, và họ gọi nó là...
<next wiggle>“Sự lây lan <i>phức tạp</i>!” <div class="rarr"></div> </next>
</words>
<!-- Complex Contagions -->
<words id="complex_complex">
Quay trở lại ví dụ về "ngưỡng" và say xỉn <icon name="yellow"></icon>!
Khi bạn chơi lần đầu, mọi người không thay đổi hành vi của mình.
<br><br>
Giờ, hãy mô phỏng chuyện xảy ra khi mọi người bắt đầu uống rượu
<i>khi 50%+ bạn họ uống!</i>
<b>Trước khi bắt đầu, hãy tự hỏi điều gì <i>sẽ</i> xảy ra.</b>
<br><br>
<b>Giờ hãy bắt đầu và xem sự thật! <div class="rarr"></div> </b>
</words>
<words id="complex_complex_2">
<span style="line-height:1.3em; display:block;">
Không giống như lây lan "tin vịt" trước đó <icon name="red"></icon>,
sự lây lan này <icon name="yellow"></icon> <i>không</i> ảnh hưởng đến tất cả!
Vài người đầu tiên bị "nhiễm", vì mặc dù họ chỉ tiếp xúc với 1
người say, người đó chiếm tới 50% số bạn của họ. (phải, họ cô đơn)
Ngược lại, người gần cuối của chuỗi <i>không bị</i> "nhiễm",
vì khi họ tiếp xúc với những người bạn say xỉn,
những người đó không đạt ngưỡng 50% số bạn.
<div style="height:0.75em"></div>
Sự <i>tương quan</i> % của những người bạn bị "nhiễm" có ảnh hưởng.
<i>Đó là</i> sự khác nhau giữ <b>thuyết lây lan phức tạp</b><ref id="complex"></ref>,
và <b>thuyết đơn giản lây-lan-như-virus</b>
(bạn có thể nghĩ "lây lan đơn giản" chỉ là sự lây lan với ngưỡng 0%)
<div style="height:0.75em"></div>
Tuy nhiên, sự lây lan chưa chắc đã là xấu —
vậy là đủ cho sự <i>điên cuồng</i> đám đông, thế còn...
<next>...sự <i>khôn ngoan</i> đám đông?</next>
</span>
</words>
<words id="complex_complex_3">
Ở đây, chúng ta có 1 người <icon name="blue"></icon> tình nguyện cho... xem nào,
cứu hộ, hoặc dạy cho trẻ em bị thiệt thòi ở cộng đồng địa phương, đại loại thế.
Mấu chốt là, đó là sự lây lan "tốt".
Lần này, hãy để ngưỡng ở 25% —
mọi người sẵn sàng tình nguyện, nhưng chỉ khi ít nhất 25% bạn của họ cũng làm.
Hey, thiện chí cũng cần sự ủng hộ xã hội.
<br><br>
<b>← Làm cho mọi người "nhiễm" thiện chí!</b>
</words>
<words id="complex_complex_3_end">
<span style="line-height:1.3em; display:block;">
<b>LƯU Ý:</b> Tình nguyện chỉ là <i>1</i> trong nhiều sự lây lan phức tạp!
Ngoài ra còn: cử tri bầu cử, thói quen sống,
thách thức niềm tin của bạn,
dành thời gian để hiểu 1 vấn đề sâu — mọi thứ
cần nhiều hơn một lần "tiếp xúc".
Lây lan phức tạp không <i>nhất thiết</i> phải khôn,
nhưng trở nên khôn ngoan là sự lây lan phức tạp.
<div style="height:0.75em"></div>
(Vậy cái gì là lây lan <i>đơn giản</i> ở đời thực?
Thường là những chuyện vặt như, "chồn opossum có 13 núm vú"<ref id="possum"></ref>)
<bon id="contagions"></bon>
Bây giờ, để <i>thực sự</i> chỉ ra sức mạnh và sự kì lạ của lây lan phức tạp, hãy quay lại...
<next>...câu đố trước <div class="rarr"></div> </next>
</span>
</words>
<words id="complex_cascade">
Nhớ cái này không? Lần này là với lây lan <i>phức tạp</i> <icon name="blue"></icon>, nó sẽ khó hơn một tẹo...
<br>
<b>Thử "lây nhiễm" mọi người với trí khôn phức tạp! <div class="darr"></div></b>
</words>
<words id="complex_cascade_feel_free">
(cứ tự nhiên ấn 'start' và <i>thử</i> các nhiều cách càng tốt)
</words>
<words id="complex_cascade_end">
<next wiggle>HOT DANG <div class="rarr"></div> </next>
</words>
<words id="complex_post_cascade">
Giờ, có thể bạn nghĩ là chỉ cần thêm các kết nối để phát tán bất kì sự lây lan nào,
"phức tạp" hay "đơn giản", tốt hay xấu, khôn hay điên.
Liệu có thật là như vậy? À thì, hãy quay lại...
</words>
<words id="complex_post_cascade_end">
<next wiggle>...một câu đố trước đó khác <div class="rarr"></div> </next>
</words>
<words id="complex_prevent">
Nếu bạn nhấn "start", sự lây lan phức tạp <icon name="blue"></icon> sẽ phát tán ra khắp nơi.
Không có gì bất ngờ.
Nhưng bây giờ, hãy làm <i>ngược lại</i> tất cả những gì chúng ta đã làm trước đó:
<b>vẽ một mạng <i>để chống lại</i> sự lây lan ra mọi người xung quanh! <div class="darr"></div></b>
</words>
<words id="complex_prevent_2">
Bạn thấy chưa?
Trong khi thêm kết nối luôn tăng sự phát tán của ý tưởng <i>đơn giản</i>,
<b>nhiều kết nối có thể làm giảm sự phát tán của ý tưởng <i>phức tạp</i>!</b>
(khiến bạn tự hỏi về internet, hm?)
Và đây không chỉ là vấn đề trên lý thuyết. Nó có thể trở thành vấn đề sống...
</words>
<words id="complex_prevent_end">
<next wiggle>...hoặc chết. <div class="rarr"></div> </next>
</words>
<words id="complex_groupthink">
Những người ở NASA là những người thông minh.
Ý tôi là, họ dùng các lý thuyết của Newton để đưa ta lên gặp chị Hằng.
Dù sao thì, tóm tắt lại, năm 1986,
<i>mặc cho sự cảnh báo từ các kĩ sư</i>,
họ phóng <i>Challenger</i>,
thứ đã phát nổ và giết 7 người.
Nguyên nhân tức thì:
Sáng hôm đó trời quá lạnh.
<div style="height:0.9em"></div>
Nguyên nhân ít tức thì hơn: quản lý bỏ qua lời cảnh báo.
Vì sao? Vì <b>Tư duy tập thể</b><ref id="groupthink"></ref>.
Họ trở nên chống lại những ý tưởng phức tạp mà thách thức niềm tin hoặc cái tôi của họ.
<div style="height:0.9em"></div>
Đó là cách tổ chức rơi vào điên cuồng của đám đông.
Nhưng làm sao ta "sắp đặt" cho <i>sự khôn ngoan</i> của đám đông?
Ngắn gọn, 2 thứ:
<next>Liên kết & Bắc cầu <div class="rarr"></div> </next>
</words>
<!-- Bonding & Bridging -->
<words id="bonding_1">
← Quá ít kết nối, và ý tưởng không thể truyền đi.
<br>
Quá nhiều kết nối, và bạn có tư duy tập thể. <div class="rarr"></div>
</words>
<words id="bonding_2">
<b>
Vẽ 1 nhóm thỏa mãn:
chỉ cần vừa đủ để ý tưởng phức tạp lan rộng!
<div class="darr"></div>
</b>
</words>
<words id="bonding_end">
Đơn giản!
Số lượng kết nối <i>trong</i> 1 nhóm gọi là <b>liên kết xã hội chính</b><ref id="social_capital"></ref>.
Thế còn các kết nối
<next wiggle>...<i>giữa</i> các nhóm?</next>
</words>
<words id="bridging_1">
Có thể bạn cũng đã đoán được,
số lượng các kết nối <i>giữa</i> các nhóm được gọi là
<b>bắc cầu xã hội chính</b>.
Điều này quan trọng vì nó giúp các nhóm thoát khỏi cái giếng của họ!
<br>
<b>Xây dựng cầu, để "nhiễm" mọi người với trí khôn phức tạp:</b>
</words>
<words id="bridging_end">
Cũng giống như liên kết, bắc cầu cũng có một điểm hoàn hảo.<ref id="bridge"></ref>
(thử thách thêm: thử vẽ 1 cái cầu dày đến mức sự lây lan phức tạp
<i>không thể</i> xuyên qua!)
Giờ chúng ta đã biết cách "thiết kế" các kết nối <i>bên trong</i> và <i>giữa</i> các nhóm, hãy...
<next wiggle>...làm CẢ HAI cùng lúc!</next>
</words>
<words id="bb_1">
<b style="font-size:2em">CÂU ĐỐ CUỐI!</b>
<br>
Vẽ các kết nối bên trong nhóm (liên kết) và giữa các nhóm (bắc cầu)
để phát tán sự khôn ngoan cho toàn bộ đám đông:
</words>
<words id="bb_2">
Chúc mừng, bạn vừa vẽ một dạng rất đặc biết của mạng lưới!
Mạng lưới với sự phối hợp tốt của liên kết và bắc cầu
là rất quan trọng, và được gọi là
<next wiggle>“Mạng lưới Small-world” <div class="rarr"></div> </next>
</words>
<words id="bb_small_world_1">
<i>"Thống nhất mà không có đồng nhất". "Đa dạng mà không có chia rẽ". "E Pluribus Unum: out of many, one".</i>
<br>
Không quan trọng nó được diễn giải thế nào,
con người trải qua thời gian và văn hóa thường dẫn đến cùng một ý của trí khôn:
<b>
một xã hội lành mạnh cần sự kết hợp hoàn hảo của liên kết <i>bên trong</i> nhóm
và cầu nối <i>giữa</i> các nhóm.
</b>
Nghĩa là:
</words>
<words id="bb_small_world_2">
Không phải cái này...
<br>
(vì ý tưởng không thể lan truyền)
</words>
<words id="bb_small_world_3">
hay cái này...
<br>
(vì sẽ tạo thành tư duy tập thể)
</words>
<words id="bb_small_world_4">
...mà là <i>CÁI NÀY:</i>
</words>
<words id="bb_small_world_5">
Các nhà khoa học mạng lưới có một định nghĩa toán học về trí khôn lâu đời này:
<b>Mạng lưới Small-world</b><ref id="small_world"></ref>.
Sự kết hợp tối ưu của liên kết và bắc cầu miêu tả các
tế bào thần kinh nối với nhau<ref id="swn_neurons"></ref>,
thúc đẩy sáng tạo tập thể<ref id="swn_creativity"></ref>
và giải quyết vấn đề<ref id="swn_social_physics"></ref>,
và một lần giúp tổng thống Mĩ John F. Kennedy (vừa đủ) tránh chiến tranh hạt nhân!<ref id="swn_jfk"></ref>
Vì thế, đây là một vấn đề to lớn.
</words>
<words id="bb_small_world_end">
<next>Ok, hãy tóm gọn nó lại nào... <div class="rarr"></div> </next>
</words>
<!-- Sandbox -->
<words id="sandbox_caption">
(pst... Muốn biết một bí mật không?<ref id="sandbox"></ref>)
</words>
<words id="sandbox_contagion">
Sự lây lan:
</words>
<words id="sandbox_contagion_simple">
đơn giản
</words>
<words id="sandbox_contagion_complex">
phức tạp
</words>
<words id="sandbox_color_chooser">
Màu sắc của sự lây lan:
</words>
<words id="sandbox_tool_chooser">
Chọn công cụ...
</words>
<words id="sandbox_tool_pencil">
Vẽ mạng lưới
</words>
<words id="sandbox_tool_add">
Thêm người
</words>
<words id="sandbox_tool_add_infected">
Thêm "bị ảnh hưởng"
</words>
<words id="sandbox_tool_move">
Kéo/thả người
</words>
<words id="sandbox_tool_delete">
Xóa người
</words>
<words id="sandbox_tool_clear">
<b>XÓA TẤT CẢ</b>
</words>
<words id="sandbox_shortcuts_label">
(...hoặc, dùng phím tắt!)
</words>
<words id="sandbox_shortcuts">
[1]: Thêm người [2]: Thêm "bị ảnh hưởng"
<br>
[Space]: Kéo/thả [Backspace]: Xóa
</words>
<!-- Conclusion -->
<words id="conclusion_1">
<div style="font-size: 30px;">
KẾT LUỘN: tất cả đều là về...
</div>
<div style="
width: 100%;
position: absolute;
font-size: 88px;
top: 20px;
line-height: 100px; display:block;
">
Sự lây lan & Sự kết nối
</div>
<div style="
width: 710px;
position: absolute;
top: 125px;
left: 250px;
">
<b>Sự lây lan:</b>
Như cách tế bào thần kinh truyền tín hiệu trong não,
con người truyền tư tưởng & hành vi trong xã hội.
Chúng ta không chỉ tác động đến bạn bè ta,
chúng ta còn tác động đến bạn của bạn bè, và kể cả bạn của bạn của bạn bè!<ref id="three_degrees"></ref>
(“hãy trở thành sự thay đổi mà bạn muốn thấy trên thế giới” ... ...)
Nhưng cũng như tế bào thần kinh, không chỉ có tín hiệu quan trọng, mà còn...
</div>
<div style="
width: 710px;
position: absolute;
top: 290px;
left: 250px;
">
<b>Sự kết nối:</b>
Quá ít sự kết nối và ý tưởng phức tạp không thể lan rộng.
Quá <i>nhiều</i> kết nối và ý tưởng phức tạp sẽ bị chà đạp bới Tư duy tập thể.
Phương pháp là tạo ra mạng lưới small-world, sự kết hợp tối ưu của
liên kết và bắc cầu: <i>e pluribus unum.</i>
</div>
<div style="
width: 350px;
position: absolute;
top: 410px;
left: 220px;
text-align: center;
color: #999;
">
(Muốn tạo ra mô phỏng của riêng bạn?
xem qua chế độ Sandbox, bằng cách nhấn vào nút (★) bên dưới!)
</div>
<div style="
width: 400px;
position: absolute;
top: 395px;
right: 0px;
text-align: right;
">
Thế còn câu hỏi ngày từ lúc đầu?
Vì <i>sao</i> một số đám đông trở nên...
</div>
<div style="
width: 300px;
position: absolute;
top: 460px;
right: 0px;
">
<next>...khôn ngoan và/hay điên cuồng?</next>
</div>
</words>
<words id="conclusion_2">
<span style="line-height:1.4em; display:block;">
<div style="height:0.5em"></div>
Từ Newton đến NASA cho đến
<br>
khoa học mạng lưới, chúng ta đã khái quát nhiều thứ
<br>
hôm nay. Tóm lại, sự điên cuồng của đám đông
<br>
không nhất thiết tại vì <i>cá thể độc lập</i>, mà từ
<br>
cách chúng ta mắc kẹt trong mạng lưới.
<div style="height:0.5em"></div>
Điều đó <i>KHÔNG</i> có nghĩa là bỏ qua trách nhiệm cá nhân, vì
<br>
chúng ta cũng là người <i>dệt nên</i> tấm mạng lưới đó. Vì thế, cải thiện sự lây lan của bạn:
<br>
hãy hoài nghi về những ý tưởng tâng bốc bạn<ref id="flatter"></ref>, bỏ thời gian ra để hiểu
<br>
ý tưởng phức tạp. Và, cải thiện các kết nối của bạn: liên kết với những người cùng
tư tưởng, nhưng cũng xây cầu nối qua sự phân chia văn hóa, chính trị.
<div style="height:0.5em"></div>
Chúng ta có thể dệt nên mạng lưới thông minh. Tất nhiên nó khó hơn việc nghịch ngợm
<br>
mấy đoạn thẳng trên màn hình...
<next>...nhưng nó xứng đáng.</next>
</span>
</words>
<words id="conclusion_3">
<i>
“Những chiến thắng lớn và bi kịch trong lịch sử được tạo ra,
không phải bởi những người căn bản là tốt hoặc căn bản là xấu,
mà là bởi những người về căn bản là con người.”
</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;">
Tạo ra bởi:</span>
<div style="font-size: 3em; line-height: 1.0em;">
NICKY CASE</div>
<a target="_blank" href="http://ncase.me" style="text-decoration:none">
xem những sản phẩm khác của tôi</a> ·
<a target="_blank" href="https://twitter.com/ncasenmare" style="text-decoration:none">
follow my tweeter</a>
<br><br>
<span style="color:#777; position:relative; top:5px; display: inline-block; margin-top: 15px;">
rất yêu quý và cảm ơn</span>
<div style="font-size: 3em; line-height: 1.0em;">
NHỮNG NGƯỜI ĐÃ ỦNG HỘ TÔI</div>
<a onclick='publish("reference/show", ["supporters"]);'>
xem tên & bức vẽ về họ</a> ·
<a onclick='publish("reference/show", ["playtesters"]);'>
xem những người thử nghiệm</a>
<br>
<a target="_blank" href="https://www.patreon.com/ncase" style="text-decoration:none">
giúp tôi làm thêm nhiều sản phẩm hơn! <3</a>