mumuki-laboratory 9.0.3 → 9.1.1

data/app/views/layouts/_kids.html.erb

@@ -2,11 +2,11 @@
 <div class="mu-kids-character-speech-bubble <%= 'no-tabs' unless exercise.hint? %>">
   <% if exercise.hint? %>
       <ul class="mu-kids-character-speech-bubble-tabs">
-        <li class="mu-kids-description active" data-target="description" title="<%= t :task %>">
+        <li class="mu-kids-description active" data-bs-toggle="tooltip" data-bs-target="description" title="<%= t :task %>">
           <i class="far fa-fw fa-file-alt"></i>
         </li>
         <li class="separator"></li>
-        <li class="mu-kids-hint blink" data-target="hint" title="<%= t :need_a_hint %>">
+        <li class="mu-kids-hint blink" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-target="hint" title="<%= t :need_a_hint %>">
           <i class="far fa-fw fa-lightbulb"></i>
         </li>
       </ul>
@@ -15,10 +15,10 @@
     <i class="mu-kids-prev-speech fas fa-fw fa-caret-up"></i>
     <i class="mu-kids-next-speech fas fa-fw fa-caret-down"></i>
     <div class="description"><%= exercise.description_task %></div>
-    <div class="hint" style="display: none"><%= exercise.hint_html %></div>
+    <div class="hint"><%= exercise.hint_html %></div>
   </div>
-  <div class="mu-kids-character-speech-bubble-failed <%= current_user? && @assignment.status %>" style="display: none"></div>
+  <div class="mu-kids-character-speech-bubble-failed <%= current_user? && @assignment.status %> d-none"></div>
 </div>
-<div id="mu-kids-discussion-link-html" class="hidden">
+<div id="mu-kids-discussion-link-html" class="d-none">
   <%= kids_read_discussions_link(exercise) %>
 </div>

data/app/views/layouts/_kindergarten.html.erb

@@ -5,11 +5,13 @@
       <span class="mu-kindergarten-exercise-description"><%= exercise.description_task %></span>
       <div class="mu-kindergarten-buttons">
         <button class="mu-kindergarten-show-context" onclick="mumuki.kids.context.show()">
-          <img class="mu-kindergarten-button-image" src="https://mumuki.io/static/show-context.svg" alt="" title="<%= t :see_context %>">
+          <img class="mu-kindergarten-button-image" src="https://mumuki.io/static/show-context.svg"
+               alt="" data-bs-toggle="tooltip" title="<%= t :see_context %>">
         </button>
         <button class="mu-kindergarten-play-description" onclick="mumuki.kids.speech.click('.mu-kindergarten-exercise-description', '<%= exercise.locale %>')">
-          <img class="mu-kindergarten-button-image mu-kindergarten-play" src="https://mumuki.io/static/audio-play.svg" alt="" title="<%= t :listen_statement %>">
-          <img class="mu-kindergarten-button-image mu-kindergarten-stop hidden" src="https://mumuki.io/static/audio-stop.svg" alt="">
+          <img class="mu-kindergarten-button-image mu-kindergarten-play" src="https://mumuki.io/static/audio-play.svg"
+               alt="" data-bs-toggle="tooltip" data-bs-placement="bottom" title="<%= t :listen_statement %>">
+          <img class="mu-kindergarten-button-image mu-kindergarten-stop d-none" src="https://mumuki.io/static/audio-stop.svg" alt="">
         </button>
       </div>
     </div>
@@ -17,7 +19,8 @@
   <div class="mu-kindergarten-hint">
     <% if exercise.hint? %>
       <button class="mu-hint-light" onclick="mumuki.kids.hint.toggle()">
-        <img class="mu-hint-light on" src="https://mumuki.io/static/lamparita_on.svg" alt="" title="<%= t :need_a_hint %>">
+        <img class="mu-hint-light on" src="https://mumuki.io/static/lamparita_on.svg"
+             alt="" data-bs-toggle="tooltip" data-bs-placement="top" title="<%= t :need_a_hint %>">
       </button>
       <div class="mu-kindergarten-light-speech-bubble">
         <span class="mu-kindergarten-exercise-hint">
@@ -28,11 +31,12 @@
         </button>
       </div>
     <% else %>
-      <img class="mu-hint-light off" src="https://mumuki.io/static/lamparita_off.svg" alt="" title="<%= t :no_need_hint %>">
+      <img class="mu-hint-light off" src="https://mumuki.io/static/lamparita_off.svg"
+           alt="" data-bs-toggle="tooltip" data-bs-placement="left" title="<%= t :no_need_hint %>">
     <% end %>
   </div>
 </div>
 
-<div id="mu-kids-discussion-link-html" class="hidden">
+<div id="mu-kids-discussion-link-html" class="d-none">
   <%= kids_read_discussions_link(exercise) %>
 </div>

data/app/views/layouts/_main.html.erb

@@ -18,24 +18,24 @@
   <%= login_form.header_html %>
 </head>
 <body>
+
+<%= hidden_field_tag "mu-user-id", current_user&.id %>
+<%= hidden_field_tag "mu-organization-id", Organization.current.id %>
+
 <% if should_choose_organization? %>
     <%= render partial: 'layouts/organization_chooser' %>
 <% end %>
 
 <%= yield :navbar %>
 
-<div class="<%= exercise_container_type %><%= @kids ? '-fluid' : '' %>" id="wrap">
-  <div id="toast-container" class="toast-bottom-left">
+<div class="<%= exercise_container_type %><%= ' mb-5' unless input_kids? %>" id="wrap">
+  <div class="toast-container bottom-0 start-0 p-3">
     <% if notice %>
-      <div class="alert toast toast-success" role="alert">
-        <%= notice.html_safe %>
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
-      </div>
+      <%= toast_notice(notice) %>
     <% elsif alert %>
-      <div class="alert toast toast-error" role="alert">
-        <%= alert.html_safe %>
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
-      </div>
+      <%= toast_alert(alert) %>
+    <% elsif info %>
+      <%= toast_info(info) %>
     <% end %>
   </div>
 

data/app/views/layouts/_organizations_listing.html.erb

@@ -1,10 +1,10 @@
 <% current_immersive_organizations.each do |organization| %>
     <div class="row">
       <div class="col-md-6 organization-row">
-        <%= image_tag(organization.banner_url, height: 50, class: 'pull-left') %>
+        <%= image_tag(organization.banner_url, height: 50, class: 'float-start') %>
       </div>
       <div class="col-md-6 organization-row">
-        <%= link_to(t(:go_to, organization: organization.name), current_immersive_path(organization), class: 'btn btn-success pull-right') %>
+        <%= link_to(t(:go_to, organization: organization.name), current_immersive_path(organization), class: 'btn btn-complementary float-end') %>
       </div>
     </div>
 <% end %>

data/app/views/layouts/_progress_bar.html.erb

@@ -6,6 +6,8 @@
       <%= turbolinks_enable_for exercise %>
       href="<%= exercise_path(exercise)%>"
       aria-label="<%= exercise.navigable_name %>"
+      data-bs-toggle="tooltip"
+      data-bs-placement="bottom"
       title="<%= exercise.navigable_name %>"
       data-mu-exercise-id="<%= exercise.id %>"
       class="<%= class_for_progress_list_item(assignment, exercise == actual)%>">

data/app/views/layouts/_submission_result_error.html.erb

@@ -1,4 +1,4 @@
-<div class="bs-callout bs-callout-broken submission-result-error" style="display: none;">
+<div class="bs-callout bs-callout-broken submission-result-error d-none">
   <h4>
     <strong><%= t :errored %></strong>
   </h4>

data/app/views/layouts/_test_results.html.erb

@@ -13,7 +13,7 @@
             <%= status_icon(test_result[:status]) %>
             <%= render_test_result_header test_result %>
             <% unless contextualization.visible_success_output? %>
-              <a data-toggle="collapse" href="#example-result-<%= index %>"  class="example-see-more"><%= t :view_details %></a>
+              <a data-bs-toggle="collapse" href="#example-result-<%= index %>" class="badge bg-light text-dark mu-view-details"><%= t :view_details %></a>
             <% end %>
           </span>
         <% else %>

data/app/views/layouts/_timer.html.erb

@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="col-md-3 col-md-offset-5">
+  <div class="text-center">
     <i class="timer text-center far fa-clock"></i>
     <i class="timer timer-text text-center"><%= t :time_left %></i>
     <i id="timer" class="timer timer-text text-center"></i>

data/app/views/layouts/_user_menu.html.erb

@@ -2,16 +2,17 @@
   <div class="mu-user-menu">
     <div class="mu-user-menu-content">
       <%= user_menu_header %>
-      <div class="col-xs-12 mu-user-menu-items hidden-sm-screen">
+      <div class="mu-user-menu-items mu-hidden-sm-screen">
         <%= profile_user_menu_link %>
         <%= user_menu_divider %>
         <%= messages_user_menu_link %>
         <%= discussions_user_menu_link %>
         <%= user_menu_divider %>
+        <%= activity_user_menu_link %>
         <%= certificates_user_menu_link %>
       </div>
     </div>
-    <div class="mu-user-menu-divider vertical hidden-sm hidden-xs"></div>
+    <div class="mu-user-menu-divider vertical d-none d-md-block"></div>
   </div>
+  <div class="mu-user-menu-divider horizontal d-block d-md-none"></div>
 </div>
-<div class="mu-user-menu-divider horizontal visible-sm visible-xs"></div>

data/app/views/layouts/application.html.erb

@@ -1,54 +1,51 @@
 <%= content_for :navbar do %>
   <%= hidden_field_tag("mu-current-exp", UserStats.exp_for(@current_user)) if in_gamified_context? %>
-  <div class="<%= exercise_container_type %>">
-    <nav class="mu-navbar">
-      <div class="mu-navbar-breadcrumb hidden-xs">
-        <ul class="mu-breadcrumb-list">
-          <%= yield :breadcrumbs %>
-        </ul>
-      </div>
-      <div class="dropdown hamburguer-breadcrumb hidden-sm hidden-md hidden-lg">
-        <% if content_for? :breadcrumbs %>
-        <span class="hamburguer" id="profileDropdown" data-toggle="dropdown">
-          <i class="fas fa-bars"></i>
-        </span>
-          <ul class="dropdown-menu dropdown-menu-left" aria-labelledby="profileDropdown">
-            <%= yield :breadcrumbs %>
-          </ul>
-        <% end %>
-      </div>
-      <div class="mu-navbar-avatar">
-        <% if current_logged_user? %>
-          <% if in_gamified_context? %>
-            <div class="mu-navbar-element">
-              <i class="fas fa-star fa-fw fa-2x mu-navbar-icon mu-level-tooltip" data-toggle="tooltip" data-placement="bottom" level="<%= t(:level) %>"></i>
-              <span class="mu-level-number"></span>
+  <div class="<%= exercise_container_type %> px-0">
+    <nav class="navbar navbar-light navbar-expand-lg mu-navbar">
+      <div class="container-fluid">
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#muNavbar" aria-controls="muNavbar" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="mu-navbar-avatar order-lg-2">
+          <% if current_logged_user? %>
+            <% if in_gamified_context? %>
+              <div class="mu-navbar-element">
+                <i class="fas fa-star fa-fw fa-2x mu-navbar-icon mu-level-tooltip" data-bs-toggle="tooltip" data-bs-placement="bottom" level="<%= t(:level) %>"></i>
+                <span class="mu-level-number"></span>
+              </div>
+            <% end %>
+            <%= render partial: 'notifications/dropdown' %>
+            <div class="dropdown mu-navbar-element">
+              <div id="profileDropdown" class="profile-dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-label="<%= t(:user) %>" role="menu" tabindex="0">
+                <%= profile_picture_for current_user %>
+              </div>
+              <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="profileDropdown">
+                <%= menu_bar_list_items %>
+                <% if any_menu_bar_links? %>
+                  <li class="dropdown-divider"></li>
+                <% end %>
+                <% if faqs_enabled_here? %>
+                  <%= menu_link_to_faqs %>
+                  <li class="dropdown-divider"></li>
+                <% end %>
+                <%= logout_menu_link %>
+              </ul>
             </div>
+          <% else %>
+            <%= login_button %>
           <% end %>
-          <%= render partial: 'notifications/dropdown' %>
-          <div class="dropdown mu-navbar-element">
-            <div id="profileDropdown" class="profile-dropdown" data-toggle="dropdown" aria-label="<%= t(:user) %>" role="menu" tabindex="0">
-              <%= profile_picture_for current_user %>
-              <span class="caret"></span>
-            </div>
-            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="profileDropdown">
-              <%= menu_bar_list_items %>
-              <% if any_menu_bar_links? %>
-                <li class="divider"></li>
-              <% end %>
-              <% if faqs_enabled_here? %>
-                <%= menu_link_to_faqs %>
-                <li class="divider"></li>
-              <% end %>
-              <%= logout_menu_link %>
+        </div>
+        <div class="collapse navbar-collapse mu-navbar-breadcrumb-container" id="muNavbar">
+          <div class="mu-navbar-breadcrumb order-lg-1">
+            <ul class="navbar-nav mu-breadcrumb-list">
+              <%= yield :breadcrumbs %>
             </ul>
           </div>
-        <% else %>
-          <%= login_button %>
-        <% end %>
+        </div>
       </div>
     </nav>
   </div>
+
 <% end %>
 
 <% content_for :footer do %>

data/app/views/layouts/exercise_inputs/editors/_code.html.erb

@@ -1,4 +1,4 @@
-<div class="field form-group editor-code">
+<div class="editor-code">
   <%= form.editor :content, 'dynamic',
                   placeholder: t(:editor_placeholder),
                   class: 'form-control editor',
@@ -6,8 +6,8 @@
                   data: {lines: 17},
                   autocomplete: 'off' %>
   <div class="mu-overlapped">
-    <a class="editor-resize"> <%= expand_icon %></a>
-    <a class="editor-format"><%= format_icon %></a>
-    <a class="editor-reset submission-reset" data-confirm="<%= t(:confirm_reset) %>"><%= restart_icon %></a>
+    <%= expand_icon %>
+    <%= format_icon %>
+    <%= restart_icon 'editor', {'data-confirm': t(:confirm_reset)} %>
   </div>
 </div>

data/app/views/layouts/exercise_inputs/editors/_free_form.html.erb

@@ -1,4 +1,4 @@
-<div class="form-group">
+<div>
   <%= form.hidden_field :content, value: @current_content %>
   <%= raw @exercise.free_form_editor_source %>
 </div>

data/app/views/layouts/exercise_inputs/editors/_multiple_choice.html.erb

@@ -1,10 +1,8 @@
-<div class="form-group">
-  <input id="solution_content" type="text" name="solution[content]" style="display: none">
-  <% @exercise.pretty_choices.each do |choice| %>
-    <div class="field checkbox complementary complementary-checkbox">
-      <%= check_box_tag(choice.id, '1', checked?(choice, @current_content), class: 'solution-choice', 'data-index' => choice.index) %>
-      <%= label_tag(choice.id, choice.text) %>
-    </div>
-  <% end %>
-</div>
+<input class="d-none" id="solution_content" type="text" name="solution[content]">
+<% @exercise.pretty_choices.each do |choice| %>
+  <div class="form-check">
+    <%= check_box_tag(choice.id, '1', checked?(choice, @current_content), class: 'solution-choice form-check-input', 'data-index' => choice.index) %>
+    <%= label_tag(choice.id, choice.text, class: 'form-check-label') %>
+  </div>
+<% end %>
 

data/app/views/layouts/exercise_inputs/editors/_multiple_files.html.erb

@@ -1,22 +1,22 @@
-<div class="field form-group editor-code">
-
+<div class="editor-code">
   <div class="editor-files">
     <span class="files-tabs">
-      <ul class="nav nav-tabs">
+      <ul class="nav nav-tabs" role="tablist">
         <% @files.each_with_index do |file, index| %>
-          <li role="presentation" class="file-tab <%= 'active' if index == 0 %>" data-target="#editor-file-<%= index %>" tabindex='0' data-toggle='tab'>
-            <a class="file-name" href="#"><%= file.name %></a> <i class="delete-file-button fas fa-times"></i>
+          <li class="nav-item file-tab" role="presentation">
+            <a class="file-name nav-link <%= 'active' if index == 0 %>" href="#" role="tab" data-bs-target="#editor-file-<%= index %>"
+               tabindex='0' data-bs-toggle='tab'><%= file.name %></a> <i class="delete-file-button fas fa-times"></i>
           </li>
         <% end %>
       </ul>
-      <i class="add-file-button fas fa-plus"></i>
+      <%= fa_icon :plus, class: 'add-file-button' %>
     </span>
 
     <%= multifile_hidden_inputs %>
 
     <div class="tab-content">
       <% @files.each_with_index do |file, index| %>
-        <div role="tabpanel" class="file-editor tab-pane mu-input-panel <%= 'fade in active' if index == 0 %>" id="editor-file-<%= index %>">
+        <div role="tabpanel" class="file-editor tab-pane mu-input-panel <%= 'fade show active' if index == 0 %>" id="editor-file-<%= index %>">
           <%= form.editor "content[#{file.name}]", file.highlight_mode,
                           placeholder: t(:editor_placeholder),
                           class: 'form-control editor',
@@ -27,9 +27,9 @@
     </div>
 
     <div class="mu-overlapped multiple-files">
-      <a class="editor-resize"> <%= expand_icon %></a>
-      <a class="editor-format"><%= format_icon %></a>
-      <!--<a class="editor-reset submission-reset" data-confirm="<%= t(:confirm_reset) %>"><%= restart_icon %></a> -->
+      <%= expand_icon %>
+      <%= format_icon %>
+      <%= restart_icon 'editor', {'data-confirm': t(:confirm_reset), 'data-multiple-files': 'true'} %>
     </div>
   </div>
 </div>

data/app/views/layouts/exercise_inputs/editors/_single_choice.html.erb

@@ -1,8 +1,6 @@
-<div class="form-group">
-  <% @exercise.pretty_choices.each do |choice| %>
-    <div class="field radio complementary complementary-radio">
-      <%= form.radio_button(:content, choice.value, checked: checked?(choice, @current_content), id: choice.id, required: true) %>
-      <%= label_tag(choice.id, choice.text) %>
-    </div>
-  <% end %>
-</div>
+<% @exercise.pretty_choices.each do |choice| %>
+  <div class="form-check">
+    <%= form.radio_button(:content, choice.value, checked: checked?(choice, @current_content), id: choice.id, required: true, class: 'form-check-input') %>
+    <%= label_tag(choice.id, choice.text, class: 'form-check-label' ) %>
+  </div>
+<% end %>

data/app/views/layouts/exercise_inputs/editors/_text.html.erb

@@ -1,7 +1,6 @@
-<div class="field form-group mu-editor-one-liner">
+<div class="mu-editor-one-liner">
   <%= form.editor :content, 'dynamic',
-                  class: 'form-control editor',
+                  class: 'form-control editor d-none',
                   value: @current_content,
-                  style: 'display: none',
                   data: {lines: 1} %>
 </div>

data/app/views/layouts/exercise_inputs/editors/_upload.html.erb

@@ -1,13 +1,13 @@
-<div class="form-group">
+<div>
   <% @max_file_size = 256000 %>
 
-  <textarea id="solution_content" type="text" name="solution[content]" class="hidden"></textarea>
-  <input id="mu-upload-input" type="file" class="upload submission-control hidden" mu-upload-file-limit=<%= @max_file_size %> accept=".<%= @exercise.language.extension %>" />
+  <textarea id="solution_content" type="text" name="solution[content]" class="d-none"></textarea>
+  <input id="mu-upload-input" type="file" class="upload submission-control d-none" mu-upload-file-limit=<%= @max_file_size %> accept=".<%= @exercise.language.extension %>" />
   <div>
-    <label id="mu-upload-label" for="mu-upload-input" class="btn btn-success">
+    <label id="mu-upload-label" for="mu-upload-input" class="btn btn-complementary">
       <%= fa_icon(:upload, text: t(:select_file), id: "mu-upload-icon") %>
     </label>
-    <div id="mu-upload-file-limit-exceeded" class="hidden">
+    <div id="mu-upload-file-limit-exceeded" class="d-none">
       <%= fa_icon("exclamation-triangle", text: t(:file_exceeds_max_size, size_kb: (@max_file_size / 1000))) %></div>
   </div>
 </div>

data/app/views/layouts/exercise_inputs/forms/_form.html.erb

@@ -9,6 +9,6 @@
   <p><%= t :you_must_sign_in_before_submitting %></p>
 
   <div class="actions">
-    <%= login_button class: 'btn btn-success btn-block' %>
+    <%= login_button class: 'btn btn-complementary w-100' %>
   </div>
 <% end %>

data/app/views/layouts/exercise_inputs/forms/_interactive_form.html.erb

@@ -11,7 +11,7 @@
 <% end %>
 
 <div class="tab-content">
-  <div role="tabpanel" class="tab-pane mu-input-panel fade in active <%= pending_messages_filter(@assignment) %>" id="console">
+  <div role="tabpanel" class="tab-pane mu-input-panel fade show active <%= pending_messages_filter(@assignment) %>" id="console">
     <% if @assignment.pending_messages? %>
         <span class="pending-messages-text"> <%= t :pending_messages_explanation %>
           <a href="javascript:{}"
@@ -25,7 +25,7 @@
     <div class="console">
     </div>
     <div class="mu-overlapped">
-      <a class="console-reset submission-reset"><%= restart_icon %></a>
+      <%= restart_icon %>
     </div>
    </div>
   <div role="tabpanel" class="tab-pane mu-input-panel fade mu-elipsis" id="visible-extra">

data/app/views/layouts/exercise_inputs/forms/_kids_form.html.erb

@@ -8,5 +8,5 @@
   </div>
   <div class="actions mu-kids-reset-button"></div>
   <img class="mu-kids-compass-rose" src="/compass_rose.svg">
-  <div class="mu-kids-overlay" style="display: none"></div>
+  <div class="mu-kids-overlay d-none"></div>
 <% end %>

data/app/views/layouts/exercise_inputs/forms/_playground_form.html.erb

@@ -10,11 +10,11 @@
 <% end %>
 
 <div class="tab-content">
-  <div role="tabpanel" class="tab-pane mu-input-panel in active fade" id="console">
+  <div role="tabpanel" class="tab-pane mu-input-panel show active fade" id="console">
     <div class="console">
     </div>
     <div class="mu-overlapped">
-      <a class="console-reset submission-reset"><%= restart_icon %></a>
+      <%= restart_icon %>
     </div>
   </div>
   <div role="tabpanel" class="tab-pane mu-input-panel fade mu-elipsis" id="visible-extra">