josch/ncase.me-trust
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

ALL THE WORDS

Browse source
This commit is contained in:
Nicky Case 2017-07-22 18:42:27 -04:00
parent de0e0e8c95
commit 403be5177e
16 changed files with 477 additions and 255 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/conclusion/summary.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
assets/conclusion/truce.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 318 KiB

BIN
assets/sounds/evil_laugh.mp3 Normal file
View file

Binary file not shown.

10
assets/splash/splash_peep.json
View file

@ -7,13 +7,21 @@
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":302,"h":402},
"sourceSize": {"w":302,"h":402}
},
"splash_peep0001":
{
"frame": {"x":10,"y":422,"w":302,"h":402},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":302,"h":402},
"sourceSize": {"w":302,"h":402}
}},
"meta": {
"app": "Adobe Animate",
"version": "15.2.0.66",
"image": "splash_peep.png",
"format": "RGBA8888",
"size": {"w":512,"h":512},
"size": {"w":512,"h":1024},
"scale": "1"
}
}

BIN
assets/splash/splash_peep.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.7 KiB

After

Width:  |  Height:  |  Size: 13 KiB

7
index.html
View file

@ -97,11 +97,14 @@ window.onload = function(){
slideSelect.dom.style.display = "block";
// [FOR DEBUGGING]
//publish("slideshow/next");
publish("slideshow/scratch", ["noise"]);
publish("slideshow/next");
//publish("slideshow/scratch", ["conclusion"]);
});
// DEBUGGING
//Howler.mute(true);
// LOAD REAL THINGS
Loader.loadAssets(
Loader.manifest,

21
js/sims/Iterated.js
View file

@ -8,6 +8,7 @@ Loader.addToManifest(Loader.manifest,{
// SFX
coin_insert: "assets/sounds/coin_insert.mp3",
coin_get: "assets/sounds/coin_get.mp3",
evil_laugh: "assets/sounds/evil_laugh.mp3",
});
@ -202,6 +203,8 @@ function Iterated(config){
self.remove = function(){
app.destroy();
unlisten(self);
self.playerA.kill();
self.playerB.kill();
_remove(self);
};
@ -457,6 +460,14 @@ function IteratedPeep(config){
if(self.payoff==PD.PAYOFFS.P) self.face.gotoAndStop(7); // Punishment Face
if(self.payoff==PD.PAYOFFS.T) self.face.gotoAndStop(10); // Temptation Face!
// EVIL LAUGH
if(self.payoff==PD.PAYOFFS.T){
setTimeout(function(){
var stereo = (config.opponent) ? 0.9 : -0.9;
Loader.sounds.evil_laugh.stereo(stereo).volume(1).play();
},100);
}
if(self.payoff==PD.PAYOFFS.T){
_isHopping = true;
}
@ -584,6 +595,16 @@ function IteratedPeep(config){
self.animationDeferred.resolve();
};
// KILL
self.kill = function(){
// Remove ALL tweens
Tween.removeTweens(self.animated);
Tween.removeTweens(self.coin);
for(var i=0;i<self.payoffCoins.length;i++){
Tween.removeTweens(self.payoffCoins[i]);
}
};
}

18
js/sims/SandboxUI.js
View file

@ -268,12 +268,26 @@ function SandboxUI(config){
}
// If positive, add one starting from TOP, skipping anchor.
// (UNLESS IT'S ZERO)
var everyoneElseWasZero = true;
if(diff>0){
for(var i=0; i<Tournament.INITIAL_AGENTS.length && diff>0; i++){
// do NOT adjust anchor.
var conf = Tournament.INITIAL_AGENTS[i];
if(conf.strategy==peepID) continue;
if(conf.count==0) continue; // DO NOT ADD IF ZERO
everyoneWasZero = false;
conf.count++; // ADD
diff--; // yay
}
}
// ...edge case. fine w/e
if(everyoneElseWasZero){
for(var i=0; i<Tournament.INITIAL_AGENTS.length && diff>0; i++){
// do NOT adjust anchor.
var conf = Tournament.INITIAL_AGENTS[i];
if(conf.strategy==peepID) continue;
// if(conf.count==0) continue; // DO NOT ADD IF ZERO
// everyoneWasZero = false;
conf.count++; // ADD
diff--; // yay
}
@ -302,12 +316,12 @@ function SandboxUI(config){
page.appendChild(_makeLabel("sandbox_payoffs", {x:0, y:0, w:433}));
// PAYOFFS
var payoffsUI = new PayoffsUI({x:64, y:47, slideshow:self});
var payoffsUI = new PayoffsUI({x:84, y:41, scale:0.9, slideshow:self});
page.appendChild(payoffsUI.dom);
// Reset
var resetPayoffs = new Button({
x:320, y:300, text_id:"sandbox_reset_payoffs", size:"short",
x:240, y:300, text_id:"sandbox_reset_payoffs",
message:"pd/defaultPayoffs"
});
page.appendChild(resetPayoffs.dom);

3
js/sims/Splash.js
View file

@ -35,7 +35,7 @@ function Splash(config){
// PEEPS
var peeps = [];
self.addPeep = function(x, y){
var peep = new SplashPeep({ x:x, y:y, app:app });
var peep = new SplashPeep({ x:x, y:y, app:app, blush:config.blush });
peeps.push(peep);
peepsContainer.addChild(peep.graphics);
};
@ -121,6 +121,7 @@ function SplashPeep(config){
// Graphics!
var g = _makeMovieClip("splash_peep", {scale:0.3});
self.graphics = g;
if(config.blush) g.gotoAndStop(1);
if(Math.random()<0.5) g.scale.x*=-1; // Flip?
// Them variables...

11
js/slides/1_Slides_OneOff.js
View file

@ -79,6 +79,9 @@ SLIDES.push({
_hide(o.btnCheat); _fadeIn(o.btnCheat, 150+1200);
_hide(o.btnCooperate); _fadeIn(o.btnCooperate, 150+1200);
},
onend: function(self){
self.remove("btmWords");
}
},{
@ -92,19 +95,21 @@ SLIDES.push({
// Text
var t = o.topWords;
var b = o.btmWords;
if(_.answer=="COOPERATE"){
t.setText(Words.get("oneoff_2_cooperated")+"<br>"+Words.get("oneoff_2_top"));
}else{
t.setText(Words.get("oneoff_2_cheated")+"<br>"+Words.get("oneoff_2_top"));
}
b.setTextID("oneoff_2_btm");
self.add({
id:"btmWords", type:"TextBox", text_id:"oneoff_2_btm",
x:130, y:392, width:700, height:100, align:"center"
});
// Replace button
self.remove("btnCheat");
self.remove("btnCooperate");
self.add({
id:"btnNext", type:"Button", x:304, y:466, size:"long",
id:"btnNext", type:"Button", x:304, y:481, size:"long",
text_id:"oneoff_button_next",
message:"slideshow/next"
});

26
js/slides/3_Slides_Tournament.js
View file

@ -84,6 +84,12 @@ SLIDES.push({
var o = self.objects;
// Words to the side
self.add({
id:"text_extra", type:"TextBox",
x:510, y:230, width:450, height:500
});
var showTournament = function(num){
var words = "";
@ -124,13 +130,17 @@ SLIDES.push({
match_header = match_header.replace(/\[B\]/g, "<span class='"+charB+"'>"+scoreB+"</span>");
words += match_header+"<br><br><br>";
// Extra info
words += Words.get("tournament_"+(num+1));
// PUT IN THE WORDS
o.text.setText(words);
_hide(o.text); _fadeIn(o.text, 100);
// Extra info
o.text_extra.setTextID("tournament_"+(num+1));
_hide(o.text_extra); _fadeIn(o.text_extra, 100+250);
// FADE IN BUTTON
_hide(o.button); _fadeIn(o.button, 100+500);
// FINAL MATCH?
if(_matchNumber==9){
_switchButton();
@ -138,10 +148,6 @@ SLIDES.push({
};
// MATCH NUMBER!
_matchNumber = 0;
showTournament(_matchNumber);
// "Next Match" Button
self.add({
id:"button", type:"Button",
@ -158,10 +164,14 @@ SLIDES.push({
publish("slideshow/next");
};
};
_hide(o.button); _fadeIn(o.button, 100+500);
// MATCH NUMBER!
_matchNumber = 0;
showTournament(_matchNumber);
},
onend: function(self){
self.remove("text_extra");
self.remove("button");
}
});

94
js/slides/5_Slides_Distrust.js
View file

@ -286,101 +286,11 @@ SLIDES.push({
// Worse...
self.add({
id:"next", type:"Button",
x:0, y:410, size:"long",
x:0, y:450, size:"long",
text_id:"distrust_5_btn",
message: "slideshow/next"
});
_hide(o.next); _fadeIn(o.next, 400);
},
onend: function(self){
self.remove("text");
self.remove("next");
}
});
// Play with BOTH
SLIDES.push({
onstart: function(self){
var o = self.objects;
_.misc = {};
// TOURNAMENT
Tournament.resetGlobalVariables();
Tournament.INITIAL_AGENTS = [
{strategy:"all_c", count:23},
{strategy:"all_d", count:1},
{strategy:"tft", count:1}
];
PD.PAYOFFS.P = -4;
PD.PAYOFFS.S = -1;
PD.PAYOFFS.R = 1;
PD.PAYOFFS.T = 3;
o.tournament.reset();
// Words
self.add({
id:"text", type:"TextBox",
x:0, y:0, width:450, height:500,
text_id:"distrust_6"
});
_hide(o.text); _fadeIn(o.text, 100);
listen(_.misc, "payoffs/onchange", function(value){
o.tournament.reset();
});
// SLIDER
// HAX - COPY PASTE CODE WHATEVER
var x = 0;
var y = 95;
self.add({
id:"roundsLabel", type:"TextBox",
x:0, y:y, width:450, size:25, noSelect:true
});
self.add({
id:"roundsSlider", type:"Slider",
x:0, y:y+30, width:450,
min:1, max:20, step:1,
message: "rules/turns"
});
var _updateLabel = function(value){
var words = (value==1) ? Words.get("sandbox_rules_1_single") : Words.get("sandbox_rules_1"); // plural?
words = words.replace(/\[N\]/g, value+""); // replace [N] with the number value
o.roundsLabel.setText("<b>"+words+"</b>");
};
listen(_.misc, "rules/turns", function(value){
_updateLabel(value);
o.tournament.reset();
});
o.roundsSlider.setValue(10);
_updateLabel(10);
_hide(o.roundsLabel); _fadeIn(o.roundsLabel, 300);
_hide(o.roundsSlider); _fadeIn(o.roundsSlider, 300);
// PAYOFFS
self.add({
id:"payoffs", type:"PayoffsUI",
x:105, y:170, scale:0.8, slideshow:self
});
_hide(o.payoffs); _fadeIn(o.payoffs, 300);
// Words
self.add({
id:"text2", type:"TextBox",
x:0, y:410, width:450, height:500,
text_id:"distrust_6_end"
});
_hide(o.text2); _fadeIn(o.text2, 500);
// FINALLY.
self.add({
id:"next", type:"Button",
x:0, y:475, size:"long",
text_id:"distrust_6_btn",
message: "slideshow/scratch"
});
_hide(o.next); _fadeIn(o.next, 700);
_hide(o.next); _fadeIn(o.next, 400);
},
onend: function(self){

103
js/slides/6_Slides_Noise.js
View file

@ -153,7 +153,9 @@ SLIDES.push({
// Tournament: simpleton wins
SLIDES.push({
//id:"noise",// [FOR DEBUGGING]
onstart: function(self){
var o = self.objects;
@ -214,7 +216,8 @@ SLIDES.push({
var o = self.objects;
// Words
o.text.setTextID("noise_evo_2");
var words = Words.get("noise_evo_2").replace(/\[CHAR\]/g, "<span class='"+_.answer+"'>"+Words.get("label_"+_.answer)+"</span>");
o.text.setText(words);
_hide(o.text); _fadeIn(o.text, 100);
/////////////////////////////////////////
@ -260,13 +263,35 @@ SLIDES.push({
if(step=="reproduce"){
reproduceSteps++;
if(reproduceSteps==6){
publish("slideshow/next");
// WORDS
var words = (_.answer=="pavlov") ? Words.get("noise_evo_2_2_correct") : Words.get("noise_evo_2_2_incorrect");
words += " ";
words += Words.get("noise_evo_2_2");
self.add({
id:"text_next", type:"TextBox",
x:510, y:160, width:450,
text: words
});
_hide(o.text_next); _fadeIn(o.text_next, 100);
// BUTTON
self.add({
id:"btn_next", type:"Button", x:510, y:366,
text_id:"noise_evo_2_2_btn", size:"long",
message:"slideshow/next"
});
_hide(o.btn_next); _fadeIn(o.btn_next, 300);
}
}
});
},
onend: function(self){
self.remove("text_next");
self.remove("btn_next");
unlisten(_.misc);
}
});
@ -340,7 +365,8 @@ SLIDES.push({
o.playButton.setText("label_start");
// Words
o.text.setTextID("noise_evo_4");
var words = Words.get("noise_evo_4").replace(/\[CHAR\]/g, "<span class='"+_.answer+"'>"+Words.get("label_"+_.answer)+"</span>");
o.text.setText(words);
_hide(o.text); _fadeIn(o.text, 100);
/////////////////////////////////////////
@ -353,13 +379,34 @@ SLIDES.push({
if(step=="reproduce"){
reproduceSteps++;
if(reproduceSteps==8){
publish("slideshow/next");
// WORDS
var words = (_.answer=="tf2t") ? Words.get("noise_evo_4_2_correct") : Words.get("noise_evo_4_2_incorrect");
words += " ";
words += Words.get("noise_evo_4_2");
self.add({
id:"text_next", type:"TextBox",
x:510, y:116, width:450,
text: words
});
_hide(o.text_next); _fadeIn(o.text_next, 100);
// BUTTON
self.add({
id:"btn_next", type:"Button", x:510, y:446,
text_id:"noise_evo_4_2_btn", size:"long",
message:"slideshow/next"
});
_hide(o.btn_next); _fadeIn(o.btn_next, 300);
}
}
});
},
onend: function(self){
self.remove("text_next");
self.remove("btn_next");
unlisten(_.misc);
}
});
@ -368,6 +415,7 @@ SLIDES.push({
onstart: function(self){
var o = self.objects;
_.misc = {};
// Words
o.text.setTextID("noise_evo_5");
@ -378,7 +426,7 @@ SLIDES.push({
// Slider!
var x = 510;
var y = 100;
var y = 200;
self.add({
id:"noiseLabel", type:"TextBox",
x:x, y:y, width:450, noSelect:true
@ -389,12 +437,11 @@ SLIDES.push({
min:0.00, max:0.50, step:0.01,
message: "rules/noise"
});
_.misc = {};
var _updateLabel = function(value){
value = Math.round(value*100);
var words = Words.get("sandbox_rules_3");
words = words.replace(/\[N\]/g, value+""); // replace [N] with the number value
o.noiseLabel.setText(words);
o.noiseLabel.setText("<i>"+words+"</i>");
};
listen(_.misc, "rules/noise", function(value){
_updateLabel(value);
@ -402,22 +449,30 @@ SLIDES.push({
});
o.noiseSlider.setValue(0.05);
_updateLabel(0.05);
_hide(o.noiseLabel); _fadeIn(o.noiseLabel, 300);
_hide(o.noiseSlider); _fadeIn(o.noiseSlider, 300);
// Continue whenever you want to...
var x = 510;
var y = 300;
self.add({
id:"continueLabel", type:"TextBox",
x:x, y:y+5, width:200, height:50,
align:"right", color:"#aaa", size:17,
text_id:"noise_evo_6_continue"
});
self.add({
id:"continueButton", type:"Button",
x:x+215, y:y, size:"short",
text_id:"label_continue",
message: "slideshow/next"
listen(_.misc, "tournament/autoplay/start",function(){
if(_showContinue) _showContinue();
});
var _showContinue = function(){
_showContinue = null;
self.add({
id:"continueLabel", type:"TextBox",
x:565, y:405, width:400,
align:"right", color:"#aaa", size:17,
text_id:"noise_evo_5_continue"
});
self.add({
id:"continueButton", type:"Button",
x:855, y:440, size:"short",
text_id:"label_continue",
message: "slideshow/next"
});
_hide(o.continueLabel); _fadeIn(o.continueLabel, 100);
_hide(o.continueButton); _fadeIn(o.continueButton, 100);
};
},
onend: function(self){
@ -426,6 +481,7 @@ SLIDES.push({
self.remove("noiseSlider");
self.remove("continueLabel");
self.remove("continueButton");
self.remove("text");
}
});
@ -435,7 +491,11 @@ SLIDES.push({
var o = self.objects;
// Words
o.text.setTextID("noise_evo_6");
self.add({
id:"text", type:"TextBox",
x:510, y:10, width:450, height:500,
text_id:"noise_evo_6"
});
_hide(o.text); _fadeIn(o.text, 100);
// Next button
@ -444,6 +504,7 @@ SLIDES.push({
text_id:"noise_evo_6_btn", size:"long",
message:"slideshow/scratch"
});
_hide(o.button); _fadeIn(o.button, 500);
},
onend: function(self){

99
js/slides/8_Slides_Conclusion.js
View file

@ -1,6 +1,63 @@
SLIDES.push({
id: "conclusion",
onstart: function(self){
// WORDS
self.add({
id:"text1", type:"TextBox",
x:3, y:6, width:800,
text_id:"conclusion_0"
});
self.add({
id:"text2", type:"TextBox",
x:176, y:65-10, width:760, size:30, color:"#4089DD",
text_id:"conclusion_1_a"
});
self.add({
id:"text3", type:"TextBox",
x:176, y:115-10, width:760,
text_id:"conclusion_1_a2"
});
self.add({
id:"text4", type:"TextBox",
x:176, y:192-10, width:760, size:30, color:"#efc701",
text_id:"conclusion_2_a"
});
self.add({
id:"text5", type:"TextBox",
x:176, y:242-10, width:760,
text_id:"conclusion_2_a2"
});
self.add({
id:"text6", type:"TextBox",
x:176, y:316-10, width:760, size:30, color:"#DD4040",
text_id:"conclusion_3_a"
});
self.add({
id:"text7", type:"TextBox",
x:176, y:366-10, width:760,
text_id:"conclusion_3_a2"
});
self.add({
id:"text8", type:"TextBox",
x:94, y:440, width:500, align:"right",
text_id:"conclusion_4"
});
// IMAGE
self.add({
id:"img", type:"ImageBox",
src: "assets/conclusion/summary.png",
x:10, y:60, width:140, height:350
});
// Button
self.add({
id:"button", type:"Button", x:615, y:481,
text_id:"conclusion_btn", size:"long",
message:"slideshow/scratch"
});
},
onend: function(self){
self.clear();
@ -11,24 +68,25 @@ SLIDES.push({
onstart: function(self){
// Splash in background
self.add({ id:"splash", type:"Splash" });
self.add({ id:"splash", type:"Splash", blush:true });
// Circular Wordbox
self.add({
id:"text", type:"TextBox",
x:160, y:10, width:640, height:500, align:"center", size:19,
text_id:"conclusion"
x:160, y:10, width:640, height:500, align:"center",
text_id:"outro_1"
});
// Button
self.add({
id:"button", type:"Button", x:385, y:466,
text_id:"conclusion_button", fontSize:16, upperCase:false,
message:"slideshow/scratch"
text_id:"outro_1_btn",
message:"slideshow/next"
});
},
onend: function(self){
self.remove("text");
self.remove("button");
}
});
@ -39,16 +97,37 @@ SLIDES.push({
var o = self.objects;
// Text
o.text.setTextID("conclusion_2");
self.add({
id:"text", type:"TextBox",
x:160, y:30, width:640, height:500, align:"center", size:22,
text_id:"outro_2"
});
_hide(o.text); _fadeIn(o.text, 100);
// Photo
self.add({
id:"img", type:"ImageBox",
src: "assets/conclusion/truce.jpg",
x:228, y:90, width:500,
});
_hide(o.img); _fadeIn(o.img, 200);
// Text 2
self.add({
id:"text2", type:"TextBox",
x:228, y:402, width:500,
align:"center", color:"#aaa", size:14,
text_id:"outro_2_credits"
});
_hide(o.text2); _fadeIn(o.text2, 200);
// Button
self.add({
id:"button", type:"Button", x:385, y:466,
text_id:"conclusion_button", fontSize:16, upperCase:false,
id:"button", type:"Button", x:427, y:466,
text_id:"outro_2_btn", size:"short",
message:"slideshow/scratch"
});
// Fade In & Out
_hide(o.button); _fadeIn(o.button, 2000);
},
onend: function(self){

7
js/slides/9_Slides_Credits.js
View file

@ -2,5 +2,12 @@ SLIDES.push({
id: "credits",
onstart: function(self){
self.add({ id:"bg", type:"Background", color:"#222" });
// Circular Wordbox
self.add({
id:"text", type:"TextBox",
x:160, y:70, width:640, height:500, align:"center",
text_id:"credits_beta", color:"#fff"
});
}
});

333
lang/en.html
View file

@ -8,7 +8,7 @@ EVOLUTION<br>
<span style="font-size:0.75em">OF TRUST</span>
</p>
<p id="subtitle">
playing time: 30 min &#8226; by nicky case, july 2017
playing time: 20 min &#8226; by nicky case, july 2017
</p>
<p id="loading">
@ -22,32 +22,30 @@ PLAY &rarr;
<!-- - - - - - INTRO! - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->
<!-- TODO: Focus ONLY on social trust, not governments -->
<!-- TODO: Also, strong early humor. -->
<!-- TODO: "You guys, it's time for some game theory". -->
<!-- TODO: "live and let live". -->
<!-- TODO: it's sometimes RATIONAL to distrust: loop of trust & trustworthiness. -->
<!-- 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 chill out with the enemy, British<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 together to bury their dead, to exchange gifts, to sing.
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>
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:
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 &amp; when do friends become enemies?<br>
or: Why &amp; when do enemies become friends?</b>
<b>Why, even in peacetime, do friends become enemies?<br>
And why, even in wartime, do enemies become friends?</b>
<br><br>
I think game theory can help explain our epidemic of distrust –<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">
@ -120,7 +118,7 @@ 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>
Sure, seems like the right thing to do... <b>OR IS IT??</b>
</p>
<p id="oneoff_2_top">
@ -130,30 +128,30 @@ But if you cheat &amp; they cooperate, you gain three coins at their cost of one
</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...
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">
...play more than once? &rarr;
...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".
<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">
Choose your first, <b>real</b> move:
Pick your first, <i>real</i> move. <b>Choose wisely.</b>
</p>
<p id="iterated_info_1">
@ -240,8 +238,8 @@ 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>
<b>Think carefully about it... and then
PLACE YOUR BETS:</b>
</p>
<p id="tournament_intro">
@ -268,34 +266,41 @@ next match &rarr;
</p>
<p id="tournament_1">
&nbsp;
</p>
<p id="tournament_2">
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">
[trench live &amp; let live stuff]
Yes, the truce was dramatic, but it was <i>neither unique, nor unusual</i>.
</p>
<p id="tournament_4">
[trench live &amp; let live stuff]
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">
[trench live &amp; let live stuff]
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">
[trench live &amp; let live stuff]
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">
[trench live &amp; let live stuff]
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">
[trench live &amp; let live stuff]
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">
[trench live &amp; let live stuff]
<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...
Anyway. And the winner is...
</p>
<p id="the_winner_is">
@ -309,7 +314,7 @@ Anyway -- and the winner is...
Congrats, you placed your bet on the right horse.
</p>
<p id="tournament_winner_2_nay">
(Sorry, [CHAR].)
(Apologies to your bet, [CHAR].)
</p>
<p id="tournament_winner_3">
<span class="tft">Copycat</span> goes by many names.
@ -399,7 +404,7 @@ 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>,
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">
@ -424,7 +429,6 @@ 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,
@ -478,9 +482,6 @@ start the evolution process!
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>
@ -497,7 +498,7 @@ However...
</p>
<p id="evo_11">
Look around. There are jerks in the world.
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" --
@ -544,7 +545,7 @@ once you're done playing around, click:
</p>
<p id="distrust_3">
As you saw, when people play below some number of rounds,
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,
@ -581,31 +582,21 @@ once you're done, click:
</p>
<p id="distrust_5">
The same thing happens: <span class="all_d">Always Cheat</span> dominates.
So even if the reward for getting a "win-win" is still <i>more</i>
than the punishment for a "lose-lose"...
<b>if the reward for mutual trust is <i>too</i> low, distrust evolves.</b>
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>
I think, as a culture, we're losing the value of finding "win-wins".
We're more interested in "win-lose", because viciousness gets views, conflict gets clicks.
It's live and let <i>die.</i>
Maybe I'm just overthinking things, maybe I'm just old and shaking my fist at a cloud...
but don't you feel it? That we've forgotten something?...
<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">
...whatevs i dunno &rarr;
</p>
<p id="distrust_6">
Aaaaanyway, now you can change <i>both</i> rules!
(click <b>start</b> to see how, with weird payoffs, the sim
"swings" between <span class="all_d">Cheats</span> &amp; <span class="all_c">Cooperates</span>...)
</p>
<p id="distrust_6_end">
Once you're done experimenting with this,
let's look at our final barrier to trust...
</p>
<p id="distrust_6_btn">
<s>Misteaks</s> Mistakes. &rarr;
</p>
@ -615,7 +606,7 @@ let's look at our final barrier to trust...
<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 it, let's say two <span class="tft">Copycats</span> are playing against each other:
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:
@ -638,7 +629,7 @@ But if the other person doesn't <i>think</i> it was an accident...
</p>
<p id="noise_4">
<b>OH NO AGAIN</b>
<b>OH NO TIMES TWO</b>
<br>
The other player, being a <span class="tft">Copycat</span>, <i>had</i> to retaliate...
</p>
@ -659,7 +650,7 @@ Tragic. But now, are there <i>other</i> types of players who can...
</p>
<p id="noise_characters">
Let's meet some new faces!
Let's meet some new faces! (or, new hats, anyway)
</p>
<p id="character_tf2t">
@ -689,38 +680,104 @@ Alright, let's see how well these peeps do when they...
...play in a tournament &rarr;
</p>
<!-- fixed 5% chance: winner simpleton, then copykitten -->
<!-- Need to simulate first to write words, i dunno -->
<p id="noise_evo_1">
Noise Evolution, place your bets.
At <b>5% noise</b>
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">
Try it, controls to the left
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">
Simpleton wins, but let's try...
<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">
...different scenario, place your bets again.
...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">
Try it, controls to the left, again
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">
Ooh, surprising... but is that true if there's a LOT of noise?
<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">
GIVE A SLIDER FOR NOISE.
<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">
Explain nonlinear barrier, and real life. Also sandbox.
</p>
<p id="noise_evo_6_continue">
Explain nonlinear barrier, and real life. Also sandbox.
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">
Teaser for sandbox
...in the Sandbox Mode!
</p>
@ -767,7 +824,7 @@ During each round, there's a [N]% chance a player makes a mistake:
...and once you're done playing around, let's recap:
</p>
<p id="sandbox_end_btn">
what we learnt today &rarr;
what we learnt today! &rarr;
</p>
@ -776,46 +833,73 @@ what we learnt today &rarr;
<!-- - - - - CONCLUSION! - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->
<p id="conclusion_1">
TRUST:
- repeated interaction:
- win-win:
- dealing with mistakes: forgive, and try to be clear and honest yourself
DISTRUST:
- loss of social capital
- win-lose, use versus them, zero-sum
- gleefully punishing even small mistakes
But above all, there's also...
<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 bigger lesson &rarr;
...the <i>biggest</i> lesson. &rarr;
</p>
<p id="conclusion_2">
Don't hate the player, hate the game.
<br>
Game theory lesson.
<br>
Short term: game changes players. But don't be cynical
<br>
Long term: players change game, from the bottom up -- evolution.
<br>
So if we wanna cure our epidemic of distrust,
and rebuild a trusting &amp; trustworthy civic society, it's up to all of <i>us.</i>
Let's all learn and act to find win-wins,
to create repeated interactions,
(and...)
<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="conclusion_2">
<p id="outro_1_btn">
and all learn...
</p>
<p id="outro_2">
...to live and let live.
<!-- the christmas truce pic/photo(?) circular pic... words overlaid -->
</p>
<p id="conclusion_button">
<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>
@ -823,6 +907,25 @@ to create repeated interactions,
<!-- - - - - - 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 - - - - - - -->