Show message for close the polygon hotspot - refs #7705

main/exercice/admin.php

@@ -344,7 +344,6 @@ $template = new Template();
 $htmlHeadXtra[] = $template->fetch('default/exercise/submit.js.tpl');
 $htmlHeadXtra[] = api_get_js('d3/jquery.xcolor.js');
 
-$htmlHeadXtra[] = '<link rel="stylesheet" href="../plugin/hotspot2/css/hotspot.css">';
 $htmlHeadXtra[] = '<script src="../plugin/hotspot2/js/hotspot.js"></script>';
 
 $htmlHeadXtra[] = "<script type=\"text/javascript\" src=\"../plugin/hotspot/JavaScriptFlashGateway.js\"></script>

main/exercice/hotspot_admin.inc.php

@@ -1018,6 +1018,7 @@ if ($modifyAnswers) {
     $height = 450;
     ?>
                 <div id="hotspot-container" class="center-block">
+                    <div id="hotspot-alert"></div>
                     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 0 0">
                     </svg>
                 </div>

main/plugin/hotspot2/js/hotspot.js

@@ -221,6 +221,7 @@ var HotSpotAdmin = (function () {
                     <span class="fa fa-square fa-fw" data-hidden="true" style="color: ' + this.elStroke + '"></span>\n\
                 </span>\n\
                 <select class="form-control" aria-describedby="hotspot-' + this.hotSpotIndex + '">\n\
+                    <option value="">Select</option>\n\
                     <option value="square">Square</option>\n\
                     <option value="ellipse">Ellipse</option>\n\
                     <option value="polygon">Polygon</option>\n\
@@ -366,11 +367,14 @@ var HotSpotAdmin = (function () {
                 break;
 
             case 'polygon':
+                $(container).find('#hotspot-alert').text('Keed pressed the SHIFT key and click the image to close the polygon');
+
                 hotSpotEl.hotspot.addPoint(pointerPosition.x, pointerPosition.y);
                 hotSpotEl.render();
 
                 if (isPressingShift) {
                     hotSpotEl = null;
+                    $(container).find('#hotspot-alert').text('');
                 }
                 break;
         }