words.html

<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - - META STUFF - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->

<p id="meta_title">
The Evolution of Trust
</p>
<p id="meta_desc">
an interactive guide to the game theory of why &amp; how we trust each other
</p>
<p id="meta_loading">
loading...
</p>
<p id="meta_on">
ON
</p>
<p id="meta_off">
OFF
</p>


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

<p id="title">
<span style="font-size:0.5em">PRISONER'S</span><br>
DILEMMA<br>
<span style="font-size:0.5em">CLASS TOURNAMENT</span>
</p>
<p id="subtitle">
reasoning with games of chance &#8226; forked from 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>
wow, we <i>suck</i> at trust. Surveys show that, over the past forty years,
fewer and fewer people say they trust each other. 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">
<b>Let's say the other player cheats, and doesn't put in a coin.</b><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">
<b>But let's say the other player cooperates, and puts in a coin.</b><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 7 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> specific, strict orders not to.
</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 soldiers</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?
<b>PLACE YOUR BETS, AGAIN:</b>
</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 Cooperators</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 Cooperators</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: sometimes, 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,
then <b>START</b> the sim, and see what happens.
Feel free to experiment!
</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">
With the normal payoffs, <span class="tft">Copycat</span> wins.
But now, <b>change the "both cooperate" reward from +2 to +1</b>,
then click <b>START</b>.
Even though +1 is still <i>more</i> than the punishment for both cheating (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 is when people make the hard effort
to create a win-win solution! (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>
In each round of a match, players have a small chance of making a mistake. (let's say, 5%)
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 9%,</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 increase 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">
</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">
<b>NOTE: Sandbox Mode is totally optional.</b>
Feel free to skip it, or play around! Once you're done, 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 much more than this.
There's reputation, shared values, contracts, cultural markers, blah blah blah.
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 do, 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">
<span class="credits">

created by:<br>
<span class="big">NICKY CASE</span><br>
<a href="http://ncase.me/" target="_blank">play my other shtuff</a>
•
<a href="https://twitter.com/ncasenmare" target="_blank">follow my tweeter</a>
<br>
<a href="https://github.com/ncase/trust/#play-it-here-httpncasemetrust" target="_blank">download the music &amp; source code</a>

<span class="divider"></span>

based off robert axelrod's 1984 book,<br>
<span class="big">"THE EVOLUTION OF COOPERATION"</span><br>
<a href="notes" target="_blank">read my footnotes for this game</a>

<span class="divider"></span>

lots of love and thanks to<br>
<span class="big">MY PATREON SUPPORTERS</span><br>
<a href="peeps" target="_blank">see my drawings of 'em</a>
•
<a href="https://www.patreon.com/ncase" target="_blank">throw coins at me on patreon &lt;3</a>

<span class="divider"></span>

p.s: want more learning-by-playing?<br>
check out
<a href="http://explorabl.es/" target="_blank">explorable explanations</a>!

</span>
</p>

<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - 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">
cooperator
</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>

<p id="forgot_whos_who">
(forgot who's who? hover buttons to see descriptions of each character!)
</p>
<p id="who_tft">
Starts with Cooperate. Then, it simply repeats whatever YOU did in the last round.
</p>
<p id="who_all_d">
Always cheats.
</p>
<p id="who_all_c">
Always cooperates.
</p>
<p id="who_grudge">
Starts with Cooperate, and keeps cooperating until you cheat it even once.
Afterwards, it always plays Cheat.
</p>
<p id="who_prober">
Starts with: Cooperate, Cheat, Cooperate, Cooperate.
Afterwards, if you ever retaliate with a Cheat, it plays like a Copycat.
Otherwise, it plays like an Always Cheat.
</p>
<p id="who_tf2t">
Starts with Cooperate.
Only retaliates with a Cheat if you cheated it TWICE in a row.
</p>
<p id="who_pavlov">
Starts with Cooperate.
Then, if you cooperated in last round, it repeats its last move (even if it was an accident).
But if you cheated in last round, it switches its last move (even if it was an accident).
</p>
<p id="who_random">
Randomly cheats or cooperates with 50-50 chance
</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">
PLAY
</p>

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

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

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

<p id="label_population">
results
</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>