/**
* Created by Mitina on 19.01.2016.
*/
(function() {
'use strict';
var KEYCODES = {
ENTER: 13,
SPACE: 32
};
var noop = function() {/* no operations */};
var event = window.mheContpract.libs['event'].user;
var ReviewSlide = function(section) {
this.section = section;
this.sectionNode = section.jq[0];
this.section.points_possible = 1;
this.section.points_earned = 0;
this.section.section_completed = false;
this.section.jq.addClass('review_2');
this.ratButtons = [];
var nameMC = this.section.jq.find('.movieclip').data('name');
this.mc = window.mheContpract.movieclips[nameMC];
for (var i = 1; i <= 5; i++) {
//this.mc.root['rat' + i].node.setAttribute("tabindex", "0");
this.mc.root['rat' + i].node.addEventListener(event.mousedown, playMC.bind(this, i));
this.mc.root['rat' + i].node.addEventListener("keydown", playMConKey.bind(this, i));
this.mc.root['rat' + i].node.style.cursor = 'pointer';
var ratBtn = $('').css({
'backgroundColor': 'rgba(0,0,0,0)',
'width': '230px',
'height': '87px',
'position': 'absolute',
'top': 145 + 88 * i,
'left': '180px',
'cursor': 'pointer',
'border': 'none'
})
.attr({
'tabindex': '0',
'aria-label': 'rat ' + i
})
.bind('click', playMC.bind(this, i))
.appendTo(this.sectionNode);
this.ratButtons.push(ratBtn);
}
this.texts = this.sectionNode.querySelectorAll('.text');
this.step = 0;
this.selectedInFirstStep = null;
addButtons.call(this);
// Add aria description
addAriaElement.call(this);
initLiveRegion.call(this);
};
var initLiveRegion = function() {
this.liveRegion = $('
');
this.section.jq.append(this.liveRegion);
};
var updateStep = function() {
this.texts[this.step].style.display = 'none';
this.step = this.step === 3 ? 0 : this.step + 1;
this.texts[this.step].style.display = '';
};
var playMConKey = function(index, evt) {
var keyCode = evt.keyCode || evt.which;
if ( keyCode === KEYCODES.ENTER || keyCode === KEYCODES.SPACE ) {
playMC.call(this, index);
}
};
var playMC = function(ind) {
this.sectionNode.focus();
if ( this.step === 0 ) {
this.selectedInFirstStep = ind;
this.ratButtons[ind - 1].hide();
//this.mc.root.onStop = updateStep.bind(this);
updateStep.call(this);
this.mc.root['rat' + ind].node.setAttribute("tabindex", "-1");
//this.mc.root['rat' + ind].node.blur();
this.mc.root['rat' + ind].play();
this.mc.root.play();
}
else if ( this.step === 1 ) {
for (var i = 1; i <= 5; i++) {
this.ratButtons[i - 1].hide();
this.mc.root['rat' + i].node.setAttribute("tabindex", "-1");
if ( i !== this.selectedInFirstStep ) {
this.mc.root['rat' + i].gotoAndStop(this.mc.root['rat' + i].labels['step2']);
this.mc.root['rat' + i].play();
}
this.mc.root.onStop = function() {
updateStep.call(this);
showNextBtn.call(this);
}.bind(this);
this.mc.root.play();
}
}
else if ( this.step === 2 ) {
updateStep.call(this);
finishSlide.call(this);
this.btnNext.hide();
this.mc.root.onStop = showResetBtn.bind(this);
this.mc.root.play();
}
else if ( this.step === 3 ) {
updateStep.call(this);
this.btnReset.hide();
for (var i = 1; i <= 5; i++) {
this.mc.root['rat' + i].gotoAndStop(0);
//this.mc.root['rat' + i].node.setAttribute("tabindex", "0");
this.ratButtons[i-1].show();
}
this.mc.root.onStop = noop;
this.mc.root.gotoAndStop(0);
}
};
var addButtons = function() {
this.btnReset = $('');
this.btnNext = $('');
this.btnNext.bind('click', playMC.bind(this));
this.btnReset.bind('click', playMC.bind(this));
var btnContainer = $('');
btnContainer.append(this.btnNext, this.btnReset);
this.section.jq.append(btnContainer);
// At first hide buttons
this.btnNext.hide();
this.btnReset.hide();
};
var showNextBtn = function() {
this.btnNext.show();
};
var showResetBtn = function() {
this.btnReset.show();
};
var addAriaElement = function() {
var ariaLabel = this.section.title + '.';
this.ariaReader = $('');
this.section.jq.prepend(this.ariaReader);
};
var finishSlide = function() {
this.section.points_earned = this.section.points_possible;
this.section.section_completed = true;
player.activity.grade_activity();
player.update_section_status();
};
ReviewSlide.prototype.showSlide = function() {
//this.ariaReader.focus();
this.sectionNode.focus();
};
window.mheContpract = window.mheContpract || {};
window.mheContpract['review_2'] = {
initialize: function(section) {
section.slide = new ReviewSlide(section);
},
show: function(section) {
section.slide.showSlide();
}
};
})();
//image_dnd_test
(function() {
'use strict';
var FEEDBACK = {
INCORRECT: 'Sorry. Perhaps you should go back to review the activity.',
CORRECT: 'Press the Next button and move forward.'
};
var ARIATEXTS = {
INTRO_END: "",
DONE_DRAG: "You have completed the Table with all answers. Press Reset button to start a new try or press Check answer button to check this try.",
COMPLETE: "You have set all the labels correctly. Good job! "
};
var KEYCODES = {
SHIFT: 16
};
var DnDSlide = function(section) {
var self = this;
this.attempt = 0;
this.section = section;
this.section.jq.addClass('dnd_test');
this.section.jq.attr('role', 'application');
this.section.points_possible = 1;
this.section.points_earned = 0;
this.section.section_completed = false;
var correct_fb = this.section.jq.find('.correct_feedback').text();
var incorrect_fb = this.section.jq.find('.incorrect_feedback').text();
this.incorrect_feedback = incorrect_fb || FEEDBACK.INCORRECT;
this.correct_feedback = correct_fb || FEEDBACK.CORRECT;
this.dragItems = [];
this.dropItems = [];
this.ariaDragItems = [];
this.numPlacedItems = 0;
this.numCorrectItems = 0;
this.dragItemsNodes = this.section.jq.find('.drag-item');
this.dropAreas = this.section.jq.find('.drop-area');
this.aria_instruction = this.section.jq.find('.aria-instruction');
var mainAria;
this.dropAreas.each( function( i ) {
i = i + 1;
$(this).append($('' + i + '
'));
if( i === self.dropAreas.length ){
mainAria = mainAria || self.section.title + ". " + self.aria_instruction.text();
mainAria += " " + ARIATEXTS.INTRO_END;
self.section.jq.attr( "aria-label", mainAria );
}
self.dropItems.push( $(this) );
});
this.dragItemsNodes.each(function(i) {
var $item = $(this).data('drag-item', i);
var ariaLabel = $item.text();
$item.attr({
'tabindex': '0',
'aria-label': ariaLabel
});
$item.keydown( onKeyHandler.bind(self, i) );
$item.keyup( onKeyHandlerUp.bind(self, i) );
$item.focus( onFocus.bind(self, i) );
$item.blur( onBlur.bind(self, i) );
self.dragItems.push({
targets: $item.data('targets').split(','),
correct: false,
userTarget: null,
dropped: false
});
});
addButtons.call(this);
addHelperDragItems.call(this);
initDraggableItems.call(this);
initDropAreas.call(this);
initLiveRegion.call( this );
this.updateButtons();
};
var initLiveRegion = function(){
this.liveRegion = $('');
this.section.jq.append( this.liveRegion );
};
var getAriaText = function($item, ind) {
var text = $item.data( 'text' ) || $item.text();
var ariaText = 'You chose ' + text + '. ' +
' Label ' + ( ind + 1 ) + ' of ' + this.dragItemsNodes.length + '.' +
' Enter one of the following numbers to select the corresponding answer: ';
this.dropAreas.each(function(i) {
var isDisabled = $(this).droppable( "option", "disabled" );
if ( !isDisabled ) {
ariaText += ( i + 1 ) + '. ' + $(this).data('definition') + '. ';
}
});
return ariaText;
};
var onFocus = function(i) {
var item = this.dragItemsNodes[i];
var $item = $( item );
var aria = getAriaText.call( this, $item, i );
$item.attr( 'aria-label', aria );
this.section.jq.addClass( 'grabbed' );
};
var onBlur = function() {
this.section.jq.removeClass('grabbed');
};
var key;
var onKeyHandlerUp = function( i, e ){
e = e || window.event;
var keyCode = e.keyCode || e.which;
// when the user releases the button
if( keyCode === KEYCODES.SHIFT ){
key = parseInt( key, 10 );
key -= 1;
setDropItem.call( this, i );
}
};
var onKeyHandler = function(i, e) {
e = e || window.event;
var keyCode = e.keyCode || e.which;
// If the shift button is pressed, we need to remember what kind of
if( e.shiftKey && keyCode !== KEYCODES.SHIFT ){
key = key || "";
key += String.fromCharCode( keyCode );
} else {
key = String.fromCharCode(e.keyCode);
key = parseInt(key, 10);
key -= 1;
setDropItem.call( this, i );
}
};
var setDropItem = function( i ){
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.correct ) return;
if ( !item.originalPosition ) {
item.originalPosition = findPosition($item);
}
var isDisabled = $dropArea.droppable('option', 'disabled');
if ( !isDisabled ) {
this.dragItemsNodes[i].setAttribute( 'tabindex', "-1" );
dropItem.call( this, item, $item, $dropArea );
}
}
key = "";
};
var initDropAreas = function() {
var self = this;
this.dropAreas.droppable({
drop: function(event, ui) {
var $dropArea = $(this);
var $dragItem = $(ui.draggable[0]);
var dragItem = self.dragItems[$dragItem.data('drag-item')];
dropItem.call(self, dragItem, $dragItem, $dropArea);
},
tolerance: 'intersect',
accept: '.drag-item'
});
};
var dropItem = function( dragItem, $dragItem, $dropArea) {
var position = $dropArea.position();
position = {
top: position.top / player._scaleFactor,
left: position.left / player._scaleFactor
};
if ( dragItem.userTarget ) {
dragItem.userTarget.droppable('enable');
}
else {
this.numPlacedItems++;
this.updateButtons.call(this);
}
dragItem.userTarget = $dropArea;
dragItem.dropped = true;
$dragItem.css(position);
$dropArea.droppable('disable');
this.helper.css(position);
};
var initDraggableItems = function() {
var self = this;
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() {
var disable = ( this.numPlacedItems === this.dropItems.length ) ? '' : 'disabled';
this.btnCheck.attr( 'disabled', disable );
this.btnReset.attr( 'disabled', disable );
if ( this.numPlacedItems === this.dropItems.length ) {
this.liveRegion.text( ARIATEXTS.DONE_DRAG );
onBlur.call( this );
}
};
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 = $('');
var instruction = $('Enter one of the following numbers to select the corresponding answer
');
this.btnCheck.bind('click', checkAnswer.bind(this));
this.btnReset.bind('click', resetAllItems.bind(this));
var btnContainer = $('');
btnContainer.append(instruction, 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;
if ( self.numCorrectItems === self.dropItems.length ) {
self.numCorrectItems = 0;
self.section.jq.focus();
this.dragItemsNodes.each(function() {
var $item = $(this);
var item = self.dragItems[$item.data('drag-item')];
resetItem.call( self, item, $item );
if ( item.originalPosition ) {
$item.css(item.originalPosition);
}
$item.attr('tabindex', '0');
$item.draggable('enable');
$item.removeClass('incorrect');
$item.removeClass('correct');
});
return;
}
this.dragItemsNodes.each(function() {
var $item = $(this);
var item = self.dragItems[$item.data('drag-item')];
if ( !item.correct ) {
resetItem.call(self, item);
if ( item.originalPosition ) {
$item.css(item.originalPosition);
}
$item.attr( 'tabindex', '0' );
$item.draggable('enable');
$item.removeClass('incorrect');
$item.removeClass('correct');
}
});
this.updateButtons.call(this);
};
var resetItem = function( item, $item ) {
if ( item.userTarget ) {
item.userTarget.droppable( 'enable' );
item.userTarget = null;
item.correct = false;
item.dropped = 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 checkAnswer = function() {
var self = this;
disableButtons.call(this);
this.numCorrectItems = 0;
var fb;
var correctAnswers = 0;
this.dragItemsNodes.each(function(i) {
var $item = $(this);
var item = self.dragItems[$item.data('drag-item')];
if( item.userTarget ){
item.correct = self.checkSingleLabel.call(self, item, item.userTarget.data('drop-area'));
if ( item.correct ) {
$item.attr('tabindex', '-1');
correctAnswers++;
}
fb = 'You have set ' + correctAnswers + ' of ' + self.dragItemsNodes.length + ' labels correctly. ';
var className = item.correct ? 'correct' : 'incorrect';
$item.addClass(className);
$item.draggable('disable');
self.numCorrectItems += item.correct;
}
});
var html;
if ( this.numCorrectItems === this.dropItems.length ) {
finishSlide.call(this);
html = '' + this.correct_feedback + '
';
Standard_Dialog.open( html, {
title: 'Correct!',
buttons: [{
text: 'OK',
click: function() {
Standard_Dialog.close();
self.btnReset.attr('disabled', '');
}
}]
}, 'correct');
this.btnReset.attr( 'disabled', '' );
this.liveRegion.text( ARIATEXTS.COMPLETE );
}
else {
html = '' + this.incorrect_feedback + '
';
Standard_Dialog.open(html, {
title: 'Incorrect',
buttons: [{
text: 'OK',
click: function() {
Standard_Dialog.close();
self.section.jq.focus();
}
}]
}, 'incorrect');
self.attempt++;
resetAllItems.call(this);
Standard_Dialog.activeElement = this.section.jq[0];
this.liveRegion.text( fb );
}
};
var finishSlide = function() {
this.section.points_earned = this.section.points_possible;
this.section.section_completed = true;
player.activity.grade_activity();
player.update_section_status();
document.querySelector('.navigation_button.next_button').focus();
};
DnDSlide.prototype.showSlide = function() {
};
window.mheContpract = window.mheContpract || {};
window.mheContpract['image_dnd_test'] = {
initialize: function(section) {
section.slide = new DnDSlide(section);
},
show: function(section) {
section.slide.showSlide();
}
};
})();