hotspot_user.js 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. var HotSpotUser = (function () {
  2. var Answer = function () {
  3. this.x = 0;
  4. this.y = 0;
  5. };
  6. var HotSpot = function () {
  7. this.id = 0;
  8. this.name = '';
  9. };
  10. HotSpot.prototype.checkPoint = function (x, y) {
  11. return false;
  12. };
  13. var Square = function () {
  14. HotSpot.call(this);
  15. this.x = 0,
  16. this.y = 0,
  17. this.width = 0,
  18. this.height = 0;
  19. };
  20. Square.prototype = Object.create(HotSpot.prototype);
  21. Square.prototype.checkPoint = function (x, y) {
  22. var left = this.x,
  23. right = this.x + this.width,
  24. top = this.y,
  25. bottom = this.y + this.height;
  26. var xIsValid = x >= left && x <= right,
  27. yIsValid = y >= top && y <= bottom;
  28. return xIsValid && yIsValid;
  29. };
  30. var Ellipse = function () {
  31. HotSpot.call(this);
  32. this.centerX = 0;
  33. this.centerY = 0;
  34. this.radiusX = 0;
  35. this.radiusY = 0;
  36. };
  37. Ellipse.prototype = Object.create(HotSpot.prototype);
  38. Ellipse.prototype.checkPoint = function (x, y) {
  39. var dX = x - this.centerX,
  40. dY = y - this.centerY;
  41. return Math.pow(dX, 2) / Math.pow(this.radiusX, 2) + Math.pow(dY, 2) / Math.pow(this.radiusY, 2) <= 1;
  42. };
  43. var Polygon = function () {
  44. HotSpot.call(this);
  45. this.points = [];
  46. };
  47. Polygon.prototype = Object.create(HotSpot.prototype);
  48. Polygon.prototype.checkPoint = function (x, y) {
  49. var isInside = false;
  50. for (var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) {
  51. var xi = this.points[i][0],
  52. yi = this.points[i][1],
  53. xj = this.points[j][0],
  54. yj = this.points[j][1];
  55. var intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
  56. if (intersect) {
  57. isInside = !isInside;
  58. }
  59. }
  60. return isInside;
  61. };
  62. var CanvasSVG = function (image) {
  63. var imageSvg = document.createElementNS('http://www.w3.org/2000/svg', 'image');
  64. imageSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'href', image.src);
  65. imageSvg.setAttribute('width', image.width);
  66. imageSvg.setAttribute('height', image.height);
  67. this.el = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  68. this.el.setAttribute('version', '1.1');
  69. this.el.setAttribute('viewBox', '0 0 ' + image.width + ' ' + image.height);
  70. this.el.appendChild(imageSvg);
  71. this.messagesEl = document.createElement('div');
  72. };
  73. CanvasSVG.prototype.setEvents = function () {
  74. var self = this;
  75. var getPointOnImage = function (x, y) {
  76. var pointerPosition = {
  77. left: x + window.scrollX,
  78. top: y + window.scrollY
  79. },
  80. canvasOffset = {
  81. x: self.el.getBoundingClientRect().x + window.scrollX,
  82. y: self.el.getBoundingClientRect().y + window.scrollY
  83. };
  84. return {
  85. x: Math.round(pointerPosition.left - canvasOffset.x),
  86. y: Math.round(pointerPosition.top - canvasOffset.y)
  87. };
  88. };
  89. this.el.addEventListener('dragstart', function (e) {
  90. e.preventDefault();
  91. }, false);
  92. this.el.addEventListener('click', function (e) {
  93. e.preventDefault();
  94. if (answers.length >= hotSpots.length) {
  95. return;
  96. }
  97. var point = getPointOnImage(e.clientX, e.clientY);
  98. var answer = new Answer();
  99. answer.x = point.x;
  100. answer.y = point.y;
  101. answers.push(answer);
  102. self.addAnswer(answer);
  103. if (answers.length === hotSpots.length) {
  104. self.messagesEl.textContent = lang.ExeFinished;
  105. return;
  106. }
  107. self.messagesEl.textContent = lang.NextAnswer + ' ' + hotSpots[answers.length].name;
  108. });
  109. };
  110. CanvasSVG.prototype.addAnswer = function (answer) {
  111. var pointSVG = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  112. pointSVG.setAttribute('cx', answer.x);
  113. pointSVG.setAttribute('cy', answer.y);
  114. pointSVG.setAttribute('r', 15);
  115. pointSVG.setAttribute('fill', '#00677C');
  116. var textSVG = document.createElementNS('http://www.w3.org/2000/svg', 'text');
  117. textSVG.setAttribute('x', answer.x);
  118. textSVG.setAttribute('y', answer.y);
  119. textSVG.setAttribute('dy', 5);
  120. textSVG.setAttribute('font-family', 'sans-serif');
  121. textSVG.setAttribute('text-anchor', 'middle');
  122. textSVG.setAttribute('fill', 'white');
  123. textSVG.textContent = answers.length;
  124. this.el.appendChild(pointSVG);
  125. this.el.appendChild(textSVG);
  126. var hotSpot = hotSpots[answers.length - 1];
  127. var hotspotTxt = document.createElement('input');
  128. hotspotTxt.type = 'hidden';
  129. hotspotTxt.name = 'hotspot[' + config.questionId + '][' + hotSpot.id + ']';
  130. hotspotTxt.value = [answer.x, answer.y].join(';');
  131. var choiceTxt = document.createElement('input');
  132. choiceTxt.type = 'hidden';
  133. choiceTxt.name = 'choice[' + config.questionId + '][' + hotSpot.id + ']';
  134. choiceTxt.value = hotSpot.checkPoint(answer.x, answer.y) ? 1 : 0;
  135. this.el.parentNode.appendChild(hotspotTxt);
  136. this.el.parentNode.appendChild(choiceTxt);
  137. };
  138. CanvasSVG.prototype.startMessagesPanel = function () {
  139. this.messagesEl.textContent = lang.NextAnswer + ' ' + hotSpots[0].name;
  140. this.el.parentNode.parentNode.appendChild(this.messagesEl);
  141. };
  142. var decodeHotSpot = function (hotSpotInfo) {
  143. var hotSpot = null,
  144. coords = hotSpotInfo.coord.split('|');
  145. switch (hotSpotInfo.type) {
  146. case 'square':
  147. var position = coords[0].split(';');
  148. hotSpot = new Square();
  149. hotSpot.x = parseInt(position[0]);
  150. hotSpot.y = parseInt(position[1]);
  151. hotSpot.width = parseInt(coords[1]);
  152. hotSpot.height = parseInt(coords[2]);
  153. break;
  154. case 'circle':
  155. var center = coords[0].split(';');
  156. hotSpot = new Ellipse();
  157. hotSpot.centerX = parseInt(center[0]);
  158. hotSpot.centerY = parseInt(center[1]);
  159. hotSpot.radiusX = parseInt(coords[1]);
  160. hotSpot.radiusY = parseInt(coords[2]);
  161. break;
  162. case 'poly':
  163. hotSpot = new Polygon();
  164. coords.forEach(function (pairedCoord) {
  165. var coord = pairedCoord.split(';');
  166. hotSpot.points.push([
  167. parseInt(coord[0]),
  168. parseInt(coord[1])
  169. ]);
  170. });
  171. break;
  172. }
  173. if (hotSpot) {
  174. hotSpot.id = parseInt(hotSpotInfo.id);
  175. hotSpot.name = hotSpotInfo.answer;
  176. }
  177. return hotSpot;
  178. };
  179. var config, lang, hotSpots = [], answers = [];
  180. var startQuestion = function (hotSpotQuestionInfo) {
  181. var image = new Image();
  182. image.onload = function () {
  183. var canvasSVG = new CanvasSVG(this);
  184. hotSpotQuestionInfo.hotspots.forEach(function (hotSpotInfo) {
  185. var hotSpot = decodeHotSpot(hotSpotInfo);
  186. if (!hotSpot) {
  187. return;
  188. }
  189. hotSpots.push(hotSpot);
  190. });
  191. $(config.selector)
  192. .css('width', this.width)
  193. .append(canvasSVG.el);
  194. canvasSVG.setEvents();
  195. canvasSVG.startMessagesPanel();
  196. };
  197. image.src = hotSpotQuestionInfo.image;
  198. lang = hotSpotQuestionInfo.lang;
  199. };
  200. return {
  201. init: function (settings) {
  202. config = $.extend({
  203. questionId: 0,
  204. selector: ''
  205. }, settings);
  206. if (!config.questionId || !config.selector) {
  207. return;
  208. }
  209. var xhrHotSpotQuestion = $.getJSON('/main/exercice/hotspot_actionscript.as.php', {
  210. modifyAnswers: parseInt(config.questionId)
  211. });
  212. $.when(xhrHotSpotQuestion).done(startQuestion);
  213. }
  214. };
  215. })();