mumuki-laboratory 7.6.2 → 7.8.0

data/app/assets/javascripts/mumuki_laboratory/application/load-analytics.js

@@ -1,4 +1,4 @@
-mumuki.load(function(){
+mumuki.load(() => {
   ga('create', 'UA-58353823-1', 'auto');
   ga('send', 'pageview');
 });

data/app/assets/javascripts/mumuki_laboratory/application/load-error-svg.js

@@ -1,4 +1,4 @@
-mumuki.load(function () {
+mumuki.load(() => {
   var error_svgs = ['403', '404', '500', 'timeout_1', 'timeout_2', 'timeout_3'];
 
   mumuki.errors = mumuki.errors || {};

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

@@ -1,4 +1,4 @@
-mumuki.load(function () {
+mumuki.load(() => {
   var Chat = {
     $body: function () {
       return $('body')
@@ -61,7 +61,7 @@ mumuki.load(function () {
         Chat.readMessages(readUrl);
       }
 
-      function error(xhr) {
+      function error(_xhr) {
         Chat.tokenRequest({
           url: errorUrl,
           success: renderHTML,

data/app/assets/javascripts/mumuki_laboratory/application/multiple-choice.js

@@ -1,5 +1,5 @@
 mumuki.load(() => {
-	function dumpChoices(evt) {
+	function dumpChoices(_evt) {
 		var indexes = $('.solution-choice:checked').map(function () {
 			return $(this).data('index')
 		}).get().join(':');

data/app/assets/javascripts/mumuki_laboratory/application/multiple-scenarios.js

@@ -1,6 +1,4 @@
-var mumuki = mumuki || {};
-
-(function (mumuki) {
+mumuki.MultipleScenarios = (() => {
 
   const setControlVisibility = function ($control, visible) {
     visible ? $control.show() : $control.hide();
@@ -147,6 +145,5 @@ var mumuki = mumuki || {};
     }
   }
 
-  mumuki.MultipleScenarios = MultipleScenarios;
-
-}(mumuki));
+  return MultipleScenarios;
+})();

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

@@ -1,12 +1,10 @@
-var mumuki = mumuki || {};
-
-(function (mumuki) {
+mumuki.pin = (() => {
   function smoothScrollToElement(domElement) {
     var SPEED = 1000;
     $('html, body').animate({scrollTop: domElement.offset().top}, SPEED);
   }
 
-  mumuki.pin = {
+  return {
     scroll: function () {
       var scrollPin = $('.scroll-pin');
       if (scrollPin.length) {
@@ -14,4 +12,4 @@ var mumuki = mumuki || {};
       }
     }
   }
-})(mumuki);
+})();

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

@@ -1,10 +1,31 @@
-var mumuki = mumuki || {};
-
-(function (mumuki) {
-
-  mumuki.updateProgressBarAndShowModal = function (data) {
+mumuki.progress = (() => {
+  /**
+   * Updates the current exercise progress indicator
+   *
+   * @param {SubmissionResult} data
+   * */
+  function updateProgressBarAndShowModal(data) {
     $('.progress-list-item.active').attr('class', data.class_for_progress_list_item);
     if(data.guide_finished_by_solution) $('#guide-done').modal();
+  }
+
+  /**
+   * Update all links in the progress bar with the given function
+   *
+   * @param {(anchor: JQuery) => string} f
+   */
+  function updateWholeProgressBar(f) {
+    $('.progress-list-item').each((_, it) => {
+      const $anchor = $(it);
+      $anchor.attr('class', f($anchor))
+    });
+  }
+
+  return {
+    updateProgressBarAndShowModal,
+    updateWholeProgressBar
   };
+})();
 
-})(mumuki);
+/** @deprecated use {@code mumuki.progress.updateProgressBarAndShowModal} instead */
+mumuki.updateProgressBarAndShowModal = mumuki.progress.updateProgressBarAndShowModal;

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

@@ -0,0 +1,60 @@
+mumuki.renderers = mumuki.renderers || {};
+mumuki.renderers.results = (() => {
+
+
+  // ==========================
+  // View function for building
+  // the results UI
+  // ==========================
+
+  /**
+   * @param {SubmissionStatus} status
+   * @returns {string}
+   */
+  function iconForStatus(status) {
+    switch (status) {
+      case "errored":              return "fa-minus-circle";
+      case "failed":               return "fa-times-circle";
+      case "passed_with_warnings": return "fa-exclamation-circle";
+      case "passed":               return "fa-check-circle";
+      case "pending":              return "fa-circle";
+    }
+  }
+
+  /**
+   * @param {SubmissionStatus} status
+   * @returns {string}
+   */
+  function classForStatus(status) {
+    switch (status) {
+      case "errored":              return "broken";
+      case "failed":               return "danger";
+      case "passed_with_warnings": return "warning";
+      case "passed":               return "success";
+      case "pending":              return "muted";
+    }
+  }
+
+
+  /**
+   * @param {SubmissionStatus} status
+   * @param {boolean} [active]
+   * @returns {string}
+   */
+  function progressListItemClassForStatus(status, active = false) {
+    return `progress-list-item text-center ${classForStatus(status)} ${active ? 'active' : ''}`;
+  }
+
+  return {
+    classForStatus,
+    iconForStatus,
+    progressListItemClassForStatus
+  }
+})();
+
+/** @deprecated use {@code mumuki.renderers.results.classForStatus} instead */
+mumuki.renderers.classForStatus = mumuki.renderers.results.classForStatus;
+/** @deprecated use {@code mumuki.renderers.results.iconForStatus} instead */
+mumuki.renderers.iconForStatus = mumuki.renderers.results.iconForStatus;
+/** @deprecated use {@code mumuki.renderers.results.progressListItemClassForStatus} instead */
+mumuki.renderers.progressListItemClassForStatus = mumuki.renderers.results.progressListItemClassForStatus;

data/app/assets/javascripts/mumuki_laboratory/application/speech-bubble-renderer.js

@@ -1,4 +1,5 @@
-((mumuki)=> {
+mumuki.renderers = mumuki.renderers || {};
+mumuki.renderers.speechBubble = (()=> {
 
   function renderSpeechBubbleResultItem(item) {
     return `
@@ -93,7 +94,13 @@
     }
   }
 
-  mumuki.renderers = mumuki.renderers || {};
-  mumuki.renderers.SpeechBubbleRenderer = SpeechBubbleRenderer;
-  mumuki.renderers.renderSpeechBubbleResultItem = renderSpeechBubbleResultItem;
-})(mumuki)
+  return {
+    SpeechBubbleRenderer,
+    renderSpeechBubbleResultItem
+  }
+})();
+
+/** @deprecated use {@code mumuki.renderers.speechBubble.SpeechBubbleRenderer} instead */
+mumuki.renderers.SpeechBubbleRenderer = mumuki.renderers.speechBubble.SpeechBubbleRenderer;
+/** @deprecated use {@code mumuki.renderers.speechBubble.renderSpeechBubbleResultItem} instead */
+mumuki.renderers.renderSpeechBubbleResultItem = mumuki.renderers.speechBubble.renderSpeechBubbleResultItem;

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

@@ -1,32 +1,42 @@
-var mumuki = mumuki || {};
+mumuki.submission = (() => {
 
-(function (mumuki) {
-  function ResultsBox(submissionsResults) {
-    this.submissionsResultsArea = submissionsResults;
-    this.processingTemplate = $('#processing-template');
-    this.submissionsErrorTemplate = $(".submission-result-error");
+  // =============
+  // UI Components
+  // =============
+
+  function animateTimeoutError(submitButton) {
+    let scene = new muvment.Scene($('.submission-result-error-animation'));
+    scene.addState(mumuki.errorState('timeout_1').onStart(submitButton.setOriginalContent.bind(submitButton)).onEndSwitch(scene, 'timeout_2'))
+      .addState(mumuki.errorState('timeout_2').onEndSwitch(scene, 'timeout_3'))
+      .addState(mumuki.errorState('timeout_3').onStart(submitButton.enable.bind(submitButton)))
+      .play();
   }
 
-  ResultsBox.prototype = {
-    waiting: function () {
+  class ResultsBox {
+    constructor(submissionsResults) {
+      this.submissionsResultsArea = submissionsResults;
+      this.processingTemplate = $('#processing-template');
+      this.submissionsErrorTemplate = $(".submission-result-error");
+    }
+    waiting() {
       this.submissionsResultsArea.html(this.processingTemplate.html());
       this.submissionsErrorTemplate.hide();
-    },
-    success: function (data, submitButton) {
+    }
+    success(data, submitButton) {
       this.submissionsResultsArea.html(data.html);
       data.status === 'aborted' ? this.error(submitButton) : submitButton.enable();
       mumuki.updateProgressBarAndShowModal(data);
-    },
-    error: function (submitButton) {
+    }
+    error(submitButton) {
       this.submissionsResultsArea.html('');
       this.submissionsErrorTemplate.show();
       animateTimeoutError(submitButton);
-    },
-    done: function (data, submitButton) {
+    }
+    done(data, submitButton) {
       submitButton.updateAttemptsLeft(data);
       mumuki.pin.scroll();
     }
-  };
+  }
 
   class SubmitButton extends mumuki.Button {
 
@@ -44,31 +54,61 @@ var mumuki = mumuki || {};
         this.preventClick();
       }
     }
-
   }
 
-  mumuki.load(function () {
-    var submissionsResults = $('.submission-results');
-    if (!submissionsResults) return;
 
-    var resultsBox = new ResultsBox(submissionsResults);
-
-    var btnSubmit = $('.btn-submit');
-    var submissionControl = $('.submission_control');
+  // ==========
+  // Processing
+  // ==========
+
+  /**
+   * Process solution, which consist of making buttons wait, sending to server, rendering results,
+   * 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.
+   *
+   * @param {Submission} solution
+  */
+  function processSolution(solution) {
+    mumuki.submission._solutionProcessor(solution);
+  }
 
-    var submitButton = new SubmitButton(btnSubmit, submissionControl);
+  /**
+   * Configures a callback for processing a solution.
+   *
+   * This method is called internally by {@link _selectSolutionProcessor}
+   * and should normally not be called by runners editor, but is exposed
+   * for further non-standard customizations.
+   *
+   * @param {({solution: object}) => void} processor
+   */
+  function _registerSolutionProcessor(processor) {
+    mumuki.submission._solutionProcessor = processor;
+  }
 
-    var bridge = new mumuki.bridge.Laboratory;
+  /** 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);
+      });
+    }
+  }
 
-    btnSubmit.on('click', function (e) {
-      e.preventDefault();
+  /** Processor for non-kids layouts */
+  function _classicSolutionProcessor(bridge, submitButton, resultsBox) {
+    return (solution) => {
       submitButton.disable();
       submitButton.setWaitingText();
       resultsBox.waiting();
-
-      mumuki.editor.syncContent();
-      var solution = getContent();
-
       bridge._submitSolution(solution).done(function (data) {
         resultsBox.success(data, submitButton);
       }).fail(function () {
@@ -77,36 +117,63 @@ var mumuki = mumuki || {};
         $(document).renderMuComponents();
         resultsBox.done(data, submitButton);
       });
-    });
-
-    submitButton.checkAttemptsLeft();
-  });
+    }
+  }
 
-  function getEditorsContent() {
-    return $('.new_solution').serializeArray().concat(mumuki.CustomEditor.getContent())
+  /** 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);
   }
 
-  function getContent(){
-    var content = {};
 
-    getEditorsContent().forEach(function(it) {
-      content[it.name] = it.value;
+  // ===========
+  // Entry Point
+  // ===========
+
+  mumuki.load(() => {
+    var $submissionsResults = $('.submission-results');
+    if (!$submissionsResults) return;
+
+    const $btnSubmit = $('.btn-submit');
+    const submitButton = new SubmitButton($btnSubmit, $('.submission_control'));
+
+    mumuki.submission._selectSolutionProcessor(submitButton, $submissionsResults);
+
+    submitButton.start(() => {
+      mumuki.submission.processSolution(mumuki.editors.getSubmission());
     });
 
-    return content;
-  }
+    submitButton.checkAttemptsLeft();
+  });
 
-  function animateTimeoutError(submitButton) {
-    let scene = new muvment.Scene($('.submission-result-error-animation'));
-    scene.addState(mumuki.errorState('timeout_1').onStart(submitButton.setOriginalContent.bind(submitButton)).onEndSwitch(scene, 'timeout_2'))
-      .addState(mumuki.errorState('timeout_2').onEndSwitch(scene, 'timeout_3'))
-      .addState(mumuki.errorState('timeout_3').onStart(submitButton.enable.bind(submitButton)))
-      .play();
-  }
 
-  mumuki.submission = {
-    animateTimeoutError: animateTimeoutError,
-    SubmitButton: SubmitButton
+  /**
+   * 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
+   * custom editors.
+   *
+   * Runners can choose to bypass this module under kids layouts, and handling all that low-level details. In order
+   * to do that {@code .mu-kids-submit-button} selector must be overiden. Customizing submission in classic layout
+   * or in a layout-agnostic way can be accomplish by overriding {@code .mu-submit-button}.
+   *
+   * @see mumuki.kids.showResult
+   * @see mumuki.bridge.Laboratory.runTests
+   *
+   * @module mumuki.submission
+   */
+  return {
+    processSolution,
+    _registerSolutionProcessor,
+    _selectSolutionProcessor,
+
+    animateTimeoutError,
+    SubmitButton,
   };
-
-})(mumuki);
+})();

data/app/assets/javascripts/mumuki_laboratory/application/submissions-store.js

@@ -0,0 +1,93 @@
+mumuki.SubmissionsStore = (() => {
+  const SubmissionsStore = new class {
+    /**
+     * Returns the submission's result status for the last submission to
+     * the given exercise, or pending, if not present
+     *
+     * @param {number} exerciseId
+     * @returns {SubmissionStatus}
+     */
+    getLastSubmissionStatus(exerciseId) {
+      const submission = this.getLastSubmissionAndResult(exerciseId);
+      return submission ? submission.result.status : 'pending';
+    }
+
+    /**
+     * Returns the submission and result for the last submission to
+     * the given exercise
+     *
+     * @param {number} exerciseId
+     * @returns {SubmissionAndResult}
+     */
+    getLastSubmissionAndResult(exerciseId) {
+      const submissionAndResult = window.localStorage.getItem(this._keyFor(exerciseId));
+      if (!submissionAndResult) return null;
+      return JSON.parse(submissionAndResult);
+    }
+
+    /**
+     * Saves the result for the given exercise
+     *
+     * @param {number} exerciseId
+     * @param {SubmissionAndResult} submissionAndResult
+     */
+    setSubmissionResultFor(exerciseId, submissionAndResult) {
+      window.localStorage.setItem(this._keyFor(exerciseId), this._asString(submissionAndResult));
+    }
+
+    /**
+     * Retrieves the last cached, non-aborted result for the given submission of the given exercise
+     *
+     * @param {number} exerciseId
+     * @param {Submission} submission
+     * @returns {SubmissionResult} the cached result for this submission
+     */
+    getSubmissionResultFor(exerciseId, submission) {
+      const last = this.getLastSubmissionAndResult(exerciseId);
+      if (!last
+          || last.result.status === 'aborted'
+          || !this.submissionSolutionEquals(last.submission, submission)) {
+        return null;
+      }
+      return last.result;
+    }
+
+     /**
+     * Extract the submission's solution content
+     *
+     * @param {Submission} submission
+     * @returns {string}
+     */
+    submissionSolutionContent(submission) {
+      if (submission.solution) {
+        return submission.solution.content;
+      } else {
+        return submission['solution[content]'];
+      }
+    }
+
+    /**
+     * Compares two solutions to determine if they are equivalent
+     * from the point of view of the code evaluation
+     *
+     * @param {Submission} one
+     * @param {Submission} other
+     * @returns {boolean}
+     */
+    submissionSolutionEquals(one, other) {
+      return this.submissionSolutionContent(one) === this.submissionSolutionContent(other);
+    }
+
+    // private API
+
+    _asString(object) {
+      return JSON.stringify(object);
+    }
+
+    _keyFor(exerciseId) {
+      return `/exercise/${exerciseId}/submission`;
+    }
+  };
+
+  return SubmissionsStore;
+})();