|
@@ -504,6 +504,8 @@ window.HotspotQuestion = (function () {
|
|
|
AdminHotspotsSVG.prototype.render = function () {
|
|
|
this.el.setAttribute('version', '1.1');
|
|
|
this.el.setAttribute('viewBox', '0 0 ' + this.image.width + ' ' + this.image.height);
|
|
|
+ this.el.setAttribute('width', this.image.width);
|
|
|
+ this.el.setAttribute('height', this.image.height);
|
|
|
|
|
|
var imageSvg = document.createElementNS('http://www.w3.org/2000/svg', 'image');
|
|
|
imageSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'href', this.image.src);
|
|
@@ -522,7 +524,7 @@ window.HotspotQuestion = (function () {
|
|
|
|
|
|
this.el.appendChild(
|
|
|
hotspotSVG.render().el
|
|
|
- );
|
|
|
+ );
|
|
|
|
|
|
var hotspotSelect = new HotspotSelect(hotspotIndex, this.collection, hotspotSVG);
|
|
|
|
|
@@ -802,6 +804,8 @@ window.HotspotQuestion = (function () {
|
|
|
UserHotspotsSVG.prototype.render = function () {
|
|
|
this.el.setAttribute('version', '1.1');
|
|
|
this.el.setAttribute('viewBox', '0 0 ' + this.image.width + ' ' + this.image.height);
|
|
|
+ this.el.setAttribute('width', this.image.width);
|
|
|
+ this.el.setAttribute('height', this.image.height);
|
|
|
|
|
|
var imageSvg = document.createElementNS('http://www.w3.org/2000/svg', 'image');
|
|
|
imageSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'href', this.image.src);
|
|
@@ -875,18 +879,20 @@ window.HotspotQuestion = (function () {
|
|
|
if (self.answersCollection.length === self.hotspotsCollection.length) {
|
|
|
$(config.selector).parent()
|
|
|
.find('#hotspot-messages-' + config.questionId + ' span:not(.fa)').text(
|
|
|
- lang.HotspotExerciseFinished
|
|
|
- );
|
|
|
+ lang.HotspotExerciseFinished
|
|
|
+ );
|
|
|
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
$(config.selector).parent()
|
|
|
.find('#hotspot-messages-' + config.questionId + ' span:not(.fa)').text(
|
|
|
- lang.NextAnswer + ' ' + self.hotspotsCollection.get(
|
|
|
- self.answersCollection.length
|
|
|
- ).name
|
|
|
- );
|
|
|
+ lang.NextAnswer +
|
|
|
+ ' ' +
|
|
|
+ self.hotspotsCollection
|
|
|
+ .get(self.answersCollection.length)
|
|
|
+ .name
|
|
|
+ );
|
|
|
|
|
|
isMoving = false;
|
|
|
})
|
|
@@ -1016,6 +1022,8 @@ window.HotspotQuestion = (function () {
|
|
|
SolutionHotspotsSVG.prototype.render = function () {
|
|
|
this.el.setAttribute('version', '1.1');
|
|
|
this.el.setAttribute('viewBox', '0 0 ' + this.image.width + ' ' + this.image.height);
|
|
|
+ this.el.setAttribute('width', this.image.width);
|
|
|
+ this.el.setAttribute('height', this.image.height);
|
|
|
|
|
|
var imageSvg = document.createElementNS('http://www.w3.org/2000/svg', 'image');
|
|
|
imageSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'href', this.image.src);
|
|
@@ -1103,13 +1111,13 @@ window.HotspotQuestion = (function () {
|
|
|
|
|
|
var getPointOnImage = function (referenceElement, x, y) {
|
|
|
var pointerPosition = {
|
|
|
- left: x + window.scrollX,
|
|
|
- top: y + window.scrollY
|
|
|
- },
|
|
|
- canvasOffset = {
|
|
|
- x: referenceElement.getBoundingClientRect().left + window.scrollX,
|
|
|
- y: referenceElement.getBoundingClientRect().top + window.scrollY
|
|
|
- };
|
|
|
+ left: x + window.scrollX,
|
|
|
+ top: y + window.scrollY
|
|
|
+ },
|
|
|
+ canvasOffset = {
|
|
|
+ x: referenceElement.getBoundingClientRect().left + window.scrollX,
|
|
|
+ y: referenceElement.getBoundingClientRect().top + window.scrollY
|
|
|
+ };
|
|
|
|
|
|
return {
|
|
|
x: Math.round(pointerPosition.left - canvasOffset.x),
|
|
@@ -1136,22 +1144,22 @@ window.HotspotQuestion = (function () {
|
|
|
|
|
|
switch (config.for) {
|
|
|
case 'admin':
|
|
|
- xhrQuestion = $.getJSON(config.relPath+'exercise/hotspot_actionscript_admin.as.php', {
|
|
|
+ xhrQuestion = $.getJSON(config.relPath + 'exercise/hotspot_actionscript_admin.as.php', {
|
|
|
modifyAnswers: parseInt(config.questionId)
|
|
|
});
|
|
|
break;
|
|
|
|
|
|
case 'user':
|
|
|
- xhrQuestion = $.getJSON(config.relPath+'exercise/hotspot_actionscript.as.php', {
|
|
|
+ xhrQuestion = $.getJSON(config.relPath + 'exercise/hotspot_actionscript.as.php', {
|
|
|
modifyAnswers: parseInt(config.questionId),
|
|
|
exe_id: parseInt(config.exerciseId)
|
|
|
});
|
|
|
break;
|
|
|
|
|
|
case 'solution':
|
|
|
- //no break
|
|
|
+ //no break
|
|
|
case 'preview':
|
|
|
- xhrQuestion = $.getJSON(config.relPath+'exercise/hotspot_answers.as.php', {
|
|
|
+ xhrQuestion = $.getJSON(config.relPath + 'exercise/hotspot_answers.as.php', {
|
|
|
modifyAnswers: parseInt(config.questionId),
|
|
|
exe_id: parseInt(config.exerciseId)
|
|
|
});
|
|
@@ -1169,7 +1177,7 @@ window.HotspotQuestion = (function () {
|
|
|
break;
|
|
|
|
|
|
case 'solution':
|
|
|
- //no break
|
|
|
+ //no break
|
|
|
case 'preview':
|
|
|
startHotspotsSolution(questionInfo);
|
|
|
break;
|
|
@@ -1345,7 +1353,7 @@ window.DelineationQuestion = (function () {
|
|
|
var type = this.model instanceof OarModel ? 'oar' : 'delineation';
|
|
|
|
|
|
var template = '\n\
|
|
|
- <div class="input-group hotspot-' + this.model.id + ' active">\n\
|
|
|
+ <div class="input-group hotspot-' + this.model.id + ' active">\n\
|
|
|
<span class="input-group-addon" id="hotspot-' + this.model.id + '">\n\
|
|
|
<span class="fa fa-square fa-fw" data-hidden="true"></span>\n\
|
|
|
<span class="sr-only">' + (type === 'delineation' ? lang.Delineation : lang.Oar) + '</span>\n\
|
|
@@ -1428,11 +1436,13 @@ window.DelineationQuestion = (function () {
|
|
|
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);
|
|
|
+ imageSvg.setAttribute('width', image.width);
|
|
|
+ imageSvg.setAttribute('height', image.height);
|
|
|
|
|
|
- this.el.setAttributeNS(null, 'version', '1.1');
|
|
|
- this.el.setAttributeNS(null, 'viewBox', '0 0 ' + image.width + ' ' + image.height);
|
|
|
+ this.el.setAttribute('version', '1.1');
|
|
|
+ this.el.setAttribute('viewBox', '0 0 ' + image.width + ' ' + image.height);
|
|
|
+ this.el.setAttribute('width', image.width);
|
|
|
+ this.el.setAttribute('height', image.height);
|
|
|
this.el.appendChild(imageSvg);
|
|
|
|
|
|
var isDrawing = false;
|
|
@@ -1449,37 +1459,37 @@ window.DelineationQuestion = (function () {
|
|
|
});
|
|
|
|
|
|
$el.on({
|
|
|
- 'dragstart': function (e) {
|
|
|
- e.preventDefault();
|
|
|
- },
|
|
|
- 'click': function (e) {
|
|
|
- e.preventDefault();
|
|
|
+ 'dragstart': function (e) {
|
|
|
+ e.preventDefault();
|
|
|
+ },
|
|
|
+ 'click': function (e) {
|
|
|
+ e.preventDefault();
|
|
|
|
|
|
- var currentPoint = getPointOnImage(self.el, e.clientX, e.clientY),
|
|
|
- points = [];
|
|
|
+ var currentPoint = getPointOnImage(self.el, e.clientX, e.clientY),
|
|
|
+ points = [];
|
|
|
|
|
|
- if (!isDrawing) {
|
|
|
- isDrawing = true;
|
|
|
- } else {
|
|
|
- points = self.collection.get(selectedPolygonIndex).get('points');
|
|
|
- }
|
|
|
+ if (!isDrawing) {
|
|
|
+ isDrawing = true;
|
|
|
+ } else {
|
|
|
+ points = self.collection.get(selectedPolygonIndex).get('points');
|
|
|
+ }
|
|
|
|
|
|
- points.push([currentPoint.x, currentPoint.y]);
|
|
|
+ points.push([currentPoint.x, currentPoint.y]);
|
|
|
|
|
|
- self.collection.get(selectedPolygonIndex).set('points', points);
|
|
|
- },
|
|
|
- 'contextmenu': function (e) {
|
|
|
- e.preventDefault();
|
|
|
+ self.collection.get(selectedPolygonIndex).set('points', points);
|
|
|
+ },
|
|
|
+ 'contextmenu': function (e) {
|
|
|
+ e.preventDefault();
|
|
|
|
|
|
- if (!contextMenu.el.parentNode) {
|
|
|
- $el.parent().append(contextMenu.render().el);
|
|
|
- }
|
|
|
+ if (!contextMenu.el.parentNode) {
|
|
|
+ $el.parent().append(contextMenu.render().el);
|
|
|
+ }
|
|
|
|
|
|
- var currentPoint = getPointOnImage(self.el, e.clientX, e.clientY);
|
|
|
+ var currentPoint = getPointOnImage(self.el, e.clientX, e.clientY);
|
|
|
|
|
|
- contextMenu.show(currentPoint.x, currentPoint.y);
|
|
|
- }
|
|
|
- });
|
|
|
+ contextMenu.show(currentPoint.x, currentPoint.y);
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
return this;
|
|
|
};
|
|
@@ -1548,11 +1558,13 @@ window.DelineationQuestion = (function () {
|
|
|
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);
|
|
|
+ imageSvg.setAttribute('width', image.width);
|
|
|
+ imageSvg.setAttribute('height', image.height);
|
|
|
|
|
|
- this.el.setAttributeNS(null, 'version', '1.1');
|
|
|
- this.el.setAttributeNS(null, 'viewBox', '0 0 ' + image.width + ' ' + image.height);
|
|
|
+ this.el.setAttribute('version', '1.1');
|
|
|
+ this.el.setAttribute('viewBox', '0 0 ' + image.width + ' ' + image.height);
|
|
|
+ this.el.setAttribute('width', image.width);
|
|
|
+ this.el.setAttribute('height', image.height);
|
|
|
this.el.appendChild(imageSvg);
|
|
|
|
|
|
this.renderDelineation();
|
|
@@ -1585,37 +1597,37 @@ window.DelineationQuestion = (function () {
|
|
|
});
|
|
|
|
|
|
$el.on({
|
|
|
- 'dragstart': function (e) {
|
|
|
- e.preventDefault();
|
|
|
- },
|
|
|
- 'click': function (e) {
|
|
|
- e.preventDefault();
|
|
|
+ 'dragstart': function (e) {
|
|
|
+ e.preventDefault();
|
|
|
+ },
|
|
|
+ 'click': function (e) {
|
|
|
+ e.preventDefault();
|
|
|
|
|
|
- var currentPoint = getPointOnImage(self.el, e.clientX, e.clientY),
|
|
|
- points = [];
|
|
|
+ var currentPoint = getPointOnImage(self.el, e.clientX, e.clientY),
|
|
|
+ points = [];
|
|
|
|
|
|
- if (!isDrawing) {
|
|
|
- isDrawing = true;
|
|
|
- } else {
|
|
|
- points = self.model.get('points');
|
|
|
- }
|
|
|
+ if (!isDrawing) {
|
|
|
+ isDrawing = true;
|
|
|
+ } else {
|
|
|
+ points = self.model.get('points');
|
|
|
+ }
|
|
|
|
|
|
- points.push([currentPoint.x, currentPoint.y]);
|
|
|
+ points.push([currentPoint.x, currentPoint.y]);
|
|
|
|
|
|
- self.model.set('points', points);
|
|
|
- },
|
|
|
- 'contextmenu': function (e) {
|
|
|
- e.preventDefault();
|
|
|
+ self.model.set('points', points);
|
|
|
+ },
|
|
|
+ 'contextmenu': function (e) {
|
|
|
+ e.preventDefault();
|
|
|
|
|
|
- if (!contextMenu.el.parentNode) {
|
|
|
- $el.parent().append(contextMenu.render().el);
|
|
|
- }
|
|
|
+ if (!contextMenu.el.parentNode) {
|
|
|
+ $el.parent().append(contextMenu.render().el);
|
|
|
+ }
|
|
|
|
|
|
- var currentPoint = getPointOnImage(self.el, e.clientX, e.clientY);
|
|
|
+ var currentPoint = getPointOnImage(self.el, e.clientX, e.clientY);
|
|
|
|
|
|
- contextMenu.show(currentPoint.x, currentPoint.y);
|
|
|
- }
|
|
|
- });
|
|
|
+ contextMenu.show(currentPoint.x, currentPoint.y);
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
return this;
|
|
|
};
|
|
@@ -1673,11 +1685,13 @@ window.DelineationQuestion = (function () {
|
|
|
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);
|
|
|
+ imageSvg.setAttribute('width', image.width);
|
|
|
+ imageSvg.setAttribute('height', image.height);
|
|
|
|
|
|
- this.el.setAttributeNS(null, 'version', '1.1');
|
|
|
- this.el.setAttributeNS(null, 'viewBox', '0 0 ' + image.width + ' ' + image.height);
|
|
|
+ this.el.setAttribute('version', '1.1');
|
|
|
+ this.el.setAttribute('viewBox', '0 0 ' + image.width + ' ' + image.height);
|
|
|
+ this.el.setAttribute('width', image.width);
|
|
|
+ this.el.setAttribute('height', image.height);
|
|
|
this.el.appendChild(imageSvg);
|
|
|
};
|
|
|
|
|
@@ -1751,28 +1765,28 @@ window.DelineationQuestion = (function () {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
- $(config.selector).html('\n\
|
|
|
- <span class="fa fa-spinner fa-spin fa-3x" aria-hidden="hidden"></span>\n\
|
|
|
- <span class="sr-only">Loading</span>\n\
|
|
|
- ');
|
|
|
+ $(config.selector).html('\n\
|
|
|
+ <span class="fa fa-spinner fa-spin fa-3x" aria-hidden="hidden"></span>\n\
|
|
|
+ <span class="sr-only">Loading</span>\n\
|
|
|
+ ');
|
|
|
|
|
|
var xhrQuestion = null;
|
|
|
|
|
|
switch (config.for) {
|
|
|
case 'admin':
|
|
|
- xhrQuestion = $.getJSON(config.relPath+'exercise/hotspot_actionscript_admin.as.php', {
|
|
|
+ xhrQuestion = $.getJSON(config.relPath + 'exercise/hotspot_actionscript_admin.as.php', {
|
|
|
modifyAnswers: parseInt(config.questionId)
|
|
|
});
|
|
|
break;
|
|
|
case 'user':
|
|
|
- xhrQuestion = $.getJSON(config.relPath+'exercise/hotspot_actionscript.as.php', {
|
|
|
+ xhrQuestion = $.getJSON(config.relPath + 'exercise/hotspot_actionscript.as.php', {
|
|
|
modifyAnswers: parseInt(config.questionId)
|
|
|
});
|
|
|
break;
|
|
|
case 'solution':
|
|
|
- //no break
|
|
|
+ //no break
|
|
|
case 'preview':
|
|
|
- xhrQuestion = $.getJSON(config.relPath+'exercise/hotspot_answers.as.php', {
|
|
|
+ xhrQuestion = $.getJSON(config.relPath + 'exercise/hotspot_answers.as.php', {
|
|
|
modifyAnswers: parseInt(config.questionId),
|
|
|
exe_id: parseInt(config.exerciseId)
|
|
|
});
|