mumuki-laboratory 7.5.0

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

@@ -0,0 +1,17 @@
+mumuki.load(function () {
+  $('.btn-confirmation').on('click change', function (evt) {
+    var token = new mumuki.CsrfToken();
+
+    $.ajax(token.newRequest({
+      method: 'POST',
+      url: $(this).data('confirmation-url'),
+      xhrFields: {withCredentials: true},
+      success: function(data){
+        mumuki.updateProgressBarAndShowModal(data);
+      }
+    }));
+
+    return true;
+  });
+});
+

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

@@ -0,0 +1,175 @@
+var mumuki = mumuki || {};
+(function (mumuki) {
+  function historicalQueries() {
+    var queries = $('#historical_queries').val();
+    if (queries) {
+      return JSON.parse(queries);
+    } else {
+      return [];
+    }
+  }
+  function renderPrompt() {
+    var prompt = $('#prompt').attr('value');
+    if (prompt && prompt.indexOf('ム') >= 0) {
+      $('.jquery-console-prompt-label')
+        .html('')
+        .append('<i class="text-primary da da-mumuki"></i>')
+        .append('<span>&nbsp;&nbsp;</span>');
+    }
+  }
+
+  function classForStatus(status) {
+    return 'jquery-console-message-' + (status === 'passed' ? 'value' : 'error');
+  }
+
+  function reportStatus(message, status, report) {
+    report([{
+      msg: message,
+      className: classForStatus(status)
+    }]);
+    renderPrompt();
+  }
+
+  function clearConsole() {
+    $('.jquery-console-message-error').remove();
+    $('.jquery-console-message-value').remove();
+    $('.jquery-console-prompt-box:not(:last)').remove()
+  }
+
+  function QueryConsole() {
+    this.endpoint = $('#console_endpoint').val();
+    this.token = new mumuki.CsrfToken();
+    this.statefulConsole = $('#stateful_console').val() === "true";
+    this.lines = [];
+  }
+
+  QueryConsole.prototype = {
+    newQuery: function (line) {
+      var cookies = this.statefulConsole ? this.lines : [];
+      return new Query(line, cookies, this);
+    },
+    clearState: function () {
+      this.lines = [];
+      clearConsole();
+    },
+    sendQuery: function (queryContent) {
+      this.controller.promptText(queryContent);
+      this.controller.typer.commandTrigger();
+    },
+    preloadQuery: function (queryWithResults) {
+      this.lines.push(queryWithResults.query);
+      this.enqueuePreloadedQuery(queryWithResults);
+      this.sendQuery(queryWithResults.query);
+    },
+    enqueuePreloadedQuery: function (queryWithResults) {
+      this.preloadedQuery = queryWithResults;
+    },
+    dequeuePreloadedQuery: function () {
+      var result = this.preloadedQuery;
+      this.preloadedQuery = undefined;
+      return result;
+    },
+    preloadHistoricalQueries: function () {
+      var self = this;
+      historicalQueries().forEach(function (queryWithResults) {
+        self.preloadQuery(queryWithResults);
+      });
+    }
+  };
+
+  function Query(line, cookie, console) {
+    this.console = console;
+    this.line = line;
+    this.cookie = cookie;
+  }
+
+  Query.prototype = {
+    get token() {
+      return this.console.token;
+    },
+    get content() {
+      var firstEditor = mumuki.page.editors[0];
+      if (firstEditor && $("#include_solution").prop("checked"))
+        return firstEditor.getValue();
+      else
+        return '';
+    },
+    submit: function (report, queryConsole, line) {
+      var self = this;
+      var preloadedQuery = queryConsole.dequeuePreloadedQuery();
+      if (preloadedQuery) {
+        return reportStatus(preloadedQuery.result, preloadedQuery.status, report);
+      }
+
+      $.ajax(self._request).done(function (response) {
+        if (response.query_result) {
+          self.displayGoalResult(response);
+          response = response.query_result;
+        }
+        self.displayQueryResult(report, queryConsole, line, response);
+      }).fail(function (response) {
+        reportStatus(response.responseText, 'failed', report);
+      });
+    },
+    displayGoalResult: function (response) {
+      if (response.status == 'passed') {
+        $('.submission-results').show();
+        $('.submission-results').html(response.html);
+        mumuki.pin.scroll();
+        mumuki.updateProgressBarAndShowModal(response);
+      } else {
+        $('.submission-results').hide();
+        $('.progress-list-item.active').attr('class', "progress-list-item text-center danger active");
+      }
+    },
+    displayQueryResult: function (report, queryConsole, line, response) {
+      if (response.status !== 'errored') {
+        queryConsole.lines.push(line);
+        reportStatus(response.result, response.status, report);
+      } else {
+        reportStatus(response.result, 'failed', report);
+      }
+    },
+    get _request() {
+      var self = this;
+      return self.token.newRequest({
+        url: self._requestUrl,
+        type: 'POST',
+        data: self._requestData
+      })
+    },
+    get _requestUrl() {
+      return this.console.endpoint;
+    },
+    get _requestData() {
+      return {content: this.content, query: this.line, cookie: this.cookie};
+    }
+  };
+
+
+  mumuki.load(function () {
+    var prompt = $('#prompt').attr('value');
+    var queryConsole = new QueryConsole();
+
+    $('.console-reset').click(function () {
+      queryConsole.clearState();
+    });
+
+    queryConsole.controller = $('.console').console({
+      promptLabel: prompt + ' ',
+      commandValidate: function (line) {
+        return line !== "";
+      },
+      commandHandle: function (line, report) {
+        queryConsole.newQuery(line).submit(report, queryConsole, line);
+      },
+      autofocus: !!$('#solution_editor_bottom').val(),
+      animateScroll: true,
+      promptHistory: true
+    });
+
+    renderPrompt();
+    queryConsole.preloadHistoricalQueries();
+  });
+
+}(mumuki));

data/app/assets/javascripts/mumuki_laboratory/application/csrf-token.js

@@ -0,0 +1,18 @@
+var mumuki = mumuki || {};
+(function (mumuki) {
+  function CsrfToken() {
+    this.value = $('meta[name="csrf-token"]').attr('content');
+  }
+
+  CsrfToken.prototype = {
+    newRequest: function (data) {
+      var self = this;
+      data.beforeSend = function (xhr) {
+        xhr.setRequestHeader('X-CSRF-Token', self.value);
+      };
+      return data;
+    }
+  };
+
+  mumuki.CsrfToken = CsrfToken;
+}(mumuki));

data/app/assets/javascripts/mumuki_laboratory/application/custom-editor.js

@@ -0,0 +1,21 @@
+var mumuki = mumuki || {};
+
+(function (mumuki) {
+
+  var CustomEditor = {
+    sources: [],
+
+    addSource: function (source) {
+      CustomEditor.sources.push(source);
+    },
+
+    // Each external source must implement getContent method
+
+    getContent: function () {
+      return CustomEditor.sources.map( e => e.getContent() );
+    }
+  };
+
+  mumuki.CustomEditor = CustomEditor;
+
+}(mumuki));

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

@@ -0,0 +1,76 @@
+var mumuki = mumuki || {};
+
+mumuki.load(function () {
+  var $newDiscussionModal = $('.new-discussion-modal');
+  var $newDiscussion = $('.discussion-create');
+
+  $newDiscussion.click(function () {
+    $newDiscussionModal.modal({
+      backdrop: 'static',
+      keyboard: false
+    });
+  });
+
+  var $subscriptionSpans = $('.discussion-subscription > span');
+  var $upvoteSpans = $('.discussion-upvote > span');
+
+  function createNewMessageEditor() {
+    var $textarea = $("#new-discussion-message");
+    var textarea = $textarea[0];
+    if(!textarea) return;
+
+    return new mumuki.editor.CodeMirrorBuilder(textarea)
+      .setupSimpleEditor()
+      .setupMinLines($textarea.data('lines'))
+      .build();
+  }
+
+  function createReadOnlyEditors() {
+    return $(".read-only-editor").map(function (index, textarea) {
+      var $textarea = $("#solution_content");
+
+      return new mumuki.editor.CodeMirrorBuilder(textarea)
+        .setupReadOnlyEditor()
+        .setupMinLines($textarea.data('lines'))
+        .setupLanguage()
+        .build();
+    });
+  }
+
+  createReadOnlyEditors();
+  createNewMessageEditor();
+  
+  var Forum = {
+    toggleButton: function (spans) {
+      spans.toggleClass('hidden');
+    },
+    token: new mumuki.CsrfToken(),
+    tokenRequest: function (data) {
+      return $.ajax(Forum.token.newRequest(data))
+    },
+    discussionPost: function (url) {
+      return Forum.tokenRequest({
+        url: url,
+        method: 'POST',
+        xhrFields: {withCredentials: true}
+      })
+    },
+    discussionSubscription: function (url) {
+      Forum.discussionPostAndToggle(url, $subscriptionSpans)
+    },
+    discussionUpvote: function (url) {
+      Forum.discussionPostAndToggle(url, $upvoteSpans)
+    },
+    discussionPostAndToggle: function (url, elem) {
+      Forum.discussionPost(url).done(Forum.toggleButton(elem))
+    },
+    discussionMessageToggleApprove : function (url, elem) {
+      Forum.discussionPost(url).done(function () {
+        elem.toggleClass("selected");
+      })
+    }
+  };
+
+  mumuki.Forum = Forum;
+
+});

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

@@ -0,0 +1,31 @@
+// This module defines three client-side-only special sections, and allows them to be replaced
+// by adding the `mu-elipsis` class, or by calling `mumuki.elipsis()`:
+//
+// * <elipsis-for-student@ ...code... @elipsis-for-student>                     : replaces code with an elipsis
+// * <hidden-for-student@ ...code... @hidden-for-student>                       : completely hides code
+// * <description-for-student[...text...]@ ...code... @description-for-student> : replaces code a message sourrounded by elipsis
+//
+//
+// This module assumes the strings are already markdown-like escaped code strings, not plain code
+(function (mumuki) {
+
+  function elipsis(code) {
+    return code
+      .replace(/&lt;elipsis-for-student@[\s\S]*?@elipsis-for-student&gt;/g, ' ... ')
+      .replace(/&lt;hidden-for-student@[\s\S]*?@hidden-for-student&gt;/g, '')
+      .replace(/&lt;description-for-student\[([^\]]*)\]@[\s\S]*?@description-for-student&gt;/g, ' ... $1 ... ');
+  }
+
+  mumuki.elipsis = elipsis;
+  mumuki.elipsis.replaceHtml = () => {
+    let $elipsis = $('.mu-elipsis');
+    $elipsis.each((it, e) =>  {
+      let $e = $(e);
+      $e.html(mumuki.elipsis($e.html()));
+    })
+  };
+
+  mumuki.load(() => {
+    mumuki.elipsis.replaceHtml();
+  });
+})(mumuki);

data/app/assets/javascripts/mumuki_laboratory/application/free-form.js

@@ -0,0 +1,32 @@
+mumuki.load(() => {
+  function dumpInput(values, element) {
+    values[element.attr('name')] = element.val();
+  }
+
+  function loadInput(values, element) {
+    element.val(values[element.attr('name')]);
+  }
+
+	function dumpForm(_event) {
+    let  values = {};
+    $('.mu-free-form-input').each(function () {
+      dumpInput(values, $(this));
+    });
+		$('#solution_content').attr('value', JSON.stringify(values));
+  }
+
+  function loadForm() {
+    let json = $('#solution_content').val();
+    if (!json) return;
+
+    let values = JSON.parse(json);
+    $('.mu-read-only-editor .mu-free-form-input').prop('disabled', true);
+
+    $('.mu-free-form-input').each(function () {
+      loadInput(values, $(this));
+    });
+  }
+
+  mumuki.onInputsReady('.mu-free-form-input', loadForm);
+  $('.mu-free-form-input').change(dumpForm);
+});

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

@@ -0,0 +1,12 @@
+(() => {
+  // Declares a `document.ready` handler that will be
+  // activated only when there is at least one element that match
+  // the given selector
+	mumuki.onInputsReady = (inputsSelector, callback) => {
+		$(document).ready((event) => {
+			if ($(inputsSelector).length === 0) return;
+
+			callback(event);
+		})
+	}
+})();

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

@@ -0,0 +1,17 @@
+var mumuki = mumuki || {};
+
+(function (mumuki) {
+  // When using Turbolinks, intervals loaded inside <body> aren't destroyed on page changes
+  // Use this function instead if you want the behaviour of a regular setInterval
+  mumuki.setInterval = function (intervalFunction, milliseconds) {
+    const interval = setInterval.apply(this, [intervalFunction, milliseconds]);
+
+    // Using one to avoid calling clearInterval on every page chance.
+    $(document).one('turbolinks:before-cache turbolinks:before-render', function () {
+      clearInterval(interval);
+    });
+
+    return interval;
+  }.bind(this);
+
+}(mumuki));

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

@@ -0,0 +1,342 @@
+mumuki.load(function () {
+  var $bubble = $('.mu-kids-character-speech-bubble').children('.mu-kids-character-speech-bubble-normal');
+
+  var availableTabs = ['.description', '.hint'];
+  var $speechParagraphs, paragraphHeight, scrollHeight, nextSpeechBlinking;
+  var currentParagraphIndex = 0;
+  var paragraphCount = 1;
+  var paragraphsLines = 2;
+  var $prevSpeech = $('.mu-kids-character-speech-bubble-normal > .mu-kids-prev-speech').hide();
+  var $nextSpeech = $('.mu-kids-character-speech-bubble-normal > .mu-kids-next-speech');
+  var $speechTabs = $('.mu-kids-character-speech-bubble-tabs > li:not(.separator)');
+  var $defaultSpeechTabName = 'description';
+  var $texts = $bubble.children(availableTabs.join(", "));
+  var $hint = $('.mu-kids-hint');
+  var $description = $('.mu-kids-description');
+  var discussionsLinkHtml = $('#mu-kids-discussion-link-html').html();
+  var contextModalButton = new mumuki.Button($('.mu-kids-context .modal-footer button'));
+
+  function floatFromPx(value) {
+    return parseFloat(value.substring(0, value.length - 2));
+  }
+
+  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);
+  }
+
+  function tabParagraphs(selector) {
+    return $('.mu-kids-character-speech-bubble > .mu-kids-character-speech-bubble-normal > div' + selector + ' > p');
+  }
+
+  function updateSpeechParagraphs() {
+    $speechParagraphs = tabParagraphs('.' + getSelectedTabName());
+    resizeSpeechParagraphs(0);
+  }
+
+  function getSelectedTabName() {
+    return $speechTabs.filter(".active").data('target') || $defaultSpeechTabName;
+  }
+
+  function showParagraph(index) {
+    $bubble[0].scrollTop = index * paragraphHeight;
+    currentParagraphIndex = index;
+    checkArrowsSpeechVisibility();
+  }
+
+  function checkArrowsSpeechVisibility() {
+    setVisibility($prevSpeech, currentParagraphIndex !== 0);
+    setVisibility($nextSpeech, currentParagraphIndex !== paragraphCount - 1);
+  }
+
+  function setVisibility(element, isVisible) {
+    isVisible ? element.show() : element.hide();
+  }
+
+  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();
+    },
+
+    // ===========
+    // 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);
+  }
+
+  function showNextParagraph() {
+    animateSpeech();
+    showParagraph(currentParagraphIndex + 1);
+    clearInterval(nextSpeechBlinking);
+  }
+
+  function animateSpeech() {
+    mumuki.presenterCharacter.playAnimation('talk', mumuki.kids._getCharacterImage());
+  }
+
+  function animateHint() {
+    mumuki.presenterCharacter.playAnimation('hint', mumuki.kids._getCharacterImage());
+  }
+
+  mumuki.kids.resultAction.passed = mumuki.kids._showOnSuccessPopup;
+  mumuki.kids.resultAction.passed_with_warnings = mumuki.kids._showOnCharacterBubble;
+
+  mumuki.kids.resultAction.aborted = mumuki.kids._showOnFailurePopup;
+
+  mumuki.kids.resultAction.failed = mumuki.kids._showOnCharacterBubble;
+  mumuki.kids.resultAction.errored = mumuki.kids._showOnCharacterBubble;
+  mumuki.kids.resultAction.pending = mumuki.kids._showOnCharacterBubble;
+
+  $('.mu-kids-context').on('hidden.bs.modal', function () {
+    animateSpeech();
+  });
+
+  $(document).ready(() => {
+    // Speech initialization
+    if (!$bubble.length) return;
+
+    availableTabs.forEach(function (tabSelector) {
+      tabParagraphs(tabSelector).contents().unwrap().wrapAll('<p>');
+    });
+
+    updateSpeechParagraphs();
+
+    resizeSpeechParagraphs();
+
+    $speechTabs.each(function (i) {
+      var $tab = $($speechTabs[i]);
+      $tab.click(function () {
+        $speechTabs.removeClass('active');
+        $tab.addClass('active');
+        $texts.hide();
+        $bubble.children('.' + $tab.data('target')).show();
+        updateSpeechParagraphs();
+      })
+    });
+
+    if (paragraphCount > 1) {
+      nextSpeechBlinking = mumuki.setInterval(() => $nextSpeech.fadeTo('slow', 0.1).fadeTo('slow', 1.0), 1000);
+    }
+
+    $nextSpeech.click(showNextParagraph);
+    $prevSpeech.click(showPrevParagraph);
+    $description.click(animateSpeech);
+
+    $hint.click(function () {
+      animateHint();
+      this.classList.remove('blink');
+    });
+
+    // States initial resizing
+
+    mumuki.resize(function () {
+      var margin = 15;
+      var fullMargin = margin * 2;
+
+      var $muKidsStatesContainer = $('.mu-kids-states');
+      var $muKidsStates = $('.mu-kids-state');
+
+      var dimension = $muKidsStatesContainer.height() / 2 * 1.25 - fullMargin;
+      $muKidsStatesContainer.width(dimension);
+
+      var $muKidsExercise = $('.mu-kids-exercise');
+      var $muKidsExerciseDescription = $('.mu-kids-exercise-description');
+
+      $muKidsExerciseDescription.width($muKidsExercise.width() - $muKidsStatesContainer.width() - margin);
+
+      $muKidsStates.each((index, state) => mumuki.kids.scaleState($(state), fullMargin));
+      mumuki.kids.scaleBlocksArea($('.mu-kids-blocks'));
+
+      if (paragraphCount <= 1) clearInterval(nextSpeechBlinking);
+
+      resizeSpeechParagraphs();
+    });
+  })
+});