mumuki-laboratory 5.0.0

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

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

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

@@ -0,0 +1,118 @@
+#console {
+  position: relative;
+}
+
+.editor-code {
+  position: relative;
+  min-height: 300px;
+  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 {
+    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;
+    }
+    .submission-reset,
+    .editor-resize {
+      margin-right: 15px;
+    }
+  }
+}
+
+.editor-files {
+  position: relative;
+}
+
+.files-tabs {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: -6px;
+
+  .nav-tabs {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+
+    li {
+      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;
+      }
+      &.active {
+        a {
+          background-color: #f7f7f7;
+        }
+      }
+      &:not(.active) > a {
+        background-color: #fff;
+        border: 1px solid #ecf0f1;
+        cursor: pointer;
+        &:hover {
+          background-color: #ecf0f1;
+        }
+      }
+    }
+  }
+}
+

data/app/assets/stylesheets/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/application/modules/_exercise_results.scss

@@ -0,0 +1,29 @@
+.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;
+}
+
+.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;
+  }
+}

data/app/assets/stylesheets/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/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/application/modules/_gs-board.scss

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

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

@@ -0,0 +1,136 @@
+/* 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;
+}

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

@@ -0,0 +1,299 @@
+$kids-height: calc(100vh - 80px - 30px);
+$kids-characters-height: 120px;
+$kids-speech-arrow-size: 10px;
+$kids-speech-border-color: lighten($mu-color-disabled, 20%);
+$kids-speech-background-color: #f4f6fb;
+
+$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-exercise-board {
+    hr {
+      border-top: $kids-speech-border;
+    }
+  }
+
+  .mu-kids-character,
+  .mu-kids-gbs-board-initial,
+  .mu-kids-gbs-board-expected {
+    padding: 15px;
+  }
+  .mu-kids-blocks,
+  .mu-kids-gbs-board-expected {
+    margin-top: 15px;
+  }
+  .mu-kids-gbs-board-initial,
+  .mu-kids-gbs-board-expected {
+    height: calc(#{$kids-height} / 2 - 15px);
+  }
+  .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-submit-button {
+      position: absolute;
+      bottom: 15px;
+      right: 15px;
+      width: 54px;
+      height: 54px;
+      z-index: 2;
+      button {
+        border-radius: 50%;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+  }
+
+  .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 {
+      ul {
+        margin: 0;
+      }
+      .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;
+        }
+      }
+      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;
+      color: #333;
+      border-radius: 10px;
+      background: $kids-speech-background-color;
+      border: $kids-speech-border;
+      height: 80px;
+      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;
+      }
+    }
+
+  }
+
+  [class^="mu-kids-gbs-board"] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gs-board {
+      > table {
+        transform: scale(1.5);
+        background-color: $kids-speech-border-color !important;
+        border: $kids-speech-border !important;
+        border-radius: 12px;
+      }
+      display: block;
+      margin: auto;
+      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;
+        }
+        span {
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+
+  .mu-kids-blocks {
+    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-speech-background-color !important;
+      stroke: $kids-speech-border-color !important;
+      stroke-width: 1px !important;
+    }
+    .blocklyScrollbarVertical {
+      right: 0 !important;
+      transform: unset !important;
+    }
+    .blocklyScrollbarHorizontal {
+      right: 15px !important;
+      transform: translateY(0) !important;
+      bottom: 0 !important;
+    }
+    .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;
+    }
+  }
+}
+
+.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-submit-button {
+    display: block;
+  }
+}
+
+@media screen and (orientation: portrait) {
+  .mu-kids-landscape-support {
+    display: flex;
+  }
+  .mu-kids-exercise {
+    visibility: hidden;
+  }
+  .mu-kids-submit-button {
+    display: none;
+  }
+}