NotDotTeam/crowds
NotDotTeam
/
crowds
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
crowds/zh-TW.html

1683 lines
50 KiB
HTML
Raw Normal View History

Add Traditional Chinese (zh-TW) Translation
2018-05-07 09:03:10 +00:00
<!--
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">跳過 &gt;</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. 結合 &amp; 橋接</span> <!-- note: &amp; 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>連接 &amp; 參考文獻</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>the</span>
<br>
<span style="font-size: 60px;letter-spacing: 4px;">WISDOM</span>
<span style="position:relative;top: -10px;">and/or</span>
<span style="font-size: 60px;">MADNESS</span>
<br>
<span style="position: relative;top: -11px;">of</span>
<br>
<span style="font-size: 100px;line-height: 80px;position: relative;top: -15px; display:block;">CROWDS</span>
</div>
<div style="color:#999">
<!-- 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='./'>
</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>“我可以計算運行於天體
軌道的運動，
<br>
但無法預知人類的瘋狂。”</i>
<next>咦，糟透了<div class="rarr"></div> </next>
</words>
<words id="intro_2">
<div style="height:0.5em"></div>
Of course, that's not the only
當然，那不是唯一
<br>
time markets, institutions, or entire
<br>
democracies went haywire &mdash; the <i>madness</i> of
<br>
crowds. And yet, just when you lose hope in humanity,
<br>
you see citizens coordinating to rescue each other in
<br>
hurricanes, communities creating solutions to problems,
<br>
people fighting for a better world &mdash; the <i>wisdom</i> of crowds!
<div style="height:0.9em"></div>
<b>But <i>why</i> do some crowds turn to madness, or wisdom?</b> No theory
<br>
can explain everything, but I think a new field of study,
<br>
<b>network science</b>, can guide us! And its core idea is this: to
<br>
understand crowds, we should look not at the <i>individual
<br>
people</i>, but at...
<next>...their <i>connections.</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">
抹除&nbsp;&nbsp;&nbsp;連線
</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> 額外的獎勵 &uarr;
</div>
<div style="position:absolute; left:216px; top:10px;">
&darr; 相關連結與參考文獻
</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>
繪製一個網絡 &amp; 執行模擬，接著讓<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>
然而，感染未必是壞事 &mdash;
也許對於<i>瘋狂</i>的人群來說已經足夠，那麼...
<next>...瘋狂 <i>智慧?</i></next>
</span>
</words>
<words id="complex_complex_3">
在這裡，我們有個人 <icon name="blue"></icon>
他是位志工... 我也不是很清楚哪類型，
也許在颶風中拯救人群，或是教導當地平群社區的孩子，或也可能是很酷的一個人。
這裡的重點是，這是一個“好的”複雜傳染。
這一次我們假設這個閥值僅僅只有 25% &mdash;
人會自願擔任志工，但僅僅只需要 25% 或是更多他們的朋友就會跟著一起去做。
嘿，善意的企業也是需要一點社會鼓勵的
<br><br>
<b>&larr; 讓每個人都感受些好感！</b>
</words>
<words id="complex_complex_3_end">
<span style="line-height:1.3em; display:block;">
<b>注意:</b> 志願服務僅僅只是眾多複雜傳染的<i>一種</i>！
其他包含：選民投票率、生活習慣、挑戰你的信仰、花時間深入了解問題 &mdash; 任何一種需要超過一次“揭露”的事情。
複雜傳染<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>結合 &amp; 橋接 <div class="rarr"></div> </next>
</words>
<!-- Bonding & Bridging -->
<words id="bonding_1">
&larr; Too few connections, and an idea can't spread.
<br>
Too many connections, and you get groupthink. <div class="rarr"></div>
</words>
<words id="bonding_2">
<b>
Draw a group that hits the sweet spot:
just connected enough to spread a complex idea!
<div class="darr"></div>
</b>
</words>
<words id="bonding_end">
Simple enough!
The number of connections <i>within</i> a group is called <b>bonding social capital</b><ref id="social_capital"></ref>.
But what about the connections...
<next wiggle>...<i>between</i> groups?</next>
</words>
<words id="bridging_1">
As you may have already guessed,
the number of connections <i>between</i> groups is called
<b>bridging social capital</b>.
This is important, because it helps groups break out of their insular echo chambers!
<br>
<b>Build a bridge, to "infect" everyone with complex wisdom:</b>
</words>
<words id="bridging_end">
Like bonding, there's a sweet spot for bridging, too.<ref id="bridge"></ref>
(extra challenge: try drawing a bridge so thick that the complex contagion
<i>can't</i> pass through it!)
Now that we know how to "design" connections <i>within</i> and <i>between</i> groups, let's...
<next wiggle>...do BOTH at the same time!</next>
</words>
<words id="bb_1">
<b style="font-size:2em">FINAL PUZZLE!</b>
<br>
Draw connections within groups (bonding) and between groups (bridging)
to spread wisdom to the whole crowd:
</words>
<words id="bb_2">
Congrats, you've just drawn a very special kind of network!
Networks with the right mix of bonding and bridging
are profoundly important, and they're called...
<next wiggle>“Small World Networks” <div class="rarr"></div> </next>
</words>
<words id="bb_small_world_1">
<i>"Unity without uniformity". "Diversity without division". "E Pluribus Unum: out of many, one".</i>
<br>
No matter how it's phrased,
people across times and cultures often arrive at the same piece of wisdom:
<b>
a healthy society needs a sweet spot of bonds <i>within</i> groups
and bridges <i>between</i> groups.
</b>
That is:
</words>
<words id="bb_small_world_2">
Not this...
<br>
(because ideas can't spread)
</words>
<words id="bb_small_world_3">
nor this...
<br>
(because you'll get groupthink)
</words>
<words id="bb_small_world_4">
...but <i>THIS:</i>
</words>
<words id="bb_small_world_5">
Network scientists now have a mathematical definition for this ancient wisdom:
the <b>small world network</b><ref id="small_world"></ref>.
This optimal mix of bonding+bridging describes how
our neurons are connected<ref id="swn_neurons"></ref>,
fosters collective creativity<ref id="swn_creativity"></ref>
and problem-solving<ref id="swn_social_physics"></ref>,
and even once helped US President John F. Kennedy (barely) avoid nuclear war!<ref id="swn_jfk"></ref>
So, yeah, small worlds are a big deal.
</words>
<words id="bb_small_world_end">
<next>ok, let's wrap this up... <div class="rarr"></div> </next>
</words>
<!-- Sandbox -->
<words id="sandbox_caption">
(pst... wanna know a secret?<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">
The Contagion's Color:
</words>
<words id="sandbox_tool_chooser">
Select a tool...
</words>
<words id="sandbox_tool_pencil">
Draw Network
</words>
<words id="sandbox_tool_add">
Add Person
</words>
<words id="sandbox_tool_add_infected">
Add "Infected"
</words>
<words id="sandbox_tool_move">
Drag Person
</words>
<words id="sandbox_tool_delete">
Delete Person
</words>
<words id="sandbox_tool_clear">
<b>CLEAR IT ALL</b>
</words>
<words id="sandbox_shortcuts_label">
(...or, use keyboard shortcuts!)
</words>
<words id="sandbox_shortcuts">
[1]: Add Person &nbsp;&nbsp;&nbsp; [2]: Add "Infected"
<br>
[Space]: Drag &nbsp;&nbsp;&nbsp; [Backspace]: Delete
</words>
<!-- Conclusion -->
<words id="conclusion_1">
<div style="font-size: 30px;">
IN CONCLUSION: it's all about...
</div>
<div style="
width: 100%;
position: absolute;
font-size: 88px;
top: 20px;
line-height: 100px; display:block;
">
Contagions &amp; Connections
</div>
<div style="
width: 710px;
position: absolute;
top: 125px;
left: 250px;
">
<b>Contagions:</b>
Like how neurons pass signals in a brain,
people pass beliefs &amp; behaviors in a society.
Not only do we influence our friends,
we also influence our friends' friends, and even our friends' friends' friends!<ref id="three_degrees"></ref>
(“be the change you wanna see in the world” etc etc)
But, like neurons, it's not just signals that matter, it's also...
</div>
<div style="
width: 710px;
position: absolute;
top: 275px;
left: 250px;
">
<b>Connections:</b>
Too few connections and complex ideas can't spread.
Too <i>many</i> connections and complex ideas get crushed by groupthink.
The trick is to build a small world network, the optimal mix of
bonding and bridging: <i>e pluribus unum.</i>
</div>
<div style="
width: 350px;
position: absolute;
top: 410px;
left: 220px;
text-align: center;
color: #999;
">
(wanna make your own simulations?
check out Sandbox Mode, by clicking the (★) button below!)
</div>
<div style="
width: 400px;
position: absolute;
top: 395px;
right: 0px;
text-align: right;
">
So, what about our question from the very beginning?
Why <i>do</i> some crowds turn to...
</div>
<div style="
width: 300px;
position: absolute;
top: 460px;
right: 0px;
">
<next>...wisdom and/or madness?</next>
</div>
</words>
<words id="conclusion_2">
<span style="line-height:1.4em; display:block;">
<div style="height:0.5em"></div>
From Newton to NASA to
<br>
network science, we've covered a lot here
<br>
today. Long story short, the madness of crowds
<br>
is not necessarily due to the <i>individual people</i>, but due
<br>
to how we're trapped in a network's sticky web.
<div style="height:0.9em"></div>
That <i>does NOT</i> mean abandoning personal responsibility, for
<br>
we're also the <i>weavers</i> of that web. So, improve your contagions:
<br>
be skeptical of ideas that flatter you<ref id="flatter"></ref>, spend time understanding
<br>
complex ideas. And, improve your connections: bond with similar
<br>
folk, but also build bridges across cultural/political divides.
<div style="height:0.9em"></div>
We can weave a wise web. Sure, it's harder than doodling
<br>
lines on a screen...
<next>...but so, so worth it.</next>
</span>
</words>
<words id="conclusion_3">
<i>
“The great triumphs and tragedies of history are caused,
not by people being fundamentally good or fundamentally bad,
but by people being fundamentally people.”
</i>
<br>
<span style="position:relative; top:5px">~</span> Neil Gaiman &amp; Terry Pratchett
<div style="height:0.8em"></div>
<next small>&lt;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;">
created by</span>
<div style="font-size: 3em; line-height: 1.0em;">
NICKY CASE</div>
<a target="_blank" href="http://ncase.me" style="text-decoration:none">
play my other shtuff</a> ·
<a target="_blank" href="https://twitter.com/ncasenmare" style="text-decoration:none">
follow my tweeter</a>
<br><br>
<span style="color:#777; position:relative; top:5px; display: inline-block; margin-top: 15px;">
lots of love and thanks to</span>
<div style="font-size: 3em; line-height: 1.0em;">
MY PATREON SUPPORTERS</div>
<a target="_blank" href="https://www.patreon.com/ncase" style="text-decoration:none">
help me make more like this! &lt;3</a>
<br>
<a onclick='publish("reference/show", ["supporters"]);'>
see my supporters</a> ·
<a onclick='publish("reference/show", ["playtesters"]);'>
see my playtesters</a>
<br><br>
<span style="display: inline-block; margin-top: 15px;">
♫ music is
<a target="_blank" href="http://freemusicarchive.org/music/Komiku/Tale_on_the_Late/" style="text-decoration:none">
"Friends 2018" and "Friends 2068"</a>
by Komiku
<br>
&lt;/&gt; <i>Crowds</i> is
<a target="_blank" href="https://github.com/ncase/crowds" style="text-decoration:none">
fully open source</a>
</span>
<br>
<bon id="further_reading"></bon>
</div>
</words>
<!-- x. misc -->
<words id="WIN">
WIN
</words>
<words id="sim_start">
start simulation
</words>
<words id="sim_stop">
reset &amp; re-draw
</words>
<words id="translations_exist">
Fan-made translations:
</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>
A quick response to James Surowiecki's <i>The Wisdom of Crowds</i>
</h3>
<div>
<img src="sprites/bonus/surowieki.jpg" width="200" height="300" style="float:left; margin-right:1em"/>
First off, I'm not dissing
<a target="_blank" href="https://en.wikipedia.org/wiki/The_Wisdom_of_Crowds">
this book.</a>
It's a good book, and Surowiecki was trying to tackle the same question I am:
<b>“why do some crowds turn to madness, or wisdom?”</b>
<br><br>
Surowiecki's answer: crowds make good decisions when everybody is as independent as possible.
He gives the story of a county fair,
where the townsfolk were invited to guess the weight of an ox.
Surprisingly, the average of <i>all</i> their guesses was better than any <i>one</i> guess</i>.
But, here's the rub: the people have to guess <i>independently</i> of each other.
Otherwise,
they'd be influenced by earlier incorrect guesses,
and the average answer would be highly skewed.
<br><br>
But... I don't think "make everyone as independent as possible" is the full answer.
Even geniuses, who we mischaracterize as the most independent thinkers,
are deeply influenced by others. As Sir Isaac Newton said,
<i>“If I have seen further, it is by standing on the sholders of Giants.”</i>
<br><br>
So, which idea is correct?
Does wisdom come from thinking for yourself, or thinking with others?
The answer is: "yes".
<br><br>
So that's what I'll try to explain in this explorable explanation:
how to get that sweet spot between independence and interdependence &mdash;
that is, how to get a wise crowd.
</div>
</bonus>
<bonus id="connections">
<h3>
What other kinds of connections are there?
</h3>
<div>
For the sake of simplicity,
my simulations pretend that people can only be connected through friendships,
and that all friendships are equal.
But network scientists <i>do</i> consider other ways we can be connected, such as:
<div style="clear:both"></div>
<br>
<img src="sprites/bonus/connection1.png" width="250" height="150" style="float:left; margin-right:1em"/>
<b>Directional connections.</b> Alice is the boss of Bob, but Bob is not the boss of Alice.
Carol is the parent of Dave, but Dave is not the parent of Carol.
"Boss" &amp; "parent" are <i>directional</i> relationships:
the relationship only goes one way.
In contrast, "friends" is a <i>bidirectional</i> relationship:
the relationship goes both ways. (well, hopefully)
<div style="clear:both"></div>
<br>
<img src="sprites/bonus/connection2.png" width="250" height="150" style="float:left; margin-right:1em"/>
<b>Weighted connections.</b> Elinor and Frankie are mere acquaintances.
George and Harry are Best Friends Forever.
Even though there's a "friendship" connection in both cases, the second one is stronger.
We say that these two connections have different "weights".
<div style="clear:both"></div>
<br>
<img src="sprites/bonus/map.png" width="200" height="200" style="float:left; margin-right:1em"/>
Just remember: <b>all these simulations are wrong.</b> The same way any map is "wrong".
You see the map on the left? Buildings aren't gray featureless blocks!
Words don't float above the city! However, maps are useful not <i>despite</i> being simplified,
but <i>because</i> they're simplified. Same goes for simulations, or any scientific theory.
Of <i>course</i> they're "wrong" &mdash; that's what makes them <i>useful</i>.
</div>
</bonus>
<bonus id="contagions">
<h3>
What other kinds of contagions are there?
</h3>
<div>
There are so, so many ways that network scientists can simulate "contagions"!
I picked the simplest one, for educational purposes.
But here's other ways you could do it:
<div style="clear:both"></div>
<br>
<img src="sprites/bonus/contagion1.png" width="250" height="150" style="float:left; margin-right:1em"/>
<b>Contagions with Randomness</b>.
Being "exposed" to a contagion doesn't <i>guarantee</i> you'll be infected,
it only makes it more <i>likely</i>.
<div style="clear:both"></div>
<br>
<img src="sprites/bonus/contagion2.png" width="250" height="150" style="float:left; margin-right:1em"/>
<b>People have different contagion thresholds.</b>
My simulations pretend that everyone has the same threshold for binge-drinking (50%) or
volunteering (25%) or misinformation (0%).
Of course, that's not true in real life, and you could make your sim reflect that.
<div style="clear:both"></div>
<br>
<img src="sprites/bonus/contagion3.png" width="250" height="150" style="float:left; margin-right:1em"/>
<b>An ecology of contagions.</b>
What if there were <i>multiple</i> contagions, with <i>different</i> thresholds?
For example, a simple "madness" contagion and a complex "wisdom" contagion.
If someone's infected with madness, can they still be infected with wisdom?
Or vice versa?
Can someone be infected with both?
<div style="clear:both"></div>
<br>
<img src="sprites/bonus/contagion4.png" width="250" height="150" style="float:left; margin-right:1em"/>
<b>Contagions that mutate and evolve.</b>
Ideas don't pass perfectly from one person to another the way a virus does.
Like a game of Telephone, the message gets mutated with each re-telling &mdash;
and sometimes the mutant will be more infectious than the original!
So, over time, ideas "evolve" to be more catchy, copy-able, contagious.
<div style="clear:both"></div>
</div>
</bonus>
<bonus id="further_reading">
<h3>
I wanna learn more! What else can I read and/or play?
</h3>
<div>
This explorable explanation was just a springboard for your curiosity,
so you can dive deeper into a vast pool of knowledge!
Here's more stuff on networks or social systems:
<br><br>
<img src="sprites/bonus/connected.png" width="200" height="200" style="float:left; margin-right:1em"/>
<b>Book:</b>
<a target="_blank" href="http://www.connectedthebook.com/">
Connected</a>
by Nicholas Christakis and James Fowler (2009).
An accessible tour of how our networks affect our lives, for good or ill.
<a target="_blank" href="http://www.connectedthebook.com/pdf/excerpt.pdf">
Here's an excerpt: Preface &amp; Chapter 1
</a>
<div style="clear:both"></div>
<br>
<img src="sprites/bonus/trust.png" width="200" height="200" style="float:left; margin-right:1em"/>
<b>Interactive:</b>
<a target="_blank" href="http://ncase.me/trust/">
The Evolution of Trust</a> by Nicky Case (me) (2017).
A game about the game theory of how cooperation is built... or destroyed.
<div style="clear:both"></div>
<br>
<img src="sprites/bonus/polygons.png" width="200" height="200" style="float:left; margin-right:1em"/>
<b>Interactive:</b>
<a target="_blank" href="http://ncase.me/polygons/">
Parable of the Polygons</a> by Vi Hart and Nicky Case (also me) (2014).
A story about how harmless choices can create a harmful world.
<div style="clear:both"></div>
<br>
<img src="sprites/bonus/ee.png" width="200" height="200" style="float:left; margin-right:1em"/>
Or, if you just want to see a whole gallery of interactive edu-things, here's
<a target="_blank" href="http://explorabl.es/">
Explorable Explanations</a>,
a hub for learning through play!
<div style="clear:both"></div>
</div>
</bonus>
<!-- - - - - - - -->
<!-- REFERENCES -->
<!-- - - - - - - -->
<!--
Final thing! These references also need you to TRANSLATE:
-->
<reference id="drunk">
<h3>
“virtually all [college] students reported that their friends drank more than they did.”
</h3>
<div>
<a target="_blank" href="https://www.ncbi.nlm.nih.gov/pubmed/1758185">
“Biases in the perception of drinking norms among college students”</a> by Baer et al (1991)
</div>
</reference>
<reference id="majority">
<h3>
“The Majority Illusion”
</h3>
<div>
<a target="_blank" href="http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0147617">
“The Majority Illusion in Social Networks”</a> by Lerman et al (2016).
<br>
Related: <a target="_blank" href="https://en.wikipedia.org/wiki/Friendship_paradox">
The Friendship Paradox</a>.
</div>
</reference>
<reference id="contagion">
<h3>
“strong statistical evidence that
smoking, health, happiness, voting patterns, and cooperation levels
are all contagious”
</h3>
<div>
From Nicholas Christakis and James Fowler's
wonderfully-written, layperson-accessible book,
<a target="_blank" href="http://www.connectedthebook.com/">
Connected</a> (2009).
</div>
</reference>
<reference id="suicides">
<h3>
“some evidence that suicides are [contagious], too”
</h3>
<div>
<a target="_blank" href="http://www.jstor.org/stable/42000514?seq=4#page_scan_tab_contents">
“Suicide Contagion and the Reporting of Suicide: Recommendations from a National Workshop”</a>
by O'Carroll et al (1994), endorsed by the frickin' Centers for Disease Control &amp; Prevention (CDC).
</div>
</reference>
<reference id="shootings">
<h3>
“some evidence that mass shootings are [contagious], too”
</h3>
<div>
<a target="_blank" href="http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0117259">
“Contagion in Mass Killings and School Shootings”</a> by Towers et al (2015).
<br><br>
Also see: the
<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>
“The world's financial institutions fell for such a cascade in 2008.”
</h3>
<div>
<a target="_blank" href="https://newrepublic.com/article/63023/wall-streets-lemmings">
“Lemmings of Wall Street”</a> by Cass Sunstein, is a quick, non-technical read.
Published in Oct 2008, right in the wake of the crash.
</div>
</reference>
<reference id="complex">
<h3>
“the complex contagion theory.”
</h3>
<div>
<a target="_blank" href="https://www.unc.edu/~fbaum/teaching/articles/Granovetter_AJS_1978.pdf">
“Threshold Models of Collective Behavior”</a> by Granovetter (1978)
was the first time, as far as I know, anyone described a "complex contagion" model.
(although he didn't use that specific name)
<br><br>
<a target="_blank" href="http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0180802">
“Evidence for complex contagion models of social contagion from observational data”</a>
by Sprague &amp; House (2017)
shows that complex contagions do, in fact, exist. (at least, in the social media data they looked at)
<br><br>
Finally,
<a target="_blank" href="https://arxiv.org/pdf/cond-mat/0403699.pdf">
“Universal behavior in a generalized model of contagion”</a> by Dodds &amp; Watts (2004)
proposes a model that unifies <i>all</i> kinds of contagions:
simple and complex, biological and social!
</div>
</reference>
<reference id="possum">
<h3>
“the possum has 13 nipples”
</h3>
<div>
arranged in a ring of 12 nipples, plus one in the middle
</div>
</reference>
<reference id="groupthink">
<h3>
“groupthink”
</h3>
<div>
This Orwell-inspired phrase was coined by Irving L. Janis in 1971.
<a target="_blank" href="https://web.archive.org/web/20100401033524/http://apps.olin.wustl.edu/faculty/macdonald/GroupThink.pdf">
In his original article</a>,
Janis investigates cases of groupthink, lists its causes, and &mdash; thankfully &mdash;
some possible remedies.
</div>
</reference>
<reference id="social_capital">
<h3>
“bonding and bridging social capital”
</h3>
<div>
These two types of social capital &mdash; "bonding" and "bridging" &mdash;
were named by Robert Putnam in his insightful 2000 book,
<a target="_blank" href="http://bowlingalone.com/">
Bowling Alone</a>. His discovery:
across almost <i>all</i> empircal measures of social connectiveness,
Americans are more alone than ever.
Golly.
</div>
</reference>
<reference id="bridge">
<h3>
“bridging social capital has a sweet spot”
</h3>
<div>
<a target="_blank" href="https://sociology.stanford.edu/sites/default/files/publications/the_strength_of_weak_ties_and_exch_w-gans.pdf">
“The Strength of Weak Ties”</a> by Granovetter (1973)
showed that connections across groups helps spread simple contagions (like information),
but
<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 &amp; Macy (2007)
showed that connections across groups may not help complex contagions,
and it fact, can hurt their spread!
</div>
</reference>
<reference id="small_world">
<h3>
“the small world network”
</h3>
<div>
The idea of the "small world" was popularized by
<a target="_blank" href="http://www.jstor.org/stable/2786545">Travers &amp; Milgram's 1969 experiment</a>,
which showed that, on average, any two random people in the United States
were just six friendships apart &mdash; "six degrees of separation"!
<br><br>
The small-world network got more mathematical meat on its bones with
<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 &amp; Strogatz (1998),
which proposed an algorithm for creating networks
with both low average path length (low degree of separation)
and high clustering (friends have lots of mutual friends) &mdash;
that is, a network that hits the sweet spot!
<br><br>
You can also play with
<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 &amp; Bullmore (2006).
</div>
</reference>
<reference id="swn_creativity">
<h3>
“[small world networks] give rise to collective creativity”
</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 &amp; 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>
“[small world networks] give rise to collective problem-solving”
</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
&mdash; for some reason &mdash;
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 &mdash; 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>
“we influence [...] our friends' friends' friends!”
</h3>
<div>
Again, from Nicholas Christakis and James Fowler's
wonderful book,
<a target="_blank" href="http://www.connectedthebook.com/">
Connected</a> (2009).
</div>
</reference>
<reference id="flatter">
<h3>
“be skeptical of ideas that flatter you”
</h3>
<div>
yes, including the ideas in <i>this</i> explorable explanation.
</div>
</reference>
<reference id="sandbox">
<h3>
★ Sandbox Mode ★
</h3>
<div>
The keyboard shortcuts (1, 2, space, backspace)
work in <i>all</i> the puzzles, not just Sandbox Mode!
Seriously, you can go back to a different chapter,
and edit the simulation right there.
In fact, that's how <i>I</i> created all these puzzles. Have fun!
</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. &lt;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>
Thank you, everyone who playtested <i>Crowds</i>
during its many stages of life!
<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.
-->