Fix sequence ordering see #7846
Julio Montoya
9 years ago
parent
16620dab75
commit
4b043729c3
@ -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> |
||||
|
||||
Loading…
Reference in new issue