Plugin: ExerciseMonitoring: Add instructions to take snapshots - refs…

… BT#20901
AngelFQC · Oct 3, 2023 · 50dc5f8 · 50dc5f8
1 parent 83cd805
commit 50dc5f8
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/plugin/exercisemonitoring/lang/english.php b/plugin/exercisemonitoring/lang/english.php
@@ -9,5 +9,8 @@
 
 $strings['ExerciseMonitored'] = "Exercise monitored";
 $strings['Retry'] = "Retry";
-$strings['IdDocumentSnapshot'] = "Snapshot of the ID document";
+$strings['IdDocumentSnapshot'] = "Snapshot of the ID or identification document";
 $strings['LearnerSnapshot'] = "Snapshot of the student";
+
+$strings['ImageIdDocumentCameraInstructions'] = "Show / Place / Situate / Put / Accommodate / Approximate your ID or identification document in front of the camera. Once you see the photo inside the screen box, press the Snapshot button or space bar on your keyboard";
+$strings['ImageLearnerCameraInstructions'] = 'Show / Place / Situate / Put / Accommodate / Approximate your face in front of the camera. Once you see the photo inside the screen box, press the Snapshot button or space bar on your keyboard';
diff --git a/plugin/exercisemonitoring/templates/modal.html.twig b/plugin/exercisemonitoring/templates/modal.html.twig
@@ -20,21 +20,27 @@
                 </div>
 
                 <div class="modal-body text-center" id="em-camera-body" style="display: none;">
+                    <p id="txt-iddoc-img-instructions" class="lead" style="display: block;">
+                        {{ 'ImageIdDocumentCameraInstructions'|get_plugin_lang('ExerciseMonitoringPlugin') }}
+                    </p>
+                    <p id="txt-learner-img-instructions" class="lead" style="display: none;">
+                        {{ 'ImageLearnerCameraInstructions'|get_plugin_lang('ExerciseMonitoringPlugin') }}
+                    </p>
                     <div id="monitoring-camera" class="embed-responsive embed-responsive-4by3"></div>
-                    <p id="countdown"></p>
+                    <br>
                     <button class="btn btn-default" type="button" id="btn-snap" disabled>
                         <span class="fa fa-camera" aria-hidden="true"></span>
                         {{ 'Snapshot'|get_lang }}
                     </button>
                 </div>
 
                 <div class="modal-body text-center" id="em-iddoc-body" style="display: none;">
-                    <p><b>{{ 'IdDocumentSnapshot'|get_plugin_lang('ExerciseMonitoringPlugin') }}</b></p>
+                    <p class="lead">{{ 'IdDocumentSnapshot'|get_plugin_lang('ExerciseMonitoringPlugin') }}</p>
                     <div id="img-iddoc"></div>
                 </div>
 
                 <div class="modal-body text-center" id="em-student-body" style="display: none;">
-                    <p><b>{{ 'LearnerSnapshot'|get_plugin_lang('ExerciseMonitoringPlugin') }}</b></p>
+                    <p class="lead">{{ 'LearnerSnapshot'|get_plugin_lang('ExerciseMonitoringPlugin') }}</p>
                     <div id="img-learner"></div>
                 </div>
 
@@ -76,6 +82,9 @@
             var $imgIdDoc = $('#img-iddoc');
             var $imgLearner = $('#img-learner');
 
+            var $txtIdDocInstructions = $('#txt-iddoc-img-instructions');
+            var $txtLearnerInstructions = $('#txt-learner-img-instructions');
+
             var hasIdDoc = false;
             var hasLearner = false;
 
@@ -103,6 +112,9 @@
                 });
                 Webcam.attach('#monitoring-camera');
                 Webcam.on('live', function () {
+                    $txtIdDocInstructions.show();
+                    $txtLearnerInstructions.hide();
+
                     $btnSnap.prop({disabled: false}).focus();
                     $('#monitoring-camera video').addClass('embed-responsive-item');
                 });
@@ -153,6 +165,9 @@
                     $bodyIdDoc.hide();
                     $bodyCamera.show();
 
+                    $txtIdDocInstructions.hide();
+                    $txtLearnerInstructions.show();
+
                     $btnSnap.prop({disabled: false}).focus();
                 } else if (hasIdDoc && hasLearner) {
                     $btnNext.prop({disabled: true});
@@ -183,7 +198,7 @@
 
                 Webcam.snap(function (dataUri) {
                     var $imgSnapshot = $('<img>')
-                        .prop({src: dataUri, id: 'img-iddoc'})
+                        .prop({src: dataUri, id: 'img-snapshot'})
                         .addClass('img-responsive');
 
                     if (!hasIdDoc && !hasLearner) {