(function ($) { function initData($el) { var _ARS_data = $el.data('_ARS_data'); if (!_ARS_data) { _ARS_data = { rotateUnits: 'deg', scale: 0.5, rotate: 0 }; $el.data('_ARS_data', _ARS_data); } return _ARS_data; } function setTransform($el, data) { $el.css('transform', 'rotate(' + data.rotate + data.rotateUnits + ') scale(1,' + data.scale + ')'); } $.fn.rotate = function (val) { var $self = $(this), m, data = initData($self); if (typeof val == 'undefined') { return data.rotate + data.rotateUnits; } m = val.toString().match(/^(-?\d+(\.\d+)?)(.+)?$/); if (m) { if (m[3]) { data.rotateUnits = m[3]; } data.rotate = m[1]; setTransform($self, data); } return this; }; $.fn.scale = function (val) { var $self = $(this), data = initData($self); if (typeof val == 'undefined') { return data.scale; } data.scale = val; setTransform($self, data); return this; }; var curProxied = $.fx.prototype.cur; $.fx.prototype.cur = function () { if (this.prop == 'rotate') { return parseFloat($(this.elem).rotate()); } else if (this.prop == 'scale') { return parseFloat($(this.elem).scale()); } return curProxied.apply(this, arguments); }; $.fx.step.rotate = function (fx) { var data = initData($(fx.elem)); $(fx.elem).rotate(fx.now + data.rotateUnits); }; $.fx.step.scale = function (fx) { $(fx.elem).scale(fx.now); }; var animateProxied = $.fn.animate; $.fn.animate = function (prop) { if (typeof prop['rotate'] != 'undefined') { var $self, data, m = prop['rotate'].toString().match(/^(([+-]=)?(-?\d+(\.\d+)?))(.+)?$/); if (m && m[5]) { $self = $(this); data = initData($self); data.rotateUnits = m[5]; } prop['rotate'] = m[1]; } return animateProxied.apply(this, arguments); }; })(jQuery); (function ($) { function getTransformProperty(element) { var properties = ['transform', 'WebkitTransform', 'msTransform', 'MozTransform', 'OTransform']; var p; while (p = properties.shift()) { if (typeof element.style[p] != 'undefined') { return p; } } return 'transform'; } var _propsObj = null; var proxied = $.fn.css; $.fn.css = function (arg, val) { if (_propsObj === null) { if (typeof $.cssProps != 'undefined') { _propsObj = $.cssProps; } else if (typeof $.props != 'undefined') { _propsObj = $.props; } else { _propsObj = {} } } if ( typeof _propsObj['transform'] == 'undefined' && ( arg == 'transform' || ( typeof arg == 'object' && typeof arg['transform'] != 'undefined' ) ) ) { _propsObj['transform'] = getTransformProperty(this.get(0)); } if (_propsObj['transform'] != 'transform') { if (arg == 'transform') { arg = _propsObj['transform']; if (typeof val == 'undefined' && jQuery.style) { return jQuery.style(this.get(0), arg); } } else if ( typeof arg == 'object' && typeof arg['transform'] != 'undefined' ) { arg[_propsObj['transform']] = arg['transform']; delete arg['transform']; } } return proxied.apply(this, arguments); }; })(jQuery); (function() { 'use strict'; var DnDSlide = function(section) { var self = this; this.attempt = 0; this.section = section; this.section.jq.addClass('dnd_test'); this.section.points_possible = 1; this.section.points_earned = 0; this.section.section_completed = false; this.feedback = this.section.jq.find('.feedback'); this.incorrect_feedback = this.section.jq.find('.incorrect_feedback').text() || 'Sorry. Perhaps you should go back to review the activity.'; this.correct_feedback = this.section.jq.find('.correct_feedback').text() || 'Press the Next button and move forward.'; this.dragItems = []; this.dragZones = []; this.animatedObjects = []; this.ariaDragItems = []; this.numPlacedItems = 0; this.numCorrectItems = 0; this.dragItemsNodes = this.section.jq.find('.drag-item'); this.dragZones = this.section.jq.find('.drag-zone'); this.dropAreas = this.section.jq.find('.drop-area'); this.animatedObjects = this.section.jq.find('.anim'); this.dragItemsNodes.each(function(i) { var $item = $(this).data('drag-item', i); self.dragItems.push({ targets: $item.data('targets').split(','), correct: false, userTarget: null, dropped: false, zone: $item.data('zone').split(','), group: $item.data('group').split(',') }); }); addButtons.call(this); addHelperDragItems.call(this); initDraggableItems.call(this); initDropAreas.call(this); addAriaDragItems.call(this); addAriaElement.call(this); this.updateButtons.call(this); }; var addAriaElement = function() { var ariaLabel = this.section.title + '. ' + this.section.instructions; this.ariaReader = $('
'); this.section.jq.prepend(this.ariaReader); }; var getAriaText = function($item) { var text = $item.textContent; var ariaText = 'You chose ' + text + '. Click one of the next number: '; this.dropAreas.each(function(i) { var $dropArea = $(this); var isDisabled = $dropArea.droppable("option", "disabled"); if ( !isDisabled ) { ariaText += i + ' ' + $(this).data('definition') + '. ' } }); return ariaText; }; var updateAriaText = function(i) { var ariaText = getAriaText.call(this, this.dragItemsNodes[i]); $(this.ariaDragItems[i]).attr('aria-label', ariaText); }; var addAriaDragItems = function() { var container = this.dragItemsNodes[0].parentNode; this.dragItems.forEach(function(item, i) { var ariaDragItem = $(''); this.ariaDragItems.push(ariaDragItem[0]); container.appendChild(ariaDragItem[0]); ariaDragItem.bind('focus', updateAriaText.bind(this, i)); ariaDragItem.bind('keyup', initButton.bind(this, i)); }.bind(this)); }; var initButton = function(i, e) { e = e || window.event; var key = parseInt(String.fromCharCode(e.keyCode), 10); if ( !isNaN(key) && key >= 0 && key < this.dragItems.length ) { // key 0 -- this.dragItems.length - 1 var $dropArea = $(this.dropAreas[key]); var $item = $(this.dragItemsNodes[i]); var item = this.dragItems[i]; if ( !item.originalPosition ) { item.originalPosition = findPosition($item); } var isDisabled = $dropArea.droppable("option", "disabled"); if ( !isDisabled ) { dropItem.call(this, item, $item, $dropArea); } } }; var initDropAreas = function() { var self = this; this.dropAreas.droppable({ drop: function(event, ui) { var $dropArea = $(this); var $item = $(ui.draggable[0]); var item = self.dragItems[$item.data('drag-item')]; dropItem.call(self, item, $item, $dropArea); }, tolerance: 'intersect', accept: '.drag-item' }); }; var dropItem = function(item, $item, $dropArea) { var position = $dropArea.position(); position = { top: position.top / player._scaleFactor, left: position.left / player._scaleFactor }; if ( item.userTarget ) { item.userTarget.droppable('enable'); } else { this.numPlacedItems++; this.updateButtons.call(this); } item.userTarget = $dropArea; item.dropped = true; this.helper.css(position); $item.css(position); if (item.group[0] == $dropArea.context.dataset.group) { $dropArea.droppable('disable'); if (this.numPlacedItems === this.dragItems.length){ this.btnCheck.click(); } } else{ resetItem.call(self, item); this.numPlacedItems--; if ( item.originalPosition ) { $item.css(item.originalPosition); } $item.draggable('enable'); $item.removeClass('incorrect'); $item.removeClass('correct'); } }; var initDraggableItems = function() { var self = this; this.dragItemsNodes.draggable({ handle: 'svg' }); this.dragItemsNodes.draggable({ start: function() { var $item = $(this); var item = self.dragItems[$item.data('drag-item')]; item.dropped = false; resetItem.call(self, item); self.helper.css({ width: $item.width(), height: $item.height() }); if ( !item.originalPosition ) { item.originalPosition = findPosition($item); } }, drag: function(event, ui) { ui.position = { top: Math.round(ui.position.top / player._scaleFactor), left: Math.round(ui.position.left / player._scaleFactor) }; self.helper.css(ui.position); }, stop: function(event, ui) { var $item = $(this); var item = self.dragItems[$item.data('drag-item')]; self.helper2.css({ width: $item.width(), height: $item.height() }); self.helper2.css(ui.position); // Revert item with animation if ( !item.dropped ) { revertItem.call(self, item, $item, self.helper2); } }, scroll: false }); }; var findPosition = function($item) { var position = $item.position(); return { top: Math.round(position.top / player._scaleFactor), left: Math.round(position.left / player._scaleFactor) }; }; DnDSlide.prototype.updateButtons = function() { this.btnCheck.attr('disabled', ( this.numPlacedItems === this.dragItems.length ? '' : 'disabled' )); this.btnReset.attr('disabled', ( this.numPlacedItems - this.numCorrectItems ? '' : 'disabled' )); }; DnDSlide.prototype.checkSingleLabel = function(item, id) { var result = false; item.targets.forEach(function(target) { if ( target === id ) { result = true; } }); return result; }; var addHelperDragItems = function() { this.helper = $(''); this.helper2 = $(''); this.dragItemsNodes.parent().prepend(this.helper, this.helper2); }; var addButtons = function() { this.btnReset = $(''); this.btnCheck = $(''); this.btnCheck.bind('click', checkAnswer.bind(this)); this.btnReset.bind('click', resetAllItems.bind(this)); var btnContainer = $(''); btnContainer.append(this.btnReset, this.btnCheck); this.section.jq.append(btnContainer); }; var disableButtons = function() { this.btnCheck.attr('disabled', 'disabled'); this.btnReset.attr('disabled', 'disabled'); }; var resetAllItems = function() { var self = this; var canReset = false; if ( self.numCorrectItems === self.dragItems.length ) { canReset = true; } self.numCorrectItems = 0; this.dragItemsNodes.each(function() { var $item = $(this); var item = self.dragItems[$item.data('drag-item')]; if ( !item.correct || canReset || item.correct ) { resetItem.call(self, item); if ( item.originalPosition ) { $item.css(item.originalPosition); } $item.draggable('enable'); $item.removeClass('incorrect'); $item.removeClass('correct'); } }); this.feedback.each(function(){this.style.display = 'none'}); this.updateButtons.call(this); this.animatedObjects.each(function(){this.style.display = 'none'}); this.animatedObjects.each(function(){this.removeClass("correct");}); this.animatedObjects.each(function(){this.removeClass("incorrect");}); }; var resetItem = function(item) { if ( item.userTarget ) { item.userTarget.droppable('enable'); item.userTarget = null; item.correct = false; this.numPlacedItems--; } }; var revertItem = function(item, $item, helper) { resetItem.call(this, item); this.updateButtons.call(this); $item.addClass('revert'); $item.animate(item.originalPosition, 400, function() { $item.removeClass('revert'); }); helper.animate(item.originalPosition, 400); }; var animations = function() { this.animatedObjects.each(function(){this.animate({ transform: "scale(1);" }, 1500 );}); }; var checkAnswer = function() { var self = this; disableButtons.call(this); this.numCorrectItems = 0; this.dragItemsNodes.each(function(i) { var $item = $(this); var item = self.dragItems[$item.data('drag-item')]; item.correct = self.checkSingleLabel.call(self, item, item.userTarget.data('drop-area')); if ( item.correct ) { self.ariaDragItems[i].style.display = 'none'; } var className = item.correct ? 'correct' : 'incorrect'; $item.addClass(className); $item.draggable('disable'); self.numCorrectItems += item.correct; }); finishSlide.call(this); if ( this.numCorrectItems === this.dragItems.length ) { document.querySelector('.navigation_button.next_button').focus(); this.feedback.each(function(){this.style.display = 'block'}); self.btnReset.attr('disabled', ''); } else { document.querySelector('.navigation_button.next_button').focus(); this.feedback.each(function(){this.style.display = 'block'}); self.btnReset.attr('disabled', ''); } //animations(); this.animatedObjects.animate({scale:'0.5'},10); if (this.animatedObjects.length == 2){ if (this.numCorrectItems == 2){ this.animatedObjects[0].addClass("correct"); this.animatedObjects[1].addClass("incorrect"); } else { this.animatedObjects[0].addClass("incorrect"); this.animatedObjects[1].addClass("correct"); } } else { if (this.numCorrectItems == 4){ this.animatedObjects[0].addClass("correct"); this.animatedObjects[1].addClass("correct"); this.animatedObjects[2].addClass("correct"); this.animatedObjects[3].addClass("correct"); } if (this.numCorrectItems == 0) { this.animatedObjects[0].addClass("incorrect"); this.animatedObjects[1].addClass("incorrect"); this.animatedObjects[2].addClass("incorrect"); this.animatedObjects[3].addClass("incorrect"); } if (this.numCorrectItems == 2 ) { if ((this.dragItemsNodes[0].classList[2] == "correct")){ this.animatedObjects[0].addClass("correct"); this.animatedObjects[1].addClass("correct"); this.animatedObjects[2].addClass("incorrect"); this.animatedObjects[3].addClass("incorrect"); } else{ this.animatedObjects[0].addClass("incorrect"); this.animatedObjects[1].addClass("incorrect"); this.animatedObjects[2].addClass("correct"); this.animatedObjects[3].addClass("correct"); } } } this.animatedObjects.each(function(){this.style.display = 'block'}); this.animatedObjects.animate({scale:'1'},1500); }; var finishSlide = function() { this.section.points_earned = this.section.points_possible; this.section.section_completed = true; player.activity.grade_activity(); player.update_section_status(); }; DnDSlide.prototype.showSlide = function() { this.ariaReader.focus(); }; window.mheContpract = window.mheContpract || {}; window.mheContpract['practice_dnd'] = { initialize: function(section) { section.slide = new DnDSlide(section); }, show: function(section) { section.slide.showSlide(); } }; })();