playtestable beta again

css/index.css

@@ -409,9 +409,9 @@ ref:hover:before{
 }
 
 /* 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 */

index.html

@@ -54,40 +54,44 @@ MY "WHY" FOR MAKING THIS:
 
 				<!-- The chapters -->
 				<div chapter="Introduction">
-					<span>1</span>
-					<span>1. Introduction</span>
+					<span>0</span>
+					<span>0. Introduction</span>
 				</div>
 				<div chapter="Networks">
-					<span>2</span>
-					<span>2. Connections</span>
+					<span>1</span>
+					<span>1. Connections</span>
 				</div>
 				<div chapter="Simple">
-					<span>3</span>
-					<span>3. Contagions</span>
+					<span>2</span>
+					<span>2. Contagions</span>
 				</div>
 				<div chapter="Complex">
-					<span>4</span>
-					<span>4. Complex Contagions</span>
+					<span>3</span>
+					<span>3. Complex Contagions</span>
 				</div>
 				<div chapter="BB">
-					<span>5</span>
-					<span>5. Bonding &amp; Bridging</span>
+					<span>4</span>
+					<span>4. Bonding &amp; Bridging</span>
 				</div>
 				<div chapter="SmallWorld">
-					<span>6</span>
-					<span>6. It's A Small World</span>
+					<span>5</span>
+					<span>5. It's A Small World</span>
 				</div>
-				<div chapter="Sandbox">
+				<!--div chapter="Sandbox">
 					<span>7</span>
 					<span>7. Sandbox Mode</span>
-				</div>
+				</div-->
 				<div chapter="Conclusion">
-					<span>8</span>
-					<span>8. In Conclusion...</span>
+					<span>6</span>
+					<span>6. In Conclusion...</span>
 				</div>
 				<div chapter="Credits">
-					<span>9</span>
-					<span>9. Credits</span>
+					<span>7</span>
+					<span>7. Credits</span>
+				</div>
+				<div chapter="Sandbox">
+					<span>★</span>
+					<span>★ Sandbox Mode! ★</span>
 				</div>
 
 				<!-- A divider -->
@@ -247,9 +251,9 @@ MY "WHY" FOR MAKING THIS:
 
 <words id="networks_threshold">
 
-	But social connections do more than just make pretty pictures.
-	People <i>look to</i> their social connections to understand their social world.
-	In this example, people look to their peers to
+	Now, social connections are for more than just making pretty pictures.
+	People <i>look to</i> their social connections to understand their world.
+	For example, people look to their peers to
 	find out <b>what % of their friends</b> (not counting themselves) are,
 	say, binge-drinkers. <icon yellow></icon>
 
@@ -479,7 +483,7 @@ MY "WHY" FOR MAKING THIS:
 </words>
 
 <words id="complex_post_cascade">
-	Now, you may be thinking that you just need to keep adding connections to spread any contagion,
+	Now, you may think that you just need to keep adding connections to spread any contagion,
 	"complex" or "simple", good or bad, wise or mad.
 	But is that really so? Well, let's revisit...
 </words>
@@ -488,10 +492,9 @@ MY "WHY" FOR MAKING THIS:
 </words>
 
 <words id="complex_prevent">
-	Now, let's do the <i>opposite</i> of everything we've done before.
-	If you hit "start" below now, the complex contagion <icon blue></icon> will just spread to everyone.
+	If you hit "start" below, the complex contagion <icon blue></icon> will just spread to everyone.
 	No surprise there.
-	But now, here's your challenge:
+	But now, let's do the <i>opposite</i> of everything we've done before:
 	<b>draw a network to <i>prevent</i> the contagion from spreading to everyone! &darr;</b>
 </words>
 
@@ -552,18 +555,19 @@ MY "WHY" FOR MAKING THIS:
 </words>
 
 <words id="bonding_end">
-	The connections <i>within</i> a group is called <b>bonding social capital</b><ref id="social_capital"></ref>.
+	Simple enough!
+	The number of connections <i>within</i> a group is called <b>bonding social capital</b><ref id="social_capital"></ref>.
 	But what about the connections...
 	<next wiggle>...<i>between</i> groups?</next>
 </words>
 
 <words id="bridging_1">
 	As you may have already guessed, 
-	the connections <i>between</i> groups is called
+	the number of connections <i>between</i> groups is called
 	<b>bridging social capital</b>.
 	This is important, because it helps groups break out of their insular echo chambers!
 	<br>
-	<b>Try to "infect" everyone with complex wisdom:</b>
+	<b>Build a bridge, to "infect" everyone with complex wisdom:</b>
 </words>
 
 <words id="bridging_end">
@@ -571,7 +575,7 @@ MY "WHY" FOR MAKING THIS:
 	(extra challenge: try drawing a bridge so thick that the complex contagion
 	<i>can't</i> pass through it!)
 	Now that we know how to "design" connections <i>within</i> and <i>between</i> groups, let's...
-	<next wiggle>...do BOTH. &rarr;</next>
+	<next wiggle>...do BOTH at the same time!</next>
 </words>
 
 <words id="bb_1">
@@ -584,8 +588,8 @@ MY "WHY" FOR MAKING THIS:
 </words>
 <words id="bb_2">
 
-	You just drew a very special kind of network!
-	Networks with high bonding and bridging
+	Congrats, you've just drawn a very special kind of network!
+	Networks with the right mix of bonding and bridging
 	are profoundly important, and they're called...
 	<next wiggle>“Small World Networks” &rarr;</next>
 
@@ -595,7 +599,7 @@ MY "WHY" FOR MAKING THIS:
 	<i>"Unity without uniformity". "Diversity without division". "E Pluribus Unum: out of many, one".</i>
 	<br>
 	No matter how it's phrased,
-	people -- across times and cultures -- have often arrived at the same piece of wisdom:
+	people across times and cultures often arrive at the same piece of wisdom:
 	<b>
 	a healthy society needs a sweet spot of bonds <i>within</i> groups
 	and bridges <i>between</i> groups.
@@ -624,7 +628,7 @@ MY "WHY" FOR MAKING THIS:
 	our neurons are connected<ref id="swn_neurons"></ref>,
 	fosters collective creativity<ref id="swn_creativity"></ref>
 	and problem-solving<ref id="swn_social_physics"></ref>,
-	and even once helped US President John F Kennedy (barely) avoid nuclear war!<ref id="swn_jfk"></ref>
+	and even once helped US President John F. Kennedy (barely) avoid nuclear war!<ref id="swn_jfk"></ref>
 	So, yeah, small worlds are a big deal.
 
 </words>
@@ -741,8 +745,8 @@ MY "WHY" FOR MAKING THIS:
 	    right: 0px;
 	    text-align: right;
 	">
-		so, what about our question from the very beginning?
-		why <i>do</i> some crowds turn to...
+		So, what about our question from the very beginning?
+		Why <i>do</i> some crowds turn to...
 	</div>
 	<div style="
 	    width: 300px;
@@ -761,7 +765,7 @@ MY "WHY" FOR MAKING THIS:
 		<br>
 		From Newton to NASA to network science, we've covered a lot here today.
 		Long story short, the madness of crowds is not necessarily due to the
-		<i>individual people</i>, but how we're trapped in a network's sticky web.
+		<i>individual people</i>, but due to how we're trapped in a network's sticky web.
 
 		<br><br>
 
@@ -776,7 +780,7 @@ MY "WHY" FOR MAKING THIS:
 		<br><br>
 
 		We can weave a wise web.
-		Sure, it's harder than drawing lines on a screen...
+		Sure, it's harder than doodling lines on a screen...
 		<next>...but so, so worth it.</next>
 
 	</span></div>
@@ -790,6 +794,7 @@ MY "WHY" FOR MAKING THIS:
 	</i>
 	<br>
 	<span style="position:relative; top:5px">~</span> Neil Gaiman &amp; Terry Pratchett
+	<div style="height:0.8em"></div>
 	<next small>&lt;3</next>
 </words>
 
@@ -1049,16 +1054,16 @@ MY "WHY" FOR MAKING THIS:
 <script src="js/sim/ConnectorCutter.js"></script>
 <script src="js/sim/Simulations.js"></script>
 
-<script src="js/chapters/0_Preloader.js"></script>
-<script src="js/chapters/1_Introduction.js"></script>
-<script src="js/chapters/2_Networks.js"></script>
-<script src="js/chapters/3_Simple_Contagion.js"></script>
-<script src="js/chapters/4_Complex_Contagion.js"></script>
-<script src="js/chapters/5_Bonding_And_Bridging.js"></script>
-<script src="js/chapters/6_Small_World.js"></script>
-<script src="js/chapters/7_Sandbox.js"></script>
-<script src="js/chapters/8_Conclusion.js"></script>
-<script src="js/chapters/9_Credits.js"></script>
+<script src="js/chapters/A_Preloader.js"></script>
+<script src="js/chapters/B_Introduction.js"></script>
+<script src="js/chapters/C_Networks.js"></script>
+<script src="js/chapters/D_Simple_Contagion.js"></script>
+<script src="js/chapters/E_Complex_Contagion.js"></script>
+<script src="js/chapters/F_Bonding_And_Bridging.js"></script>
+<script src="js/chapters/G_Small_World.js"></script>
+<script src="js/chapters/H_Conclusion.js"></script>
+<script src="js/chapters/I_Credits.js"></script>
+<script src="js/chapters/J_Sandbox.js"></script>
 
 <script src="js/main.js"></script>
 

js/chapters/G_Small_World.js

@@ -46,7 +46,7 @@ SLIDES.push(
 			id:"end",
 			type:"box",
 			text:"bb_2",
-			x:0, y:310, w:300, h:230,
+			x:0, y:270, w:300, h:230,
 			hidden: true
 		}
 

js/chapters/H_Conclusion.js

@@ -7,6 +7,23 @@ SLIDES.push(
 
 	add:[
 
+		// Sim
+		{
+			type:"sim",
+			x:0, y:0,
+			fullscreen: true,
+			network: {
+				"contagion":0,
+				"peeps":[[50,175,1],[194,187,0],[129,261,0],[46,303,0],[68,381,0],[151,408,0],[195,329,0]],
+				"connections":[[6,2,0],[2,3,0],[3,4,0],[4,5,0],[5,6,0],[6,3,0],[3,5,0],[5,2,0],[2,4,0],[4,6,0],[1,0,0]]
+			},
+			options:{
+				infectedFrame: 3,
+				scale: 1,
+				_wisdom: true
+			}
+		},
+
 		// Words
 		/*{
 			type:"box",

js/chapters/J_Sandbox.js

@@ -32,7 +32,7 @@ SLIDES.push(
 		},
 
 		// Words
-		{
+		/*{
 			type:"box",
 			text:"sandbox_caption",
 			x:70, y:470, w:550, h:70
@@ -41,7 +41,7 @@ SLIDES.push(
 			type:"box",
 			text:"sandbox_next",
 			x:605, y:455, w:300, h:100
-		},
+		},*/
 
 
 	]

js/slideshow/Preloader.js

@@ -15,8 +15,8 @@ subscribe("prepreload", function(){
 			var pre_preloader = $("#pre_preloader");
 			pre_preloader.parentNode.removeChild(pre_preloader);
 			
-			//slideshow.gotoChapter("Preloader");
-			slideshow.gotoChapter("SmallWorld-Explanation");
+			slideshow.gotoChapter("Preloader");
+			//slideshow.gotoChapter("SmallWorld-Explanation");
 
 			publish("preload");
 		}