1649 lines
50 KiB
HTML
1649 lines
50 KiB
HTML
<!--
|
||
|
||
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="zh-TW">
|
||
<head>
|
||
|
||
<!-- Meta Info -->
|
||
<title>群眾的智慧與瘋狂</title> <!-- <title>(TRANSLATE this part only)</title> -->
|
||
<meta name="description" content="互動式講解人際網絡"/> <!-- 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="The Wisdom and/or Madness of Crowds"> <!-- content="(TRANSLATE this part only)" -->
|
||
<meta itemprop="description" content="互動式講解人際網絡"> <!-- content="(TRANSLATE this part only)" -->
|
||
<meta itemprop="image" content="http://ncase.me/crowds/social/thumb.png">
|
||
|
||
<meta name="twitter:title" content="群眾的智慧與瘋狂"> <!-- content="(TRANSLATE this part only)" -->
|
||
<meta name="twitter:description" content="互動式講解人際網絡"> <!-- 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="The Wisdom and/or Madness of Crowds"> <!-- content="(TRANSLATE this part only)" -->
|
||
<meta property="og:description" content="an interactive guide to human networks"> <!-- 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=4">
|
||
|
||
</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">跳過 ></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">ON</span> <!-- TRANSLATE -->
|
||
<span id="sound_off">OFF</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">
|
||
群眾的智慧與瘋狂 <!-- TRANSLATE -->
|
||
</span>
|
||
<span id="share_desc">
|
||
<!-- TRANSLATOR: keep this on ONE LINE or the social sharing will break! -->
|
||
為何群體時而理智、愚昧、善良或又殘忍?互動式講解人際網絡:<!-- TRANSLATE -->
|
||
</span>
|
||
</div>
|
||
<div id="navigation">
|
||
|
||
<!-- The chapters -->
|
||
<!-- TRANSLATE all the Chapter names! -->
|
||
<div chapter="Introduction">
|
||
<span>0</span>
|
||
<span>0. 介紹</span>
|
||
</div>
|
||
<div chapter="Networks">
|
||
<span>1</span>
|
||
<span>1. Connections</span>
|
||
</div>
|
||
<div chapter="Simple">
|
||
<span>2</span>
|
||
<span>2. 傳播</span>
|
||
</div>
|
||
<div chapter="Complex">
|
||
<span>3</span>
|
||
<span>3. 複雜傳播</span>
|
||
</div>
|
||
<div chapter="BB">
|
||
<span>4</span>
|
||
<span>4. 結合 & 橋接</span> <!-- note: & is html for the "and" sign -->
|
||
</div>
|
||
<div chapter="SmallWorld">
|
||
<span>5</span>
|
||
<span>5. 小型世界</span>
|
||
</div>
|
||
<div chapter="Conclusion">
|
||
<span>6</span>
|
||
<span>6. 總結...</span>
|
||
</div>
|
||
<div chapter="Credits">
|
||
<span>7</span>
|
||
<span>7. 致謝</span>
|
||
</div>
|
||
<div chapter="Sandbox">
|
||
<span>★</span>
|
||
<span>★ 沙盒模式 ★</span>
|
||
</div>
|
||
|
||
<!-- A divider -->
|
||
<span class="nav_divider"></span>
|
||
|
||
<!-- Bonus Notes & References -->
|
||
<div modal="bonus">
|
||
<span>?</span>
|
||
<span>點心盒</span> <!-- TRANSLATE -->
|
||
</div>
|
||
<div modal="references">
|
||
<span style="margin-top: 7px; font-size: 35px;">*</span>
|
||
<span>連接 & 參考文獻</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>翻譯</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>loading...</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"></script>
|
||
<script src="js/slideshow/Preloader.js"></script>
|
||
<script src="js/slideshow/Translations.js?v=3"></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 style="font-size: 100px;line-height: 80px;position: relative;top: -15px; display:block;">群眾</span>
|
||
<span>的</span>
|
||
<span style="font-size: 60px;letter-spacing: 4px;">智慧</span>
|
||
<span style="position:relative;top: -10px;">與/或</span>
|
||
<span style="font-size: 60px;">瘋狂</span>
|
||
<br>
|
||
<br>
|
||
</div>
|
||
|
||
<div style="color:#999; font-size: 20px;">
|
||
<!-- TRANSLATE note: comment out the line below... -->
|
||
<!-- playing time: 30 min • by nicky case, april 2018-->
|
||
<!-- ...and UN-comment + TRANSLATE this line! -->
|
||
<!-- by nicky case • translated by [your name] • <a href='/'>original in English</a> -->
|
||
遊戲時間: 30 分鐘 • 原作: nicky case • 2018 年 4 月<br>
|
||
翻譯: chairco • <a href='./'>English</a>
|
||
</div>
|
||
|
||
</words>
|
||
|
||
<words id="preloader_button">
|
||
<next></next>
|
||
</words>
|
||
|
||
<words id="preloader_loading">
|
||
載入中...
|
||
</words>
|
||
|
||
<words id="preloader_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>
|
||
|
||
無法置啄,艾薩克·牛頓爵士是一位
|
||
<br>
|
||
絕頂聰明的笨蛋。我的意思是再締造微積分與
|
||
<br>
|
||
萬有引力理論後,理應他應該具備了足夠的智慧去
|
||
<br>
|
||
進行金融投資,對吧?反正,讓我們長話短說,
|
||
<br>
|
||
牛頓爵士在 1720 年的全國投機浪潮南海泡沫事件
|
||
<br>
|
||
一共損失了 $4,600,000 美金(換算成今日的貨幣)。
|
||
|
||
<br><br>
|
||
|
||
如同牛頓先生在稍後所說:
|
||
<i>“我可以計算運行於天體
|
||
軌道的運動,但無法預知人類的瘋狂。”</i>
|
||
|
||
<next>咦,糟透了<div class="rarr"></div> </next>
|
||
|
||
</words>
|
||
|
||
<words id="intro_2">
|
||
|
||
<div style="height:0.5em"></div>
|
||
|
||
當然,市場,機構甚至
|
||
<br>
|
||
整個民主國家的失控並非
|
||
<br>
|
||
只有這一次 — 群眾的<i>瘋狂</i>。
|
||
<br>
|
||
然而當你對人失去希望時,
|
||
<br>
|
||
你會看見公民們在颶風中相互協助,
|
||
<br>
|
||
社區會為各類疑難雜症找出解決方案,人們戰鬥是
|
||
<br>
|
||
為了更美好的世界 — 群眾的<i>智慧</i>!
|
||
|
||
<div style="height:0.9em"></div>
|
||
|
||
<b>但是 <i>為什麼</i> 時而瘋狂時而智慧呢?</b>
|
||
<br>
|
||
沒有任何理論可以解釋這一切,但我認為有個新的研究領域,
|
||
<br>
|
||
<b>網絡科學</b>, 可以給我們指引! 他的核心思想:
|
||
<br>
|
||
理解群眾, 我們不應該關注 <i>個人</i>,而是...
|
||
|
||
<next>...<i>他們之間的連接。</i> <div class="rarr"></div> </next>
|
||
|
||
</words>
|
||
|
||
<!-- Networks -->
|
||
|
||
<words id="networks_tutorial_start">
|
||
<b>一起繪製一個網絡圖吧!</b>
|
||
每條連線代表兩人之間的友誼:
|
||
</words>
|
||
|
||
<words id="networks_tutorial_connect">
|
||
繪製連線
|
||
</words>
|
||
|
||
<words id="networks_tutorial_disconnect">
|
||
抹除 連線
|
||
</words>
|
||
|
||
<words id="networks_tutorial_end">
|
||
|
||
當你瞎搞完成塗鴉後,
|
||
<next wiggle>接著我們繼續 <div class="rarr"></div> </next>
|
||
|
||
</words>
|
||
|
||
<words id="networks_threshold">
|
||
|
||
今日,社交關係不僅僅只是拍一些美美的
|
||
照片而已。
|
||
人們<i>期望</i>朋友們能夠瞭解自己。
|
||
舉例,透過搜尋同儕去
|
||
找出 <b>朋友占多少比例(%)是</b>(不包含自己),
|
||
酗酒的人。 <icon name="yellow"></icon>
|
||
|
||
</words>
|
||
|
||
<words id="networks_threshold_instruction">
|
||
<b>繪製/刪除連線, 接著看看發生什麼事了!<div class="rarr"></div> </b>
|
||
</words>
|
||
|
||
<words id="networks_threshold_end">
|
||
<next>酷,了解</next>
|
||
</words>
|
||
|
||
<words id="networks_pre_puzzle">
|
||
然而,網絡也可能會<i>愚弄</i>人們。
|
||
就像是,蘇軾題西林壁之中
|
||
兩句一般:”不識廬山真面目,只緣身在此山中”
|
||
人可能會對社會產生了錯誤的想法,因為他們<i>生處於社會中</i>而對社會產生錯誤認知。
|
||
</words>
|
||
|
||
<words id="optional_reading">
|
||
<div style="position:absolute; top:5px;">
|
||
<i>選項</i> 額外的獎勵 ↑
|
||
</div>
|
||
<div style="position:absolute; left:216px; top:10px;">
|
||
↓ 相關連結與參考文獻
|
||
</div>
|
||
</words>
|
||
|
||
<words id="networks_pre_puzzle_2">
|
||
|
||
<bon id="books"></bon>
|
||
|
||
<br>
|
||
|
||
舉個例子,1991 年的一篇研究<ref id="drunk"></ref> 指出,“幾乎所有的[學院]學生都表示他們的朋友酒喝得比自己還多。”
|
||
但這看起來不大可能!那,為何他們會做出這樣的陳述?
|
||
嗯,你將透過繪製一個網絡圖來挖掘與找尋答案。
|
||
接下來...
|
||
|
||
<next>欺騙所有人 <div class="rarr"></div> </next>
|
||
|
||
</words>
|
||
|
||
<words id="networks_puzzle">
|
||
|
||
<b style="font-size:2em">拼圖時間!</b>
|
||
<br>
|
||
如何欺騙<i>所有人</i>讓他們都認為所認識的多數的朋友 (門檻 50%) 是酗酒者 <icon name="yellow"></icon>
|
||
(即便酗酒者只占 2 比 1 )
|
||
|
||
</words>
|
||
<words id="networks_puzzle_metric">
|
||
<b>被欺騙的人:</b>
|
||
</words>
|
||
<words id="networks_puzzle_metric_2">
|
||
距離 9 人
|
||
</words>
|
||
<words id="networks_puzzle_end">
|
||
恭喜!你操縱了一群學生讓他們讓他們進入一個我們所無法想像的
|
||
不健康社會規範群體!很好,我們繼續!
|
||
<next wiggle>...嗯. 感謝?</next>
|
||
</words>
|
||
|
||
<words id="networks_post_puzzle">
|
||
|
||
剛剛你透過拼圖所創造出的東西我們稱為多數幻覺<ref id="majority"></ref>,
|
||
這同時也解釋為何人們會認為自己的政治觀點是所有人的共識,
|
||
或是為何極端主義比實際情況更為普遍。
|
||
|
||
<bon id="connections"></bon>
|
||
|
||
但人其實不僅只是被動<i>接受</i>他人思想與其行為,更進一步的還會去<i>複製與擴散</i>。
|
||
所以現在我們來看看網絡科學家所稱之的東西...
|
||
|
||
<next>“傳染擴散!” <div class="rarr"></div> </next>
|
||
|
||
|
||
</words>
|
||
|
||
<!-- Simple Contagions -->
|
||
|
||
<words id="simple_simple">
|
||
<i>現在,讓我們暫時先放棄 "閥值" 這東西。</i>
|
||
下圖: 我們有個人 <icon name="red"></icon> 以及一些訊息。
|
||
一些是<i>錯誤</i>訊息。 就像那些很酷的孩子說的,"假新聞"。
|
||
每天,人們就像傳播病毒般將謠言傳遞給朋友。
|
||
然後他們的朋友再將這些謠言傳播給<i>他們的</i>朋友。接著繼續。
|
||
<br>
|
||
<b>
|
||
開始進行模擬!<div class="darr"></div>
|
||
(p.s: <i>當</i>模擬進行時你無法繪圖)
|
||
</b>
|
||
</words>
|
||
|
||
<words id="simple_simple_2">
|
||
注意: 儘管 "傳染" 這個名字有點負面意義,但它可以是好的或是壞的(或是中性以及模棱兩可)。
|
||
這裡有些很強的統計證據指出<ref id="contagion"></ref>像是抽煙、健康、幸福、投票模式與合作程度這些都是具有 “傳染性” -- 甚至也有些證據指明自殺事件<ref id="suicides"></ref>和大規模的槍擊事件<ref id="shootings"></ref>同樣也是。
|
||
</words>
|
||
|
||
<words id="simple_simple_end">
|
||
<next wiggle>歐,實在令人沮喪 <div class="rarr"></div> </next>
|
||
</words>
|
||
|
||
<words id="simple_cascade">
|
||
的確如此,
|
||
但不管怎樣都要,<b>拼圖時間</b>
|
||
<br>
|
||
繪製一個網絡 & 執行模擬,接著讓<i>每個人</i>都透過“傳染”進而感染。
|
||
<br>
|
||
(新增規則:你不可以刪除<i>厚厚的</i>連接線)
|
||
</words>
|
||
|
||
<words id="simple_cascade_end">
|
||
<next wiggle>進入高潮囉 <div class="rarr"></div> </next>
|
||
</words>
|
||
|
||
<words id="simple_post_cascade">
|
||
這類瘋狂的傳播被稱做 <b>帶風向</b>
|
||
牛頓先生在 1720 年時就是陷入風向中。
|
||
2008 年的全球金融機構同樣也是在類似這樣風向之中而下跌。<ref id="subprime"></ref>
|
||
<br><br>
|
||
然而: <i>這樣的模擬不盡然正確。</i>
|
||
多數的想法 <i>並不會</i>如病毒一般擴散。
|
||
如果要被多數的信仰與行為“感染”,你必須“暴露”在更多的傳染之中。
|
||
所以,網絡科學家想出了更多更好的新方法去描述如何擴散這些想法/行為,他們稱做...
|
||
<next wiggle>“<i>複雜</i> 傳染!” <div class="rarr"></div> </next>
|
||
</words>
|
||
|
||
<!-- Complex Contagions -->
|
||
|
||
<words id="complex_complex">
|
||
|
||
讓我們回到“閥值”且
|
||
以酗酒者作<icon name="yellow"></icon>為例子!
|
||
當你遊行進行第一次時,人們並不會改變他們的行為。
|
||
|
||
<br><br>
|
||
|
||
現在,假使人們開始喝酒時,我們再模擬一次
|
||
<i>當他們的朋友超過 50% 都開始喝酒時!</i>
|
||
<b>在你開始這個模擬時,問問自己覺得<i>應該</i>會發生什麼事。</b>
|
||
|
||
<br><br>
|
||
|
||
<b>現在,執行模擬,接著你會看到發生一些事情! <div class="rarr"></div> </b>
|
||
|
||
</words>
|
||
|
||
<words id="complex_complex_2">
|
||
<span style="line-height:1.3em; display:block;">
|
||
|
||
不同於先前的“假新聞”<icon name="red"></icon>的傳染,
|
||
這種傳染<icon name="yellow"></icon>並<i>不會</i>擴散給每一個人!
|
||
開始的前幾個人被感染,是因為他們只暴露在一個酗酒者,而這位酗酒者佔他朋友比例的一半。(是位邊緣人啊)
|
||
相較之下,在樹狀末梢的人<i>並未</i>被“感染”,這是因為暴露於他們周遭的酗酒者朋友,
|
||
並沒有超過 50% 的閥值。
|
||
|
||
<div style="height:0.75em"></div>
|
||
|
||
感染者的朋友的<i>相對</i> % 非常重要。
|
||
<i>這就是</i><b>複雜傳染理論</b>以及我們天真的認為像是病毒一般<b>簡單的傳染</b>理論。
|
||
(你也可以說“簡單傳染”是感染率“超過 0%”的感染率)
|
||
|
||
<div style="height:0.75em"></div>
|
||
|
||
然而,感染未必是壞事 —
|
||
也許對於<i>瘋狂</i>的人群來說已經足夠,那麼...
|
||
<next>...瘋狂 <i>智慧?</i></next>
|
||
|
||
</span>
|
||
</words>
|
||
|
||
<words id="complex_complex_3">
|
||
|
||
在這裡,我們有個人 <icon name="blue"></icon>
|
||
他是位志工... 我也不是很清楚哪類型,
|
||
也許在颶風中拯救人群,或是教導當地平群社區的孩子,或也可能是很酷的一個人。
|
||
這裡的重點是,這是一個“好的”複雜傳染。
|
||
這一次我們假設這個閥值僅僅只有 25% —
|
||
人會自願擔任志工,但僅僅只需要 25% 或是更多他們的朋友就會跟著一起去做。
|
||
嘿,善意的企業也是需要一點社會鼓勵的
|
||
|
||
<br><br>
|
||
|
||
<b>← 讓每個人都感受些好感!</b>
|
||
|
||
</words>
|
||
|
||
<words id="complex_complex_3_end">
|
||
<span style="line-height:1.3em; display:block;">
|
||
|
||
<b>注意:</b> 志願服務僅僅只是眾多複雜傳染的<i>一種</i>!
|
||
其他包含:選民投票率、生活習慣、挑戰你的信仰、花時間深入了解問題 — 任何一種需要超過一次“揭露”的事情。
|
||
複雜傳染<i>不一定</i>是明智的,
|
||
但是明智的是必定是一個複雜的傳染。
|
||
|
||
<div style="height:0.75em"></div>
|
||
|
||
(那麼現實生活中哪些事情是<i>簡單的</i>傳染?
|
||
通常會是些瑣事,比如,“袋貂有 13 個乳頭”<ref id="possum"></ref>)
|
||
|
||
<bon id="contagions"></bon>
|
||
|
||
|
||
現在,<i>真的</i>要展現複雜傳染的力量以及怪誕,讓我們
|
||
重溫...
|
||
|
||
<next>...更早之前的地圖 <div class="rarr"></div> </next>
|
||
|
||
</span>
|
||
</words>
|
||
|
||
<words id="complex_cascade">
|
||
還記得這個地圖嗎?這一次,有一個<i>複雜</i>
|
||
傳染<icon name="blue"></icon>,他會有一些些困難...
|
||
<br>
|
||
<b>嘗試看看用複雜的智慧去“感染”所有的人<div class="darr"></div></b>
|
||
</words>
|
||
|
||
<words id="complex_cascade_feel_free">
|
||
(不要太拘束的按下‘開始’同時<i>試試</i>你想要的各種不同的方案)
|
||
</words>
|
||
|
||
<words id="complex_cascade_end">
|
||
<next wiggle>HOT DANG <div class="rarr"></div> </next>
|
||
</words>
|
||
|
||
<words id="complex_post_cascade">
|
||
現在,你可以會以為只要新增連接去擴散任一種“複雜”或是“簡單”,好或壞,智慧或者瘋狂的傳染。
|
||
但真的是如此嗎?那們,讓我們回顧...
|
||
</words>
|
||
<words id="complex_post_cascade_end">
|
||
<next wiggle>...其他更早先的地圖 <div class="rarr"></div> </next>
|
||
</words>
|
||
|
||
<words id="complex_prevent">
|
||
假如你按下“開始”,下圖複雜傳染 <icon name="blue"></icon> 將會開始擴散給所有人。
|
||
毫無意外的結果。
|
||
但現在,讓我們<i>重複</i>之前所做過的所有事情:
|
||
<b>繪製一個網絡圖</b><i>防止</i>傳染擴散到其他人身上!<div class="darr"></div></b>
|
||
</words>
|
||
|
||
<words id="complex_prevent_2">
|
||
你看見了嗎?
|
||
雖然較多的連結可能是會幫助<i>簡單</i>想法的擴散,
|
||
<i>複雜</i>得想法卻會因為<b>過多的連接而造成擴散的傷害!</b>
|
||
(這讓你想起互聯網了嗎,嗯哼?)
|
||
這不僅是一個理論問題。這也可能會是一個生活上的問題...
|
||
</words>
|
||
|
||
<words id="complex_prevent_end">
|
||
<next wiggle>...或是逝去. <div class="rarr"></div> </next>
|
||
</words>
|
||
|
||
<words id="complex_groupthink">
|
||
|
||
在 NASA 工作的人是聰明的笨蛋。
|
||
我意思是,他們運用牛頓的理論讓我們可以登陸
|
||
月球。
|
||
不管怎樣,長話短說,在 1986 年,
|
||
<i>儘管工程師發出了警告</i>,他們人然發射了<i>挑戰者號</i>,
|
||
最後失事爆炸且奪走 7 的人的性命。
|
||
失事的直接原因:
|
||
那天的早晨太冷了。
|
||
|
||
<div style="height:0.9em"></div>
|
||
|
||
不直接的失事原因: 管理人員忽視了
|
||
工程師的警告。
|
||
為何?因為<b>團體迷思</b><ref id="groupthink"></ref>.
|
||
當一個團體組織<i>過度</i>緊密,(尤其當這個團體位於制度頂端)他們去抵抗挑戰他們信仰以及自我的複雜想法。
|
||
|
||
<div style="height:0.9em"></div>
|
||
|
||
所以,這也是為何這些機構如何陷入瘋狂之中。
|
||
但,我們該如何設計一個群眾的<i>智慧?</i>
|
||
簡短來說,兩個字:
|
||
|
||
<next>結合 & 橋接 <div class="rarr"></div> </next>
|
||
|
||
</words>
|
||
|
||
<!-- Bonding & Bridging -->
|
||
|
||
<words id="bonding_1">
|
||
← 過少的連結,導致思想無法被傳遞。
|
||
<br>
|
||
過多的連接,結果就是團體迷思。<div class="rarr"></div>
|
||
</words>
|
||
|
||
<words id="bonding_2">
|
||
<b>
|
||
繪製一個群組可以得到最佳的結果:
|
||
僅僅用足夠的連接來傳遞複雜想法!
|
||
<div class="darr"></div>
|
||
</b>
|
||
</words>
|
||
|
||
<words id="bonding_end">
|
||
簡單吧!
|
||
在這<i>裡頭</i>團體被連接的數量被稱為<b>結合型社會資本</b><ref id="social_capital"></ref>.
|
||
但這是怎樣的一種連接...
|
||
<next wiggle>...<i>伴隨</i> 團體?</next>
|
||
</words>
|
||
|
||
<words id="bridging_1">
|
||
正如你已經猜想的那樣,
|
||
團體<i>之間</i>所連接的數量被
|
||
稱為
|
||
<b>橋接型社會資本</b>。
|
||
這非常重要,因為他協助團體打破他們自己的疆界!
|
||
<br>
|
||
<b>建立一座橋樑,用複雜智慧去“感染”每一個人:</b>
|
||
</words>
|
||
|
||
<words id="bridging_end">
|
||
如同結合,橋接也是有一個蜜月點。<ref id="bridge"></ref>
|
||
(額外挑戰: 嘗試繪製一個厚橋,以至於複雜傳染
|
||
<i>無法</i> 通過它!)
|
||
現在我們理解如何“設計”連接組<i>內</i>與組<i>外</i>,讓我們...
|
||
<next wiggle>...兩者同時一起進行!</next>
|
||
</words>
|
||
|
||
<words id="bb_1">
|
||
|
||
<b style="font-size:2em">最終地圖!</b>
|
||
<br>
|
||
繪製一個連接組內(結合)和組外(橋接)來傳遞智慧給所有的群眾:
|
||
|
||
</words>
|
||
<words id="bb_2">
|
||
|
||
恭喜,你在剛剛畫出一個非常特殊的網絡!
|
||
網絡同時具有正確的結合以及橋接是非常重要的,他們被稱為...
|
||
<next wiggle>“小世界網絡” <div class="rarr"></div> </next>
|
||
|
||
</words>
|
||
<words id="bb_small_world_1">
|
||
|
||
<i>“統一但又不統一”。“具有多樣性卻又不具差異”。“E Pluribus Unum(拉丁語): 合眾為一”</i>
|
||
<br>
|
||
不管用何種方式表達,不同時代和文化的人們通常會得到相同的智慧:
|
||
<b>
|
||
一個健康的社會需要團體<i>內</i>結合以及團體<i>間</i>橋樑的蜜月點。
|
||
</b>
|
||
這就是:
|
||
|
||
</words>
|
||
<words id="bb_small_world_2">
|
||
不是這樣...
|
||
<br>
|
||
(因為想法無法傳遞)
|
||
</words>
|
||
<words id="bb_small_world_3">
|
||
也不是這樣...
|
||
<br>
|
||
(因為會造成團體迷思)
|
||
</words>
|
||
<words id="bb_small_world_4">
|
||
...而是 <i>這樣:</i>
|
||
</words>
|
||
<words id="bb_small_world_5">
|
||
|
||
網絡科學家對於這古老智慧有一個數學上的定義:
|
||
<b>小世界網絡</b><ref id="small_world"></ref>。
|
||
這個最佳混合了結合+橋接描述了神經網路如何連接<ref id="swn_neurons"></ref>,
|
||
培養集體創意<ref id="swn_creativity"></ref>與問題解決<ref id="swn_social_physics"></ref>,甚至協助美國總統約翰 F. 甘迺迪(幾乎)避免了一場核戰!<ref id="swn_jfk"></ref>是的,所以,小世界是件大事。
|
||
|
||
</words>
|
||
<words id="bb_small_world_end">
|
||
<next>ok, 準備開始收尾了... <div class="rarr"></div> </next>
|
||
</words>
|
||
|
||
<!-- Sandbox -->
|
||
|
||
<words id="sandbox_caption">
|
||
(噓... 想知道一個秘密嗎?<ref id="sandbox"></ref>)
|
||
</words>
|
||
|
||
<words id="sandbox_contagion">
|
||
傳染:
|
||
</words>
|
||
<words id="sandbox_contagion_simple">
|
||
簡單
|
||
</words>
|
||
<words id="sandbox_contagion_complex">
|
||
複雜
|
||
</words>
|
||
<words id="sandbox_color_chooser">
|
||
傳染得顏色:
|
||
</words>
|
||
<words id="sandbox_tool_chooser">
|
||
選一個工具...
|
||
</words>
|
||
|
||
<words id="sandbox_tool_pencil">
|
||
繪製網絡
|
||
</words>
|
||
<words id="sandbox_tool_add">
|
||
新增人
|
||
</words>
|
||
<words id="sandbox_tool_add_infected">
|
||
新增“感染源”
|
||
</words>
|
||
<words id="sandbox_tool_move">
|
||
移動人
|
||
</words>
|
||
<words id="sandbox_tool_delete">
|
||
刪除人
|
||
</words>
|
||
<words id="sandbox_tool_clear">
|
||
<b>清除全部</b>
|
||
</words>
|
||
|
||
<words id="sandbox_shortcuts_label">
|
||
(...或是使用快捷鍵!)
|
||
</words>
|
||
|
||
<words id="sandbox_shortcuts">
|
||
[1]: 新增人 [2]: 新增 “感染源”
|
||
<br>
|
||
[空格]: 移動 [退後鍵]: 刪除
|
||
</words>
|
||
|
||
<!-- Conclusion -->
|
||
|
||
<words id="conclusion_1">
|
||
|
||
<div style="font-size: 30px;">
|
||
言而總之: 這一切都是關於...
|
||
</div>
|
||
<div style="
|
||
width: 100%;
|
||
position: absolute;
|
||
font-size: 88px;
|
||
top: 20px;
|
||
line-height: 100px; display:block;
|
||
">
|
||
傳染 & 連接
|
||
</div>
|
||
|
||
<div style="
|
||
width: 710px;
|
||
position: absolute;
|
||
top: 125px;
|
||
left: 250px;
|
||
">
|
||
<b>傳染:</b>
|
||
就像是神經元在大腦內傳遞訊號一樣,
|
||
人們在社會中傳遞信念 & 行為.
|
||
不僅僅影響我們的朋友,我們也間接影響了朋友的朋友,
|
||
甚至是我們朋友的朋友的朋友的朋友!<ref id="three_degrees"></ref>
|
||
(像是要“改變世界不如先改變自己”此類)但是如同神經元,
|
||
這不僅是信號的問題,這也是...
|
||
|
||
</div>
|
||
|
||
<div style="
|
||
width: 710px;
|
||
position: absolute;
|
||
top: 275px;
|
||
left: 250px;
|
||
">
|
||
<b>連接:</b>
|
||
太少的連接使得複雜的想法無法被傳遞。
|
||
<i>過多</i>的連結會使得複雜的想法被團體迷思所破壞。
|
||
這裡的竅門在於建構一個小型世界網絡並使用最佳的
|
||
結合和橋接組合: <i>e pluribus unum.(合眾為一)</i>
|
||
</div>
|
||
|
||
<div style="
|
||
width: 350px;
|
||
position: absolute;
|
||
top: 410px;
|
||
left: 220px;
|
||
text-align: center;
|
||
color: #999;
|
||
">
|
||
(想要自己模擬一下嗎?
|
||
試試沙盒模式, 點擊下面的 (★) 按鈕!)
|
||
</div>
|
||
|
||
<div style="
|
||
width: 400px;
|
||
position: absolute;
|
||
top: 395px;
|
||
right: 0px;
|
||
text-align: right;
|
||
">
|
||
那,關於我們一開始所提出的問題?
|
||
為什麼有些團體<i>變得</i>...
|
||
</div>
|
||
<div style="
|
||
width: 300px;
|
||
position: absolute;
|
||
top: 460px;
|
||
right: 0px;
|
||
">
|
||
<next>...智慧 且/或 瘋狂?</next>
|
||
</div>
|
||
|
||
</words>
|
||
|
||
<words id="conclusion_2">
|
||
<span style="line-height:1.4em; display:block;">
|
||
|
||
<div style="height:0.5em"></div>
|
||
|
||
從牛頓到 NASA 網絡科學,
|
||
<br>
|
||
今天我們在這提了非常多東西
|
||
<br>
|
||
長或短說,群眾的瘋狂無法歸咎於 <i>獨立的個人</i>,而應該
|
||
<br>
|
||
去歸咎於我們所深陷的社交網絡內。
|
||
|
||
<div style="height:0.9em"></div>
|
||
|
||
這<i>並不</i> 意味著拋棄了個人的責任,對我們而也其實
|
||
也是這張網絡的<i>編織者</i>。所以,改善你的傳播時的想法:
|
||
<br>
|
||
對於奉承阿諛奉承的話保持懷疑態度<ref id="flatter"></ref>,花點時間來理解
|
||
<br>
|
||
複雜的想法。同時改善你的連接態度,不要只待在同溫層
|
||
<br>
|
||
而應該要跨越文化與政治立場的鴻溝來建立溝通橋樑。
|
||
|
||
<div style="height:0.9em"></div>
|
||
|
||
我們可以創造一個智慧網絡。當然這肯定比
|
||
<br>
|
||
畫幾條線在螢幕上難些...
|
||
|
||
<next>...但這是值得的。</next>
|
||
|
||
</span>
|
||
</words>
|
||
|
||
<words id="conclusion_3">
|
||
<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;">
|
||
創作者</span>
|
||
<div style="font-size: 3em; line-height: 1.0em;">
|
||
NICKY CASE</div>
|
||
<a target="_blank" href="http://ncase.me" style="text-decoration:none">
|
||
玩玩其他作品</a> ·
|
||
<a target="_blank" href="https://twitter.com/ncasenmare" style="text-decoration:none">
|
||
關注我的 tweeter</a>
|
||
|
||
<br><br>
|
||
|
||
<span style="color:#777; position:relative; top:5px; display: inline-block; margin-top: 15px;">
|
||
非常,以及特別感謝</span>
|
||
<div style="font-size: 3em; line-height: 1.0em;margin: 5px 0;">
|
||
我的 PATREON 支持者</div>
|
||
<a onclick='publish("reference/show", ["supporters"]);'>
|
||
看看支持者的名字</a> ·
|
||
<a onclick='publish("reference/show", ["playtesters"]);'>
|
||
看看測試的好友們</a>
|
||
<br>
|
||
<a target="_blank" href="https://www.patreon.com/ncase" style="text-decoration:none">
|
||
讓我做出更多像這部一樣美好的作品!<3</a>
|
||
|
||
<br><br>
|
||
|
||
<span style="display: inline-block; margin-top: 15px;">
|
||
♫ 音樂來自
|
||
<a target="_blank" href="http://freemusicarchive.org/music/Komiku/Tale_on_the_Late/" style="text-decoration:none">
|
||
"Friends 2018" 和 "Friends 2068"</a>
|
||
by Komiku
|
||
<br>
|
||
</> <i>Crowds</i> 是
|
||
<a target="_blank" href="https://github.com/ncase/crowds" style="text-decoration:none">
|
||
完全開源</a>
|
||
</span>
|
||
|
||
<br>
|
||
|
||
<bon id="further_reading"></bon>
|
||
|
||
</div>
|
||
|
||
</words>
|
||
|
||
<!-- x. misc -->
|
||
<words id="WIN">
|
||
WIN
|
||
</words>
|
||
<words id="sim_start">
|
||
開始模擬
|
||
</words>
|
||
<words id="sim_stop">
|
||
重置 & 重畫
|
||
</words>
|
||
<words id="translations_exist">
|
||
紛絲製作的翻譯們:
|
||
</words>
|
||
<words id="translations_do_not_exist">
|
||
<!-- There's no need to TRANSLATE this line since, well, -->
|
||
<!-- it'll only show up if no translations exist -->
|
||
What the, no fan-made translations exist yet?!
|
||
</words>
|
||
<words id="translations_add">
|
||
(add your own!)
|
||
</words>
|
||
<words id="translations_original">
|
||
<!-- No need to translate this, because, I assume, -->
|
||
<!-- if someone wants to play the game in English, they can read English -->
|
||
(original in English)
|
||
</words>
|
||
|
||
<!-- - - - - - - -->
|
||
<!-- BONUS BOXES -->
|
||
<!-- - - - - - - -->
|
||
|
||
<!--
|
||
Sorry, not done yet! These Bonus Boxes need you to TRANSLATE, too:
|
||
(And then afterwards, the final thing, translate the References)
|
||
-->
|
||
|
||
<bonus id="books">
|
||
|
||
<h3>
|
||
對 James Surowiecki 的著作<i>群眾的智慧</i>
|
||
簡短的評論
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
<img src="sprites/bonus/surowieki.jpg" width="200" height="300" style="float:left; margin-right:1em"/>
|
||
|
||
首先,我並非要批評與詆毀
|
||
<a target="_blank" href="https://en.wikipedia.org/wiki/The_Wisdom_of_Crowds">
|
||
這本書。</a>
|
||
這是一本非常棒的書,同事 Surowiecki 不斷嘗試
|
||
回答同一個問題,那就是:
|
||
<b>“為何同樣的情況,群眾可能會變得瘋狂,但也可能變得更具智慧?”
|
||
</b>
|
||
|
||
<br><br>
|
||
|
||
Surowiecki 的答案是: 當群眾內的每個人都能儘量做出獨立的判斷
|
||
就能做出明智的選擇。
|
||
他給了一個鄉村裡所發生的故事,鎮上的村名被邀請去猜一把斧頭的重量。令人震驚的事,他們<i>所有的人</i>的猜測平均數會比任何,<i>一人</i>所猜測的平均數更為接近。
|
||
但這有個前提: 人們必須<i>獨立地</i>進行猜測。否則他們可能就會被先前錯誤的猜測所影響,而且平均答案也會因此而嚴重的扭曲。
|
||
|
||
<br><br>
|
||
|
||
但是... 我不認為“讓每個人儘量保持獨立可能性”是完整的答案。
|
||
即便是天才,那寫可能被我們認為是有史以來最為獨立的思考者們也可能深深被被別人所影響著。就像是艾薩克·牛頓爵士所說的,<i>“如果我看得比別人更遠,那是因為我站在巨人的肩膀上。”</i>
|
||
|
||
<br><br>
|
||
|
||
所以,哪個答案才是正確的?
|
||
智慧源於自我,或是來自於與其他人一同思考?
|
||
答案是: “皆是”。
|
||
|
||
<br><br>
|
||
|
||
所以這就是我在這個探索學習中嘗試想要解釋的:
|
||
如何保持獨立與互相依賴中得到最佳的蜜月點 —
|
||
也就是說,如何得到一個富有智慧的群眾。
|
||
|
||
</div>
|
||
|
||
</bonus>
|
||
<bonus id="connections">
|
||
|
||
<h3>
|
||
還有其他種類的連接方式嗎?
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
簡單來說,我的模擬僅僅假設人們會透過友誼互相連接,
|
||
以及所有的友誼皆是平等。
|
||
但網絡科學家<i>的確</i>會把其他我們可能連接在一起的關係考慮進來,例如:
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/connection1.png" width="250" height="150" style="float:left; margin-right:1em"/>
|
||
<b>單向聯繫。</b> Alice 是 Bob 的老闆, 但 Bob 不是 Alice 的老闆。
|
||
Carol 是 Dave 的父母,但 Dave 不是 Carol 的父母。
|
||
“老闆” & “父母” 就是 <i>單向</i> 的關聯:
|
||
這種關係是單一方向。
|
||
反過來,“朋友”是一個<i>雙向</i>
|
||
關係: 這種關係兩邊都能相通。(希望如此)
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/connection2.png" width="250" height="150" style="float:left; margin-right:1em"/>
|
||
<b>權重關係。</b> Elinor 和 Frankie 只是相互認識。
|
||
George 和 Harry 是彼此最好的朋友。
|
||
即使這些都是“友誼”連結,第二類的連結顯然更強些。
|
||
我們說這兩種關係具備不同“權重”。
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/map.png" width="200" height="200" style="float:left; margin-right:1em"/>
|
||
要記住: <b>這些模擬情境都是錯誤的。</b> 同樣的,所有的地圖也都是“錯誤的”。
|
||
你看到左邊的地圖嗎?建築物才不是灰灰的一大塊!
|
||
語言文字不會飄散在都市上空!然而地圖是有用的<i>儘管</i>並非他們被簡化,而是<i>因為</i>他們是被簡化的。
|
||
<i>當然</i>,他們是“錯誤” — 這使得他們變得<i>有用</i>。
|
||
|
||
</div>
|
||
|
||
</bonus>
|
||
<bonus id="contagions">
|
||
|
||
<h3>
|
||
還有其他類型的傳染存在嗎?
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
網絡科學家有很多方法用來模擬“傳染”!出於教育的目的,
|
||
我選了最簡單的一種。
|
||
但,仍然有許多其他方式可以嘗試去做:
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/contagion1.png" width="250" height="150" style="float:left; margin-right:1em"/>
|
||
<b>傳染與隨機性</b>.
|
||
“暴露”於傳染之中並不能<i>保證</i>你會被傳染,
|
||
它只能讓你<i>更容易</i>被傳染。
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/contagion2.png" width="250" height="150" style="float:left; margin-right:1em"/>
|
||
<b>人們有著不同的傳染閥值。</b>
|
||
我的模擬情境假設每個人有著同樣閥值對於酗酒(50%)或是志工(25%)或是錯誤訊息(0%)。
|
||
當然,這在現實生活中並不真實,你可以製作你的模擬來反映這些情境。
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/contagion3.png" width="250" height="150" style="float:left; margin-right:1em"/>
|
||
<b>傳染的生態環境。</b>
|
||
假如現在有<i>複數</i> 個傳染,且存在<i>不同的</i>閥值?
|
||
比如說,有個簡單的“瘋狂”傳染和一個複雜的“智慧”傳染。
|
||
假如有個人被瘋狂所傳染,他們還能夠被智慧傳染嗎?
|
||
反之亦然?
|
||
有沒有人可能會同時被兩者所傳染?
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/contagion4.png" width="250" height="150" style="float:left; margin-right:1em"/>
|
||
<b>傳染的變異與進化。</b>
|
||
人的想法是無法完美像病毒一般從一個人傳遞到另外一個人身上。
|
||
就像傳話遊戲,訊息總是會在每一次重述過程中發生變化。—
|
||
而且有時這些變化甚至比原先的部分更具有傳染性!所以隨著時間流逝,思想會“演化”得更加吸引人,可複製,更具有傳染性。
|
||
|
||
<div style="clear:both"></div>
|
||
|
||
</div>
|
||
|
||
</bonus>
|
||
<bonus id="further_reading">
|
||
|
||
<h3>
|
||
我想要學習更多!還有那些我可以研讀與/或遊戲的?
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
這個探索學習僅僅只是讓你產生好奇心的跳板,
|
||
而你可以在知識的領域裡潛入更深!這裡還有一些關於網絡或是社會系統的教材:
|
||
|
||
<br><br>
|
||
|
||
<img src="sprites/bonus/connected.png" width="200" height="200" style="float:left; margin-right:1em"/>
|
||
<b>書目:</b>
|
||
<a target="_blank" href="http://www.connectedthebook.com/">
|
||
Connected</a>
|
||
by Nicholas Christakis and James Fowler (2009).
|
||
毫無阻礙地瀏覽我們的網絡如何影響著我們的生活,無論好與壞。
|
||
<a target="_blank" href="http://www.connectedthebook.com/pdf/excerpt.pdf">
|
||
這裡是一點書摘: 前言 & 第一章
|
||
</a>
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/trust.png" width="200" height="200" style="float:left; margin-right:1em"/>
|
||
<b>互動:</b>
|
||
<a target="_blank" href="http://ncase.me/trust/">
|
||
信任的演化</a> by Nicky Case (me) (2017).
|
||
一場關於博弈理論的遊戲,展示合作系統如何建立...或是被摧毀。
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/polygons.png" width="200" height="200" style="float:left; margin-right:1em"/>
|
||
<b>互動:</b>
|
||
<a target="_blank" href="http://ncase.me/polygons/">
|
||
多邊形預言</a> by Vi Hart and Nicky Case (also me) (2014).
|
||
一個關於無害選擇如何創造出一個傷害性的世界的故事。
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/ee.png" width="200" height="200" style="float:left; margin-right:1em"/>
|
||
或是,假如你只想看些完整的互動教育項目,這裡有
|
||
<a target="_blank" href="http://explorabl.es/">
|
||
Explorable Explanations</a>,
|
||
存放一些遊戲來學習!
|
||
|
||
<div style="clear:both"></div>
|
||
|
||
</div>
|
||
|
||
</bonus>
|
||
|
||
<!-- - - - - - - -->
|
||
<!-- REFERENCES -->
|
||
<!-- - - - - - - -->
|
||
|
||
<!--
|
||
Final thing! These references also need you to TRANSLATE:
|
||
-->
|
||
|
||
<reference id="drunk">
|
||
|
||
<h3>
|
||
“實際上,所有的[大學]學生都認為他們朋友喝酒喝得比自己還要瘋狂。”
|
||
</h3>
|
||
|
||
<div>
|
||
<a target="_blank" href="https://www.ncbi.nlm.nih.gov/pubmed/1758185">
|
||
“大學生集體飲酒行為觀點上的偏見”</a> by Baer et al (1991)
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="majority">
|
||
|
||
<h3>
|
||
“多數幻覺”
|
||
</h3>
|
||
|
||
<div>
|
||
<a target="_blank" href="http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0147617">
|
||
“社交網絡中的多數幻覺”</a> by Lerman et al (2016).
|
||
<br>
|
||
相關連結: <a target="_blank" href="https://en.wikipedia.org/wiki/Friendship_paradox">
|
||
矛盾友誼</a>.
|
||
</div>
|
||
</reference>
|
||
<reference id="contagion">
|
||
|
||
<h3>
|
||
“強而有力的統計證據顯示,抽煙、健康、幸福、投票模式,與合作層度都是相互傳染的”
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
節錄自 Nicholas Christakis 與 James Fowler's
|
||
一本普通人也看得懂,寫得非常好一書,
|
||
<a target="_blank" href="http://www.connectedthebook.com/">
|
||
連結</a> (2009).
|
||
|
||
</div>
|
||
</reference>
|
||
<reference id="suicides">
|
||
|
||
<h3>
|
||
“一些證據表明自殺也是[傳染]”
|
||
</h3>
|
||
|
||
<div>
|
||
<a target="_blank" href="http://www.jstor.org/stable/42000514?seq=4#page_scan_tab_contents">
|
||
“自殺傳染與自殺的報導: 來自一個國民研討會建議”</a>
|
||
by O'Carroll et al (1994), endorsed by the frickin' Centers for Disease Control & Prevention (CDC).
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="shootings">
|
||
|
||
<h3>
|
||
“一些證據也顯示大規模槍殺也屬於[傳染]”
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
<a target="_blank" href="http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0117259">
|
||
“大規模槍擊事件和校園槍擊事件中的傳染”</a> by Towers et al (2015).
|
||
|
||
<br><br>
|
||
|
||
另見:
|
||
<a target="_blank" href="http://www.dontnamethem.org/">
|
||
Don't Name Them</a> campaign,
|
||
which urges that news outlets <i>DO NOT</i> air mass murderers' names, manifestos, and social media feeds.
|
||
This spreads the contagion.
|
||
Instead, news outlets should focus on the victims, first responders, civilian heroes,
|
||
and the grieving, healing community.
|
||
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="subprime">
|
||
|
||
<h3>
|
||
“全世界金融機構都在 2008 年的金融危機中倒下”
|
||
</h3>
|
||
|
||
<div>
|
||
<a target="_blank" href="https://newrepublic.com/article/63023/wall-streets-lemmings">
|
||
“華爾街袋鼠”</a> by Cass Sunstein, 是偏適合快讀,且不帶太多技術相關的書。
|
||
Published in Oct 2008, 剛好在危機醒來之時.
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="complex">
|
||
|
||
<h3>
|
||
“複雜的傳染理論。”
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
<a target="_blank" href="https://www.unc.edu/~fbaum/teaching/articles/Granovetter_AJS_1978.pdf">
|
||
“集體行為與閥值模型”</a> by Granovetter (1978)
|
||
據我所知,這是有史以來第一次有人將騎描述為“複雜傳染”模型。
|
||
(儘管他沒有用到這特定名稱)
|
||
|
||
<br><br>
|
||
|
||
<a target="_blank" href="http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0180802">
|
||
“從觀察書劇中得到的複雜傳染模型在社交傳染證明”</a>
|
||
by Sprague & House (2017)
|
||
展示複雜傳染實際上是存在的。(至少在作者所調查的社交媒體資料上存在)
|
||
|
||
<br><br>
|
||
|
||
最後,
|
||
<a target="_blank" href="https://arxiv.org/pdf/cond-mat/0403699.pdf">
|
||
“通用行為在一個傳染的廣義模型”</a> by Dodds & Watts (2004)
|
||
提出一整合<i>所有</i>類型的的傳染模型:
|
||
簡單與複雜,生理畫與社會化!
|
||
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="possum">
|
||
<h3>
|
||
“袋貂有 13 個乳頭”
|
||
</h3>
|
||
<div>
|
||
12 個乳頭排成一個圈圈,多出一個在中間。
|
||
</div>
|
||
</reference>
|
||
<reference id="groupthink">
|
||
|
||
<h3>
|
||
“團體迷思”
|
||
</h3>
|
||
|
||
<div>
|
||
這是受 Orwell 式說法是在 1971 年由 Irving L. Janis 所創。
|
||
<a target="_blank" href="https://web.archive.org/web/20100401033524/http://apps.olin.wustl.edu/faculty/macdonald/GroupThink.pdf">
|
||
在他的原創文章中</a>,
|
||
Janis 調查團體迷思案例,列出成因以及 — 讓人感謝 —
|
||
一些可惜的補救方法。
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="social_capital">
|
||
|
||
<h3>
|
||
“結合與橋接型的社會資本”
|
||
</h3>
|
||
|
||
<div>
|
||
這兩種社會資本型態 — “結合”和“橋接” —
|
||
是由 Robert Putnam 再他 2000 年非常遠見的一本書所命名,
|
||
<a target="_blank" href="http://bowlingalone.com/">
|
||
Bowling Alone</a>. 他的發現:
|
||
綜觀 <i>所有的</i> 實證量測社交連接,美國人比以往更加的寂寞。
|
||
我的老天鵝。
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="bridge">
|
||
|
||
<h3>
|
||
“橋接型的社會資本有一個最佳點”
|
||
</h3>
|
||
|
||
<div>
|
||
<a target="_blank" href="https://sociology.stanford.edu/sites/default/files/publications/the_strength_of_weak_ties_and_exch_w-gans.pdf">
|
||
“弱連結優勢理論”</a> by Granovetter (1973)
|
||
展示不同群體的連結對於簡單傳染的幫助(比如訊息),但是
|
||
<a target="_blank" href="http://www.jstor.org/stable/10.1086/521848?seq=1#page_scan_tab_contents">
|
||
“Complex Contagions and the Weakness of Long Ties”</a> by Centola & Macy (2007)
|
||
給了一個推論是不同群體的連接實際上無法幫助複雜傳染,甚至會傷害到他們的傳遞!
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="small_world">
|
||
|
||
<h3>
|
||
“小世界網路”
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
“小世界網路"的概念是由
|
||
<a target="_blank" href="http://www.jstor.org/stable/2786545">Travers & Milgram's 1969 實驗</a>,進而的到普及的。
|
||
這個實驗顯示,平均來說,在美國隨機挑選兩人,他們之間都可能有六個朋友可以聯繫起來 — ”六度分割理論“
|
||
|
||
<br><br>
|
||
|
||
小世界網路的概念在這篇論文中得到了更多數學證明
|
||
<a target="_blank" href="http://leonidzhukov.net/hse/2014/socialnetworks/papers/watts-collective_dynamics-nature_1998.pdf">
|
||
“Collective dynamics of small-world networks”</a> by Watts & Strogatz (1998),
|
||
這篇論文提到一個創造人際網路的演算法,這個算法具備有較短的平均長度(互相隔離程度低)
|
||
與較高的聚集程度(朋友們彼此間有很多共同好友)— 這就是一個人際網絡的最佳狀態!
|
||
|
||
<br><br>
|
||
|
||
你可以試玩一下
|
||
<a target="_blank" href="http://worrydream.com/ScientificCommunicationAsSequentialArt/">
|
||
the visual, interactive adaptation of that paper</a> by Bret Victor (2011).
|
||
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="swn_neurons">
|
||
|
||
<h3>
|
||
“[small world networks] describe how our neurons are connected”
|
||
</h3>
|
||
|
||
<div>
|
||
<a target="_blank" href="https://www.ncbi.nlm.nih.gov/pubmed/17079517">
|
||
“Small-world brain networks”</a> by Bassett & Bullmore (2006).
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="swn_creativity">
|
||
|
||
<h3>
|
||
“[小世界網絡] 使得集體創造力提升”
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
<a target="_blank" href="http://www.jstor.org/stable/10.1086/432782?seq=1#page_scan_tab_contents">
|
||
“Collaboration and Creativity: The Small World Problem”</a> by Uzzi & Spiro (2005).
|
||
This paper analyzed the social network of the Broadway scene over time,
|
||
and discovered that, yup, the network's most creative when it's a "small world" network!
|
||
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="swn_social_physics">
|
||
|
||
<h3>
|
||
“[小世界網路] 使得集體解決問題能力提升”
|
||
</h3>
|
||
|
||
<div>
|
||
See
|
||
<a target="_blank" href="http://socialphysics.media.mit.edu/">
|
||
“Social Physics”</a> by MIT Professor Alex "Sandy" Pentland (2014)
|
||
for a data-based approach to collective intelligence.
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="swn_jfk">
|
||
|
||
<h3>
|
||
“[small world networks] helped John F. Kennedy (barely) avoid nuclear war!”
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
Besides the NASA Challenger explosion, the most notorious example of groupthink
|
||
was the Bay of Pigs fiasco.
|
||
In 1961, US President John F. Kennedy and his team of advisors thought
|
||
— for some reason —
|
||
it would be a good idea to secretly invade Cuba and overthrow Fidel Castro.
|
||
They failed.
|
||
Actually, worse than failed: it led to the Cuban Missile Crisis of 1962,
|
||
<i>the closest the world had ever been to full-scale nuclear war.</i>
|
||
|
||
<br><br>
|
||
|
||
Yup, JFK really screwed up on that one.
|
||
|
||
<br><br>
|
||
|
||
But, having learnt some hard lessons from the Bay of Pigs fiasco,
|
||
JFK re-organized his team to avoid groupthink.
|
||
Among many things, he:
|
||
1) actively encouraged people to voice criticism,
|
||
thus lowering the "contagion threshold" for alternate ideas.
|
||
And
|
||
2) he broke his team up into sub-groups before reconvening,
|
||
which gave their group a "small world network"-like design!
|
||
Together, this arrangement allowed for a healthy diversity of opinion,
|
||
but without being too fractured — a wisdom of crowds.
|
||
|
||
<br><br>
|
||
|
||
And so, with the same <i>individuals</i> who decided the Bay of Pigs,
|
||
but re-arranged <i>collectively</i> to decide on the Cuban Missile Crisis...
|
||
JFK's team was able to reach a peaceful agreement with Soviet leader Nikita Khrushchev.
|
||
The Soviets would remove their missiles from Cuba, and in return,
|
||
the US would promise not to invade Cuba again.
|
||
(and also agreed, in secret, to remove the US missiles from Turkey)
|
||
|
||
<br><br>
|
||
|
||
And that's the story of how all of humanity almost died.
|
||
But a small world network saved the day! Sort of.
|
||
|
||
<br><br>
|
||
|
||
You can read more about this
|
||
<a target="_blank" href="https://hbr.org/2013/11/how-john-f-kennedy-changed-decision-making">
|
||
on Harvard Business Review</a>,
|
||
or from
|
||
<a target="_blank" href="https://web.archive.org/web/20100401033524/http://apps.olin.wustl.edu/faculty/macdonald/GroupThink.pdf">
|
||
the original article on groupthink</a>.
|
||
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="three_degrees">
|
||
|
||
<h3>
|
||
“我們影響 [...] 朋友的朋友的朋友!”
|
||
</h3>
|
||
|
||
<div>
|
||
再一次, 摘自 Nicholas Christakis 和 James Fowler's
|
||
完美的一書,
|
||
<a target="_blank" href="http://www.connectedthebook.com/">
|
||
連結</a> (2009).
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="flatter">
|
||
<h3>
|
||
“對阿諛奉承保持懷疑”
|
||
</h3>
|
||
<div>
|
||
是的, 也包含<i>這個</i>探索學習之中話語.
|
||
</div>
|
||
</reference>
|
||
<reference id="sandbox">
|
||
|
||
<h3>
|
||
★ 沙盒模式 ★
|
||
</h3>
|
||
|
||
<div>
|
||
鍵盤快速鍵(1, 2, 空白鍵,後退鍵)在<i>所有的</i>地圖遊戲裡都適用,不僅只在沙盒模式!
|
||
認真來說,你可以回到前面不同章節,然後編輯那裡的模擬器。
|
||
其實,這也是<i>我</i>創造所有地圖的方式。祝玩得愉快!
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="supporters" hidden=yes large=yes>
|
||
<div>
|
||
Dear Patreon supporters:
|
||
Your generosity <i>literally</i> feeds me and pays my rent.
|
||
You give me the freedom to make these weird educational games,
|
||
so, from the bottom of my heart, thank you. <3
|
||
<br>
|
||
<a target="_blank" href="https://www.patreon.com/ncase" style="text-decoration:none">
|
||
(want to support me in making more stuff like this? check out my Patreon!)</a>
|
||
</div>
|
||
</reference>
|
||
<reference id="playtesters" hidden=yes large=yes>
|
||
<div>
|
||
|
||
謝謝, 在這項目個階段,每位試玩 <i>Crowds</i>
|
||
的人!
|
||
|
||
<br><br>
|
||
<b>The Prototype:</b>
|
||
<br>
|
||
Maria ·
|
||
Monica Srivastava
|
||
|
||
<br><br>
|
||
<b>The Alpha:</b>
|
||
<br>
|
||
Glen Chiacchieri ·
|
||
Kalli Repzeti ·
|
||
Mali Akmanalp ·
|
||
Toph Tucker
|
||
|
||
<br><br>
|
||
<b>The Beta:</b>
|
||
<br>
|
||
Alex Dytrych ·
|
||
Amit Patel ·
|
||
Cassandra McClure ·
|
||
Catherine Ray ·
|
||
Josh Comeau ·
|
||
Kayle Sawyer ·
|
||
Matthew Conlen ·
|
||
Srini Kadamati ·
|
||
Vanessa Shen ·
|
||
Wick Perry
|
||
|
||
</div>
|
||
</reference>
|
||
|
||
</span>
|
||
|
||
<!--
|
||
|
||
And that's it! That's the last of what needed to a TRANSLATE
|
||
|
||
Thank you so, so much for doing this again, wow.
|
||
|
||
Finally, go to "translations.txt" and follow the instructions there,
|
||
in order to let this game "know" your translation exists.
|
||
|
||
-->
|