diff --git a/js/activity.js b/js/activity.js
diff --git a/js/artwork.js b/js/artwork.js
diff --git a/js/basicblocks.js b/js/basicblocks.js
@@ -52,7 +52,7 @@ var NAMEDICT = {
 // from bottom to top, i.e., the block at the top of a palette will be
 // the last block added to a palette.
 
-function initBasicProtoBlocks(palettes, blocks) {
+const initBasicProtoBlocks = (palettes, blocks) => {
     blocks.palettes = palettes;
 
     setupRhythmBlockPaletteBlocks();

diff --git a/js/block.js b/js/block.js
diff --git a/js/blockfactory.js b/js/blockfactory.js
diff --git a/js/blocks/ActionBlocks.js b/js/blocks/ActionBlocks.js
@@ -1,4 +1,4 @@
-function setupActionBlocks() {
+setupActionBlocks = () => {
     class ReturnBlock extends FlowBlock {
         constructor() {
             super("return");
@@ -69,7 +69,7 @@ function setupActionBlocks() {
                 let xmlHttp = new XMLHttpRequest();
                 xmlHttp.open("POST", outurl, true);
                 // Call a function when the state changes.
-                xmlHttp.onreadystatechange = function() {
+                xmlHttp.onreadystatechange = () => {
                     if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
                         alert(xmlHttp.responseText);
                     }
@@ -252,7 +252,7 @@ function setupActionBlocks() {
                         }
                     }
 
-                    let __listener = function(event) {
+                    let __listener = (event) => {
                         logo.backward[turtle].pop();
                     };
 
@@ -636,7 +636,7 @@ function setupActionBlocks() {
             if (!(args[1] in logo.actions)) {
                 logo.errorMsg(NOACTIONERRORMSG, blk, args[1]);
             } else {
-                let __listener = function(event) {
+                let __listener = (event) => {
                     if (logo.turtles.turtleList[turtle].running) {
                         let queueBlock = new Queue(
                             logo.actions[args[1]],
@@ -838,7 +838,7 @@ function setupActionBlocks() {
                     }
                 }
 
-                let __listener = function(event) {
+                let __listener = (event) => {
                     logo.backward[turtle].pop();
                 };
 

diff --git a/js/blocks/BooleanBlocks.js b/js/blocks/BooleanBlocks.js
@@ -1,4 +1,4 @@
-function setupBooleanBlocks() {
+setupBooleanBlocks = () => {
     class NotBlock extends BooleanBlock {
         constructor() {
             super("not");

diff --git a/js/blocks/BoxesBlocks.js b/js/blocks/BoxesBlocks.js
@@ -1,4 +1,4 @@
-function setupBoxesBlocks() {
+setupBoxesBlocks = () => {
     class IncrementBlock extends FlowBlock {
         constructor(name) {
             super(name || "increment");

diff --git a/js/blocks/DrumBlocks.js b/js/blocks/DrumBlocks.js
@@ -1,4 +1,4 @@
-function setupDrumBlocks() {
+setupDrumBlocks = () => {
     class NoiseNameBlock extends ValueBlock {
         constructor() {
             super("noisename");
@@ -120,7 +120,7 @@ function setupDrumBlocks() {
         }
     }
 
-    function _createPlayDrumMacros() {
+    _createPlayDrumMacros = () => {
         class PlayDrumMacroBlock extends FlowBlock {
             constructor(name, displayName, isDrum, drumName) {
                 if (displayName === undefined) {
@@ -223,7 +223,7 @@ function setupDrumBlocks() {
             let listenerName = "_mapdrum_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.drumStyle[turtle].pop();
             };
 
@@ -301,7 +301,7 @@ function setupDrumBlocks() {
             let listenerName = "_setdrum_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 let drumname = logo.drumStyle[turtle].pop();
                 logo.pitchDrumTable[turtle] = {};
             };
@@ -427,7 +427,7 @@ function setupDrumBlocks() {
 
                 let noteBeatValue = 4;
 
-                __callback = function() {
+                __callback = () => {
                     let j = logo.inNoteBlock[turtle].indexOf(blk);
                     logo.inNoteBlock[turtle].splice(j, 1);
                 };

diff --git a/js/blocks/EnsembleBlocks.js b/js/blocks/EnsembleBlocks.js
@@ -4,7 +4,7 @@
  * @param   {number|string} targetTurtle
  * @returns {number|object}
  */
-function _getTargetTurtle(turtles, targetTurtle) {
+_getTargetTurtle = (turtles, targetTurtle) => {
     // We'll compare the names as strings.
     if (typeof targetTurtle === "number") {
         targetTurtle = targetTurtle.toString();
@@ -28,7 +28,7 @@ function _getTargetTurtle(turtles, targetTurtle) {
     return null;
 }
 
-function _blockFindTurtle(logo, turtle, blk, receivedArg) {
+_blockFindTurtle = (logo, turtle, blk, receivedArg) => {
     let cblk = logo.blocks.blockList[blk].connections[1];
     if (cblk === null) {
         console.log("Could not find connecting block");
@@ -44,7 +44,7 @@ function _blockFindTurtle(logo, turtle, blk, receivedArg) {
     ];
 }
 
-function setupEnsembleBlocks() {
+setupEnsembleBlocks = () => {
     class TurtleHeapBlock extends LeftBlock {
         constructor() {
             super("turtleheap", _("mouse index heap"));
@@ -779,7 +779,7 @@ function setupEnsembleBlocks() {
                     [1, "setturtlename2", 0, 0, [0, 2, null]],
                     [2, ["text", { value: turtleName }], 0, 0, [1]]
                 ];
-                let __afterLoad = function() {
+                let __afterLoad = () => {
                     console.debug("AFTERLOAD");
                     let thisTurtle = logo.blocks.blockList[blockNumber].value;
                     logo.initTurtle(thisTurtle);

diff --git a/js/blocks/ExtrasBlocks.js b/js/blocks/ExtrasBlocks.js
@@ -1,4 +1,4 @@
-function setupExtrasBlocks() {
+setupExtrasBlocks = () => {
     class FloatToStringBlock extends LeftBlock {
         constructor() {
             super("float2string", _("fraction"));
@@ -685,7 +685,7 @@ function setupExtrasBlocks() {
 
             url = args[0];
 
-            function ValidURL(str) {
+            ValidURL = (str) => {
                 let pattern = new RegExp(
                     "^(https?:\\/\\/)?" + // protocol
                     "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name

diff --git a/js/blocks/FlowBlocks.js b/js/blocks/FlowBlocks.js
@@ -1,4 +1,4 @@
-function setupFlowBlocks() {
+ setupFlowBlocks = () => {
     class BackwardBlock extends FlowClampBlock {
         constructor() {
             super("backward");
@@ -44,7 +44,7 @@ function setupFlowBlocks() {
                 }
             }
 
-            let __listener = function() {
+            let __listener = () => {
                 logo.backward[turtle].pop();
             };
 
@@ -106,7 +106,7 @@ function setupFlowBlocks() {
                 let listenerName = "_duplicate_" + turtle;
                 logo._setDispatchBlock(blk, turtle, listenerName);
 
-                let __lookForOtherTurtles = function(blk, turtle) {
+                let __lookForOtherTurtles = (blk, turtle) => {
                     for (let t in logo.connectionStore) {
                         if (t !== turtle.toString()) {
                             for (let b in logo.connectionStore[t]) {
@@ -122,7 +122,7 @@ function setupFlowBlocks() {
 
                 logo.inDuplicate[turtle] = true;
 
-                let __listener = function(event) {
+                let __listener = (event) => {
                     logo.inDuplicate[turtle] = false;
                     logo.duplicateFactor[turtle] /= factor;
 
@@ -365,7 +365,7 @@ function setupFlowBlocks() {
             let listenerName = "_switch_" + blk + "_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function() {
+            let __listener = () => {
                 let switchBlk = last(logo.switchBlocks[turtle]);
                 // Run the cases here.
                 let switchCase;

diff --git a/js/blocks/GraphicsBlocks.js b/js/blocks/GraphicsBlocks.js
@@ -1,4 +1,4 @@
-function setupGraphicsBlocks() {
+setupGraphicsBlocks = () => {
     class HeadingBlock extends ValueBlock {
         constructor() {
             //.TRANS: orientation or compass direction

diff --git a/js/blocks/HeapBlocks.js b/js/blocks/HeapBlocks.js
@@ -1,4 +1,4 @@
-function setupHeapBlocks() {
+setupHeapBlocks = () => {
     class LoadHeapFromAppBlock extends FlowBlock {
         constructor() {
             super("loadHeapFromApp");

diff --git a/js/blocks/IntervalsBlocks.js b/js/blocks/IntervalsBlocks.js
@@ -1,4 +1,4 @@
-function setupIntervalsBlocks() {
+setupIntervalsBlocks = () => {
     class SetTemperamentBlock extends FlowBlock {
         constructor() {
             super("settemperament", _("set temperament"));
@@ -400,7 +400,7 @@ function setupIntervalsBlocks() {
         }
     }
 
-    function makeSemitoneIntervalMacroBlocks() {
+     makeSemitoneIntervalMacroBlocks = () => {
         class SemitoneIntervalMacroBlock extends FlowBlock {
             constructor(type, value, isDown) {
                 super(
@@ -518,7 +518,7 @@ function setupIntervalsBlocks() {
                 let listenerName = "_semitone_interval_" + turtle;
                 logo._setDispatchBlock(blk, turtle, listenerName);
 
-                let __listener = function() {
+                let __listener = () => {
                     logo.semitoneIntervals[turtle].pop();
                 };
 
@@ -529,7 +529,7 @@ function setupIntervalsBlocks() {
         }
     }
 
-    function makeIntervalMacroBlocks() {
+     makeIntervalMacroBlocks = () => {
         class ChordIntervalMacroBlock extends FlowBlock {
             constructor(name, display, value1, value2) {
                 super(name, _(display));
@@ -664,7 +664,7 @@ function setupIntervalsBlocks() {
             let listenerName = "_interval_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.intervals[turtle].pop();
             };
 
@@ -733,14 +733,14 @@ function setupIntervalsBlocks() {
             let listenerName = "_definemode_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 MUSICALMODES[modeName] = [];
                 if (logo.defineMode[turtle].indexOf(0) === -1) {
                     logo.defineMode[turtle].push(0);
                     logo.errorMsg(_("Adding missing pitch number 0."));
                 }
 
-                let pitchNumbers = logo.defineMode[turtle].sort(function(a, b) {
+                let pitchNumbers = logo.defineMode[turtle].sort((a, b) => {
                     return a[0] - b[0];
                 });
 

diff --git a/js/blocks/MediaBlocks.js b/js/blocks/MediaBlocks.js
@@ -1,4 +1,4 @@
-function setupMediaBlocks() {
+setupMediaBlocks = () => {
     class RightPosBlock extends ValueBlock {
         constructor() {
             //.TRANS: right side of the screen

diff --git a/js/blocks/MeterBlocks.js b/js/blocks/MeterBlocks.js
@@ -1,4 +1,4 @@
-function setupMeterBlocks() {
+setupMeterBlocks = () => {
     class CurrentMeterBlock extends ValueBlock {
         constructor() {
             //.TRANS: musical meter, e.g., 4:4
@@ -389,7 +389,7 @@ function setupMeterBlocks() {
             let listenerName = "_drift_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.drift[turtle] -= 1;
             };
 
@@ -424,7 +424,7 @@ function setupMeterBlocks() {
             if (!(args[0] in logo.actions)) {
                 logo.errorMsg(NOACTIONERRORMSG, blk, args[1]);
             } else {
-                let __listener = function(event) {
+                let __listener = (event) => {
                     if (logo.turtles.turtleList[turtle].running) {
                         let queueBlock = new Queue(
                             logo.actions[args[0]],
@@ -493,7 +493,7 @@ function setupMeterBlocks() {
                 if (!(args[1] in logo.actions)) {
                     logo.errorMsg(NOACTIONERRORMSG, blk, args[1]);
                 } else {
-                    let __listener = function(event) {
+                    let __listener = (event) => {
                         if (logo.turtles.turtleList[turtle].running) {
                             let queueBlock = new Queue(
                                 logo.actions[args[1]],
@@ -580,7 +580,7 @@ function setupMeterBlocks() {
             if (!(args[0] in logo.actions)) {
                 logo.errorMsg(NOACTIONERRORMSG, blk, args[1]);
             } else {
-                let __listener = function(event) {
+                let __listener = (event) => {
                     if (logo.turtles.turtleList[turtle].running) {
                         let queueBlock = new Queue(
                             logo.actions[args[0]],
@@ -879,7 +879,7 @@ function setupMeterBlocks() {
                 let listenerName = "_bpm_" + turtle;
                 logo._setDispatchBlock(blk, turtle, listenerName);
 
-                let __listener = function(event) {
+                let __listener = (event) => {
                     logo.bpm[turtle].pop();
                 };
 
@@ -928,7 +928,7 @@ function setupMeterBlocks() {
                 let listenerName = "_bpm_" + turtle;
                 logo._setDispatchBlock(blk, turtle, listenerName);
 
-                let __listener = function(event) {
+                let __listener = (event) => {
                     logo.bpm[turtle].pop();
                 };
 

diff --git a/js/blocks/NumberBlocks.js b/js/blocks/NumberBlocks.js
@@ -1,4 +1,4 @@
-function setupNumberBlocks() {
+setupNumberBlocks = () => {
     class IntBlock extends LeftBlock {
         constructor() {
             super("int");

diff --git a/js/blocks/OrnamentBlocks.js b/js/blocks/OrnamentBlocks.js
@@ -1,4 +1,4 @@
-function setupOrnamentBlocks() {
+setupOrnamentBlocks = () => {
     class StaccatoFactorBlock extends ValueBlock {
         constructor() {
             //.TRANS: the duration of a note played as staccato
@@ -94,7 +94,7 @@ function setupOrnamentBlocks() {
             let listenerName = "_neighbor_" + turtle + "_" + blk;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.inNeighbor[turtle].pop();
                 logo.neighborStepPitch[turtle].pop();
                 logo.neighborNoteValue[turtle].pop();
@@ -191,7 +191,7 @@ function setupOrnamentBlocks() {
             let listenerName = "_glide_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 if (logo.justCounting[turtle].length === 0) {
                     logo.notationEndSlur(turtle);
                 }
@@ -251,7 +251,7 @@ function setupOrnamentBlocks() {
             let listenerName = "_staccato_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.staccato[turtle].pop();
                 if (logo.justCounting[turtle].length === 0) {
                     logo.notationEndSlur(turtle);
@@ -306,7 +306,7 @@ function setupOrnamentBlocks() {
             let listenerName = "_staccato_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.staccato[turtle].pop();
             };
 

diff --git a/js/blocks/PenBlocks.js b/js/blocks/PenBlocks.js
@@ -1,4 +1,4 @@
-function setupPenBlocks() {
+setupPenBlocks = () => {
     class PurpleBlock extends FlowBlock {
         constructor() {
             super("purple", _("purple"));
@@ -414,7 +414,7 @@ function setupPenBlocks() {
             let listenerName = "_hollowline_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function() {
+            let __listener = () => {
                 if (logo.inNoteBlock[turtle].length > 0) {
                     logo.embeddedGraphics[turtle][
                         last(logo.inNoteBlock[turtle])
@@ -492,7 +492,7 @@ function setupPenBlocks() {
             let listenerName = "_fill_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function() {
+            let __listener = () => {
                 if (logo.inNoteBlock[turtle].length > 0) {
                     logo.embeddedGraphics[turtle][
                         last(logo.inNoteBlock[turtle])

diff --git a/js/blocks/PitchBlocks.js b/js/blocks/PitchBlocks.js
@@ -1,4 +1,4 @@
-function _playSynthBlock(args, logo, turtle, blk) {
+_playSynthBlock = (args, logo, turtle, blk) => {
     if (args.length === 1) {
         let obj = frequencyToPitch(args[0]);
         // obj[2] is cents
@@ -48,7 +48,7 @@ function _playSynthBlock(args, logo, turtle, blk) {
     }
 }
 
-function _playPitch(args, logo, turtle, blk) {
+_playPitch = (args, logo, turtle, blk) => {
     let useSolfegeName = false;
     let note, octave, cents;
     let arg0, arg1;
@@ -547,7 +547,7 @@ function _playPitch(args, logo, turtle, blk) {
             }
         }
     } else if (logo.inNoteBlock[turtle].length > 0) {
-        function addPitch(note, octave, cents, direction) {
+        addPitch = (note, octave, cents, direction) => {
             let t = transposition + logo.register[turtle] * 12;
             let noteObj = getNote(
                 note,
@@ -873,7 +873,7 @@ function _playPitch(args, logo, turtle, blk) {
             let noteBeatValue = 4;
             let beatValue = bpmFactor / noteBeatValue;
 
-            __callback = function() {
+            __callback = () => {
                 let j = logo.inNoteBlock[turtle].indexOf(blk);
                 logo.inNoteBlock[turtle].splice(j, 1);
             };
@@ -888,7 +888,7 @@ function _playPitch(args, logo, turtle, blk) {
     }
 }
 
-function setupPitchBlocks() {
+setupPitchBlocks = () => {
     class RestBlock extends ValueBlock {
         constructor() {
             super("rest");
@@ -1634,7 +1634,7 @@ function setupPitchBlocks() {
             let listenerName = "_invert_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.invertList[turtle].pop();
             };
 
@@ -1667,7 +1667,7 @@ function setupPitchBlocks() {
             let listenerName = "_invert_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.invertList[turtle].pop();
             };
 
@@ -1774,7 +1774,7 @@ function setupPitchBlocks() {
                 let listenerName = "_transposition_" + turtle;
                 logo._setDispatchBlock(blk, turtle, listenerName);
 
-                let __listener = function(event) {
+                let __listener = (event) => {
                     transValue = logo.transpositionValues[turtle].pop();
                     if (!(logo.invertList[turtle].length === 0)) {
                         logo.transposition[turtle] += transValue;
@@ -2057,7 +2057,7 @@ function setupPitchBlocks() {
             let listenerName = "_scalar_transposition_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 transValue = logo.scalarTranspositionValues[turtle].pop();
                 if (!(logo.invertList[turtle].length === 0)) {
                     logo.scalarTransposition[turtle] += transValue;
@@ -2143,7 +2143,7 @@ function setupPitchBlocks() {
             let listenerName = "_accidental_" + turtle + "_" + blk;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 if (!(logo.invertList[turtle].length === 0)) {
                     logo.transposition[turtle] += value;
                 } else {
@@ -2194,7 +2194,7 @@ function setupPitchBlocks() {
             let listenerName = "_flat_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 if (!(logo.invertList[turtle].length === 0)) {
                     logo.transposition[turtle] -= 1;
                 } else {
@@ -2245,7 +2245,7 @@ function setupPitchBlocks() {
             let listenerName = "_sharp_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 if (!(logo.invertList[turtle].length === 0)) {
                     logo.transposition[turtle] += 1;
                 } else {
@@ -2298,7 +2298,7 @@ function setupPitchBlocks() {
             let cents = obj[2];
             let delta = 0;
 
-            function addPitch(note, octave, cents, frequency, direction) {
+            addPitch = (note, octave, cents, frequency, direction) => {
                 let t = transposition + logo.register[turtle] * 12;
                 let noteObj = getNote(
                     note,
@@ -2615,7 +2615,7 @@ function setupPitchBlocks() {
                 // return;
             }
 
-            function addPitch(note, octave, cents, direction) {
+            addPitch = (note, octave, cents, direction) => {
                 let t = transposition + logo.register[turtle] * 12;
                 let noteObj = getNote(
                     note,

diff --git a/js/blocks/RhythmBlockPaletteBlocks.js b/js/blocks/RhythmBlockPaletteBlocks.js
@@ -1,7 +1,7 @@
 let language = localStorage.languagePreference || navigator.language;
 let rhythmBlockPalette = language === "ja" ? "rhythm" : "widgets";
 
-function setupRhythmBlockPaletteBlocks() {
+setupRhythmBlockPaletteBlocks = () => {
     class RhythmBlock extends FlowBlock {
         constructor(name) {
             super(name || "rhythm");
@@ -120,22 +120,22 @@ function setupRhythmBlockPaletteBlocks() {
 
                 let beatValue = bpmFactor / noteBeatValue;
 
-                let __rhythmPlayNote = function(
+                let __rhythmPlayNote = (
                     thisBeat,
                     blk,
                     turtle,
                     callback,
                     timeout
-                ) {
-                    setTimeout(function() {
+                ) => {
+                    setTimeout(() => {
                         logo._processNote(thisBeat, blk, turtle, callback);
                     }, timeout);
                 };
                 let __callback;
 
                 for (let i = 0; i < arg0; i++) {
                     if (i === arg0 - 1) {
-                        __callback = function() {
+                        __callback = () => {
                             delete logo.noteDrums[turtle][blk];
                             let j = logo.inNoteBlock[turtle].indexOf(blk);
                             logo.inNoteBlock[turtle].splice(j, 1);
@@ -341,7 +341,7 @@ function setupRhythmBlockPaletteBlocks() {
             let listenerName = "_tuplet_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 if (logo.inMatrix) {
                     logo.tuplet = false;
                     logo.addingNotesToTuplet = false;
@@ -456,7 +456,7 @@ function setupRhythmBlockPaletteBlocks() {
             let listenerName = "_tuplet_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.tuplet = false;
                 logo.addingNotesToTuplet = false;
                 if (!logo.inMatrix) {
@@ -503,14 +503,14 @@ function setupRhythmBlockPaletteBlocks() {
 
                     let totalBeats = 0;
 
-                    __tupletPlayNote = function(
+                    __tupletPlayNote = (
                         thisBeat,
                         blk,
                         turtle,
                         callback,
                         timeout
-                    ) {
-                        setTimeout(function() {
+                    ) => {
+                        setTimeout(() => {
                             logo._processNote(thisBeat, blk, turtle, callback);
                         }, timeout);
                     };
@@ -521,7 +521,7 @@ function setupRhythmBlockPaletteBlocks() {
                         let beatValue = bpmFactor / thisBeat;
 
                         if (i === beatValues.length - 1) {
-                            __callback = function() {
+                            __callback = () => {
                                 delete logo.noteDrums[turtle][blk];
                                 let j = logo.inNoteBlock[turtle].indexOf(blk);
                                 logo.inNoteBlock[turtle].splice(j, 1);
@@ -701,21 +701,21 @@ function setupRhythmBlockPaletteBlocks() {
 
                 let beatValue = bpmFactor / noteBeatValue / arg0;
 
-                __rhythmPlayNote = function(
+                __rhythmPlayNote = (
                     thisBeat,
                     blk,
                     turtle,
                     callback,
                     timeout
-                ) {
-                    setTimeout(function() {
+                ) => {
+                    setTimeout(() => {
                         logo._processNote(thisBeat, blk, turtle, callback);
                     }, timeout);
                 };
 
                 for (let i = 0; i < arg0; i++) {
                     if (i === arg0 - 1) {
-                        __callback = function() {
+                        __callback = () => {
                             delete logo.noteDrums[turtle][blk];
                             let j = logo.inNoteBlock[turtle].indexOf(blk);
                             logo.inNoteBlock[turtle].splice(j, 1);

diff --git a/js/blocks/RhythmBlocks.js b/js/blocks/RhythmBlocks.js
@@ -1,4 +1,4 @@
-function _playNote(args, logo, turtle, blk, receivedArg) {
+_playNote = (args, logo, turtle, blk, receivedArg) => {
     // We queue up the child flow of the note clamp and
     // once all of the children are run, we trigger a
     // _playnote_ event, then wait for the note to play.
@@ -165,7 +165,7 @@ function _playNote(args, logo, turtle, blk, receivedArg) {
     let listenerName = "_playnote_" + turtle;
     logo._setDispatchBlock(blk, turtle, listenerName);
 
-    let __listener = function(event) {
+    let __listener = (event) => {
         if (logo.multipleVoices[turtle]) {
             logo.notationVoices(turtle, logo.inNoteBlock[turtle].length);
         }
@@ -221,7 +221,7 @@ function _playNote(args, logo, turtle, blk, receivedArg) {
     return [childFlow, childFlowCount];
 }
 
-function _playSwing(args, logo, turtle, blk) {
+_playSwing = (args, logo, turtle, blk) => {
     let childFlow;
 
     // Grab a bit from the next note to give to the current note.
@@ -269,7 +269,7 @@ function _playSwing(args, logo, turtle, blk) {
     let listenerName = "_swing_" + turtle;
     logo._setDispatchBlock(blk, turtle, listenerName);
 
-    let __listener = function(event) {
+    let __listener = (event) => {
         if (!logo.suppressOutput[turtle]) {
             logo.swingTarget[turtle].pop();
             logo.swing[turtle].pop();
@@ -283,7 +283,7 @@ function _playSwing(args, logo, turtle, blk) {
     return [childFlow, 1];
 }
 
-function _playDotted(args, logo, turtle, blk) {
+_playDotted = (args, logo, turtle, blk) => {
     // Dotting a note will increase its play time by
     // a(2 - 1/2^n)
     let arg;
@@ -319,7 +319,7 @@ function _playDotted(args, logo, turtle, blk) {
     let listenerName = "_dot_" + turtle;
     logo._setDispatchBlock(blk, turtle, listenerName);
 
-    let __listener = function(event) {
+    let __listener = (event) => {
         let currentDotFactor = 2 - 1 / Math.pow(2, logo.dotCount[turtle]);
         logo.beatFactor[turtle] *= currentDotFactor;
         if (arg >= 0) {
@@ -341,7 +341,7 @@ function _playDotted(args, logo, turtle, blk) {
     }
 }
 
-function setupRhythmBlocks() {
+setupRhythmBlocks = () => {
     class MyNoteValueBlock extends ValueBlock {
         constructor() {
             //.TRANS: the value (e.g., 1/4 note) of the note being played.
@@ -653,7 +653,7 @@ function setupRhythmBlocks() {
             let listenerName = "_multiplybeat_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.beatFactor[turtle] *= factor;
             };
 
@@ -705,7 +705,7 @@ function setupRhythmBlocks() {
             let listenerName = "_tie_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.tie[turtle] = false;
 
                 // If tieCarryOver > 0, we have one more note to

diff --git a/js/blocks/SensorsBlocks.js b/js/blocks/SensorsBlocks.js
@@ -1,4 +1,4 @@
-function setupSensorsBlocks() {
+setupSensorsBlocks = () => {
     class InputBlock extends FlowBlock {
         constructor() {
             super("input");
@@ -42,7 +42,7 @@ function setupSensorsBlocks() {
             docById("labelDiv").classList.add("hasKeyboard");
 
             // Add a handler to continue flow after the input.
-            function __keyPressed(event) {
+            __keyPressed = (event) => {
                 if (event.keyCode === 13) { // RETURN
                     let inputElem = docById("textLabel");
                     console.debug(inputElem.value);

diff --git a/js/blocks/ToneBlocks.js b/js/blocks/ToneBlocks.js
@@ -1,4 +1,4 @@
-function setupToneBlocks() {
+setupToneBlocks = () => {
     class OscillatorBlock extends FlowBlock {
         constructor() {
             super("oscillator", _("oscillator"));
@@ -342,7 +342,7 @@ function setupToneBlocks() {
             let listenerName = "_harmonic_" + turtle + "_" + blk;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.inHarmonic[turtle].pop();
                 logo.partials[turtle].pop();
             };
@@ -400,7 +400,7 @@ function setupToneBlocks() {
             let listenerName = "_harmonic_" + turtle + "_" + blk;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.inHarmonic[turtle].pop();
                 logo.partials[turtle].pop();
                 logo.notationEndHarmonics(turtle);
@@ -442,7 +442,7 @@ function setupToneBlocks() {
             let listenerName = "_distortion_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.distortionAmount[turtle].pop();
             };
 
@@ -514,7 +514,7 @@ function setupToneBlocks() {
             let listenerName = "_tremolo_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.tremoloFrequency[turtle].pop();
                 logo.tremoloDepth[turtle].pop();
             };
@@ -574,7 +574,7 @@ function setupToneBlocks() {
             let listenerName = "_phaser_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.rate[turtle].pop();
                 logo.octaves[turtle].pop();
                 logo.baseFrequency[turtle].pop();
@@ -644,7 +644,7 @@ function setupToneBlocks() {
             let listenerName = "_chorus_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.chorusRate[turtle].pop();
                 logo.delayTime[turtle].pop();
                 logo.chorusDepth[turtle].pop();
@@ -731,7 +731,7 @@ function setupToneBlocks() {
             let listenerName = "_vibrato_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.vibratoIntensity[turtle].pop();
                 logo.vibratoRate[turtle].pop();
             };
@@ -807,7 +807,7 @@ function setupToneBlocks() {
                 let listenerName = "_setvoice_" + turtle;
                 logo._setDispatchBlock(blk, turtle, listenerName);
 
-                let __listener = function(event) {
+                let __listener = (event) => {
                     logo.voices[turtle].pop();
                 };
 
@@ -936,7 +936,7 @@ function setupToneBlocks() {
                 let listenerName = "_settimbre_" + turtle;
                 logo._setDispatchBlock(blk, turtle, listenerName);
 
-                let __listener = function(event) {
+                let __listener = (event) => {
                     logo.inSetTimbre[turtle] = false;
                     // console.debug('popping ' + logo.instrumentNames[turtle].pop() + ' from instrumentNames');
                     logo.instrumentNames[turtle].pop();

diff --git a/js/blocks/VolumeBlocks.js b/js/blocks/VolumeBlocks.js
@@ -1,4 +1,4 @@
-function setupVolumeBlocks() {
+setupVolumeBlocks = () => {
     class SynthVolumeBlock extends LeftBlock {
         constructor() {
             //.TRANS: the volume for this synth
@@ -328,7 +328,7 @@ function setupVolumeBlocks() {
             let listenerName = "_synthvolume_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.synthVolume[turtle][synth].pop();
                 // Restore previous volume.
                 if (
@@ -617,7 +617,7 @@ function setupVolumeBlocks() {
             let listenerName = "_volume_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.masterVolume.pop();
                 // Restore previous volume.
                 if (
@@ -711,7 +711,7 @@ function setupVolumeBlocks() {
             let listenerName = "_articulation_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 for (let synth in logo.synthVolume[turtle]) {
                     logo.synthVolume[turtle][synth].pop();
                     logo.setSynthVolume(
@@ -795,7 +795,7 @@ function setupVolumeBlocks() {
                 let listenerName = "_crescendo_" + turtle;
                 logo._setDispatchBlock(blk, turtle, listenerName);
 
-                let __listener = function(event) {
+                let __listener = (event) => {
                     if (logo.justCounting[turtle].length === 0) {
                         logo.notationEndCrescendo(
                             turtle,

diff --git a/js/blocks/WidgetBlocks.js b/js/blocks/WidgetBlocks.js
@@ -1,4 +1,4 @@
-function setupWidgetBlocks() {
+setupWidgetBlocks = () => {
     class EnvelopeBlock extends FlowBlock {
         constructor() {
             //.TRANS: sound envelope (ADSR)
@@ -223,7 +223,7 @@ function setupWidgetBlocks() {
             let listenerName = "_temperament_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.temperament.init(logo);
             };
 
@@ -339,7 +339,7 @@ function setupWidgetBlocks() {
             let listenerName = "_timbre_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.timbre.init(logo);
             };
 
@@ -385,7 +385,7 @@ function setupWidgetBlocks() {
             let listenerName = "_meterwidget_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.meterWidget.init(logo, logo._meterBlock);
                 logo.insideMeterWidget = false;
             };
@@ -431,7 +431,7 @@ function setupWidgetBlocks() {
             let listenerName = "_modewidget_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.modeWidget.init(logo, logo._modeBlock);
                 logo.insideModeWidget = false;
             };
@@ -481,7 +481,7 @@ function setupWidgetBlocks() {
             let listenerName = "_tempo_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.tempo.init(logo);
             };
 
@@ -539,7 +539,7 @@ function setupWidgetBlocks() {
             let listenerName = "_pitchdrummatrix_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 if (
                     logo.pitchDrumMatrix.drums.length === 0 ||
                     logo.pitchDrumMatrix.rowLabels.length === 0
@@ -597,7 +597,7 @@ function setupWidgetBlocks() {
             let listenerName = "_pitchslider_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.pitchSlider.init(logo);
                 logo.inPitchSlider = false;
             };
@@ -738,7 +738,7 @@ function setupWidgetBlocks() {
             let listenerName = "_musickeyboard_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.musicKeyboard.init(logo);
             };
 
@@ -787,7 +787,7 @@ function setupWidgetBlocks() {
             let listenerName = "_pitchstaircase_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.pitchStaircase.init(logo);
                 logo.inPitchStaircase = false;
             };
@@ -874,7 +874,7 @@ function setupWidgetBlocks() {
             let listenerName = "_rhythmruler_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.rhythmRuler.init(logo);
             };
 
@@ -1016,7 +1016,7 @@ function setupWidgetBlocks() {
             let listenerName = "_matrix_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 if (
                     logo.tupletRhythms.length === 0 ||
                     logo.pitchTimeMatrix.rowLabels.length === 0
@@ -1120,7 +1120,7 @@ function setupWidgetBlocks() {
             let listenerName = "_status_" + turtle;
             logo._setDispatchBlock(blk, turtle, listenerName);
 
-            let __listener = function(event) {
+            let __listener = (event) => {
                 logo.statusMatrix.init(logo);
                 logo.inStatusMatrix = false;
             };

diff --git a/js/boundary.js b/js/boundary.js
@@ -18,31 +18,31 @@ function Boundary() {
     this._stage = null;
     this._container = null;
 
-    this.setStage = function(stage) {
+    this.setStage = (stage) => {
         this._stage = stage;
         return this;
     };
 
-    this.resizeEvent = function(scale) {};
+    this.resizeEvent = (scale) => {};
 
-    this.init = function() {
+    this.init = () => {
         this._container = new createjs.Container();
         this._stage.addChild(this._container);
         this._stage.setChildIndex(this._container, 0);
     };
 
-    this.setScale = function(w, h, scale) {
+    this.setScale = (w, h, scale) => {
         this.destroy();
         this.create(w, h, scale);
     };
 
-    this.destroy = function() {
+    this.destroy = () => {
         if (this._container.children.length > 0) {
             this._container.removeChild(this._container.children[0]);
         }
     };
 
-    this.offScreen = function(x, y) {
+    this.offScreen = (x, y) => {
         return (
             x < this.x ||
             x > this.x + this.dx ||
@@ -51,7 +51,7 @@ function Boundary() {
         );
     };
 
-    this.create = function(w, h, scale) {
+    this.create = (w, h, scale) => {
         this.w = w / scale;
         this.x = 55 + 13;
         this.dx = this.w - (110 + 26);
@@ -60,26 +60,26 @@ function Boundary() {
         this.y = 55 + 13;
         this.dy = this.h - (55 + 26);
 
-        that = this;
+        // that = this;
 
-        function __makeBoundary() {
+        __makeBoundary = () => {
             var img = new Image();
-            img.onload = function() {
+            img.onload = () => {
                 bitmap = new createjs.Bitmap(img);
-                that._container.addChild(bitmap);
+                this._container.addChild(bitmap);
             };
 
             img.src =
                 "data:image/svg+xml;base64," +
                 window.btoa(
                     unescape(
                         encodeURIComponent(
-                            BOUNDARY.replace("HEIGHT", that.h)
-                                .replace("WIDTH", that.w)
-                                .replace("Y", that.y)
-                                .replace("X", that.x)
-                                .replace("DY", that.dy)
-                                .replace("DX", that.dx)
+                            BOUNDARY.replace("HEIGHT", this.h)
+                                .replace("WIDTH", this.w)
+                                .replace("Y", this.y)
+                                .replace("X", this.x)
+                                .replace("DY", this.dy)
+                                .replace("DX", this.dx)
                                 .replace("stroke_color", "#e08080")
                         )
                     )
@@ -89,11 +89,11 @@ function Boundary() {
         __makeBoundary();
     };
 
-    this.hide = function() {
+    this.hide = () => {
         this._container.visible = false;
     };
 
-    this.show = function() {
+    this.show = () => {
         this._container.visible = true;
     };
 }
diff --git a/js/languagebox.js b/js/languagebox.js
@@ -14,84 +14,84 @@ function LanguageBox() {
     var language = localStorage.languagePreference;
     this._message = null;
 
-    this.setMessage = function(message) {
+    this.setMessage = (message) => {
         this._message = message;
         return this;
     };
 
-    this.enUS_onclick = function() {
+    this.enUS_onclick = () => {
         language = "enUS";
         this.hide();
     };
 
-    this.enUK_onclick = function() {
+    this.enUK_onclick = () => {
         language = "enUK";
         this.hide();
     };
 
-    this.ja_onclick = function() {
+    this.ja_onclick = () => {
         language = "ja";
         localStorage.kanaPreference = "kanji";
         this.hide();
     };
 
-    this.kana_onclick = function() {
+    this.kana_onclick = () => {
         language = "ja";
         localStorage.kanaPreference = "kana";
         this.hide();
     };
 
-    this.es_onclick = function() {
+    this.es_onclick = () => {
         language = "es";
         this.hide();
     };
 
-    this.pt_onclick = function() {
+    this.pt_onclick = () => {
         language = "pt";
         this.hide();
     };
 
-    this.zhCN_onclick = function() {
+    this.zhCN_onclick = () => {
         language = "zhCN";
         this.hide();
     };
 
-    this.th_onclick = function() {
+    this.th_onclick = () => {
         language = "th";
         this.hide();
     };
 
-    this.hi_onclick = function() {
+    this.hi_onclick = () => {
         language = "hi";
         this.hide();
     };
 
-    this.ibo_onclick = function() {
+    this.ibo_onclick = () => {
         language = "ibo";
         this.hide();
     };
 
-    this.ar_onclick = function() {
+    this.ar_onclick = () => {
         language = "ar";
         this.hide();
     };
 
-    this.he_onclick = function() {
+    this.he_onclick = () => {
         language = "he";
         this.hide();
     };
 
-    this.ayc_onclick = function() {
+    this.ayc_onclick = () => {
         language = "ayc";
         this.hide();
     };
 
-    this.gug_onclick = function() {
+    this.gug_onclick = () => {
         language = "gug";
         this.hide();
     };
 
-    this.hide = function() {
+    this.hide = () => {
         const MSGPrefix =
             "<a href='#' " +
             "onClick='window.location.reload()'" +

diff --git a/js/pastebox.js b/js/pastebox.js
@@ -23,27 +23,27 @@ function PasteBox() {
     this.close = null;
     this._scale = 1;
 
-    this.setCanvas = function(canvas) {
+    this.setCanvas = (canvas) => {
         this._canvas = canvas;
         return this;
     };
 
-    this.setStage = function(stage) {
+    this.setStage = (stage) => {
         this._stage = stage;
         return this;
     };
 
-    this.setPaste = function(paste) {
+    this.setPaste = (paste) => {
         this._paste = paste;
         return this;
     };
 
-    this.setRefreshCanvas = function(refreshCanvas) {
+    this.setRefreshCanvas = (refreshCanvas) => {
         this._refreshCanvas = refreshCanvas;
         return this;
     };
 
-    this.hide = function() {
+    this.hide = () => {
         if (this._container != null) {
             this._container.visible = false;
             this._refreshCanvas();
@@ -52,7 +52,7 @@ function PasteBox() {
         }
     };
 
-    this.createBox = function(scale, x, y) {
+    this.createBox = (scale, x, y) => {
         if (this._container == null) {
             this._scale = scale;
 
@@ -61,7 +61,7 @@ function PasteBox() {
             this._container.x = x;
             this._container.y = y;
 
-            function __processBackground(that, name, bitmap, extras) {
+            __processBackground = (that, name, bitmap, extras) => {
                 that._container.addChild(bitmap);
                 that._loadClearContainerHandler();
                 that._container.visible = true;
@@ -72,18 +72,18 @@ function PasteBox() {
         }
     };
 
-    this.show = function() {
+    this.show = () => {
         this._container.visible = true;
         this._refreshCanvas();
         // this._paste.visibile = true;
         docById("paste").style.visibility = "visible";
     };
 
-    this.getPos = function() {
+    this.getPos = () => {
         return [this._container.x, this._container.y];
     };
 
-    this._loadClearContainerHandler = function() {
+    this._loadClearContainerHandler = () => {
         var hitArea = new createjs.Shape();
         this.bounds = this._container.getBounds();
         hitArea.graphics
@@ -99,9 +99,9 @@ function PasteBox() {
         this._container.hitArea = hitArea;
 
         var locked = false;
-        var that = this;
+        // var that = this;
 
-        this._container.on("click", function(event) {
+        this._container.on("click", (event) => {
             // We need a lock to "debouce" the click.
             if (locked) {
                 console.debug("debouncing click");
@@ -110,27 +110,27 @@ function PasteBox() {
 
             locked = true;
 
-            setTimeout(function() {
+            setTimeout(() => {
                 locked = false;
             }, 500);
 
-            var x = event.stageX / that._scale - that._container.x;
-            var y = event.stageY / that._scale - that._container.y;
+            var x = event.stageX / this._scale - this._container.x;
+            var y = event.stageY / this._scale - this._container.y;
             if (x > 125 && y < 55) {
-                that.hide();
+                this.hide();
             }
         });
     };
 
-    this._makeBoxBitmap = function(data, name, callback, extras) {
+    this._makeBoxBitmap = (data, name, callback, extras) => {
         // Async creation of bitmap from SVG data
         // Works with Chrome, Safari, Firefox (untested on IE)
         var img = new Image();
-        var that = this;
+        // var that = this;
 
-        img.onload = function() {
+        img.onload = () => {
             var bitmap = new createjs.Bitmap(img);
-            callback(that, name, bitmap, extras);
+            callback(this, name, bitmap, extras);
         };
 
         img.src =

diff --git a/js/playback.js b/js/playback.js
@@ -33,7 +33,7 @@ function PlaybackWidget() {
     };
     */
 
-    this.init = function(logo) {
+    this.init = (logo) => {
         // Initializes the playback matrix. First removes the
         // previous matrix and them make another one in DOM (document
         // object model)
@@ -66,7 +66,7 @@ function PlaybackWidget() {
         var row = header.insertRow(0);
 
         // For the button callbacks
-        var that = this;
+        // var that = this;
 
         this._playcell = this._addButton(
             row,
@@ -75,8 +75,8 @@ function PlaybackWidget() {
             _("Play all")
         );
 
-        this._playcell.onclick = function() {
-            that._logo.playback(-1); // that._playAll();
+        this._playcell.onclick = () => {
+            this._logo.playback(-1); // that._playAll();
         };
 
         var cell = this._addButton(
@@ -86,11 +86,11 @@ function PlaybackWidget() {
             _("Close")
         );
 
-        cell.onclick = function() {
+        cell.onclick = () => {
             playbackTableDiv.style.visibility = "hidden";
             playbackButtonsDiv.style.visibility = "hidden";
             playbackDiv.style.visibility = "hidden";
-            that._logo.stopTurtle = true;
+            this._logo.stopTurtle = true;
         };
 
         // We use this cell as a handle for dragging.
@@ -107,57 +107,57 @@ function PlaybackWidget() {
         this._target = false;
         this._dragCellHTML = dragCell.innerHTML;
 
-        dragCell.onmouseover = function(e) {
+        dragCell.onmouseover = (e) => {
             // In order to prevent the dragged item from triggering a
             // browser reload in Firefox, we empty the cell contents
             // before dragging.
             dragCell.innerHTML = "";
         };
 
-        dragCell.onmouseout = function(e) {
-            if (!that._dragging) {
-                dragCell.innerHTML = that._dragCellHTML;
+        dragCell.onmouseout = (e) => {
+            if (!this._dragging) {
+                dragCell.innerHTML = this._dragCellHTML;
             }
         };
 
-        canvas.ondragover = function(e) {
-            that._dragging = true;
+        canvas.ondragover = (e) => {
+            this._dragging = true;
             e.preventDefault();
         };
 
-        canvas.ondrop = function(e) {
-            if (that._dragging) {
-                that._dragging = false;
-                var x = e.clientX - that._dx;
+        canvas.ondrop = (e) => {
+            if (this._dragging) {
+                this._dragging = false;
+                var x = e.clientX - this._dx;
                 playbackDiv.style.left = x + "px";
-                var y = e.clientY - that._dy;
+                var y = e.clientY - this._dy;
                 playbackDiv.style.top = y + "px";
-                dragCell.innerHTML = that._dragCellHTML;
+                dragCell.innerHTML = this._dragCellHTML;
             }
         };
 
-        playbackDiv.ondragover = function(e) {
-            that._dragging = true;
+        playbackDiv.ondragover = (e) => {
+            this._dragging = true;
             e.preventDefault();
         };
 
-        playbackDiv.ondrop = function(e) {
-            if (that._dragging) {
-                that._dragging = false;
-                var x = e.clientX - that._dx;
+        playbackDiv.ondrop = (e) => {
+            if (this._dragging) {
+                this._dragging = false;
+                var x = e.clientX - this._dx;
                 playbackDiv.style.left = x + "px";
-                var y = e.clientY - that._dy;
+                var y = e.clientY - this._dy;
                 playbackDiv.style.top = y + "px";
-                dragCell.innerHTML = that._dragCellHTML;
+                dragCell.innerHTML = this._dragCellHTML;
             }
         };
 
-        playbackDiv.onmousedown = function(e) {
-            that._target = e.target;
+        playbackDiv.onmousedown = (e) => {
+            this._target = e.target;
         };
 
-        playbackDiv.ondragstart = function(e) {
-            if (dragCell.contains(that._target)) {
+        playbackDiv.ondragstart = (e) => {
+            if (dragCell.contains(this._target)) {
                 e.dataTransfer.setData("text/plain", "");
             } else {
                 e.preventDefault();
@@ -243,16 +243,16 @@ function PlaybackWidget() {
             );
             buttonCell.setAttribute("id", activeTurtles);
 
-            buttonCell.onclick = function() {
+            buttonCell.onclick = () => {
                 var id = Number(this.getAttribute("id"));
-                that._logo.playback(id);
+                this._logo.playback(id);
             };
 
             activeTurtles += 1;
         }
     };
 
-    this._addButton = function(row, icon, iconSize, label) {
+    this._addButton = (row, icon, iconSize, label) => {
         var cell = row.insertCell(-1);
         cell.innerHTML =
             '&nbsp;&nbsp;<img src="header-icons/' +
@@ -274,11 +274,11 @@ function PlaybackWidget() {
         cell.style.maxHeight = cell.style.height;
         cell.style.backgroundColor = MATRIXBUTTONCOLOR;
 
-        cell.onmouseover = function() {
+        cell.onmouseover = () => {
             this.style.backgroundColor = MATRIXBUTTONCOLORHOVER;
         };
 
-        cell.onmouseout = function() {
+        cell.onmouseout = () => {
             this.style.backgroundColor = MATRIXBUTTONCOLOR;
         };
 

diff --git a/js/playbackbox.js b/js/playbackbox.js
@@ -43,51 +43,51 @@ function PlaybackBox() {
     this._container = null;
     this._scale = 1;
 
-    this.setStage = function(stage) {
+    this.setStage = (stage) => {
         this._stage = stage;
         return this;
     };
 
-    this.setRefreshCanvas = function(refreshCanvas) {
+    this.setRefreshCanvas = (refreshCanvas) => {
         this._refreshCanvas = refreshCanvas;
         return this;
     };
 
-    this.setQueueStatus = function(getQueueStatus) {
+    this.setQueueStatus = (getQueueStatus) => {
         this._getQueueStatus = getQueueStatus;
         return this;
     };
 
-    this.setCompile = function(compile) {
+    this.setCompile = (compile) => {
         this._doCompile = compile;
         return this;
     };
 
-    this.setPlay = function(play) {
+    this.setPlay = (play) => {
         this._doPlay = play;
         return this;
     };
 
-    this.setPause = function(pause) {
+    this.setPause = (pause) => {
         this._doPause = pause;
         return this;
     };
 
-    this.setRewind = function(rewind) {
+    this.setRewind = (rewind) => {
         this._doRewind = rewind;
         return this;
     };
 
-    this.getPos = function() {
+    this.getPos = () => {
         return [this._container.x, this._container.y];
     };
 
-    this.init = function(scale, x, y, makeButton, logo) {
+    this.init = (scale, x, y, makeButton, logo) => {
         this._logo = logo;
 
         if (this._container === null) {
             this._createBox(scale, x, y);
-            var that = this;
+            // var that = this;
             var dx = BOXBUTTONOFFSET;
 
             //.TRANS: playback in the case refers to playing back music that has been preprocessed.
@@ -103,8 +103,8 @@ function PlaybackBox() {
             this.playButton.visible = true;
             this._positionHoverText(this.playButton);
 
-            this.playButton.on("click", function(event) {
-                that._doPlay();
+            this.playButton.on("click", (event) => {
+                this._doPlay();
             });
 
             this.noplayButton = makeButton(
@@ -132,8 +132,8 @@ function PlaybackBox() {
             this.pauseButton.visible = false;
             this._positionHoverText(this.pauseButton);
 
-            this.pauseButton.on("click", function(event) {
-                that._doPause();
+            this.pauseButton.on("click", (event) => {
+                this._doPause();
             });
 
             dx += BOXBUTTONSPACING;
@@ -151,8 +151,8 @@ function PlaybackBox() {
             this.rewindButton.visible = false;
             this._positionHoverText(this.rewindButton);
 
-            this.rewindButton.on("click", function(event) {
-                that._doRewind();
+            this.rewindButton.on("click", (event) => {
+                this._doRewind();
             });
 
             //.TRANS: playback in the case refers to playing back music that has been preprocessed.
@@ -189,8 +189,8 @@ function PlaybackBox() {
                 }
             }
 
-            this._compileButton.on("click", function(event) {
-                that._doCompile();
+            this._compileButton.on("click", (event) => {
+                this._doCompile();
             });
         } else {
             this._show();
@@ -199,7 +199,7 @@ function PlaybackBox() {
         this.setPlaybackStatus();
     };
 
-    this.setPlaybackStatus = function() {
+    this.setPlaybackStatus = () => {
         if (this._container != null) {
             if (!this._container.visible) {
                 this.noplayButton.visible = false;
@@ -228,7 +228,7 @@ function PlaybackBox() {
         }
     };
 
-    this._positionHoverText = function(button) {
+    this._positionHoverText = (button) => {
         for (var c = 0; c < button.children.length; c++) {
             if (button.children[c].text != undefined) {
                 button.children[c].textAlign = "left";
@@ -239,7 +239,7 @@ function PlaybackBox() {
         }
     };
 
-    this.hide = function() {
+    this.hide = () => {
         if (this._container !== null) {
             this.playButton.visible = false;
             this.noplayButton.visible = false;
@@ -254,7 +254,7 @@ function PlaybackBox() {
         }
     };
 
-    this._show = function() {
+    this._show = () => {
         if (this._container !== null) {
             if (this._logo.playbackQueue === {}) {
                 this.playButton.visible = false;
@@ -276,10 +276,10 @@ function PlaybackBox() {
         }
     };
 
-    this._createBox = function(scale, x, y) {
+    this._createBox = (scale, x, y) => {
         this._scale = scale;
 
-        function __processBackground(that, name, bitmap, extras) {
+        const __processBackground = (that, name, bitmap, extras) => {
             that._container.addChild(bitmap);
             that._loadPlaybackContainerHandler();
 
@@ -316,43 +316,43 @@ function PlaybackBox() {
         }
     };
 
-    this._makeBoxBitmap = function(data, name, callback, extras) {
+    this._makeBoxBitmap = (data, name, callback, extras) => {
         // Async creation of bitmap from SVG data
         // Works with Chrome, Safari, Firefox (untested on IE)
         var img = new Image();
-        var that = this;
+        // var that = this;
 
-        img.onload = function() {
+        img.onload = () => {
             bitmap = new createjs.Bitmap(img);
-            callback(that, name, bitmap, extras);
+            callback(this, name, bitmap, extras);
         };
 
         img.src =
             "data:image/svg+xml;base64," +
             window.btoa(unescape(encodeURIComponent(data)));
     };
 
-    this._loadPlaybackContainerHandler = function() {
+    this._loadPlaybackContainerHandler = () => {
         var locked = false;
-        var that = this;
+        // var that = this;
 
-        that._container.on("click", function(event) {
+        this._container.on ("click", (event) => {
             // We need a lock to "debouce" the click.
             if (locked) {
                 console.debug("debouncing click");
                 return;
             }
 
             locked = true;
-            setTimeout(function() {
+            setTimeout(() => {
                 locked = false;
             }, 500);
 
-            var x = event.stageX / that._scale - that._container.x;
-            var y = event.stageY / that._scale - that._container.y;
+            var x = event.stageX / this._scale - this._container.x;
+            var y = event.stageY / this._scale - this._container.y;
 
             if (y < 55) {
-                that.hide();
+                this.hide();
             }
         });
     };

diff --git a/js/rubrics.js b/js/rubrics.js
@@ -500,7 +500,7 @@ const PALLABELS = [
     _("mice")
 ];
 
-function analyzeProject(blocks) {
+const analyzeProject = (blocks) => {
     // Parse block data and generate score based on rubric
 
     var blockList = [];
@@ -607,7 +607,7 @@ function analyzeProject(blocks) {
     return scores;
 }
 
-function scoreToChartData(scores) {
+const scoreToChartData = (scores) => {
     var normalizedScores = [];
     var maxScore = 0;
     for (var i = 0; i < scores.length; i++) {
@@ -649,7 +649,7 @@ function scoreToChartData(scores) {
     return data;
 }
 
-function getChartOptions(callback) {
+const getChartOptions = (callback) => {
     return {
         // Callback for rendering chart into a bitmap
         onAnimationComplete: callback,

diff --git a/js/trash.js b/js/trash.js
@@ -34,52 +34,52 @@ function Trashcan() {
     this._animationLevel = 0;
     this.animationTime = 500;
 
-    this.init = function() {
+    this.init = () => {
         this._stage.addChild(this._container);
         this._stage.setChildIndex(this._container, 0);
         this.resizeEvent(1);
         this._makeTrash();
     };
 
-    this.setCanvas = function(canvas) {
+    this.setCanvas = (canvas) => {
         this._canvas = canvas;
         return this;
     };
 
-    this.setStage = function(stage) {
+    this.setStage = (stage) => {
         this._stage = stage;
         return this;
     };
 
-    this.setSize = function(size) {
+    this.setSize = (size) => {
         this._size = size;
         return this;
     };
 
-    this.setRefreshCanvas = function(refreshCanvas) {
+    this.setRefreshCanvas = (refreshCanvas) => {
         this._refreshCanvas = refreshCanvas;
         return this;
     };
 
-    this._makeBorderHighlight = function(isActive) {
+    this._makeBorderHighlight = (isActive) => {
         var img = new Image();
-        var that = this;
-
-        img.onload = function() {
-            that._borderHighlightBitmap = new createjs.Bitmap(img);
-            that._borderHighlightBitmap.scaleX = that._size / that._iconsize;
-            that._borderHighlightBitmap.scaleY = that._size / that._iconsize;
-            if (!that._isHighlightInitialized) {
-                that._container.visible = false;
-                that._isHighlightInitialized = true;
+        // var that = this;
+
+        img.onload = () => {
+            this._borderHighlightBitmap = new createjs.Bitmap(img);
+            this._borderHighlightBitmap.scaleX = this._size / this._iconsize;
+            this._borderHighlightBitmap.scaleY = this._size / this._iconsize;
+            if (!this._isHighlightInitialized) {
+                this._container.visible = false;
+                this._isHighlightInitialized = true;
             } else {
-                that._container.removeChildAt(
-                    that._container.children.length - 1
+                this._container.removeChildAt(
+                    this._container.children.length - 1
                 );
             }
 
-            that._container.addChild(that._borderHighlightBitmap);
-            that._borderHighlightBitmap.visible = true;
+            this._container.addChild(this._borderHighlightBitmap);
+            this._borderHighlightBitmap.visible = true;
         };
 
         var highlightString =
@@ -106,16 +106,16 @@ function Trashcan() {
             );
     };
 
-    this._makeBorder = function() {
+    this._makeBorder = () => {
         var img = new Image();
-        var that = this;
+        // var that = this;
 
-        img.onload = function() {
+        img.onload = () => {
             border = new createjs.Bitmap(img);
-            bitmap.scaleX = that._size / that._iconsize;
-            bitmap.scaleY = that._size / that._iconsize;
-            that._container.addChild(border);
-            that._makeBorderHighlight(false);
+            bitmap.scaleX = this._size / this._iconsize;
+            bitmap.scaleY = this._size / this._iconsize;
+            this._container.addChild(border);
+            this._makeBorderHighlight(false);
         };
 
         img.src =
@@ -132,19 +132,19 @@ function Trashcan() {
             );
     };
 
-    this._makeTrash = function() {
+    this._makeTrash = () => {
         var img = new Image();
-        var that = this;
+        // var that = this;
 
-        img.onload = function() {
+        img.onload = () => {
             bitmap = new createjs.Bitmap(img);
-            that._container.addChild(bitmap);
-            that._iconsize = bitmap.getBounds().width;
-            bitmap.scaleX = that._size / that._iconsize;
-            bitmap.scaleY = that._size / that._iconsize;
-            bitmap.x = ((TRASHWIDTH - that._size) / 2) * bitmap.scaleX;
-            bitmap.y = ((TRASHHEIGHT - that._size) / 2) * bitmap.scaleY;
-            that._makeBorder();
+            this._container.addChild(bitmap);
+            this._iconsize = bitmap.getBounds().width;
+            bitmap.scaleX = this._size / this._iconsize;
+            bitmap.scaleY = this._size / this._iconsize;
+            bitmap.x = ((TRASHWIDTH - this._size) / 2) * bitmap.scaleX;
+            bitmap.y = ((TRASHHEIGHT - this._size) / 2) * bitmap.scaleY;
+            this._makeBorder();
         };
 
         img.src =
@@ -161,55 +161,55 @@ function Trashcan() {
             );
     };
 
-    this.resizeEvent = function(scale) {
+    this.resizeEvent = (scale) => {
         this._scale = scale;
         this._container.x = (this._canvas.width / this._scale - TRASHWIDTH) / 2;
         this._container.y = this._canvas.height / this._scale - TRASHHEIGHT;
     };
 
-    this.hide = function() {
+    this.hide = () => {
         createjs.Tween.get(this._container)
             .to({ alpha: 0 }, 200)
             .set({ visible: false });
     };
 
-    this.show = function() {
+    this.show = () => {
         this.stopHighlightAnimation();
         createjs.Tween.get(this._container)
             .to({ alpha: 0.0, visible: true })
             .to({ alpha: 1.0 }, 200);
     };
 
-    this.startHighlightAnimation = function() {
+    this.startHighlightAnimation = () => {
         if (this._inAnimation) {
             return;
         }
 
         this._inAnimation = true;
-        var that = this;
-
-        this._animationInterval = setInterval(function() {
-            that._animationLevel += 20;
-            if (that._animationLevel >= that.animationTime) {
-                that.isVisible = true;
-                that._makeBorderHighlight(true); // Make it active.
-                that._refreshCanvas();
-                clearInterval(that._animationInterval); // Autostop animation.
+        // var that = this;
+
+        this._animationInterval = setInterval(() => {
+            this._animationLevel += 20;
+            if (this._animationLevel >= this.animationTime) {
+                this.isVisible = true;
+                this._makeBorderHighlight(true); // Make it active.
+                this._refreshCanvas();
+                clearInterval(this._animationInterval); // Autostop animation.
                 return;
             }
 
-            that._highlightPower = parseInt(
-                255 - 255 * (that._animationLevel / that.animationTime),
+            this._highlightPower = parseInt(
+                255 - 255 * (this._animationLevel / this.animationTime),
                 10
             );
-            that._makeBorderHighlight(false);
-            that._refreshCanvas();
+            this._makeBorderHighlight(false);
+            this._refreshCanvas();
         }, 20);
 
         this._switchHighlightVisibility(true);
     };
 
-    this.stopHighlightAnimation = function() {
+    this.stopHighlightAnimation = () => {
         if (!this._inAnimation) {
             return;
         }
@@ -223,14 +223,14 @@ function Trashcan() {
         this._switchHighlightVisibility(false);
     };
 
-    this._switchHighlightVisibility = function(bool) {
+    this._switchHighlightVisibility = (bool) => {
         last(this._container.children).visible = bool;
         this._container.children[1].visible = !bool;
         this._container.visible = true;
         this._refreshCanvas();
     };
 
-    this.overTrashcan = function(x, y) {
+    this.overTrashcan = (x, y) => {
         var tx = this._container.x;
         var ty = this._container.y;