API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jul 28th, 2017
130
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.69 KB | None | 0 0
raw download clone embed print report
  1. function GraphWithToolbar(id, widthInUnits, absWidth, absHeight, correctAnswer) {
  2.  
  3. this.innerStructure = new Object();
  4. this.containerId = id;
  5. this.boardWidthInUnits=widthInUnits;
  6. this.boardHeightInUnits=this.boardWidthInUnits;
  7. this.boardAbsWidth=absWidth;
  8. this.boardAbsHeight=absHeight;
  9. this.pixelsPerUnit = this.boardAbsWidth / this.boardWidthInUnits;
  10. this.selected_tool = "";
  11. this.selected_element;
  12. this.element_on_the_board = new Array();
  13. this.messages = {pointer : "Message not specified", point : "Message not specified", empty_point : "Message not specified", open_segment : "Infinite range: click on number line to insert closed point and infinite range to the left.", segment : "Message not specified", ray : "Message not specified", connected_points : "Create connected points", arrows : "Select all axe", nothing : "Not supported in prototype"};
  14. this.toolbarElements = ["pointer", "point", "empty_point", "open_segment", "segment", "ray", "connected_points", "arrows", "nothing", "minus", "messageBox", "redo", "undo", "remove"];
  15. this.tools = {pointer : function(new_element, x) {
  16.  
  17. }, point : function(new_element, x) {
  18. new_element.mainPoints[0] = this.boardCreate(new_element, 'glider',[x,0,this.b1axisx],{style:5});
  19. }, empty_point : function(new_element, x) {
  20. new_element.mainPoints[0] = g = this.boardCreate(new_element, 'glider',[x,0,this.b1axisx],{style: 0, visible: true, strokeOpacity:0, highlightStrokeOpacity: 0 }, 'glider_opacity');
  21. this.boardCreateElement(new_element, 'circle',[g,1/this.pixelsPerUnit()*4], {style: 0});
  22. }, open_segment : function(new_element, x) {
  23. xr = this.pixelsPerUnit();
  24. end = this.boardCreate(new_element, 'point', [xr,0], {style:7, visible: false});
  25. var sq = [];
  26. new_element.mainPoints[0] = sq[0] = this.boardCreate(new_element, 'glider', [x,0,this.b1axisx], {style:4});
  27. var right = this.boardCreate(new_element, 'transform', [0.2,0], {type:'translate'});
  28. var up = this.boardCreate(new_element, 'transform', [0,0.3], {type:'translate'});
  29. var down = this.boardCreate(new_element, 'transform', [0,-0.3], {type:'translate'});
  30. sq[1] = this.boardCreate(new_element, 'point', [sq[0],[up,right]], {style:7, visible: false});
  31. sq[2] = this.boardCreate(new_element, 'point', [sq[0],up], {style:7, visible: false});
  32. sq[3] = this.boardCreate(new_element, 'point', [sq[0],[down]], {style:7, visible: false});
  33. sq[4] = this.boardCreate(new_element, 'point', [sq[0],[down,right]], {style:7, visible: false});
  34. this.boardCreateElement(new_element, 'line',[sq[1],sq[2]],{straightFirst: false, straightLast: false});
  35. this.boardCreateElement(new_element, 'line',[sq[2],sq[3]],{straightFirst: false, straightLast: false});
  36. this.boardCreateElement(new_element, 'line',[sq[3],sq[4]],{straightFirst: false, straightLast: false});
  37. this.boardCreateElement(new_element, 'line',[sq[0],end],{straightFirst: false, straightLast: true});
  38. }, segment : function(new_element, x) {
  39. var sq = [];
  40. new_element.mainPoints[0] = sq[0] = this.boardCreate(new_element, 'glider', [x - 1,0,this.b1axisx], {style:4});
  41. var right = this.boardCreate(new_element, 'transform', [0.2,0], {type:'translate'});
  42. var up = this.boardCreate(new_element, 'transform', [0,0.3], {type:'translate'});
  43. var down = this.boardCreate(new_element, 'transform', [0,-0.3], {type:'translate'});
  44. sq[1] = this.boardCreate(new_element, 'point', [sq[0],[up,right]], {style:7, visible: false});
  45. sq[2] = this.boardCreate(new_element, 'point', [sq[0],up], {style:7, visible: false});
  46. sq[3] = this.boardCreate(new_element, 'point', [sq[0],[down]], {style:7, visible: false});
  47. sq[4] = this.boardCreate(new_element, 'point', [sq[0],[down,right]], {style:7, visible: false});
  48. this.boardCreateElement(new_element, 'line',[sq[1],sq[2]],{straightFirst: false, straightLast: false});
  49. this.boardCreateElement(new_element, 'line',[sq[2],sq[3]],{straightFirst: false, straightLast: false});
  50. this.boardCreateElement(new_element, 'line',[sq[3],sq[4]],{straightFirst: false, straightLast: false});
  51.  
  52. var tq = [];
  53. new_element.mainPoints[1] = tq[0] = this.boardCreate(new_element, 'glider', [x + 1,0,this.b1axisx], {style:4});
  54. var left = this.boardCreate(new_element, 'transform', [-0.2,0], {type:'translate'});
  55. var up = this.boardCreate(new_element, 'transform', [0,0.3], {type:'translate'});
  56. var down = this.boardCreate(new_element, 'transform', [0,-0.3], {type:'translate'});
  57. tq[1] = this.boardCreate(new_element, 'point', [tq[0],[up,left]], {style:7, visible: false});
  58. tq[2] = this.boardCreate(new_element, 'point', [tq[0],up], {style:7, visible: false});
  59. tq[3] = this.boardCreate(new_element, 'point', [tq[0],[down]], {style:7, visible: false});
  60. tq[4] = this.boardCreate(new_element, 'point', [tq[0],[down,left]], {style:7, visible: false});
  61. this.boardCreateElement(new_element, 'line',[tq[1],tq[2]],{straightFirst: false, straightLast: false});
  62. this.boardCreateElement(new_element, 'line',[tq[2],tq[3]],{straightFirst: false, straightLast: false});
  63. this.boardCreateElement(new_element, 'line',[tq[3],tq[4]],{straightFirst: false, straightLast: false});
  64.  
  65. this.boardCreateElement(new_element, 'line',[tq[0],sq[0]],{straightFirst: false, straightLast: false});
  66. }, ray : function(new_element, x) {
  67. xr = this.pixelsPerUnit();
  68. end = this.boardCreate(new_element, 'point', [xr,0], {style:7, visible: false});
  69. new_element.mainPoints[0] = sq = this.boardCreate(new_element, 'glider', [x,0,this.b1axisx], {style:4});
  70. this.boardCreateElement(new_element, 'line',[sq,end],{straightFirst: false, straightLast: true});
  71. }, connected_points : function(new_element, x) {
  72. new_element.mainPoints[0] = gl1 = this.boardCreate(new_element, 'glider', [x + 1,0,this.b1axisx], {style:4});
  73. new_element.mainPoints[1] = gl2 = this.boardCreate(new_element, 'glider', [x - 1,0,this.b1axisx], {style:4});
  74. this.boardCreateElement(new_element, 'line',[gl1,gl2],{straightFirst: false, straightLast: false});
  75. }, arrows : function(new_element, x) {
  76. xr = this.pixelsPerUnit();
  77. begin = this.boardCreate(new_element, 'point', [-xr,0], {style:7, visible: false});
  78. end = this.boardCreate(new_element, 'point', [xr,0], {style:7, visible: false});
  79. this.boardCreateElement(new_element, 'line',[begin,end],{straightFirst: false, straightLast: true});
  80. }, nothing : function(new_element, x) {
  81.  
  82. }
  83. };
  84. this.additionalElements = {minus : function () {
  85. var messageBox = this.innerStructure.messageBox;
  86. if (this.innerStructure.messageBox.style.display != 'none') {
  87. this.innerStructure.minus.src = "img/plus.png"
  88. this.innerStructure.messageBox.style.display = 'none';
  89. }
  90. else {
  91. this.innerStructure.minus.src = "img/minus.png"
  92. this.innerStructuremessageBox.style.display = '';
  93. }
  94. }, redo : function () {
  95. }, undo : function () {
  96. }
  97. };
  98. this.selectingByElementType = {glider : {selected:{strokeColor: '#00ff00', fillColor: '#00ff00'}, unselected: {strokeColor: '#ff0000', fillColor: '#ff0000'}}, circle : {selected:{strokeColor: '#00ff00'}, unselected: {strokeColor: '#0000ff'}}, line : {selected:{strokeColor: '#00ff00', fillColor: '#00ff00'}, unselected: {strokeColor: '#0000ff', fillColor: '#0000ff'}}};
  99. // not need when grading on server
  100. this.correctAnswer = correctAnswer;
  101.  
  102. this.changeSelectedTool = function (id) {
  103. if (this.selected_tool != id ) {
  104. this.unselectElement();
  105. if (this.selected_tool != "") {
  106. this.UnselectTool(this.selected_tool);
  107. }
  108. this.selectTool(id);
  109. this.selected_tool = id;
  110. }
  111. }
  112. this.selectTool = function (id) {
  113. var element = this.innerStructure[id];
  114. element.src = "img/selected_toolbar_" + id + ".png";
  115. this.innerStructure.messageBox.innerHTML = this.messages[id];
  116. }
  117.  
  118. this.UnselectTool = function(id) {
  119. var element = this.innerStructure[id];
  120. element.src = "img/toolbar_" + id + ".png";
  121. }
  122.  
  123. this.selectElement = function(element) {
  124. for (var part=0; part< element.length; part++) {
  125. if (this.selectingByElementType[element[part].elementType]) {
  126. element[part].setProperty(this.selectingByElementType[element[part].elementType].selected);
  127. }
  128. }
  129. }
  130.  
  131. this.unselectElement = function() {
  132. if (this.selected_element) {
  133. for (var part=0; part< this.selected_element.length; part++) {
  134. if (this.selectingByElementType[this.selected_element[part].elementType]) {
  135. this.selected_element[part].setProperty(this.selectingByElementType[this.selected_element[part].elementType].unselected);
  136. }
  137. }
  138. }
  139. }
  140.  
  141. this.actionsStack = [];
  142. this.stackIndex = -1;
  143. this.addAction = function(action) {
  144. if (this.actionsStack.length > 0 && this.stackIndex == this.actionsStack.length - 1 && !this.isIncompleteDragAction(this.actionsStack[this.stackIndex])) {
  145. this.actionsStack.splice(this.stackIndex, 1);
  146. this.stackIndex--;
  147. }
  148. else if (this.stackIndex != this.actionsStack.length - 1) {
  149. this.actionsStack.splice(this.stackIndex, this.actionsStack.length - this.stackIndex);
  150. }
  151. this.actionsStack[this.actionsStack.length] = action;
  152. this.stackIndex++;
  153. }
  154. this.isIncompleteDragAction = function(action) {
  155. if (action.type='drag' && !action.upCoord) {
  156. return false;
  157. }
  158. return true;
  159. }
  160.  
  161. this.mouseDownOnTheElement = function(event) {
  162. if (this.selected_tool != "pointer") {
  163. var element = this.findboardElement(event, true);
  164. if (element) {
  165. var x = this.getXCoord(event);
  166. this.addAction({type: "drag", downCoord: x, element : element});
  167. }
  168. }
  169. }
  170.  
  171. this.mouseUpOnTheElement = function(event) {
  172. var x = getXCoord(event);
  173. if (this.isIncompleteDragAction(this.actionsStack[this.stackIndex]))) {
  174. if (this.actionsStack[this.stackIndex].downCoord != x) {
  175. this.actionsStack[this.stackIndex].upCoord = x;
  176. }
  177. if (this.selected_tool == "pointer") {
  178. var element = this.findboardElement(event, false);
  179. if (this.selected_element) {
  180. unselectElement();
  181. if (element && this.selected_element != element) {
  182. this.selected_element = element;
  183. this.selectElement(element);
  184. } else {
  185. this.selected_element = null;
  186. }
  187. }
  188. else if (element) {
  189. this.selected_element = element;
  190. this.selectElement(element);
  191. }
  192. }
  193. else if(this.selected_tool == "remove"){
  194. var element = findboardElement(event, false)
  195. var coords = [];
  196. this.addAction({type: "remove", element : element});
  197. }
  198. }
  199. else {
  200. this.addAction({type: "create", downCoord: x});
  201. var new_element = new Array();
  202. new_element.type = this.selected_tool;
  203. new_element.mainPoints = new Array();
  204. this.tools[this.selected_tool](new_element, x);
  205. this.element_on_the_board[this.element_on_the_board.length] = new_element;
  206. }
  207. }
  208.  
  209. this.findboardElement = function(event, onlyGlider) {
  210. var cPos = this.board.getRelativeMouseCoordinates(event);
  211. var absPos = JXG.getPosition(event);
  212. var dx = absPos[0]-cPos[0];
  213. var dy = absPos[1]-cPos[1];
  214. for ( var boardElement in this.element_on_the_board) {
  215. for (var i = 0; i < this.element_on_the_board[this.boardElement].length; i++) {
  216. part = this.element_on_the_board[this.boardElement][i];
  217. if(JXG.exists(part.hasPoint) && part.visProp['visible'] && part.hasPoint(dx, dy)) {
  218. if (onlyGlider) {
  219. if (part.elementType == 'glider') {
  220. part;
  221. }
  222. else {
  223. continue;
  224. }
  225. }
  226. return this.element_on_the_board[this.boardElement];
  227. }
  228. }
  229. }
  230. }
  231.  
  232. this.boardCreateElement = function(arrayForStore, type, elements, properties, selectingType) {
  233. if (!selectingType) {
  234. selectingType = type;
  235. }
  236. var currentElement = this.board.createElement(type, elements, properties);
  237. currentElement.elementType = selectingType;
  238. return arrayForStore[arrayForStore.length] = currentElement;
  239. }
  240.  
  241. this.boardCreate = function(arrayForStore, type, elements, properties, selectingType) {
  242. if (!selectingType) {
  243. selectingType = type;
  244. }
  245. var currentElement = this.board.create(type, elements, properties);
  246. currentElement.elementType = selectingType;
  247. return arrayForStore[arrayForStore.length] = currentElement;
  248. }
  249.  
  250. this.deleteSelected = function() {
  251. if (this.selected_element) {
  252. for (var i=0; i < this.selected_element.length; i++) {
  253. this.board.removeObject(this.selected_element[i]);
  254. delete(this.selected_element[i]);
  255. }
  256. for (var i=0; i < this.element_on_the_board.length; i++) {
  257. if (this.selected_element == this.element_on_the_board[i]) {
  258. this.element_on_the_board.splice(i, 1);
  259. delete(this.selected_element);
  260. break;
  261. }
  262. }
  263. this.selected_element = null;
  264. }
  265. }
  266.  
  267. this.getXCoord = function(event) {
  268. var cPos = this.board.getRelativeMouseCoordinates(event);
  269. var absPos = JXG.getPosition(event);
  270. var dx = absPos[0]-cPos[0];
  271. var dy = absPos[1]-cPos[1];
  272. return new JXG.Coords(JXG.COORDS_BY_SCREEN, this.board.getScrCoordsOfMouse(dx,dy), this.board).usrCoords[1];
  273. }
  274.  
  275. var rootElement = document.getElementById(this.containerId);
  276. var table = document.createElement('table');
  277. table.setAttribute('style', 'border: 1px solid gray;width:' + this.boardAbsWidth + 'px');
  278. rootElement.appendChild(table);
  279. var tr = document.createElement('tr');
  280. table.appendChild(tr);
  281. var self = this;
  282. for (var id in this.toolbarElements) {
  283. id = this.toolbarElements[id];
  284. var td = document.createElement('td');
  285. tr.appendChild(td);
  286. if (id == "messageBox") {
  287. this.innerStructure[id] = document.createElement('div');
  288. td.setAttribute('style', 'width:100%');
  289. }
  290. else {
  291. this.innerStructure[id] = document.createElement('img');
  292. if (this.tools[id]) {
  293. this.innerStructure[id].setAttribute('src', 'img/toolbar_' + id + '.png');
  294. var f = function() {var a = id; return function() {self.changeSelectedTool(a);};};
  295. this.innerStructure[id].onclick = f();
  296. }
  297. else {
  298. this.innerStructure[id].setAttribute('src', 'img/' + id + '.png');
  299. var f = function() {var a = id; return function() {self.changeSelectedTool(a);};};
  300. this.innerStructure[id].onclick = f();
  301. }
  302. }
  303. td.appendChild(this.innerStructure[id]);
  304. }
  305. tr = document.createElement('tr');
  306. table.appendChild(tr);
  307. var td = document.createElement('td');
  308. td.setAttribute("colspan", this.toolbarElements.length);
  309. tr.appendChild(td);
  310. var div = document.createElement('div');
  311. div.class = 'jxgbox';
  312. div.id = this.containerId + '_jxgbox';
  313. div.onclick = this.clickEvent;
  314. td.appendChild(div);
  315.  
  316. this.check = function() {
  317. var match = new Object();
  318. if (this.element_on_the_board.length == this.correctAnswer.length) {
  319. for (var i = 0; i < this.element_on_the_board.length; i++) {
  320. var find = false;
  321. for (var j = 0; j < this.correctAnswer.length; j++) {
  322. if (!match[j] && this.correctAnswer[j].type == this.element_on_the_board[i].type && this.correctAnswer[j].coords.length == this.element_on_the_board[i].mainPoints.length) {
  323. find = true;
  324. for (var k = 0; k < this.correctAnswer[j].coords.length; k++) {
  325. if (Math.abs(this.correctAnswer[j].coords[k] - this.element_on_the_board[i].mainPoints[k].coords.usrCoords[1]) >= 0.2) {
  326. find = false;
  327. break;
  328. }
  329. }
  330. if (find) {
  331. match[j] = true;
  332. break;
  333. }
  334. }
  335. }
  336. if (!find) {
  337. return false;
  338. }
  339. }
  340. return true;
  341. }
  342. return false
  343. }
  344.  
  345.  
  346. this.board = JXG.JSXGraph.initBoard(this.containerId + '_jxgbox', {originX: this.boardAbsWidth/2, originY: this.boardAbsHeight/2, unitX: this.pixelsPerUnit, unitY: this.pixelsPerUnit, showCopyright: false, showNavigation : false});
  347. this.b1axisx = this.board.createElement('axis', [[0,0], [this.pixelsPerUnit,0]], {firstArrow: true, lastArrow: true });
  348. this.board.resizeContainer(this.boardAbsWidth, this.boardAbsHeight);
  349. this.board.fullUpdate();
  350.  
  351.  
  352. this.changeSelectedTool("pointer");
  353.  
  354. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!