|
@@ -990,8 +990,10 @@ window.HotspotQuestion = (function () {
|
|
|
|
|
|
$(config.selector).parent().prepend('\n\
|
|
|
<div id="hotspot-messages-' + config.questionId + '" class="alert alert-info">\n\
|
|
|
- <span class="fa fa-info-circle" aria-hidden="true"></span>\n\
|
|
|
- <span></span>\n\
|
|
|
+ <h4>\n\
|
|
|
+ <span class="fa fa-info-circle" aria-hidden="true"></span>\n\
|
|
|
+ <span></span>\n\
|
|
|
+ </h4>\n\
|
|
|
</div>\n\
|
|
|
');
|
|
|
|
|
@@ -1170,10 +1172,13 @@ window.HotspotQuestion = (function () {
|
|
|
break;
|
|
|
|
|
|
case 'solution':
|
|
|
+ //no break
|
|
|
+ case 'preview':
|
|
|
xhrQuestion = $.getJSON('/main/exercice/hotspot_answers.as.php', {
|
|
|
modifyAnswers: parseInt(config.questionId),
|
|
|
exe_id: parseInt(config.exerciseId)
|
|
|
});
|
|
|
+ break;
|
|
|
}
|
|
|
|
|
|
$.when(xhrQuestion).done(function (questionInfo) {
|
|
@@ -1187,15 +1192,16 @@ window.HotspotQuestion = (function () {
|
|
|
break;
|
|
|
|
|
|
case 'solution':
|
|
|
+ //no break
|
|
|
+ case 'preview':
|
|
|
startHotspotsSolution(questionInfo);
|
|
|
+ break;
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
})();
|
|
|
|
|
|
-var DelineationQuestion = (function () {
|
|
|
- 'use strict';
|
|
|
-
|
|
|
+window.DelineationQuestion = (function () {
|
|
|
var PolygonModel = function (attributes) {
|
|
|
this.id = 0;
|
|
|
this.name = '';
|
|
@@ -1530,7 +1536,10 @@ var DelineationQuestion = (function () {
|
|
|
|
|
|
$(config.selector).parent().prepend('\n\
|
|
|
<div id="delineation-messages" class="alert alert-info">\n\
|
|
|
- <span class="fa fa-info-circle" aria-hidden="true"> <span></span>' + lang.DelineationStatus1 + '</span>\n\
|
|
|
+ <h4>\n\
|
|
|
+ <span class="fa fa-info-circle" aria-hidden="true"></span>\n\
|
|
|
+ <span>' + lang.DelineationStatus1 + '</span>\n\
|
|
|
+ </h4>\n\
|
|
|
</div>\n\
|
|
|
');
|
|
|
|
|
@@ -1651,7 +1660,10 @@ var DelineationQuestion = (function () {
|
|
|
|
|
|
$(config.selector).parent().prepend('\n\
|
|
|
<div id="delineation-messages" class="alert alert-info">\n\
|
|
|
- <span class="fa fa-info-circle" aria-hidden="true"> <span></span>' + lang.DelineationStatus1 + '</span>\n\
|
|
|
+ <h4>\n\
|
|
|
+ <span class="fa fa-info-circle" aria-hidden="true"></span>\n\
|
|
|
+ <span>' + lang.DelineationStatus1 + '</span>\n\
|
|
|
+ </h4>\n\
|
|
|
</div>\n\
|
|
|
');
|
|
|
|
|
@@ -1666,6 +1678,61 @@ var DelineationQuestion = (function () {
|
|
|
lang = questionInfo.lang;
|
|
|
};
|
|
|
|
|
|
+ var PreviewSVG = function (polygonCollection, image) {
|
|
|
+ this.collection = polygonCollection;
|
|
|
+ this.el = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
|
+
|
|
|
+ var self = this,
|
|
|
+ $el = $(this.el);
|
|
|
+
|
|
|
+ this.collection.onAdd(function (polygonModel) {
|
|
|
+ self.renderPolygon(polygonModel);
|
|
|
+ });
|
|
|
+
|
|
|
+ this.render = function () {
|
|
|
+ var imageSvg = document.createElementNS('http://www.w3.org/2000/svg', 'image');
|
|
|
+ imageSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', image.src);
|
|
|
+ imageSvg.setAttributeNS(null, 'width', image.width);
|
|
|
+ imageSvg.setAttributeNS(null, 'height', image.height);
|
|
|
+
|
|
|
+ this.el.setAttributeNS(null, 'version', '1.1');
|
|
|
+ this.el.setAttributeNS(null, 'viewBox', '0 0 ' + image.width + ' ' + image.height);
|
|
|
+ this.el.appendChild(imageSvg);
|
|
|
+ };
|
|
|
+
|
|
|
+ this.renderPolygon = function (oarModel) {
|
|
|
+ var oarSVG = new PolygonSvg(oarModel);
|
|
|
+
|
|
|
+ $el.append(oarSVG.render().el);
|
|
|
+
|
|
|
+ return this;
|
|
|
+ };
|
|
|
+ };
|
|
|
+
|
|
|
+ var startPreviewSvg = function (questionInfo) {
|
|
|
+ var image = new Image();
|
|
|
+ image.onload = function () {
|
|
|
+ var polygonCollection = new PolygonCollection(),
|
|
|
+ previewSvg = new AdminSvg(polygonCollection, image);
|
|
|
+
|
|
|
+ $(config.selector)
|
|
|
+ .css('width', this.width)
|
|
|
+ .append(
|
|
|
+ previewSvg.render().el
|
|
|
+ );
|
|
|
+
|
|
|
+ $.each(questionInfo.hotspots, function (index, hotspotInfo) {
|
|
|
+ var polygonModel = PolygonModel.decode(hotspotInfo);
|
|
|
+ polygonModel.id = index;
|
|
|
+
|
|
|
+ polygonCollection.add(polygonModel);
|
|
|
+ });
|
|
|
+ };
|
|
|
+ image.src = questionInfo.image;
|
|
|
+
|
|
|
+ lang = questionInfo.lang;
|
|
|
+ };
|
|
|
+
|
|
|
var config = {
|
|
|
questionId: 0,
|
|
|
exerciseId: 0,
|
|
@@ -1717,10 +1784,13 @@ var DelineationQuestion = (function () {
|
|
|
break;
|
|
|
|
|
|
case 'solution':
|
|
|
+ //no break
|
|
|
+ case 'preview':
|
|
|
xhrQuestion = $.getJSON('/main/exercice/hotspot_answers.as.php', {
|
|
|
modifyAnswers: parseInt(config.questionId),
|
|
|
exe_id: parseInt(config.exerciseId)
|
|
|
});
|
|
|
+ break;
|
|
|
}
|
|
|
|
|
|
$.when(xhrQuestion).done(function (questionInfo) {
|
|
@@ -1734,6 +1804,9 @@ var DelineationQuestion = (function () {
|
|
|
break;
|
|
|
|
|
|
case 'solution':
|
|
|
+ //no break
|
|
|
+ case 'preview':
|
|
|
+ startPreviewSvg(questionInfo);
|
|
|
break;
|
|
|
}
|
|
|
});
|