//############################################################
//Practice 1
;(function () {
'use strict';
var _stepsStorage;
var _taskStorage;
var _elem;
var firstHead, secondHead;
function stepsStorageFactory(updater, totlSteps, currStep) {
var currentStep = currStep || 1
var totalSteps = totlSteps || 1
var storageUpdater = updater || {}
return {
get currentStep() {
return currentStep
},
get totalSteps() {
return totalSteps
},
get updater() {
return updater
},
backStep: function () {
if (currentStep === 1)
return//console.log('this is the first step!');
currentStep--
storageUpdater.trigger()
},
nextStep: function () {
if (currentStep === totalSteps)
return//console.log('this is the last step!')
currentStep++
storageUpdater.trigger()
},
changeStep: function (step) {
currentStep = step
storageUpdater.trigger()
}
}
}
function taskStorageFactory(updater, wrds) {
var words = wrds || []
var userRecalled = []
var userPresented = []
var userNotPresented = []
var storageUpdater = updater || {}
return {
get userRecalled() {
return userRecalled
},
get words() {
return words
},
get updater() {
return updater
},
get userPresented() {
return userPresented
},
get userNotPresented() {
return userNotPresented
},
userAnswer: function (answer) {
//answer example: 'foo bar baz bax'
userRecalled = answer.split(' ')
.filter(function (word) {
return word !== ''
})
.filter(function (word, i, arr) {
return arr.indexOf(word) === i
})
updater.trigger()
},
clearRecognition: function () {
userPresented = []
userNotPresented = []
},
addPresented: function (word) {
userPresented.push(word)
storageUpdater.trigger()
},
addNotPresented: function (word) {
userNotPresented.push(word)
storageUpdater.trigger()
}
}
}
function storageUpdater() {
var storageHandlers = []
return {
addStorageHandler: function (callback) {
storageHandlers.push(callback)
},
trigger: function () {
storageHandlers.forEach(function (handler) {
handler()
})
}
}
}
function slideInitHandler(section) {
// console.log('slideInitHandler');
//section config
section.points_possible = 1;
section.points_earned = 0;
section.section_completed = false;
_elem = section.jq
_elem.addClass('practice1');
_elem.addClass('practice-steps');
//add Accessibility elements
var ariaLabel = section.title + '. ' //+ section.instructions
var ariaReader = $('
')
ariaReader.addClass('hidden_element')
ariaReader.attr('aria-label', ariaLabel)
ariaReader.attr('tabindex', '-1')
_elem.prepend(ariaReader)
firstHead = _elem.attr('aria-label');
secondHead = _elem.find('>.hidden_element').attr('aria-label');
}
function update() {
//update step view
_elem.find('.practice-steps__step').hide()
var $currentStep = _elem.find('.practice-steps__step').eq(_stepsStorage.currentStep - 1)
var $stepInstruction = $currentStep.find('.practice-steps__instruction').first()
$('.footer').first().empty()
.append($stepInstruction.clone().show())
$stepInstruction.hide()
$currentStep.show()
//update counter
$('.practice-steps__counter').html(_stepsStorage.currentStep + '/' + _stepsStorage.totalSteps)
switch (_stepsStorage.currentStep) {
case 1:
initSlide1()
break
case 2:
initSlide2()
break
case 3:
initSlide3()
completeTask(this.section)
break
default:
console.log('no such step:', _stepsStorage.currentStep)
}
_elem.find('[data-type="rawhtml"]').focus()
}
function updateTask() {
// console.log('updateTask');
// console.log('_taskStorage: words', _taskStorage.words);
// console.log('_taskStorage: userRecalled', _taskStorage.userRecalled);
// console.log('_taskStorage: userPresented', _taskStorage.userPresented);
// console.log('_taskStorage: userNotPresented', _taskStorage.userNotPresented);
}
function slideShowHandler(section) {
// console.log('slideShowHandler', section);
//set section storage
var totalSteps = _elem.find('.practice-steps__step').length
_stepsStorage = stepsStorageFactory(storageUpdater(), totalSteps, 1)
_stepsStorage.updater.addStorageHandler(update.bind({section: section}));
//task--------------------------------------------------------
//words-memory-task
var words = _elem.find('.word-box__list')
.data('words')
.split(' ')
.filter(function (word) {
return word !== ''
})
words.forEach(function (item, i, arr) {
var randomIndex = Math.floor(Math.random() * (i + 1));
var temp = arr[i]
arr[i] = arr[randomIndex]
arr[randomIndex] = temp
})
// console.log('words:', words)
_taskStorage = taskStorageFactory(storageUpdater(), words)
_taskStorage.updater.addStorageHandler(updateTask)
_stepsStorage.updater.trigger()
_taskStorage.updater.trigger()
}
function initSlide1() {
console.log('--------initSlide1--------> word-box__');
var $beginBtn = _elem.find('.word-box__begin')
var $feedback = _elem.find('.word-box__feedback')
var $feedbackMessage = $feedback.contents().clone()
var $wordBox = _elem.find('.word-box__list')
var maxWords = parseInt($wordBox.data('num')) || _taskStorage.words.length
$wordBox.empty()
$wordBox.hide()
.fadeIn(700)
$beginBtn.hide()
.delay(700)
.fadeIn(400)
$feedback.empty().hide()
$beginBtn
.unbind('click')
.bind('click', function () {
var currWord = 0
var dt = $wordBox.attr('data-delay') || 2000
_elem.attr('aria-label', secondHead);
$wordBox.empty()
.append('
' + _taskStorage.words[currWord] + '
')
.focus()
setTimeout(function () {
$wordBox.empty()
}, dt / 2)
$beginBtn.hide()
currWord++
var wordInterval = setInterval(function () {
if (currWord === maxWords) {
clearInterval(wordInterval)
// $wordBox.fadeOut()
$feedback
.append($feedbackMessage)
.delay(400)
.fadeIn()
$wordBox.empty()
$wordBox
.attr('disabled', true)
_stepsStorage.nextStep()
return
}
$wordBox.empty()
.append('
' + _taskStorage.words[currWord] + '
')
.focus()
setTimeout(function () {
$wordBox.empty()
}, dt / 2)
currWord++
}, dt)
})
}
function initSlide2() {
// console.log('--------initSlide2--------> recall-test__');
_elem.find('.practice-steps__description').first()
.append(_elem.find('.recall-test__description').first())
var $submit = _elem.find('.recall-test__finish')
.unbind('click')
.hide()
.attr('aria-hidden', true)
.bind('click', _stepsStorage.nextStep)
var $area = _elem.find('.recall-test__area')
.unbind('input')
.hide()
.attr('disabled', false)
.attr('aria-hidden', false)
.fadeIn(700)
var $feedback = _elem.find('.recall-test__feedback')
var $feedbackMessage = $feedback.contents().clone()
$feedback.empty().hide()
//clear old answer
$area.val('')
$area.bind('input', function () {
_taskStorage.userAnswer($area.val())
if (_taskStorage.userRecalled.length) {
$submit.fadeIn()
.attr('aria-hidden', false)
} else {
$submit.hide()
}
})
}
function initSlide3() {
// console.log('--------initSlide3--------> statistics');
var $wordsRecalled = _elem.find('.practice1__you-recalled')
var $numCorrect = _elem.find('.practice1__num-correct')
var $firstWords = _elem.find('.practice1__results-first')
var $firstWordsResult = _elem.find('.practice1__results-first+td')
var $middleWords = _elem.find('.practice1__results-middle')
var $middleWordsResult = _elem.find('.practice1__results-middle+td')
var $lastWords = _elem.find('.practice1__results-last')
var $$lastWordsResult = _elem.find('.practice1__results-last+td')
var $wordBox = _elem.find('.word-box__list')
var maxWords = parseInt($wordBox.data('num')) || _taskStorage.words.length
var correctlyRecalledWords =
_taskStorage.userRecalled
.filter(function (word, i, arr) {
return arr.slice(i + 1).indexOf(word) == -1
})
.filter(function (word) {
return _taskStorage.words.slice(0, maxWords).indexOf(word) != -1
})
var firstWords = _taskStorage.words.slice(0, 4)
var firstCorrectScore = calcScore(firstWords, correctlyRecalledWords)
var middleWords = _taskStorage.words.slice(4, 12)
var middleCorrectScore = calcScore(middleWords, correctlyRecalledWords)
var lastWords = _taskStorage.words.slice(12, 16)
var lastCorrectScore = calcScore(lastWords, correctlyRecalledWords)
function calcScore(rightAnsArr, currAnsArr) {
return Math.round(rightAnsArr
.filter(function (word) {
return currAnsArr.indexOf(word) != -1
})
.reduce(function (sum) {
sum += (100 / rightAnsArr.length)
return sum
}, 0)*100)/100
}
$wordsRecalled.html(correctlyRecalledWords.join(', '))
$numCorrect.html(correctlyRecalledWords.length)
$firstWords.html(
firstWords.map(function (word) {
if (correctlyRecalledWords.indexOf(word)!=-1) return '
' + word + ''
return word
}).join(', ')
)
$firstWordsResult.html(firstCorrectScore + '%')
$middleWords.html(
middleWords.map(function (word) {
if (correctlyRecalledWords.indexOf(word)!=-1) return '
' + word + ''
return word
}).join(', ')
)
$middleWordsResult.html(middleCorrectScore + '%')
$lastWords.html(
lastWords.map(function (word) {
if (correctlyRecalledWords.indexOf(word)!=-1) return '
' + word + ''
return word
}).join(', ')
)
$$lastWordsResult.html(lastCorrectScore + '%')
}
function completeTask(section) {
// console.log('--------finishTask--------> ');
window.mheContpract['practice1'].storage = _taskStorage
section.points_earned = 1;
section.section_completed = true;
player.activity.grade_activity();
player.update_section_status();
//#########################
var $feedback = _elem.find('.practice-1__feedback').hide()
document.querySelector('.navigation_button.next_button').focus();
/*Standard_Dialog.open($feedback.text(), {
title: 'Practice 1 completed!'
});*/
}
function slideHideHandler(section) {
// console.log('slideHideHandler', section)
//add navigation
_elem.attr('aria-label', firstHead);
_taskStorage = {}
_stepsStorage = {}
}
window.mheContpract = window.mheContpract || {};
window.mheContpract['practice1'] = {
initialize: slideInitHandler,
show: slideShowHandler,
hide: slideHideHandler
};
})();
//####################################################
//practice2
;(function () {
'use strict';
var currentStep
function slideInitHandler(section) {
// console.log('slideInitHandler');
section.points_possible = 1;
section.points_earned = 0;
section.section_completed = false;
var _elem = section.jq
_elem.addClass('practice2')
}
function completeTask(section) {
section.points_earned = 1;
section.section_completed = true;
player.activity.grade_activity();
player.update_section_status();
document.querySelector('.navigation_button.next_button').focus();
}
function slideShowHandler(section) {
// console.log('slideShowHandler', section);
currentStep = 0;
initStep(section)
}
function initStep(section) {
var _elem = section.jq.focus()
var ariaContainer = $('
')
.addClass('hidden_element')
.attr('aria-live', 'polite')
var $steps = _elem.find('.step').hide()
var $step = $steps.eq(currentStep).show()
var $initial = $step.find('.step__initial').show()
var $parts = $step.find('[class~=step__part]')
.each(function (i, item) {
item.classList.remove('step__part--shown')
item.classList.remove('step__part--active')
})
.hide()
var $btns = $step.find('.step__btn').show()
_elem.find('[data-part=general]').hide()
var descriptions = $step.find('.step__description-item')
.toArray()
.map(function (item) {
return item.textContent
})
_elem.append(ariaContainer)
if ($initial.find('.step__description-item').length) {
ariaContainer
.empty()
.append($initial.find('.step__description-item').clone())
}
$btns
.unbind('click')
.bind('click', function (e) {
$(e.target).focus()
var $id = $(this).attr('data-view')
$initial.hide()
ariaContainer.empty().append(descriptions[$id])
$parts.each(function (i, item) {
if ($(item).attr('data-part') == $id) {
item.classList.add('step__part--shown')
item.classList.add('step__part--active')
$(item).fadeIn(100).show()
$(item).find('.step__description-item').show()
} else {
// $(item).hide()
$(item).find('.step__description-item').hide()
item.classList.remove('step__part--active')
}
})
if (_elem.find('[class~=step__part][class~=step__part--shown]').length == $parts.length) {
var $dg = _elem.find('[data-part=general]').show()
ariaContainer.empty().append($dg.clone())
completeTask(section)
}
})
}
function slideHideHandler(section) {
//console.log('slideHideHandler', section)
//add navigation
}
window.mheContpract = window.mheContpract || {};
window.mheContpract['practice2'] = {
initialize: slideInitHandler,
show: slideShowHandler,
hide: slideHideHandler
};
})();