Advertisement
Guest User

Untitled

a guest
Nov 13th, 2019
136
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.11 KB | None | 0 0
  1. (function(jQuery) {
  2. "use strict";
  3.  
  4. function FillBlanksDDGame(instance, options) {
  5. var defaultOptions = {
  6. sentenceHolder: null,
  7. wordsHolder: null,
  8. submitBtn: null,
  9. blank: "###",
  10. sentences: [],
  11. showResult: false,
  12. isBack: false,
  13. response: []
  14. };
  15. this.instance = instance;
  16. this.options = jQuery.extend(true, {}, defaultOptions, options);
  17. this.$el = jQuery(this.instance);
  18. this.data = [];
  19. this.currentData = {};
  20. this.response = [];
  21. this.index = 0;
  22. this.halt = false;
  23. this.init();
  24. }
  25. FillBlanksDDGame.prototype = {
  26. init: function() {
  27. var self = this;
  28. //self.options.submitBtn.prop("disabled", true);
  29. self.setupData();
  30. self.setupEventListeners();
  31. self.showChallenge();
  32. },
  33. setupEventListeners: function() {
  34. var self = this;
  35. self.options.submitBtn.on("click", function() {
  36. var holders = self.options.sentenceHolder.find(
  37. ".word-drop-holder-data"
  38. );
  39. var w = [];
  40. self.response = [];
  41. jQuery.each(holders, function(x, y) {
  42. var j = jQuery(y).find(".word-dropped");
  43. if (j.length > 0) {
  44. w.push({
  45. index: jQuery(j).attr("data-index"),
  46. word: jQuery(j).attr("data-word")
  47. });
  48. } else {
  49. w.push(null);
  50. }
  51. });
  52. self.response.push({
  53. correct_answer: self.data[self.index].options,
  54. response: w
  55. });
  56. if (self.index < self.data.length - 1) {
  57. self.index++;
  58. self.showChallenge();
  59. } else {
  60. self.onCompletion();
  61. }
  62. });
  63. },
  64. onCompletion: function() {
  65. var self = this;
  66. if (self.options.showResult) {
  67. self.highlightResults();
  68. }
  69. let res = self.response[0];
  70. let skipped = res.response.length != res.correct_answer.length;
  71. let r = { skipped: skipped, correct: !skipped };
  72. for (let i = 0, j = res.response.length; i < j; i++) {
  73. if (res.response[i] === null) {
  74. r.skipped = true;
  75. r.correct = false;
  76. //break;
  77. } else if (res.response[i].index != res.correct_answer[i].index) {
  78. r.correct = false;
  79. //break;
  80. }
  81. }
  82.  
  83. self.$el.trigger("gameComplete", [self.response, self.data, r]);
  84. },
  85. highlightResults: function() {
  86. let self = this;
  87. let result = self.response;
  88.  
  89. for (let i = 0; i < result.length; i++) {
  90. let wordHolder = self.$el.find(
  91. `.word-drop-holder-data[question-index='${i}']`
  92. );
  93. for (let j = 0; j < result[i].response.length; j++) {
  94. let curHolder = Array.from(wordHolder).filter(
  95. h => h.getAttribute("data-index") == j
  96. )[0];
  97. if (curHolder) {
  98. var response = result[i].response[j];
  99. if (response) {
  100. if (response.index == result[i].correct_answer[j].index) {
  101. curHolder.classList.add("correct");
  102. } else {
  103. curHolder.classList.add("incorrect");
  104. }
  105. }
  106. }
  107. }
  108. }
  109. },
  110. toggleSubmit: function() {
  111. //var self = this;
  112. //if (self.options.wordsHolder.find(".word-drag").length > 0) {
  113. // self.options.submitBtn.prop("disabled", true);
  114. //} else {
  115. // self.options.submitBtn.prop("disabled", false);
  116. //}
  117. },
  118. showChallenge: function() {
  119. var self = this;
  120. //self.options.submitBtn.prop("disabled", true);
  121. self.currentData = self.data[self.index];
  122. self.options.sentenceHolder.off().empty();
  123. self.options.wordsHolder.off().empty();
  124. let words = [];
  125. let optionIndex = 0;
  126. jQuery.each(self.currentData.sentence_words, function(i, w) {
  127. if (w.blank) {
  128. words.push(
  129. '<div class="word-drop-holder word-drop-holder-data"' +
  130. `question-index = ${self.index} data-index=${optionIndex}` +
  131. '><div class="word-drop-zone word-drop-zone-x"></div></div>'
  132. );
  133. optionIndex++;
  134. } else {
  135. words.push('<span class="not-blank">' + w.word + "</span>");
  136. }
  137. });
  138. let buttons = [];
  139. jQuery.each(self.currentData.shuffled, function(i, d) {
  140. buttons.push(self.getDragWord(d.index, d.word));
  141. });
  142. self.options.wordsHolder.html(buttons.join(""));
  143. self.options.sentenceHolder.html(words.join(""));
  144. self.setupDragDrop();
  145. if (self.options.isBack && self.options.response.length > 0) {
  146. let response = self.options.response[0].response;
  147. jQuery.each(response, function(i, r) {
  148. if (r !== null) {
  149. let $droppable = jQuery(
  150. '.word-drop-holder[data-index="' + i + '"]'
  151. ).find(".word-drop-zone");
  152. let droppableOffset = $droppable.offset();
  153. let $draggable = jQuery('.word-drag[data-index="' + r.index + '"]');
  154. let draggableOffset = $draggable.offset();
  155. let dx = droppableOffset.left - draggableOffset.left;
  156. let dy = droppableOffset.top - draggableOffset.top;
  157.  
  158. $draggable.simulate("drag", {
  159. dx: dx,
  160. dy: dy
  161. });
  162. }
  163. });
  164. }
  165. },
  166. setupDragDrop: function() {
  167. var self = this;
  168. self.$el.find(".word-drag").draggable({
  169. revert: "invalid",
  170. scroll: true,
  171. helper: "clone",
  172. start: function() {
  173. self.$el.trigger("dragStart");
  174. },
  175. stop: function() {
  176. self.$el.trigger("dragEnd");
  177. }
  178. });
  179. self.$el.find(".word-drop-zone").droppable({
  180. accept: ".word-drag, .word-dropped",
  181. classes: {
  182. "ui-droppable-active": "ui-state-active",
  183. "ui-droppable-hover": "ui-state-hover"
  184. },
  185. drop: function(event, ui) {
  186. var $holder = jQuery(ui.draggable).parent();
  187. jQuery(this).droppable("option", "disabled", true);
  188. var e = self.getDragWord(
  189. ui.draggable.attr("data-index"),
  190. ui.draggable.attr("data-word"),
  191. "word-dropped"
  192. );
  193.  
  194. if ($holder[0].querySelector("span.word-dropped")) {
  195. $holder.parent().addClass("word-drop-holder");
  196. $holder.addClass("word-drop-zone");
  197. $holder.addClass("ui-droppable");
  198. }
  199.  
  200. this.parentElement.classList.remove("word-drop-holder");
  201. this.classList.remove("word-drop-zone");
  202. this.classList.remove("ui-droppable");
  203.  
  204. jQuery(ui.draggable).detach();
  205. jQuery(this)
  206. .removeClass("word-drop-zone-x")
  207. .append(e);
  208. if ($holder.hasClass("word-drop-zone")) {
  209. $holder
  210. .addClass("word-drop-zone-x")
  211. .removeClass("ui-droppable-disabled");
  212. $holder.droppable("option", "disabled", false);
  213. }
  214. self.$el.trigger("itemSelected");
  215. self.setupReverseDragDrop();
  216. self.toggleSubmit();
  217. }
  218. });
  219. self.options.wordsHolder.droppable({
  220. accept: ".word-dropped",
  221. classes: {
  222. "ui-droppable-active": "ui-state-active",
  223. "ui-droppable-hover": "ui-state-hover"
  224. },
  225. drop: function(event, ui) {
  226. var $holder = jQuery(ui.draggable).parent();
  227. var e = self.getDragWord(
  228. ui.draggable.attr("data-index"),
  229. ui.draggable.attr("data-word")
  230. );
  231.  
  232. jQuery(ui.draggable).detach();
  233. jQuery(this).append(e);
  234. $holder
  235. .addClass("word-drop-zone-x")
  236. .removeClass("ui-droppable-disabled");
  237. $holder.droppable("option", "disabled", false);
  238.  
  239. self.setupDragDrop();
  240. self.toggleSubmit();
  241. }
  242. });
  243. },
  244. setupReverseDragDrop: function() {
  245. var self = this;
  246. self.$el.find(".word-dropped").draggable({
  247. revert: "invalid",
  248. scroll: true,
  249. helper: "clone"
  250. });
  251. },
  252. getDragWord: function(index, word, cls) {
  253. if (typeof cls === "undefined") {
  254. cls = "word-drag";
  255. }
  256. return (
  257. '<span class="' +
  258. cls +
  259. '" data-word="' +
  260. word +
  261. '" data-index="' +
  262. index +
  263. '">' +
  264. word +
  265. "</span>"
  266. );
  267. },
  268. setupData: function() {
  269. var self = this;
  270. var sentences = [];
  271. var i, j, k, l, tmp, sentence;
  272. for (i = 0, j = self.options.sentences.length; i < j; i++) {
  273. sentence = [];
  274. tmp = self.options.sentences[i].sentence.split(self.options.blank);
  275. for (k = 0, l = tmp.length; k < l; k++) {
  276. sentence.push({
  277. word: tmp[k],
  278. blank: false
  279. });
  280. if (k + 1 < l) {
  281. sentence.push({
  282. word: self.options.sentences[i].words[k],
  283. blank: true
  284. });
  285. }
  286. }
  287. sentences.push(sentence);
  288. }
  289. for (i = 0, j = sentences.length; i < j; i++) {
  290. var sentence_words = sentences[i];
  291. var options = [];
  292. var blank_index = 0;
  293. jQuery.each(sentence_words, function(i, w) {
  294. if (w.blank) {
  295. options.push({ index: blank_index, word: w.word });
  296. blank_index++;
  297. }
  298. });
  299.  
  300. tmp = {
  301. sentence_words: sentences[i].slice(),
  302. options: options,
  303. shuffled: options.slice()
  304. };
  305. self.shuffle(tmp.shuffled);
  306. self.data.push(tmp);
  307. }
  308. self.shuffle(self.data);
  309. },
  310. shuffle: function(array) {
  311. var currentIndex = array.length;
  312. var temporaryValue, randomIndex;
  313. while (0 !== currentIndex) {
  314. randomIndex = Math.floor(Math.random() * currentIndex);
  315. currentIndex -= 1;
  316. temporaryValue = array[currentIndex];
  317. array[currentIndex] = array[randomIndex];
  318. array[randomIndex] = temporaryValue;
  319. }
  320. return array;
  321. }
  322. };
  323.  
  324. jQuery.fn.FillBlanksDDGame = function(options) {
  325. var args = Array.prototype.slice.call(arguments, 1);
  326. var plgName = "FillBlanksDDGame";
  327. return this.each(function() {
  328. var inst = jQuery.data(this, plgName);
  329. if (typeof inst === "undefined") {
  330. if (
  331. typeof options === "undefined" ||
  332. typeof options == "string" ||
  333. options instanceof String
  334. ) {
  335. throw "invalid options passed while creating new instance.";
  336. }
  337. if (
  338. typeof options.sentences === "undefined" ||
  339. !jQuery.isArray(options.sentences)
  340. ) {
  341. throw "invalid options";
  342. }
  343. var p = new FillBlanksDDGame(this, options);
  344. jQuery.data(this, plgName, p);
  345. } else if (typeof options !== "undefined") {
  346. if (typeof inst[options] === "function") {
  347. inst[options].apply(inst, args);
  348. }
  349. }
  350. });
  351. };
  352. })(jQuery);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement