PLAYTESTABLE AS FAR AS I CARE

css/index.css

@@ -96,6 +96,14 @@ b, strong{
     background-position: 0% 0%;
 }
 
+/* Peep Icon */
+.peep_icon{
+	height:1em;
+	position: relative;
+    top: 3px;
+    transform: scale(1.2);
+}
+
 /* Sim UI */
 .sim_ui{
 	position: absolute;

index.html

@@ -249,7 +249,7 @@ MY "WHY" FOR MAKING THIS:
 	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)
+	say, binge-drinkers. <icon yellow></icon>
 
 </words>
 
@@ -307,7 +307,7 @@ MY "WHY" FOR MAKING THIS:
 	<b style="font-size:2em">PUZZLE TIME!</b>
 	<br>
 	Fool <i>everyone</i> into thinking
-	the majority of their friends are binge-drinkers (img)
+	the majority of their friends are binge-drinkers <icon yellow></icon>
 	(even though binge-drinkers are outnumbered 2-to-1)
 
 </words>
@@ -343,7 +343,7 @@ MY "WHY" FOR MAKING THIS:
 <!-- Simple Contagions -->
 
 <words id="simple_simple">
-	Below, we start with one person (img) who has some information.
+	Below, we start with one person <icon red></icon> who has some information.
 	Some <i>mis</i>information. "Fake news", as the cool kids say.
 	And every day, that person spreads the rumor to their friends.
 	And they spread it to <i>their</i> friends. And so on.
@@ -396,7 +396,7 @@ MY "WHY" FOR MAKING THIS:
 
 		Truth may be stranger than fiction, but it doesn't sell as well.
 
-		<div style="height:0.9em"></div>
+		<div style="height:0.7em"></div>
 
 		<b>Simple contagions</b>, like juicy rumors or hot takes,
 		only need one "infected" friend to spread.
@@ -404,7 +404,7 @@ MY "WHY" FOR MAKING THIS:
 		just that one exposure <i>can</i> be enough to spread.
 		This, by the way, is how <i>biological</i> contagions (like bacteria &amp; viruses) work. 
 
-		<div style="height:0.9em"></div>
+		<div style="height:0.7em"></div>
 
 		<b>Complex contagions</b> are weirder.
 		Some things -- like norms, habits and hard-to-accept ideas --
@@ -412,10 +412,10 @@ MY "WHY" FOR MAKING THIS:
 		They need not a minimum <i>number</i> of friends to spread,
 		but a minimum <i>percentage</i> of friends to spread!<ref id="complex"></ref>
 
-		<div style="height:0.9em"></div>
+		<div style="height:0.7em"></div>
 
 		<b>On the right, a person needs <i>AT LEAST 25%</i> of their friends to
-		adopt a complex fact (img) before they do.
+		adopt a complex fact <icon blue></icon> before they do.
 		Try "infecting" them all with <i>wisdom!</i> &rarr;</b>
 
 	</span>
@@ -450,7 +450,7 @@ MY "WHY" FOR MAKING THIS:
 </words>
 
 <words id="complex_cascade">
-	You did this before, but now, with a <i>complex</i> contagion (img), it'll be tougher...
+	You did this before, but now, with a <i>complex</i> contagion <icon blue></icon>, it'll be tougher...
 	<b>Try to "infect" everyone with complex wisdom! &darr;</b>
 	(feel free to just hit 'start' and <i>try</i> as many solutions as you want)
 </words>
@@ -460,7 +460,7 @@ MY "WHY" FOR MAKING THIS:
 </words>
 
 <words id="complex_post_cascade">
-	Now, you may think: so what, complex contagions () are just simple contagions ()
+	Now, you may think: so what, complex contagions <icon blue></icon> are just simple contagions <icon red></icon>
 	that need more connections?
 	Not so fast!
 	The difference between "complex" and "simple" is a difference in <i>kind</i>, not degree.

js/chapters/2_Networks.js

@@ -73,20 +73,21 @@ SLIDES.push(
 		// SHOW/HIDE INSTRUCTIONS
 		var boxes = slideshow.boxes;
 		// If connections went UP, hide "connect" instructions
-		if(state.currConnections > state.lastConnections){
+		if(state.currConnections > state.lastConnections && !state.canConnect){
 			state.canConnect = true;
-			boxes.hideChildByID("connect_words");
-			boxes.hideChildByID("connect_pic");
+			boxes.removeChildByID("connect_words", true);
+			boxes.removeChildByID("connect_pic", true);
 		}
-		// If connections went DOWN, hide "connect" instructions
-		if(state.currConnections < state.lastConnections){
+		// If connections went DOWN, hide "disconnect" instructions
+		if(state.currConnections < state.lastConnections && !state.canDisconnect){
 			state.canDisconnect = true;
-			boxes.hideChildByID("disconnect_words");
-			boxes.hideChildByID("disconnect_pic");
+			boxes.removeChildByID("disconnect_words", true);
+			boxes.removeChildByID("disconnect_pic", true);
 		}
 		// If did both, show end
-		if(state.canConnect && state.canDisconnect){
-			boxes.showChildByID("end_words");
+		if(state.canConnect && state.canDisconnect && !state.BUTTON_SHOWED){
+			state.BUTTON_SHOWED = true;
+			boxes.showChildByID("end_words", true);
 			//boxes.showChildByID("end_button");
 		}
 

js/chapters/6_Small_World.js

@@ -102,6 +102,10 @@ SLIDES.push(
 			fontSize:"30px", lineHeight:"30px",
 			align:"center"
 		},
+		{
+			type:"box",
+			img:"sprites/small_world.png", x:-10, y:95, w:970, h:284
+		},
 		{
 			type:"box",
 			text:"bb_small_world_5", x:0, y:360, w:640, h:180,

js/chapters/8_Conclusion.js

@@ -12,7 +12,11 @@ SLIDES.push(
 			type:"box",
 			id:"conclusion_1",
 			text:"conclusion_1", x:0, y:0, w:960, h:540
-		}
+		},
+		{
+			type:"box",
+			img:"sprites/conclusion.png", x:-10, y:-15, w:470, h:562
+		},
 
 	]
 

js/sim/ConnectorCutter.js

@@ -36,7 +36,7 @@ function ConnectorCutter(config){
 				if(mouse.justPressed && self.state===0){
 					
 					// Clicked on a peep?
-					var peepClicked = self.sim.getHoveredPeep(0);
+					var peepClicked = self.sim.getHoveredPeep(20);
 					if(peepClicked){
 						self.state = 1; // START CONNECTING
 						self.connectFrom = peepClicked;
@@ -69,7 +69,7 @@ function ConnectorCutter(config){
 			// In "NORMAL" state... tell Pencil what frame to go to
 			if(self.state==0){
 				if(!Simulations.IS_RUNNING){
-					var peepHovered = self.sim.getHoveredPeep(0);
+					var peepHovered = self.sim.getHoveredPeep(20);
 					pencil.gotoFrame( peepHovered ? 1 : 0 );
 				}else{
 					pencil.gotoFrame(0);

js/slideshow/Boxes.js

@@ -107,6 +107,21 @@ function Boxes(){
 			};
 		});
 
+		// Replace icons
+		box.querySelectorAll("icon").forEach(function(icon){
+
+			// Create next button
+			var name = icon.getAttributeNames()[0];
+			var src = "sprites/icons/"+name+".png";
+			var img = new Image();
+			img.src = src;
+			img.className = "peep_icon";
+
+			// Replace it in parent!
+			icon.parentNode.replaceChild(img, icon);
+
+		});
+
 		// Add to array
 		self.boxes.push(box);
 
@@ -133,10 +148,7 @@ function Boxes(){
 			fadeIn(self.dom, toShow);
 		}
 	};
-	self.hideChildByID = function(id){
-		var toHide = self.getChildByID(id);
-		toHide.style.display = "none";
-	};
+	
 	self.removeChildByID = function(id, withFade){
 		
 		var removeBox = self.getChildByID(id);

js/slideshow/Preloader.js

@@ -14,7 +14,7 @@ subscribe("prepreload", function(){
 		if(progress==1){
 			var pre_preloader = $("#pre_preloader");
 			pre_preloader.parentNode.removeChild(pre_preloader);
-			slideshow.gotoChapter("Networks-Threshold");
+			slideshow.gotoChapter("Preloader");
 			publish("preload");
 		}
 	});