From ab771c358afeaf10c44362562147be106664b538 Mon Sep 17 00:00:00 2001
From: Bart Mesuere <Bart.Mesuere@UGent.be>
Date: Wed, 26 May 2021 12:25:08 +0200
Subject: [PATCH] extra feedback after submitting

---
 app/assets/javascripts/exercise.js            | 36 +++++++++++++++++--
 .../stylesheets/components/btn.css.scss       | 17 +++++++++
 2 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/exercise.js b/app/assets/javascripts/exercise.js
index fe018a8746..ca27c7f10f 100644
--- a/app/assets/javascripts/exercise.js
+++ b/app/assets/javascripts/exercise.js
@@ -298,6 +298,7 @@ function initExerciseShow(exerciseId, programmingLanguage, loggedIn, editorShown
                     $("#activity-feedback-link").data("submission_id") === lastSubmission) {
                     loadFeedback(`/submissions/${lastSubmission}`, lastSubmission);
                 }
+                showFABStatus(status);
                 setTimeout(enableSubmitButton, 100);
                 new Toast(I18n.t("js.submission-processed"));
                 lastSubmission = null;
@@ -306,11 +307,42 @@ function initExerciseShow(exerciseId, programmingLanguage, loggedIn, editorShown
     }
 
     function enableSubmitButton() {
-        $("#editor-process-btn").prop("disabled", false).removeClass("busy mdi-timer-sand-empty mdi-spin").addClass("mdi-play");
+        $("#editor-process-btn")
+            .prop("disabled", false)
+            .removeClass("busy mdi-timer-sand-empty mdi-spin")
+            .addClass("mdi-play");
     }
 
     function disableSubmitButton() {
-        $("#editor-process-btn").prop("disabled", true).removeClass("mdi-play").addClass("busy mdi-timer-sand-empty mdi-spin");
+        $("#editor-process-btn")
+            .prop("disabled", true)
+            .removeClass("mdi-play")
+            .addClass("busy mdi-timer-sand-empty mdi-spin");
+    }
+
+    function showFABStatus(status) {
+        const fab = document.getElementById("submission-copy-btn");
+        const icon = fab.children[0];
+        icon.classList.remove("mdi-pencil");
+        if (status === "correct") {
+            fab.classList.add("correct");
+            icon.classList.add(getPositiveEmoji());
+        } else {
+            fab.classList.add("wrong");
+            icon.classList.add("mdi-emoticon-sad-outline");
+        }
+        setTimeout(resetFABStatus, 4000);
+    }
+    function resetFABStatus() {
+        const fab = document.getElementById("submission-copy-btn");
+        const icon = fab.children[0];
+        fab.classList.remove("correct", "wrong");
+        icon.classList.remove(...icon.classList);
+        icon.classList.add("mdi", "mdi-36", "mdi-pencil");
+    }
+    function getPositiveEmoji() {
+        const emojis = ["check-bold", "thumb-up-outline", "emoticon-happy-outline", "emoticon-excited-outline", "emoticon-cool-outline", "emoticon-kiss-outline", "robot-outline", "unicorn-variant", "cow", "emoticon-poop"];
+        return "mdi-" + emojis[Math.floor(Math.pow(Math.random(), 3) * emojis.length)];
     }
 
     function submissionSuccessful(data, userId) {
diff --git a/app/assets/stylesheets/components/btn.css.scss b/app/assets/stylesheets/components/btn.css.scss
index 610a324e41..3e7e077f05 100644
--- a/app/assets/stylesheets/components/btn.css.scss
+++ b/app/assets/stylesheets/components/btn.css.scss
@@ -148,6 +148,23 @@ button.btn-icon {
   opacity: 1;
 }
 
+.btn-fab {
+  &.correct {
+    background-color: $brand-success;
+    border-color: $brand-success;
+  }
+
+  &.wrong {
+    background-color: $brand-danger;
+    border-color: $brand-danger;
+  }
+
+  &.warning {
+    background-color: $brand-warning;
+    border-color: $brand-warning;
+  }
+}
+
 .btn-fab + .btn-fab {
   margin-left: 20px;
 }