trust/lang/en.html

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

<!-- TODO: Focus ONLY on social trust, not governments -->

<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 chill out with the enemy, British<br>
and German soldiers left their trenches, crossed No Man's Land,<br>
and gathered together to bury their dead, to exchange gifts, to sing.
<br><br>

Meanwhile: it's 2017, the West has been at peace for decades, and<br>
we're less trusting than ever. Fewer and fewer people say they trust their<br>
governments, their media, or even <i>each other</i>. So here's our puzzle:
<br><br>

<b>Why, even in good times, do friends become enemies?<br>
And why, even in bad times, do enemies become friends?</b>
<br><br>

I think game theory 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... <i>or is it?</i>
</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> the dilemma of trust.
You'd both be better off trusting each other, but trust leaves you vulnerable.
But what happens if we can...
</p>

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

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

<!-- TO DO: WEAVE IN MORE ABOUT TRENCHES. "CHOOSE WISELY" -->

<p id="iterated_intro_top">
<b>Now, let's play for real.</b><br>
You'll be playing against 5 different opponents, each with their own "personality".
With each opponent, you'll play anywhere between 3 to 7 rounds.
Can you trust them? Or rather... can they trust <i>you?</i>
</p>

<p id="iterated_intro_btm">
Choose your first, <b>real</b> move:
</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?
Think carefully about it, and then<br>
<b>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">
&nbsp;
</p>
<p id="tournament_2">
Oh, by the way...
</p>
<p id="tournament_3">
[trench live &amp; let live stuff]
</p>
<p id="tournament_4">
[trench live &amp; let live stuff]
</p>
<p id="tournament_5">
[trench live &amp; let live stuff]
</p>
<p id="tournament_6">
[trench live &amp; let live stuff]
</p>
<p id="tournament_7">
[trench live &amp; let live stuff]
</p>
<p id="tournament_8">
[trench live &amp; let live stuff]
</p>
<p id="tournament_9">
[trench live &amp; let live stuff]
</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">
(Sorry, [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... <i>live and let live.</i>
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>, who 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???? -->
<!-- TODO: (other strategies will be introduced later) -->

<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>

<!-- More reference to game theory earlier? -->
<!-- TODO: More "me" and "I"??? -->

<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">
There are jerks. Look around.
<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 the trenches of World War I independently "evolved" a similar strategy -- 
why, then, are there so many un-trusting, un-trustworthy people around?
<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>

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

<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - - 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">
reset payoffs
</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 one-on-one game
</p>
<p id="sandbox_rules_1_single">
Play [N] round per one-on-one game
</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">
In each round of a one-on-one game, there's a [N]% chance a player makes a mistake
</p>

<p id="sandbox_end">
...once you're done playing around in Sandbox Mode, click:
</p>



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

<p id="conclusion">
blah blah blah blah 
blah blah blah blah<br> 
blah blah blah blah
blah blah blah blah<br> 
blah blah blah blah 
blah blah blah blah<br>
blah blah blah blah 
blah blah blah blah<br>
</p>

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

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


<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - 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="label_pavlov">
Simpleton
</p>
<p id="label_short_pavlov">
simpleton
</p>

<p id="label_random">
Lol So Random
</p>
<p id="label_short_random">
random
</p>


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

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

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

<p id="label_play">
play
</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>


<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - 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_noise">
5. Making Mistaeks
</p>
<p id="chapter_sandbox">
6. Sandbox Mode
</p>
<p id="chapter_conclusion">
7. Conclusion
</p>
<p id="chapter_credits">
Credits
</p>