mumuki-laboratory 7.5.0

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

@@ -0,0 +1,3 @@
+.fixed-icon {
+  margin-right: 5px;
+}

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

@@ -0,0 +1,119 @@
+$multifile-active-tab-background-color: #FFF;
+$multifile-inactive-tab-background-color: #F7F7F7;
+$multifile-active-tab-border-color: #CCCCCC;
+$multifile-inactive-tab-border-color: #ECF0F1;
+
+#console {
+  position: relative;
+}
+
+.editor-code {
+  position: relative;
+  min-height: 300px;
+  max-height: none;
+}
+
+body:not(.fullscreen) {
+  .CodeMirror-wrap,
+  .CodeMirror-scroll {
+    height: auto;
+    min-height: 300px;
+  }
+}
+
+body.fullscreen {
+  overflow: hidden;
+  form.new_solution {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 120;
+    padding: 0;
+    margin: 0;
+    height: 100vh;
+    background: white;
+    .editor-code {
+      margin: 0;
+    }
+    .btn-submit {
+      display: none;
+    }
+    .CodeMirror-wrap {
+      margin: 0;
+      height: 100vh;
+      width: 100vw;
+    }
+    .CodeMirror-scroll {
+      height: inherit;
+      overflow-y: scroll;
+      overflow-x: auto;
+    }
+  }
+}
+
+.editor-files {
+  position: relative;
+}
+
+.files-tabs {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: -6px;
+  margin-left: 30px;
+
+  .nav-tabs {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 0;
+    z-index: 1;
+
+    li {
+      position: relative;
+      width: 100%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      a {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-right: 0;
+        padding: 5px 10px;
+      }
+      .delete-file-button {
+        position: absolute;
+        right: 16px;
+        top: 12px;
+        cursor: pointer;
+      }
+      &.active {
+        a {
+          background-color: $multifile-active-tab-background-color;
+          border: 1px solid $multifile-active-tab-border-color;
+          border-bottom: none;
+        }
+      }
+      &:not(.active) > a {
+        background-color: $multifile-inactive-tab-background-color;
+        border: 1px solid $multifile-inactive-tab-border-color;
+        border-bottom: 1px solid $multifile-active-tab-border-color;
+        cursor: pointer;
+        &:hover {
+          background-color: $multifile-inactive-tab-border-color;
+        }
+      }
+    }
+  }
+
+  .add-file-button {
+    margin-left: 16px;
+    margin-right: 16px;
+    cursor: pointer;
+  }
+}
+

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

@@ -0,0 +1,38 @@
+.exercise-assignment blockquote {
+  @include border-radius(4px);
+  background-color: $brand-info-light;
+  border-left: 8px solid $brand-info;
+  font-size: 15px;
+  margin: 10px 0;
+}
+
+.exercise-assignment img {
+  max-width: 100%;
+}
+
+.mu-editor-overlap {
+  z-index: 0;
+  position: relative;
+}
+
+.mu-editor {
+  .form-group {
+    margin: 10px 0;
+  }
+  input[type=radio] {
+    margin: 4px;
+    & + label {
+      font-weight: normal;
+    }
+  }
+  label p {
+    margin: 0;
+  }
+}
+
+.mu-editor-one-liner {
+  .ace_content, .mu-empty-placeholder {
+    margin: 4px 0 !important;
+  }
+}
+

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

@@ -0,0 +1,40 @@
+.submission-results .panel-heading {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+.results-item {
+  margin-top: 10px;
+}
+
+ul.results-list {
+  list-style-type: none;
+  padding-left: 10px;
+  li:first-letter {
+    text-transform: capitalize
+  }
+}
+
+.results-list pre {
+  margin-left: 15px;
+}
+
+.example-see-more {
+  font-size: $font-size-base * 0.65;
+  background: lighten($brand-complementary, 10%);
+  border-radius: 6px;
+  padding: 2px 5px;
+  color: white;
+
+  &:hover, &:focus {
+    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/_flash.scss

@@ -0,0 +1,57 @@
+#toast-container {
+  position: fixed;
+  bottom: 12px;
+  left: 15px;
+  z-index: 9999;
+  * {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  .toast {
+    position: relative;
+    overflow: hidden;
+    margin: 0 0 6px;
+    padding: 15px 15px 15px 50px;
+    width: 300px;
+    -moz-border-radius: 3px 3px 3px 3px;
+    -webkit-border-radius: 3px 3px 3px 3px;
+    border-radius: 3px 3px 3px 3px;
+    background-color: $mu-color-info;
+    background-position: 15px center;
+    background-repeat: no-repeat;
+    -moz-box-shadow: 0 0 12px #999999;
+    -webkit-box-shadow: 0 0 12px #999999;
+    box-shadow: 0 0 12px #999999;
+    color: #FFFFFF;
+    opacity: 0.8;
+    &:hover {
+      -moz-box-shadow: 0 0 12px #000000;
+      -webkit-box-shadow: 0 0 12px #000000;
+      box-shadow: 0 0 12px #000000;
+      opacity: 1;
+      cursor: pointer;
+    }
+  }
+  .toast-info {
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
+    background-color: $mu-color-info;
+  }
+  .toast-error {
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
+    background-color: $mu-color-danger;
+  }
+  .toast-success {
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
+    background-color: $mu-color-success;
+  }
+  .toast-warning {
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
+    background-color: $mu-color-warning;
+  }
+  .toast-bottom-left {
+    bottom: 15px;
+    left: 15px;
+    z-index: 999999;
+  }
+}

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

@@ -0,0 +1,16 @@
+.social-icon {
+  padding-top: 6px;
+  font-size: 16px;
+  text-align: center;
+  width: 32px;
+  height: 32px;
+  border: 2px solid $brand-info;
+  border-radius: 50%;
+  margin: 5px;
+}
+
+a.social-icon:hover, a.social-icon:active, a.social-icon:focus {
+  text-decoration: none;
+  border-color: $brand-info-light;
+  color: $brand-info-light;
+}

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_gs-board.scss

@@ -0,0 +1,8 @@
+gs-board {
+  td, th {
+    padding: 1px;
+    span {
+      vertical-align: middle;
+    }
+  }
+}

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

@@ -0,0 +1,144 @@
+/* See https://github.com/jneen/rouge/wiki/List-of-tokens */
+
+pre {
+  background-color: #f0f0f5;
+}
+
+.CodeMirror {
+  line-height: 1.3;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.CodeMirror-matchingbracket {
+  color: $mu-color-complementary !important;
+  font-weight: bold;
+}
+
+.CodeMirror-lines pre.CodeMirror-placeholder {
+  color: $mu-color-disabled;
+}
+
+/* See https://github.com/jneen/rouge/wiki/List-of-tokens */
+
+$mu-color-highlight-background: #f0f0f5;
+
+$mu-color-highlight-identifier: black;
+$mu-color-highlight-keyword: $mu-color-info;
+$mu-color-highlight-literal: #369434;
+$mu-color-highlight-operator: $mu-color-complementary;
+$mu-color-highlight-comment: grey;
+$mu-color-highlight-punctuation: black;
+$mu-color-highlight-text-whitespace: #bbbbbb;
+$mu-color-highlight-string-interpolation: #d01040;
+
+pre {
+  background-color: $mu-color-highlight-background;
+}
+
+.mu-highlight-identifier,
+.na, .nb, .nc, .no, .nd, .ni, .bp, .vc, .vg, .vi, .nx, .nv,
+.nn, .nt,
+.ace_function,
+.ace_variable,
+.ace_parameter,
+.ace_identifier,
+.ne,
+.nf,
+.nl,
+.cm-variable,
+.cm-variable-3,
+.cm-builtin,
+.cm-def,
+.cm-attribute {
+  color: $mu-color-highlight-identifier !important;
+}
+
+.mu-highlight-keyword,
+.k, .kn, .kp, .kr, .kt, .kd, .ace_keyword, .ace_type,
+.cm-type,
+.cm-keyword {
+  color: $mu-color-highlight-keyword !important;
+  font-weight: bold !important;
+}
+
+.mu-highlight-literal,
+.m, .mf, .mh, .mi, .mo,
+.s, .sb, .sc, .sd, .s2, .se, .sh, .sx, .sr, .s1, .ss,
+.kc,
+.il,
+.l,
+.ace_boolean, .ace_numeric,
+.ace_string, .ace_symbol,
+.ace_hexadecimal, .ace_character,
+.ace_decimal,
+.cm-string,
+.cm-string-2,
+.cm-variable-2,
+.cm-number {
+  color: $mu-color-highlight-literal !important;
+}
+
+.mu-highlight-operator,
+.ow, .o,
+.ace_operator,
+.ace_meta.ace_rule.ace_definition.ace_prolog,
+.cm-operator {
+  color: $mu-color-highlight-operator !important;
+  font-weight: bold !important;
+}
+
+.mu-highlight-comment,
+.ace_comment, .c, .cm, .cp, .c1, .cs,
+.cm-comment {
+  color: $mu-color-highlight-comment !important;
+}
+
+.mu-highlight-punctuation,
+.ace_punctuation,
+.ace_paren,
+.p,
+.ace_keyword.ace_operator.ace_definition.ace_prolog,
+.cm-bracket,
+.cm-punctuation,
+pre code {
+  color: black !important;
+  font-weight: normal !important;
+}
+
+.mu-highlight-text-whitespace,
+.w {
+  color: $mu-color-highlight-text-whitespace;
+}
+
+.mu-highlight-string-interpolation,
+.si {
+  color: $mu-color-highlight-string-interpolation;
+}
+
+$mu-color-highlight-prolog-variables: $mu-color-info;
+$mu-color-highlight-prolog-atoms: $mu-color-primary;
+
+.mu-highlight-prolog-variables,
+.ace_variable.ace_prolog,
+.prolog .nv {
+  color: $mu-color-highlight-prolog-variables !important;
+  font-weight: normal !important;
+}
+
+.mu-highlight-prolog-atoms,
+.ace_name.ace_prolog,
+.ace_atom.ace_prolog,
+.prolog .ss {
+  color: $mu-color-highlight-prolog-atoms !important;
+  font-weight: normal !important;
+}
+
+$mu-color-highlight-css-literal: #b96dba;
+
+.css .m { color: $mu-color-highlight-literal !important; }
+.css .nc { color: $mu-color-highlight-identifier !important; font-weight: bold !important; }
+.css .nl { color: $mu-color-highlight-keyword !important; }
+.css .n { color: $mu-color-highlight-css-literal !important; }
+.css .nb { color: $mu-color-highlight-css-literal !important; }

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

@@ -0,0 +1,513 @@
+$kids-height: calc(100vh - 80px - 30px) !default;
+
+$kids-characters-height: 120px;
+$kids-speech-arrow-size: 10px;
+$kids-speech-border-color: lighten($mu-color-disabled, 20%);
+$kids-speech-background-color: #f4f6fb;
+$kids-scrollbar-background-color: #d7d9dd;
+
+$kids-speech-border: 1px solid $kids-speech-border-color;
+
+$kids-speech-tabs-width: 40px;
+
+.mu-kids-exercise {
+  height: $kids-height;
+  min-height: $kids-height;
+  max-height: $kids-height;
+
+  display: flex;
+  flex-direction: row;
+
+  .mu-kids-exercise-description,
+  .mu-kids-exercise-board {
+    display: flex;
+    flex-direction: column;
+  }
+  .mu-kids-exercise-description {
+    padding-right: 15px;
+  }
+
+  .mu-kids-states {
+    padding-bottom: 15px;
+    height: $kids-height;
+  }
+  .mu-kids-character {
+    padding: 15px;
+  }
+  .mu-kids-state {
+    padding: 0;
+  }
+  .mu-kids-blocks {
+    margin-top: 15px;
+  }
+  .mu-kids-state {
+    height: 50%;
+  }
+  .mu-kids-character {
+    height: $kids-characters-height;
+  }
+  .mu-kids-blocks {
+    height: calc(#{$kids-height} - #{$kids-characters-height} - 30px);
+    margin-left: 0;
+    margin-right: 0;
+    position: relative;
+    .mu-kids-overlay {
+      border-radius: 10px;
+      position: absolute;
+      z-index: 80;
+      background-color: white;
+      opacity: 0.50;
+      top: 0;
+      right: 0;
+      left: 0;
+      bottom: 0;
+      cursor: not-allowed;
+    }
+    .mu-kids-reset-button,
+    .mu-kids-compass-rose,
+    .mu-kids-submit-button {
+      position: absolute;
+      right: 15px;
+      width: 56px;
+      height: 56px;
+      z-index: 70; //Value defined by blockly
+    }
+    .mu-kids-compass-rose {
+      top: 15px;
+      opacity: 0.75;
+    }
+    .mu-kids-submit-button {
+      z-index: 90;
+      bottom: 15px;
+      button {
+        border-radius: 50%;
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .mu-kids-reset-button {
+      bottom: 80px;
+      transform: scale(0.9);
+      paper-fab {
+        background-color: $mu-color-disabled;
+      }
+    }
+
+  }
+
+  .mu-kids-character-animation {
+    width: 120px;
+  }
+
+  .mu-kids-character {
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 0;
+    border: none;
+    img {
+      height: 100%;
+    }
+    .mu-kids-character-speech-bubble {
+      &.failed, &.passed_with_warnings {
+        padding-right: 20px;
+      }
+      .mu-kids-discussion-link {
+        i {
+          width: 13px;
+          height: 13px;
+          line-height: 13px;
+          border-radius: 50%;
+        }
+
+      }
+
+      @media screen and (max-width: $screen-sm-max) {
+        h4 {
+          &.text-warning {
+            font-size: 18px;
+            margin-top: 8px;
+          }
+        }
+        ul.results-list li {
+          font-size: 13px
+        }
+        .mu-kids-states strong {
+          font-size: 16px;
+        }
+      }
+
+      @media screen and (max-width: $screen-xs-max) {
+        h4 {
+          font-size: 20px;
+          &.text-warning {
+            font-size: 14px;
+            margin-top: 5px;
+          }
+        }
+        ul.results-list li {
+          font-size: 12px
+        }
+        .mu-kids-states strong {
+          font-size: 14px;
+        }
+      }
+
+      &.with-result-item {
+        padding-top: 5px;
+        padding-bottom: 5px;
+
+        .results-list {
+          margin-top: -10px;
+        }
+      }
+
+      ul {
+        margin: 0;
+      }
+      &.no-tabs {
+        .mu-kids-prev-speech,
+        .mu-kids-next-speech {
+          right: 0px;
+        }
+      }
+      .mu-kids-prev-speech,
+      .mu-kids-next-speech {
+        position: absolute;
+        right: $kids-speech-tabs-width;
+        font-size: 90%;
+        color: darken($mu-color-disabled, 25%);
+        &:hover {
+          cursor: pointer;
+        }
+      }
+      div.mu-kids-character-speech-bubble-normal {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+      div.mu-kids-character-speech-bubble-failed {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+      ul.mu-kids-character-speech-bubble-tabs {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        height: 100%;
+        width: $kids-speech-tabs-width;
+        position: absolute;
+        right: 0;
+        top: 0;
+        list-style-type: none;
+        padding: 0;
+        background-color: lighten($kids-speech-background-color, 2%);
+        border-radius: 0 10px 10px 0;
+        li {
+          border-left: $kids-speech-border;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+          padding: 0;
+          margin: 0;
+          height: 50%;
+          width: 100%;
+          &:first-child {
+            border-radius: 0 10px 0 0
+          }
+          &:last-child {
+            border-radius: 0 0 10px 0
+          }
+        }
+        li.separator {
+          cursor: default;
+          pointer-events: none;
+          height: 0;
+          width: 100%;
+          border-top: $kids-speech-border;
+        }
+        li.active {
+          border-left: none;
+          background-color: $kids-speech-background-color;
+        }
+      }
+      .mu-kids-prev-speech {
+        top: 0;
+      }
+      .mu-kids-next-speech {
+        bottom: 0;
+      }
+      position: relative;
+      display: flex;
+      align-items: center;
+      padding: 15px 50px 15px 15px;
+      &.no-tabs {
+        padding-right: 25px;
+      }
+      color: #333;
+      border-radius: 10px;
+      background: $kids-speech-background-color;
+      border: $kids-speech-border;
+      height: 90px;
+      width: 100%;
+      p {
+        margin-bottom: 0;
+        &:not(:first-child) {
+          display: none;
+        }
+      }
+      &:before {
+        position: absolute;
+        top: calc(50% - #{$kids-speech-arrow-size + 2px} / 2);
+        left: -$kids-speech-arrow-size - 2px;
+        border-width: (1px + $kids-speech-arrow-size / 2) (2px + $kids-speech-arrow-size) (1px + $kids-speech-arrow-size / 2) 0;
+        content: '';
+        border-style: solid;
+        border-color: transparent $kids-speech-border-color;
+      }
+      &:after {
+        position: absolute;
+        top: calc(50% - #{$kids-speech-arrow-size} / 2);
+        left: -$kids-speech-arrow-size;
+        border-width: ($kids-speech-arrow-size / 2) $kids-speech-arrow-size ($kids-speech-arrow-size / 2) 0;
+        border-color: transparent $kids-speech-background-color;
+        content: '';
+        border-style: solid;
+      }
+
+      $classes: (
+              failed: $mu-color-danger,
+              passed: $mu-color-success,
+              aborted: $mu-color-broken,
+              errored: $mu-color-broken,
+              passed_with_warnings: $mu-color-warning
+      );
+      @each $status, $class in $classes {
+        $lighten-class: lighten($class, 35%);
+        &.#{$status} {
+          border: none;
+          background: $lighten-class;
+          &:before {
+            border: none;
+          }
+          &:after {
+            border-color: transparent $lighten-class;
+          }
+        }
+      }
+
+    }
+
+  }
+
+  .mu-kids-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    strong {
+      margin-top: 7.5px;
+    }
+    #mu-actual-state-text {
+      display: none;
+    }
+    .mu-kids-state-image {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      width: 100%;
+      gs-board {
+        > table {
+          transform: scale(1.5);
+          background-color: $kids-speech-border-color !important;
+          border: $kids-speech-border !important;
+          border-radius: 12px;
+        }
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 1px;
+        max-height: 100%;
+        td, th {
+          &.gs-board {
+            border: $kids-speech-border !important;
+            background-color: #FFFFFF;
+          }
+          &.gbs_lx,
+          &.gbs_lh,
+          &.gbs_lv {
+            background-color: $kids-speech-background-color !important;
+            border: 0 solid transparent !important;
+          }
+          &.gbs_gh.gs-cell {
+            background: rgba(221, 221, 136, 0.7) !important;
+            outline: 3px solid $kids-speech-border-color !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+.mu-kids-blocks, .mu-read-only-editor {
+  form,
+  [id*="custom-editor"],
+  gs-element-blockly,
+  #blocklyDiv,
+  .blocklySvg {
+    min-width: 100% !important;
+    min-height: 100% !important;
+    width: 100% !important;
+    height: 100% !important;
+  }
+  gs-element-blockly {
+    padding: 0;
+    margin: 0;
+  }
+  .blocklyMainBackground {
+    rx: 10px !important;
+    ry: 10px !important;
+  }
+  .blocklyScrollbarHandle {
+    fill: $kids-scrollbar-background-color !important;
+    stroke: $kids-speech-border-color !important;
+    stroke-width: 1px !important;
+  }
+  .blocklyMainWorkspaceScrollbar {
+    display: none;
+  }
+  .blocklyScrollbarHorizontal {
+    display: none;
+  }
+  .blocklyToolboxDiv {
+    background-color: $kids-speech-background-color !important;
+    border: $kids-speech-border !important;
+    border-right: none !important;
+    border-top-left-radius: 10px !important;
+    border-bottom-left-radius: 10px !important;
+  }
+  .blocklyFlyoutBackground {
+    fill: $kids-speech-background-color !important;
+    border: $kids-speech-border !important;
+    border-right: none !important;
+  }
+}
+
+$statuses-glow-animation: (
+  failed: $mu-color-danger,
+  passed_with_warnings: $mu-color-warning
+);
+
+@each $status, $color in $statuses-glow-animation {
+  @keyframes glow-#{$status} {
+    0% {
+      box-shadow: 0 0 0 #ffff7f;
+    }
+    50% {
+      box-shadow: 0 0 15px 4px $color;
+      color: darken($color, 10%);
+      transform: scale(1.2);
+    }
+    100% {
+      box-shadow: 0 0 25px 4px transparent;
+    }
+  }
+
+  .#{$status} .mu-kids-discussion-link {
+    color: $color;
+    i {
+      -webkit-animation: glow-#{$status} 1.5s ease infinite;
+      -moz-animation: glow-#{$status} 1.5s ease infinite;
+      animation: glow-#{$status} 1.5s ease infinite;
+    }
+  }
+
+}
+
+.mu-kids-hint.blink i {
+  width: 8px;
+  height: 8px;
+  line-height: 12px;
+  margin: 0 2px 4px 0;
+  -webkit-animation: hint-blink 1.5s ease infinite;
+  -moz-animation: hint-blink 1.5s ease infinite;
+  animation: hint-blink 1.5s ease infinite;
+}
+
+@keyframes hint-blink {
+ 50% {
+   color: #7f7f00;
+   background-color: rgba(255,255,0, 0.5);
+   transform: scale(1.2);
+ }
+}
+
+.mu-read-only-editor {
+  #blocklyDiv {
+    height: 400px !important;
+  }
+  #blocklyDiv {
+    border: $kids-speech-border !important;
+  }
+  .blocklyMainBackground {
+    stroke-width: 0px;
+  }
+}
+
+.mu-kids-landscape-support {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  height: $kids-height;
+  min-height: $kids-height;
+  max-height: $kids-height;
+}
+
+@media screen and (orientation: landscape) {
+  .mu-kids-landscape-support {
+    display: none;
+  }
+  .mu-kids-exercise {
+    visibility: unset;
+  }
+  .mu-kids-reset-button,
+  .mu-kids-submit-button {
+    display: block;
+  }
+}
+
+@media screen and (orientation: portrait) {
+  .mu-kids-landscape-support {
+    display: flex;
+  }
+  .mu-kids-exercise {
+    visibility: hidden;
+  }
+  .mu-kids-reset-button,
+  .mu-kids-submit-button {
+    display: none;
+  }
+}
+
+@media screen and (max-height: $screen-xs-min) {
+  .mu-kids-exercise {
+    height: 100vh;
+    min-height: 100vh;
+    max-height: 100vh;
+
+    .mu-kids-states {
+      height: 100vh;
+    }
+    .mu-kids-blocks {
+      height: calc(100vh - #{$kids-characters-height} - 30px);
+    }
+  }
+}