Răsfoiți Sursa

Improve hotspots questions - refs #7705

Angel Fernando Quiroz Campos 9 ani în urmă
părinte
comite
123854ea01

+ 1 - 1
main/exercice/hotspot_actionscript.as.php

@@ -40,7 +40,7 @@ $data = [];
 $data['type'] = 'user';
 $data['lang'] = [
     'Square' => get_lang('Square'),
-    'Circle' => get_lang('Circle'),
+    'Ellipse' => get_lang('Ellipse'),
     'Polygon' => get_lang('Polygon'),
     'HotspotStatus1' => get_lang('HotspotStatus1'),
     'HotspotStatus2Polygon' => get_lang('HotspotStatus2Polygon'),

+ 1 - 1
main/exercice/hotspot_actionscript_admin.as.php

@@ -25,7 +25,7 @@ $data = [];
 $data['type'] = 'admin';
 $data['lang'] = [
     'Square' => get_lang('Square'),
-    'Circle' => get_lang('Circle'),
+    'Ellipse' => get_lang('Ellipse'),
     'Polygon' => get_lang('Polygon'),
     'HotspotStatus1' => get_lang('HotspotStatus1'),
     'HotspotStatus2Polygon' => get_lang('HotspotStatus2Polygon'),

+ 1 - 1
main/exercice/hotspot_answers.as.php

@@ -41,7 +41,7 @@ $data = [];
 $data['type'] = 'solution';
 $data['lang'] = [
     'Square' => get_lang('Square'),
-    'Circle' => get_lang('Circle'),
+    'Ellipse' => get_lang('Ellipse'),
     'Polygon' => get_lang('Polygon'),
     'HotspotStatus1' => get_lang('HotspotStatus1'),
     'HotspotStatus2Polygon' => get_lang('HotspotStatus2Polygon'),

+ 6 - 0
main/inc/lib/javascript/hotspot/css/hotspot.css

@@ -283,3 +283,9 @@ svg .hotspot-11 {
     stroke: rgb(59, 59, 59);
     fill: rgba(59, 59, 59, 0.75);
 }
+
+svg .hotspot-answer-point {
+    fill: rgba(0, 103, 124, 0.75);
+    stroke: rgb(0, 103, 124);
+    stroke-width: 1;
+}

+ 37 - 7
main/inc/lib/javascript/hotspot/js/hotspot.js

@@ -366,7 +366,7 @@ var HotspotQuestion = (function () {
         this.circleEl.setAttribute('cx', this.model.get('x'));
         this.circleEl.setAttribute('cy', this.model.get('y'));
         this.circleEl.setAttribute('r', 15);
-        this.circleEl.setAttribute('fill', '#00677C');
+        this.circleEl.setAttribute('class', 'hotspot-answer-point');
 
         this.textEl.setAttribute('x', this.model.get('x'));
         this.textEl.setAttribute('y', this.model.get('y'));
@@ -403,7 +403,7 @@ var HotspotQuestion = (function () {
                 </span>\n\
                 <select class="form-control" aria-describedby="hotspot-' + this.hotspotIndex + '">\n\
                     <option value="square">' + lang.Square + '</option>\n\
-                    <option value="ellipse">' + lang.Circle + '</option>\n\
+                    <option value="ellipse">' + lang.Ellipse + '</option>\n\
                     <option value="polygon">' + lang.Polygon + '</option>\n\
                 </select>\n\
             </div>\n\
@@ -425,6 +425,7 @@ var HotspotQuestion = (function () {
                             width: 0,
                             height: 0
                         });
+                        $('#hotspot-messages span:not(.fa)').text(lang.HotspotStatus2Other);
                         break;
 
                     case 'ellipse':
@@ -434,12 +435,14 @@ var HotspotQuestion = (function () {
                             radiusX: 0,
                             radiusY: 0
                         });
+                        $('#hotspot-messages span:not(.fa)').text(lang.HotspotStatus2Other);
                         break;
 
                     case 'polygon':
                         newHotspot = new PolygonModel({
                             points: []
                         });
+                        $('#hotspot-messages span:not(.fa)').text(lang.HotspotStatus2Polygon);
                         break;
                 }
 
@@ -454,17 +457,37 @@ var HotspotQuestion = (function () {
                 $el.find('.input-group').addClass('active');
 
                 selectedHotspotIndex = self.hotspotIndex;
+
+                switch (this.value) {
+                    case 'square':
+                        $('#hotspot-messages span:not(.fa)').text(lang.HotspotStatus2Other);
+                        break;
+
+                    case 'ellipse':
+                        $('#hotspot-messages span:not(.fa)').text(lang.HotspotStatus2Other);
+                        break;
+
+                    case 'polygon':
+                        $('#hotspot-messages span:not(.fa)').text(lang.HotspotStatus2Polygon);
+                        break;
+                }
             })
             .val(function () {
                 if (self.hotspotSVG.model instanceof SquareModel) {
+                    $('#hotspot-messages span:not(.fa)').text(lang.HotspotStatus2Other);
+
                     return 'square';
                 }
 
                 if (self.hotspotSVG.model instanceof EllipseModel) {
+                    $('#hotspot-messages span:not(.fa)').text(lang.HotspotStatus2Other);
+
                     return 'ellipse';
                 }
 
                 if (self.hotspotSVG.model instanceof PolygonModel) {
+                    $('#hotspot-messages span:not(.fa)').text(lang.HotspotStatus2Polygon);
+
                     return 'polygon';
                 }
             });
@@ -761,6 +784,13 @@ var HotspotQuestion = (function () {
 
             $(config.selector).css('width', this.width).append(hotspotsSVG.render().el);
 
+            $(config.selector).parent().prepend('\n\
+                <div id="hotspot-messages" class="alert alert-info">\n\
+                    <h4><span class="fa fa-info-circle" aria-hidden="true"></span> ' + lang.HotspotStatus1 + '</h4>\n\
+                    <span></span>\n\
+                </div>\n\
+            ');
+
             $(config.selector).parent().prepend('<div class="row"></div>');
 
             contextMenu = new ContextMenu();
@@ -886,7 +916,7 @@ var HotspotQuestion = (function () {
 
                 if (self.answersCollection.length === self.hotspotsCollection.length) {
                     $(config.selector).parent()
-                        .find('#hotspot-messages-' + config.questionId).text(
+                        .find('#hotspot-messages span:not(.fa)-' + config.questionId).text(
                             lang.HotspotExerciseFinished
                         );
 
@@ -894,7 +924,7 @@ var HotspotQuestion = (function () {
                }
 
                $(config.selector).parent()
-                    .find('#hotspot-messages-' + config.questionId).text(
+                    .find('#hotspot-messages span:not(.fa)-' + config.questionId).text(
                         lang.NextAnswer + ' ' + self.hotspotsCollection.get(
                             self.answersCollection.length
                         ).name
@@ -910,7 +940,7 @@ var HotspotQuestion = (function () {
                 if (e.target.tagName === 'circle') {
                     answerIndex = $(e.target).index('circle');
                 } else if (e.target.tagName === 'text') {
-                    answerIndex = $(e.target).index('text')
+                    answerIndex = $(e.target).index('text');
                 }
 
                 hotspot = self.hotspotsCollection.get(answerIndex);
@@ -980,7 +1010,7 @@ var HotspotQuestion = (function () {
                 hotspotsCollection.add(hotspot);
             });
 
-            $(config.selector).parent().find('#hotspot-messages-' + config.questionId)
+            $(config.selector).parent().find('#hotspot-messages span:not(.fa)-' + config.questionId)
                 .text(
                     lang.NextAnswer + ' ' + hotspotsCollection.get(0).name
                 );
@@ -1034,7 +1064,7 @@ var HotspotQuestion = (function () {
         pointSVG.setAttribute('cx', answerModel.get('x'));
         pointSVG.setAttribute('cy', answerModel.get('y'));
         pointSVG.setAttribute('r', 15);
-        pointSVG.setAttribute('fill', '#00677C');
+        pointSVG.setAttribute('class', 'hotspot-answer-point');
 
         var textSVG = document.createElementNS('http://www.w3.org/2000/svg', 'text');
         textSVG.setAttribute('x', answerModel.get('x'));