ncase.me-trust/lang/en.html

<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - - TITLE! - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->

<p id="title">
<span style="font-size:0.75em">THE</span><br>
EVOLUTION<br>
<span style="font-size:0.75em">OF TRUST</span>
</p>
<p id="subtitle">
playing time: 20 min &#8226; by nicky case, july 2017
</p>

<p id="loading">
loading...
</p>
<p id="loading_done">
PLAY &rarr;
</p>

<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - - INTRO! - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->

<!-- TODO: Also, strong early humor. -->
<!-- TODO: mention "game theory" early again... -->

<p id="intro">
During World War I, peace broke out.
<br><br>

It was Christmas 1914 on the Western Front.<br>
Despite strict orders <i>not</i> to chillax with the enemy, British<br>
and German soldiers left their trenches, crossed No Man's Land,<br>
and gathered to bury their dead, exchange gifts, and play games.
<br><br>

Meanwhile: it's 2017, the West has been at peace for decades, and<br>
by golly, we <i>suck</i> at trust. Over the years,
fewer and fewer people say they trust their
institutions, or even <i>each other</i>. So here's our puzzle:
<br><br>

<b>Why, even in peacetime, do friends become enemies?<br>
And why, even in wartime, do enemies become friends?</b>
<br><br>

I think <b>game theory</b> can help explain our epidemic of distrust –<br>
and how we can fix it! So, to understand all this...
</p>
<p id="intro_button">
...let's play a game. &rarr;
</p>

<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - - ONE OFF! - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->

<p id="label_you_cooperate">
you<br>cooperate
</p>

<p id="label_you_cheat">
you<br>cheat
</p>

<p id="label_they_cooperate">
they<br>cooperate
</p>

<p id="label_they_cheat">
they<br>cheat
</p>

<p id="label_you">
you<br>↙
</p>
<p id="label_them">
other player<br>↘
</p>

<p id="oneoff_0_top">

<b>THE GAME OF TRUST</b>
<br>
You have one choice.
In front of you is a machine: if you put a coin in the machine,
the <i>other player</i> gets three coins – and vice versa.
You both can either choose to COOPERATE (put in coin), or CHEAT (don't put in coin).
</p>

<p id="oneoff_0_btm">
Let's say the other player cheats, and doesn't put in a coin.<br>
What should you do?
</p>

<p id="oneoff_1_cheated">
Exactly! Why let that moocher mooch off of you?
</p>

<p id="oneoff_1_cooperated">
Alas, turning the other cheek just gets you slapped!
</p>

<p id="oneoff_1_top">
If you cooperate &amp; they cheat, you lose a coin while they gain three. (score: -1 vs +3)
However, if you both cheat, neither of you gain or lose anything. (score: 0 vs 0)
<b>Therefore: you should CHEAT.</b>
</p>

<p id="oneoff_1_btm">
But let's say the other player cooperates, and puts in a coin.<br>
What should you do now?
</p>

<p id="oneoff_2_cheated">
Wow, that's mean... and also the correct answer!
</p>

<p id="oneoff_2_cooperated">
Sure, seems like the right thing to do... <b>OR IS IT??</b>
</p>

<p id="oneoff_2_top">
Because if you both cooperate, you both give up a coin to gain three. (score: +2 vs +2)
But if you cheat &amp; they cooperate, you gain three coins at their cost of one. (score: +3 vs -1)
<b>Therefore: you "should" still CHEAT.</b>
</p>

<p id="oneoff_2_btm">
And <i>that's</i> our dilemma.
Trust is nice, but it can let others take advantage of you -- or shoot you as you come unarmed out of a trench.
Sometimes, distrust <i>is</i> rational!
But now, what happens if we play this game...
</p>

<p id="oneoff_button_next">
...more than once? &rarr;
</p>

<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - - ITERATED - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->

<p id="iterated_intro_top">
<b>Now, let's play for real.</b>
You'll be playing against 5 different opponents, each with their own game "strategy".
With each opponent, you'll play anywhere between 3 to 7 rounds.
(You won't know in advance when the last round is)
Can you trust them? Or rather... can they trust <i>you?</i>
</p>

<p id="iterated_intro_btm">
Pick your first, <i>real</i> move. <b>Choose wisely.</b>
</p>

<p id="iterated_info_1">
opponent: [X] of [Y]
</p>
</p>
<p id="iterated_info_2">
your total score: 
</p>

<p id="iterated_score_start">
And your total score is...
</p>
<p id="iterated_score_1">
which is, wow, actually <i>impressively</i> bad.
</p>
<p id="iterated_score_2">
which, uh, could be worse!
</p>
<p id="iterated_score_3">
which ain't bad!
</p>
<p id="iterated_score_4">
which is pretty good!
</p>
<p id="iterated_score_5">
which is <i>perfect!</i> Congrats you have too much time on your hands.
</p>
<p id="iterated_score_x">
...i have no idea how you did that.
</p>
<p id="iterated_score_end">
(the lowest &amp; highest possible scores are 8 and 49, respectively)
</p>

<p id="who_were">
So who were these strange characters you just played against?
</p>

<p id="character_tft">
<b>COPYCAT:</b>
Hello! I start with Cooperate, and afterwards, I just copy whatever you did in the last round. Meow
</p>

<p id="character_all_d">
<b>ALWAYS CHEAT:</b>
<i>the strong shall eat the weak</i>
</p>

<p id="character_all_c">
<b>ALWAYS COOPERATE:</b>
Let's be best friends! &lt;3
</p>

<p id="character_grudge">
<b>GRUDGER:</b>
Listen, pardner. I'll start cooperatin', and keep cooperation',
but if y'all ever cheat me, I'LL CHEAT YOU BACK 'TIL THE END OF TARNATION.
</p>

<p id="character_prober">
<b>DETECTIVE:</b>
First: I analyze you. I start: Cooperate, Cheat, Cooperate, Cooperate.
If you cheat back, I'll act like <span class="tft">Copycat</span>.
If you never cheat back, I'll act like <span class="all_d">Always Cheat</span>, to exploit you.
Elementary, my dear Watson.
</p>

<p id="characters_teaser">
Now, what if these characters were to play...
</p>
<p id="characters_button">
...against each other? &rarr;
</p>


<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - TOURNAMENT! - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->

<p id="place_your_bets">
It's tournament time!
Each character will now play against every other character:
that's 10 paired matches, and 10 rounds per match.
<br><br>
Who do you think will get the highest <i>total</i> score?
<b>Think carefully about it... and then
PLACE YOUR BETS:</b>
</p>

<p id="tournament_intro">
Alright, you placed your bet on [CHAR]!
Let's go through the matches one by one, and see how the tournament plays out...
</p>

<p id="first_match">
first match &rarr;
</p>

<p id="next_match">
next match &rarr;
</p>

<p id="match_header_1">
<b>Match #[N]:</b> [A] vs [B]
</p>
<p id="match_header_2">
<b>Rounds:</b>
</p>
<p id="match_header_3">
<b>Total Scores:</b> [A] vs [B]
</p>

<p id="tournament_1">
Oh, by the way...
</p>
<p id="tournament_2">
...You may be skeptical about that Christmas Truce story about the World War I trenches.
Surely that was just a fluke?
</p>
<p id="tournament_3">
Yes, the truce was dramatic, but it was <i>neither unique, nor unusual</i>.
</p>
<p id="tournament_4">
Not <i>every</i> trench joined in the peace, but it was pretty widespread.
Many front-lines came up with the idea independently, and again: <i>despite</i> strict orders.
</p>
<p id="tournament_5">
And in fact, even <i>before</i> Christmas, several front-lines already <i>had</i>
established an unofficial, secret peace.
</p>
<p id="tournament_6">
They called it: <b>the "live and let live" system.</b>
Basically, you don't shoot me, I don't shoot you. And this worked, in a lot of places!
</p>
<p id="tournament_7">
You may still be skeptical. Most soldiers don't spontaneously form peace with the enemy.
What's so special about <i>trench</i> warfare? 
</p>
<p id="tournament_8">
Well, here's what's unique about the trenches:
unlike almost every other form of war,
you have to face the same <i>specific soliders</i> every day.
</p>
<p id="tournament_9">
<b>It's a repeated game.</b> And that makes <i>all</i> the difference.
</p>
<p id="tournament_10">
Anyway. And the winner is...
</p>

<p id="the_winner_is">
(drumroll please...) &rarr;
</p>

<p id="tournament_winner_1">
<b class="tft">COPYCAT!</b>
</p>
<p id="tournament_winner_2_yay">
Congrats, you placed your bet on the right horse.
</p>
<p id="tournament_winner_2_nay">
(Apologies to your bet, [CHAR].)
</p>
<p id="tournament_winner_3">
<span class="tft">Copycat</span> goes by many names.
The Golden Rule, reciprocal altruism, tit for tat, or... <b>live and let live.</b>
That's why "peace" could emerge in the trenches of World War I:
when you're forced to play the same game with the
same <i>specific people</i> (not just the same generic "enemy") over and over again --
<span class="tft">Copycat</span> doesn't just win the battle, it wins the war.
<br><br>
But if things change a lot when you play multiple rounds of the same game, what if we play...
</p>
<p id="tournament_teaser">
...multiple <i>tournaments?</i> &rarr;
</p>


<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - EVOLUTION! - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->

<p id="evolution_intro">
Now, let's let our population of players <i>evolve over time</i>. It's a 3-step dance:
</p>
<p id="evolution_intro_1">
<b>1. PLAY A TOURNAMENT</b><br>
Let them all play against each other, and tally up their scores.
</p>
<p id="evolution_intro_2">
<b>2. ELIMINATE LOSERS</b><br>
Get rid of the 5 worst players. (if there's a tie, pick randomly between them)
</p>
<p id="evolution_intro_3">
<b>3. REPRODUCE WINNERS</b><br>
Clone the 5 best players. (if there's a tie, pick randomly between them)
</p>
<p id="evolution_intro_footer">
...and REPEAT, for as long as you'd like.
Note: you don't have to wait for people to literally die &amp; reproduce for culture to evolve --
all that's needed is that "unsuccessful" behaviors go away, and "successful" behaviors are imitated.
So now...
</p>
<p id="evolution_intro_button">
...let's see this in action. &rarr;
</p>

<p id="evo_1">
Say we start with the following population of players:
<span class="all_c">15 Always Cooperates</span>,
<span class="all_d">5 Always Cheats</span>, and
<span class="tft">5 Copycats</span>.
(We'll ignore <span class="grudge">Grudger</span> &amp; <span class="prober">Detective</span> for now)
<br><br>
We're going to do the tournament-eliminate-reproduce dance a dozen times or so.
Let's make another bet! Who do you think will win the <i>first</i> tournament?
</p>

<p id="evo_2_all_c">
Makes sense, <span class="all_c">Always Cooperate</span> outnumbers everyone else right now...
</p>
<p id="evo_2_all_d">
Makes sense, <span class="all_d">Always Cheat</span> has a lot of <span class="all_c">Always Cooperates</span> to exploit...
</p>
<p id="evo_2_tft">
Makes sense, <span class="tft">Copycat</span> won the tournament last time, why not again?...
</p>
<p id="evo_2">
Let's see if you're correct:
</p>

<p id="label_play_tournament">
1) play tournament
</p>
<p id="label_eliminate_bottom_5">
2) eliminate bottom 5
</p>
<p id="label_reproduce_top_5">
3) reproduce top 5
</p>

<p id="evo_3_all_c">
Alas, <span class="all_c">Always Cooperate</span> got eaten up by
<span class="all_d">Always Cheat</span>, whose numbers have now increased by 5.
</p>
<p id="evo_3_all_d">
Sadly, you were correct! The <span class="all_d">Always Cheaters</span> won this time, 
and their numbers increased by 5.
</p>
<p id="evo_3_tft">
Alas, <span class="tft">Copycat</span> did not win – but at least they didn't do as bad
as <span class="all_c">Always Cooperate</span>. They got eaten up by <span class="all_d">Always Cheat</span>,
whose numbers have now increased by 5.
</p>
<p id="evo_3">
But let's try a few more rounds of this...
</p>

<p id="evo_4">
<span class="all_d">Always Cheat</span> is still growing,
at the expense of <span class="all_c">Always Cooperate</span>...
</p>

<p id="evo_5">
And now, all the <span class="all_c">Always Cooperates</span> are dead.
But, wait...
</p>

<p id="evo_6">
That's right: the <span class="all_d">Always Cheats</span> became a victim of their own success!
They exploited the naive <span class="all_c">Always Cooperaters</span>,
but once they ran out of them, they had to face the <span class="tft">Copycats</span>:
who <i>are</i> nice, but not naive.
</p>

<!-- TODO: Freeman-Dyson???? -->

<p id="evo_7">
By simply copying the other player's moves,
<span class="tft">Copycats</span> can play nice with each other,
while <span class="all_d">Always Cheats</span> just cheat themselves!
Not only that, but it also means <span class="tft">Copycat</span>
can give <span class="all_d">Always Cheat</span>
a taste of their own medicine.
</p>

<p id="evo_8">
And so, as a result...
</p>

<p id="evo_9">
...<span class="tft">Copycat</span> inherits the earth.
</p>
<p id="evo_9_all_c">
So, although your bet was off -- the nice-but-naive <span class="all_c">Always Cooperaters</span>
were doomed from the start -- in the end, a <i>smart</i> form of niceness prevailed,
and the <span class="all_d">Always Cheaters</span> were squashed.
</p>
<p id="evo_9_all_d">
So, in the short run you were right - <span class="all_d">Always Cheat</span> won the first few rounds,
but in the end, its exploitativeness was its downfall.
</p>
<p id="evo_9_tft">
So, in the long run, you were right - <span class="tft">Copycat</span> wins!
<span class="all_d">Always Cheat</span> may have won in the short run,
but its exploitativeness was its downfall.
</p>
<p id="evo_9_end">
This reminds me of a quote:
<br><br>
<i>"We are punished by our sins, not for them."</i><br>
~ Elbert Hubbard
</p>
<p id="evo_9_btn">
(oh, and by the way...)
</p>

<p id="evo_10">
(...this result is similar even if we put
<span class="grudge">Grudger</span> &amp; <span class="prober">Detective</span> back in:)
</p>

<p id="evo_autoplay">
start the evolution process!
</p>
<p id="evo_autoplay_stop">
stop the evolution process
</p>

<p id="evo_10_followup">
(Note: occasionally, a few <span class="grudge">Grudgers</span> may stick around,
because when all players except <span class="grudge">Grudger</span> &amp; <span class="tft">Copycat</span> 
are eliminated, the two tie.)
<br><br>
So, it seems the math of game theory is telling us something:
that <span class="tft">Copycat's</span> philosophy,
"Do unto others as you would have them do unto you", may be not just a 
<i>moral</i> truth, but also a <i>mathematical</i> truth.
However...
</p>
<p id="evo_10_btn">
...there's a problem: &rarr;
</p>

<p id="evo_11">
Look around. The world's full of total jerkwads.
<br><br>
If <span class="tft">Copycat</span> is the strategy in this repeated game of trust that's so powerful --
that even soldiers in World War I trenches independently "evolved" a similar strategy, called "live and let live" -- 
why, then, are there so many un-trusting, un-trustworthy people?
What's causing our epidemic of un-trust?
<br><br>
A clue's in that sentence itself. "In <i>this</i> repeated game of trust."
So far we've only talked about change in the players:
what about <i>a change in the game?</i>
What could lead to...
</p>
<p id="evo_11_btn">
...the evolution of <i>distrust?</i>
</p>

<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - - DISTRUST - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->

<p id="distrust_1">
Before everything goes to heck, let's start with something nice!
Here's a world filled entirely with <span class="all_c">Always Cooperates</span>,
except for one <span class="all_d">Always Cheat</span> and one <span class="tft">Copycat</span>.
<br><br>
Use the buttons on the right to <b>start</b> the sim,
go through it <b>step-by-step</b>, or <b>reset</b> it. &rarr;
</p>

<p id="distrust_2">
As you already know, <span class="tft">Copycat</span> wins handily in the long run,
under our current rules!
<br><br>
But that's under our <i>current</i> rules, which say that
players play against each other for <i>10</i> rounds per match.
Does <span class="tft">Copycat</span> still win at 7 rounds? 5 rounds? 3? 2? 1?
<br><br>
<b>Change the number of rounds</b> with the slider below,
<b>start</b> the sim, and see what happens.
Feel free to experiment as much as you'd like!
</p>

<p id="distrust_2_end">
once you're done playing around, click:
</p>

<p id="distrust_3">
As you saw, if you don't play enough rounds, (here: 5 or less)
<span class="all_d">ALWAYS CHEAT</span> dominates.
<br><br>
In 1985, when Americans were asked how many close friends they had,
the most common answer was "three". In 2004, the most common answer was <i>"zero"</i>.
We now have fewer friends across class, racial, economic, and political lines,
because we have fewer friends -- <i>period.</i>
And as you just discovered for yourself,
<b>the fewer "repeat interactions" there are, the more distrust will spread.</b>
<br><br>
(no, mass media doesn't count:
it must be <i>two-way</i> interactions between <i>specific individuals</i>.)
</p>
<p id="distrust_3_btn">
and oh, it gets worse... &rarr;
</p>

<p id="distrust_4">
There's <i>another</i> way to breed distrust.
Here are the "payoffs" for the trust game:
</p>
<p id="distrust_4_2">
Let's start with a mostly-<span class="tft">Copycat</span> world. Normally, they'd win.
But now, <b>change the "trust" reward from +2 to +1,
then click start. →</b>
Even though +1 is still <i>more</i> than the punishment for mutual distrust (0)...
what happens?
</p>
<p id="distrust_4_note">
feel free to play around with different payoffs!
once you're done, click:
</p>
<p id="distrust_4_note_2">
(simulating: 10 rounds per match)
</p>

<p id="distrust_5">
The same thing happens:
with a lower "win-win" reward, <span class="all_d">Always Cheat</span> takes over.
Game theory has two powerful ideas about this:
<br><br>
<b>"Zero-sum game".</b> This is the sadly common belief that a gain for "us"
<i>must</i> come at a loss to "them", and vice versa.
<br><br>
<b>"Non-zero-sum game".</b> This when people realize that by working together,
you can create a win-win! (or at least, avoid a lose-lose)
Without the non-zero-sum game, <i>trust cannot evolve.</i>
<br><br>
Speaking of which,
let's now look at our third &amp; final barrier to the evolution of trust...
</p>
<p id="distrust_5_btn">
<s>Misteaks</s> Mistakes. &rarr;
</p>

<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - - NOISE! - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->

<p id="noise_1">
As cool as <span class="tft">Copycat</span> is, it has a huge, fatal weakness I haven't mentioned yet.
To understand the problem, let's say two <span class="tft">Copycats</span> are playing against each other:
</p>
<p id="noise_1_end">
Being "nice" players, both their first moves will be:
</p>

<p id="noise_2">
And normally, they'd just pay back each others' kindness and sing Kumbaya until the end of time.
</p>
<p id="noise_2_end">
But what if, while trying to reciprocate goodness...
</p>

<p id="noise_3">
<b>OH NO</b>
<br>
Mistakes, miscommunication, misinterpretations -- accidents happen all the time in real life.
</p>
<p id="noise_3_end">
But if the other person doesn't <i>think</i> it was an accident...
</p>

<p id="noise_4">
<b>OH NO TIMES TWO</b>
<br>
The other player, being a <span class="tft">Copycat</span>, <i>had</i> to retaliate...
</p>
<p id="noise_4_end">
...and you, being a <span class="tft">Copycat</span> as well, will <i>also</i> have to retaliate...
</p>

<p id="noise_5">
Thus, like the Hatfields and McCoys,
these two <span class="tft">Copycats</span> will spiral into an endless cycle of vengeance...
that started over a single mistake, long ago.
</p>
<p id="noise_5_end">
Tragic. But now, are there <i>other</i> types of players who can...
</p>
<p id="noise_5_btn">
...deal with mistakes? &rarr;
</p>

<p id="noise_characters">
Let's meet some new faces! (or, new hats, anyway)
</p>

<p id="character_tf2t">
<b>COPYKITTEN:</b><br>
Hello! I'm like <span class="tft">Copycat</span>,
except I Cheat back only after you Cheat me twice in a row.
After all, the first one could be a mistake! Purrrrr
</p>

<p id="character_pavlov">
<b>SIMPLETON:</b><br>
hi i try start cooperate.
if you cooperate back, i do <i>same thing</i> as last move, even if it mistake.
if you cheat back, i do <i>opposite thing</i> as last move, even if it mistake.
</p>

<p id="character_random">
<b>RANDOM:</b><br>
<i>Monkey robot! Ninja pizza tacos! lol i'm so random</i><br>
(Just plays Cheat or Cooperate randomly with a 50/50 chance)
</p>

<p id="noise_characters_end">
Alright, let's see how well these peeps do when they...
</p>
<p id="noise_characters_btn">
...play in a tournament &rarr;
</p>

<p id="noise_evo_1">
Let's start with a dozen
<span class="all_c">Always Cooperates</span>,
versus our old winner, the fair <span class="tft">Copycat</span>,
and our three new characters:
the forgiving <span class="tf2t">Copykitten</span>,
the dull <span class="pavlov">Simpleton</span>, and
the silly <span class="random">Random</span>.
<br><br>
Let's say, in each round of a match, players have a 5% chance of making a mistake.
Who do you think will come out on top?
<b>Think carefully, then PLACE YOUR BETS:</b>
</p>

<p id="noise_evo_2">
Alright, you bet [CHAR] wins. Let's find out!
Use the controls to your left to <b>start</b> the sim in quick mode,
or go through it <b>step-by-step</b>.
</p>
<p id="noise_evo_2_2_correct">
You were correct -- 
</p>
<p id="noise_evo_2_2_incorrect">
Your bet was close, but no cigar -- 
</p>
<p id="noise_evo_2_2">
<span class="pavlov">Simpleton</span> wins!
This is because <span class="pavlov">Simpleton</span> is actually capable of
exploiting <span class="all_c">Always Cooperate</span>. They both start cooperating,
but if <span class="pavlov">Simpleton</span> makes a mistake and cheats,
since <span class="all_c">Always Cooperate</span> never retaliates,
<i>it'll keep cheating them</i>.
</p>
<p id="noise_evo_2_2_btn">
Now let's try...
</p>

<p id="noise_evo_3">
...the same thing as before, except instead of half-<span class="all_c">Always Cooperate</span>,
it's half-<span class="all_d">Always Cheat</span>. It's a much <i>less</i> forgiving,
<i>more</i> hostile environment.
<br><br>
Who do you think will win now? <b>Think, then PLACE YOUR BETS:</b>
</p>

<p id="noise_evo_4">
You bet on [CHAR]. Again, go through the simulation...
</p>
<p id="noise_evo_4_2_correct">
You were right on the money -- 
</p>
<p id="noise_evo_4_2_incorrect">
Good guess, but someone else took the prize -- 
</p>
<p id="noise_evo_4_2">
<span class="tf2t">Copykitten</span> wins this time!
That's surprising that with an even <i>meaner</i> starting population,
<span class="tf2t">Copykitten</span>,
a <i>more forgiving</i> version of <span class="tft">Copycat</span>,
was the most successful! (note: <span class="tf2t">Copykitten</span> is so forgiving
it doesn't even <i>entirely</i> wipe out <span class="tft">Copycat</span>. it shares room)
<br><br>
In this case, a bit of "miscommunication" (5% chance of mistake each round) could lead
to more <i>forgiveness</i>. But is this true for <i>all</i> levels...
</p>
<p id="noise_evo_4_2_btn">
...of miscommunication?
</p>

<p id="noise_evo_5">
<b>Use the slider below to change the amount of "miscommunication", then hit START.</b>
At 5%, <span class="tf2t">Copykitten</span> wins.
What happens at 0%? Or 20%? Or 50%? (it only goes up to 50%,
because at that point, <i>every</i> move is a coin flip) 
</p>
<p id="noise_evo_5_continue">
When you're done playing around, click:
</p>

<p id="noise_evo_6">
The results turn out something like this:<br>
<b>At 0%,</b> the fair <span class="tft">Copycat</span> wins!
<b>At 1% to 10%,</b> the forgiving <span class="tf2t">Copykitten</span> wins!
<b>At 10% to 49%:</b> the unfair, unforgiving <span class="all_d">Always Cheat</span> wins.
<b>At 50%,</b> <i>nobody wins ever.</i>
<br><br>
This is why "miscommunication" is such an interesting barrier to trust:
a <i>little</i> bit of it leads to forgiveness,
but <i>too much</i> and it leads to widespread distrust!
I think our modern media technology,
as much as it's helped us <i>increase</i> communication...
has increased our <i>miscommunication</i> much more.
<br><br>
At last, let's experiment with <i>all</i> the numbers, the knobs and sliders.
Let's play...
</p>
<p id="noise_evo_6_btn">
...in the Sandbox Mode!
</p>


<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - - SANDBOX! - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->

<p id="sandbox_population">
Start off with this distribution of players:
</p>

<p id="sandbox_payoffs">
The payoffs in a one-on-one game are:
</p>
<p id="sandbox_reset_payoffs">
set default
</p>

<!--
When translating the following, keep the "[N]", with square brackets,
as a placeholder for the number. Some of these need double-translations,
one for the plural version, one for the singular version.
-->

<p id="sandbox_rules_1">
Play [N] rounds per match:
</p>
<p id="sandbox_rules_1_single">
Play [N] round per match:
</p>

<p id="sandbox_rules_2">
After each tournament, eliminate the bottom [N] players &amp; reproduce the top [N] players:
</p>
<p id="sandbox_rules_2_single">
After each tournament, eliminate the bottom [N] player &amp; reproduce the top [N] player:
</p>

<p id="sandbox_rules_3">
During each round, there's a [N]% chance a player makes a mistake:
</p>

<p id="sandbox_end">
...and once you're done playing around, let's recap:
</p>
<p id="sandbox_end_btn">
what we learnt today! &rarr;
</p>



<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - CONCLUSION! - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->

<p id="conclusion_0">
Game theory has shown us the three things we need for the evolution of trust:
</p>
<p id="conclusion_1_a">
1. REPEAT INTERACTIONS
</p>
<p id="conclusion_1_a2">
Trust keeps a relationship going,
but you need the knowledge of possible future repeat interactions <i>before</i> trust can evolve.
</p>
<p id="conclusion_2_a">
2. POSSIBLE WIN-WINS
</p>
<p id="conclusion_2_a2">
You must be playing a non-zero-sum game,
a game where it's at least possible that <i>both</i> players can be better off -- a win-win.
</p>
<p id="conclusion_3_a">
3. LOW MISCOMMUNICATION
</p>
<p id="conclusion_3_a2">
The level of miscommunication can't be <i>too</i> high.
And when there's a little bit of miscommunication, it pays to be <i>more</i> forgiving.
</p>
<p id="conclusion_4">
Of course, real-world trust is affected by a lot more than this.
there's reputation, moral values, contracts, cultural markers, etc, etc.
And let's not forget...
</p>
<p id="conclusion_btn">
...the <i>biggest</i> lesson. &rarr;
</p>

<p id="outro_1">
If there's one big takeaway<br>
from <i>all</i> of game theory, it's this:
<br><br>
<b>What the game is, defines what the players do.</b><br>
Our problem today isn't just that people are losing trust,<br>
it's that our <i>environment</i> acts against the evolution of trust.
<br><br>
That may seem cynical or naive -- that we're "merely" products of our environment --
but as game theory reminds us, we <i>are</i> each others' environment.
<b>In the short run, the game defines the players. But in the long run,
it's us players who define the game.</b>
<br><br>
So, do what <i>you</i> can to create the conditions necessary to evolve trust.
Build relationships. Find win-wins. Communicate clearly.
Maybe then, we can stop firing at each other, get out of our own trenches,
cross No Man's Land to come together...
</p>

<p id="outro_1_btn">
and all learn...
</p>

<p id="outro_2">
...to live and let live.
</p>

<p id="outro_2_credits">
"A Christmas Truce between Opposing Trenches"
Illustrated by AC Michael.
Published in <i>The Illustrated London News</i>, January 9, 1915.
</p>

<p id="outro_2_btn">
&lt;3
</p>

<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - - CREDITS! - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->

<p id="credits_beta">
<b>END OF BETA!</b> Please let me know what you think!
Because I'm launching this in a few days, I'm looking first and foremost
for low-level feedback:
Specific parts which are unclear, confusing, or boring.
Bad or problematic phrasing of words.
Typos and grammatical errors.
Opportunities to add more jokes.
And so on.
<br><br>
But if you have "high-level" feedback, I'd love to hear that too! 
I won't be able to put them in this time, but for my next project(s),
I want to know how I can design stuff like this better.
<br><br>
Thank you so much!
<br><br>
&lt;3,<br>
~ Nicky Case
</p>

<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - FEETNOTES - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->


<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - THE PLAYERS - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->

<p id="label_tft">Copycat</p>
<p id="label_short_tft">
copycat
</p>
<p id="icon_tft">
<span class="tft">
	<span class="icon"></span>
	<span class="icon_label">Copycat</span>
</span>
</p>

<p id="label_all_d">Always Cheat</p>
<p id="label_short_all_d">
cheater
</p>
<p id="icon_all_d">
<span class="all_d">
	<span class="icon"></span>
	<span class="icon_label">All Cheat</span>
</span>
</p>

<p id="label_all_c">Always Cooperate</p>
<p id="label_short_all_c">
cooperater
</p>
<p id="icon_all_c">
<span class="all_c">
	<span class="icon"></span>
	<span class="icon_label">All Cooperate</span>
</span>
</p>

<p id="label_grudge">Grudger</p>
<p id="label_short_grudge">
grudger
</p>
<p id="icon_grudge">
<span class="grudge">
	<span class="icon"></span>
	<span class="icon_label">Grudger</span>
</span>
</p>

<p id="label_prober">Detective</p>
<p id="label_short_prober">
detective
</p>
<p id="icon_prober">
<span class="prober">
	<span class="icon"></span>
	<span class="icon_label">Detective</span>
</span>
</p>

<p id="label_tf2t">Copykitten</p>
<p id="label_short_tf2t">
copykitten
</p>
<p id="icon_tf2t">
<span class="tf2t">
	<span class="icon"></span>
	<span class="icon_label">Copykitten</span>
</span>
</p>

<p id="label_pavlov">Simpleton</p>
<p id="label_short_pavlov">
simpleton
</p>
<p id="icon_pavlov">
<span class="pavlov">
	<span class="icon"></span>
	<span class="icon_label">Simpleton</span>
</span>
</p>

<p id="label_random">Random</p>
<p id="label_short_random">
random
</p>
<p id="icon_random">
<span class="random">
	<span class="icon"></span>
	<span class="icon_label">Random</span>
</span>
</p>


<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - SMALL LABELS! - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->

<p id="label_cooperate">
cooperate
</p>

<p id="label_cheat">
cheat
</p>

<p id="label_play">
play
</p>

<p id="label_start">
start
</p>

<p id="label_stop">
stop
</p>

<p id="label_step">
step
</p>

<p id="label_reset">
reset
</p>

<p id="label_population">
population
</p>

<p id="label_payoffs">
payoffs
</p>

<p id="label_rules">
rules
</p>

<p id="label_next">
next &rarr;
</p>

<p id="label_continue">
continue
</p>


<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - NAVIGATING CHAPTERS - - - -->
<!-- - - - - - - - - - - - - - - - - -->

<p id="chapter_intro">
0. Introduction
</p>
<p id="chapter_oneoff">
1. One Game
</p>
<p id="chapter_iterated">
2. Repeated Game
</p>
<p id="chapter_tournament">
3. One Tournament
</p>
<p id="chapter_evolution">
4. Repeated Tournament
</p>
<p id="chapter_distrust">
5. The Evolution of Distrust
</p>
<p id="chapter_noise">
6. Making Mistaeks
</p>
<p id="chapter_sandbox">
7. Sandbox Mode
</p>
<p id="chapter_conclusion">
8. Conclusion
</p>
<p id="chapter_credits">
9. Credits
</p>