//##########################################################
//Practice 2
;(function () {
'use strict';
var sectionType = 'practice2'
var _accessibleArea = $('
')
.addClass('hidden_element')
.attr('aria-live', 'polite')
var rightNum = 0;
var wrongNum = 0;
function slideInitHandler(section) {
// console.log('slideInitHandler');
section.points_possible = 1;
section.points_earned = 0;
section.section_completed = false;
var _elem = section.jq
_elem.addClass(sectionType)
}
function completeTask(section) {
section.points_earned = 1;
section.section_completed = true;
player.activity.grade_activity();
player.update_section_status();
$('.footer').html(section.jq.find('.practice2__final-instructions').text())
// document.querySelector('.navigation_button.next_button').focus();
}
function slideShowHandler(section) {
// console.log('slideShowHandler');
// console.log('_section.jq=>', section.jq);
//Practice initialization-------------------------
//get ui elements
var _elem = section.jq
var $cardContainer = _elem.find('.' + sectionType + '__card-container')
var $navContainer = _elem.find('.' + sectionType + '__nav')
var $btnType0 = _elem.find('.' + sectionType + '__btn[data-type=0]')
var $btnType1 = _elem.find('.' + sectionType + '__btn[data-type=1]')
var $nextBtn = _elem.find('.' + sectionType + '__next-card-btn')
var $feedbackIcon = _elem.find('.' + sectionType + '__feedback-icon')
var $feedbackGood = _elem.find('.' + sectionType + '__feedback--happy')
var $feedbackBad = _elem.find('.' + sectionType + '__feedback--sad')
var $correctCounter = _elem.find('.' + sectionType + '__correct-amount')
var $incorrectCounter = _elem.find('.' + sectionType + '__errors-amount')
var $oncomplete = _elem.find('.' + sectionType + '__oncomplete')
var $filteredCards = _elem.find('.' + sectionType + '__filtered-cards')
var $completeMsg = _elem.find('.' + sectionType + '__complete-message')
var filters = $cardContainer.data().filters
_elem.append(_accessibleArea)
rightNum = 0;
wrongNum = 0;
//initialize ui
$cardContainer.empty().show()
$navContainer.show()
$btnType0.attr('disabled', true)
$btnType1.attr('disabled', true)
$nextBtn.attr('disabled', true)
$feedbackIcon.show()
$feedbackGood.hide()
$feedbackBad.hide()
$oncomplete.hide()
$correctCounter.html(0)
$incorrectCounter.html(0)
//start task
//need to specify a sequence of images to show
//we need to take random 12 cards and 6 will contain stars
var colorsAvailable = ['blue', 'green', 'red', 'yellow']
var shapesAvailable = ['cross', 'square', 'star', 'circle', 'triangle']
var shapeAmountAvailable = [1, 2, 3, 4]
var arr = (filters.shape != 'star')
? [
'Blue-Cross-3-Filtered',
'Green-Square-2-',
'Yellow-Triangle-1-',
'Red-Triangle-4-Filtered',
'Green-Star-3-Filtered',
'Yellow-Cross-2-',
'Blue-Star-4-Filtered',
'Red-Circle-2-',
'Blue-Square-1-',
'Red-Triangle-3-Filtered',
'Green-Triangle-1-',
'Yellow-Cross-4-Filtered'
]
: [
'Green-Circle-3-',
'Yellow-Star-2-Filtered',
'Red-Circle-4-',
'Blue-Star-4-Filtered',
'Green-Square-2-',
'Red-Cross-3-',
'Green-Star-1-Filtered',
'Blue-Triangle-3-',
'Red-Star-4-Filtered',
'Yellow-Star-1-Filtered',
'Blue-Square-1-',
'Green-Star-2-Filtered'
]
var cardSequence =
// getNewCardSequence(
// colorsAvailable,
// shapesAvailable,
// shapeAmountAvailable,
// filters.color,
// filters.shape,
// filters.morethan,
// filters.lessthan, 12, 6)
//they ask us to use a predefined card sequence
arr.map(function (card) {
//console.log('card:',card)
var props = card.split('-')
var cardName = props[0] + props[1] + props[2]
return {
alt: cardName,
color: props[0],
shape: props[1],
shapeAmount: props[2],
filtered: props[3],
isAnswered: false,
src: './asset/activities/concept_formation/images/cards/' + cardName + '.png'
}
})
var userGuess = {
filtered: [],
notFiltered: []
}
// console.log(cardSequence)
showCard(userGuess, cardSequence, taskCompleteHandler)
function showCard(userGuess, cardSequence, onComplete) {
$btnType0.attr('disabled', false)
$btnType1.attr('disabled', false)
$nextBtn.attr('disabled', true)
var card = cardSequence[0]
// console.log('showCard, card:', card)
userMsg([
'New Card',
card.shapeAmount,
card.color,
card.shape
].join(' '))
var $cardImg = $('
')
.attr('src', card.src)
.attr('alt', card.alt)
$cardContainer.empty().append($cardImg)
$btnType0.unbind('click').bind('click', function () {
card.isAnswered = true
userGuess.filtered.push(card)
answerHandler(card, card.filtered, userGuess)
})
$btnType1.unbind('click').bind('click', function () {
card.isAnswered = true
userGuess.notFiltered.push(card)
answerHandler(card, !card.filtered, userGuess)
})
$nextBtn.unbind('click').bind('click', showNext)
function showNext() {
$feedbackBad.hide()
$feedbackGood.hide()
var newSequence = cardSequence.filter(function (card) {
return !card.isAnswered
})
if (newSequence.length) {
//put last to first
newSequence = [newSequence.pop()].concat(newSequence.slice(0))
showCard(userGuess, newSequence, onComplete)
} else {
onComplete()
}
}
function answerHandler(card, isRight, userGuess) {
(isRight) ? showFeedback('good') : showFeedback('bad')
rightNum =
userGuess.filtered
.filter(function (card) {
return card.filtered
})
.concat(userGuess.notFiltered.filter(function (card) {
return !card.filtered
}))
.length
wrongNum = userGuess.filtered.concat(userGuess.notFiltered).length - rightNum
$correctCounter.html(rightNum)
$incorrectCounter.html(wrongNum)
$btnType0.attr('disabled', true)
$btnType1.attr('disabled', true)
$nextBtn.attr('disabled', false)
}
function showFeedback(type) {
switch (type) {
case 'good':
$feedbackBad.hide()
$feedbackGood.fadeIn()
userMsg('Right!')
break
case 'bad':
$feedbackBad.fadeIn()
$feedbackGood.hide()
userMsg('Wrong!')
break
default:
console.log('no such feedback type')
}
}
}
function taskCompleteHandler() {
$btnType0.attr('disabled', true)
$btnType1.attr('disabled', true)
$nextBtn.attr('disabled', true)
$feedbackIcon.hide()
$cardContainer.hide()
$navContainer.hide()
$oncomplete.show()
$filteredCards.empty()
cardSequence
.filter(function (card) {
return card.filtered
})
.forEach(function (card) {
var $cardImg = $('
')
.attr('src', card.src)
.attr('alt', card.alt)
$filteredCards.append($cardImg)
})
userMsg('Completed! ' + rightNum + ' correct guesses. ' + wrongNum + ' errors. ' + $oncomplete.text() + ' Press NEXT button to go forward.')
completeTask(section)
}
//Handy functions => ==================================================
//returns an array of cards:["Blue-Cross-1-","Red-Triangle-4-", ... , "Yellow-Cross-2-"]
function getNewCardSequence(colorsAvailable,
shapesAvailable,
shapeAmountAvailable,
colorFilter,
shapeFilter,
moreThanFilter,
lessThanFilter,
cardsTotal,
cardsFiltered) {
if (!colorsAvailable || !shapesAvailable) {
throw new Error('specify colors, shapes and shapes amounts!')
}
var allPossibleCombinations = []
var i, j, k
for (i = 0; i < colorsAvailable.length; i++) {
for (j = 0; j < shapesAvailable.length; j++) {
for (k = 0; k < shapeAmountAvailable.length; k++) {
allPossibleCombinations.push(
uppercase(colorsAvailable[i]) + '-' +
uppercase(shapesAvailable[j]) + '-' +
shapeAmountAvailable[k] + '-'
)
}
}
}
var allFiltered = allPossibleCombinations
.filter(function (item) {
if (!colorFilter) return true
return item.search(uppercase(colorFilter)) != -1
})
.filter(function (item) {
if (!shapeFilter) return true
return item.search(uppercase(shapeFilter)) != -1
})
.filter(function (item) {
if (!moreThanFilter) return true
return parseInt(item.split('-')[2]) > moreThanFilter
})
.filter(function (item) {
if (!lessThanFilter) return true
return parseInt(item.split('-')[2]) < lessThanFilter
})
var allButFiltered = allPossibleCombinations.filter(function (item) {
return allFiltered.indexOf(item) == -1
})
var sequence = getRandomUniqueItems(allButFiltered, cardsTotal - cardsFiltered)
var mix =
getRandomUniqueItems(allFiltered, cardsFiltered)
.map(function (card) {
return card + 'Filtered'
})
function getRandomUniqueItems(arr, amount) {
var sequence = []
var breakCounter=0
while (sequence.length < amount || breakCounter>10000) {
var randomIndex = Math.floor(Math.random() * arr.length)
var found = false;
for (i = 0; i < sequence.length; i++) {
if (sequence[i] == arr[randomIndex]) {
found = true;
breakCounter++
break
}
}
if (breakCounter>10000) console.warn('getRandomUniqueItems', failed)
if (!found) sequence[sequence.length] = arr[randomIndex];
}
return sequence
}
// console.log('allPossibleCombinations', allPossibleCombinations)
// console.log('allFiltered', allFiltered)
// console.log('mix:', mix)
// console.log('sequence:', sequence)
return sequence
.concat(mix)
//randomizing array
.reduce(function (sum, item) {
if (Math.random() >= .5) {
sum.push(item)
} else {
sum = [item].concat(sum.slice(0))
}
return sum
}, [])
}
function uppercase(val) {
return val.charAt(0).toUpperCase() + val.slice(1)
}
function userMsg(str) {
_accessibleArea
.empty()
.append($('
' + str + '
'))
}
}
function slideHideHandler(section) {
//console.log('slideHideHandler', section)
//add navigation
}
window.mheContpract = window.mheContpract || {};
window.mheContpract[sectionType] = {
initialize: slideInitHandler,
show: slideShowHandler,
hide: slideHideHandler
};
})();