Fix sequence ordering see #7846
Julio Montoya
9 years ago
parent
16620dab75
commit
4b043729c3
@ -1,243 +1,267 @@ |
|||||||
<script> |
<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 DraggableAnswer = { |
||||||
var $list = $('<div class="gallery ui-helper-reset"/>').appendTo(insertHere); |
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'), |
item.find('a.btn').remove(); |
||||||
dropedOnId = insertHere.attr('id'), |
|
||||||
originSelectId = 'window_' + droppedId + '_select', |
|
||||||
value = dropedOnId.split('_')[2]; |
|
||||||
|
|
||||||
$('#' + originSelectId + ' option') |
var droppedId = item.attr('id'), |
||||||
.filter(function (index) { |
dropedOnId = insertHere.attr('id'), |
||||||
return index === parseInt(value); |
originSelectId = 'window_' + droppedId + '_select', |
||||||
}) |
value = dropedOnId.split('_')[2]; |
||||||
.attr("selected", true); |
|
||||||
|
$('#' + originSelectId + ' option') |
||||||
var recycleButton = $('<a>') |
.filter(function (index) { |
||||||
.attr('href', '#') |
return index === parseInt(value); |
||||||
.addClass('btn btn-default btn-xs') |
}) |
||||||
.append( |
.attr("selected", true); |
||||||
"{{ "Undo" | get_lang }} ", |
|
||||||
$('<i>').addClass('fa fa-undo') |
var recycleButton = $('<a>') |
||||||
) |
.attr('href', '#') |
||||||
.on('click', function (e) { |
.addClass('btn btn-default btn-xs') |
||||||
e.preventDefault(); |
.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(); |
jsPlumb.importDefaults({ |
||||||
}); |
DragOptions: {cursor: 'pointer', zIndex: 2000}, |
||||||
}, |
PaintStyle: {strokeStyle: '#000'}, |
||||||
recycleItem: function (item) { |
EndpointStyle: {strokeStyle: '#316b31'}, |
||||||
item.fadeOut(function () { |
Endpoint: 'Rectangle', |
||||||
item |
Anchors: ['TopCenter', 'TopCenter'] |
||||||
.find('a.btn') |
}); |
||||||
.remove() |
|
||||||
.end() |
var exampleDropOptions = { |
||||||
.find("img") |
tolerance: 'touch', |
||||||
.end() |
hoverClass: 'dropHover', |
||||||
.appendTo(DraggableAnswer.gallery) |
activeClass: 'dragActive' |
||||||
.fadeIn(); |
}; |
||||||
}); |
|
||||||
|
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'), |
var selectId = params.sourceId + "_select"; |
||||||
originSelectId = 'window_' + droppedId + '_select'; |
var value = params.targetId.split("_")[2]; |
||||||
|
|
||||||
$('#' + 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({ |
$("#" + selectId + " option") |
||||||
accept: ".exercise-draggable-answer > li", |
.removeAttr('selected') |
||||||
hoverClass: "ui-state-active", |
.filter(function (index) { |
||||||
drop: function (e, ui) { |
return index === parseInt(value); |
||||||
DraggableAnswer.deleteItem(ui.draggable, $(this)); |
}) |
||||||
} |
.attr("selected", true); |
||||||
}); |
|
||||||
|
|
||||||
DraggableAnswer.gallery.droppable({ |
return true; |
||||||
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); |
|
||||||
} |
} |
||||||
|
}; |
||||||
|
|
||||||
jsPlumb.importDefaults({ |
var count = 0; |
||||||
DragOptions: {cursor: 'pointer', zIndex: 2000}, |
var sourceDestinationArray = []; |
||||||
PaintStyle: {strokeStyle: '#000'}, |
|
||||||
EndpointStyle: {strokeStyle: '#316b31'}, |
|
||||||
Endpoint: 'Rectangle', |
|
||||||
Anchors: ['TopCenter', 'TopCenter'] |
|
||||||
}); |
|
||||||
|
|
||||||
var exampleDropOptions = { |
$(windowQuestionSelector).each(function (index) { |
||||||
tolerance: 'touch', |
var windowId = $(this).attr("id"); |
||||||
hoverClass: 'dropHover', |
var scope = windowId + "scope"; |
||||||
activeClass: 'dragActive' |
var destinationColor = colorArray[count].getHex(); |
||||||
}; |
|
||||||
|
|
||||||
var destinationEndPoint = { |
var sourceEndPoint = { |
||||||
endpoint: ["Dot", {radius: 15}], |
endpoint: [ |
||||||
paintStyle: {fillStyle: MatchingDraggable.colorDestination}, |
"Dot", |
||||||
isSource: false, |
{radius: 15} |
||||||
connectorStyle: {strokeStyle: MatchingDraggable.colorDestination, lineWidth: 8}, |
], |
||||||
|
paintStyle: { |
||||||
|
fillStyle: destinationColor |
||||||
|
}, |
||||||
|
isSource: true, |
||||||
|
connectorStyle: { |
||||||
|
strokeStyle: "#8a8888", |
||||||
|
lineWidth: 8 |
||||||
|
}, |
||||||
connector: [ |
connector: [ |
||||||
MatchingDraggable.connectorType, |
MatchingDraggable.connectorType, |
||||||
{curviness: MatchingDraggable.curviness} |
{curviness: MatchingDraggable.curviness} |
||||||
], |
], |
||||||
maxConnections: 1000, |
maxConnections: 1, |
||||||
isTarget: true, |
isTarget: false, |
||||||
dropOptions: exampleDropOptions, |
dropOptions: exampleDropOptions, |
||||||
beforeDrop: function (params) { |
scope: scope |
||||||
jsPlumb.select({source: params.sourceId}).each(function (connection) { |
}; |
||||||
jsPlumb.detach(connection); |
|
||||||
}); |
|
||||||
|
|
||||||
var selectId = params.sourceId + "_select"; |
sourceDestinationArray[count + 1] = sourceEndPoint; |
||||||
var value = params.targetId.split("_")[2]; |
|
||||||
|
|
||||||
$("#" + selectId + " option") |
count++; |
||||||
.removeAttr('selected') |
|
||||||
.filter(function (index) { |
|
||||||
return index === parseInt(value); |
|
||||||
}) |
|
||||||
.attr("selected", true); |
|
||||||
|
|
||||||
return true; |
jsPlumb.addEndpoint( |
||||||
} |
windowId, |
||||||
}; |
{ |
||||||
|
anchor: ['RightMiddle', 'RightMiddle', 'RightMiddle', 'RightMiddle'] |
||||||
|
}, |
||||||
|
sourceEndPoint |
||||||
|
); |
||||||
|
|
||||||
var count = 0; |
var destinationCount = 0; |
||||||
var sourceDestinationArray = []; |
|
||||||
|
|
||||||
$(windowQuestionSelector).each(function (index) { |
$(windowQuestionSelector).each(function (index) { |
||||||
var windowId = $(this).attr("id"); |
var windowDestinationId = $(this).attr("id"); |
||||||
var scope = windowId + "scope"; |
destinationEndPoint.scope = scope; |
||||||
var destinationColor = colorArray[count].getHex(); |
destinationEndPoint.paintStyle.fillStyle = colorArrayDestination[destinationCount].getHex(); |
||||||
|
destinationCount++; |
||||||
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++; |
|
||||||
|
|
||||||
jsPlumb.addEndpoint( |
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(); |
MatchingDraggable.attachBehaviour(); |
||||||
}, |
}, |
||||||
attachBehaviour: function () { |
attachBehaviour: function () { |
||||||
if (!MatchingDraggable.initialized) { |
if (!MatchingDraggable.initialized) { |
||||||
MatchingDraggable.initialized = true; |
MatchingDraggable.initialized = true; |
||||||
} |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
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( |
jsPlumb.ready(function () { |
||||||
$(".exercise-draggable-answer"), |
if ($(".drag_question").length > 0) { |
||||||
$(".droppable") |
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> |
</script> |
||||||
|
|||||||
Loading…
Reference in new issue