Merge pull request #3482 from dodona-edu/feedback-motivational-message

Add motivational message to feedback table

app/assets/javascripts/submission.js

@@ -82,9 +82,29 @@ function contextualizeMediaPaths(parentClass, exercisePath, token) {
     });
 }
 
+function initCorrectSubmissionToNextLink(status) {
+    if (status !== "correct") {
+        return;
+    }
+    const link = document.getElementById("next-exercise-link");
+    if (!link) {
+        return;
+    }
+    const message = document.getElementById("submission-motivational-message");
+    const congrats = `js.submission_motivational_message.${Math.ceil(Math.random() * 6)}`;
+    message.innerHTML = `
+        <div class="alert alert-success" role="alert">
+            <span>${I18n.t(congrats)}</span>
+            <a href="${link.href}" class="m-1">
+                ${link.dataset.title}
+            </a>
+        </div>
+    `;
+}
+
 function initSubmissionHistory(id) {
     const element = document.getElementById("history-"+id);
     element.scrollIntoView({ block: "center", inline: "nearest" });
 }
 
-export { initSubmissionShow, initSubmissionHistory };
+export { initSubmissionShow, initSubmissionHistory, initCorrectSubmissionToNextLink };

app/javascript/packs/submission.js

@@ -1,4 +1,4 @@
-import { initSubmissionShow, initSubmissionHistory } from "submission.js";
+import { initSubmissionShow, initCorrectSubmissionToNextLink, initSubmissionHistory } from "submission.js";
 import { initMathJax } from "exercise.js";
 import { CodeListing } from "code_listing/code_listing.ts";
 import { attachClipboard } from "copy";
@@ -7,4 +7,5 @@ window.dodona.initSubmissionShow = initSubmissionShow;
 window.dodona.codeListingClass = CodeListing;
 window.dodona.attachClipboard = attachClipboard;
 window.dodona.initMathJax = initMathJax;
+window.dodona.initCorrectSubmissionToNextLink = initCorrectSubmissionToNextLink;
 window.dodona.initSubmissionHistory = initSubmissionHistory;

app/views/activities/show.html.erb

@@ -21,6 +21,7 @@
   previous_tooltip = previous_activity ? t('.navigation.previous') : t('.navigation.back_to_course')
   next_link = next_activity || breadcrumb_series_path(@series, current_user)
   next_tooltip = next_activity ? t('.navigation.next') : t('.navigation.back_to_course')
+  next_tooltip_actionable = next_activity ? t('.navigation.next_actionable') : t('.navigation.back_to_course_actionable')
 end %>
 
 <div class="row">
@@ -47,7 +48,7 @@ end %>
             <%= link_to previous_link, class: 'btn-icon-inverted', title: previous_tooltip, data: {'bs-toggle': 'tooltip', placement: 'top'} do %>
               <i class="mdi mdi-chevron-left"></i>
             <% end %>
-            <%= link_to next_link, class: 'btn-icon-inverted', title: next_tooltip, data: {'bs-toggle': 'tooltip', placement: 'top'} do %>
+            <%= link_to next_link, class: 'btn-icon-inverted', title: next_tooltip, data: {'bs-toggle': 'tooltip', placement: 'top', title: next_tooltip_actionable}, id: 'next-exercise-link' do %>
                 <i class="mdi mdi-chevron-right"></i>
             <% end %>
           </div>

app/views/submissions/_description.html.erb

@@ -9,6 +9,7 @@
 
 
 <div class="submission-summary clearfix">
+  <div id='submission-motivational-message'></div>
   <span class="description">
     <% if submission.number.nil? %>
       <%= t "submissions.show.submission_for" %>
@@ -93,5 +94,6 @@
 <% end %>
 
 <script>
-  window.dodona.initSubmissionHistory(<%= submission.id %>)
+  dodona.initCorrectSubmissionToNextLink("<%= submission.status %>");
+  dodona.initSubmissionHistory(<%= submission.id %>);
 </script>

config/locales/js/en.yml

@@ -168,3 +168,10 @@ en:
       confirm: Are you sure?
     score_item:
       error: Error while updating
+    submission_motivational_message:
+      1: Congratulations!
+      2: You did it!
+      3: Keep up the good work!
+      4: Nice!
+      5: Good job!
+      6: Well done!

config/locales/js/nl.yml

@@ -168,3 +168,10 @@ nl:
       confirm: Bent u zeker?
     score_item:
       error: Fout bij bijwerken
+    submission_motivational_message:
+      1: Proficiat!
+      2: Goed bezig!
+      3: Doe zo verder!
+      4: Mooi!
+      5: Puik werk!
+      6: Goed gedaan!

config/locales/views/activities/en.yml

@@ -78,6 +78,8 @@ en:
         back_to_course: Back to course
         previous: Previous activity
         next: Next activity
+        next_actionable: Go to the next exercise
+        back_to_course_actionable: Go back to course
       mark_as_read: Mark as read
       read_at: "Marked as read at %{timestamp}"
     series_activities_add_table:

config/locales/views/activities/nl.yml

@@ -78,6 +78,8 @@ nl:
         back_to_course: Terug naar cursus
         previous: Vorige activiteit
         next: Volgende activiteit
+        next_actionable: Ga naar de volgende oefening
+        back_to_course_actionable: Ga terug naar de cursus
       mark_as_read: Markeren als gelezen
       read_at: "Gelezen op %{timestamp}"
     series_activities_add_table:

test/javascript/submission.test.js

@@ -0,0 +1,26 @@
+import { initCorrectSubmissionToNextLink } from "../../app/assets/javascripts/submission";
+
+beforeAll(() => {
+    document.body.innerHTML = `
+        <a href="http://test/next_link" data-title="next_tooltip" id="next-exercise-link">
+            <i class="mdi mdi-chevron-right"></i>
+        </a>
+        <div id='submission-motivational-message'></div>
+    `;
+});
+
+describe("Correct submission link to next test", () => {
+    test("Incorrect status should do nothing", () => {
+        initCorrectSubmissionToNextLink("wrong");
+        const message = document.getElementById("submission-motivational-message");
+        expect(message.innerHTML).toMatch("");
+    });
+
+    test("Link should be fetched from page", () => {
+        initCorrectSubmissionToNextLink("correct");
+        const message = document.getElementById("submission-motivational-message");
+        expect(message.firstElementChild.children).toHaveLength(2);
+        const link = message.firstElementChild.lastElementChild;
+        expect(link.getAttribute("href")).toBe("http://test/next_link");
+    });
+});