-
Notifications
You must be signed in to change notification settings - Fork 98
/
vi.html
1654 lines (1307 loc) · 59.6 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
-->
<!DOCTYPE html>
<html lang="vi"> <!-- lang="(TRANSLATE: set your language code here, same as the page name!) e.g: es, es-ES, pt-BR, ja, it, fr-CA, de, ..." -->
<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">
<link rel="alternate" href="http://ncase.me/crowds/" hreflang="en">
<link rel="alternate" href="http://ncase.me/crowds/cs.html" hreflang="cs">
<link rel="alternate" href="http://ncase.me/crowds/es.html" hreflang="es-ES">
<link rel="alternate" href="http://ncase.me/crowds/es-MX.html" hreflang="es-MX">
<link rel="alternate" href="http://ncase.me/crowds/fr.html" hreflang="fr">
<link rel="alternate" href="http://ncase.me/crowds/it.html" hreflang="it">
<link rel="alternate" href="http://ncase.me/crowds/ja.html" hreflang="ja">
<link rel="alternate" href="http://ncase.me/crowds/pt.html" hreflang="pt">
<link rel="alternate" href="http://ncase.me/crowds/ru.html" hreflang="ru">
<link rel="alternate" href="http://ncase.me/crowds/uk.html" hreflang="uk">
<link rel="alternate" href="http://ncase.me/crowds/vi.html" hreflang="vi">
<link rel="alternate" href="http://ncase.me/crowds/zh-CN.html" hreflang="zh-CN">
<link rel="alternate" href="http://ncase.me/crowds/zh-TW.html" hreflang="zh-TW">
<!-- 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/vi.html">
<meta property="og:image" content="http://ncase.me/crowds/social/thumb.png">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="css/index.css?v=7">
</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 trong nhóm người ta lại cư xử thông minh, ngu ngốc, tốt bụng hay độc ác? Một trò chơi tương tác 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. Sự 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. 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. Tác quyền</span>
</div>
<div chapter="Sandbox">
<span>★</span>
<span>★ Sân chơi riêng! ★</span>
</div>
<!-- A divider -->
<span class="nav_divider"></span>
<!-- Bonus Notes & References -->
<div modal="bonus">
<span>?</span>
<span>Nội dung thêm!</span> <!-- TRANSLATE -->
</div>
<div modal="references">
<span style="margin-top: 7px; font-size: 35px;">*</span>
<span>Liên kết ngoài</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 bản dịch</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! -->
tác giả nicky case • dịch bởi [Nghia Le] • <!-- <a href='.'>original in English</a> -->
</div>
</words>
<words id="preloader_button">
<next></next>
</words>
<words id="preloader_loading">
đang tải...
</words>
<words id="preloader_play">
Bắt đầu chơi <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à một người <br>
thông minh. Sau khi phát minh ra giải tích và luật vạn <br>
vật hấp dẫn, ông ta đủ thông minh để thực hiện vài vụ đầu tư <br>
tài chính, phải không? Nhưng, ông ấy đã mất $4.600.000 <br>
(đổi ra đồng $ hiện tại) trong vụ bong bóng kinh tế <br>
South Sea Bubble năm 1720.
<br><br>
Theo như Newton nói: <i>“Tôi có thể tính được chuyển động của các <br>
vật thể trong vũ trụ, 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 mà <br>
các thị trường, các cơ quan, hay cả nền dân chủ <br>
trở nên rối tung — sự <i>điên cuồng</i> của đám đông. <br>
Vậy mà ngay khi bạn vừa mất niềm tin vào nhân loại, bạn lại thấy <br>
con người hợp tác để giúp đỡ nhau trong thiên tai, <br>
cộng đồng cùng chung sức giải quyết các vấn đề xã hội, cùng <br>
đấ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><br>
Không có lý thuyết nào có thể giải thích mọi thứ, nhưng tôi tin <br>
lĩnh vực nghiên cứu <b>khoa học mạng lưới</b> có thể giúp ta tìm ra câu trả lời! <br>
Và ý chính của thuyết này như sau: để có thể hiểu về đám đông, <br>
ta không nên nhìn vào những <i>cá nhân</i>, mà nên nhìn vào...
<next>...những <i>sự 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 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">
Quan hệ xã hội không chỉ là chuyện vẽ vời cho vui.
Người ta còn <i>dựa vào</i> các mối quan hệ của mình để hiểu về thế giới xung quanh.
Ví dụ, mọi người nhìn vào bạn bè, đồng nghiệp mình để
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à
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>Ok, đã hiểu.</next>
</words>
<words id="networks_pre_puzzle">
Tuy nhiên, quan hệ xã hộ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;">
↓ liên kết ngoài
</div>
</words>
<words id="networks_pre_puzzle_2">
<bon id="books"></bon>
<br>
Ví dụ, một 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?
Bạn sắp tự mình 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ẢI ĐỐ!</b>
<br>
Hãy lừa <i>mọi người</i> để họ 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 đã khiến một nhóm sinh viên tin vào
sự thịnh hành của một xã hội thiếu lành mạnh! Tốt lắm!
<next wiggle>...ờờờ...xin cảm ơn?</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>,
nó cũng giải thích cho việc người ta nghĩ rằng ai cũng theo tư tưởng chính trị của mình,
hoặc tại sao sự phổ biến của chủ nghĩa cực đoan được thổi phồng trong tưởng tượng nhiều người.
<i>Sự điên rồ.</i>
<bon id="connections"></bon>
Nhưng người ta không chỉ đứng đó <i>quan sát một cách thụ động</i> ý tưởng
và hành vi của người khác, mà họ còn chủ động <i>làm theo.</i>
Nên bây giờ, hãy tìm hiểu cái 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 tạm gác lại các "ngưỡng" một lúc.</i>
Ở bên dưới: chúng ta có một 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", như cách gọi của giới trẻ ngày nay.
Và mỗi ngày, người đó loan tin, như một con virus, đến bạn bè của người đó.
Rồi những người đó lại báo cho <i>bạn bè của họ</i>. Cứ như vậy.
<br>
<b>
Bắt đầu mô phỏng! <div class="darr"></div>
(ghi chú: 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ó 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 hay 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 có khả năng lây nhiễm --
và có cả các chứng minh rằng sự 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>đáng rầu nhỉ? <div class="rarr"></div> </next>
</words>
<words id="simple_cascade">
Thật sự thì đúng là vậy.
Dù sao thì, đã đến lúc <b>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ì một thác thông tin như vậy vào năm 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>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 cách mô tả mới, tốt hơn
cho việc diễn đạt sự phát tán ý tưởng/hành vi, 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">
Hãy quay trở lại ví dụ về "ngưỡng" và say xỉn <icon name="yellow"></icon>!
Lưu ý là mô phỏng mà bạn chạy lần đầu tiên không khiến người thường trở nên say xỉn.
<br><br>
Bây giờ hãy mô phỏng chuyện xảy ra khi mọi người bắt đầu uống rượu
<i>nếu 50%+ bạn bè của họ uống!</i>
<b>Trước khi bắt đầu, bạn hãy tự hỏi điều gì <i>sẽ</i> xảy ra.</b>
<br><br>
<b>Giờ hãy chạy mô phỏng và xem thực hư thế nào! <div class="rarr"></div> </b>
</words>
<words id="complex_complex_2">
<span style="line-height:1.3em; display:block;">
Không giống như sự 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ì mặc dù họ tiếp xúc với một người bạn say xỉn,
người bạn đó không đạt ngưỡng 50% tổng số bạn bè.
<div style="height:0.75em"></div>
Số phần trăm <i>tương đối</i> của những người bạn bị "nhiễm" có ảnh hưởng lớn trong trườn hợp này.
<i>Đó là</i> sự khác nhau giữa <b>thuyết lây lan phức tạp</b><ref id="complex"></ref>,
và <b>thuyết lây-lan-như-virus đơn giản </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à ta đã nói đủ về sự <i>điên cuồng</i> đám đông, thế còn...
<next>...sự <i>khôn ngoan</i> của đám đông?</next>
</span>
</words>
<words id="complex_complex_3">
Ở đây, chúng ta có một người <icon name="blue"></icon> làm thiện nguyện. Chẳng hạn như
việc cứu hộ bão lũ, hoặc dạy trẻ em bị thiệt thòi ở cộng đồng địa phương,
hoặc một việc nghĩa hiệp đại loại thế.
Mấu chốt là, đây là sự lây lan "tốt".
Lần này, ta để ngưỡng ở 25% —
mọi người sẵn sàng tình nguyện, nhưng chỉ khi ít nhất 25% số bạn bè của họ cùng làm.
Này, thiện chí thì cũng cần ít khuyến khích của xã hội chứ.
<br><br>
<b>← Hãy làm cho mọi người "nhiễm" cái thiện!</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>một</i> trong nhiều sự lây lan phức tạp!
Ngoài ra còn có: đi bầu cử, phát triển thói quen sống,
thách thức niềm tin cá nhân,
dành thời gian tìm hiểu cặn kẽ một vấn đề — bất cứ việc gì mà
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> là khôn ngoan,
nhưng quá trình trở nên khôn ngoan là một sự lây lan phức tạp.
<div style="height:0.75em"></div>
(Vậy trong đời thực, ví dụ của sự lây lan <i>đơn giản</i> là gì?
Thường là những dữ kiện vặt như, "chồn possum có 13 núm vú"<ref id="possum"></ref>)
<bon id="contagions"></bon>
Để <i>thực sự</i> diễn đạt sức mạnh và sự kì lạ của lây lan phức tạp, hãy quay lại...
<next>...một câu đố trước đây<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 'bắt đầu mô phỏng' và <i>thử</i> bao nhiêu lần cũng được)
</words>
<words id="complex_cascade_end">
<next wiggle>QUÁ ĐÃ<div class="rarr"></div> </next>
</words>
<words id="complex_post_cascade">
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,
dù nó là sự lây lan "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? Hãy quay lại với...
</words>
<words id="complex_post_cascade_end">
<next wiggle>...một câu đố khác trước đó <div class="rarr"></div> </next>
</words>
<words id="complex_prevent">
Nếu bạn bắt đầu mô phỏng, 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 lưới <i>để chống lại</i> sự lây lan ra tất cả mọi người! <div class="darr"></div></b>
</words>
<words id="complex_prevent_2">
Bạn thấy không?
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>việc thêm 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 suy gẫm về mặt trái của internet, phải không?)
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 làm việc ở NASA là những người thông minh.
Họ dùng các lý thuyết của Newton để đưa ta lên gặp chị Hằng.
Nhưng, vào năm 1986,
<i>mặc cho sự cảnh báo từ các kỹ sư</i>,
họ phóng <i>tàu con thoi Challenger</i>,
nó đã phát nổ và khiến 7 người thiệt mạng.
Nguyên nhân trực tiếp:
Sáng hôm đó trời quá lạnh.
<div style="height:0.9em"></div>
Nguyên nhân sâu xa hơn: các nhân viên quản lý đã không nghe theo lời cảnh báo của các kỹ sư.
Vì sao? Vì <b>tư duy tập thể</b><ref id="groupthink"></ref>.
Khi một nhóm người có quan hệ quá mật thiết (như những người ở các vị trí lãnh đạo), họ thường sẽ chống lại những ý tưởng
phức tạp đi ngược lại quan điểm hoặc cái tôi của họ.
<div style="height:0.9em"></div>
Vậy nên, đó là cách mà một tổ chức có thể rơi vào tình trạng điên rồ của đám đông.
Nhưng làm sao để ta có thể "sắp đặt" cho <i>sự khôn ngoan</i> của đám đông diễn ra?
Nói ngắn gọn, ta cầ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 sự kết nối, ý tưởng không thể truyền đi.
<br>
Quá nhiều sự kết nối, và bạn sẽ bị tư duy tập thể. <div class="rarr"></div>
</words>
<words id="bonding_2">
<b>
Hãy vẽ một nhóm chỉ cần vừa đủ liên kết để ý tưởng phức tạp lan rộng!
<div class="darr"></div>
</b>
</words>
<words id="bonding_end">
Thật đơn giản!
Số lượng kết nối <i>trong</i> một nhóm được gọi là <b>vốn xã hội liên kết</b><ref id="social_capital"></ref>.
Thế còn những sự kết nối
<next wiggle>...<i>giữa</i> các nhóm?</next>
</words>
<words id="bridging_1">
Có thể bạn đã đ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>vốn xã hội bắc cầu</b>.
Yếu tố này quan trọng vì nó giúp các nhóm thoát khỏi cái phòng cách âm của họ!
<br>
<b>Hãy xây dựng một chiếc cầu, để "nhiễm" mọi người với trí khôn phức tạp:</b>
</words>
<words id="bridging_end">
Tương tự 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ẽ một cái cầu dày đến mức sự lây lan phức tạp
<i>không thể</i> xảy ra!)
Giờ chúng ta đã biết cách "thiết kế" những sự 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 một 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)
để lây lan 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 loại mạng lưới rất đặc biệt!
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 đồng nhất". "Đa dạng mà không chia rẽ". "E Pluribus Unum: từ nhiều, thành một".</i>
<br>
Không quan trọng nó được diễn tả thế nào,
con người ở các thời điểm lịch sử và văn hóa khác nhau thường cùng đến với một bài học:
<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ề bài học 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 phản ánh cơ chế kết nối giữa
các tế bào thần kinh<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 đề tập thể<ref id="swn_social_physics"></ref>,
và ngay cả đã có lần 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ậy nên, dù được gọi là "thế giới nhỏ" ("Small-world") nhưng đây lại là một vấn đề lớn.
</words>
<words id="bb_small_world_end">
<next>Ok, hãy tóm gọ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">
Kết nối
</words>
<words id="sandbox_tool_add">
Người thường
</words>
<words id="sandbox_tool_add_infected">
Người "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]: Người thường [2]: Người "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 quy 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>
(giống như câu nói “hãy trở thành sự thay đổi mà bạn muốn nhìn thấy trên thế giới”, v.v.)
Nhưng cũng như tế bào thần kinh, không chỉ có tín hiệu là thứ quan trọng, mà còn là...
</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 thì ý tưởng phức tạp không thể lan rộng.
Quá <i>nhiều</i> sự kết nối thì ý tưởng phức tạp sẽ bị chà đạp bởi tư duy tập thể.
Cái khó là làm sao tạo ra được mạng lưới small-world, với 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?
hãy thử chế độ Sân Chơi Riêng, bằng cách nhấn 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 mà chúng ta đã đặt ra từ ban đầ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 đã đề cập đến được nhiều thứ
<br>
trong ngày hôm nay. Tóm lại, sự điên cuồng của đám đông
<br>
không nhất thiết là vì <i>các cá thể độc lập</i>, mà vì cách chúng
<br>
ta bị mắc kẹt trong một mạng lưới.
<div style="height:0.5em"></div>
Điều đó <i>KHÔNG</i> có nghĩa là ta có thể chối bỏ trách nhiệm cá nhân, vì
<br>
chính chúng ta cũng là người góp phần <i>dệt nên</i> mạng lưới đó. Vì thế, hãy cải thiện
<br>
sự lây lan của bạn: hãy trở nên hoài nghi về những ý tưởng
<br>
tâng bốc bạn<ref id="flatter"></ref>, bỏ thời gian ra để hiểu những ý tưởng phức tạp.
<br>
Và, hãy 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 bắc 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ột mạng lưới đầy khôn ngoan trí tuệ. Tất nhiên
<br>
việc đó khó hơn là vẽ vời nghịch ngợm trên màn hình, nhưng kết quả của nó thì...
<next>...thật xứng đáng biết bao.</next>
</span>
</words>
<words id="conclusion_3">
<i>
“Những khúc khải hoàn và tấn bi kịch trong lịch sử được tạo ra,
không phải vì người ta căn bản là tốt hoặc căn bản là xấu,
mà là vì người ta căn bản là 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;">
Được tạo 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 tác phẩm khác của tôi</a> ·
<a target="_blank" href="https://twitter.com/ncasenmare" style="text-decoration:none">
theo dõi tôi trên Twitter</a>
<br><br>
<span style="color:#777; position:relative; top:5px; display: inline-block; margin-top: 15px;">
Xin 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 tác phẩm hơn! <3</a>
<br><br>
<span style="display: inline-block; margin-top: 15px;">
♫ Bài nhạc được sử dụng trong tác phẩm này:
<a target="_blank" href="http://freemusicarchive.org/music/Komiku/Tale_on_the_Late/" style="text-decoration:none">
"Friends 2018" and "Friends 2068"</a>
của Komiku
<br>
</> Tác phẩm <i>Crowds</i> này
<a target="_blank" href="https://github.com/ncase/crowds" style="text-decoration:none">
hoàn toàn mã nguồn mở</a>
</span>
<br>
<bon id="further_reading"></bon>
</div>
</words>
<!-- x. misc -->
<words id="WIN">
WIN
</words>
<words id="sim_start">
bắt đầu mô phỏng
</words>