-
Notifications
You must be signed in to change notification settings - Fork 99
/
fl.html
1696 lines (1340 loc) · 55.1 KB
/
fl.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 lang="fl"> <!-- 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>Ang Karunungan at/o Kabaliwan ng mga Tauhan</title> <!-- <title>(TRANSLATE this part only)</title> -->
<meta name="description" content="an interactive guide to human networks"/> <!-- 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/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="Ang Karunungan at/o Kabaliwan ng mga tauhan"> <!-- content="(TRANSLATE this part only)" -->
<meta itemprop="description" content="isang interactive na gabay sa network ng tao"> <!-- content="(TRANSLATE this part only)" -->
<meta itemprop="image" content="http://ncase.me/crowds/social/thumb.png">
<meta name="twitter:title" content="Ang Karunungan at/o Kabaliwan ng mga Tauhan"> <!-- content="(TRANSLATE this part only)" -->
<meta name="twitter:description" content="isang interactive na gabay sa network ng tao"> <!-- 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="Ang Karunungan at/o Kabaliwan ng mga Tauhan"> <!-- content="(TRANSLATE this part only)" -->
<meta property="og:description" content="isang interactive na gabay sa network ng tao"> <!-- 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=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">laktawan ></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">i-OFF</span> <!-- TRANSLATE -->
<span id="sound_off">i-ON</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">
Ang Karunungan at/o Kabaliwan ng mga Tauhan <!-- TRANSLATE -->
</span>
<span id="share_desc">
<!-- TRANSLATOR: keep this on ONE LINE or the social sharing will break! -->
Bakit kumikilos ang mga grupo ng mga tao na matalino, pipi, mabait, at malupit? Isang interactive na gabay sa mga network ng tao: <!-- TRANSLATE -->
</span>
</div>
<div id="navigation">
<!-- The chapters -->
<!-- TRANSLATE all the Chapter names! -->
<div chapter="Introduction">
<span>0</span>
<span>0. Panimula</span>
</div>
<div chapter="Networks">
<span>1</span>
<span>1. Mga Koneksyon</span>
</div>
<div chapter="Simple">
<span>2</span>
<span>2. Ang Pagkahawa</span>
</div>
<div chapter="Complex">
<span>3</span>
<span>3. Komplikadong Pagkahawa</span>
</div>
<div chapter="BB">
<span>4</span>
<span>4. Ang Bonding at Bridging</span> <!-- note: & is html for the "and" sign -->
</div>
<div chapter="SmallWorld">
<span>5</span>
<span>5. Isang Maliit Na Mundo</span>
</div>
<div chapter="Conclusion">
<span>6</span>
<span>6. Konklusiyon</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 na Boxes!</span> <!-- TRANSLATE -->
</div>
<div modal="references">
<span style="margin-top: 7px; font-size: 35px;">*</span>
<span>Links at 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>Mga Pagsasalin</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>nag-loloading...</div> <!-- TRANSLATE -->
</div>
</body>
</html>
<!-- - - - - -->
<!-- SCRIPTS -->
<!-- - - - - -->
<script src="js/lib/helpers.js"></script>
<script src="js/lib/inobounce.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?v=5"></script>
<script src="js/slideshow/Preloader.js"></script>
<script src="js/slideshow/Translations.js?v=5"></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>Ang</span>
<br>
<span style="font-size: 60px;letter-spacing: 4px;">KARUNUNGAN</span>
<span style="position:relative;top: -10px;">at/o</span>
<span style="font-size: 60px;">KABALIWAN</span>
<br>
<span style="position: relative;top: -11px;">ng mga</span>
<br>
<span style="font-size: 100px;line-height: 80px;position: relative;top: -15px; display:block;">TAUHAN</span>
</div>
<div style="color:#999;line-height: 200px;">
<!-- TRANSLATE note: comment out the line below... -->
<!-- oras ng paglalaro: 30 min • ni nicky case, abril 2018 -->
<!-- ...and UN-comment + TRANSLATE this line! -->
Ni nicky case • isinalin ni yustine arevalo • <a href='.'>orihinal na ingles</a>
</div>
</words>
<words id="preloader_button">
<next></next>
</words>
<words id="preloader_loading">
loading...
</words>
<words id="preloader_play">
Laro na! <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>
Si Sir Isaac Newton ay isang napakatalinong
<br>
tao. Sa bagay, pagkatapos niyang ikatha ang calculus at
<br>
ang teorya ng gravity, mayroon rin naman siyang kaalaman
<br>
sa financial investing, diba? Kaya nga, long story short, siya
<br>
ay nawalan ng $4,600,000 (sa ngayong dolyar) sa haka-hakang frenzy
<br>
ng buong bansa na kinikilala bilang South Sea Bubble noong 1720.
<br><br>
Tulad ng sinabi ni Mr Newton: <i>“Kaya kong kalkyulahin ang galaw ng mga
<br>
planeta sa langit, ngunit hindi ang kabaliwan ng tao.”</i>
<next>Oo, malas sa kaniya <div class="rarr"></div> </next>
</words>
<words id="intro_2">
<div style="height:0.5em"></div>
Siyempre, hindi lang ang mga
<br>
time markets, mga institusyon, o buong sistema ng
<br>
demokrasiya ang nawawalan ng kontrol — ang <i>kabaliwan</i> ng
<br>
tauhan. At kahit doon, bago ka man lang mawalan ng pag-asa sa tao,
<br>
may makikita kang tauhan nagtutulungang mag-rescue ng isa't isa sa
<br>
sa bagyo,mga komunidad na naghahanap ng solusyon sa mga problema,
<br>
mga taong naglalaban para sa mabuting mundo — ang <i>karunungan</i> ng tauhan!
<div style="height:0.9em"></div>
<b>Ngunit <i>bakit</i> bakit mayroong taong bumabaling sa kabaliwan, o karunungan?</b> Walang teoryang
<br>
maaaring magpaliwang ng lahat nito, ngunit ang bagong field ng study,
<br>
<b>network science</b>, ang makakapag gabay sa atin! At ang pangunahing ideya nito ay ito: upang
<br>
upang maintindihan ang tauhan, kailangan nating tumingin hindi sa <i>indibidwal na
<br>
tao</i>, kundi sa...
<next>...kanilang <i>mga koneksiyon.</i> <div class="rarr"></div> </next>
</words>
<!-- Networks -->
<words id="networks_tutorial_start">
<b>Mag guhit tayo ng network!</b>
Ang bawat koneksiyon ay kumakatawan sa pagkakaibigan ng dalawang tao:
</words>
<words id="networks_tutorial_connect">
gumuhit para ikonekta
</words>
<words id="networks_tutorial_disconnect">
i-scratch para burahin
</words>
<words id="networks_tutorial_end">
kapag tapos ka nang gumuhit,
<next wiggle>tumuloy na tayo, <div class="rarr"></div> </next>
</words>
<words id="networks_threshold">
Ngayon, ang mga sosyal na koneksiyon ay hindi lang sa paggwa ng magagandang mga imahe.
Ang mga tao <i>ay tumitingin</i> sa kanilang mga sosyal na koneksiyon upang maintindihan nila ang kanilang mundo.
Halimbawa, ang mga tao ay tumitingin sa kanilang kapantay upang
malaman <b>anong % ng kanilang mga kaibigan (hindi kabilang ang kanilang sarili)</b> ay,
sabihin nating, lasinggero. <icon name="yellow"></icon>
</words>
<words id="networks_threshold_instruction">
<b></br></br>Gumuhit ka nga ng mga koneksiyon! <div class="rarr"></div> </b>
</words>
<words id="networks_threshold_end">
<next>okay, na gegets ko na</next>
</words>
<words id="networks_pre_puzzle">
Pero, ang mga networks ay pwedeng <i>lumoko</i> sa tao.
Ang tao ay pwedeng makakuha ng mga maling ideya tungkol so lipunan dahil sila ay <i>nakabilang</i> dito.
</words>
<words id="optional_reading">
<div style="position:absolute; top:5px;">
<i>opsyonal</i> kadagdagang impormasyon! ↑
</div>
<div style="position:absolute; left:216px; top:10px;">
↓ links at references
</div>
</words>
<words id="networks_pre_puzzle_2">
<bon id="books"></bon>
<br>
Halimbawa, isang pag-aaral noong 1991 <ref id="drunk"></ref> ang nagpakita na
“halos lahat ng mga [kolehiyong] estudyante ang nakainom ng mas marami kumpara sa kanilang mga kaibigan.”
Pero imposible!
Paano ba iyon nangyari?
Well, malalaman mo ang sagot, sa pamamagitan ng pagguhit ng isang Network.
Oras na para...
<next>LOKOHIN ANG LAHAT <div class="rarr"></div> </next>
</words>
<words id="networks_puzzle">
<b style="font-size:2em">PUZZLE TIME!</b>
<br>
Lokohin <i>lahat</i> para isipin nila na
karamihan ng kanilang mga kaibigan (50% threshold) ay lasinggero <icon name="yellow"></icon>
(kahit ang mga lassingero ay outnumbered nang 2-to-1!)
</words>
<words id="networks_puzzle_metric">
<b>NALOKO:</b>
</words>
<words id="networks_puzzle_metric_2">
out of 9 na tao
</words>
<words id="networks_puzzle_end">
Congrats! Napaloko mo ang isang grupo ng mga estudyante na maniwala
sa pagkakalat ng napakasamang social norm! Napakagaling mo!
<next wiggle>...uh. salamat?</next>
</words>
<words id="networks_post_puzzle">
Ang nagawa mo ay tinatawag na Majority Illusion<ref id="majority"></ref>,
ito rin ang dahilan kung bakit iniisip ng mga tao na ang kanilang politikal na tanawin ay normal,
o kung bakit ang extremism ay mas madalas nagaganap kaysa sa kung paano natin ito nararanasan.
<i>Kabaliwan.</i>
<bon id="connections"></bon>
Pero, ang mga tao ay hindi lang <i>minamasdan</i> ang ideya't pag-uugali ng iba,
kundi <i>ginagaya</i> na rin nila.
Ngayon, tignan natin ang isang bagay na tinatawag ng mga network scientists na...
<next>“Contagions!” <div class="rarr"></div> </next>
</words>
<!-- Simple Contagions -->
<words id="simple_simple">
<i>Itabi muna natin ang "threshold" na bagay sa ngayon.</i>
Sa ibaba: mayroong isang tao <icon name="red"></icon> na may impormasyon.
<i>Maling</i> information. "Fake news", na tinatawag ng mga cool kids.
Araw-araw, ang taong iyon ay nagpapakalat ng pekeng tsismis, parang sakit, sa kanilang kaibigan.
At ikakalat naman nila sa <i>kanilang</i> kaibigan.
<br>
<b>
Isimulan ang simulation! <div class="darr"></div>
(p.s: hindi ka pwedeng gumuhit <i>habang</i> umaandar ang sim!)
</b>
</words>
<words id="simple_simple_2">
Paalala: kahit mukhang negatibo ang pangalan, ang mga "contagions" ay maaaring mabuti o masama (o neutral o ambiguous).
Mayroong malakas na statistikal na ebidensya <ref id="contagion"></ref> na
ang pagsisigarilyo, kalusugan, kasiyahan, paraan ng pagboboto, at lebel ng kooperatiba
ay "contagious" o nakakahawa --
at pati rin na ebidensya kung saan ang mga suicides<ref id="suicides"></ref> at mass shootings<ref id="shootings"></ref> ay nahahawa rin.
</words>
<words id="simple_simple_end">
<next wiggle>wow, nakakadepress naman. <div class="rarr"></div> </next>
</words>
<words id="simple_cascade">
Tama ka diyan!
Anyways, <b>PUZZLE TIME!</b>
<br>
Gumuhit ka ng network at isimulan ang simulation,
para <i>lahat ng tao</i> ay mahawa mula sa "contagion".
<br>
(bagong rule: hindi mo pwedeng putulin ang mga <i>makakapal</i> na mga koneksiyon)
</words>
<words id="simple_cascade_end">
<next wiggle>Supapapalicious! <div class="rarr"></div> </next>
</words>
<words id="simple_post_cascade">
Itong pagkakalat ng kabaliwan ay itinatawag na <b>"information cascade"</b>.
Si Mr. Newton ay nadamay dito noong 1720.
Pati na rin ang mga pinansiyal na institusyon ng BUONG mundo ay nadamay dahil dito noong 2008.<ref id="subprime"></ref>
<br><br>
Ngunit: <i>mali ang simulation na ito.</i>
Maraming mga ideya ay <i>hindi</i> kumakalat tulad ng sakit.
Para sa karamihan ng paniniwala't kaugalian, nangangailangan kang maging "bukas" sa contagion nang hindi hihigit ng isang beses
upang ikaw ay "mahawa".
Dahil dito, ang mga network scientists ay gumawa ng makabago, at mas mabuting paraan upang
ipakita kung paano kumakalat ang mga ideya/pag-uugali, at itinatawag nila itong...
<next wiggle>“<i>Complex</i> Contagions!” <div class="rarr"></div> </next>
</words>
<!-- Complex Contagions -->
<words id="complex_complex">
Ibalik naman natin ang mga "thresholds" at ang mga lasinggero <icon name="yellow"></icon> na halimbawa!
Nung nilaro mo to sa unang pagkakataon, hindi nagbago ang mga tao.
<br><br>
Ngayon, itesting naman natin kung ang mga tao namang umiinom
<i>habang 50%+ ng kanilang mga kaibigan ay umiinom na rin!</i>
<b>Bago mo isimulan ang sim, isipin mo muna nang mabuti kung paano <i>dapat</i> itong magyari.</b>
<br><br>
<b>Ngayon, isimulan mo ang sim, at tignan kung ano ang mangyayari! <div class="rarr"></div> </b>
</words>
<words id="complex_complex_2">
<span style="line-height:1.3em; display:block;">
Di tulad sa "fake news" <icon name="red"></icon> na contagion,
itong contagion <icon name="yellow"></icon> ay <i>hindi</i> kumakalat sa lahat!
Ang unang mga tao ay "nahahawa" ,dahil sila ay bukas lamang sa iisang
lasinggero, iyong lasinggero ay 50% ng kanilang kaibigan. (oo, mga loners sila)
Kung titignan natin ng mabuti, ang tao sa huli ng chain ay <i>hindi</i> "nahawa",
dahil kahit sila man ay bukas malapit sa isang lasinggero,
hindi pa rin nila naipasa ang 50%+ threshold.
<div style="height:0.75em"></div>
Itong <i>relative</i> % ng mga "infected" na kaibigan ay mahalaga.
<i>Iyon</i> ang pagkakaiba ng <b>complex contagion</b> theory<ref id="complex"></ref>,
at ang kumakalat-lang-ng-parang-virus na <b>simple contagion</b> theory.
(pwede mong sabihin na ang mga "simple contagions" ay contagions lamang na may "mas mataas kaysa sa 0%" infection threshold)
<div style="height:0.75em"></div>
Ngunit, ang mga contagions ay hindi laging masasama —
so enough sa tauhang <i>kabaliwan</i>, paano naman kaya ang...
<next>...tauhang <i>karunungan?</i></next>
</span>
</words>
<words id="complex_complex_3">
Dito, mayroon tayong tao na <icon name="blue"></icon> na boluntaryong... ewan ko,
tumutulong sa mga taong apektado ng bagyo, magturo sa mga mahihirap na kabataan, basta ganon.
Ang importante dito, ito ay ang "mabuting" complex contagion.
Dito naman, samantala, sabihin natin na ang threshold ay 25% lamang —
ang mga tao ay wiling ring magvolunteer, kung ito ay 25% o kung pati na rin ang kanilang kaibigan.
Hoy, ang mabuting kalooban ay nangangailang rin naman ng pampalakas loob, eh.
<br><br>
<b>← "Ihawa" ang lahat ng mga tao sa pamamagitan ng good vibes!</b>
</words>
<words id="complex_complex_3_end">
<span style="line-height:1.3em; display:block;">
<b>Paalala:</b> Ang pagiging boluntaryo ay <i>isa</i> sa mga marami pang complex contagions!
Ang ibang pang nabibilang dito ay: paraan ng pagboboto, araw-araw na gawain,
paghahamon ng iyong sariling paniniwala,
pag-iintindi ng mabuti ng isang malalim na suliranin — kahit ano
na nangangailangan ng maraming "exposure".
Ang mga complex contagions ay hindi <i>palaging</i> makatarungan,
pero ang pagiging makatarungan ay isang complex contagion.
<div style="height:0.75em"></div>
(So, ano naman ba sa totoong buhay ang <i>simple</i> contagion?
Madalas ito ay ang mga trivia, tulad ng, "ang possum ay mayroong 13 na utong"<ref id="possum"></ref>)
<bon id="contagions"></bon>
Ngayon, upang <i>talagang</i> maipakita ang kapangyarihan at "weirdness" ng mga complex contagions, bisitahin muli natin...
<next>...ang isa sa nauunang puzzle <div class="rarr"></div> </next>
</span>
</words>
<words id="complex_cascade">
Natatandaan mo pa ba to? Ngayon naman, na may <i>complex</i> contagion <icon name="blue"></icon>, medyo mahirap naman ito...
<br>
<b>Subukan mong "ihawa" ang lahat gamit ang complex na karunungan! <div class="darr"></div></b>
</words>
<words id="complex_cascade_feel_free">
(pwede mong pindutin ang 'start' at <i>subukan</i> ang kahit anong solusyon na gusto mo)
</words>
<words id="complex_cascade_end">
<next wiggle>WOW, AKO NA <div class="rarr"></div> </next>
</words>
<words id="complex_post_cascade">
Ngayon, maaari mong isipin na kailangan mo lamang magdagdag ng mga koneksiyon upang mapakalat ang mga contagion,
"complex" o "simple", mabuti or masama, makatarungan or baliw.
Pero yun nga ba yon? Bisitahin muli natin ang...
</words>
<words id="complex_post_cascade_end">
<next wiggle>...isa pang nauunang puzzle <div class="rarr"></div> </next>
</words>
<words id="complex_prevent">
Kapag pinindot mo ang "start" sa ibaba, ang complex contagion <icon name="blue"></icon> ay kakalat lamang sa lahat.
Yun lang.
Pero ngayon, gawin naman natin ang <i>kabaliktaran</i> ng lahat ng nagawa natin:
<b>gumuhit ng network upang <i>hindi</i> mapahawa ng contagion ang lahat! <div class="darr"></div></b>
</words>
<words id="complex_prevent_2">
Nakita mo?
Habang nakaktulong ang maraming koneksiyon sa pagpapkalat ng mga <i>simpleng</i> ideya,
<b>ang mas maraming koneksiyon ay nakakapagsakit sa mga <i>complex</i> na ideya!</b>
(halos nakakapagisip ito ng katulad sa internet, hm?)
Hindi lang ito isang teoretikal na problem. Maaari itong maging bagay ng buhay...
</words>
<words id="complex_prevent_end">
<next wiggle>...o kamatayan. <div class="rarr"></div> </next>
</words>
<words id="complex_groupthink">
Lahat ng tao sa NASA ay matatalino.
Sa bagay, ginamit rin nila ang mga teorya ni Newton para mapadala nila tayo sa Moon.
Anyways, long story short, noong 1986,
<i>sa kabila ng mga babala mula sa mga inhinyero</i>,
inilaunch pa rin nila ang <i>Challenger</i>,
kung saan 7 tao ang namatay sa pagkasabog nito.
Ang agarang dahilan:
masyadong malamig noong umagang iyon.
<div style="height:0.9em"></div>
Ang hindi kasing agarang dahilan: hindi pinansin ng mga manager ang mga babala ng mga inhinyero.
Bakit? Ito ay dahil sa <b>groupthink</b><ref id="groupthink"></ref>.
Kapag ang isang grupo ay <i>masyadong</i> konektado, (kung saan madalas sila sa matataas na institusyon)
mas lumalaban sila sa mga complex na ideya na humahamon sa kanilang paniniwala o pagkamakaako.
<div style="height:0.9em;line-height: 100px;"></div>
Pero paano ba natin makakagdesign para sa tauhan ng <i>karunungan?</i>
<next style="top: 600px;left: 100px;">Bonding at Bridging <div class="rarr"></div> </next>
</words>
<!-- Bonding & Bridging -->
<words id="bonding_1">
← Masyadong kaunting koneksiyon, at hindi kakalat ang isang ideya.
at kabaliktaran. <div class="rarr"></div>
</words>
<words id="bonding_2">
<b>
Gumuhit ka ng grupo kung saan maaaring kumalat ang complex na ideya!
<div class="darr"></div>
</b>
</words>
<words id="bonding_end">
Simple lang!
Ang bilang ng mga koneksiyon <i>sa loob</i> ng isang grupo ay itinatawag na <b>bonding social capital</b><ref id="social_capital"></ref>.
Pero paano naman ang mga koneksiyon...
<next wiggle>...<i>sa pagitan</i> ng mga grupo?</next>
</words>
<words id="bridging_1">
,
ang bilang ng mga koneksiyon sa <i>pagitan</i> ng mga grupo ay itinatawag na
<b>bridging social capital</b>.
Mahalaga ito, dahil nakakatulong ito sa mga grupo upang makaalis sila sa kanilang insular echo chambers!
<br>
<b>Gumawa ka ng bridge, upang "mahawa" mo ang lahat gamit ang complex na karunungan:</b>
</words>
<words id="bridging_end">
Katulad ng bonding, mayroong "sweet spot" sa pag=bibridge, din.<ref id="bridge"></ref>
(isa pang challenge: subukan mong gumuhit ng bridge na sa sobrang kapal, na hindi kakayanin ng complex contagion na
<i>makalagpas</i> ito!)
Dahil alam na nating magdesign ng mga koneksiyon sa <i>loob</i> at sa <i>pagitan</i> ng mga grupo, subukan nating...
<next wiggle>...gawin ang PAREHO!</next>
</words>
<words id="bb_1">
<b style="font-size:2em">PINAKA LAST NA PUZZLE!</b>
<br>
Gumuhit ka ng koneksiyon sa loob ng mga grupo at sa pagitan ng mga grupo
upang maikalat ang katarungan sa buong tauhan!:
</words>
<words id="bb_2">
Congrats, nakapag guhit ka ng isang espesyal na network!
Ang mga network na may tamang halo ng bonding at bridging
ay napakaimportante, at sila ay itinatawag na...
<next wiggle>“Small World Networks” <div class="rarr"></div> </next>
</words>
<words id="bb_small_world_1">
<i>"Pagkakaisa nang walang pagkakapareho". "Dibersidad na walang dibisyon". "E Pluribus Unum: out of many, one".</i>
<br>
Sa kahit ano mang paraang sabihin,
Ang mga tao ay madalas na dumadating sa parehong piraso ng karunungan:
<b>
ang isang mabuting lipunan ay nangangailangan ng tamang bilang ng bonds sa <i>loob</i> ng mga grupo
at bridges sa <i>pagitan</i> ng mga grupo.
</b>
Iyon ang:
</words>
<words id="bb_small_world_2">
Hindi ito...
<br>
(dahil hindi kayang kumalat ang ideya)
</words>
<words id="bb_small_world_3">
hindi rin to...
<br>
(dahil makakakuha ka ng groupthink)
</words>
<words id="bb_small_world_4">
...kundi <i>ITO:</i>
</words>
<words id="bb_small_world_5">
Ang mga network scientists ngayon ay mayroon nang matematikal na kahulugan para sa karunungang ito:
ang <b>small world network</b><ref id="small_world"></ref>.
Itong tamang halo ng bonding+bridging ay naglalarawan kung paano
konektado ang ating mga neurons<ref id="swn_neurons"></ref>,
nakakapaglaki ng kolektibong pagkamalikhain<ref id="swn_creativity"></ref>
at ang kakayahang maghanap ng solusyon sa problema<ref id="swn_social_physics"></ref>,
nakapagpatulong nga ito kay US President John F. Kennedy para (muntikan) iwasan ang nuclear war!<ref id="swn_jfk"></ref>
Kaya oo, mahalaga nga ang maliliit na mundo.
</words>
<words id="bb_small_world_end">
<next>ok, tapusin na natin to... <div class="rarr"></div> </next>
</words>
<!-- Sandbox -->
<words id="sandbox_caption">
(pst... gusto mong malaman ng sikreto?<ref id="sandbox"></ref>)
</words>
<words id="sandbox_contagion">
Contagion:
</words>
<words id="sandbox_contagion_simple">
simple
</words>
<words id="sandbox_contagion_complex">
complex
</words>
<words id="sandbox_color_chooser">
Ang Kulay Ng Contagion:
</words>
<words id="sandbox_tool_chooser">
Pumili ng tool...
</words>
<words id="sandbox_tool_pencil">
Gumuhit Ng Network
</words>
<words id="sandbox_tool_add">
Dagdagan Ng Tao
</words>
<words id="sandbox_tool_add_infected">
Dagdagan ang "Infected"
</words>
<words id="sandbox_tool_move">
Idrag Ang Tao
</words>
<words id="sandbox_tool_delete">
Tanggalin Ang Tao
</words>
<words id="sandbox_tool_clear">
<b>BURAHIN ANG LAHAT</b>
</words>
<words id="sandbox_shortcuts_label">
(...o, gumamit ng keyboard shortcuts!)
</words>
<words id="sandbox_shortcuts">
[1]: Dagdagan Ng Tao [2]: Dagdagan ang "Infected"
<br>
[Space]: Drag [Backspace]: Delete
</words>
<!-- Conclusion -->
<words id="conclusion_1">
<div style="font-size: 30px; top: 1px;">
KONKLUSIYON: tungkol ito sa...
</div>
<div style="
width: 100%;
position: absolute;
font-size: 76px;
top: 10px;
line-height: 100px; display:block;
">
Contagions at Connections
</div>
<div style="
width: 710px;
position: absolute;
top: 75px;
left: 250px;
">
<b>Contagions:</b>
Katulad ng kung paano magpasa ng impormasyon ang neurons sa loob ng utak,
nagpapasapasa ang mga tao ng paniniwala at pag-uugali sa lipunan.
Hindi lang natin iniimpluwensiya ang ating kaibigan,
iniimpluwensiya na rin natin ang kaibigan ng ating kaibigan, at pati na rin ang kaibigan ng kaibigan ng ating kaibigan<ref id="three_degrees"></ref>
(“be the change you wanna see in the world” blah blah blah)
Pero, katulad ng neurons, hindi lang ang mga signals ang importante, kundi pati na rin ang...
</div>
<div style="
width: 710px;
position: absolute;
top: 275px;
left: 250px;
">
<b>Connections:</b>
Hindi kumakalat ang mga ideya kung kakaunti ang mga koneksiyon.
Masyadong <i>maraming</i> koneksiyon at madadapurak naman ng Groupthink ang complex na ideya.
Ang trick dito ay bumuo ng small world network, ang tamang halo ng
bonding at bridging: <i>e pluribus unum.</i>
</div>
<div style="
width: 350px;
position: absolute;
top: 410px;
left: 220px;
text-align: center;
color: #999;
">
(gusto mong gumawa ng sariling simulations?
tignan mo ang Sandbox Mode, sa pamamagitan ng pagclick ng (★) button sa ibaba!)
</div>
<div style="
width: 400px;
position: absolute;
top: 395px;
right: 0px;
text-align: right;
">
Ngayon, paano naman ang ating tanong sa pinaka umpisa?
Bakit <i>nga ba</i> ang ibang tao ay tumatalikod sa...
</div>
<div style="
width: 300px;
position: absolute;
top: 500px;
right: 0px;
">
<next>...karunungan at/o kabaliwan?</next>
</div>
</words>
<words id="conclusion_2">
<span style="line-height:1.4em; display:block;">
<div style="height:0.5em"></div>
Mula Newton hanggang NASA hanggang
network science,<br> marami tayong itinalakay
ngayon. Long story short, ang kabaliwan ng mga tao
ay hindi palagi nanggagaling sa mga <i>indibidwal na tao</i>, kundi
<br>
sa paano inipit sa sapot ng network.
<div style="height:0.9em"></div>
Ito ay <i>HINDI</i> nangangahulugang na iwanan ang personal na responsibilidad, sapagkat
tayo rin ang mga <i>manghahabi</i> ng sapot na iyon. Ngayon, ipabuti ang mga contagions:
maging mapag-aalinlangan sa mga ideya na nagpaparangal sa iyo<ref id="flatter"></ref>, intindihin ng mabuti ang mga
<br>
complex na ideya. At, ipabuti ang iyong mga koneksiyon: magbond sa mga katulad ng mga
tao, pero bumuo rin ng mga bridges sa kabuuan ng cultural/politikal na mga pagkahati.
<div style="height:0.9em"></div>
Pwede tayong maghabi ng makatarungang sapot. Oo, mas mahirap iyon kaysa magguhit
<br>
ng mga linya sa kompyuter...
<next>...pero, worth it parin ito.</next>
</span>
</words>
<words id="conclusion_3">
<i>
“Ang mga dakilang tagumpay at trahedya ng kasaysayan ay sanhi,
hindi sa pamamagitan ng mga tao na sa panimula ay mabuti o sa panimula ay masama,
kundi sa pamamagitan ng mga tao na sa panimula ay mga tao”
</i>
<br>
<span style="position:relative; top:5px">~</span> Neil Gaiman at 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;">
iginawa ni</span>
<div style="font-size: 3em; line-height: 1.0em;">
NICKY CASE</div>
<a target="_blank" href="http://ncase.me" style="text-decoration:none">
iba ko pang laro</a> ·
<a target="_blank" href="https://twitter.com/ncasenmare" style="text-decoration:none">
i-follow mo ako sa twitter</a>
<br><br>
<span style="color:#777; position:relative; top:5px; display: inline-block; margin-top: 15px;">
maraming pagmamahal at pasasalamat sa</span>
<div style="font-size: 3em; line-height: 1.0em;">
AKING PATREON SUPPORTERS</div>
<a target="_blank" href="https://www.patreon.com/ncase" style="text-decoration:none">
tulungan mo akong gumawa pa ng mga bagay tulad nito! <3</a>