Plugin: ExerciseFocused: Show warning to alert user before leaving ex…

…ercise - refs BT#20900
AngelFQC · Sep 27, 2023 · 3b14809 · 3b14809
1 parent ccbebf3
commit 3b14809
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 1 deletion.
diff --git a/plugin/exercisefocused/lang/english.php b/plugin/exercisefocused/lang/english.php
@@ -27,3 +27,4 @@
 $strings['Outfocused'] = "Outfocused";
 $strings['Return'] = "Return";
 $strings['Motive'] = "Motive";
+$strings['AlertBeforeLeaving'] = "Before leaving the exercise, consider that this action will be tracked.";
diff --git a/plugin/exercisefocused/templates/block.html.twig b/plugin/exercisefocused/templates/block.html.twig
@@ -36,6 +36,7 @@
             -moz-user-select: none;
             -webkit-user-select: none;
             top: 0;
+            z-index: 1010;
         }
         .exercisefocused-block__container {
             text-align: center;
@@ -51,5 +52,37 @@
         .exercisefocused-block__message span {
             font-weight: bold;
         }
+
+        .exercisefocused-backdrop {
+            background-color: rgba(0, 0, 0, 0.01);
+            cursor: not-allowed;
+            height: 100%;
+            opacity: 1;
+            position: fixed;
+            top: 0;
+            width: 100%;
+            z-index: 1000;
+        }
+        .exercisefocused-backdrop::before {
+            background-color: #FFF;
+            content: attr(data-alert);
+            display: none;
+            font-size: 18px;
+            font-weight: 700;
+            margin: 50px auto;
+            padding: 10px;
+            position: relative;
+            text-align: center;
+            width: 340px;
+        }
+        .exercisefocused-backdrop:hover::before {
+            display: block;
+        }
+
+        .main-question, .exercise_actions, #exercise-description {
+            background-color: #FFF;
+            position: relative;
+            z-index: 1005;
+        }
     </style>
 {% endif %}
diff --git a/plugin/exercisefocused/templates/script.html.twig b/plugin/exercisefocused/templates/script.html.twig
@@ -11,6 +11,12 @@
         var $outfocusedLimitBlock = $exerciseFocused.find('#outfocused-limit-block');
         var $outfocusedLimitTarget = $exerciseFocused.find('#outfocused-limit-target');
 
+        var $backdrop = $('<div>')
+            .addClass('exercisefocused-backdrop text-danger')
+            .attr('data-alert', '{{ 'AlertBeforeLeaving'|get_plugin_lang('ExerciseFocusedPlugin') }}');
+
+        $backdrop.appendTo('body');
+
         var secToken = "{{ exercisefocused.sec_token }}";
         var initDocumentTitle = document.title;
         var countdownInterval;
@@ -21,7 +27,6 @@
             var remainingOutfocused = {{ exercisefocused.remaining_outfocused }};
         {% endif %}
 
-
         function finishExam(examType) {
             $(window).off("blur", onBlur)
             $(window).off("focus", onFocus)

diff --git a/plugin/exercisemonitoring/templates/exercise_submit.html.twig b/plugin/exercisemonitoring/templates/exercise_submit.html.twig
@@ -74,6 +74,7 @@
             max-width: 108px;
             max-height: 81px;
             position: absolute;
+            z-index: 1015;
         }
         #monitoring-camera video {
             max-width: 108px;