|
@@ -1,243 +1,267 @@
|
|
|
<script>
|
|
|
- var DraggableAnswer = {
|
|
|
- gallery: null,
|
|
|
- trash: null,
|
|
|
- deleteItem: function (item, insertHere) {
|
|
|
- if (insertHere.find(".exercise-draggable-answer-option").length > 0) {
|
|
|
- return false;
|
|
|
- }
|
|
|
|
|
|
- item.fadeOut(function () {
|
|
|
- var $list = $('<div class="gallery ui-helper-reset"/>').appendTo(insertHere);
|
|
|
+var DraggableAnswer = {
|
|
|
+ gallery: null,
|
|
|
+ trash: null,
|
|
|
+ deleteItem: function (item, insertHere) {
|
|
|
+ if (insertHere.find(".exercise-draggable-answer-option").length > 0) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
|
|
|
- item.find('a.btn').remove();
|
|
|
+ item.fadeOut(function () {
|
|
|
+ var $list = $('<div class="gallery ui-helper-reset"/>').appendTo(insertHere);
|
|
|
|
|
|
- var droppedId = item.attr('id'),
|
|
|
- dropedOnId = insertHere.attr('id'),
|
|
|
- originSelectId = 'window_' + droppedId + '_select',
|
|
|
- value = dropedOnId.split('_')[2];
|
|
|
+ item.find('a.btn').remove();
|
|
|
|
|
|
- $('#' + originSelectId + ' option')
|
|
|
- .filter(function (index) {
|
|
|
- return index === parseInt(value);
|
|
|
- })
|
|
|
- .attr("selected", true);
|
|
|
-
|
|
|
- var recycleButton = $('<a>')
|
|
|
- .attr('href', '#')
|
|
|
- .addClass('btn btn-default btn-xs')
|
|
|
- .append(
|
|
|
- "{{ "Undo" | get_lang }} ",
|
|
|
- $('<i>').addClass('fa fa-undo')
|
|
|
- )
|
|
|
- .on('click', function (e) {
|
|
|
- e.preventDefault();
|
|
|
+ var droppedId = item.attr('id'),
|
|
|
+ dropedOnId = insertHere.attr('id'),
|
|
|
+ originSelectId = 'window_' + droppedId + '_select',
|
|
|
+ value = dropedOnId.split('_')[2];
|
|
|
+
|
|
|
+ $('#' + originSelectId + ' option')
|
|
|
+ .filter(function (index) {
|
|
|
+ return index === parseInt(value);
|
|
|
+ })
|
|
|
+ .attr("selected", true);
|
|
|
+
|
|
|
+ var recycleButton = $('<a>')
|
|
|
+ .attr('href', '#')
|
|
|
+ .addClass('btn btn-default btn-xs')
|
|
|
+ .append(
|
|
|
+ "{{ "Undo" | get_lang }} ",
|
|
|
+ $('<i>').addClass('fa fa-undo')
|
|
|
+ )
|
|
|
+ .on('click', function (e) {
|
|
|
+ e.preventDefault();
|
|
|
+
|
|
|
+ var liParent = $(this).parent();
|
|
|
+
|
|
|
+ DraggableAnswer.recycleItem(liParent);
|
|
|
+ });
|
|
|
|
|
|
- var liParent = $(this).parent();
|
|
|
+ item.append(recycleButton).appendTo($list).fadeIn();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ recycleItem: function (item) {
|
|
|
+ item.fadeOut(function () {
|
|
|
+ item
|
|
|
+ .find('a.btn')
|
|
|
+ .remove()
|
|
|
+ .end()
|
|
|
+ .find("img")
|
|
|
+ .end()
|
|
|
+ .appendTo(DraggableAnswer.gallery)
|
|
|
+ .fadeIn();
|
|
|
+ });
|
|
|
+
|
|
|
+ var droppedId = item.attr('id'),
|
|
|
+ originSelectId = 'window_' + droppedId + '_select';
|
|
|
+
|
|
|
+ $('#' + originSelectId + ' option:first').attr('selected', 'selected');
|
|
|
+ },
|
|
|
+ init: function (gallery, trash) {
|
|
|
+ this.gallery = gallery;
|
|
|
+ this.trash = trash;
|
|
|
+
|
|
|
+ $("li", DraggableAnswer.gallery).draggable({
|
|
|
+ cancel: "a.ui-icon",
|
|
|
+ revert: "invalid",
|
|
|
+ containment: "document",
|
|
|
+ helper: "clone",
|
|
|
+ cursor: "move"
|
|
|
+ });
|
|
|
+
|
|
|
+ DraggableAnswer.trash.droppable({
|
|
|
+ accept: ".exercise-draggable-answer > li",
|
|
|
+ hoverClass: "ui-state-active",
|
|
|
+ drop: function (e, ui) {
|
|
|
+ DraggableAnswer.deleteItem(ui.draggable, $(this));
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- DraggableAnswer.recycleItem(liParent);
|
|
|
- });
|
|
|
+ DraggableAnswer.gallery.droppable({
|
|
|
+ drop: function (e, ui) {
|
|
|
+ DraggableAnswer.recycleItem(ui.draggable, $(this));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+var MatchingDraggable = {
|
|
|
+ colorDestination: '#316B31',
|
|
|
+ curviness: 0,
|
|
|
+ connectorType: 'Straight',
|
|
|
+ initialized: false,
|
|
|
+ init: function (questionId) {
|
|
|
+ var windowQuestionSelector = '.window' + questionId + '_question',
|
|
|
+ countConnections = $(windowQuestionSelector).length,
|
|
|
+ colorArray = [],
|
|
|
+ colorArrayDestination = [];
|
|
|
+
|
|
|
+ if (countConnections > 0) {
|
|
|
+ colorArray = $.xcolor.analogous("#da0", countConnections);
|
|
|
+ colorArrayDestination = $.xcolor.analogous("#51a351", countConnections);
|
|
|
+ } else {
|
|
|
+ colorArray = $.xcolor.analogous("#da0", 10);
|
|
|
+ colorArrayDestination = $.xcolor.analogous("#51a351", 10);
|
|
|
+ }
|
|
|
|
|
|
- item.append(recycleButton).appendTo($list).fadeIn();
|
|
|
- });
|
|
|
- },
|
|
|
- recycleItem: function (item) {
|
|
|
- item.fadeOut(function () {
|
|
|
- item
|
|
|
- .find('a.btn')
|
|
|
- .remove()
|
|
|
- .end()
|
|
|
- .find("img")
|
|
|
- .end()
|
|
|
- .appendTo(DraggableAnswer.gallery)
|
|
|
- .fadeIn();
|
|
|
- });
|
|
|
+ jsPlumb.importDefaults({
|
|
|
+ DragOptions: {cursor: 'pointer', zIndex: 2000},
|
|
|
+ PaintStyle: {strokeStyle: '#000'},
|
|
|
+ EndpointStyle: {strokeStyle: '#316b31'},
|
|
|
+ Endpoint: 'Rectangle',
|
|
|
+ Anchors: ['TopCenter', 'TopCenter']
|
|
|
+ });
|
|
|
+
|
|
|
+ var exampleDropOptions = {
|
|
|
+ tolerance: 'touch',
|
|
|
+ hoverClass: 'dropHover',
|
|
|
+ activeClass: 'dragActive'
|
|
|
+ };
|
|
|
+
|
|
|
+ var destinationEndPoint = {
|
|
|
+ endpoint: ["Dot", {radius: 15}],
|
|
|
+ paintStyle: {fillStyle: MatchingDraggable.colorDestination},
|
|
|
+ isSource: false,
|
|
|
+ connectorStyle: {strokeStyle: MatchingDraggable.colorDestination, lineWidth: 8},
|
|
|
+ connector: [
|
|
|
+ MatchingDraggable.connectorType,
|
|
|
+ {curviness: MatchingDraggable.curviness}
|
|
|
+ ],
|
|
|
+ maxConnections: 1000,
|
|
|
+ isTarget: true,
|
|
|
+ dropOptions: exampleDropOptions,
|
|
|
+ beforeDrop: function (params) {
|
|
|
+ jsPlumb.select({source: params.sourceId}).each(function (connection) {
|
|
|
+ jsPlumb.detach(connection);
|
|
|
+ });
|
|
|
|
|
|
- var droppedId = item.attr('id'),
|
|
|
- originSelectId = 'window_' + droppedId + '_select';
|
|
|
-
|
|
|
- $('#' + originSelectId + ' option:first').attr('selected', 'selected');
|
|
|
- },
|
|
|
- init: function (gallery, trash) {
|
|
|
- this.gallery = gallery;
|
|
|
- this.trash = trash;
|
|
|
-
|
|
|
- $("li", DraggableAnswer.gallery).draggable({
|
|
|
- cancel: "a.ui-icon",
|
|
|
- revert: "invalid",
|
|
|
- containment: "document",
|
|
|
- helper: "clone",
|
|
|
- cursor: "move"
|
|
|
- });
|
|
|
+ var selectId = params.sourceId + "_select";
|
|
|
+ var value = params.targetId.split("_")[2];
|
|
|
|
|
|
- DraggableAnswer.trash.droppable({
|
|
|
- accept: ".exercise-draggable-answer > li",
|
|
|
- hoverClass: "ui-state-active",
|
|
|
- drop: function (e, ui) {
|
|
|
- DraggableAnswer.deleteItem(ui.draggable, $(this));
|
|
|
- }
|
|
|
- });
|
|
|
+ $("#" + selectId + " option")
|
|
|
+ .removeAttr('selected')
|
|
|
+ .filter(function (index) {
|
|
|
+ return index === parseInt(value);
|
|
|
+ })
|
|
|
+ .attr("selected", true);
|
|
|
|
|
|
- DraggableAnswer.gallery.droppable({
|
|
|
- drop: function (e, ui) {
|
|
|
- DraggableAnswer.recycleItem(ui.draggable, $(this));
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- var MatchingDraggable = {
|
|
|
- colorDestination: '#316B31',
|
|
|
- curviness: 0,
|
|
|
- connectorType: 'Straight',
|
|
|
- initialized: false,
|
|
|
- init: function (questionId) {
|
|
|
- var windowQuestionSelector = '.window' + questionId + '_question',
|
|
|
- countConnections = $(windowQuestionSelector).length,
|
|
|
- colorArray = [],
|
|
|
- colorArrayDestination = [];
|
|
|
-
|
|
|
- if (countConnections > 0) {
|
|
|
- colorArray = $.xcolor.analogous("#da0", countConnections);
|
|
|
- colorArrayDestination = $.xcolor.analogous("#51a351", countConnections);
|
|
|
- } else {
|
|
|
- colorArray = $.xcolor.analogous("#da0", 10);
|
|
|
- colorArrayDestination = $.xcolor.analogous("#51a351", 10);
|
|
|
+ return true;
|
|
|
}
|
|
|
+ };
|
|
|
|
|
|
- jsPlumb.importDefaults({
|
|
|
- DragOptions: {cursor: 'pointer', zIndex: 2000},
|
|
|
- PaintStyle: {strokeStyle: '#000'},
|
|
|
- EndpointStyle: {strokeStyle: '#316b31'},
|
|
|
- Endpoint: 'Rectangle',
|
|
|
- Anchors: ['TopCenter', 'TopCenter']
|
|
|
- });
|
|
|
+ var count = 0;
|
|
|
+ var sourceDestinationArray = [];
|
|
|
|
|
|
- var exampleDropOptions = {
|
|
|
- tolerance: 'touch',
|
|
|
- hoverClass: 'dropHover',
|
|
|
- activeClass: 'dragActive'
|
|
|
- };
|
|
|
+ $(windowQuestionSelector).each(function (index) {
|
|
|
+ var windowId = $(this).attr("id");
|
|
|
+ var scope = windowId + "scope";
|
|
|
+ var destinationColor = colorArray[count].getHex();
|
|
|
|
|
|
- var destinationEndPoint = {
|
|
|
- endpoint: ["Dot", {radius: 15}],
|
|
|
- paintStyle: {fillStyle: MatchingDraggable.colorDestination},
|
|
|
- isSource: false,
|
|
|
- connectorStyle: {strokeStyle: MatchingDraggable.colorDestination, lineWidth: 8},
|
|
|
+ var sourceEndPoint = {
|
|
|
+ endpoint: [
|
|
|
+ "Dot",
|
|
|
+ {radius: 15}
|
|
|
+ ],
|
|
|
+ paintStyle: {
|
|
|
+ fillStyle: destinationColor
|
|
|
+ },
|
|
|
+ isSource: true,
|
|
|
+ connectorStyle: {
|
|
|
+ strokeStyle: "#8a8888",
|
|
|
+ lineWidth: 8
|
|
|
+ },
|
|
|
connector: [
|
|
|
MatchingDraggable.connectorType,
|
|
|
{curviness: MatchingDraggable.curviness}
|
|
|
],
|
|
|
- maxConnections: 1000,
|
|
|
- isTarget: true,
|
|
|
+ maxConnections: 1,
|
|
|
+ isTarget: false,
|
|
|
dropOptions: exampleDropOptions,
|
|
|
- beforeDrop: function (params) {
|
|
|
- jsPlumb.select({source: params.sourceId}).each(function (connection) {
|
|
|
- jsPlumb.detach(connection);
|
|
|
- });
|
|
|
+ scope: scope
|
|
|
+ };
|
|
|
|
|
|
- var selectId = params.sourceId + "_select";
|
|
|
- var value = params.targetId.split("_")[2];
|
|
|
+ sourceDestinationArray[count + 1] = sourceEndPoint;
|
|
|
|
|
|
- $("#" + selectId + " option")
|
|
|
- .removeAttr('selected')
|
|
|
- .filter(function (index) {
|
|
|
- return index === parseInt(value);
|
|
|
- })
|
|
|
- .attr("selected", true);
|
|
|
+ count++;
|
|
|
|
|
|
- return true;
|
|
|
- }
|
|
|
- };
|
|
|
+ jsPlumb.addEndpoint(
|
|
|
+ windowId,
|
|
|
+ {
|
|
|
+ anchor: ['RightMiddle', 'RightMiddle', 'RightMiddle', 'RightMiddle']
|
|
|
+ },
|
|
|
+ sourceEndPoint
|
|
|
+ );
|
|
|
|
|
|
- var count = 0;
|
|
|
- var sourceDestinationArray = [];
|
|
|
+ var destinationCount = 0;
|
|
|
|
|
|
$(windowQuestionSelector).each(function (index) {
|
|
|
- var windowId = $(this).attr("id");
|
|
|
- var scope = windowId + "scope";
|
|
|
- var destinationColor = colorArray[count].getHex();
|
|
|
-
|
|
|
- var sourceEndPoint = {
|
|
|
- endpoint: [
|
|
|
- "Dot",
|
|
|
- {radius: 15}
|
|
|
- ],
|
|
|
- paintStyle: {
|
|
|
- fillStyle: destinationColor
|
|
|
- },
|
|
|
- isSource: true,
|
|
|
- connectorStyle: {
|
|
|
- strokeStyle: "#8a8888",
|
|
|
- lineWidth: 8
|
|
|
- },
|
|
|
- connector: [
|
|
|
- MatchingDraggable.connectorType,
|
|
|
- {curviness: MatchingDraggable.curviness}
|
|
|
- ],
|
|
|
- maxConnections: 1,
|
|
|
- isTarget: false,
|
|
|
- dropOptions: exampleDropOptions,
|
|
|
- scope: scope
|
|
|
- };
|
|
|
-
|
|
|
- sourceDestinationArray[count + 1] = sourceEndPoint;
|
|
|
-
|
|
|
- count++;
|
|
|
+ var windowDestinationId = $(this).attr("id");
|
|
|
+ destinationEndPoint.scope = scope;
|
|
|
+ destinationEndPoint.paintStyle.fillStyle = colorArrayDestination[destinationCount].getHex();
|
|
|
+ destinationCount++;
|
|
|
|
|
|
jsPlumb.addEndpoint(
|
|
|
- windowId,
|
|
|
+ windowDestinationId + "_answer",
|
|
|
{
|
|
|
- anchor: ['RightMiddle', 'RightMiddle', 'RightMiddle', 'RightMiddle']
|
|
|
+ anchors: ['LeftMiddle', 'LeftMiddle', 'LeftMiddle', 'LeftMiddle']
|
|
|
},
|
|
|
- sourceEndPoint
|
|
|
+ destinationEndPoint
|
|
|
);
|
|
|
-
|
|
|
- var destinationCount = 0;
|
|
|
-
|
|
|
- $(windowQuestionSelector).each(function (index) {
|
|
|
- var windowDestinationId = $(this).attr("id");
|
|
|
- destinationEndPoint.scope = scope;
|
|
|
- destinationEndPoint.paintStyle.fillStyle = colorArrayDestination[destinationCount].getHex();
|
|
|
- destinationCount++;
|
|
|
-
|
|
|
- jsPlumb.addEndpoint(
|
|
|
- windowDestinationId + "_answer",
|
|
|
- {
|
|
|
- anchors: ['LeftMiddle', 'LeftMiddle', 'LeftMiddle', 'LeftMiddle']
|
|
|
- },
|
|
|
- destinationEndPoint
|
|
|
- );
|
|
|
- });
|
|
|
});
|
|
|
+ });
|
|
|
|
|
|
- MatchingDraggable.attachBehaviour();
|
|
|
- },
|
|
|
- attachBehaviour: function () {
|
|
|
- if (!MatchingDraggable.initialized) {
|
|
|
- MatchingDraggable.initialized = true;
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- jsPlumb.ready(function () {
|
|
|
- if ($(".drag_question").length > 0) {
|
|
|
- MatchingDraggable.init();
|
|
|
-
|
|
|
- $(document).scroll(function () {
|
|
|
- jsPlumb.repaintEverything();
|
|
|
- });
|
|
|
-
|
|
|
- $(window).resize(function () {
|
|
|
- jsPlumb.repaintEverything();
|
|
|
- });
|
|
|
+ MatchingDraggable.attachBehaviour();
|
|
|
+ },
|
|
|
+ attachBehaviour: function () {
|
|
|
+ if (!MatchingDraggable.initialized) {
|
|
|
+ MatchingDraggable.initialized = true;
|
|
|
}
|
|
|
- });
|
|
|
-
|
|
|
- $(document).on('ready', function () {
|
|
|
- DraggableAnswer.init(
|
|
|
- $(".exercise-draggable-answer"),
|
|
|
- $(".droppable")
|
|
|
- );
|
|
|
- });
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+jsPlumb.ready(function () {
|
|
|
+ if ($(".drag_question").length > 0) {
|
|
|
+ MatchingDraggable.init();
|
|
|
+
|
|
|
+ $(document).scroll(function () {
|
|
|
+ jsPlumb.repaintEverything();
|
|
|
+ });
|
|
|
+
|
|
|
+ $(window).resize(function () {
|
|
|
+ jsPlumb.repaintEverything();
|
|
|
+ });
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+$(document).on('ready', function () {
|
|
|
+ DraggableAnswer.init(
|
|
|
+ $(".exercise-draggable-answer"),
|
|
|
+ $(".droppable")
|
|
|
+ );
|
|
|
+
|
|
|
+ // if shuffle answers
|
|
|
+ if ('{{ shuffle_answers }}' == '1') {
|
|
|
+ $('.exercise-draggable-answer').each(function(){
|
|
|
+ // get current ul
|
|
|
+ var $ul = $(this);
|
|
|
+ // get array of list items in current ul
|
|
|
+ var $liArr = $ul.children('li');
|
|
|
+ // sort array of list items in current ul randomly
|
|
|
+ $liArr.sort(function(a,b){
|
|
|
+ // Get a random number between 0 and 10
|
|
|
+ var temp = parseInt( Math.random()*100 );
|
|
|
+ // Get 1 or 0, whether temp is odd or even
|
|
|
+ var isOddOrEven = temp%2;
|
|
|
+ // Get +1 or -1, whether temp greater or smaller than 5
|
|
|
+ var isPosOrNeg = temp>5 ? 1 : -1;
|
|
|
+ // Return -1, 0, or +1
|
|
|
+ return( isOddOrEven*isPosOrNeg );
|
|
|
+ })
|
|
|
+ // append list items to ul
|
|
|
+ .appendTo($ul);
|
|
|
+ });
|
|
|
+ }
|
|
|
+});
|
|
|
</script>
|