1650 lines
52 KiB
HTML
1650 lines
52 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"> <!-- 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>群眾的智慧與瘋狂</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">
|
||
|
||
<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="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/zh-TW.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">跳過 ></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>載入中...</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>
|
||
一共損失了 $460 萬美金(換算成今日的貨幣)。
|
||
|
||
<br><br>
|
||
|
||
如同牛頓先生在稍後所說:
|
||
<br>
|
||
<i>“我可以計算運行於天體軌道的運動，
|
||
<br>
|
||
但無法預知人類的瘋狂。”</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>
|
||
但我認為有個新的研究領域，
|
||
<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, 或是說 1/3 比例 ）
|
||
|
||
</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>擴散給每一個人！
|
||
開始的前幾個人被感染，是因為他們只暴露在一個酗酒者，而這位酗酒者佔他朋友比例的一半。（是位邊緣人啊，howhow 表示）
|
||
相較之下，在樹狀末梢的人<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>好囉, 開始準備收尾... <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/">
|
||
Connected</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> 活動,
|
||
這促使新聞媒體<i>不再</i>宣傳兇手的姓名，聲明與社交網路上的言論。
|
||
這會擴散不良的傳染。
|
||
相反，新聞媒體應該更關注受害者，第一發現人與市民英雄和受害者的家屬與社區。
|
||
</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://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)
|
||
創造了“複雜傳染”這個用詞，且展示出這與“簡單傳染”之間的重要區別。
|
||
|
||
<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>
|
||
“[小世界網絡]描述了我們的神經元是如何相互連接的”
|
||
</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).
|
||
這篇文章分析了長期以來百老匯領域的社交網絡，發現當人際網絡是個“小世界”網絡，是最具創造力的！真的沒錯。
|
||
|
||
</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)
|
||
這是一個基於數據為基礎來探討集體智慧的方法。
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="swn_jfk">
|
||
|
||
<h3>
|
||
“[小世界網路]協助了約翰 F. 甘迺迪（幾乎）避免了一場核戰！”
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
除了 NASA 挑戰者號的爆炸事件外，在團體迷思例子中最惡名昭彰的就是豬玀灣事件。
|
||
1961 年，美國總統約翰 F. 甘迺迪和他的顧問團 — 基與某些原因 — 認為暗中侵略古巴並推翻當時的領袖菲德爾·卡斯楚是個好的主意。
|
||
想當然爾，他們當然失敗了。
|
||
實際上，比入侵失敗更糟糕的事: 這間接導致了 1962 年的古巴導彈危機，<i>是有史以來全世界最接近全面核戰的一次。</i>
|
||
|
||
<br><br>
|
||
|
||
沒錯，約翰·甘迺迪搞砸了這件事。
|
||
|
||
<br><br>
|
||
|
||
但，從豬玀灣事件約翰·甘迺迪吸取了教訓，他重組了他的顧問團避免所謂團體的迷思。也做了很多事情，包含:
|
||
1) 積極鼓勵人們提出批評聲音，進而讓其他提案點子能降低所謂的“傳染閥值”。
|
||
2) 在重新制定決策流程前，他將自己團隊打破成為一個一個的次團隊，而這些次團隊就類似“小世界網絡”式的世界！
|
||
綜合來看，這樣的安排允許了一個健康的多樣意見環境，但同時也不會使得 — 群眾的智慧因為分散而削弱。
|
||
|
||
<br><br>
|
||
|
||
可以看見，儘管決定豬玀灣事件是<i>同一人</i>，但重組<i>團隊</i>在古巴導彈危機上決議...約翰·甘迺迪的團隊能夠與蘇聯領袖赫魯雪夫達成了和平協議，蘇聯撤離了他們在古巴上的導彈，與之相應是美國不再侵略古巴。（他們也秘密的承諾從土耳宜撤離美國導彈）
|
||
|
||
<br><br>
|
||
|
||
這就是一個當全人類的人性幾乎滅絕同時。
|
||
但小世界網絡拯救了全人類！可以這樣說吧
|
||
|
||
<br><br>
|
||
|
||
你可以研讀更多這類主題內容
|
||
<a target="_blank" href="https://hbr.org/2013/11/how-john-f-kennedy-changed-decision-making">
|
||
在哈佛商業周看評論上</a>,
|
||
或者是從
|
||
<a target="_blank" href="https://web.archive.org/web/20100401033524/http://apps.olin.wustl.edu/faculty/macdonald/GroupThink.pdf">
|
||
團體迷思的原始文章</a>.
|
||
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="three_degrees">
|
||
|
||
<h3>
|
||
“我們影響 [...] 朋友的朋友的朋友!”
|
||
</h3>
|
||
|
||
<div>
|
||
再一次, 摘自 Nicholas Christakis 和 James Fowler's
|
||
這本完美的書,
|
||
<a target="_blank" href="http://www.connectedthebook.com/">
|
||
Connected</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>
|
||
親愛的 Patreon 協助者們:
|
||
你們的慷慨解囊<i>實際</i>讓我獲得溫飽並且也付清了所有的房租。
|
||
你們給予我自由去創作這些神起古怪的教育性質遊戲，所以我打從心底非常的感謝各位。<3
|
||
<br>
|
||
<a target="_blank" href="https://www.patreon.com/ncase" style="text-decoration:none">
|
||
（希望支持我來做出更多類似的東西嗎？來看看我的 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.
|
||
|
||
-->
|