NotDotTeam/crowds
NotDotTeam
/
crowds
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

SO CLOSE

This commit is contained in:
Nicky Case 2018-04-26 10:15:00 -04:00
parent 40748d3585
commit 110d0a0e1f
25 changed files with 272 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
css/index.css
View File

@ -4,7 +4,6 @@
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url(PatrickHand-Regular.ttf) format('truetype'); src: url(PatrickHand-Regular.ttf) format('truetype');
/*unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;*/
} }
/* HTML & BODY */ /* HTML & BODY */
@ -17,7 +16,7 @@ html, body{
body{ body{
margin:0; margin:0;
font-family: "PatrickHand"; font-family: "PatrickHand", Helvetica, Arial;
font-size: 23px; font-size: 23px;
line-height: 1.5em; line-height: 1.5em;
@ -294,18 +293,25 @@ a:hover{
user-select: none; user-select: none;
} }
#sound{ #sound{
position: absolute;
left:0; top:0;
color: #fff; color: #fff;
width: 150px; width: 150px;
font-size: 30px; font-size: 30px;
height: 60px; height: 60px;
} }
#sound[mute=yes]{
opacity: 0.5;
}
#sound_icon{ #sound_icon{
background: url(../sprites/ui/sound.png);
background-size: auto 100%;
width: 60px; height: 60px; width: 60px; height: 60px;
position: absolute; position: absolute;
} }
#sound_on, #sound_off{ #sound_on, #sound_off{
position: absolute; position: absolute;
left:60px; left:65px;
padding: 15px 0; padding: 15px 0;
display: block; display: block;
line-height: 28px; line-height: 28px;
@ -313,10 +319,12 @@ a:hover{
letter-spacing: 2px; letter-spacing: 2px;
} }
#sound[mute=no] > #sound_icon{ #sound[mute=no] > #sound_icon{
background: rgba(255,255,255,0.5); /*background: rgba(255,255,255,0.5);*/
background-position: 0px 0px;
} }
#sound[mute=yes] > #sound_icon{ #sound[mute=yes] > #sound_icon{
background: rgba(255,255,255,0.25); /*background: rgba(255,255,255,0.25);*/
background-position: -60px 0px;
} }
#sound[mute=no] > #sound_on{ #sound[mute=no] > #sound_on{
display: block; display: block;
@ -324,6 +332,32 @@ a:hover{
#sound[mute=yes] > #sound_off{ #sound[mute=yes] > #sound_off{
display: block; display: block;
} }
#sharing{
position: absolute;
right:10px; top:0;
width: 150px;
overflow: hidden;
}
#sharing > a{
float: left;
display: block;
width: 50px;
height: 60px;
background: url(../sprites/ui/sharing.png);
background-size: auto 100%;
}
#sharing #fb{
background-position: 0px 0px;
}
#sharing #tw{
background-position: -50px 0px;
}
#sharing #em{
background-position: -100px 0px;
}
#share_desc{
display: none;
}
#translations{ #translations{
position: absolute; position: absolute;
top: 14px; top: 14px;
@ -423,6 +457,15 @@ a:hover{
} }
/* PENCIL */ /* PENCIL */
#pencil_container{
position: absolute;
top:0; left:0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
cursor: none;
}
#pencil{ #pencil{
position: absolute; position: absolute;
width:100px; width:100px;

250
index.html
View File

@ -3,10 +3,34 @@
THE WISDOM AND/OR MADNESS OF CROWDS THE WISDOM AND/OR MADNESS OF CROWDS
by Nicky Case | apr 2018 by Nicky Case | apr 2018
MY "WHY" FOR MAKING THIS: - - - - - - - - - - -
+ to build a foundation for further curiosity about networks, group dynamics
+ to practice teaching with problem-solving, a pre-req for skills FAN TRANSLATION GUIDE:
+ to instill transcendent sense of "fundamentally people", of Humanity's Brain <3 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 4000 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 rename it [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
--> -->
@ -14,34 +38,31 @@ MY "WHY" FOR MAKING THIS:
<html> <html>
<head> <head>
<!-- TO TRANSLATE: "title", "description" --> <!-- Meta Info -->
<title>The Wisdom and/or Madness of Crowds</title> <title>The Wisdom and/or Madness of Crowds</title> <!-- <title>(TRANSLATE this part only)</title> -->
<meta name="description" content="an interactive guide to human networks"/> <meta name="description" content="an interactive guide to human networks"/> <!-- content="(TRANSLATE this part only)" -->
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding"> <meta content="utf-8" http-equiv="encoding">
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=960, initial-scale=1, maximum-scale=1, user-scalable=0"/> <!--960, max-->
<link rel="icon" type="image/png" href="favicon.png"> <link rel="icon" type="image/png" href="favicon.png">
<!-- TO TRANSLATE: "name", "description" --> <!-- Sharing -->
<meta itemprop="name" content="The Wisdom and/or Madness of Crowds"> <meta itemprop="name" content="The Wisdom and/or Madness of Crowds"> <!-- content="(TRANSLATE this part only)" -->
<meta itemprop="description" content="an interactive guide to human networks"> <meta itemprop="description" content="an interactive guide to human networks"> <!-- content="(TRANSLATE this part only)" -->
<meta itemprop="image" content="http://ncase.me/crowds/social/thumbnail.png"> <meta itemprop="image" content="http://ncase.me/crowds/social/thumbnail.png">
<!-- TO TRANSLATE: "name", "description" --> <meta name="twitter:title" content="The Wisdom and/or Madness of Crowds"> <!-- content="(TRANSLATE this part only)" -->
<meta name="twitter:description" content="an interactive guide to human networks"> <!-- content="(TRANSLATE this part only)" -->
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ncasenmare"> <meta name="twitter:site" content="@ncasenmare">
<meta name="twitter:title" content="The Wisdom and/or Madness of Crowds">
<meta name="twitter:description" content="an interactive guide to human networks">
<meta name="twitter:creator" content="@ncasenmare"> <meta name="twitter:creator" content="@ncasenmare">
<meta name="twitter:image" content="http://ncase.me/crowds/social/thumbnail.png"> <meta name="twitter:image" content="http://ncase.me/crowds/social/thumbnail.png">
<!-- TO TRANSLATE: "name", "description" --> <meta property="og:title" content="The Wisdom and/or Madness of Crowds"> <!-- content="(TRANSLATE this part only)" -->
<meta property="og:title" content="The Wisdom and/or Madness of Crowds"> <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:type" content="website">
<meta property="og:url" content="http://ncase.me/crowds/"> <meta property="og:url" content="http://ncase.me/crowds/">
<meta property="og:image" content="http://ncase.me/crowds/social/thumbnail.png"> <meta property="og:image" content="http://ncase.me/crowds/social/thumbnail.png">
<meta property="og:description" content="an interactive guide to human networks">
<!-- Styles --> <!-- Styles -->
<link rel="stylesheet" type="text/css" href="css/index.css"> <link rel="stylesheet" type="text/css" href="css/index.css">
@ -66,7 +87,7 @@ MY "WHY" FOR MAKING THIS:
<canvas id="scratch" width="711" height="400"></canvas> <canvas id="scratch" width="711" height="400"></canvas>
<!-- Skip --> <!-- Skip -->
<div id="skip">skip &gt;</div> <div id="skip">skip &gt;</div> <!-- TRANSLATE -->
<!-- Modal --> <!-- Modal -->
<div id="modal_container"> <div id="modal_container">
@ -85,12 +106,25 @@ MY "WHY" FOR MAKING THIS:
<div id="navigation_container"> <div id="navigation_container">
<div id="sound" mute="no"> <div id="sound" mute="no">
<div id="sound_icon"></div> <div id="sound_icon"></div>
<span id="sound_on">ON</span> <span id="sound_on">ON</span> <!-- TRANSLATE -->
<span id="sound_off">OFF</span> <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">
The Wisdom and/or Madness of Crowds <!-- TRANSLATE -->
</span>
<span id="share_desc">
<!-- TRANSLATOR: keep this on ONE LINE or the social sharing will break! -->
Why do some groups of people act smart, dumb, kind, cruel? An interactive guide to human networks: <!-- TRANSLATE -->
</span>
</div> </div>
<div id="navigation"> <div id="navigation">
<!-- The chapters --> <!-- The chapters -->
<!-- TRANSLATE all the Chapter names! -->
<div chapter="Introduction"> <div chapter="Introduction">
<span>0</span> <span>0</span>
<span>0. Introduction</span> <span>0. Introduction</span>
@ -109,7 +143,7 @@ MY "WHY" FOR MAKING THIS:
</div> </div>
<div chapter="BB"> <div chapter="BB">
<span>4</span> <span>4</span>
<span>4. Bonding &amp; Bridging</span> <span>4. Bonding &amp; Bridging</span> <!-- note: &amp; is html for the "and" sign -->
</div> </div>
<div chapter="SmallWorld"> <div chapter="SmallWorld">
<span>5</span> <span>5</span>
@ -134,11 +168,11 @@ MY "WHY" FOR MAKING THIS:
<!-- Bonus Notes & References --> <!-- Bonus Notes & References -->
<div modal="bonus"> <div modal="bonus">
<span>?</span> <span>?</span>
<span>Bonus Boxes!</span> <span>Bonus Boxes!</span> <!-- TRANSLATE -->
</div> </div>
<div modal="references"> <div modal="references">
<span style="margin-top: 7px; font-size: 35px;">*</span> <span style="margin-top: 7px; font-size: 35px;">*</span>
<span>Links &amp; References</span> <span>Links &amp; References</span> <!-- TRANSLATE -->
</div> </div>
<div modal="translations"> <div modal="translations">
<span style="margin-top:5px; position:relative;"><span style=" <span style="margin-top:5px; position:relative;"><span style="
@ -151,7 +185,7 @@ MY "WHY" FOR MAKING THIS:
top: -1px; top: -1px;
left: 16px; left: 16px;
">あ</span></span> ">あ</span></span>
<span>Translations</span> <span>Translations</span> <!-- TRANSLATE -->
</div> </div>
<!-- The hover bubble --> <!-- The hover bubble -->
@ -163,20 +197,72 @@ MY "WHY" FOR MAKING THIS:
</div> </div>
<!-- The Pencil --> <!-- The Pencil -->
<canvas id="pencil"></canvas> <div id="pencil_container">
<canvas id="pencil"></canvas>
</div>
<!-- Preloader --> <!-- Preloader -->
<div id="pre_preloader"> <div id="pre_preloader">
<div>loading...</div> <div>loading...</div> <!-- TRANSLATE -->
</div> </div>
</body> </body>
</html> </html>
<!-- - - - - -->
<!-- SCRIPTS -->
<!-- - - - - -->
<script src="js/lib/helpers.js"></script>
<script src="js/lib/minpubsub.src.js"></script>
<script src="js/lib/howler.min.js"></script>
<script src="js/lib/Key.js"></script>
<script src="js/lib/Mouse.js"></script>
<script src="js/lib/Sprite.js"></script>
<script src="js/slideshow/Slideshow.js"></script>
<script src="js/slideshow/Pencil.js"></script>
<script src="js/slideshow/Boxes.js"></script>
<script src="js/slideshow/Scratch.js"></script>
<script src="js/slideshow/Navigation.js"></script>
<script src="js/slideshow/SimUI.js"></script>
<script src="js/slideshow/SandboxUI.js"></script>
<script src="js/slideshow/Modal.js"></script>
<script src="js/slideshow/Preloader.js"></script>
<script src="js/slideshow/Translations.js"></script>
<script src="js/sim/Peep.js"></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"></script>
<script src="js/main.js"></script>
<!-- - - - - - - - - - - - --> <!-- - - - - - - - - - - - -->
<!-- THE SLIDESHOW'S WORDS --> <!-- 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"> <span style="display:none">
<!-- Preloader --> <!-- Preloader -->
@ -192,11 +278,14 @@ MY "WHY" FOR MAKING THIS:
<br> <br>
<span style="position: relative;top: -11px;">of</span> <span style="position: relative;top: -11px;">of</span>
<br> <br>
<span style="font-size: 100px;line-height: 80px;position: relative;top: -15px;">CROWDS</span> <span style="font-size: 100px;line-height: 80px;position: relative;top: -15px; display:block;">CROWDS</span>
</div> </div>
<div style="color:#999"> <div style="color:#999">
<!-- TRANSLATE note: comment out the line below... -->
playing time: 30 min • by nicky case, april 2018 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> -->
</div> </div>
</words> </words>
@ -210,10 +299,20 @@ MY "WHY" FOR MAKING THIS:
</words> </words>
<words id="preloader_play"> <words id="preloader_play">
let's play! &rarr; let's play! &rarr;
</words> </words>
<!-- Introduction --> <!-- 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.
And &rarr; &larr; &darr; &uarr; are pointy arrows.
-->
<words id="intro"> <words id="intro">
@ -458,7 +557,7 @@ MY "WHY" FOR MAKING THIS:
</words> </words>
<words id="complex_complex_2"> <words id="complex_complex_2">
<span style="line-height:1.3em"> <span style="line-height:1.3em; display:block;">
Unlike our earlier "fake news" <icon red></icon> contagion, Unlike our earlier "fake news" <icon red></icon> contagion,
this contagion <icon yellow></icon> does <i>not</i> spread to everyone! this contagion <icon yellow></icon> does <i>not</i> spread to everyone!
@ -756,7 +855,7 @@ MY "WHY" FOR MAKING THIS:
position: absolute; position: absolute;
font-size: 88px; font-size: 88px;
top: 20px; top: 20px;
line-height: 100px; line-height: 100px; display:block;
"> ">
Contagions &amp; Connections Contagions &amp; Connections
</div> </div>
@ -811,7 +910,7 @@ MY "WHY" FOR MAKING THIS:
</words> </words>
<words id="conclusion_2"> <words id="conclusion_2">
<span style="line-height:1.4em;"> <span style="line-height:1.4em; display:block;">
<div style="height:0.5em"></div> <div style="height:0.5em"></div>
@ -892,7 +991,7 @@ MY "WHY" FOR MAKING THIS:
Fan-made translations: Fan-made translations:
</words> </words>
<words id="translations_do_not_exist"> <words id="translations_do_not_exist">
<!-- There's no need to translate this line since, you know, --> <!-- There's no need to TRANSLATE this line since, well, -->
<!-- it'll only show up if no translations exist --> <!-- it'll only show up if no translations exist -->
What the, no fan-made translations exist yet?! What the, no fan-made translations exist yet?!
</words> </words>
@ -904,6 +1003,11 @@ MY "WHY" FOR MAKING THIS:
<!-- BONUS BOXES --> <!-- 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"> <bonus id="books">
<h3> <h3>
@ -912,7 +1016,7 @@ MY "WHY" FOR MAKING THIS:
<div> <div>
<img src="sdas" width="200" height="300" style="float:left; margin-right:1em"/> <img src="sprites/bonus/surowieki.jpg" width="200" height="300" style="float:left; margin-right:1em"/>
First off, I'm not dissing First off, I'm not dissing
<a target="_blank" href="https://en.wikipedia.org/wiki/The_Wisdom_of_Crowds"> <a target="_blank" href="https://en.wikipedia.org/wiki/The_Wisdom_of_Crowds">
@ -968,7 +1072,7 @@ MY "WHY" FOR MAKING THIS:
<div style="clear:both"></div> <div style="clear:both"></div>
<br> <br>
<img src="sdas" width="150" height="150" style="float:left; margin-right:1em"/> <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. <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. Carol is the parent of Dave, but Dave is not the parent of Carol.
Therefore, "boss" &amp; "parent" are <i>directional</i> relationships: Therefore, "boss" &amp; "parent" are <i>directional</i> relationships:
@ -979,7 +1083,7 @@ MY "WHY" FOR MAKING THIS:
<div style="clear:both"></div> <div style="clear:both"></div>
<br> <br>
<img src="sdas" width="150" height="150" style="float:left; margin-right:1em"/> <img src="sprites/bonus/connection2.png" width="250" height="150" style="float:left; margin-right:1em"/>
<b>Weighted connections.</b> Elinor and Frankie are "friends", but not that close. <b>Weighted connections.</b> Elinor and Frankie are "friends", but not that close.
George and Harry are super-duper Best Friends Forever. George and Harry are super-duper Best Friends Forever.
Even though there's a friendship connection in both cases, the second one is a stronger: Even though there's a friendship connection in both cases, the second one is a stronger:
@ -990,7 +1094,7 @@ MY "WHY" FOR MAKING THIS:
<div style="clear:both"></div> <div style="clear:both"></div>
<br> <br>
<img src="sdas" width="150" height="150" style="float:left; margin-right:1em"/> <img src="sprites/bonus/map.png" width="200" height="200" style="float:left; margin-right:1em"/>
Just remember: all the simulations in this game are wrong. The same way any map is "wrong". Just remember: all the simulations in this game are wrong. The same way any map is "wrong".
You see the map on the left? Buildings aren't actually gray featureless blocks! You see the map on the left? Buildings aren't actually gray featureless blocks!
Words don't float above the city! However, maps are useful not <i>despite</i> being simplified, Words don't float above the city! However, maps are useful not <i>despite</i> being simplified,
@ -1015,14 +1119,14 @@ MY "WHY" FOR MAKING THIS:
<div style="clear:both"></div> <div style="clear:both"></div>
<br> <br>
<img src="sdas" width="150" height="150" style="float:left; margin-right:1em"/> <img src="sprites/bonus/contagion1.png" width="250" height="150" style="float:left; margin-right:1em"/>
<b>Contagions with Randomness</b>. Instead of "if your friend is infected, you'll get infected", <b>Contagions with Randomness</b>. Instead of "if your friend is infected, you'll get infected",
you could simulate "if your friend is infected, you'll get infected <i>with an X% chance</i>". you could simulate "if your friend is infected, you'll get infected <i>with an X% chance</i>".
<div style="clear:both"></div> <div style="clear:both"></div>
<br> <br>
<img src="sdas" width="150" height="150" style="float:left; margin-right:1em"/> <img src="sprites/bonus/contagion2.png" width="250" height="150" style="float:left; margin-right:1em"/>
<b>People have different contagion thresholds.</b> <b>People have different contagion thresholds.</b>
In this simulation, I'm pretending everyone has the same threshold for binge-drinking (50%) or In this simulation, I'm pretending everyone has the same threshold for binge-drinking (50%) or
volunteering (25%) or misinformation (0%). That's not true in real life, of course, volunteering (25%) or misinformation (0%). That's not true in real life, of course,
@ -1031,7 +1135,7 @@ MY "WHY" FOR MAKING THIS:
<div style="clear:both"></div> <div style="clear:both"></div>
<br> <br>
<img src="sdas" width="150" height="150" style="float:left; margin-right:1em"/> <img src="sprites/bonus/contagion3.png" width="250" height="150" style="float:left; margin-right:1em"/>
<b>An ecology of contagions.</b> This is actually cutting-edge research, <b>An ecology of contagions.</b> This is actually cutting-edge research,
and I'm not entirely sure how one would do this. and I'm not entirely sure how one would do this.
In my simulations, only one contagion is spreading at a time. In my simulations, only one contagion is spreading at a time.
@ -1044,7 +1148,7 @@ MY "WHY" FOR MAKING THIS:
<div style="clear:both"></div> <div style="clear:both"></div>
<br> <br>
<img src="sdas" width="150" height="150" style="float:left; margin-right:1em"/> <img src="sprites/bonus/contagion4.png" width="250" height="150" style="float:left; margin-right:1em"/>
<b>Contagions that mutate and evolve.</b> <b>Contagions that mutate and evolve.</b>
Ideas don't pass perfectly from one person to another the way a virus genome does. Ideas don't pass perfectly from one person to another the way a virus genome does.
Like a game of Telephone, the message gets mutated with each re-telling. Like a game of Telephone, the message gets mutated with each re-telling.
@ -1060,7 +1164,7 @@ MY "WHY" FOR MAKING THIS:
<bonus id="further_reading"> <bonus id="further_reading">
<h3> <h3>
Further Reading Further Reading &amp; Playing
</h3> </h3>
<div> <div>
@ -1071,7 +1175,7 @@ MY "WHY" FOR MAKING THIS:
<br><br> <br><br>
<img src="sdas" width="200" height="200" style="float:left; margin-right:1em"/> <img src="sprites/bonus/connected.png" width="200" height="200" style="float:left; margin-right:1em"/>
<b>Book:</b> <b>Book:</b>
<a target="_blank" href="http://www.connectedthebook.com/"> <a target="_blank" href="http://www.connectedthebook.com/">
Connected</a> Connected</a>
@ -1087,7 +1191,7 @@ MY "WHY" FOR MAKING THIS:
<div style="clear:both"></div> <div style="clear:both"></div>
<br> <br>
<img src="sdas" width="200" height="200" style="float:left; margin-right:1em"/> <img src="sprites/bonus/swn.png" width="200" height="200" style="float:left; margin-right:1em"/>
<b>Interactive:</b> <b>Interactive:</b>
<a target="_blank" href="http://worrydream.com/ScientificCommunicationAsSequentialArt/"> <a target="_blank" href="http://worrydream.com/ScientificCommunicationAsSequentialArt/">
Collective Dynamics of Small World Networks</a>, Collective Dynamics of Small World Networks</a>,
@ -1105,8 +1209,8 @@ MY "WHY" FOR MAKING THIS:
<br><br> <br><br>
<img src="sdas" width="200" height="200" style="float:left; margin-right:1em"/> <img src="sprites/bonus/trust.png" width="200" height="200" style="float:left; margin-right:1em"/>
<a target="_blank" href="https://mrpandey.github.io/d3graphTheory/"> <a target="_blank" href="http://ncase.me/trust/">
The Evolution of Trust</a> by Nicky Case (2017). The Evolution of Trust</a> by Nicky Case (2017).
This is a game about the game theory of how cooperation arises (or not). This is a game about the game theory of how cooperation arises (or not).
You first play a game of trust, You first play a game of trust,
@ -1116,8 +1220,8 @@ MY "WHY" FOR MAKING THIS:
<div style="clear:both"></div> <div style="clear:both"></div>
<br> <br>
<img src="sdas" width="200" height="200" style="float:left; margin-right:1em"/> <img src="sprites/bonus/polygons.png" width="200" height="200" style="float:left; margin-right:1em"/>
<a target="_blank" href="https://mrpandey.github.io/d3graphTheory/"> <a target="_blank" href="http://ncase.me/polygons/">
Parable of the Polygons</a> by Vi Hart and Nicky Case (2014). Parable of the Polygons</a> by Vi Hart and Nicky Case (2014).
A story about how harmless choices can create a harmful world. A story about how harmless choices can create a harmful world.
Based off a Nobel Prize-winning game theorist's work, Based off a Nobel Prize-winning game theorist's work,
@ -1131,6 +1235,10 @@ MY "WHY" FOR MAKING THIS:
<!-- REFERENCES --> <!-- REFERENCES -->
<!-- - - - - - - --> <!-- - - - - - - -->
<!--
Final thing! These references also need you to TRANSLATE:
-->
<reference id="drunk"> <reference id="drunk">
<h3> <h3>
@ -1583,8 +1691,6 @@ MY "WHY" FOR MAKING THIS:
Your generosity <i>literally</i> feeds me and pays my rent, Your generosity <i>literally</i> feeds me and pays my rent,
and grants me the creative freedom to make these weird math/social-science games. and grants me the creative freedom to make these weird math/social-science games.
From the bottom of my heart, thank you! From the bottom of my heart, thank you!
<br><br>
<iframe src="supporters" width="730" height="330" style="border:none; margin:0 auto; display:block"></iframe>
</div> </div>
</reference> </reference>
<reference id="playtesters" hidden=yes large=yes> <reference id="playtesters" hidden=yes large=yes>
@ -1596,7 +1702,7 @@ MY "WHY" FOR MAKING THIS:
<br><br> <br><br>
<b>The Prototype:</b> <b>The Prototype:</b>
<br> <br>
Maria P · Maria ·
Monica Srivastava Monica Srivastava
<br><br> <br><br>
@ -1604,7 +1710,7 @@ MY "WHY" FOR MAKING THIS:
<br> <br>
Glen Chiacchieri · Glen Chiacchieri ·
Kalli Repzeti · Kalli Repzeti ·
Mali · Mali Akmanalp ·
Toph Tucker Toph Tucker
<br><br> <br><br>
@ -1626,43 +1732,13 @@ MY "WHY" FOR MAKING THIS:
</span> </span>
<!-- - - - - --> <!--
<!-- SCRIPTS -->
<!-- - - - - -->
<script src="js/lib/helpers.js"></script> And that's it! That's the last of what needed to a TRANSLATE
<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> Thank you so, so much for doing this again, wow.
<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"></script>
<script src="js/sim/Peep.js"></script> Finally, go to "translations.txt" and follow the instructions there,
<script src="js/sim/Connection.js"></script> in order to let this game "know" your translation exists.
<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"></script>
<script src="js/main.js"></script>
-->

2
js/chapters/E_Complex_Contagion.js
View File

@ -388,7 +388,7 @@ SLIDES.push(
// NASA Image // NASA Image
{ {
type:"box", type:"box",
img:"sprites/nasa.png", x:0, y:0, w:400, h:250 img:"sprites/nasa.png", x:0, y:0, w:425, h:450
}, },
// Text // Text

2
js/chapters/J_Sandbox.js
View File

@ -27,7 +27,7 @@ SLIDES.push(
// Simulation UI // Simulation UI
{ {
type:"box", type:"box",
x:35, y:365, x:35, y:375,
sim_ui:"red" sim_ui:"red"
}, },

10
js/lib/Mouse.js
View File

@ -38,18 +38,18 @@ function _touchWrapper(callback){
var _event = {}; var _event = {};
_event.clientX = event.changedTouches[0].clientX; _event.clientX = event.changedTouches[0].clientX;
_event.clientY = event.changedTouches[0].clientY; _event.clientY = event.changedTouches[0].clientY;
event.preventDefault(); //event.preventDefault();
callback(_event); callback(_event);
}; };
} }
// ALSO DON'T SCROLL WHEN TOUCH // ALSO DON'T SCROLL WHEN TOUCH
/*document.addEventListener("touchstart", function(e){ document.body.addEventListener("touchstart", function(e){
e.preventDefault(); e.preventDefault();
},false); },false); // do NOT capture.
document.addEventListener("touchmove", function(e){ document.body.addEventListener("touchmove", function(e){
e.preventDefault(); e.preventDefault();
},false);*/ },false); // do NOT capture.
// INIT // INIT
Mouse.init = function(target){ Mouse.init = function(target){

13
js/main.js
View File

@ -40,9 +40,16 @@ subscribe("prepreload/done", function(){
window.requestAnimationFrame(update); window.requestAnimationFrame(update);
// Go to THE SPLASH // Go to THE SPLASH
//slideshow.gotoChapter("Preloader"); slideshow.gotoChapter("Preloader");
slideshow.gotoChapter("Credits"); //slideshow.gotoChapter("Credits");
$("#navigation").style.display = "block"; //$("#navigation").style.display = "block";
// HACK - MOBILE IS HORRIBLE
$all("a").forEach(function(a){
a.ontouchstart = function(event){
event.stopPropagation();
}; // so you CAN click links
});
}); });

18
js/slideshow/Modal.js
View File

@ -10,6 +10,7 @@ subscribe("bonus/show", function(bonus_id){
}); });
// SHOW REFERENCES // SHOW REFERENCES
var SHOWING_SUPPORTERS = false;
subscribe("reference/show", function(ref_id){ subscribe("reference/show", function(ref_id){
publish("sound/button"); publish("sound/button");
@ -18,6 +19,13 @@ subscribe("reference/show", function(ref_id){
$("#modal_content").innerHTML = footnote; $("#modal_content").innerHTML = footnote;
var noteLength = $("#modal_content").innerText.length; // innerTEXT, so no links var noteLength = $("#modal_content").innerText.length; // innerTEXT, so no links
// HACK: IF IT'S PATREON PEOPLE, *NOW* SHOW IFRAME
if(!SHOWING_SUPPORTERS && ref_id=="supporters"){
SHOWING_SUPPORTERS = true; // ONCE
$("#modal_content").innerHTML = footnote+'<br><br>'+
'<iframe src="supporters" width="730" height="330" style="border:none; margin:0 auto; display:block"></iframe>';
}
if($("reference#"+ref_id).getAttribute("large")){ if($("reference#"+ref_id).getAttribute("large")){
Modal.show(true); // force large Modal.show(true); // force large
}else{ }else{
@ -109,3 +117,13 @@ subscribe("modal/translations", function(){
} }
}); });
// MOBILE URGGHHHH
$("#modal_content_container").ontouchstart = function(event){
event.stopPropagation();
};
$("#modal_content_container").ontouchmove = function(event){
event.stopPropagation();
};

16
js/slideshow/Navigation.js
View File

@ -109,4 +109,18 @@ function Navigation(){
}; };
_stopPropButton($("#sound")); _stopPropButton($("#sound"));
} }
/****************************
SOCIAL SHARING
****************************/
var shareURL = encodeURIComponent( window.location.href );
var shareTitle = encodeURIComponent( $("#share_title").innerText.trim() );
var shareDesc = encodeURIComponent( $("#share_desc").innerText.trim() );
$("#fb").href = "https://www.facebook.com/sharer/sharer.php?u="+shareURL+"&t="+shareDesc+" "+shareURL;
$("#tw").href = "https://twitter.com/intent/tweet?source="+shareURL+"&text="+shareDesc+" "+shareURL;
$("#em").href = "mailto:?subject="+shareTitle+"&body="+shareDesc+" "+shareURL;

6
js/slideshow/SandboxUI.js
View File

@ -18,6 +18,12 @@ function SandboxUI(container){
contagionInput.oninput = function(){ contagionInput.oninput = function(){
_updateContagion(); _updateContagion();
}; };
contagionInput.ontouchstart = function(event){
event.stopPropagation(); // AHHHH MOBILE
};
contagionInput.ontouchmove = function(event){
event.stopPropagation(); // AHHHH MOBILE
};
var _labelContagion0 = getWords("sandbox_contagion"); var _labelContagion0 = getWords("sandbox_contagion");
var _labelContagion1 = getWords("sandbox_contagion_simple"); var _labelContagion1 = getWords("sandbox_contagion_simple");
var _labelContagion2 = getWords("sandbox_contagion_complex"); var _labelContagion2 = getWords("sandbox_contagion_complex");

BIN
sprites/bonus/connected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 360 KiB

BIN
sprites/bonus/connection1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
sprites/bonus/connection2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
sprites/bonus/contagion1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
sprites/bonus/contagion2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 91 KiB

BIN
sprites/bonus/contagion3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
sprites/bonus/contagion4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

BIN
sprites/bonus/map.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 466 KiB

BIN
sprites/bonus/polygons.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

BIN
sprites/bonus/surowieki.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 157 KiB

BIN
sprites/bonus/swn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
sprites/bonus/trust.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 181 KiB

BIN
sprites/nasa.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 442 KiB

BIN
sprites/ui/sharing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
sprites/ui/sound.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

7
translations.txt
View File

@ -16,12 +16,15 @@
// (Note: if you paste the native name of a right-to-left language here, // (Note: if you paste the native name of a right-to-left language here,
// it might show up as reversed here, but it'll show correctly on the website) // it might show up as reversed here, but it'll show correctly on the website)
// Also, make sure the .html file of your translation // Also, make sure the .html file of your translation
// uses the two-letter code, like "en.html", "de.html", "zh.html" // uses the two-letter code, like "de.html", "ar.html", "zh.html"
// //
// Thank you again so much! :) // Thank you again so much! :)
// Once you're done, send a Pull Request to the GitHub repo
// so I can add your translation. Instructions are here:
// https://github.com/ncase/crowds#how-to-translate-this-thing
///////////////////////////// /////////////////////////////
// AVAILABLE TRANSLATIONS: // // AVAILABLE TRANSLATIONS: //
///////////////////////////// /////////////////////////////
en: English en: English