mumuki-laboratory 7.10.5 → 7.12.3

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

@@ -1,12 +1,13 @@
 mumuki.load(function() {
   let $userForm = $("#mu-user-form");
   let $userAvatar = $('#mu-user-avatar');
-  let $editButton = $('#mu-edit-profile-btn');
+  let $editButton = $('.mu-edit-profile-btn');
   let $avatarPicker = $('#mu-avatar-picker');
-  let $avatarItem = $('.mu-avatar-item');
+  let $avatarItem = $('.mu-avatar-item:not(.mu-locked)');
 
   let userImage = "";
   let avatarId = "";
+  let avatarType = "";
 
   let originalData = $userForm.serialize();
   let originalProfilePicture = $userAvatar.attr('src');
@@ -15,14 +16,18 @@ mumuki.load(function() {
     toggleEditButtonIfThereAreChanges();
   });
 
-  $avatarItem.on('click', function() {
-    $userAvatar.attr('src', $(this).attr('src'));
-    $avatarPicker.modal('hide');
+  $avatarItem.on('keypress click', function(e) {
+    onClickOrSpacebarOrEnter($(this), e, function() {
+      $userAvatar.attr('src', $(this).attr('src'));
+      $avatarPicker.modal('hide');
 
-    const clickedAvatarId = $(this).attr('mu-avatar-id');
-    avatarId = clickedAvatarId || "";
+      const clickedAvatarId = $(this).attr('mu-avatar-id');
+      const clickedAvatarType = $(this).attr('type');
+      avatarId = clickedAvatarId || "";
+      avatarType = clickedAvatarType || "";
 
-    toggleEditButtonIfThereAreChanges();
+      toggleEditButtonIfThereAreChanges();
+    });
   });
 
   function toggleEditButtonIfThereAreChanges() {
@@ -41,18 +46,20 @@ mumuki.load(function() {
 
   const avatarChanged = () => $userAvatar.attr('src') !== originalProfilePicture;
 
-  $('#mu-user-image').on('click', function(){
-    userImage = $userAvatar.attr('src');
+  $('#mu-user-image').on('keypress click', function(e){
+    onClickOrSpacebarOrEnter($(this), e, function() {
+      userImage = $userAvatar.attr('src');
+    });
   });
 
   $userForm.on('submit', function(){
     if (userImage) {
       setImageUrl($(this), userImage);
-      setAvatarId($(this), "");
+      setAvatarIdAndType($(this), "", "");
     }
 
     if (avatarId) {
-      setAvatarId($(this), avatarId);
+      setAvatarIdAndType($(this), avatarId, avatarType);
     }
   });
 
@@ -60,12 +67,20 @@ mumuki.load(function() {
     form.append(`<input type="hidden" name="user[image_url]" value="${url}"/>`);
   }
 
-  function setAvatarId(form, id) {
-    form.append(`<input type="hidden" name="user[avatar_id]" value=${id}/>`);
+  function setAvatarIdAndType(form, id, type) {
+    form.append(`<input type="hidden" name="user[avatar_id]" value="${id}"/>`);
+    form.append(`<input type="hidden" name="user[avatar_type]" value="${type}"/>`);
   }
 
-  $("#mu-edit-avatar-icon").on('click', function(){
-    $avatarPicker.modal();
+  $("#mu-edit-avatar-icon").on('keypress click', function(e) {
+    onClickOrSpacebarOrEnter($(this), e, function() {
+      $avatarPicker.modal();
+    });
   });
 
+  function onClickOrSpacebarOrEnter(element, e, func) {
+    if (e.which === 13 || e.which === 32 || e.type === 'click') {
+      func.apply(element);
+    }
+  }
 });

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

@@ -26,6 +26,7 @@ mumuki.submission = (() => {
       this.submissionsResultsArea.html(data.html);
       data.status === 'aborted' ? this.error(submitButton) : submitButton.enable();
       mumuki.updateProgressBarAndShowModal(data);
+      mumuki.gamification.currentLevelProgression.setExpMessage(data);
     }
     error(submitButton) {
       this.submissionsResultsArea.html('');

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

@@ -53,7 +53,7 @@ mumuki.SubmissionsStore = (() => {
     }
 
      /**
-     * Extract the submission's solution content
+     * Extract the submission's solution content, expressed as a string
      *
      * @param {Submission} submission
      * @returns {string}
@@ -61,8 +61,13 @@ mumuki.SubmissionsStore = (() => {
     submissionSolutionContent(submission) {
       if (submission.solution) {
         return submission.solution.content;
-      } else {
+      } else if (submission['solution[content]'] !== undefined) {
         return submission['solution[content]'];
+      } else {
+        return JSON.stringify(
+          Object
+            .entries(submission)
+            .filter(([key, _]) => key.startsWith('solution[content[')));
       }
     }
 
@@ -78,6 +83,10 @@ mumuki.SubmissionsStore = (() => {
       return this.submissionSolutionContent(one) === this.submissionSolutionContent(other);
     }
 
+    clear() {
+      window.localStorage.clear();
+    }
+
     // private API
 
     _asString(object) {
@@ -91,3 +100,11 @@ mumuki.SubmissionsStore = (() => {
 
   return SubmissionsStore;
 })();
+
+mumuki.load(() => {
+  $('.mu-restart-guide').on("confirm:complete", (e) => {
+    if (e.detail[0]) {
+      mumuki.SubmissionsStore.clear();
+    }
+  })
+})

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

@@ -13,9 +13,7 @@
       margin: 30px auto;
       max-height: 350px;
       &.error-code-img {
-        margin-top: -80px;
-        margin-left: 0;
-        margin-bottom: 0;
+        margin: 0;
         min-height: 310px;
         max-height: 500px;
         width: calc(100%);

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

@@ -1,9 +1,9 @@
 @import "modules/avatar";
 @import "modules/book_header";
 @import "modules/breadcrumb";
-@import "modules/chapter_show";
 @import "modules/checkboxes";
 @import "modules/console";
+@import "modules/content_show";
 @import "modules/datepicker";
 @import "modules/discussion";
 @import "modules/dropdown";
@@ -17,12 +17,14 @@
 @import "modules/kids";
 @import "modules/kindergarten";
 @import "modules/kids_results";
+@import "modules/medal";
 @import "modules/modal";
 @import "modules/organization_chooser";
 @import "modules/overlap";
 @import "modules/popover";
 @import "modules/progress_bar";
 @import "modules/progress_listing";
+@import "modules/terms";
 @import "modules/timer";
 @import "modules/upload";
 @import "modules/user_profile";

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

@@ -12,6 +12,16 @@
   position: relative;
   top: 100px;
   right: 15px;
+
+  &:hover {
+    outline: none;
+    opacity: 0.5;
+  }
+
+  &:focus {
+    outline: none;
+    opacity: 0.5;
+  }
 }
 
 .mu-avatar-list {
@@ -38,4 +48,15 @@
     box-shadow: -3px 3px 10px -3px $mu-color-primary;
     transform: scale(1.025);
   }
+
+  &:focus {
+    outline: none;
+    box-shadow: -3px 3px 10px -3px $mu-color-primary;
+    transform: scale(1.025);
+  }
+  
+  &.mu-locked {
+    filter: grayscale(100%);
+    cursor: default;
+  }
 }

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

@@ -1,3 +1,14 @@
+@mixin full-size-character {
+  width: 100%;
+  height: 100%;
+  img {
+    width: 100%;
+    height: 100%;
+    object-position: center;
+    object-fit: contain;
+  }
+}
+
 @each $class in success, warning, danger, broken {
   .mu-kids-callout-#{$class} {
     h4 {
@@ -47,3 +58,109 @@ $capital-animation-width: 135px;
   }
 }
 
+.mu-kids-modal-border {
+
+  .modal-dialog {
+
+    height: 100vh;
+    width: 100vw;
+    margin: 0;
+
+    .modal-content {
+
+      position: absolute;
+
+      $width-lg: 800px;
+
+      width: $width-lg;
+
+      top: 60px;
+      left: calc(50% - #{$width-lg} / 2);
+
+      @media (max-width: $width-lg + 30px) {
+        width: calc(100vw - 30px);
+      }
+
+      $border-width: 16px;
+      border-width: $border-width;
+      border-style: solid;
+      border-color: $mu-color-link;
+      border-radius: $border-width;
+      box-shadow: none;
+
+      .modal-body {
+        div, p {
+          height: 100%;
+          .mu-kids-results-carrousel,
+          .mu-kindergarten-context-image-slides {
+            > :not(.active) {
+              display: none;
+            }
+          }
+        }
+        .mu-level p {
+          height: unset;
+        }
+      }
+
+      .mu-kids-modal-button {
+        $diameter: 64px;
+        position: absolute;
+        border-radius: 50%;
+        height: $diameter;
+        width: $diameter;
+        color: white;
+        font-weight: bold;
+        border: none;
+        padding: 0;
+        background: $mu-color-link;
+        &.mu-next,
+        &.mu-close {
+          top: - $diameter / 2 - $border-width / 2;
+          right: - $diameter / 2 - $border-width / 2;
+        }
+        &.mu-previous {
+          top: - $diameter / 2 - $border-width / 2;
+          left: - $diameter / 2 - $border-width / 2;
+        }
+      }
+
+      $mu-statuses-colors: (
+        'broken': $mu-color-broken,
+        'danger': $mu-color-danger,
+        'success': $mu-color-success,
+        'warning': $mu-color-warning,
+        'passed': $mu-color-success,
+        'passed-with-warnings': $mu-color-warning,
+        'failed': $mu-color-danger,
+        'errored': $mu-color-broken,
+        'aborted': $mu-color-broken,
+        'pending': $mu-color-info
+      );
+
+      @each $class, $color in $mu-statuses-colors {
+        &.#{$class} {
+          border-color: $color;
+          .mu-kids-modal-button {
+            background: $color;
+          }
+        }
+        .mu-kids-character.kindergarten {
+          @include full-size-character;
+        }
+
+        .submission-results.kindergarten {
+          width: 100%;
+          height: 100%;
+          .mu-kids-callout-#{$class},
+          p {
+            display: none;
+          }
+          .mu-kids-default-#{$class} {
+            @include full-size-character;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,3 +1,6 @@
+$modal-header-height: 95px;
+$modal-footer-height: 95px;
+
 .mu-kids-exercise.mu-kindergarten {
 
   // layout
@@ -8,14 +11,29 @@
   .mu-kids-exercise-workspace {
     display: flex;
     flex-flow: row;
-    height: calc(100% - #{$kids-characters-height});
+    height: calc(100% - #{$kids-characters-height} - 15px);
     width: 100%;
-  }
 
-  .mu-kids-single-state,
-  .mu-kids-blocks {
-    width: 50%;
-    height: 100%
+    .mu-kids-single-state,
+    .mu-kids-blocks {
+      width: 50%;
+      height: 100%;
+    }
+
+    .mu-kids-blocks {
+      margin-right: 15px;
+    }
+
+    &.mu-full-workspace {
+      .mu-kids-single-state {
+        display: none
+      }
+      .mu-kids-blocks {
+        width: 100%;
+        height: 100%
+      }
+    }
+
   }
 
   .mu-kids-blocks {
@@ -39,18 +57,323 @@
   // no final state,
   // initial state fills its area
 
-  .mu-kids-state.mu-state-initial {
-    height: 100%;
-    width: 100%;
+  .mu-kids-state {
+    &.mu-state-initial {
+      height: 100%;
+      width: 100%;
+    }
+    &.mu-state-final {
+      display: none;
+    }
+    .mu-kids-state-image {
+      padding: 30px;
+      img {
+        padding: 0;
+        border: 3px solid black;
+        border-radius: 30px;
+      }
+    }
   }
 
-  .mu-kids-state.mu-state-final {
+  .mu-kids-compass-rose {
     display: none;
   }
+}
 
-  .mu-kids-compass-rose {
-    display: none;
+.mu-kindergarten.container-fluid {
+  .mu-kids-exercise-description,
+  .mu-kids-exercise-description-fixed {
+    padding: 0;
   }
 }
 
+.modal-content.kindergarten {
+  $width-lg: 800px;
+  $height-lg: $width-lg * 0.625;
+
+  width: $width-lg;
+  height: $height-lg;
+
+  top: calc(50vh - #{$height-lg} / 2);
+
+  @media (orientation: landscape)  and (max-height: $height-lg + 50px) {
+    $height-sm: 85vh;
+    $width-sm: $height-sm / 0.625;
+
+    width: $width-sm;
+    height: $height-sm;
+
+    top: calc(50vh - #{$height-sm} / 2);
+    left: calc(50vw - #{$width-sm} / 2);
+  }
+
+  @media (orientation: portrait) {
+    $height-sm: 85vh;
+    $width-sm: 85vw;
+
+    width: $width-sm;
+    height: $height-sm;
+
+    top: calc(50vh - #{$height-sm} / 2);
+    left: calc(50vw - #{$width-sm} / 2);
+  }
+
+  .modal-header,
+  .modal-footer {
+    text-align: center;
+    text-transform: uppercase;
+  }
+
+  .modal-body.mu-kids-context-body {
+    height: 100%;
+    div img, p img {
+      width: 100%;
+      height: 100%;
+      object-position: center;
+      object-fit: contain;
+    }
+  }
+}
+
+#kids-results.mu-kids-modal-border {
+  .modal-body{
+    height: calc(100% - #{$modal-header-height} - #{$modal-footer-height});
+  }
+}
+
+#kids-results-aborted.mu-kids-modal-border {
+  .modal-content.kindergarten {
+    .modal-body {
+      height: calc(100% - #{$modal-header-height});
+    }
+
+    h4.modal-header {
+      margin: 0;
+    }
+  }
+}
+
+$bubble-border-width: 3px;
+$bubble-height: 90px;
+$bubble-border: $bubble-border-width solid $kids-speech-border-color;
+$bubble-ballon-size: 24px;
+
+$bubble-background-color: white;
+$bubble-padding: 30px;
+
+.mu-kindergarten-header {
+  @include display-flex(row nowrap, flex-start, flex-start);
+
+  align-self: flex-start;
+
+  width: 100%;
+
+  .mu-kindergarten-character {
+    @include display-flex(row nowrap, flex-start, flex-start);
+
+    margin-right: 15px;
+
+    width: 50%;
+
+    $bubble-border-width: 3px;
+    $bubble-height: 90px;
+    $bubble-border: $bubble-border-width solid $kids-speech-border-color;
+    $bubble-ballon-size: 24px;
+
+    $bubble-background-color: white;
+    $bubble-padding: 30px;
+
+    .mu-kindergarten-character-speech-bubble {
+      @include display-flex(row, flex-start, center);
+      position: relative;
+
+      padding: $bubble-padding;
+      padding-right: $bubble-height / 2 + $bubble-padding;
+
+      color: #333;
+      border-radius: 10px;
+      background: white;
+      border: $bubble-border;
+      height: $bubble-height;
+      min-height: $bubble-height;
+      max-height: $bubble-height;
+
+      width: 100%;
+      max-width: 100%;
+
+      margin-top: 10px;
+
+      p {
+        margin: 0;
+      }
+
+      &:before {
+        content: "";
+        position: absolute;
+        bottom: -20px;
+        top: $bubble-height / 2 - $bubble-ballon-size / 2;
+        left: -$bubble-ballon-size / 2;
+        width: $bubble-ballon-size;
+        height: $bubble-ballon-size;
+        background: white;
+        border: $bubble-border;
+        border-left-color: $bubble-background-color;
+        border-top-color: $bubble-background-color;
+        transform: rotate(135deg);
+        border-radius: 50%;
+      }
+    }
+
+    .mu-kindergarten-buttons {
+      display: flex;
+      flex-flow: column;
+      position: absolute;
+      top: -$bubble-border-width;
+      right: -$bubble-border-width;
+      height: calc(100% + #{$bubble-border-width} * 3);
+      border-radius: 10px;
+
+      .mu-kindergarten-show-context,
+      .mu-kindergarten-play-description {
+        border: $bubble-border;
+        height: calc(50% - #{$bubble-border-width} / 2);
+        width: $bubble-height / 2;
+      }
+
+      .mu-kindergarten-show-context {
+        border-top-right-radius: 10px;
+        border-bottom-width: $bubble-border-width * 2/3;
+      }
+
+      .mu-kindergarten-play-description {
+        border-bottom-right-radius: 10px;
+        border-top-width: $bubble-border-width * 2/3;
+      }
+
+      .mu-kindergarten-button-image {
+        width: 100%;
+      }
+
+    }
+  }
+
+  .mu-kindergarten-hint {
+
+    $light-bubble-color: #FAD59F;
+    $light-bubble-border: $bubble-border-width solid $light-bubble-color;
+
+    @include display-flex(row-reverse nowrap, flex-start, flex-start);
+
+    width: 50%;
+    margin-left: 15px;
+
+    margin-top: 10px;
+
+    button {
+      background: none;
+      border: none;
+      outline: none;
+    }
 
+    .mu-hint-light {
+      $light-height: 80px;
+      padding-left: 15px;
+
+      &.off {
+        height: $light-height * 0.75;
+        margin-right: 11px;
+        margin-top: 21px;
+      }
+      &.on {
+        cursor: pointer;
+        height: $light-height;
+        &:hover {
+          filter: brightness(1.15);
+        }
+      }
+    }
+
+    .mu-kindergarten-light-speech-bubble {
+      @include display-flex(column, center, flex-start);
+
+      position: relative;
+
+      padding: $bubble-padding;
+
+      color: #333;
+      border-radius: 10px;
+      background: $light-bubble-color;
+      border: $light-bubble-border;
+      min-height: $bubble-height;
+      z-index: 1;
+
+      width: 75%;
+      max-width: 100%;
+
+      p {
+        margin: 0;
+        text-align: center;
+      }
+
+      &:after {
+        content: "";
+        position: absolute;
+        bottom: -20px;
+        top: $bubble-height / 2 - $bubble-ballon-size / 2;
+        right: -$bubble-ballon-size / 2;
+        width: $bubble-ballon-size;
+        height: $bubble-ballon-size;
+        background: $light-bubble-color;
+        border: $light-bubble-border;
+        border-radius: 50%;
+      }
+
+      .mu-kindergarten-exercise-hint {
+        width: 100%;
+      }
+
+      .mu-kindergarten-hint-media {
+
+        @include display-flex(column, center, center);
+
+        background: white;
+        width: calc(100% + #{$bubble-padding} * 10/6);
+        margin: $bubble-padding (-$bubble-padding * 5/6) (-$bubble-padding * 5/6) (-$bubble-padding * 5/6);
+        padding: $bubble-padding * 5/6;
+
+        &.closed {
+          display: none;
+        }
+
+        .media-object {
+          height: 100%;
+          width: 100%;
+          object-fit: cover;
+        }
+      }
+
+      .expand-or-collapse-hint-media {
+        $button-width: 60px;
+
+        position: absolute;
+        width: $button-width;
+        height: $button-width / 2;
+        bottom: 3px;
+        left: calc(50% - #{$button-width / 2});
+
+        .fa-caret-down {
+          color: white;
+        }
+
+        .fa-caret-up {
+          color: $light-bubble-color;
+        }
+      }
+
+      &:not(.open) {
+        display: none;
+      }
+    }
+
+  }
+}