intro and networks words done
This commit is contained in:
parent
7d51bbe937
commit
51d91e9c20
|
@ -273,9 +273,9 @@ words, bonus, glossary{
|
|||
}
|
||||
|
||||
/* TO SEE LAYOUT */
|
||||
/*.box, #simulations{
|
||||
.box, #simulations{
|
||||
border: 1px solid #eee;
|
||||
}*/
|
||||
}
|
||||
|
||||
/* A NICE CIRCLE */
|
||||
/* Thanks to: https://skeate.github.io/2015/07/13/Wrapping-Text-to-Fit-Shaped-Containers-with-CSS.html */
|
||||
|
|
130
index.html
130
index.html
|
@ -184,64 +184,120 @@ let's play! →
|
|||
<!-- 1. Networks -->
|
||||
|
||||
<words id="_1_tutorial_start">
|
||||
Let's draw a network!
|
||||
Each connection represents a friendship between two people:
|
||||
<b>Let's draw a network!</b>
|
||||
Each connection represents a friendship between two people:
|
||||
</words>
|
||||
|
||||
<words id="_1_tutorial_connect">
|
||||
draw to connect
|
||||
draw to connect
|
||||
</words>
|
||||
|
||||
<words id="_1_tutorial_disconnect">
|
||||
scratch to disconnect
|
||||
scratch to disconnect
|
||||
</words>
|
||||
|
||||
<words id="_1_tutorial_end">
|
||||
feel free to play around! when you're done,
|
||||
<next wiggle>let's continue →</next>
|
||||
|
||||
feel free to keep playing around, and draw whatever friendship network you want!
|
||||
when you're done,
|
||||
<next wiggle>let's continue →</next>
|
||||
|
||||
</words>
|
||||
|
||||
<words id="_1_threshold">
|
||||
blah blah blah blah
|
||||
blah blah blah blah
|
||||
blah blah blah blah
|
||||
<span bonus="herp"></span>
|
||||
blah blah blah blah
|
||||
blah blah blah blah
|
||||
thresholds NOT COUNTING THEMSELVES
|
||||
|
||||
But people don't just have social connections to make pretty pictures.
|
||||
People look at their social connections, to understand their social world.
|
||||
In this example, people look to their peers to
|
||||
find out what % of their friends (not counting selves) are,
|
||||
say, binge-drinkers. (img)
|
||||
|
||||
</words>
|
||||
<words id="_1_threshold_count1">
|
||||
# of drinker friends / # of total friends
|
||||
|
||||
<words id="_1_threshold_instruction">
|
||||
<b>Draw/erase connections, and see what happens! →</b>
|
||||
</words>
|
||||
<words id="_1_threshold_count2">
|
||||
% of friends are drinkers
|
||||
</words>
|
||||
<words id="_1_threshold_count3">
|
||||
(black line shows the 50% "majority" mark)
|
||||
|
||||
<words id="_1_threshold_explanation">
|
||||
<span style="color:#666">top-left:</span>
|
||||
# of drinker friends / # of total friends
|
||||
<br>
|
||||
<span style="color:#666">top-right:</span>
|
||||
% of drinker friends →
|
||||
<br>
|
||||
<span style="color:#666">black line:</span>
|
||||
the 50% "majority" threshold
|
||||
<br> (they'll glow if past threshold)
|
||||
</words>
|
||||
|
||||
<words id="_1_threshold_end">
|
||||
<next>and next...</next>
|
||||
<next>cool, got it</next>
|
||||
</words>
|
||||
|
||||
<words id="_1_pre_puzzle">
|
||||
blah blah drinking
|
||||
<next>blah blah next</next>
|
||||
|
||||
However, networks can <i>fool</i> people.
|
||||
Just like how you see the earth as flat because you're on it,
|
||||
people get wrong ideas about society because they're <i>in</i> it.
|
||||
|
||||
<br><br>
|
||||
|
||||
(BONUS BOX: OTHER CONNECTIONS)
|
||||
|
||||
<br><br>
|
||||
|
||||
For example, a 1991 study(*) showed that
|
||||
“virtually all [college] students reported that their friends drank more than they did.”
|
||||
But that seems impossible!
|
||||
How can that be?
|
||||
Well, you're about to invent the answer yourself, by drawing a network.
|
||||
It's time to...
|
||||
|
||||
<next>FOOL EVERYONE →</next>
|
||||
|
||||
</words>
|
||||
|
||||
<words id="_1_puzzle">
|
||||
blah blah puzzle
|
||||
|
||||
<b style="font-size:2em">PUZZLE TIME!</b>
|
||||
<br>
|
||||
Fool <i>everyone</i> into thinking
|
||||
the majority of their friends are binge-drinkers (img)
|
||||
(even though binge-drinkers are outnumbered 2-to-1)
|
||||
|
||||
</words>
|
||||
<words id="_1_puzzle_metric">
|
||||
HOW MANY PEEPS FOOLED:
|
||||
<b>FOOLED:</b>
|
||||
</words>
|
||||
<words id="_1_puzzle_metric_2">
|
||||
out of 9 people
|
||||
</words>
|
||||
<words id="_1_puzzle_end">
|
||||
blah blah puzzle
|
||||
<next wiggle>a winrar is you</next>
|
||||
Congrats! You manipulated a group of students into believing
|
||||
in the prevalance of an incredibly unhealthy social norm! Good going!
|
||||
<next wiggle>...uh. thanks?</next>
|
||||
</words>
|
||||
|
||||
<words id="_1_post_puzzle">
|
||||
blah blah post-puzzle
|
||||
<next>simple contagion...</next>
|
||||
|
||||
What you just created is called The Majority Illusion(*),
|
||||
which also explains why people think their political views are consensus,
|
||||
or why extremism seems more common than it actually is.
|
||||
<i>Madness.</i>
|
||||
|
||||
<br><br>
|
||||
|
||||
But ideas/behaviors aren't just passively observed, they actively <i>spread</i>.
|
||||
So now, let's look at something network scientists call...
|
||||
|
||||
<next>“Simple Contagion!” →</next>
|
||||
|
||||
<b>← bonus challenge:</b> make everyone think
|
||||
<i>less than half</i> of their friends are binge-drinkers
|
||||
|
||||
</words>
|
||||
<words id="_1_post_puzzle_bonus">
|
||||
🙌 yay you did it 🙌
|
||||
</words>
|
||||
|
||||
<!-- 2. Simple Contagions -->
|
||||
|
@ -333,19 +389,19 @@ Select a tool...
|
|||
</words>
|
||||
|
||||
<words id="sandbox_tool_pencil">
|
||||
Draw Connections
|
||||
Draw Network
|
||||
</words>
|
||||
<words id="sandbox_tool_add">
|
||||
Add Peep
|
||||
Add Person
|
||||
</words>
|
||||
<words id="sandbox_tool_add_infected">
|
||||
Add "Infected"
|
||||
</words>
|
||||
<words id="sandbox_tool_move">
|
||||
Move Peep
|
||||
Move Person
|
||||
</words>
|
||||
<words id="sandbox_tool_delete">
|
||||
Delete Peep
|
||||
Delete Person
|
||||
</words>
|
||||
<words id="sandbox_tool_clear">
|
||||
<b>CLEAR IT ALL</b>
|
||||
|
@ -355,13 +411,13 @@ Delete Peep
|
|||
(...or, use keyboard shortcuts!)
|
||||
</words>
|
||||
<words id="sandbox_shortcuts">
|
||||
[1]: Add Peep
|
||||
[1]: Add Person
|
||||
<br>
|
||||
[2]: Add "Infected" Peep
|
||||
[2]: Add "Infected" Person
|
||||
<br>
|
||||
[Space]: Move Peep
|
||||
[Space]: Move Person
|
||||
<br>
|
||||
[Backspace]: Delete Peep
|
||||
[Backspace]: Delete Person
|
||||
</words>
|
||||
|
||||
<!-- - - - - - - - - - - - - -->
|
||||
|
|
|
@ -22,8 +22,8 @@ SLIDES.push(
|
|||
fullscreen: true,
|
||||
network: {
|
||||
"contagion":0,
|
||||
"peeps":[[44,184,0],[155,215,0],[237,105,0],[309,213,0],[646,211,0],[328,305,0],[629,308,0],[417,111,0],[539,375,0],[216,299,0],[107,311,0],[-61,220,0],[87,452,0],[733,147,0],[760,293,0],[753,448,0],[744,46,0],[134,33,0],[929,181,0],[848,111,0],[1013,330,0],[880,269,0],[538,128,0],[208,391,0],[853,356,0]],
|
||||
"connections":[[5,6]]
|
||||
"peeps":[[44,184,0],[155,215,0],[237,105,0],[309,213,0],[646,211,0],[328,305,0],[629,308,0],[417,111,0],[538,362,0],[216,299,0],[94,314,0],[-61,220,0],[68,455,0],[733,147,0],[760,293,0],[776,437,0],[759,48,0],[134,33,0],[929,181,0],[848,111,0],[1013,330,0],[880,269,0],[538,128,0],[189,388,0],[853,356,0]],
|
||||
"connections":[[5,6,0]]
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -55,7 +55,7 @@ SLIDES.push(
|
|||
{
|
||||
type:"box",
|
||||
id:"end_words",
|
||||
text:"_1_tutorial_end", x:230, y:425, w:500, h:70, align:"center",
|
||||
text:"_1_tutorial_end", x:230, y:400, w:500, h:70, align:"center",
|
||||
hidden:true
|
||||
}
|
||||
|
||||
|
@ -110,23 +110,38 @@ SLIDES.push(
|
|||
{
|
||||
type:"box",
|
||||
id:"_1_threshold",
|
||||
text:"_1_threshold", x:80, y:25, w:300
|
||||
text:"_1_threshold", x:60, y:25, w:400
|
||||
},
|
||||
{
|
||||
type:"box",
|
||||
id:"_1_threshold_instruction",
|
||||
text:"_1_threshold_instruction", x:110, y:260, w:300,
|
||||
align:"center"
|
||||
},
|
||||
{
|
||||
type:"box",
|
||||
id:"_1_threshold_explanation",
|
||||
text:"_1_threshold_explanation", x:105, y:340, w:400,
|
||||
align:"right",
|
||||
color:"#bbb",
|
||||
fontSize:"0.75em",
|
||||
lineHeight:"1.2em"
|
||||
},
|
||||
{
|
||||
type:"box",
|
||||
id:"_1_threshold_end",
|
||||
text:"_1_threshold_end", x:80, y:400, w:300
|
||||
text:"_1_threshold_end", x:60, y:430, w:400
|
||||
},
|
||||
|
||||
// SIMULATION: THRESHOLD
|
||||
{
|
||||
type:"sim",
|
||||
x:400, y:70,
|
||||
x:420, y:70,
|
||||
fullscreen: true,
|
||||
network: {
|
||||
"contagion":0.5,
|
||||
"peeps":[[95,65,0],[417,380,1],[52,340,0],[399,92,1]],
|
||||
"connections":[[2,3],[3,1]],
|
||||
"peeps":[[141,99,0],[444,373,1],[442,103,1],[144,371,0]],
|
||||
"connections":[[2,1,0],[3,2,0]]
|
||||
},
|
||||
options:{
|
||||
infectedFrame: 2,
|
||||
|
@ -141,13 +156,15 @@ SLIDES.push(
|
|||
{
|
||||
remove:[
|
||||
{ type:"box", id:"_1_threshold" },
|
||||
{ type:"box", id:"_1_threshold_instruction" },
|
||||
{ type:"box", id:"_1_threshold_explanation" },
|
||||
{ type:"box", id:"_1_threshold_end" }
|
||||
],
|
||||
add:[
|
||||
{
|
||||
type:"box",
|
||||
id:"_1_pre_puzzle",
|
||||
text:"_1_pre_puzzle", x:80, y:25, w:325, h:540
|
||||
text:"_1_pre_puzzle", x:60, y:0, w:400
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -165,7 +182,7 @@ SLIDES.push(
|
|||
{
|
||||
id:"puzzle",
|
||||
type:"sim",
|
||||
x:480-250, y:25,
|
||||
x:410, y:25,
|
||||
fullscreen: true,
|
||||
network: {
|
||||
"contagion":0.5,
|
||||
|
@ -179,31 +196,80 @@ SLIDES.push(
|
|||
},
|
||||
|
||||
// Done? Let's go... (hidden at first...)
|
||||
{
|
||||
type:"box",
|
||||
id:"_1_puzzle",
|
||||
text:"_1_puzzle", x:60, y:10, w:300
|
||||
},
|
||||
{
|
||||
type:"box",
|
||||
id:"_1_puzzle_metric",
|
||||
text:"_1_puzzle_metric", x:60, y:220, w:300
|
||||
},
|
||||
{
|
||||
type:"box",
|
||||
id:"_1_puzzle_end",
|
||||
text:"_1_puzzle_end", x:680, y:430, w:300, align:"center",
|
||||
text:"_1_puzzle_end", x:60, y:220, w:300,
|
||||
hidden:true
|
||||
}
|
||||
|
||||
],
|
||||
|
||||
onstart:function(slideshow, state){
|
||||
|
||||
// Modify puzzle metric box
|
||||
var metric = slideshow.boxes.getChildByID("_1_puzzle_metric");
|
||||
metric.innerHTML = "";
|
||||
|
||||
var COLOR = "hsl(50, 100%, 50%)";
|
||||
|
||||
// label
|
||||
var label = document.createElement("div");
|
||||
metric.appendChild(label);
|
||||
label.style.color = COLOR;
|
||||
|
||||
// bar
|
||||
var bar_container = document.createElement("div");
|
||||
metric.appendChild(bar_container);
|
||||
bar_container.style.border = "2px solid "+COLOR;
|
||||
bar_container.style.width = "100%";
|
||||
bar_container.style.height = "1em";
|
||||
bar_container.style.position = "relative";
|
||||
var bar = document.createElement("div");
|
||||
bar_container.appendChild(bar);
|
||||
bar.style.background = COLOR;
|
||||
bar.style.height = "100%";
|
||||
bar.style.position = "absolute";
|
||||
|
||||
// Save this cool DOM into state
|
||||
state.metric_label = label;
|
||||
state.metric_bar = bar;
|
||||
|
||||
},
|
||||
|
||||
onupdate:function(slideshow, state){
|
||||
|
||||
// How many peeps?
|
||||
var sim = slideshow.simulations.sims[0];
|
||||
var peepCount = 0;
|
||||
sim.peeps.forEach(function(peep){
|
||||
if(peep.isPastThreshold) peepCount++;
|
||||
});
|
||||
|
||||
// Modify metric box!
|
||||
var label = getWords("_1_puzzle_metric") + " " + peepCount + " " + getWords("_1_puzzle_metric_2");
|
||||
state.metric_label.innerHTML = label;
|
||||
state.metric_bar.style.width = Math.round((peepCount/9)*100)+"%";
|
||||
|
||||
// Win only if EVERYONE hits threshold
|
||||
if(!state.won){
|
||||
|
||||
var sim = slideshow.simulations.sims[0];
|
||||
var peepCount = 0;
|
||||
sim.peeps.forEach(function(peep){
|
||||
if(peep.isPastThreshold) peepCount++;
|
||||
});
|
||||
if(peepCount==9){
|
||||
var boxes = slideshow.boxes;
|
||||
state.won = true;
|
||||
slideshow.boxes.showChildByID("_1_puzzle_end");
|
||||
boxes.hideChildByID("_1_puzzle_metric");
|
||||
boxes.showChildByID("_1_puzzle_end");
|
||||
sim.win();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -213,20 +279,50 @@ SLIDES.push(
|
|||
// post-puzzle ramble, introduce simple contagion
|
||||
{
|
||||
remove:[
|
||||
{ type:"box", id:"_1_puzzle" },
|
||||
{ type:"box", id:"_1_puzzle_metric" },
|
||||
{ type:"box", id:"_1_puzzle_end" }
|
||||
],
|
||||
move:[
|
||||
// shift sim to side
|
||||
{type:"sim", id:"puzzle", x:0}
|
||||
{type:"sim", id:"puzzle", x:20}
|
||||
],
|
||||
add:[
|
||||
// new text
|
||||
{
|
||||
type:"box",
|
||||
id:"_1_post_puzzle",
|
||||
text:"_1_post_puzzle", x:600, y:0, w:300
|
||||
text:"_1_post_puzzle", x:560, y:0, w:400
|
||||
},
|
||||
{
|
||||
type:"box",
|
||||
id:"_1_post_puzzle_bonus",
|
||||
text:"_1_post_puzzle_bonus", x:170, y:1000 // offscreen!
|
||||
},
|
||||
],
|
||||
|
||||
onupdate:function(slideshow, state){
|
||||
|
||||
// How many peeps passed?
|
||||
var sim = slideshow.simulations.sims[0];
|
||||
var peepCount = 0;
|
||||
sim.peeps.forEach(function(peep){
|
||||
if(peep.numFriends>0 && !peep.isPastThreshold) peepCount++;
|
||||
});
|
||||
|
||||
// Win Bonus
|
||||
if(!state.won){
|
||||
if(peepCount==9){
|
||||
var winbox = slideshow.boxes.getChildByID("_1_post_puzzle_bonus");
|
||||
if(winbox){
|
||||
winbox.style.top = "270px";
|
||||
state.won = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
);
|
|
@ -72,7 +72,7 @@ function fadeOut(container, dom){
|
|||
}
|
||||
|
||||
// Tween position
|
||||
function tweenPosition(from, to){
|
||||
function tweenPosition(from, to, callback){
|
||||
var x1 = from.x;
|
||||
var y1 = from.y;
|
||||
var x2 = to.x;
|
||||
|
@ -95,8 +95,25 @@ function tweenPosition(from, to){
|
|||
from.x = x1 + dx*easeInOutSine(t);
|
||||
from.y = y1 + dy*easeInOutSine(t);
|
||||
|
||||
// Callback
|
||||
if(callback){
|
||||
callback(from);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
/*function tweenBox(box, to){
|
||||
var from = {
|
||||
x: parseInt(box.style.left),
|
||||
y: parseInt(box.style.top)
|
||||
};
|
||||
to.x = (to.x===undefined) ? from.x : to.x;
|
||||
to.y = (to.y===undefined) ? from.y : to.y;
|
||||
tweenPosition(from, to, function(position){
|
||||
box.style.left = position.x + "px";
|
||||
box.style.top = position.y + "px";
|
||||
});
|
||||
}*/
|
||||
// From Robert Penner: http://robertpenner.com/scripts/easing_equations.txt
|
||||
function easeInOutSine(t) {
|
||||
return -1/2 * (Math.cos((Math.TAU/2)*t) - 1);
|
||||
|
|
|
@ -29,6 +29,6 @@ window.onload = function(){
|
|||
window.requestAnimationFrame(update);
|
||||
|
||||
// First slide!
|
||||
slideshow.gotoChapter("Networks");
|
||||
slideshow.gotoChapter("Networks-Majority");
|
||||
|
||||
}
|
|
@ -152,7 +152,7 @@ function Peep(config){
|
|||
|
||||
// Draw
|
||||
var radius = 25;
|
||||
var barWidth = radius*1.75;
|
||||
var barWidth = radius*2;
|
||||
var barHeight = 10;
|
||||
var bodyRotation = Math.TAU*Math.random();
|
||||
var PEEP_COLORS = [
|
||||
|
@ -214,17 +214,25 @@ function Peep(config){
|
|||
|
||||
// Say: Infected/Friends (% then n/n)
|
||||
ctx.translate(0,-43);
|
||||
ctx.font = '10px FuturaHandwritten';
|
||||
ctx.font = '9px FuturaHandwritten';
|
||||
ctx.fillStyle = uiColor;
|
||||
ctx.textBaseline = "middle";
|
||||
ctx.fontWeight = "bold";
|
||||
ctx.textAlign = "center";
|
||||
if(self.numFriends>0){
|
||||
|
||||
// #
|
||||
ctx.textAlign = "left";
|
||||
var labelNum = self.numInfectedFriends+"/"+self.numFriends;
|
||||
ctx.fillText(labelNum, -barWidth/2, 0);
|
||||
|
||||
// %
|
||||
ctx.textAlign = "right";
|
||||
var labelPercent = Math.round(100*(self.numInfectedFriends/self.numFriends)) + "%";
|
||||
var label = labelNum + "=" + labelPercent;
|
||||
ctx.fillText(label, 0, 0);
|
||||
ctx.fillText(labelPercent, barWidth/2, 0);
|
||||
|
||||
|
||||
}else{
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText("∅", 0, -1);
|
||||
}
|
||||
|
||||
|
|
|
@ -351,7 +351,7 @@ function Sim(config){
|
|||
frame: frame,
|
||||
spinSpeed: spinSpeed,
|
||||
spin: Math.random()*Math.TAU,
|
||||
g: 0.05+Math.random()*0.10
|
||||
g: 0.10+Math.random()*0.10
|
||||
};
|
||||
self.confetti.push(confetti);
|
||||
}
|
||||
|
|
|
@ -53,6 +53,8 @@ function Boxes(){
|
|||
box.innerHTML = getWords(config.text);
|
||||
if(config.align) box.style.textAlign = config.align;
|
||||
if(config.color) box.style.color = config.color;
|
||||
if(config.fontSize) box.style.fontSize = config.fontSize;
|
||||
if(config.lineHeight) box.style.lineHeight = config.lineHeight;
|
||||
}
|
||||
|
||||
// pics:
|
||||
|
|
|
@ -72,7 +72,8 @@ function Slideshow(){
|
|||
slide.move.forEach(function(childConfig){
|
||||
switch(childConfig.type){
|
||||
case "box":
|
||||
//self.boxes.add(childConfig);
|
||||
//var box = self.boxes.getChildByID(childConfig.id);
|
||||
//tweenBox(box, childConfig);
|
||||
break;
|
||||
case "sim":
|
||||
var sim = self.simulations.getChildByID(childConfig.id);
|
||||
|
|
Loading…
Reference in New Issue