mumuki-laboratory 8.1.3 → 8.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7bcc70727fa140c5ad7c313f8b9e9a5e1f9a9e3b383b1add72556f64d4fed4e3
-  data.tar.gz: 874a6b5d2f8a64249560dfb11f9f743d6f11267e8c73602e0d53abacb8e9c651
+  metadata.gz: a7c7290ee8af41b2af9f9d34977a9df9095fd3fb38a74e167bb1678b754cc001
+  data.tar.gz: 364699a1f019910da6ccc23d6970d20053a2ea36de3351fd32368c31395df89a
 SHA512:
-  metadata.gz: 6c9b7889090c806dd880c5cd9d2730117d2d4927ef18765582b0d79010463f4596bdcf8f65f297b95e0bcec238ec7e36311bffe889d29460191cd79e929afdfb
-  data.tar.gz: 2304d78fabb8a5268fb33f79737480d94550fdc22c9a94f9cd65f70ca02ed1e2dbb7d78089690503a85b99ec88dd845a70678970997a3bba4a3c644b2e90276e
+  metadata.gz: b1f8f15e334cfc4599eab6b8872c829553fe2c92559bc5a22f796a23df711caf233317982ca0c057eaf8e8c0c9ddbc4209e1f3454ac9cfa379f79ce07a154265
+  data.tar.gz: f38ef6d9aef9f9d29ff14d9a091c60906438789b124334031bd102e605296fb8d844b5d2a2f97dd094e4586c4dd06a662c149d3f9d1ad6ad70cf5b5f4edf21d5

data/README.md

@@ -1,6 +1,5 @@
-[![Build Status](https://travis-ci.com/mumuki/mumuki-laboratory.svg?branch=master)](https://travis-ci.com/mumuki/mumuki-laboratory)
+![Build status](https://github.com/mumuki/mumuki-laboratory/workflows/Test%20and%20deploy/badge.svg?branch=master)
 [![Code Climate](https://codeclimate.com/github/mumuki/mumuki-laboratory/badges/gpa.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>
 
@@ -286,6 +285,7 @@ which are granted to be safe and stable.
   * `updateButtonsVisibility`
 * `mumuki.submission`
   * `processSolution`
+  * `sendSolution`
   * `registerContentSyncer`
 * `mumuki.version`
 
@@ -482,16 +482,27 @@ mumuki.editors.addCustomSource({
 });
 ```
 
-#### 2.5 Optional: Sending your solution to the server programmatically
+#### 2.5 Optional: Triggering submission processing programmatically
 
-Your solution will be automatically sent to the client when the submit button is pressed. However,
-if you need to trigger submission process programmatically, call `mumuki.submission.processSolution`:
+Your solution will be automatically sent to the client and processed when the submit button is pressed.
+However, if you need to trigger the whole submission process programmatically,
+call `mumuki.submission.processSolution`:
 
 ```javascript
 mumuki.submission.processSolution({solution: {content: /* ... */}});
 ```
 
-#### 2.6 Optional: customizing your submit button
+#### 2.6 Optional: Sending your solution to the server programmatically
+
+Your solution will be automatically sent to the client when the submit button is pressed, as part of the
+solution processing. However, if you just need to send your submission to the server programmatically,
+call `mumuki.submission.sendSolution`:
+
+```javascript
+mumuki.submission.sendSolution({solution: {content: /* ... */}});
+```
+
+#### 2.7 Optional: customizing your submit button
 
 You can alternatively override the default submit button UI and behaviour, by replacing it with a custom component. In order to
 do that, override the `.mu-submit-button` or the kids-specific `.mu-kids-submit-button`:
@@ -506,7 +517,7 @@ However, doing this is tricky, since you will need to manually update the UI and
 * `mumuki.bridge.Laboratory.runTests`
 * `mumuki.updateProgressBarAndShowModal`
 
-#### 2.7 Register kids scalers
+#### 2.8 Register kids scalers
 
 Kids layouts have some special areas:
 
@@ -525,7 +536,7 @@ mumuki.kids.registerBlocksAreaScaler(($blocks) => {
 });
 ```
 
-#### 2.8 Notify when your assets have been loaded
+#### 2.9 Notify when your assets have been loaded
 
 In order to remove loading spinners, you will need to call `mumuki.assetsLoadedFor` when your code is ready.
 

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

@@ -113,7 +113,8 @@ mumuki.bridge = (() => {
      * @returns {SubmissionResult}
      */
     _preRenderResult(result) {
-      result.class_for_progress_list_item = mumuki.renderers.progressListItemClassForStatus(result.status, true);
+      result.class_for_progress_list_item = mumuki.renderers.results.progressListItemClassForStatus(result.status, true);
+      result.title_html = mumuki.renderers.results.translatedTitleHtml(result.status, result.in_gamified_context);
       return result;
     }
   }

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

@@ -49,7 +49,6 @@ mumuki.Button = class {
    */
   wait() {
     this.$button.off('click');
-
     this.setWaiting();
   }
 
@@ -77,7 +76,6 @@ mumuki.Button = class {
    */
   continue() {
     this.$button.off('click');
-
     this.enable();
 
     this.$button.on('click', this.main);
@@ -106,11 +104,11 @@ mumuki.Button = class {
   }
 
   setWaitingText () {
-    this.$button.html('<i class="fa fa-refresh fa-spin"></i> ' + this.$button.attr('data-waiting'));
+    this.$button.html('<i class="fas fa-sync-alt fa-spin"></i> ' + this.$button.attr('data-waiting'));
   }
 
   setRetryText() {
-    this.$button.html('<i class="fa fa-undo"></i>');
+    this.$button.html('<i class="fas fa-undo"></i>');
   }
 
   setOriginalContent () {

data/app/assets/javascripts/mumuki_laboratory/application/codemirror-builder.js

@@ -1,7 +1,7 @@
 (() => {
   function submit() {
     $('body').removeClass('fullscreen');
-    $('.editor-resize .fa-stack-1x').removeClass('fa-compress').addClass('fa-expand');
+    $('.editor-resize .fas').toggleClass('fa-expand fa-compress');
     $('.btn-submit').click();
   }
 

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

@@ -36,7 +36,7 @@ mumuki.page.editors = [];
 
   function toggleFullscreen() {
     $('body').toggleClass('fullscreen');
-    $('.editor-resize .fa-stack-1x').toggleClass('fa-expand').toggleClass('fa-compress');
+    $('.editor-resize .fas').toggleClass('fa-expand fa-compress');
   }
 
   function indentWithSpaces(cm) {
@@ -62,7 +62,7 @@ mumuki.page.editors = [];
 
   function setEditorLanguage(editor, language) {
     editor.setOption("mode", language);
-    editor.setOption('theme', 'default ' + language);
+    editor.setOption('theme', 'mu-light ' + language);
   }
 
   function syncContent(){

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

@@ -0,0 +1,73 @@
+mumuki.I18n = (() => {
+
+  const translations = {
+    'es': {
+      aborted: () => "Ups, no pudimos evaluar tu solución",
+      errored: () => "¡Ups! Tu solución no se puede ejecutar",
+      failed: () => "Tu solución no pasó las pruebas",
+      passed: () => "¡Muy bien! Tu solución pasó todas las pruebas",
+      passed_with_warnings: () => "Tu solución funcionó, pero hay cosas que mejorar",
+      pending: () => "Pendiente",
+      skipped: () => "Venís aprendiendo muy bien, por lo que aprobaste este ejercicio",
+    },
+    'es-CL': {
+      aborted: () => "Ups, no pudimos evaluar tu solución",
+      errored: () => "¡Ups! Tu solución no se puede ejecutar",
+      failed: () => "Tu solución no pasó las pruebas",
+      passed: () => "¡Muy bien! Tu solución pasó todas las pruebas",
+      passed_with_warnings: () => "Tu solución funcionó, pero hay cosas que mejorar",
+      pending: () => "Pendiente",
+      skipped: () => "Vienes aprendiendo muy bien, por lo que aprobaste este ejercicio",
+    },
+    'en': {
+      aborted: () => "Oops, we couldn't evaluate your solution",
+      errored: () => "Oops, your solution didn't work",
+      failed: () => "Oops, something went wrong",
+      passed: () => "Everything is in order! Your solution passed all our tests!",
+      passed_with_warnings: () => "It worked, but you can do better",
+      pending: () => "Pending",
+      skipped: () => "You are doing very well, so you've passed this exercise",
+    },
+    'pt': {
+      aborted: () => "Opa, não pudemos avaliar sua solução",
+      errored: () => "Opa! Sua solução não pode ser executada",
+      failed: () => "Sua solução não passou as provas",
+      passed: () => "Muito bem! Sua solução passou todos os testes",
+      passed_with_warnings: () => "Sua solução funcionou, mas há coisas para melhorar",
+      pending: () => "Pendente",
+      skipped: () => "Você está aprendendo muito bem e passou neste exercício",
+    }
+  }
+
+  return new class {
+
+    translate(key, data = {}) {
+      const translationValue = this._translationValue(key);
+      switch (typeof(translationValue)) {
+        case 'string': return translationValue;
+        case 'function': return translationValue(data);
+        default: return `Translation missing: ${mumuki.locale}, \`${key}\``;
+      }
+    }
+
+    t(key, data = {}) {
+      return mumuki.I18n.translate(key, data);
+    }
+
+    register(translationsToOverride) {
+      const locales = Object.keys(translations);
+      locales.forEach((it) => translations[it] = Object.assign(translations[it], translationsToOverride[it]));
+    }
+
+    _prefixTranslationKey(key) {
+      this._prefix = $('[data-i18n-prefix]');
+      return this._prefix.get(0) ? `${this._prefix.data('i18n-prefix')}_${key}` : key;
+    }
+
+    _translationValue(key) {
+      let translationLocale = translations[mumuki.locale];
+      return translationLocale && (translationLocale[this._prefixTranslationKey(key)] || translationLocale[key]);
+    }
+
+  }
+})();

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

@@ -1,3 +1,7 @@
+mumuki.load(() => {
+  mumuki.isKidsExercise = () => $('.mu-kids-exercise').length > 0;
+})
+
 mumuki.Kids = class {
 
   constructor() {
@@ -11,8 +15,9 @@ mumuki.Kids = class {
   // ================
 
   initialize() {
-    this.submitButton = new mumuki.submission.SubmitButton($('#kids-btn-retry'), $('.submission_control'));
+    this.submitButton = new mumuki.submission.KidsSubmitButton($('#kids-btn-retry'), $('.submission_control'));
     this.resultActions = {};
+    this.$overlay = $('.mu-kids-overlay');
     this.$states = $('.mu-kids-states');
     this.$state = $('.mu-kids-state');
     this.$blocks = $('.mu-kids-blocks');
@@ -27,6 +32,14 @@ mumuki.Kids = class {
     this.$submissionResult =  $('.submission-results');
     mumuki.gamification.currentLevelProgression.registerLevelUpAction(this.levelUpAction);
     mumuki.gamification.currentLevelProgression.registerGainedExperienceAction(this.gainedExperienceAction);
+    this.$resultsModal.on('hidden.bs.modal', this.resetExerciseIfSubmitless);
+    this.$resultsAbortedModal.on('hidden.bs.modal', this.resetExerciseIfSubmitless);
+  }
+
+  resetExerciseIfSubmitless() {
+    if ($('.mu-submitless-exercise').get(0)) {
+      mumuki.kids.submitButton.continue();
+    }
   }
 
   gainedExperienceAction() {
@@ -56,6 +69,14 @@ mumuki.Kids = class {
     this.$resultsAbortedModal.modal();
   }
 
+  showOverlay() {
+    this.$overlay.show();
+  }
+
+  hideOverlay() {
+    this.$overlay.hide();
+  }
+
   // ==================
   // == Hook Methods ==
   // ==================

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

@@ -13,7 +13,7 @@ mumuki.load(() => {
       this.$contextModalButton = new mumuki.Button($('#mu-kids-context .mu-kids-modal-button.mu-close'));
 
       this.resultActions.passed = this._showSuccessPopup.bind(this);
-      this.resultActions.passed_with_warnings = this._showSuccessPopup.bind(this);
+      this.resultActions.passed_with_warnings = this._showPassedWithWarnings.bind(this);
       this.resultActions.failed = this._showFailurePopup.bind(this);
       this.resultActions.errored = this._showFailurePopup.bind(this);
       this.resultActions.pending = this._showFailurePopup.bind(this);
@@ -50,6 +50,10 @@ mumuki.load(() => {
       this.showNonAbortedPopup(data, 'success2_l');
     }
 
+    _showPassedWithWarnings(data) {
+      this.showNonAbortedPopup(data, 'passed_with_warnings');
+    }
+
     _showFailurePopup(data) {
       this.showNonAbortedPopup(data, 'failure');
     }
@@ -78,6 +82,7 @@ mumuki.load(() => {
 
     restart() {
       mumuki.presenterCharacter.playAnimation('talk', this.$bubbleCharacterAnimation);
+      this.hideOverlay();
     }
 
     // =======================

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

@@ -16,7 +16,6 @@ mumuki.load(() => {
       super.initialize();
       this.$characterSpeechBubble = $('.mu-kids-character-speech-bubble');
       this.$characterSpeechBubbleNormal = this.$characterSpeechBubble.children('.mu-kids-character-speech-bubble-normal');
-      this.$overlay = $('.mu-kids-overlay');
       this.$contextModalButton = new mumuki.Button($('.mu-kids-context .modal-footer button'));
 
       this._paragraphHeight = undefined;
@@ -58,6 +57,10 @@ mumuki.load(() => {
       this.showNonAbortedPopup(data, 'success2_l', 4000);
     }
 
+    _showPassedWithWarnings(data) {
+      this.showNonAbortedPopup(data, 'passed_with_warnings', 4000);
+    }
+
     _showFailurePopup(data) {
       this._showOnCharacterBubble(data);
     }
@@ -137,6 +140,7 @@ mumuki.load(() => {
       const $bubble = this.$characterSpeechBubble;
       Object.keys(this.resultActions).forEach($bubble.removeClass.bind($bubble));
       mumuki.presenterCharacter.playAnimation('talk', this.$bubbleCharacterAnimation);
+      this.hideOverlay();
     }
 
     // =======================
@@ -150,7 +154,6 @@ mumuki.load(() => {
       $bubble.find('.mu-kids-character-speech-bubble-failed').hide();
       $bubble.find('.mu-kids-discussion-link').remove();
       Object.keys(this.resultActions).forEach($bubble.removeClass.bind($bubble));
-      this.$overlay.hide();
     }
 
     _showMessageOnCharacterBubble(data) {
@@ -158,7 +161,6 @@ mumuki.load(() => {
       renderer.setDiscussionsLinkHtml($('#mu-kids-discussion-link-html').html());
       renderer.setResponseData(data);
       renderer.render();
-      this.$overlay.show();
     }
 
     _showOnCharacterBubble(data) {

data/app/assets/javascripts/mumuki_laboratory/application/results-renderer.js

@@ -35,6 +35,32 @@ mumuki.renderers.results = (() => {
     }
   }
 
+  /**
+   * @param {SubmissionStatus} status
+   * @param {Boolean} isGamifiedContext
+   * @returns {string}
+   */
+  function translatedTitleHtml(status, isGamifiedContext) {
+    return `
+      <h4 class="text-${classForStatus(status)} %>">
+        <strong><i class="fa-fw fas ${iconForStatus(status)}"></i> ${mumuki.I18n.t(status)}</strong>
+        ${gamifiedContextHtml(isGamifiedContext)}
+      </h4>
+    `
+  }
+
+  /**
+   * @param {Boolean} isGamifiedContext
+   * @returns {string}
+   */
+  function gamifiedContextHtml(isGamifiedContext) {
+    return (!isGamifiedContext) ? '' : `
+      <strong><small class="text-success">
+        <span class="mu-experience"></span>
+      </small></strong>
+    `
+  }
+
 
   /**
    * @param {SubmissionStatus} status
@@ -48,7 +74,8 @@ mumuki.renderers.results = (() => {
   return {
     classForStatus,
     iconForStatus,
-    progressListItemClassForStatus
+    progressListItemClassForStatus,
+    translatedTitleHtml
   };
 })();
 

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

@@ -55,8 +55,50 @@ mumuki.submission = (() => {
         this.preventClick();
       }
     }
+
+    solutionSender(bridge, solution) {
+      return bridge._submitSolution(solution);
+    }
+
+    solutionProcessor(bridge, $submissionsResults, solution) {
+      const resultsBox = new ResultsBox($submissionsResults);
+      this.disable();
+      this.setWaitingText();
+      resultsBox.waiting();
+      return this.solutionSender(bridge, solution)
+        .done((data) => resultsBox.success(data, this))
+        .fail(() => resultsBox.error(this))
+        .always((data) => {
+          $(document).renderMuComponents();
+          resultsBox.done(data, this);
+        });
+    }
   }
 
+  class KidsSubmitButton extends SubmitButton {
+
+    wait() {
+      mumuki.kids.showOverlay();
+      super.wait();
+    }
+
+    continue() {
+      mumuki.kids.hideOverlay();
+      super.continue();
+    }
+
+    solutionProcessor(bridge, $submissionsResults, solution) {
+      this.wait();
+      return this.solutionSender(bridge, solution)
+        .then((data) => mumuki.kids.showResult(data))
+        .always((data) => {
+          this.ready(() => {
+            mumuki.kids.restart();
+            this.continue();
+          });
+        });
+    }
+  }
 
   // ==========
   // Processing
@@ -67,14 +109,28 @@ mumuki.submission = (() => {
    * restoring buttons state.
    *
    * The actual implementation of this method depends on contextual {@link _solutionProcessor}, which can
-   * be configured using {@link _registerSolutionProcessor}. Currently there are only two available processors -
-   * {@link _kidsSolutionProcessor} and {@link _classicSolutionProcessor} - which are automatically choosen depending
-   * on the exercise DOM.
+   * be configured using {@link _registerSolutionProcessor}. Currently there are only two available processors
+   * which are automatically choosen depending on the exercise DOM.
    *
    * @param {Submission} solution
   */
   function processSolution(solution) {
-    mumuki.submission._solutionProcessor(solution);
+    return mumuki.submission._solutionProcessor(solution);
+  }
+
+  /**
+   * Just sends solution to the server without any further processing afterwards.
+   *
+   * Consider using {@link processSolution} instead if you want the whole functionality (making buttons wait, sending to server, rendering results,
+   * restoring buttons state).
+   * The implementation of this method isn't contextual, it always sends the solution using bridge module.
+   *
+   * @see mumuki.bridge
+   *
+   * @param {Submission} solution
+   */
+  function sendSolution(solution) {
+    return mumuki.submission._solutionSender(solution);
   }
 
   /**
@@ -84,53 +140,19 @@ mumuki.submission = (() => {
    * and should normally not be called by runners editor, but is exposed
    * for further non-standard customizations.
    *
-   * @param {({solution: object}) => void} processor
+   * @param {SubmitButton} submitButton
+   * @param {$ElementType} $submissionsResults
+   * @param {mumuki.bridge} bridge
    */
-  function _registerSolutionProcessor(processor) {
-    mumuki.submission._solutionProcessor = processor;
-  }
-
-  /** Processor for kids layouts */
-  function _kidsSolutionProcessor(bridge, submitButton) {
-    return (solution) => {
-      submitButton.wait();
-      bridge._submitSolution(solution).always(function (data) {
-        submitButton.ready(() => {
-          mumuki.kids.restart();
-          submitButton.continue();
-        });
-        mumuki.kids.showResult(data);
-      });
-    };
-  }
-
-  /** Processor for non-kids layouts */
-  function _classicSolutionProcessor(bridge, submitButton, resultsBox) {
-    return (solution) => {
-      submitButton.disable();
-      submitButton.setWaitingText();
-      resultsBox.waiting();
-      bridge._submitSolution(solution).done(function (data) {
-        resultsBox.success(data, submitButton);
-      }).fail(function () {
-        resultsBox.error(submitButton);
-      }).always(function (data) {
-        $(document).renderMuComponents();
-        resultsBox.done(data, submitButton);
-      });
-    };
+  function _registerSolutionProcessor(submitButton, $submissionsResults, bridge) {
+    mumuki.submission._solutionSender = submitButton.solutionSender.bind(submitButton, bridge);
+    mumuki.submission._solutionProcessor = submitButton.solutionProcessor.bind(submitButton, bridge, $submissionsResults);
   }
 
   /** Selects the most appropriate solution processor */
   function _selectSolutionProcessor(submitButton, $submissionsResults) {
     const bridge = new mumuki.bridge.Laboratory();
-    let processor;
-    if ($('.mu-kids-exercise').length) {
-      processor = _kidsSolutionProcessor(bridge, submitButton);
-    } else {
-      processor = _classicSolutionProcessor(bridge, submitButton, new ResultsBox($submissionsResults));
-    }
-    mumuki.submission._registerSolutionProcessor(processor);
+    mumuki.submission._registerSolutionProcessor(submitButton, $submissionsResults, bridge);
   }
 
 
@@ -143,8 +165,8 @@ mumuki.submission = (() => {
     if (!$submissionsResults) return;
 
     const $btnSubmit = $('.btn-submit');
-    const submitButton = new SubmitButton($btnSubmit, $('.submission_control'));
-
+    const buttonClass = mumuki.isKidsExercise() ? KidsSubmitButton : SubmitButton;
+    const submitButton = new buttonClass($btnSubmit, $('.submission_control'));
     mumuki.submission._selectSolutionProcessor(submitButton, $submissionsResults);
 
     submitButton.start(() => {
@@ -154,7 +176,6 @@ mumuki.submission = (() => {
     submitButton.checkAttemptsLeft();
   });
 
-
   /**
    * This module contains methods for submitting solution  in at high level, dealing with network communication,
    * and layout-sensitive UI updates. It is intended to be both used internally by standard editors and by runners
@@ -171,10 +192,13 @@ mumuki.submission = (() => {
    */
   return {
     processSolution,
+    sendSolution,
+
     _registerSolutionProcessor,
     _selectSolutionProcessor,
 
     animateTimeoutError,
     SubmitButton,
+    KidsSubmitButton,
   };
 })();