anchor.diff:          };
   
           var setTrashTimeout;
  -
  -        const localOnResize = () => {
  -          clearTimeout(setTrashTimeout);
  -          setTrashTimeout = setTimeout(() => {
  -            setTrashPosition();
  -          });
  +        clearTimeout(setTrashTimeout);
  +        setTrashTimeout = setTimeout(() => {
  +          setTrashPosition();
  +        });
  +      },
  +
  +      updateFields() {
  +        const blockly = this.getBlockly();
  +
  +        const editorValue = this.getEditorValue();
  +        if (editorValue) {
  +          editorValue.value = blockly.workspaceXml;
  +        }
  +
  +        if (this.teacherMode) {
  +          const editorExtra = this.getEditorExtra();
  +          if (editorExtra) {
  +            editorExtra.value = blockly.workspaceXml;
  +          }
  +        }
  +
  +        if (typeof angular !== 'undefined') {
  +          angular.element(editorValue).triggerHandler("change");
  +        }
  +
  +        const submit = $("kids-submit-button")[0];
  +        if (submit && submit.$.runner.isRunning) {
  +          submit.$.runner.stop();
  +        }
  +      },
  +
  +      setBlocklySounds() {
  +        Blockly.WorkspaceAudio.prototype.preload = () => {
  +          for (var soundName in this.SOUNDS_) {
  +            let sound = this.SOUNDS_[soundName];
  +            sound.volume = 0.01;
  +            let playPromise = sound.play();
  +            playPromise && playPromise.then(sound.pause.bind(sound));
  +            if (goog.userAgent.IPAD || goog.userAgent.IPHONE) break;
  +          }
           };
  -
  -        const triggerResizeOnContextModalClose = () => {
  -          $('.mu-kids-context, .mu-kids-results').on('hidden.bs.modal shown.bs.modal', function () {
  -            localOnResize();
  -          })
  +      },
  +
  +      setBlocklyColors() {
  +        Blockly.HSV_SATURATION = 0.64;
  +        Blockly.HSV_VALUE = 1;
  +
  +        Blockly.MUMUKI_COLORS = {
  +          pink: "#FF5C82",
  +          blue: "#5CBEFF",
  +          yellow: "#FFC95C",
  +          green: "#5CED71"
           };
   
  -        const relocateTrash = (blockly) => {
  -          blockly.workspace.trashcan.bottom_ = 150; //Setting vertical position programmatically to adjust the draggable area
  -          $(window).resize(() => localOnResize());
  -          triggerResizeOnContextModalClose();
  -        };
  -
  -        const initialize = () => {
  -          postpone(() => {
  -            const blockly = this.getBlockly();
  -
  -            if (!blockly || !blockly.workspace) return initialize();
  -
  -            blockly.showCategories = !this._isKindergarten();
  -
  -            if (!this.readOnly) {
  -              relocateTrash(blockly);
  -            }
  -
  -            this.setTeacherActions(blockly);
  -            this._setInitialXml(blockly);
  -            this.interactiveMode = blockly.initialXml.indexOf("block type=\"InteractiveProgram\"") !== -1;
  -            if (this.interactiveMode) this.setInteractiveLayout();
  -            this._initializeWorkspace(blockly, () => {
  -              localOnResize();
  -              blockly._onresize();
  -
  -              this._subscribeToWorkspace(blockly, updateFields);
  -            });
  -
  -            const hasCustomToolbox = $('gs-toolbox').length;
  -            if(!hasCustomToolbox) this.enableContextButton();
  -
  -            this._registerLayoutChangedEvent();
  -          });
  -        };
  -
  -        setBlocklyCustomSettings();
  -        initialize();
  +        // reserved
  +        Blockly.CUSTOM_COLORS.program = Blockly.MUMUKI_COLORS.pink;
  +        Blockly.CUSTOM_COLORS.interactiveProgram = Blockly.MUMUKI_COLORS.pink;
  +        Blockly.CUSTOM_COLORS.interactiveBinding = Blockly.MUMUKI_COLORS.pink;
  +        Blockly.CUSTOM_COLORS.procedure = Blockly.MUMUKI_COLORS.pink;
  +        Blockly.CUSTOM_COLORS.function = Blockly.MUMUKI_COLORS.pink;
  +        Blockly.CUSTOM_COLORS.complete = Blockly.MUMUKI_COLORS.pink;
  +
  +        // control structures
  +        Blockly.CUSTOM_COLORS.controlStructure = this._isKindergarten() ? Blockly.MUMUKI_COLORS.green : Blockly.MUMUKI_COLORS.yellow;
  +
  +        // commands
  +        Blockly.CUSTOM_COLORS.primitiveCommand = Blockly.MUMUKI_COLORS.yellow;
  +        Blockly.CUSTOM_COLORS.primitiveProcedure = Blockly.MUMUKI_COLORS.yellow;
  +        Blockly.CUSTOM_COLORS.procedure_call = Blockly.MUMUKI_COLORS.yellow;
  +        Blockly.CUSTOM_COLORS.assignation = Blockly.MUMUKI_COLORS.yellow;
  +
  +        // expressions
  +        Blockly.Msg.MATH_HUE = Blockly.MUMUKI_COLORS.blue;
  +        Blockly.CUSTOM_COLORS.literalExpression = Blockly.MUMUKI_COLORS.blue;
  +        Blockly.CUSTOM_COLORS.primitiveExpression = Blockly.MUMUKI_COLORS.blue;
  +        Blockly.CUSTOM_COLORS.operator = Blockly.MUMUKI_COLORS.blue;
  +        Blockly.CUSTOM_COLORS.variable = Blockly.MUMUKI_COLORS.blue;
  +        Blockly.CUSTOM_COLORS.parameter = Blockly.MUMUKI_COLORS.blue;
  +        Blockly.CUSTOM_COLORS.primitiveFunction = Blockly.MUMUKI_COLORS.blue;
  +        Blockly.CUSTOM_COLORS.function_call = Blockly.MUMUKI_COLORS.blue;
  +
  +        setTimeout(() => {
  +          this.getBlockly().testColors(Blockly.CUSTOM_COLORS);
  +        });
  +      },
  +
  +      setBlocklyCustomSettings() {
  +        if (typeof Blockly === 'undefined' || !Blockly.CUSTOM_COLORS)
  +          return postpone(() => this.setBlocklyCustomSettings());
  +
  +        // The display mode configuration could be monkey-patched here, like this:
  +        Blockly.displayModes.iconic.iconSize = 64;
  +        Blockly.displayModes.iconic.procedureDefIcon = `${this.localMediaUrl}main-procedure.png`;
  +
  +        Blockly.displayMode = this._isKindergarten() ? 'iconic' : 'text';
  +        this.setBlocklySounds();
  +        this.setBlocklyColors();
  +
  +        // Removing "/" from the block id character set to avoid syntax errors
  +        Blockly.utils.genUid.soup_ = Blockly.utils.genUid.soup_.replace("/", "");
         },
   
         toggleInteractiveMode() {
  
positive.code: <link href="./gs-element-blockly.html" rel="import"/>
  <link href="./gobstones-code-runner.html" rel="import"/>
  <script src="./hammer.min.js"></script>
  
  <dom-module id="mu-gobstones-custom-editor">
  
  
negative.code:         }
        },
  
        attached() {
          this.$exerciseContainer = $('.mu-kids-exercise');
  
          this.setBlocklyCustomSettings();
          this.initialize();
        },
  
        initialize() {
          const triggerResizeOnContextModalClose = () => {
            $('.mu-kids-context, .mu-kids-results').on('hidden.bs.modal shown.bs.modal', () => {
              this.localOnResize();
            });
          };
  
          const relocateTrash = (blockly) => {
            // Setting vertical position programmatically to adjust the draggable area
            blockly.workspace.trashcan.bottom_ = 150;
            $(window).resize(() => this.localOnResize());
            triggerResizeOnContextModalClose();
          };
  
          postpone(() => {
            const blockly = this.getBlockly();
  
            if (!blockly || !blockly.workspace) return this.initialize();
  
            blockly.showCategories = !this._isKindergarten();
  
            if (!this.readOnly) {
              relocateTrash(blockly);
            }
  
            this.setTeacherActions(blockly);
            this._setInitialXml(blockly);
            this.interactiveMode = blockly.initialXml.indexOf("block type=\"InteractiveProgram\"") !== -1;
            if (this.interactiveMode) this.setInteractiveLayout();
            this._initializeWorkspace(blockly, () => {
              this.localOnResize();
              blockly._onresize();
  
              this._subscribeToWorkspace(blockly, () => this.updateFields());
            });
  
            const hasCustomToolbox = $('gs-toolbox').length;
            if(!hasCustomToolbox) this.enableContextButton();
  
            this._registerLayoutChangedEvent();
          });
        },
  
        localOnResize() {
          const setTrashPosition = () => {
            var width = $('#blocklyDiv').width() - 68;
            var height = $('#blocklyDiv').height() - 210;
  