mumuki-laboratory 7.4.2 → 7.6.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1295fcc4775aeabfe0b1efb0d4f6d98395a46cd9decd3f52c1ccf7bc495d32a1
-  data.tar.gz: 648f9f2f5041225e95ed8a0ab71845e3d62017da827ada28ded779fae53c8f10
+  metadata.gz: c1f65f176a20afc043153fd22af28227114658e74314d448d62ef30bf3e82780
+  data.tar.gz: e8574421c0aa4e89d3dca6e91b69381f9afd7d8cf150edd66dbf9eb600734f0d
 SHA512:
-  metadata.gz: dc48be9b23270f06847d7d7c1199e9f16d5a1bd37ff7c04990d9bf62bfe2635e34ffbf843381e6b6fa1537c992cf09812555f49d1bb26811c53a5215ede12b47
-  data.tar.gz: de9e92c566eb31509061c5d4325a1849de664cb7c3b1e9bb4cf02f12e592d828fc7d089e5653a8c3d03f3ef76734aec7b9d81edad6859ab7137461f8c279399b
+  metadata.gz: c435af3af604d9db394ebe6694cff164331a2fcc278d8ba6023c8ebf0b0c8293b0db0c4e32a94e11c01a11d7470fd2cf199fe674ba58e8406ab22d164c5cb35f
+  data.tar.gz: 5ccf4cd487feb8c1ded9ba96158aaf7570492c48afd1869546fd6aae9098f3db85843f7ffb84d0e0314356fc55f9126216b9b1cad78376c184c1d2ee679320ed

data/README.md

@@ -178,6 +178,12 @@ which are granted to be safe and stable.
 
 * `mumuki.bridge.Laboratory`
   * `.runTests`
+* `mumuki.editor`
+  * `formatContent`
+  * `reset`
+  * `toggleFullscreen`
+* `mumuki.elipsis`
+  * `replaceHtml`
 * `mumuki.kids`
   * `registerBlocksAreaScaler`
   * `registerStateScaler`
@@ -185,6 +191,9 @@ which are granted to be safe and stable.
   * `scaleBlocksArea`
   * `scaleState`
   * `showResult`
+* `mumuki.renderers`
+  * `SpeechBubbleRenderer`
+  * `renderSpeechBubbleResultItem`
 * `mumuki.locale`
 * `mumuki.MultipleScenarios`
   * `scenarios`
@@ -200,22 +209,29 @@ which are granted to be safe and stable.
 
 ### Bridge Response Format
 
-```json
+```javascript
 {
-  "status": "failed",
-  "guide_finished_by_solution": false,
-  "class_for_progress_list_item":"progress-list-item text-center danger active",
-  "html":"...",
-  "title_html":"...",
-  "button_html":"...",
-  "expectations_html":"...",
-  "remaining_attempts_html":null,
-  "test_results":[
-      {
-        "title":null,
-        "status":"failed",
-        "result":"..."
-      }
+  "status": "passed|passed_with_warnings|failed",
+  "guide_finished_by_solution": "boolean",
+  "class_for_progress_list_item": "string",
+  "html": "string",
+  "remaining_attempts_html": "string" ,
+  "title_html": "string",                         // kids-only
+  "button_html": "string",                        // kids-only
+  "expectations": [                               // kids-only
+    {
+      "status": "passed|failed",
+      "explanation": "string"
+    }
+  ],
+  "tips": [ "string" ],                           // kids-only
+  "test_results": [                               // kids-only
+    {
+      "title": "string",
+      "status": "passed|failed",
+      "result": "string",
+      "summary": "string"
+    }
   ]
 }
 ```
@@ -463,7 +479,7 @@ POST /organization/:id/courses/
 
 ```json
 {
-   "name":"....",
+   "name": "....",
 }
 ```
 
@@ -539,7 +555,7 @@ Sample response body:
 ```json
 {
   "organizations": [
-    { "name": "academy", "contact_email": "a@a.com", "locale": "es-AR", "login_methods": ["facebook"], "books": ["libro"], "public": true, "logo_url":"http://..." },
+    { "name": "academy", "contact_email": "a@a.com", "locale": "es-AR", "login_methods": ["facebook"], "books": ["libro"], "public": true, "logo_url": "http://..." },
     { "name": "alcal", "contact_email": "b@b.com", "locale": "en-US", "login_methods": ["facebook", "github"], "books": ["book"], "public": false }
   ]
 }
@@ -555,7 +571,7 @@ get /organizations/:name
 Sample response body:
 
 ```json
-{ "name": "academy", "contact_email": "a@a.com", "locale": "es-AR", "login_methods": ["facebook"], "books": ["libro"], "public": true, "logo_url":"http://..." }
+{ "name": "academy", "contact_email": "a@a.com", "locale": "es-AR", "login_methods": ["facebook"], "books": ["libro"], "public": true, "logo_url": "http://..." }
 ```
 **Minimal permission**: `janitor` of the organization.
 

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

@@ -23,6 +23,14 @@ var mumuki = mumuki || {};
     })
   }
 
+  function formatContent() {
+    mumuki.page.editors.each(function (_, editor) {
+      editor.setSelection({line: 0, ch: 0}, {line: editor.lineCount()})
+      editor.indentSelection("smart")
+      editor.setSelection({line: 0})
+    });
+  }
+
   function toggleFullscreen() {
     $('body').toggleClass('fullscreen');
     $('.editor-resize .fa-stack-1x').toggleClass('fa-expand').toggleClass('fa-compress');
@@ -61,7 +69,9 @@ var mumuki = mumuki || {};
   }
 
   mumuki.editor = mumuki.editor || {};
+  mumuki.editor.reset = resetEditor;
   mumuki.editor.toggleFullscreen = toggleFullscreen;
+  mumuki.editor.formatContent = formatContent;
   mumuki.editor.indentWithSpaces = indentWithSpaces;
   mumuki.editor.syncContent = syncContent;
 
@@ -75,12 +85,19 @@ var mumuki = mumuki || {};
     updateCodeMirrorLanguage();
     onSelectUpdateCodeMirror();
 
-    $('.editor-reset').click(function () {
-      resetEditor();
+    $('.editor-reset').click(function (event) {
+      event.stopPropagation();
+      const selection = confirm(this.getAttribute('data-confirm'));
+      if(selection) resetEditor();
     });
+
     $('.editor-resize').click(function () {
       toggleFullscreen();
     });
+
+    $('.editor-format').click(function (){
+      formatContent();
+    });
   });
 
 }(mumuki));

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/kids.js

@@ -169,28 +169,17 @@ mumuki.load(function () {
       $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();
+      mumuki.kids._getOverlay().hide()
     },
 
     _showMessageOnCharacterBubble: function (data) {
-      var $bubble = mumuki.kids._getCharacterBubble();
-      $bubble.find('.mu-kids-character-speech-bubble-tabs').hide();
-      $bubble.find('.mu-kids-character-speech-bubble-normal').hide();
-      $bubble.find('.mu-kids-character-speech-bubble-failed').show().html(data.title_html);
-      $bubble.addClass(data.status);
-      if (data.status === 'passed_with_warnings') {
-        $bubble.find('.mu-kids-character-speech-bubble-failed').append(data.expectations_html);
-      }
-      if (this._shouldDisplayDiscussionsLink(data.status)) {
-        $bubble.append(discussionsLinkHtml);
-      }
+      const renderer = new mumuki.renderers.SpeechBubbleRenderer(mumuki.kids._getCharacterBubble());
+      renderer.setDiscussionsLinkHtml(discussionsLinkHtml);
+      renderer.setResponseData(data);
+      renderer.render();
       mumuki.kids._getOverlay().show();
     },
 
-    _shouldDisplayDiscussionsLink: function (status) {
-      return ['failed', 'passed_with_warnings'].some(it => it === status);
-    },
-
     _showOnSuccessPopup: function (data) {
       mumuki.kids._updateSubmissionResult(data.html);
       mumuki.presenterCharacter.playAnimation('success_l', mumuki.kids._getCharacterImage());

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

@@ -0,0 +1,99 @@
+((mumuki)=> {
+
+  function renderSpeechBubbleResultItem(item) {
+    return `
+        <div class="results-item">
+          <ul class="results-list">
+            <li>${item}</li>
+          </ul>
+        </div>`;
+  }
+
+  // A mumuki.renderers.SpeechBubbleRenderer allows to configure a kids speech bubble
+  // with the data of a test response from bridge
+  class SpeechBubbleRenderer {
+    constructor($bubble) {
+      this.$bubble = $bubble;
+      this.$failedArea = $bubble.find('.mu-kids-character-speech-bubble-failed');
+    }
+
+    _chooseResultItem() {
+      if (this._responseStatus() !== 'passed' && this._hasTips()) {
+        this._appendFirstTip()
+      } else if (this._responseStatus() === 'failed') {
+        this._appendFirstFailedTestResultSummary();
+      } else if (this._responseStatus() === 'passed_with_warnings') {
+        this._appendFirstExpectationResult();
+      }
+    }
+
+    _appendFirstFailedTestResultSummary() {
+      const failedTestResult = this._failedTestResults()[0]
+      if (failedTestResult && failedTestResult.summary) {
+        this._appendResultItem(mumuki.renderers.renderSpeechBubbleResultItem(failedTestResult.summary));
+      }
+    }
+
+    _appendFirstExpectationResult() {
+      this._appendResultItem(mumuki.renderers.renderSpeechBubbleResultItem(this.responseData.expectations[0].explanation));
+    }
+
+    _appendFirstTip() {
+      this._appendResultItem(mumuki.renderers.renderSpeechBubbleResultItem(this.responseData.tips[0]));
+    }
+
+    _appendResultItem(item) {
+      this._addClass('with-result-item');
+      this.$failedArea.append(item);
+    }
+
+    _addClass(klass) {
+      this.$bubble.addClass(klass);
+    }
+
+    _appendDiscussionsLinkHtml() {
+      if (this._shouldDisplayDiscussionsLink()) {
+        this.$bubble.append(this.discussionsLinkHtml);
+      }
+    }
+
+    _shouldDisplayDiscussionsLink() {
+      return ['failed', 'passed_with_warnings'].some(it => it === this._responseStatus());
+    }
+
+    _responseStatus() {
+      return this.responseData.status;
+    }
+
+    _hasTips() {
+      return this.responseData.tips && this.responseData.tips.length
+    }
+
+    _failedTestResults() {
+      return this.responseData.test_results.filter((it) => it.status === 'failed');
+    }
+
+    setDiscussionsLinkHtml(discussionsLinkHtml) {
+      this.discussionsLinkHtml = discussionsLinkHtml;
+    }
+
+    setResponseData(responseData) {
+      this.responseData = responseData;
+    }
+
+    // Entry point of the renderer. It just updates the UI, not returning anything
+    // Configure the renderer with `setDiscussionsLinkHtml` and `setResponseData` first.
+    render() {
+      this.$bubble.find('.mu-kids-character-speech-bubble-tabs').hide();
+      this.$bubble.find('.mu-kids-character-speech-bubble-normal').hide();
+      this.$failedArea.show().html(this.responseData.title_html);
+      this._addClass(this._responseStatus());
+      this._chooseResultItem();
+      this._appendDiscussionsLinkHtml();
+    }
+  }
+
+  mumuki.renderers = mumuki.renderers || {};
+  mumuki.renderers.SpeechBubbleRenderer = SpeechBubbleRenderer;
+  mumuki.renderers.renderSpeechBubbleResultItem = renderSpeechBubbleResultItem;
+})(mumuki)

data/app/assets/stylesheets/mumuki_laboratory/application.scss

@@ -6,6 +6,7 @@ $da-font-path: asset-path('assets');
 @import "codemirror/codemirror.min";
 @import "codemirror/show-hint.min";
 @import "application/vendor";
+@import "application/locked";
 @import "application/tooltip";
 @import "application/hovers";
 @import "application/mixins";

data/app/assets/stylesheets/mumuki_laboratory/application/_layout.scss

@@ -107,10 +107,6 @@ h1 {
   margin-bottom: 20px;
 }
 
-.chapter {
-  margin: 35px 0;
-}
-
 pre {
   font-size: 14px;
   line-height: 1.4;

data/app/assets/stylesheets/mumuki_laboratory/application/_locked.scss

@@ -0,0 +1,29 @@
+.chapter-container {
+  position: relative;
+}
+
+.chapter {
+  position: relative;
+
+  margin: 35px 0;
+  padding-bottom: 15px;
+
+  &.mu-locked {
+    opacity: 20%;
+
+    user-select: none;
+    pointer-events: none;
+  }
+}
+
+.mu-lock {
+  position: absolute;
+
+  width: 100%;
+  height: 100%;
+
+  transform: translateY(20%);
+
+  top: 0px;
+  left: 0px;
+}

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_editor.scss

@@ -13,25 +13,6 @@ $multifile-inactive-tab-border-color: #ECF0F1;
   max-height: none;
 }
 
-.submission-reset {
-  padding: 5px;
-  cursor: pointer;
-}
-
-.editor-resize {
-  position: absolute;
-  padding: 5px;
-  cursor: pointer;
-  z-index: 10;
-  top: 0;
-  right: 0;
-  font-size: 0.5em;
-  &.multiple-files {
-    top: 43px;
-  }
-}
-
-
 body:not(.fullscreen) {
   .CodeMirror-wrap,
   .CodeMirror-scroll {
@@ -69,10 +50,6 @@ body.fullscreen {
       overflow-y: scroll;
       overflow-x: auto;
     }
-    .submission-reset,
-    .editor-resize {
-      margin-right: 15px;
-    }
   }
 }
 

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_exercise_results.scss

@@ -10,6 +10,9 @@
 ul.results-list {
   list-style-type: none;
   padding-left: 10px;
+  li:first-letter {
+    text-transform: capitalize
+  }
 }
 
 .results-list pre {
@@ -27,3 +30,11 @@ ul.results-list {
     color: white;
   }
 }
+
+.mu-single-test-result {
+  .error-text, /* backward compatibility with gobstones runner */
+  .mu-test-result-header {
+    display: block;
+    line-height: 25px;
+  }
+}

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_kids.scss

@@ -154,7 +154,7 @@ $kids-speech-tabs-width: 40px;
         }
       }
 
-      &.passed_with_warnings {
+      &.with-result-item {
         padding-top: 5px;
         padding-bottom: 5px;
 

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_overlap.scss

@@ -5,6 +5,25 @@
 .mu-overlapped {
   z-index: 10;
   position: absolute;
-  bottom: 0;
+  top: 0;
   right: 0;
-}
+  display: flex;
+  flex-direction: column;
+  a {
+    cursor: pointer;
+    padding: 5px;
+  }
+  &.multiple-files {
+    top: 43px;
+  }
+}
+
+.editor-resize {
+  font-size: 0.5em;
+}
+
+body.fullscreen {
+  .mu-overlapped a {
+    margin-right: 15px;
+  }
+}