mumuki-laboratory 7.10.4 → 7.12.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a9ec0735be65d4978b877d62bc5542277c1ddff2cf9d1bff48454ee4d874f1fb
-  data.tar.gz: 53e5b0019c91b60f0d2e7a07523941640f0b46118d74a04f4035a37efaafaaf1
+  metadata.gz: e025a36f6aa947e6a39b8372e2a0f257d473143a9c5bef32575885fcf375312b
+  data.tar.gz: 81428a5522e48781ed29cde5b8f2c219f3388a8d36e1ae466f91ee412e69b246
 SHA512:
-  metadata.gz: 50ccfb5349f8734c2158041465158ecf5fb3665334ad3c5ba75fcea1f11ecaf52774c5a8d010e014df621ab47115101bd7a9a2c4e222396164c9f479f001d546
-  data.tar.gz: 67262d351678e0106d736a585798f9133917e10285c885fea4a9cfa8b02ddd0f19c15fb36c47659f5548d91796279a93f29e93d37ae80b07902f70825117ccd6
+  metadata.gz: 374aec02893b3e31880b6bb3bbaf1031e0c2b567ee1b25b8d03bb7a30bda810aa72f5ff9974d70cab6637cede23a8e734e95ec5e9a1357d14772300e64a0fc6f
+  data.tar.gz: 70637e35aa57f98661f78f787a15e181ed4737d4b1d3080adcf06e90f4564e5cec9b642055106cccf6ae29fbaa90b1695367c7ac424c89b225166f80ab007557

data/README.md

@@ -1,6 +1,5 @@
-[![Build Status](https://travis-ci.org/mumuki/mumuki-laboratory.svg?branch=master)](https://travis-ci.org/mumuki/mumuki-laboratory)
+[![Build Status](https://travis-ci.com/mumuki/mumuki-laboratory.svg?branch=master)](https://travis-ci.com/mumuki/mumuki-laboratory)
 [![Code Climate](https://codeclimate.com/github/mumuki/mumuki-laboratory/badges/gpa.svg)](https://codeclimate.com/github/mumuki/mumuki-laboratory)
-[![Test Coverage](https://codeclimate.com/github/mumuki/mumuki-laboratory/badges/coverage.svg)](https://codeclimate.com/github/mumuki/mumuki-laboratory)
 [![Issue Count](https://codeclimate.com/github/mumuki/mumuki-laboratory/badges/issue_count.svg)](https://codeclimate.com/github/mumuki/mumuki-laboratory)
 
 <img width="60%" src="https://raw.githubusercontent.com/mumuki/mumuki-laboratory/master/laboratory-screenshot.png"></img>
@@ -132,16 +131,35 @@ rails s
 ## Running tests
 
 ```bash
-bundle exec rspec
+# Run all tests
+bundle exec rake
+
+# Run only web tests (i.e. Capybara and Teaspoon)
+bundle exec rake spec:web
+```
+
+## Running Capybara tests with Selenium
+
+The Capybara config of this project supports running tests on Firefox, Chrome and Safari via Selenium. The [`webdrivers`](https://github.com/titusfortner/webdrivers) gem automatically installs (and updates) all the necessary Selenium webdrivers.
+
+By default, Capybara tests will run with the default dummy-driver (Rack test). If you want to run on a real browser, you should set `MUMUKI_SELENIUM_DRIVER` variable to `firefox`, `chrome` or `safari`. Also, a Rake task to run just the Capybara tests is available.
+
+Some examples:
+
+```bash
+# Run web tests, using Firefox
+MUMUKI_SELENIUM_DRIVER=firefox bundle exec rake spec:web
+
+# Run Capybara tests on Chrome
+MUMUKI_SELENIUM_DRIVER=chrome bundle exec rake spec:web:capybara
 ```
 
 ## Running JS tests
 
-> You need first to download [geckodriver](https://github.com/mozilla/geckodriver/releases/download/v0.27.0/geckodriver-v0.27.0-linux64.tar.gz), uncrompress
-> it and add it to your path
+The [`webdrivers`](https://github.com/titusfortner/webdrivers) gem also works with Teaspoon, no need to install anything manually. By default tests run on Firefox, but this behavior can be changed by setting `MUMUKI_SELENIUM_DRIVER` (see section above).
 
 ```bash
-MOZ_HEADLESS=1 bundle exec rake teaspoon
+bundle exec rake spec:web:teaspoon
 ```
 
 ## Running `eslint`
@@ -278,7 +296,8 @@ which are granted to be safe and stable.
   "status": "passed|passed_with_warnings|failed",
   "guide_finished_by_solution": "boolean",
   "html": "string",
-  "remaining_attempts_html": "string" ,
+  "remaining_attempts_html": "string",
+  "current_exp": "integer",
   "title_html": "string",                         // kids-only
   "button_html": "string",                        // kids-only
   "expectations": [                               // kids-only

data/Rakefile

@@ -25,7 +25,7 @@ require 'rspec/core'
 require 'rspec/core/rake_task'
 
 desc "Run all specs in spec directory (excluding plugin specs)"
-RSpec::Core::RakeTask.new(:spec => 'app:db:test:prepare')
+RSpec::Core::RakeTask.new
 
 desc "Force development environment, required by javascript specs"
 task :development do
@@ -33,8 +33,15 @@ task :development do
   ENV['RAILS_ENV'] = 'development'
 end
 
+RSpec::Core::RakeTask.new('spec:web:capybara') do |t|
+  t.pattern = 'spec/features/*_spec.rb'
+end
+
 desc "Run the javascript specs"
-task teaspoon: [:development, "app:teaspoon"]
+task 'spec:web:teaspoon': [:development, "app:teaspoon"]
+
+desc "Run all the web-related tests"
+task 'spec:web': ['spec:web:capybara', 'spec:web:teaspoon']
 
 task default: :spec
 

data/app/assets/javascripts/mumuki_laboratory/application/bridge.js

@@ -22,11 +22,32 @@
  */
 
 /**
- * @typedef {{
- *  "solution[content]"?:string,
- *  solution?: Solution,
- *  client_result?: SubmissionClientResult
- * }} Submission
+ * Contents of a submission expressed in the form of params
+ * generated and accepted by laboratory HTTP Controllers
+ *
+ * @typedef {{"solution[content]":string}} ClassicContents
+ */
+
+/**
+ * Contents of a submission expressed as an object
+ * that are created programatically
+ *
+ * @typedef {{solution: Solution}} ProgramaticContents
+ */
+
+/**
+ * Contents of a multifile submission expressed as dictionary of keys in the form
+ * `solution[content[the-filename-goes-here]]`
+ *
+ * @typedef {object} MutifileContents
+ */
+
+/**
+ * @typedef {ClassicContents|ProgramaticContents|MutifileContents} Contents
+ */
+
+/**
+ * @typedef {Contents & {client_result?: SubmissionClientResult}} Submission
  */
 
 /**

data/app/assets/javascripts/mumuki_laboratory/application/characters.js

@@ -9,8 +9,10 @@ mumuki.load(() => {
   });
 
   function placeKidsAnimations() {
+    placeAnimation('.mu-kids-character-result-aborted', 'failure');
     placeAnimation('.mu-kids-character-animation', 'blink');
     placeAnimation('.mu-kids-character-context', 'context');
+    placeAnimation('.mu-kids-character-result', 'blink');
   }
 
   function placeAnimation(selector, clip) {
@@ -20,7 +22,7 @@ mumuki.load(() => {
 
   function atRandom(array) {
     return array[Math.floor(Math.random() * array.length)];
-  }  
+  }
 
   mumuki.characters = characters;
 });

data/app/assets/javascripts/mumuki_laboratory/application/gamification.js

@@ -0,0 +1,85 @@
+mumuki.gamification = (() => {
+  class Formula {
+    static get QUADRATIC_COEFFICIENT()  { return 25; }
+    static get LINEAR_COEFFICIENT()     { return 100; }
+    static get CONSTANT_TERM()          { return -125; }
+  }
+
+  class LevelProgression {
+    constructor(currentExp) {
+      this.currentExp = currentExp;
+    }
+
+    expToLevelUp() {
+      return this.baseExpNextLevel() - this.currentExp;
+    }
+
+    baseExpNextLevel() {
+      return this.expFor(this.currentLevel() + 1);
+    }
+
+    expFor(level) {
+      const ax2 = Formula.QUADRATIC_COEFFICIENT * Math.pow(level, 2);
+      const bx = Formula.LINEAR_COEFFICIENT * level;
+      const c = Formula.CONSTANT_TERM;
+
+      return ax2 + bx + c;
+    }
+
+    currentLevel() {
+      return this.levelFor(this.currentExp);
+    }
+
+    levelFor(exp) {
+      const a = Formula.QUADRATIC_COEFFICIENT;
+      const b = Formula.LINEAR_COEFFICIENT;
+      const c = Formula.CONSTANT_TERM;
+
+      return Math.floor((-b + Math.sqrt(Math.pow(b, 2) - 4 * a * (c - exp))) / (2 * a));
+    }
+
+    triggersLevelChange(exp) {
+      return this.levelFor(exp) !== this.currentLevel();
+    }
+
+    currentLevelProgress() {
+      return (this.currentExp - this.baseExpCurrentLevel()) / (this.baseExpNextLevel() - this.baseExpCurrentLevel());
+    }
+
+    baseExpCurrentLevel() {
+      return this.expFor(this.currentLevel());
+    }
+
+    setExpMessage(exp) {
+      let expGained = exp - this.currentExp;
+
+      if (expGained > 0) {
+        this.currentExp = exp;
+        $('#mu-exp-points').html(expGained);
+        $('#mu-level-number').html(this.currentLevel());
+      }
+    }
+  }
+
+  function _setUpCurrentLevelProgression() {
+    mumuki.gamification._currentLevelProgression = new LevelProgression(currentExp());
+  }
+
+  function currentExp() {
+    return $('#mu-current-exp').val();
+  }
+
+  return {
+    Formula,
+    LevelProgression,
+
+    _setUpCurrentLevelProgression,
+
+    /** @type {LevelProgression} */
+    _currentLevelProgression: null
+  };
+})();
+
+mumuki.load(() => {
+  mumuki.gamification._setUpCurrentLevelProgression();
+});

data/app/assets/javascripts/mumuki_laboratory/application/kids.js

@@ -1,379 +1,205 @@
-mumuki.load(() => {
-  let $bubble = $('.mu-kids-character-speech-bubble').children('.mu-kids-character-speech-bubble-normal');
-
-  let availableTabs = ['.description', '.hint'];
-  let $speechParagraphs, paragraphHeight, scrollHeight, nextSpeechBlinking;
-  let currentParagraphIndex = 0;
-  let paragraphCount = 1;
-  let paragraphsLines = 2;
-  let $prevSpeech = $('.mu-kids-character-speech-bubble-normal > .mu-kids-prev-speech').hide();
-  let $nextSpeech = $('.mu-kids-character-speech-bubble-normal > .mu-kids-next-speech');
-  let $speechTabs = $('.mu-kids-character-speech-bubble-tabs > li:not(.separator)');
-  let $defaultSpeechTabName = 'description';
-  let $texts = $bubble.children(availableTabs.join(", "));
-  let $hint = $('.mu-kids-hint');
-  let $description = $('.mu-kids-description');
-  let discussionsLinkHtml = $('#mu-kids-discussion-link-html').html();
-  let $kidsContext = $('#mu-kids-context');
-  let contextModalButton = new mumuki.Button($('.mu-kids-context .modal-footer button'));
-
-  // It is important that context is shown as early as possible
-  // in order to display the loading animation
-  function showContext() {
-    $kidsContext.modal({
+mumuki.Kids = class {
+
+  constructor() {
+    this.initialize();
+    this.showContext();
+    $(document).ready(this.onReady.bind(this));
+  }
+
+  // ================
+  // == Public API ==
+  // ================
+
+  initialize() {
+    this.submitButton = new mumuki.submission.SubmitButton($('#kids-btn-retry'), $('.submission_control'));
+    this.resultActions = {};
+    this.$states = $('.mu-kids-states');
+    this.$state = $('.mu-kids-state');
+    this.$blocks = $('.mu-kids-blocks');
+    this.$exercise = $('.mu-kids-exercise');
+    this.$exerciseDescription = $('.mu-kids-exercise-description');
+    this.$stateImage = $('.mu-kids-state-image');
+    this.$contextModal = $('#mu-kids-context');
+    this.$resultsModal = $('#kids-results');
+    this.$resultsAbortedModal = $('#kids-results-aborted');
+    this.$bubbleCharacterAnimation = $('.mu-kids-character-animation');
+    this.$submissionResult =  $('.submission-results');
+  }
+
+  showContext() {
+    this.$contextModal.modal({
       backdrop: 'static',
       keyboard: false
     });
   }
 
-  $kidsContext.on('hidden.bs.modal', function () {
-    animateSpeech();
-  });
-
-  showContext();
-
-  function floatFromPx(value) {
-    return parseFloat(value.substring(0, value.length - 2));
+  showNonAbortedPopup(data, animation_name, open_modal_delay_ms = 0) {
+    this.$submissionResult.html(data.html);
+    mumuki.presenterCharacter.playAnimation(animation_name, $('.mu-kids-character-result'));
+    setTimeout(() => this._openSubmissionResultModal(data), open_modal_delay_ms);
+    this.onNonAbortedPopupCall(data);
   }
 
-  function resizeSpeechParagraphs(paragraphIndex) {
-    var previousParagraphCount = paragraphCount;
-    scrollHeight = $bubble[0].scrollHeight;
-    paragraphHeight = floatFromPx($speechParagraphs.css('line-height')) * paragraphsLines;
-    paragraphCount = Math.ceil(scrollHeight / paragraphHeight);
-    var newParagraphIndex = Math.floor((paragraphCount / previousParagraphCount) * currentParagraphIndex);
-    showParagraph(paragraphIndex || newParagraphIndex);
+  showAbortedPopup(_data) {
+    this.submitButton.disable();
+    this.$resultsAbortedModal.modal();
   }
 
-  function tabParagraphs(selector) {
-    return $('.mu-kids-character-speech-bubble > .mu-kids-character-speech-bubble-normal > div' + selector + ' > p');
-  }
+  // ==================
+  // == Hook Methods ==
+  // ==================
 
-  function updateSpeechParagraphs() {
-    $speechParagraphs = tabParagraphs('.' + getSelectedTabName());
-    resizeSpeechParagraphs(0);
+  _showSuccessPopup() {
+    this._mustImplementThisMethod()
   }
 
-  function getSelectedTabName() {
-    return $speechTabs.filter(".active").data('target') || $defaultSpeechTabName;
+  _showFailurePopup() {
+    this._mustImplementThisMethod()
   }
 
-  function showParagraph(index) {
-    $bubble[0].scrollTop = index * paragraphHeight;
-    currentParagraphIndex = index;
-    checkArrowsSpeechVisibility();
-  }
+  // ====================
+  // == Event Callback ==
+  // ====================
 
-  function checkArrowsSpeechVisibility() {
-    setVisibility($prevSpeech, currentParagraphIndex !== 0);
-    setVisibility($nextSpeech, currentParagraphIndex !== paragraphCount - 1);
+  onReady() {
+    // SubClasses may override this method
   }
 
-  function setVisibility(element, isVisible) {
-    isVisible ? element.show() : element.hide();
+  onResize() {
+    // SubClasses may override this method
   }
 
-  /**
-   * Assigns propert widths to the states and blocks areas
-   * depending on the presence and type of available states
-   *
-   * @param {*} $muKidsStateImage
-   * @param {*} $muKidsStatesContainer
-   * @param {*} $muKidsBlocks
-   * @param {number} fullMargin
-   */
-  function distributeAreas($muKidsStateImage, $muKidsStatesContainer, $muKidsBlocks, fullMargin) {
-    if ($muKidsStateImage.children().length) {
-      var ratio = $muKidsStatesContainer.hasClass('mu-kids-single-state') ? 1 : 2;
-      $muKidsStatesContainer.width($muKidsStatesContainer.height() / ratio * 1.25 - fullMargin);
-    } else {
-      $muKidsStatesContainer.width(0);
-      $muKidsBlocks.width('100%');
-    }
+  onNonAbortedPopupCall(_data) {
+    // SubClasses may override this method
   }
 
-  mumuki.kids = {
-
-    // ==========
-    // Public API
-    // ==========
-
-    // Sets a function that will be called each
-    // time the states need to be resized. The function takes:
-    //
-    // * $state: a single state area
-    // * fullMargin
-    // * preferredWidth
-    // * preferredHeight
-    //
-    // Runners must call this method on within the runner's editor.js extension
-    registerStateScaler: function (scaler) {
-      this._stateScaler = scaler;
-    },
-
-    // Sets a function that will be called each
-    // time the blocks area needs to be resized. The function takes:
-    //
-    // * $blocks: the blocks area
-    //
-    // Runners must call this method on within the runner's editor.js extension
-    registerBlocksAreaScaler: function (scaler) {
-      this._blocksAreaScaler = scaler;
-    },
-
-    // Scales a single state.
-    //
-    // This method is called by the kids code, but the runner's editor.js extension may need
-    // to perform additional calls to it.
-    scaleState: function ($state, fullMargin) {
-      const preferredWidth = $state.width() - fullMargin * 2;
-      const preferredHeight = $state.height() - fullMargin * 2;
-      this._stateScaler($state, fullMargin, preferredWidth, preferredHeight);
-    },
-
-    // Scales the blocks area.
-    //
-    // This method is called by the kids code, but the runner's editor.js extension may need
-    // to perform additional calls to it.
-    scaleBlocksArea: function ($blocks) {
-      this._blocksAreaScaler($blocks);
-    },
-
-    // Displays the kids results, updating the progress bar
-    // firing the modal and running appropriate animations.
-    //
-    // This method needs to be called by the runner's editor.html extension
-    // in order to finish an exercise
-    showResult: function (data) {
-      mumuki.updateProgressBarAndShowModal(data);
-      if (data.guide_finished_by_solution) return;
-      mumuki.kids.resultAction[data.status](data);
-    },
-
-    // Restarts the kids exercise.
-    //
-    // This method may need to be called by the runner's editor.html extension
-    // in order to recover from a failed submission
-    restart: function () {
-      mumuki.kids._hideMessageOnCharacterBubble();
-      var $bubble = mumuki.kids._getCharacterBubble();
-      Object.keys(mumuki.kids.resultAction).forEach($bubble.removeClass.bind($bubble));
-      mumuki.presenterCharacter.playAnimation('talk', mumuki.kids._getCharacterImage());
-    },
-
-    disableContextModalButton: function () {
-      contextModalButton.setWaiting();
-    },
-
-    enableContextModalButton: function () {
-      contextModalButton.enable();
-    },
-
-    showContext,
-
-    // ===========
-    // Private API
-    // ===========
-
-    _updateSubmissionResult: function (html) {
-      return $('.submission-results').html(html);
-    },
-
-    _getResultsModal: function () {
-      return $('#kids-results');
-    },
-
-    _getResultsAbortedModal: function () {
-      return $('#kids-results-aborted');
-    },
-
-    _getCharacterImage: function () {
-      return $('.mu-kids-character > img');
-    },
-
-    _getCharacterBubble: function () {
-      return $('.mu-kids-character-speech-bubble');
-    },
-
-    _getOverlay: function () {
-      return $('.mu-kids-overlay');
-    },
-
-    _hideMessageOnCharacterBubble: function () {
-      var $bubble = mumuki.kids._getCharacterBubble();
-      $bubble.find('.mu-kids-character-speech-bubble-tabs').show();
-      $bubble.find('.mu-kids-character-speech-bubble-normal').show();
-      $bubble.find('.mu-kids-character-speech-bubble-failed').hide();
-      $bubble.find('.mu-kids-discussion-link').remove();
-      Object.keys(mumuki.kids.resultAction).forEach($bubble.removeClass.bind($bubble));
-      mumuki.kids._getOverlay().hide()
-    },
-
-    _showMessageOnCharacterBubble: function (data) {
-      const renderer = new mumuki.renderers.SpeechBubbleRenderer(mumuki.kids._getCharacterBubble());
-      renderer.setDiscussionsLinkHtml(discussionsLinkHtml);
-      renderer.setResponseData(data);
-      renderer.render();
-      mumuki.kids._getOverlay().show();
-    },
-
-    _showOnSuccessPopup: function (data) {
-      mumuki.kids._updateSubmissionResult(data.html);
-      mumuki.presenterCharacter.playAnimation('success_l', mumuki.kids._getCharacterImage());
-      mumuki.kids._showMessageOnCharacterBubble(data);
-      mumuki.presenterCharacter.playAnimation('success2_l', $('.mu-kids-character-success'));
-      setTimeout(function () {
-        var $resultsKidsModal = mumuki.kids._getResultsModal();
-        if ($resultsKidsModal) {
-          $resultsKidsModal.modal({
-            backdrop: 'static',
-            keyboard: false
-          });
-          $resultsKidsModal.find('.modal-header').first().html(data.title_html);
-          $resultsKidsModal.find('.modal-footer').first().html(data.button_html);
-          mumuki.kids._showCorollaryCharacter();
-          $('.mu-close-modal').click(() => mumuki.kids._getResultsModal().modal('hide'));
-        }
-      }, 1000 * 4);
-    },
-
-    _showOnFailurePopup: function () {
-      mumuki.kids.submitButton.disable();
-      mumuki.kids._getResultsAbortedModal().modal();
-      mumuki.submission.animateTimeoutError(mumuki.kids.submitButton);
-    },
-
-    _showOnCharacterBubble: function (data) {
-      mumuki.presenterCharacter.playAnimation('failure', mumuki.kids._getCharacterImage());
-      mumuki.kids._showMessageOnCharacterBubble(data);
-    },
-
-    _showCorollaryCharacter: function () {
-      mumuki.characters.magnifying_glass.playAnimation('show', $('.mu-kids-corollary-animation'));
-    },
-
-    _stateScaler: function ($state, fullMargin, preferredWidth, preferredHeight) {
-      var $table = $state.find('gs-board > table');
-      if (!$table.length) return setTimeout(() => this.scaleState($state, fullMargin));
-
-      console.warn("You are using the default states scaler, which is gobstones-specific. Please register your own scaler in the future");
-
-      $table.css('transform', 'scale(1)');
-      var scaleX = preferredWidth / $table.width();
-      var scaleY = preferredHeight / $table.height();
-      $table.css('transform', 'scale(' + Math.min(scaleX, scaleY) + ')');
-    },
-
-    _blocksAreaScaler: function ($blocks) {
-      console.warn("You are using the default blocks scaler, which is blockly-specific. Please register your own scaler in the future");
-
-      var $blockArea = $blocks.find('#blocklyDiv');
-      var $blockSvg = $blocks.find('.blocklySvg');
-
-      $blockArea.width($blocks.width());
-      $blockArea.height($blocks.height());
-
-      $blockSvg.width($blocks.width());
-      $blockSvg.height($blocks.height());
-    },
-
-    resultAction: {}
-
-  };
-
-  mumuki.kids.submitButton = new mumuki.submission.SubmitButton($('#kids-btn-retry'), $('.submission_control'));
-
-  function showPrevParagraph() {
-    animateSpeech();
-    showParagraph(currentParagraphIndex - 1);
+  onSubmissionResultModalOpen(_data) {
+    // SubClasses may override this method
   }
 
-  function showNextParagraph() {
-    animateSpeech();
-    showParagraph(currentParagraphIndex + 1);
-    clearInterval(nextSpeechBlinking);
+  // =================
+  // == Private API ==
+  // =================
+
+  _openSubmissionResultModal(data) {
+    this.$resultsModal.modal({ backdrop: 'static', keyboard: false })
+    this.$resultsModal.find('.modal-header').first().html(data.title_html)
+    this.$resultsModal.find('.modal-footer').first().html(data.button_html)
+    $('.mu-close-modal').click(() => this.$resultsModal.modal('hide'));
+    this.onSubmissionResultModalOpen(data);
   }
 
-  function animateSpeech() {
-    mumuki.presenterCharacter.playAnimation('talk', mumuki.kids._getCharacterImage());
+  // ==========================
+  // == Called by the runner ==
+  // ==========================
+
+  // Displays the exercise results, updating the progress bar
+  // firing the modal and running appropriate animations.
+  //
+  // This method needs to be called by the runner's editor.html extension
+  // in order to finish an exercise
+  showResult(data) {
+    mumuki.progress.updateProgressBarAndShowModal(data);
+    if (data.guide_finished_by_solution) return;
+    this.resultActions[data.status](data);
   }
 
-  function animateHint() {
-    mumuki.presenterCharacter.playAnimation('hint', mumuki.kids._getCharacterImage());
+  // Restarts the kids exercise.
+  //
+  // This method may need to be called by the runner's editor.html extension
+  // in order to recover from a failed submission
+  restart() {
+    this._mustImplementThisMethod();
   }
 
-  mumuki.kids.resultAction.passed = mumuki.kids._showOnSuccessPopup;
-  mumuki.kids.resultAction.passed_with_warnings = mumuki.kids._showOnCharacterBubble;
+  // =================================
+  // == Called by the assets loader ==
+  // =================================
 
-  mumuki.kids.resultAction.aborted = mumuki.kids._showOnFailurePopup;
+  disableContextModalButton() {
+    this.$contextModalButton.setWaiting();
+  }
 
-  mumuki.kids.resultAction.failed = mumuki.kids._showOnCharacterBubble;
-  mumuki.kids.resultAction.errored = mumuki.kids._showOnCharacterBubble;
-  mumuki.kids.resultAction.pending = mumuki.kids._showOnCharacterBubble;
+  enableContextModalButton() {
+    this.$contextModalButton.enable();
+  }
 
+  // ============
+  // == Helper ==
+  // ============
 
-  $(document).ready(() => {
-    // Speech initialization
-    if (!$bubble.length) return;
+  _mustImplementThisMethod() {
+    throw new Error('TODO: implement method')
+  }
 
-    availableTabs.forEach(function (tabSelector) {
-      tabParagraphs(tabSelector).contents().unwrap().wrapAll('<p>');
-    });
+  // ============
+  // == Scaler ==
+  // ============
+
+  // Sets a function that will be called each
+  // time the states need to be resized. The function takes:
+  //
+  // * $state: a single state area
+  // * fullMargin
+  // * preferredWidth
+  // * preferredHeight
+  //
+  // Runners must call this method on within the runner's editor.js extension
+  registerStateScaler(scaler) {
+    this._stateScaler = scaler;
+  }
 
-    updateSpeechParagraphs();
-
-    resizeSpeechParagraphs();
-
-    $speechTabs.each(function (i) {
-      var $tab = $($speechTabs[i]);
-      if ($tab.data('target')) {
-        $tab.click(function () {
-          $speechTabs.removeClass('active');
-          $tab.addClass('active');
-          $texts.hide();
-          $bubble.children('.' + $tab.data('target')).show();
-          updateSpeechParagraphs();
-        })
-      }
-    });
+  // Sets a function that will be called each
+  // time the blocks area needs to be resized. The function takes:
+  //
+  // * $blocks: the blocks area
+  //
+  // Runners must call this method on within the runner's editor.js extension
+  registerBlocksAreaScaler(scaler) {
+    this._blocksAreaScaler = scaler;
+  }
 
-    if (paragraphCount > 1) {
-      nextSpeechBlinking = mumuki.setInterval(() => $nextSpeech.fadeTo('slow', 0.1).fadeTo('slow', 1.0), 1000);
-    }
+  // Scales a single state.
+  //
+  // This method is called by the kids code, but the runner's editor.js extension may need
+  // to perform additional calls to it.
+  scaleState($state, fullMargin) {
+    const preferredWidth = $state.width() - fullMargin * 2;
+    const preferredHeight = $state.height() - fullMargin * 2;
+    this._stateScaler($state, fullMargin, preferredWidth, preferredHeight);
+  }
 
-    $nextSpeech.click(showNextParagraph);
-    $prevSpeech.click(showPrevParagraph);
-    $description.click(animateSpeech);
+  // Scales the blocks area.
+  //
+  // This method is called by the kids code, but the runner's editor.js extension may need
+  // to perform additional calls to it.
+  scaleBlocksArea($blocks) {
+    this._blocksAreaScaler($blocks);
+  }
 
-    $hint.click(function () {
-      animateHint();
-      this.classList.remove('blink');
-    });
+  _stateScaler($state, fullMargin, preferredWidth, preferredHeight) {
+    const $table = $state.find('gs-board > table');
+    if (!$table.length) return setTimeout(() => this.scaleState($state, fullMargin));
 
-    // States initial resizing
-    mumuki.resize(function () {
-      var margin = 15;
-      var fullMargin = margin * 2;
+    console.warn("You are using the default states scaler, which is gobstones-specific. Please register your own scaler in the future");
 
-      let $muKidsStatesContainer = $('.mu-kids-states');
-      let $muKidsStates = $('.mu-kids-state');
-      let $muKidsBlocks = $('.mu-kids-blocks');
-      let $muKidsExercise = $('.mu-kids-exercise');
-      let $muKidsExerciseDescription = $('.mu-kids-exercise-description');
-      let $muKidsStateImage = $('.mu-kids-state-image');
+    $table.css('transform', 'scale(1)');
+    const scaleX = preferredWidth / $table.width();
+    const scaleY = preferredHeight / $table.height();
+    $table.css('transform', 'scale(' + Math.min(scaleX, scaleY) + ')');
+  }
 
-      distributeAreas($muKidsStateImage, $muKidsStatesContainer, $muKidsBlocks, fullMargin);
+  _blocksAreaScaler($blocks) {
+    console.warn("You are using the default blocks scaler, which is blockly-specific. Please register your own scaler in the future");
 
-      if (!$muKidsExerciseDescription.hasClass('mu-kids-exercise-description-fixed')) {
-        $muKidsExerciseDescription.width($muKidsExercise.width() - $muKidsStatesContainer.width() - margin);
-      }
+    const $blockArea = $blocks.find('#blocklyDiv');
+    const $blockSvg = $blocks.find('.blocklySvg');
 
-      $muKidsStates.each((index, state) => mumuki.kids.scaleState($(state), fullMargin));
-      mumuki.kids.scaleBlocksArea($muKidsBlocks);
+    $blockArea.width($blocks.width());
+    $blockArea.height($blocks.height());
 
-      if (paragraphCount <= 1) clearInterval(nextSpeechBlinking);
+    $blockSvg.width($blocks.width());
+    $blockSvg.height($blocks.height());
+  }
 
-      resizeSpeechParagraphs();
-    });
-  })
-});
+}