even more words

This commit is contained in:
Nicky Case 2018-04-13 16:58:04 -04:00
parent 3189800db5
commit 29d396cd65
10 changed files with 425 additions and 108 deletions

View File

@ -72,7 +72,7 @@ Cursor is allowed to flow EVERYWHERE though...
</div>
<div chapter="Sandbox">
<span>5</span>
<span>5. Sandbox</span>
<span>5. Sandbox Mode</span>
</div>
<div chapter="Conclusion">
<span>6</span>
@ -115,23 +115,23 @@ Cursor is allowed to flow EVERYWHERE though...
<!-- 0. Introduction -->
<words id="_0_title">
the
<br>
WISDOM and/or MADNESS
<br>
of CROWDS
the
<br>
WISDOM and/or MADNESS
<br>
of CROWDS
</words>
<words id="_0_subtitle">
playing time: 30 min • by nicky case, april 2018
playing time: 30 min • by nicky case, april 2018
</words>
<words id="_0_loading">
loading...
loading...
</words>
<words id="_0_play">
let's play! &rarr;
let's play! &rarr;
</words>
<words id="_0_intro">
@ -139,9 +139,9 @@ let's play! &rarr;
<br><br><br>
Sir Isaac Newton was pretty sure he was one smart cookie.
Sir Isaac Newton was pretty sure he was a smart cookie.
I mean, after inventing calculus and a theory of gravity,
he should be smart enough to do some financial investing, right?
he should be clever enough to do some financial investing, right?
Anyway,
long story short, he lost $4,600,000 (in today's dollars)
in the nationwide speculation frenzy known as the South Sea Bubble of 1720.
@ -164,7 +164,7 @@ let's play! &rarr;
the <i>madness</i> of crowds.
And yet, just when you lose hope in humanity,
you see citizens rescuing each other in hurricanes,
communities creating solutions after tragedy,
communities creating solutions to problems,
movements of ordinary people fighting for a better world:
the <i>wisdom</i> of crowds!
@ -286,18 +286,22 @@ let's play! &rarr;
<br><br>
(BONUS BOX: a response to the books)
<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>“Contagions!” &rarr;</next>
<b>&larr; bonus challenge:</b> make everyone think
<i>less than half</i> of their friends are binge-drinkers
<!--<b>&larr; bonus challenge:</b> make everyone think
<i>less than half</i> of their friends are binge-drinkers-->
</words>
<words id="_1_post_puzzle_bonus">
<!--words id="_1_post_puzzle_bonus">
🙌 yay you did it 🙌
</words>
</words-->
<!-- 2. Simple Contagions -->
@ -339,10 +343,10 @@ let's play! &rarr;
<words id="_2_post_cascade">
This madness-spreading is called an <b>"information cascade"</b>.
Mr. Newton fell for such a cascade in 1720.
The world's markets fell for such a cascade in 2008.
The world's financial institutions fell for such a cascade in 2008.
But so what? You already knew ideas spread.
However, network scientists recently found a <i>new</i> kind of contagion,
one that spreads strangely. And they're called...
However, network scientists recently found a <i>new</i>, strange kind of contagion.
And they're called...
</words>
<words id="_2_post_cascade_end">
@ -373,7 +377,7 @@ let's play! &rarr;
<br><br>
<b>On the right, a person needs <i>at least 25%</i> of their friends to
<b>On the right, a person needs <i>AT LEAST 25%</i> of their friends to
adopt a complex fact (img) before they do.
Try "infecting" them all with <i>wisdom!</i> &rarr;</b>
@ -473,92 +477,197 @@ let's play! &rarr;
<br><br>
So, too connected, and ideas are crushed.
But, too disconnected, and ideas can't even spread.
So, how can we "design" a crowd, a group, a society with...
So, that's how to get crowd madness.
But how can we "design" for crowd <i>wisdom?</i>
In short, two words:
<next>...the right balance?</next>
<next>Bonding &amp; Bridging &rarr;</next>
</words>
<!-- 4. Bonding & Bridging -->
<words id="bonding_1">
&larr; Too few connections, and an idea can't spread.
<br>
Too many connections, and you get groupthink. &rarr;
</words>
<words id="bonding_2">
<b>
Find the sweet spot, and draw a group that's <i>just</i> connected enough
to spread a complex idea! &darr;
</b>
</words>
<words id="bonding_end">
This is called <b>bonding social capital</b>,
the strength of the connections <i>within</i> a single group.
But what about the connections...
<next wiggle>...<i>between</i> groups?</next>
</words>
<words id="bridging_1">
As you might have guessed, <b>bridging social capital</b>
is the strength of the connections <i>between</i> groups.
This is important, because it helps groups break out of their insular echo chambers!
<br>
<b>Try to "infect" everyone with wisdom:</b>
</words>
<words id="bridging_end">
Like bonding, bridging social capital has a sweet spot.
(optional challenge: draw a bridge so thick that the complex contagion
<i>can't</i> pass through it!)
<br><br>
Now that we know how to "design" connections <i>within</i> and <i>between</i> groups, let's...
<next wiggle>...do BOTH. &rarr;</next>
</words>
<words id="bb_1">
<b style="font-size:2em">FINAL PUZZLE!</b>
<br>
Draw connections within groups (bonding) and between groups (bridging)
<i>however</i> you want, to spread wisdom to everyone:
</words>
<words id="bb_2">
derp derp
<next wiggle>derp derp &rarr;</next>
// "SMALL WORLD"
// e pluribus unum
// unity in diversity?
// examples
// JFK story in footnote
</words>
<words id="bb_small_world">
</words>
<!-- 5. Sandbox -->
<words id="sandbox_caption">
<b>NOTE: "Sandbox Mode" is totally optional.</b>
Feel free to skip it, or play around!(*)
When you're done, let's recap...
</words>
<words id="sandbox_next">
<next>what we learnt today!</next>
</words>
<words id="sandbox_contagion">
Contagion:
</words>
<words id="sandbox_contagion_simple">
simple
</words>
<words id="sandbox_contagion_complex">
complex
</words>
<words id="sandbox_color_chooser">
The Contagion's Color:
</words>
<words id="sandbox_tool_chooser">
Select a tool...
</words>
<words id="sandbox_tool_pencil">
Draw Network
</words>
<words id="sandbox_tool_add">
Add Person
</words>
<words id="sandbox_tool_add_infected">
Add "Infected"
</words>
<words id="sandbox_tool_move">
Drag Person
</words>
<words id="sandbox_tool_delete">
Delete Person
</words>
<words id="sandbox_tool_clear">
<b>CLEAR IT ALL</b>
</words>
<words id="sandbox_shortcuts_label">
(...or, use keyboard shortcuts!)
</words>
<words id="sandbox_shortcuts">
[1]: Add Person &nbsp;&nbsp;&nbsp; [2]: Add "Infected"
<br>
[Space]: Drag &nbsp;&nbsp;&nbsp; [Backspace]: Delete
</words>
<!-- 6. Conclusion -->
<!-- recap and CONCRETE LIFE TAKE-AWAYS. mirror intro UI -->
<words id="conclusion_1">
IN CONCLUSION:
Contagion &amp; Connections.
<next>derp</next>
</words>
<words id="conclusion_2">
<div class="circle"><span>
in the final circle
recap all stories,
HUMAN BRAIN.
<next>derp</next>
</span></div>
</words>
<words id="conclusion_3">
<div class="circle"><span>
GOOD OMENS QUOTE.
<next>derp</next>
</span></div>
</words>
<!-- 7. Credits -->
<words id="_7_credits">
FWEEEEEE
CREDITS
<br>
CREDITS
<br>
CREDITS
<br>
CREDITS
<br>
CREDITS
</words>
<!-- x. misc -->
<words id="WIN">
WIN
WIN
</words>
<words id="sim_start">
&gt; start
&gt; start
</words>
<words id="sim_next">
&gt;&gt; next
&gt;&gt; next
</words>
<words id="sim_reset">
&olarr; reset
</words>
<words id="sandbox_contagion">
Contagion:
</words>
<words id="sandbox_contagion_simple">
simple
</words>
<words id="sandbox_contagion_complex">
complex
</words>
<words id="sandbox_color_chooser">
The Contagion's Color:
</words>
<words id="sandbox_tool_chooser">
Select a tool...
</words>
<words id="sandbox_tool_pencil">
Draw Network
</words>
<words id="sandbox_tool_add">
Add Person
</words>
<words id="sandbox_tool_add_infected">
Add "Infected"
</words>
<words id="sandbox_tool_move">
Move Person
</words>
<words id="sandbox_tool_delete">
Delete Person
</words>
<words id="sandbox_tool_clear">
<b>CLEAR IT ALL</b>
</words>
<words id="sandbox_shortcuts_label">
(...or, use keyboard shortcuts!)
</words>
<words id="sandbox_shortcuts">
[1]: Add Person
<br>
[2]: Add "Infected" Person
<br>
[Space]: Move Person
<br>
[Backspace]: Delete Person
&olarr; reset
</words>
<!-- - - - - - - - - - - - - -->
<!-- BONUS BOXES (footnotes) -->
<!-- - - - - - - - - - - - - -->
<!--
1. other kinds of connections
2. response to the books
3. other kinds of contagions
4. the limits - map, ecology, etc
5. books to read
-->
<bonus id="herp">
<title>HERP DERP</title>
<description>

View File

@ -1,4 +1,12 @@
// 0 - INTRODUCTION
// FOR REUSE:
var SPLASH_NETWORK = {
"contagion":0,
"peeps":[[-432,-121,0],[308,-101,0],[401,-224,0],[-226,392,0],[-217,-397,0],[303,356,0],[-70,-439,0],[280,-373,0],[35,-322,0],[125,299,0],[-549,-108,0],[489,118,0],[387,78,0],[189,385,0],[-425,-214,0],[69,602,0],[214,244,0],[305,108,0],[15,436,0],[389,236,0],[-271,-178,0],[-100,-308,0],[-106,440,0],[-346,4,0],[172,-372,0],[-575,-257,0],[457,-131,0],[-215,-242,0],[-318,-58,0],[22,323,0],[122,475,0],[388,461,0],[-492,27,0],[114,-303,0],[307,-252,0],[487,-347,0],[264,187,0],[231,-226,0],[-181,269,0],[-68,317,0],[-333,399,0],[-437,289,0],[-286,259,0],[-265,186,0],[-571,201,0],[-317,66,0],[618,35,0],[587,190,0],[574,-217,0],[-259,546,0],[-296,-307,0],[-618,53,0],[-127,-531,0],[489,336,0],[324,-9,0],[261,551,0],[-275,-535,0],[-396,-444,0],[-447,-333,0],[477,-26,0],[-406,486,0],[22,-464,0],[-3,-619,0],[-86,587,0],[382,-457,0],[266,-556,0],[119,-529,0],[-421,168,0]],
"connections":[[24,37,0],[37,1,0],[1,2,0],[26,1,0],[34,1,0],[13,9,0],[9,30,0],[30,29,0],[29,9,0],[9,18,0],[18,29,0],[18,30,0],[30,13,0],[13,29,0],[18,13,0],[36,19,0],[19,5,0],[19,12,0],[19,16,0],[17,19,0],[11,19,0],[14,25,0],[10,25,0],[10,14,0],[28,20,0],[20,0,0],[0,32,0],[8,21,0],[6,8,0],[21,27,0],[4,21,0],[4,27,0],[21,6,0],[39,3,0],[3,38,0],[38,22,0],[22,39,0],[39,38,0],[22,3,0],[6,4,0],[23,32,0],[42,40,0],[40,41,0],[41,42,0],[37,7,0],[37,33,0],[45,43,0],[47,46,0],[55,31,0],[57,56,0],[58,50,0],[59,54,0],[60,49,0],[62,52,0],[62,61,0],[63,15,0],[64,65,0],[65,66,0],[44,51,0],[48,35,0],[67,43,0],[67,45,0],[61,52,0],[23,0,0],[28,0,0]]
};
SLIDES.push(
{
@ -12,11 +20,7 @@ SLIDES.push(
type:"sim",
x:960/2, y:540/2,
fullscreen: true,
network: {
"contagion":0,
"peeps":[[-432,-121,0],[308,-101,0],[401,-224,0],[-226,392,0],[-217,-397,0],[303,356,0],[-70,-439,0],[280,-373,0],[35,-322,0],[125,299,0],[-549,-108,0],[489,118,0],[387,78,0],[189,385,0],[-425,-214,0],[69,602,0],[214,244,0],[305,108,0],[15,436,0],[389,236,0],[-271,-178,0],[-100,-308,0],[-106,440,0],[-346,4,0],[172,-372,0],[-575,-257,0],[457,-131,0],[-215,-242,0],[-318,-58,0],[22,323,0],[122,475,0],[388,461,0],[-492,27,0],[114,-303,0],[307,-252,0],[487,-347,0],[264,187,0],[231,-226,0],[-181,269,0],[-68,317,0],[-333,399,0],[-437,289,0],[-286,259,0],[-265,186,0],[-571,201,0],[-317,66,0],[618,35,0],[587,190,0],[574,-217,0],[-259,546,0],[-296,-307,0],[-618,53,0],[-127,-531,0],[489,336,0],[324,-9,0],[261,551,0],[-275,-535,0],[-396,-444,0],[-447,-333,0],[477,-26,0],[-406,486,0],[22,-464,0],[-3,-619,0],[-86,587,0],[382,-457,0],[266,-556,0],[119,-529,0],[-421,168,0]],
"connections":[[24,37,0],[37,1,0],[1,2,0],[26,1,0],[34,1,0],[13,9,0],[9,30,0],[30,29,0],[29,9,0],[9,18,0],[18,29,0],[18,30,0],[30,13,0],[13,29,0],[18,13,0],[36,19,0],[19,5,0],[19,12,0],[19,16,0],[17,19,0],[11,19,0],[14,25,0],[10,25,0],[10,14,0],[28,20,0],[20,0,0],[0,32,0],[8,21,0],[6,8,0],[21,27,0],[4,21,0],[4,27,0],[21,6,0],[39,3,0],[3,38,0],[38,22,0],[22,39,0],[39,38,0],[22,3,0],[6,4,0],[23,32,0],[42,40,0],[40,41,0],[41,42,0],[37,7,0],[37,33,0],[45,43,0],[47,46,0],[55,31,0],[57,56,0],[58,50,0],[59,54,0],[60,49,0],[62,52,0],[62,61,0],[63,15,0],[64,65,0],[65,66,0],[44,51,0],[48,35,0],[67,43,0],[67,45,0],[61,52,0],[23,0,0],[28,0,0]]
},
network: SPLASH_NETWORK,
options:{
splash: true,
randomStart: 20

View File

@ -294,13 +294,14 @@ SLIDES.push(
id:"_1_post_puzzle",
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?
@ -322,6 +323,7 @@ SLIDES.push(
}
}
*/
}

View File

@ -331,8 +331,7 @@ SLIDES.push(
{
type:"box",
text:"_3_groupthink",
x:460, y:0, w:500, h:540,
lineHeight:"1.4em"
x:460, y:0, w:500, h:540
},

View File

@ -6,22 +6,87 @@ SLIDES.push(
clear:true,
add:[
// Sim
// DRAWING FOR SOFT CONSTRAINTS...
{
type:"sim",
x:0, y:130,
fullscreen: true,
network: {
"contagion":0.25,
"peeps":[[92,52,1],[178,54,0],[25,131,0],[83,213,0],[174,213,0],[233,135,0],[421,50,1],[365,141,0],[423,230,0],[527,228,0],[586,135,0],[522,54,0],[772,50,1],[711,128,0],[770,211,0],[864,210,0],[933,126,0],[858,52,0]],
"connections":[[13,12,0],[12,17,0],[16,15,0],[15,14,0],[14,13,0],[13,16,0],[16,14,0],[14,17,0],[17,15,0],[15,12,0],[12,16,0],[15,13,0],[17,16,0],[14,12,0],[13,17,0],[0,1,0],[2,5,0],[4,3,0]]
"peeps":[
[90,-67,1],[181,-71,0],[36,21,0],[107,98,0],[206,92,0],[244,6,0],
[416,106,1],[352,181,0],[415,267,0],[528,268,0],[595,186,0],[532,107,0],
[769,-68,1],[701,6,0],[753,96,0],[855,110,0],[928,35,0],[867,-59,0]
],
"connections":[[13,12,0],[12,17,0],[16,15,0],[14,13,0],[13,16,0],[14,17,0],[17,15,0],[15,12,0],[12,16,0],[15,13,0],[17,16,0],[14,12,0],[13,17,0],[0,1,0],[2,5,0],[4,3,0],[15,14,0],[14,16,0]]
},
options:{
infectedFrame: 3,
scale: 1
}
},
]
// UI for the simulation
{
type:"box",
id:"ui",
x:370, y:445,
sim_ui:"blue"
},
// Words
{
type:"box",
text:"bonding_1",
x:230, y:0+15, w:500, h:70,
align:"center"
},
// Words 2
{
type:"box",
text:"bonding_2",
x:300, y:70+15, w:360, h:100,
align:"center"
},
// Words End
{
id:"end",
type:"box",
text:"bonding_end",
x:660, y:290, w:300, h:250,
hidden:true
}
],
onupdate:function(slideshow, state){
// If Peeps[6] to Peep[11] pass..
var sim = slideshow.simulations.sims[0];
var peepCount = 0;
for(var i=6; i<=11; i++){
var peep = sim.peeps[i];
if(peep.infected) peepCount++;
}
// Win
if(!state.ended){
if(peepCount==6){
var boxes = slideshow.boxes;
boxes.showChildByID("end", true);
state.ended = true;
sim.win({
x:330+5, y:160-120+5,
width:280, height:280
});
}
}
}
},
@ -30,15 +95,16 @@ SLIDES.push(
clear:true,
add:[
// Sim
{
type:"sim",
x:0, y:0,
x:-70, y:-30,
fullscreen: true,
network: {
"contagion":0.25,
"peeps":[[314,58,1],[418,87,0],[234,139,0],[277,234,0],[386,264,0],[460,180,0],[538,390,0],[617,309,0],[719,333,0],[766,432,0],[680,514,0],[572,491,0]],
"connections":[[7,6,0],[6,11,0],[11,10,0],[9,8,0],[8,7,0],[6,10,0],[6,9,0],[9,11,0],[11,7,0],[7,10,0],[9,7,0],[8,10,0],[10,9,0],[6,8,0],[8,11,0],[0,1,0],[2,5,0],[4,3,0]]
"peeps":[[182,92,1],[300,106,0],[107,196,0],[151,300,0],[301,309,0],[354,213,0],[441,384,0],[500,290,0],[644,304,0],[691,422,0],[621,510,0],[491,488,0]],
"connections":[[6,7,1],[7,8,1],[8,9,1],[9,10,1],[10,11,1],[11,6,1],[6,9,1],[9,11,1],[11,8,1],[8,10,1],[10,7,1],[7,9,1],[11,7,1],[6,10,1],[6,8,1],[0,1,1],[1,5,1],[5,4,1],[4,3,1],[2,3,1],[2,0,1],[3,1,1]]
},
options:{
infectedFrame: 3,
@ -46,7 +112,53 @@ SLIDES.push(
startUncuttable: true
}
},
]
// UI for the simulation
{
type:"box",
id:"ui",
x:95, y:390,
sim_ui:"blue"
},
// Words
{
type:"box",
text:"bridging_1",
x:340, y:30, w:620, h:120
},
// Words End
{
id:"end",
type:"box",
text:"bridging_end",
x:660, y:180, w:300, h:360,
hidden:true
}
],
onupdate:function(slideshow, state){
// If ALL infected...
var sim = slideshow.simulations.sims[0];
var peepCount = 0;
sim.peeps.forEach(function(peep){
if(peep.infected) peepCount++;
});
// Win
if(!state.ended){
if(peepCount==sim.peeps.length){
var boxes = slideshow.boxes;
boxes.showChildByID("end", true);
state.ended = true;
sim.win();
}
}
}
},
@ -55,15 +167,16 @@ SLIDES.push(
clear:true,
add:[
// Sim
// use a DRAWING to impose SOFT CONSTRAINTS
{
type:"sim",
x:0, y:0,
x:150, y:0,
fullscreen: true,
network: {
"contagion":0.25,
"peeps":[[474,46,1],[578,100,0],[388,94,0],[568,195,0],[392,190,0],[486,233,0],[273,318,0],[183,363,0],[183,447,0],[256,498,0],[355,376,0],[347,469,0],[630,367,0],[696,308,0],[791,360,0],[784,442,0],[725,495,0],[637,450,0]],
"peeps":[[485,50,1],[581,97,0],[389,101,0],[579,200,0],[399,193,0],[487,243,0],[290,312,0],[201,358,0],[196,446,0],[278,509,0],[381,374,0],[367,469,0],[596,370,0],[680,315,0],[778,354,0],[784,454,0],[700,506,0],[604,459,0]],
"connections":[]
},
options:{
@ -72,7 +185,54 @@ SLIDES.push(
startUncuttable: true
}
},
]
// UI for the simulation
{
type:"box",
id:"ui",
x:70, y:190,
sim_ui:"blue"
},
// Words
{
type:"box",
text:"bb_1",
x:0, y:10, w:350, h:170
},
// Words
{
id:"end",
type:"box",
text:"bb_2",
x:0, y:310, w:300, h:230,
//hidden: true
}
],
onupdate:function(slideshow, state){
// If ALL infected...
var sim = slideshow.simulations.sims[0];
var peepCount = 0;
sim.peeps.forEach(function(peep){
if(peep.infected) peepCount++;
});
// Win
if(!state.ended){
if(peepCount==sim.peeps.length){
var boxes = slideshow.boxes;
boxes.showChildByID("end", true);
state.ended = true;
sim.win();
}
}
}
},

View File

@ -12,10 +12,10 @@ SLIDES.push(
x:0, y:0,
fullscreen: true,
network: {
"contagion":0,
"peeps":[[443,213,1],[570,309,0],[686,194,0]],
"contagion":0.25,
"peeps":[[506,195,1],[621,270,0],[724,194,0]],
"connections":[[0,1,0],[1,2,0]]
}
},
},
// The Sandbox UI
@ -28,9 +28,21 @@ SLIDES.push(
// Simulation UI
{
type:"box",
x:35, y:450,
x:35, y:365,
sim_ui:"red"
}
},
// Words
{
type:"box",
text:"sandbox_caption",
x:70, y:470, w:550, h:70
},
{
type:"box",
text:"sandbox_next",
x:605, y:455, w:300, h:100
},
]

View File

@ -1,7 +1,36 @@
// 0 - INTRODUCTION
SLIDES.push(
{
/*{
chapter: "Conclusion",
clear:true
}
}*/
{
chapter: "Conclusion",
clear:true,
add:[
// Splash
{
type:"sim",
x:960/2, y:540/2,
fullscreen: true,
network: SPLASH_NETWORK,
options:{
splash: true,
randomStart: 20
}
},
// Words
{
type:"box",
text:"conclusion_2", x:210, y:0, w:540, h:540, align:"center"
},
]
},
);

View File

@ -29,6 +29,6 @@ window.onload = function(){
window.requestAnimationFrame(update);
// First slide!
slideshow.gotoChapter("Complex-Groupthink");
slideshow.gotoChapter("Sandbox");
}

View File

@ -315,7 +315,7 @@ function Sim(config){
self.confetti = [];
self.winWord = {x:0, y:0, ticker:-1};
self.win = function(){
self.win = function(bounds){
// ONLY ONCE
if(self.wonBefore) return;
@ -324,7 +324,7 @@ function Sim(config){
// Get center of peeps
var fullscreenOffsetX = config.x + simOffset.x;
var fullscreenOffsetY = config.y + simOffset.y;
var bounds = getBoundsOfPoints(self.peeps);
bounds = bounds || getBoundsOfPoints(self.peeps); // OPTIONAL BOUNDS
var cx = bounds.x + bounds.width/2;
var cy = bounds.y + bounds.height/2;
cx += fullscreenOffsetX;

View File

@ -44,9 +44,11 @@ function SandboxUI(container){
// Choose Color of Peeps //
///////////////////////////
var GAP = "0.5em";
var colorChooserLabel = document.createElement("div");
colorChooserLabel.innerHTML = getWords("sandbox_color_chooser");
colorChooserLabel.style.marginTop = "1em";
colorChooserLabel.style.marginTop = GAP;
var colorChooser = new ChooseOne({
options:[
1, // red
@ -75,7 +77,7 @@ function SandboxUI(container){
var toolChooserLabel = document.createElement("div");
toolChooserLabel.innerHTML = getWords("sandbox_tool_chooser");
toolChooserLabel.style.marginTop = "1em";
toolChooserLabel.style.marginTop = "0.25em"; //GAP;
var tools = [
"pencil",
"add",
@ -122,7 +124,7 @@ function SandboxUI(container){
var shortcutsLabel = document.createElement("div");
shortcutsLabel.innerHTML = getWords("sandbox_shortcuts_label");
shortcutsLabel.id = "sandbox_shortcuts_label";
shortcutsLabel.style.marginTop = "1em";
shortcutsLabel.style.marginTop = GAP;
var shortcuts = document.createElement("div");
shortcuts.innerHTML = getWords("sandbox_shortcuts");
shortcuts.id = "sandbox_shortcuts";