mumuki-laboratory 7.10.5 → 7.12.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 14e1de394e31aa3018f8d66df21561874095da64afdfb255a6fcef6189568695
-  data.tar.gz: 91c9503ff88706237d9e32e0fd1ab22b8f6ba571f47d10e54b01e46ab7a66e35
+  metadata.gz: 26c8eb799e96cc5d8e68fc6d5b9ae0e268fcc77fa99156db5051b373b6aee412
+  data.tar.gz: 4dde09623edc6d26430bbd6bc86bcd6e85347e73bcd444df00d8f7b47274859c
 SHA512:
-  metadata.gz: 177dca452ef3b4a6f64eb117559eac3509ffefdf09c2c7e6fc4a85ecb0500f710d9bfbc15e30756a4288f87eac81c01befadc5d201de9b7ae73a0ca8f8f4b06b
-  data.tar.gz: 6823c871a44ffd808592b3bfc407081784c0df77ea2062acabb9e2e6b70be87d97cb8d84c47d1de7a1b00abcaf9a14e7c9b446a55a9dfaff74af83714dac72b3
+  metadata.gz: efef98352ef78664e8aac7493a70546b824b54e97ed556d18ae1068c532564dcf509f2878e2c8105d9e5a0e318222b3aa0b1894d43fe2d1d48da397137ea6329
+  data.tar.gz: fb241340ebe7994e84ab86c08275304c74cd5669bbc2ca3b7c8bcf616d1186b088ecd3da59fe8abb80b65a1f9dfd8538eccbf31cba4f55dbd83f7a2838601911

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,163 @@
+mumuki.gamification = (() => {
+  class Formula {
+    static get QUADRATIC_COEFFICIENT()  { return 25; }
+    static get LINEAR_COEFFICIENT()     { return 100; }
+    static get CONSTANT_TERM()          { return -125; }
+  }
+
+  class DummyLevelProgression {
+    setExpMessage() {}
+
+    registerLevelUpAction() {}
+
+    registerGainedExperienceAction() {}
+
+    updateLevel() {}
+  }
+
+  class LevelProgression {
+    constructor(currentExp) {
+      this.currentExp = currentExp;
+      this.lastEarnedExp = 0;
+      this._levelUpAction = this.defaultLevelUpAction;
+      this._gainedExperienceAction = this.defaultGainedExperienceAction;
+    }
+
+    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(newExp) {
+      return this.levelFor(this.currentExp + newExp) !== this.currentLevel();
+    }
+
+    currentLevelProgress() {
+      return (this.currentExp - this.baseExpCurrentLevel()) / (this.baseExpNextLevel() - this.baseExpCurrentLevel());
+    }
+
+    baseExpCurrentLevel() {
+      return this.expFor(this.currentLevel());
+    }
+
+    exercisesToNextLevel() {
+      return Math.ceil(this.expToLevelUp() / 100);
+    }
+
+    setExpMessage(data) {
+      const exp = data.current_exp;
+      this.lastEarnedExp = exp - this.currentExp;
+
+      if (this.lastEarnedExp > 0) {
+        this.levelUpActionIfLevelUp(data.level_up_html);
+        this._gainedExperienceAction();
+
+        this.currentExp = exp;
+        this.updateLevel();
+      }
+    }
+
+    defaultGainedExperienceAction() {
+      $('#mu-exp-points').html(this.lastEarnedExp);
+      $('#mu-exp-earned-message').removeClass('hidden');
+    }
+
+    defaultLevelUpAction(_levelUpHtml) {
+      $('#mu-level-up').modal();
+    }
+
+    registerLevelUpAction(action) {
+      this._levelUpAction = action;
+    }
+
+    registerGainedExperienceAction(action) {
+      this._gainedExperienceAction = action;
+    }
+
+    levelUpActionIfLevelUp(levelUpHtml) {
+      if (this.triggersLevelChange(this.lastEarnedExp)) {
+        this._levelUpAction(levelUpHtml);
+      }
+    }
+
+    animateExperienceCounter(selector) {
+      mumuki.animateNumberCounter(selector, this.lastEarnedExp);
+    }
+
+    updateLevel() {
+      const $muLevelProgress = $('#mu-level-progress');
+
+      $('#mu-solve-more-exercises span').text(this.exercisesToNextLevel());
+      $('.mu-level-number').html(this.currentLevel());
+      $('.mu-level-tooltip').attr("title", (_, value) => `${value} ${this.currentLevel()}`);
+
+      if (this.currentLevelProgress() === 0) {
+        $muLevelProgress.attr("display", "none");
+      }
+
+      $muLevelProgress.animate(
+        {'progress': this.currentLevelProgress() * 250},
+        {
+          step: function(progress) {
+            let pattern = progress + ", 999";
+            $(this).attr("stroke-dasharray", pattern);
+          },
+          duration: 1000
+        });
+    }
+  }
+
+  function _setUpCurrentLevelProgression() {
+    if (_gamificationEnabled()) {
+      mumuki.gamification.currentLevelProgression = new LevelProgression(currentExp());
+    } else {
+      mumuki.gamification.currentLevelProgression = new DummyLevelProgression();
+    }
+  }
+
+  function _gamificationEnabled() {
+    return $('#mu-current-exp').length;
+  }
+
+  function currentExp() {
+    return parseInt($('#mu-current-exp').val());
+  }
+
+  return {
+    Formula,
+    LevelProgression,
+
+    _setUpCurrentLevelProgression,
+
+    /** @type {LevelProgression|DummyLevelProgression} */
+    currentLevelProgression: null
+  };
+})();
+
+mumuki.load(() => {
+  mumuki.gamification._setUpCurrentLevelProgression();
+  mumuki.gamification.currentLevelProgression.updateLevel();
+});

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

@@ -1,379 +1,217 @@
-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({
-      backdrop: 'static',
-      keyboard: false
-    });
+mumuki.Kids = class {
+
+  constructor() {
+    this.initialize();
+    this.showContext();
+    $(document).ready(this.onReady.bind(this));
   }
 
-  $kidsContext.on('hidden.bs.modal', function () {
-    animateSpeech();
-  });
+  // ================
+  // == 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.resultsCarrousel = new mumuki.ModalCarrousel('.mu-kids-results-carrousel');
+    this.$resultsAbortedModal = $('#kids-results-aborted');
+    this.$bubbleCharacterAnimation = $('.mu-kids-character-animation');
+    this.$submissionResult =  $('.submission-results');
+    mumuki.gamification.currentLevelProgression.registerLevelUpAction(this.levelUpAction);
+    mumuki.gamification.currentLevelProgression.registerGainedExperienceAction(this.gainedExperienceAction);
+  }
 
-  showContext();
+  gainedExperienceAction() {
+    mumuki.gamification.currentLevelProgression.animateExperienceCounter('.mu-kids-results .mu-experience');
+  }
 
-  function floatFromPx(value) {
-    return parseFloat(value.substring(0, value.length - 2));
+  levelUpAction(levelUpHtml) {
+    $('.mu-kids-results-carrousel').append(levelUpHtml);
   }
 
-  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);
+  showContext() {
+    this.$contextModal.modal({
+      backdrop: 'static',
+      keyboard: false
+    });
   }
 
-  function tabParagraphs(selector) {
-    return $('.mu-kids-character-speech-bubble > .mu-kids-character-speech-bubble-normal > div' + selector + ' > p');
+  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 updateSpeechParagraphs() {
-    $speechParagraphs = tabParagraphs('.' + getSelectedTabName());
-    resizeSpeechParagraphs(0);
+  showAbortedPopup(_data) {
+    this.submitButton.disable();
+    this.$resultsAbortedModal.modal();
   }
 
-  function getSelectedTabName() {
-    return $speechTabs.filter(".active").data('target') || $defaultSpeechTabName;
+  // ==================
+  // == Hook Methods ==
+  // ==================
+
+  _showSuccessPopup() {
+    this._mustImplementThisMethod()
   }
 
-  function showParagraph(index) {
-    $bubble[0].scrollTop = index * paragraphHeight;
-    currentParagraphIndex = index;
-    checkArrowsSpeechVisibility();
+  _showFailurePopup() {
+    this._mustImplementThisMethod()
   }
 
-  function checkArrowsSpeechVisibility() {
-    setVisibility($prevSpeech, currentParagraphIndex !== 0);
-    setVisibility($nextSpeech, currentParagraphIndex !== paragraphCount - 1);
+  // ====================
+  // == Event Callback ==
+  // ====================
+
+  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) {
+    this.resultsCarrousel.show();
   }
 
-  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);
+    mumuki.gamification.currentLevelProgression.setExpMessage(data);
+    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();
-    });
-  })
-});
+}